/* =======================================================
   OEUVRES (peintre.css) – iPhone : hamburger fermé + titre
   et tableau avec "+"
   IMPORTANT : Ordi = INTACT (pas de colonne "+")
   ======================================================= */

/* iPhone : titre rouge centré cliquable */
.iphone-oeuvres-title{
  display: none;
}

/* Sur iPhone, votre CSS global cache parfois les H1 -> on force celui-ci */
@media (max-width: 767px){

  /* Navbar non fixe + gagner de la place */
  body.caravage-oeuvres .navbar.fixed-top{
    position: static !important;
  }
  body.caravage-oeuvres .navbar.py-3{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Hamburger visible et FERMÉ même si votre CSS global force l’ouverture */
  body.caravage-oeuvres .navbar-toggler{
    display: inline-block !important;
  }
  body.caravage-oeuvres #navbarCollapse{
    display: block !important;        /* si le CSS global force display:block */
    max-height: 0 !important;         /* fermé */
    overflow: hidden !important;
    visibility: hidden !important;
  }
  body.caravage-oeuvres #navbarCollapse.show{
    max-height: 2000px !important;    /* ouvert au clic */
    overflow: visible !important;
    visibility: visible !important;
  }

  /* Remonter le contenu sous la navbar (vous aviez margin-top:100px global) */
  body.caravage-oeuvres .container-fluid.bio{
    margin-top: 8px !important;
  }

  /* Titre iPhone (et cacher le titre ordi) */
  body.caravage-oeuvres .iphone-oeuvres-title{
    display: block !important;
    text-align: center !important;
    margin: 8px 0 12px !important;
  }
  body.caravage-oeuvres .iphone-oeuvres-title a{
    color: #dc3545 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
  }
  body.caravage-oeuvres h1.custom-h1{
    display: none !important;
  }

  /* La table doit rester lisible */
  #sortTable{
    font-size: 0.9rem;
  }

  /* Colonne contrôle "+" (ajoutée dynamiquement par JS) */
  #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;
    vertical-align: middle !important;
  }

  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% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
  }

  /* Confort DataTables */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length{
    float: none !important;
    text-align: left !important;
  }
  .dataTables_wrapper .dataTables_filter input{
    width: 100% !important;
    margin-left: 0 !important;
  }
}