/* ================================================================
   ATOSSA — Styles communs : base, en-tête, pied de page
   À inclure sur toutes les pages, APRÈS tokens.css et AVANT le CSS
   propre à la page.

   Les variables ne sont plus déclarées ici : elles vivent dans
   assets/css/tokens.css, seul fichier autorisé à porter des
   hexadécimaux. Toute évolution de la navigation ou du pied de page
   se fait ICI, jamais page par page.
   ================================================================ */

/* ---- Base ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);
 font-size:var(--t-corps);line-height:var(--i-corps);-webkit-font-smoothing:antialiased}
.w{max-width:var(--largeur);margin:0 auto;padding:0 var(--marge)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:var(--focus);outline-offset:var(--focus-offset)}
img{max-width:100%;display:block}
/* `overflow-wrap` : sous 360 px, « Compartimentage » a 33 px depasse la
   largeur de l'ecran et poussait toute la page hors cadre. La coupure ne
   se declenche que pour un mot qui ne tient pas — aucun titre ordinaire
   n'est touche. */
h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:-.01em;
 overflow-wrap:break-word}
.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--ls-mono);text-transform:uppercase}

/* ---- En-tête ---- */
header{background:var(--noir);position:sticky;top:0;z-index:50}
header .w{display:flex;align-items:center;gap:30px;height:var(--header-h)}
.brand img{height:46px;width:auto}
/* Le sélecteur est volontairement limité à « header nav » et non à « nav ».
   Sans cette précision, tout autre <nav> du site — sommaire d'article, liens
   précédent/suivant — hériterait silencieusement de la mise en page du menu
   principal : en ligne, poussé à droite, 25 px entre les liens. L'apparence
   de l'en-tête est strictement inchangée. */
header nav{display:flex;gap:25px;margin-left:auto;font-size:var(--t-nav)}
header nav a{color:var(--ink-d1);padding:4px 0;border-bottom:2px solid transparent;transition:.18s}
header nav a:hover,header nav a.on{color:var(--blanc);border-bottom-color:var(--action)}

/* Menu déroulant : ouverture au survol ET au focus clavier, sans script */
.navdrop{position:relative}
.navdrop>button{background:none;border:0;color:var(--ink-d1);font:inherit;font-size:var(--t-nav);padding:4px 0;
 border-bottom:2px solid transparent;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.18s}
.navdrop:hover>button,.navdrop:focus-within>button{color:var(--blanc);border-bottom-color:var(--action)}
/* Page de compétence consultée : sync.py pose .on sur l'entrée du panneau,
   l'entrée de premier niveau doit suivre — sinon le menu fermé n'indique rien. */
.navdrop:has(.panel a.on)>button{color:var(--blanc);border-bottom-color:var(--action)}
.caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 transform:rotate(45deg);margin-top:-3px;transition:.18s}
.navdrop:hover .caret,.navdrop:focus-within .caret{transform:rotate(225deg);margin-top:3px}
.navdrop .panel{position:absolute;top:100%;left:-16px;background:var(--noir2);border:1px solid var(--line-d);
 min-width:280px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
 transition:opacity .16s,transform .16s,visibility .16s;box-shadow:var(--ombre-panneau);z-index:10}
.navdrop:hover .panel,.navdrop:focus-within .panel{opacity:1;visibility:visible;transform:translateY(0)}
.navdrop .panel a{display:block;padding:11px 16px;color:var(--ink-d1);font-size:14px;border-bottom:0}
.navdrop .panel a:hover{background:var(--survol-d);color:var(--blanc)}
.navdrop .panel a.on{background:var(--survol-d);color:var(--blanc)}

.navcta{background:var(--action);color:var(--blanc);padding:11px 19px;font-size:var(--t-nav);font-weight:500}
.navcta:hover{background:var(--blanc);color:var(--noir)}

/* ---- Pied de page ---- */
footer{background:var(--noir2);color:var(--ink-d2);font-size:14px}
.ftop{padding:52px 0 34px}
.fbot{padding:0 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--marge);margin-bottom:0}
.fgrid h4{font-family:var(--mono);font-size:10.5px;letter-spacing:var(--ls-colonne);text-transform:uppercase;
 color:var(--action);margin:0 0 14px;font-weight:400}
.fgrid a{display:block;padding:4px 0;color:var(--ink-d2)}
.fgrid a:hover{color:var(--blanc)}
.fadresse{margin:16px 0 0}
.flogo img{height:52px;width:auto}
.legal{border-top:1px solid var(--line-d);padding-top:18px;display:flex;justify-content:space-between;
 gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--legal)}
