/* Responsive layer — chargé sur toutes les pages publiques après le CSS de chaque page.
   Corrige : nav mobile absente, grilles à 3-4 colonnes qui ne s'empilent pas,
   panneaux décoratifs qui débordent sous ~560px. */

/* --- Bandeau d'annonce (« top bar ») : masqué ---
   Le gabarit reste dans le HTML des 27 pages pour la prochaine annonce ;
   pour le réafficher, il suffit de supprimer la règle ci-dessous.
   On cible la classe et non le style inline : le <footer> porte exactement
   le même `background:#091715;color:#FDFDFA` et serait masqué avec lui. */
.topbar{display:none}

/* --- Menu mobile (construit par responsive-nav.js) --- */
.mnav-toggle{display:none;position:relative;width:40px;height:40px;flex-shrink:0;background:none;border:0;cursor:pointer;padding:0;margin-left:auto}
.mnav-toggle span{position:absolute;left:8px;right:8px;height:2px;background:#091715;border-radius:2px;transition:transform 200ms cubic-bezier(0,0,.2,1),opacity 150ms linear,top 200ms cubic-bezier(0,0,.2,1)}
.mnav-toggle span:nth-child(1){top:14px}
.mnav-toggle span:nth-child(2){top:19px}
.mnav-toggle span:nth-child(3){top:24px}
.mnav-toggle.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.mnav-toggle.open span:nth-child(2){opacity:0}
.mnav-toggle.open span:nth-child(3){top:19px;transform:rotate(-45deg)}

.mnav-overlay{position:fixed;inset:0;background:rgb(9 23 21 / 0.42);opacity:0;pointer-events:none;transition:opacity 200ms linear;z-index:70}
.mnav-overlay.open{opacity:1;pointer-events:auto}

.mnav-drawer{position:fixed;top:0;right:0;bottom:0;width:min(84vw,360px);background:#FDFDFA;z-index:71;box-shadow:-16px 0 40px rgb(9 15 13 / 0.18);transform:translateX(100%);transition:transform 240ms cubic-bezier(0,0,.2,1);overflow-y:auto;padding:24px 22px 32px}
.mnav-drawer.open{transform:translateX(0)}
.mnav-list{display:flex;flex-direction:column;gap:4px}
.mnav-group{display:flex;flex-direction:column;gap:2px;margin:10px 0 6px;padding-top:10px;border-top:1px solid rgb(9 23 21 / 0.08)}
.mnav-group:first-child{border-top:0;padding-top:0;margin-top:0}
.mnav-heading{margin:0 0 4px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#8B9A97}
.mnav-link,.mnav-sublink{display:block;text-decoration:none;color:#3B4B48;font-weight:600;padding:10px 6px;border-radius:10px;font-size:15.5px}
.mnav-sublink{font-size:14.5px;color:#4A5C59;padding:8px 6px 8px 4px}
.mnav-link:hover,.mnav-sublink:hover{background:#F2F1EB;color:#091715}
.mnav-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid rgb(9 23 21 / 0.08)}
.mnav-cta{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;background:#0C7A50;color:#FDFDFA !important;font-weight:700;border-radius:999px;padding:13px 20px;font-size:15px}
body.mnav-locked{overflow:hidden}

@media (max-width:920px){
  .mnav-toggle{display:block}
  /* React réconcilie le contenu de <header> : impossible de compter sur une
     classe ajoutée en JS pour masquer la nav desktop, elle serait effacée au
     prochain rendu. On cible donc le HTML statique directement : le logo est
     toujours le premier enfant de la barre d'en-tête, tout le reste (nav,
     Connexion, CTA, liens des pages docs) doit disparaître au profit du tiroir. */
  header nav,
  header > div > a:not(:first-child){display:none !important}
  header .w, header > div{flex-wrap:nowrap}
}

/* --- Grilles à 3-4 colonnes : empiler sur mobile ---
   On ne touche qu'au nombre de colonnes : les grilles de cette taille sont
   tantôt des « rangées de stats » (séparateur border-left entre cases),
   tantôt des cartes avec leur propre bordure complète — une réinitialisation
   uniforme des bordures des enfants abîmerait l'un des deux styles. */
@media (max-width:860px){
  [style*="repeat(4,minmax"],
  [style*="repeat(4, minmax"],
  [style*="repeat(3,minmax"],
  [style*="repeat(3, minmax"]{
    grid-template-columns:1fr !important;
    row-gap:20px;
  }
}

/* --- Grilles à 2 colonnes : empiler sous 620px --- */
@media (max-width:620px){
  [style*="repeat(2,minmax"],
  [style*="repeat(2, minmax"]{
    grid-template-columns:1fr !important;
  }
}

/* --- Rangées de tableau (ex. sous-traitants) avec colonne fixe 150px :
   s'écrasent en texte illisible plutôt que de déborder ; on les empile --- */
@media (max-width:700px){
  [style*="1.1fr) minmax"],
  [style*="1fr) minmax(0px, 1fr) 150px"],
  [style*="1fr) minmax(0,1fr) 150px"]{
    grid-template-columns:1fr !important;
    row-gap:6px;
  }
  [style*="1.1fr) minmax"] [style*="justify-self:end"],
  [style*="1fr) minmax(0px, 1fr) 150px"] [style*="justify-self:end"],
  [style*="1fr) minmax(0,1fr) 150px"] [style*="justify-self:end"]{
    justify-self:start !important;
  }
}

/* --- Panneaux illustratifs (maquettes d'interface) : masqués sous 560px, trop denses pour un petit écran --- */
@media (max-width:560px){
  .pan{display:none}
}

/* --- Filets de sécurité généraux --- */
html{overflow-x:hidden}
img,iframe,video{max-width:100%}
@media (max-width:480px){
  .h1{font-size:clamp(30px,9vw,40px) !important}
}