/* ==========================================================================
   ecriture.css — Styles dédiés à la page "Atelier d’écriture"
   Objectifs :
   - Conserver l’apparence/structure sur ORDI (navbar fixed-top inchangée)
   - iPhone (standard Art en Lignes, comme page À propos) :
       * hamburger visible
       * menu fermé par défaut (ouvrable au clic)
       * navbar NON fixed-top sur mobile (évite contenus masqués)
       * titre H1 centré en rouge
   - DataTables responsive propre + colonne dédiée au "+"
   ========================================================================== */

/* Base sécurité */
* { box-sizing: border-box; }
html, body { width: 100%; }

/* ==========================================================================
   LAYOUT (ORDI)
   - La navbar est fixed-top dans votre HTML => on garde un décalage
   ========================================================================== */
.page-wrap{
  margin-top: 90px;
}

/* ==========================================================================
   TITRE
   ========================================================================== */
.page-title{
  font-size: 1.8rem;
  margin: 0 0 14px 0;
}

/* ==========================================================================
   TABLE / DataTables : couleurs et alignements
   ========================================================================== */
#sortTable th{
  color: #000;
  text-align: center;
  vertical-align: middle;
}

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

/* Titres éventuels dans les cellules */
#sortTable td h5,
#sortTable td h6{
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}

/* Liens : éviter les 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;
}

/* Positionnement du bouton “+” (Responsive details) */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before{
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   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;
}

/* Bien centrer le "+" dans sa colonne */
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)
   - Sur mobile, on annule le fixed-top pour éviter contenu masqué
   - Hamburger visible
   - Menu fermé par défaut, ouvert seulement quand Bootstrap ajoute .show
   IMPORTANT : n’impacte PAS l’ordi (media query)
   ========================================================================== */
@media (max-width: 991.98px){

  /* Annuler fixed-top uniquement sur mobile */
  body .navbar.fixed-top{
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
  }

  /* Comme on annule le fixed-top, on annule aussi tout padding-top compensatoire */
  body{
    padding-top: 0 !important;
  }

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

  /* Menu : fermé par défaut (même si un CSS global le force) */
  body nav.navbar #navbarCollapse.collapse{
    display: none !important;
  }

  /* Menu : ouvert uniquement au clic (Bootstrap ajoute .show) */
  body nav.navbar #navbarCollapse.collapse.show{
    display: block !important;
  }
}

/* ==========================================================================
   MOBILE (iPhone)
   ========================================================================== */
@media (max-width: 576px){

  /* Sécurité : éviter tout scroll horizontal (souvent causé par controls DT) */
  html, body{
    overflow-x: hidden !important;
  }

  /* Comme la navbar n'est plus fixed-top sur iPhone,
     on réduit le margin-top (sinon “gros vide” inutile) */
  main.page-wrap{
    margin-top: 16px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Titre iPhone : visible + centré + rouge */
  h1.page-title{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    text-align: center !important;
    color: #dc3545 !important; /* rouge Bootstrap "danger" */

    position: relative !important;
    z-index: 2 !important;

    margin: 0 0 10px 0 !important;
    font-size: 1.4rem !important;
    line-height: 1.15 !important;
  }

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

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

  /* Cellules : autoriser le retour à la ligne */
  #sortTable td{
    white-space: normal;
  }

  /* DataTables : contrôles en colonne */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length{
    float: none !important;
    text-align: left !important;
  }

  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label{
    width: 100%;
  }

  /* ==========================================================================
     DataTables SEARCH — empêcher le champ de déborder
     (cible directe DataTables : #sortTable_filter)
     ========================================================================== */
  #sortTable_filter{
    width: 100% !important;
    margin: 0 auto 8px auto !important;
  }

  /* Le label contient “Rechercher :” + input => on le force en colonne centrée */
  #sortTable_filter label{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    white-space: normal !important;
  }

  /* Champ de recherche : largeur limitée, impossible de déborder */
  #sortTable_filter input{
    box-sizing: border-box !important;
    width: min(260px, 92vw) !important;
    max-width: 92vw !important;

    margin: 6px auto 0 auto !important;
    display: block !important;
  }
}