.dots{display:flex;gap:6px;margin-top:14px}
.dots i{width:9px;height:9px;transform:rotate(45deg);display:block}
.dots i[data-c="extinction"]      {background:var(--c-extinction)}
.dots i[data-c="detection"]       {background:var(--c-detection)}
.dots i[data-c="compartimentage"] {background:var(--c-compartimentage)}
.dots i[data-c="desenfumage"]     {background:var(--c-desenfumage)}

/* ---- Bouton du menu mobile ----
   Masqué au-dessus de 980 px : la navigation y tient en ligne. La cible
   fait 44 px de côté, le minimum tenable au doigt. */
.navburger{display:none;align-items:center;gap:9px;min-height:44px;padding:0 12px;
 background:none;border:1px solid var(--line-d);color:var(--ink-d1);
 font:inherit;font-size:var(--t-nav);cursor:pointer}
.navburger:hover{color:var(--blanc);border-color:var(--ink-d1)}
.navburger-barres{display:flex;flex-direction:column;justify-content:center;gap:4px;width:18px}
.navburger-barres i{display:block;height:2px;background:currentColor;transition:.18s}
/* Ouvert, les trois barres deviennent une croix : l'état du panneau se lit
   sur le bouton, sans avoir à faire défiler la page. */
header[data-menu="ouvert"] .navburger-barres i:nth-child(1){transform:translateY(6px) rotate(45deg)}
header[data-menu="ouvert"] .navburger-barres i:nth-child(2){opacity:0}
header[data-menu="ouvert"] .navburger-barres i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- Points de rupture ---- */
@media(max-width:980px){

 /* La barre garde sa hauteur ; le panneau se déplie en dessous. */
 header .w{flex-wrap:wrap;height:auto;gap:12px;min-height:var(--header-h);
  padding-top:10px;padding-bottom:10px}
 .brand{order:1}
 .navcta{order:2;margin-left:auto}
 .navburger{display:flex;order:3}
 header nav{order:4;flex-basis:100%;margin-left:0;flex-direction:column;gap:0;
  border-top:1px solid var(--line-d);padding-top:6px;
  /* Un menu plus haut que l'écran doit pouvoir défiler seul, sinon ses
     dernières entrées sont hors d'atteinte sur un petit téléphone. */
  max-height:calc(100vh - var(--header-h) - 20px);overflow-y:auto}

 /* Replié uniquement si le script a pu poser la classe. Sans lui, le
    panneau reste déployé et la navigation demeure utilisable. */
 .js header[data-menu="ferme"] nav{display:none}

 /* Cibles au doigt : 44 px de haut, pleine largeur, séparées par un filet. */
 header nav a{padding:12px 0 12px 11px;border-bottom:1px solid var(--line-d);
  border-left:3px solid transparent;min-height:44px;display:flex;align-items:center}
 header nav a:hover,header nav a.on{border-bottom-color:var(--line-d);color:var(--blanc)}
 /* Liseré de la page courante. Bordure transparente posée sur TOUS les
    liens : seule la couleur change, la mise en page ne bouge pas. */
 header nav a.on{border-left-color:var(--action)}

 /* Le sous-menu n'est plus un menu : ses six liens s'affichent à plat sous
    leur intitulé, décalés. Déplier un second niveau au doigt pour six
    entrées qui tiennent à l'écran serait un appui de trop. */
 .navdrop{position:static}
 .navdrop>button{width:100%;justify-content:flex-start;padding:12px 0;
  border-bottom:1px solid var(--line-d);cursor:default;
  font-size:var(--t-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;
  color:var(--ink-d2)}
 .navdrop>button .caret{display:none}
 .navdrop .panel{position:static;opacity:1;visibility:visible;transform:none;
  background:none;border:0;box-shadow:none;min-width:0}
 .navdrop .panel a{padding:12px 0 12px 16px;font-size:var(--t-nav);
  border-bottom:1px solid var(--line-d);border-left:3px solid transparent}
 .navdrop .panel a:hover,.navdrop .panel a.on{background:none;color:var(--blanc)}
 .navdrop .panel a.on{border-left-color:var(--action)}

 .fgrid{grid-template-columns:1fr}
 /* 4 px de marge donnaient des cibles de 17 px de haut : sous le minimum
    de 24 px exige au doigt, et treize liens serres les uns sur les autres.
    Le pied s'allonge, il devient utilisable. */
 .fgrid a{min-height:44px;display:flex;align-items:center;padding:6px 0}
 .w{padding:0 var(--marge-mobile)}
}