/* ------------------------------------------------------------------
   Adaptation aux petits écrans — SIGFE
   Chargé après le CSS Tailwind compilé, dans base.html.
   ------------------------------------------------------------------ */

/* Tout tableau devient défilable horizontalement sans casser la page.
   Le conteneur .tw est posé automatiquement par le script de base.html. */
.tw{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw>table{min-width:640px}
.tw.tw-large>table{min-width:860px}

/* Barre latérale : hors écran sous 1024 px, ouverte par le bouton menu. */
@media (max-width:1023.98px){
  #barre-laterale{position:fixed;top:0;bottom:0;left:0;z-index:50;width:264px;
    transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:0 10px 40px -12px rgba(15,53,87,.35)}
  #barre-laterale.ouverte{transform:translateX(0)}
  #voile-nav{position:fixed;inset:0;z-index:45;background:rgba(15,53,87,.45);
    backdrop-filter:blur(2px);display:none}
  #voile-nav.ouvert{display:block}
  #btn-menu{display:inline-flex}
  main{width:100%}
}
@media (min-width:1024px){#btn-menu{display:none}#voile-nav{display:none!important}}

/* En-tête : la marque se réduit, le sélecteur de fonds passe à la ligne. */
@media (max-width:1279.98px){
  .entete-marque .sous-titre{display:none}
  .hsel{max-width:180px}
}
@media (max-width:1023.98px){
  .entete-barre{height:auto;padding-top:.6rem;padding-bottom:.6rem;
    flex-wrap:wrap;row-gap:.6rem;padding-left:1rem;padding-right:1rem}
  .entete-marque .titre{font-size:15px;line-height:1.2}
  .entete-marque img{height:2.25rem;width:2.25rem}
  .entete-contexte{order:3;width:100%;justify-content:flex-start}
  .hsel{max-width:none;flex:1}
}
@media (max-width:639.98px){
  .entete-marque .titre{font-size:13.5px}
  .entete-marque .sur-titre{display:none}
  .entete-contexte label{display:none}
}

/* Contenu : marges réduites sur mobile. */
@media (max-width:767.98px){
  .zone-contenu{padding:1rem .85rem 2rem}
  h1.text-\[28px\]{font-size:22px;line-height:1.25}
  .page-sub{font-size:.85rem}
  .card{border-radius:12px}
  .kpi .v,.kpi-doc .v{font-size:1.05rem}
  /* Les barres d'actions passent en pleine largeur */
  .barre-actions{flex-direction:column;align-items:stretch;gap:.5rem}
  .barre-actions .btn{width:100%;justify-content:center}
  /* Grilles de filtres : une colonne */
  .filtres{grid-template-columns:1fr!important}
}

/* Document du rapport de gestion */
@media (max-width:767.98px){
  .doc-cover{padding:1.4rem 1.15rem}
  .doc-cover:after{display:none}
  .doc-body{padding:1.25rem 1.15rem}
  .doc-cover .font-display{font-size:20px!important;line-height:1.2}
  .sec h2{font-size:1.1rem}
  .sign{grid-template-columns:1fr;gap:1.5rem}
}

/* Modales : plein écran sur mobile */
@media (max-width:639.98px){
  #aide-modal{padding:0}
  #aide-modal>.card{margin-top:0;max-height:100vh;border-radius:0;max-width:none}
  #aide-btn{top:auto;bottom:1rem;right:1rem}
}

/* Confort tactile : cibles d'au moins 40 px de haut */
@media (pointer:coarse){
  .navlink{padding-top:.7rem;padding-bottom:.7rem}
  .btn{min-height:40px}
}

/* Grilles d'indicateurs : deux colonnes sur mobile plutot qu'une seule,
   les valeurs restent lisibles et la page reste courte. */
@media (max-width:767.98px){
  .doc-body>.grid,.sec>.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .kpi-doc{padding:.7rem .8rem}
  .kpi-doc .l{font-size:.68rem}
}
@media (max-width:400px){
  .doc-body>.grid,.sec>.grid{grid-template-columns:1fr}
}