/* ==========================================================================
   focus.css — Page "Focus" (Ressources/Focus)
   Objectifs :
   - Standard iPhone Art en Lignes (comme Bonus)
       * hamburger visible
       * menu fermé par défaut (ouvrable au clic)
       * navbar NON fixed-top sur mobile
       * titre rouge centré (Focus)
   - DataTables Responsive
       * colonne 0 dédiée au "+"
       * "+" bien centré
       * colonne Artiste raccourcie pour laisser voir Œuvre
   - Ne pas impacter la version ordi
   ========================================================================== */

* { box-sizing: border-box; }
html, body { width: 100%; }

/* ---------------------------
   ORDI : on garde fixed-top
   --------------------------- */
.focus-wrap{
  margin-top: 90px;
}

/* Titre (ordi) */
.focus-title{
  font-size: 1.8rem;
  margin: 0 0 8px 0;
}

/* ---------------------------
   TABLE : base
   --------------------------- */
#sortTable{
  width: 100% !important;
}

#sortTable th{
  color: #000;
  text-align: center;
  vertical-align: middle;
}

#sortTable td{
  color: #000;
  vertical-align: top;
}

/* Liens : éviter débordements */
#sortTable a{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* DataTables : champs plus confortables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  min-height: 34px;
}

/* ---------------------------
   Colonne dédiée au contrôle "+"
   (DataTables Responsive)
   --------------------------- */
#sortTable td.dtr-control,
#sortTable th.dtr-control{
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  padding-left: .6rem !important;
  padding-right: .3rem !important;
  white-space: nowrap;
}

/* Centrer le + */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before{
  left: .25rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   MOBILE (standard iPhone Art en Lignes)
   ========================================================================== */

/* Mobile : gérer la navbar (hamburger visible, menu fermé par défaut) */
@media (max-width: 991.98px){

  /* On annule fixed-top sur mobile */
  .navbar.fixed-top{
    position: static !important;
    top: auto !important;
  }

  /* Comme on annule fixed-top, pas de padding-top */
  body{
    padding-top: 0 !important;
  }

  /* Hamburger toujours visible */
  .navbar-toggler{
    display: block !important;
  }

  /* Menu fermé par défaut */
  #navbarCollapse{
    display: none !important;
  }

  /* Ouvert seulement quand Bootstrap ajoute .show */
  #navbarCollapse.show{
    display: block !important;
  }
}

/* iPhone : titre rouge centré + colonnes lisibles */
@media (max-width: 576px){

  .focus-wrap{
    margin-top: 16px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ✅ Titre rouge centré (coup de massue contre style.css) */
  h1.focus-title{
    text-align: center !important;
    color: #dc3545 !important;
    font-size: 1.4rem !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
  }

  /* Table : ne pas casser le swipe horizontal si besoin */
  .table-responsive{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Champ de recherche : jamais débordant */
  #sortTable_filter{
    width: 100% !important;
    margin: 0 auto 8px auto !important;
  }

  #sortTable_filter label{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  #sortTable_filter input{
    width: min(260px, 92vw) !important;
    max-width: 92vw !important;
    margin: 6px auto 0 auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* ✅ Réduire "Artiste" (2e colonne : + / Artiste / Œuvre / ...) */
  #sortTable th:nth-child(2),
  #sortTable td:nth-child(2){
    width: 120px !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ✅ Laisser de la place à "Œuvre" */
  #sortTable th:nth-child(3),
  #sortTable td:nth-child(3){
    min-width: 160px !important;
    white-space: normal !important;
  }

  /* Table un peu plus compacte */
  #sortTable{
    font-size: 0.9rem;
  }

  #sortTable th,
  #sortTable td{
    padding: .35rem .45rem;
  }
}