/* ==========================================================================
   bonus.css — Page "Bonus" (Ressources)
   - ORDI : navbar fixed-top conservée (décalage 90px)
   - iPhone : hamburger visible + menu fermé par défaut + titre rouge centré
   - DataTables : colonne "+" centrée
   - Search : champ non débordant
   ========================================================================== */

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

/* =========================
   ORDI : décalage sous navbar fixed-top
   ========================= */
.container-fluid{
  margin-top: 90px;
}

/* Titre */
h1{
  font-size: 1.8rem;
}

/* Table */
th{
  color: #000;
  text-align: center;
  vertical-align: middle;
}
td{
  color: #000;
  vertical-align: top;
}

/* =========================
   Colonne dédiée au contrôle "+"
   ========================= */
#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;
}

/* Centrage du "+" */
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%);
}

/* ==========================================================
   NAVBAR MOBILE — standard iPhone Art en Lignes (comme À propos)
   ========================================================== */
@media (max-width: 991.98px){

  body .navbar.fixed-top{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
  }

  body{ padding-top: 0 !important; }

  .navbar-toggler{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* menu fermé par défaut */
  #navbarCollapse.collapse{ display: none !important; }
  /* menu ouvert uniquement au clic */
  #navbarCollapse.collapse.show{ display: block !important; }
}

/* ==========================================================
   iPhone : titre rouge centré + DataTables sans débordement
   ========================================================== */
@media (max-width: 576px){

  html, body{ overflow-x: hidden !important; }

  /* plus besoin des 90px car navbar n’est plus fixed */
  .container-fluid{
    margin-top: 16px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Titre rouge centré */
  h1{
    text-align: center !important;
    color: #dc3545 !important;
    font-size: 1.4rem !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.15 !important;
  }

  /* DataTables : éviter débordements de grille bootstrap */
  #sortTable_wrapper .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Search : forcer un champ plus court */
  #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;
  }
}