/* ==========================================================================
   site.css — composants partagés hors en-tête et pied de page.
   S'inclut APRÈS commun-header-footer.css.
   Aucun hexadécimal ici : tout passe par tokens.css.
   ========================================================================== */

/* --- Étiquette technique -------------------------------------------------- */
/* Le monospace évoque la note de calcul. Éléments courts en capitales
   espacées uniquement, jamais du texte courant. */
.etiquette{font-family:var(--mono);font-size:var(--t-mono);text-transform:uppercase;
 letter-spacing:var(--ls-mono);color:var(--ink3);margin:0 0 14px}
.band--dark .etiquette{color:var(--ink-d3)}

h1{font-size:var(--t-h1);font-weight:700;line-height:var(--i-h1);text-transform:uppercase;margin:0 0 .5em}
h2{font-size:var(--t-h2);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-h2);margin:0 0 .6em}
h3{font-size:var(--t-h3);font-weight:600;margin:0 0 .5em}
/* La mesure typographique ne s'applique PAS aux bandes : un chapô ou une
   phrase d'accompagnement y tient sur une ou deux lignes, et un plafond en
   caractères y crée un vide à droite sans rien gagner en confort.
   Elle est conservée là où elle sert vraiment : le corps d'article, où le
   texte court sur des dizaines de lignes. Voir charte 3.2.
   Demande de Ronan Nicolas, 23 aout 2026. */
.chapo{font-size:var(--t-chapo)}

/* Filet de 60 × 4 px sous chaque titre de section, à 22 px du texte.
   Ponctuation reconnaissable du site, héritée du thème actuel. */
.titre-filet{position:relative;padding-bottom:calc(var(--filet-titre-y) + var(--filet-titre-h))}
.titre-filet::after{content:"";position:absolute;left:0;bottom:0;
 width:var(--filet-titre-w);height:var(--filet-titre-h);background:var(--ink)}
.band--dark .titre-filet::after{background:var(--blanc)}

/* --- Bandes --------------------------------------------------------------- */
/* Alternance stricte clair/sombre. Jamais deux bandes de même valeur à la suite. */
.band{padding:var(--bande-y) 0}
.band>*{max-width:var(--largeur);margin:0 auto;padding:0 var(--marge)}
.band--light{background:var(--page);color:var(--ink)}
.band--dark{position:relative;background:var(--noir);color:var(--ink-d1)}
.band--dark h1,.band--dark h2,.band--dark h3{color:var(--blanc)}

/* Photographie industrielle en niveaux de gris, texture et jamais sujet lisible */
.band--dark[data-photo]::before{content:"";position:absolute;inset:0;
 background-image:var(--voile),var(--photo,none);background-size:cover;background-position:center}
.band--dark>*{position:relative;z-index:1}

/* --- Grilles -------------------------------------------------------------- */
/* Gouttières de 2 px sur fond filet : les cartes semblent découpées dans une
   même plaque, pas posées côte à côte. */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere);background:var(--line)}
.grille>*{background:var(--card);padding:28px}
.band--dark .grille{background:var(--line-d)}
.band--dark .grille>*{background:var(--surface-d)}

/* Listes dans un encart : la puce reste sobre, le texte suit la bande. */
.encart ul{margin:16px 0 0;padding-left:1.2em}
.encart li{margin-bottom:.5em;font-size:15px}
.band--dark .encart li{color:var(--ink-d2)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gouttiere);background:var(--line)}
.duo>*{background:var(--card);padding:28px}

/* --- Vague de transition -------------------------------------------------- */
/* Motif hérité du pied de page des documents commerciaux ATOSSA : il fait le
   lien entre le site et les supports imprimés.
   Sélecteur à DEUX classes, sans quoi .band>* la plafonnerait à 1180px avec
   34px de marge, et .band--dark>* lui imposerait un z-index de 1. */
.band>.vague{max-width:none;margin:0;padding:0;position:absolute;left:0;bottom:-1px;
 width:100%;height:var(--vague-h);display:block;z-index:2;pointer-events:none}
.band>.vague>g{fill:var(--wavefill)}

/* La couleur de remplissage est celle de la bande QUI SUIT. Comme l'alternance
   est stricte — jamais deux bandes de même valeur à la suite — elle se déduit
   du type de la bande porteuse : aucune page n'a à la déclarer, et aucune ne
   peut se tromper. */
.band--dark >.vague>g{fill:var(--page)}
.band--light>.vague>g{fill:var(--noir)}
.band--light{position:relative}
.band:has(>.vague){padding-bottom:calc(var(--bande-y) + var(--vague-h))}

/* --- Niveaux gradués ------------------------------------------------------ */
/* Deux niveaux en vis-à-vis : le réglementaire en neutre, l'avancé dans la
   couleur de la compétence. --c-page est posé par tokens.css d'après
   data-competence sur <body> : aucune page ne redéfinit sa couleur. */
.niveaux{grid-template-columns:1fr 1fr}
.niveaux>*{border-top:var(--filet-titre-h) solid var(--ink-d3)}
.niveaux>.est-avance{border-top-color:var(--c-page)}
.niveaux .etiquette{color:var(--c-page)}

/* --- Démonstration vidéo --------------------------------------------------- */
/* Vidéo à gauche, propos à droite. Une captation de modélisation est verticale :
   en pleine largeur elle écraserait la page, dans un tiers de colonne elle
   serait illisible. */
.demo{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:32px;align-items:center;
 background:var(--surface-d);padding:28px;margin-top:var(--gouttiere);
 border-top:var(--filet-titre-h) solid var(--c-page)}
.demo video{width:100%;height:auto;display:block}
.demo h3{margin-top:0}

/* --- Accordéon ------------------------------------------------------------
   Balise NATIVE <details>/<summary> : fermée par défaut, ouverte au clic,
   atteignable au clavier, annoncée correctement par les lecteurs d'écran,
   et cherchable par la fonction Rechercher du navigateur — le tout SANS UNE
   LIGNE DE JAVASCRIPT. Un accordéon maison en aurait demandé et aurait
   reproduit la moitié de ces comportements.
   Le chevron est en ::after et non un caractère : il pivote à l'ouverture.
   Arbitrage Ronan Nicolas du 24/08/2026. */
.repli{background:var(--card);border:1px solid var(--line)}
.repli+.repli{margin-top:var(--gouttiere)}
.repli>summary{display:flex;align-items:center;gap:18px;padding:22px 26px;
 cursor:pointer;list-style:none;font-family:var(--disp);font-size:19px;
 font-weight:600;border-top:var(--filet-titre-h) solid var(--c-page,var(--ink))}
.repli>summary::-webkit-details-marker{display:none}   /* Safari */
.repli>summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
 border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
 transform:rotate(45deg);transition:transform .18s}
.repli[open]>summary::after{transform:rotate(225deg)}
.repli>summary:hover,.repli>summary:focus-visible{background:var(--tuile)}
.repli__corps{padding:0 26px 26px;border-top:1px solid var(--line)}
.repli__corps>*:first-child{margin-top:22px}

/* Sur fond sombre : même structure, surfaces inversées. */
.band--dark .repli{background:var(--surface-d);border-color:var(--line-d)}
.band--dark .repli>summary{color:var(--blanc)}
.band--dark .repli>summary:hover,
.band--dark .repli>summary:focus-visible{background:var(--survol-d)}
.band--dark .repli__corps{border-top-color:var(--line-d)}

@media(prefers-reduced-motion:reduce){.repli>summary::after{transition:none}}

/* --- Chiffres-cles dépliables ----------------------------------------------
   Quatre tuiles centrées en rangée, et le panneau qui s'ouvre occupe TOUTE LA
   LARGEUR sous la rangée — pas la seule colonne de la tuile cliquée.
   Demande de Ronan Nicolas du 24/08/2026.

   Le mécanisme : `display:contents` sur le <details> fait disparaître sa boîte,
   si bien que le <summary> et le corps deviennent des éléments de la grille.
   Le summary est ancré en ligne 1, le corps en ligne 2 sur toute la largeur.

   L'attribut `name` partagé rend l'accordéon EXCLUSIF : un seul panneau ouvert
   à la fois. Ce n'est pas cosmétique — deux panneaux ouverts occuperaient la
   même cellule de grille et se superposeraient. */
.chiffres--depliables{display:grid;grid-template-columns:repeat(4,1fr);
 gap:var(--gouttiere);background:var(--line)}
.chiffres--depliables>details{display:contents}

.chiffres--depliables>details>summary{grid-row:1;background:var(--card);
 display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
 padding:32px 22px 26px;cursor:pointer;list-style:none}
.chiffres--depliables>details>summary::-webkit-details-marker{display:none}
.chiffres--depliables>details>summary::after{content:"";width:9px;height:9px;
 border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
 transform:rotate(45deg);transition:transform .18s;margin-top:4px}
.chiffres--depliables>details[open]>summary::after{transform:rotate(225deg)}
.chiffres--depliables>details>summary:hover,
.chiffres--depliables>details>summary:focus-visible{background:var(--tuile)}

.chiffres--depliables .picto-cle{width:64px;height:64px;color:var(--ink);display:block}
.chiffres--depliables summary img{max-width:136px;height:auto;display:block}
/* Visuel de marque en portrait — la cigogne : on cale la hauteur, pas la
   largeur, sinon un 124x141 se retrouve ecrase dans un carre. */
.chiffres--depliables summary img.picto-marque{height:76px;width:auto;
 max-width:none}
.chiffres--depliables b{display:block;font-family:var(--disp);
 font-size:var(--t-chiffre);line-height:var(--i-chiffre)}
.chiffres--depliables .libelle{display:block;font-size:13.5px;color:var(--ink2)}

/* Le panneau deplie doit s'etaler sur les quatre colonnes. Le display:contents
   pose sur <details> ne suffit PAS : le navigateur enveloppe le contenu d'un
   <details> dans une boite interne, ::details-content. C'est ELLE qui devient
   l'element de grille, pas notre .repli__corps — la regle ci-dessous visait
   donc un element qui n'etait plus dans la grille, et le panneau restait dans
   sa seule colonne. Mesure : 25 % de la largeur au lieu de 100 %.
   La regle sur .repli__corps est conservee pour la mise en forme et comme
   repli sur un navigateur qui ignore ::details-content. */
.chiffres--depliables>details::details-content{grid-row:2;grid-column:1/-1}

.chiffres--depliables .repli__corps{grid-row:2;grid-column:1/-1;
 background:var(--card);border-top:1px solid var(--line);
 padding:28px 30px 32px;font-size:15px;color:var(--ink2)}
.chiffres--depliables .repli__corps>*:first-child{margin-top:0}

/* Sous 980 px, l'accordeon cesse d'etre une grille.

   Ces deux points de rupture existaient et n'ont JAMAIS fonctionne : chaque
   <summary> est epingle par `grid-row:1`, donc les quatre tuiles restent sur
   la meme ligne et la grille recree autant de colonnes implicites qu'il faut
   pour les loger — quel que soit `grid-template-columns`. La page debordait
   de 188 px sur un ecran de 375. Constate le 29/08/2026.

   Empiler des blocs ordinaires supprime la cause au lieu de la contourner :
   plus de `display:contents`, plus de ligne imposee, plus de colonne
   implicite. */
@media(max-width:980px){
 .chiffres--depliables{display:block;background:none}
 .chiffres--depliables>details{display:block;background:var(--card);
  border-bottom:1px solid var(--line)}
 .chiffres--depliables>details>summary{grid-row:auto;grid-column:auto}
 .chiffres--depliables>details::details-content,
 .chiffres--depliables .repli__corps{grid-row:auto;grid-column:auto}
 .chiffres--depliables .repli__corps{padding:0 var(--marge-mobile) 26px}
}
@media(prefers-reduced-motion:reduce){
 .chiffres--depliables>details>summary::after{transition:none}
}

/* --- Boutons -------------------------------------------------------------- */
.btn{display:inline-block;background:var(--action);color:var(--blanc);padding:17px 38px;
 font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-bouton);
 box-shadow:var(--ombre-bouton)}          /* seule ombre du site avec le panneau du menu */
.btn:hover,.btn:focus-visible{background:var(--blanc);color:var(--noir)}
.btn--contour{background:transparent;color:var(--blanc);border:1px solid var(--bord-clair);
 padding:15px 30px;font-size:15px;font-weight:600;box-shadow:none}

/* --- Cartes de mission ---------------------------------------------------- */
/* Filet LATÉRAL, une teinte par carte, cycle de quatre.
   ARBITRAGE Ronan Nicolas du 21/08/2026 : assouplit R4, qui interdisait toute
   couleur de marque sur une mission. La teinte est ici ORNEMENTALE et cycle par
   position ; elle ne désigne aucun rattachement technique. Le risque reconnu et
   accepté : un lecteur peut y lire une compétence étrangère à la page.
   Ne PAS étendre ce cycle à un secteur, un client ou un article. */
.mission{--c-mission:var(--ink);border-left:var(--filet-titre-h) solid var(--c-mission)}
.grille>.mission:nth-child(4n+1){--c-mission:var(--bleu)}
.grille>.mission:nth-child(4n+2){--c-mission:var(--ambre)}
.grille>.mission:nth-child(4n+3){--c-mission:var(--vert)}
.grille>.mission:nth-child(4n+4){--c-mission:var(--rouge)}
.mission__emetteur{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
 letter-spacing:var(--ls-mono);color:var(--ink3)}
.mission__probleme{font-family:var(--disp);font-size:18.5px;font-weight:600}
.mission__resolution{font-size:14px;border-top:1px solid var(--line);padding-top:14px}
.band--dark .mission__resolution{border-top-color:var(--line-d)}

/* --- Bandeau réglementaire / contractuel ---------------------------------- */
/* Le plancher légal en neutre, ce qui va au-delà dans la couleur de la page :
   c'est cet écart qui porte la valeur ajoutée du cabinet, il doit se voir. */
.bandeau-reglementaire .etiquette{display:inline-block;padding:5px 12px;margin-bottom:16px}
.bandeau-reglementaire .duo>*:first-child .etiquette{background:var(--tuile);color:var(--ink2)}
.bandeau-reglementaire .duo>*:last-child{border-right:var(--filet-titre-h) solid var(--c-page)}
.bandeau-reglementaire .duo>*:last-child .etiquette{color:var(--c-page);
 background:color-mix(in srgb, var(--c-page) 12%, transparent)}

/* --- Bandeau des six compétences ------------------------------------------ */
/* Les pictogrammes sont INLINÉS dans le HTML, pas chargés en <img> :
   currentColor n'a aucun effet sur un SVG externe référencé par <img>. */
.bandeau-competences{display:grid;grid-template-columns:repeat(3,1fr);
 gap:var(--gouttiere);background:var(--line)}
.bandeau-competences a{background:var(--card);color:var(--ink);padding:30px 16px 26px;
 text-align:center;border-top:3px solid transparent;
 display:flex;flex-direction:column;align-items:center;gap:14px}
.bandeau-competences span{font-size:13.5px;font-weight:500}
.bandeau-competences svg{width:var(--picto);height:var(--picto)}

.bandeau-competences a:hover,
.bandeau-competences a:focus-visible{background:var(--noir);color:var(--blanc)}
.bandeau-competences a[data-competence="extinction-automatique"]:hover{border-top-color:var(--c-extinction)}
.bandeau-competences a[data-competence="detection-incendie"]:hover    {border-top-color:var(--c-detection)}
.bandeau-competences a[data-competence="compartimentage"]:hover       {border-top-color:var(--c-compartimentage)}
.bandeau-competences a[data-competence="desenfumage"]:hover           {border-top-color:var(--c-desenfumage)}
.bandeau-competences a[data-competence="evacuation"]:hover            {border-top-color:var(--c-evacuation)}
.bandeau-competences a[data-competence="deci"]:hover                  {border-top-color:var(--c-deci)}

/* Page consultée : aucun effet au survol */
.bandeau-competences a.is-current,
.bandeau-competences a.is-current:hover{background:var(--tuile);color:var(--ink3);
 border-top-color:transparent;cursor:default}
.bandeau-competences a.is-current svg{opacity:.45}

/* Teinte du pictogramme au repos, et plus seulement au survol.
   Demande de Ronan Nicolas, 23 aout 2026. La regle ne nomme aucune couleur :
   tokens.css associe deja chaque data-competence a --c-page, donc une
   correspondance qui change la suit partout. Detection reste au VERT,
   arbitrage du 21 aout confirme le 23. */
.bandeau-competences a[data-competence] svg{color:var(--c-page)}

/* --- Carrousel de logos (charte 7.4) --------------------------------------
   Defilement de 78 s, tuiles de 150 x 78 px, logos desatures a 70 %
   d'opacite au repos et en couleur pleine au survol, sans changement de
   fond de tuile. Pause au survol et au focus clavier. En
   prefers-reduced-motion l'animation s'arrete et la bande se defile a la
   main. Le balisage double la liste des tuiles : c'est ce qui rend la
   boucle continue a -50 %. */
.carrousel{position:relative;overflow:hidden;
 mask-image:linear-gradient(90deg,transparent,var(--noir) 8%,var(--noir) 92%,transparent);
 -webkit-mask-image:linear-gradient(90deg,transparent,var(--noir) 8%,var(--noir) 92%,transparent)}
.piste{display:flex;gap:var(--gouttiere);width:max-content;
 animation:defile 78s linear infinite}
.carrousel:hover .piste,
.carrousel:focus-within .piste{animation-play-state:paused}
.ltuile{flex:0 0 auto;width:150px;height:78px;background:var(--card);
 display:flex;align-items:center;justify-content:center;padding:0 18px}
.ltuile img{max-width:100%;max-height:56%;width:auto;filter:grayscale(1);opacity:.7}
.ltuile:hover img,
.ltuile:focus-visible img{filter:none;opacity:1}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
 .piste{animation:none}
 .carrousel{overflow-x:auto}
}

/* --- Chiffres-cles ---------------------------------------------------------
   Accueil et References. Promu depuis le CSS de l'accueil le 23/08 : deux
   pages l'emploient, le laisser en CSS de page l'aurait duplique.
   Pas encore decrit en charte 7, a documenter. */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gouttiere);
 background:var(--line)}
.chiffres>div{background:var(--card);padding:24px 26px 26px}
.chiffres b{display:block;font-family:var(--disp);font-size:var(--t-chiffre);
 line-height:var(--i-chiffre)}
.chiffres span{display:block;font-size:13.5px;color:var(--ink2);margin-top:4px}
.band--dark .chiffres{background:var(--line-d)}
.band--dark .chiffres>div{background:transparent;padding:0}
.band--dark .chiffres b{color:var(--blanc)}
.band--dark .chiffres span{font-family:var(--mono);font-size:var(--t-mono);
 letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-d3)}

/* --- Bloc de preuve : un titre, un filet lateral, une liste ----------------
   Deux emplois sur References : la qualification OPQIBI et les pairs
   techniques. Le filet reprend la couleur d'action, jamais une couleur de
   competence : ces blocs ne designent aucune competence. */
.preuve{background:var(--card);border:1px solid var(--line);
 border-left:var(--filet-titre-h) solid var(--action);padding:30px 34px 34px}
.preuve+.preuve{margin-top:var(--gouttiere)}
.preuve h3{font-size:22px;margin:0 0 8px}
.preuve .sous{color:var(--ink2);margin:0 0 20px;font-size:15.5px}
.preuve ul{list-style:none;margin:0;padding:20px 0 0;
 border-top:1px solid var(--line);display:grid;gap:11px}
.preuve li{color:var(--ink2);font-size:15px;padding-left:22px;position:relative}
.preuve li::before{content:"";position:absolute;left:0;top:.62em;width:9px;
 height:1px;background:var(--action)}

/* --- Les deux cotes du marche global de performance ------------------------
   Carte sombre posee dans une bande claire : c'est une carte, pas une bande,
   l'alternance stricte ne s'y applique pas. */
.deux-roles{background:var(--noir);color:var(--ink-d1)}
.deux-roles__intro{padding:30px 34px 26px;border-bottom:1px solid var(--line-d)}
.deux-roles__intro h2{color:var(--blanc)}
.deux-roles__intro p{margin:14px 0 0;color:var(--ink-d2);font-size:15.5px}
.deux-roles__cols{display:grid;grid-template-columns:1fr 1fr}
.deux-roles__cols>div{padding:28px 34px 32px}
.deux-roles__cols>div+div{border-left:1px solid var(--line-d)}
.deux-roles__cols h3{font-size:19px;margin:0 0 10px;font-weight:600;
 color:var(--blanc)}
.deux-roles__cols p{margin:0 0 16px;color:var(--ink-d2);font-size:15px}
.deux-roles__clients{font-family:var(--mono);font-size:12.5px;color:var(--blanc)}

/* --- Familles de missions et fiches (page References) ---------------------
   Une famille = une competence, dans l'ordre des competences. La couleur du
   filet superieur vient de --c-page, pose par data-famille : ici la
   correspondance est STRICTE, ce n'est pas l'ornement des cartes de mission.
   Le logo est absent pour certains clients : un filet vertical prend sa
   place, pour que la colonne reste alignee. */
.famille{background:var(--card);border:1px solid var(--line)}
.famille+.famille{margin-top:var(--gouttiere)}
.famille__tete{display:grid;grid-template-columns:auto 1fr auto;gap:22px;
 align-items:start;padding:26px 30px 24px;
 border-top:var(--filet-titre-h) solid var(--c-page);
 border-bottom:1px solid var(--line)}
.famille__num{font-family:var(--disp);font-size:30px;font-weight:700;
 color:var(--c-page);line-height:1}
.famille__tete h3{font-size:21px;margin:0 0 6px}
.famille__tete p{margin:0;color:var(--ink2);font-size:14.5px}
.famille__lien{font-family:var(--mono);font-size:10.5px;
 letter-spacing:var(--ls-mono);color:var(--ink3);white-space:nowrap;
 padding-top:6px}
.famille__lien:hover,.famille__lien:focus-visible{color:var(--c-page)}

/* Familles en accordéon, fermées par défaut — demande de Ronan Nicolas du
   24/08/2026. Le <summary> reprend la grille de .famille__tete ; le chevron
   est généré en ::after et devient la troisième colonne, celle qu'occupait le
   lien « Voir la compétence » — ce lien descend dans le corps, car un <a>
   dans un <summary> déclenche à la fois la navigation et le repli. */
details.famille>summary.famille__tete{cursor:pointer;list-style:none}
details.famille>summary::-webkit-details-marker{display:none}   /* Safari */
details.famille>summary.famille__tete::after{content:"";width:11px;height:11px;
 border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
 transform:rotate(45deg);transition:transform .18s;align-self:center;justify-self:end}
details.famille[open]>summary.famille__tete::after{transform:rotate(225deg)}
details.famille>summary:hover,
details.famille>summary:focus-visible{background:var(--tuile)}
/* Refermée, la famille ne montre pas de filet sous son titre : il se lirait
   comme un soulignement et non comme la limite d'un contenu. */
details.famille:not([open])>summary.famille__tete{border-bottom-color:transparent}
.famille__compte{display:block;font-family:var(--mono);font-size:var(--t-mono);
 letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink3);margin-top:10px}
.famille__pied{padding:20px 30px 26px;border-top:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){
 details.famille>summary.famille__tete::after{transition:none}
}

.fiche{display:grid;grid-template-columns:132px 1fr;gap:26px;padding:24px 30px;
 border-bottom:1px solid var(--line)}
.fiche:last-child{border-bottom:0}
.fiche__logo{width:112px;height:44px;object-fit:contain;object-position:left center;
 filter:grayscale(1);opacity:.72}
.fiche__sanslogo{border-left:2px solid var(--c-page);width:2px;height:44px;
 opacity:.35}
.fiche h4{font-size:16px;margin:0 0 8px;font-weight:600}
.fiche__ville{color:var(--ink2);font-weight:400}
.fiche__meta{font-size:13px;color:var(--ink3);margin:0 0 8px}
.fiche__role{display:inline-block;font-family:var(--mono);font-size:10px;
 letter-spacing:var(--ls-mono);text-transform:uppercase;
 border:1px solid var(--line);padding:2px 8px;color:var(--ink2)}
.fiche__site{font-size:14px;color:var(--ink3);font-style:italic;margin:0 0 10px}
.fiche__mission{margin:0;font-size:16px;color:var(--ink2)}
.fiche__mission strong{font-weight:600;color:var(--ink)}

@media(max-width:760px){
 .chiffres,.deux-roles__cols{grid-template-columns:1fr}
 .deux-roles__cols>div+div{border-left:0;border-top:1px solid var(--line-d)}
 .famille__tete{grid-template-columns:auto 1fr}
 /* `white-space:nowrap` garde le lien sur une ligne a cote du titre en
    grand format. Au telephone, « Voir la competence Defense exterieure
    contre l'incendie » fait 427 px et pousse la page hors de l'ecran. */
 .famille__lien{grid-column:1/-1;padding-top:0;white-space:normal}
 .fiche{grid-template-columns:1fr;gap:14px}
 .fiche__sanslogo{display:none}
}

/* --- Formulaire (charte 7.5) ----------------------------------------------
   Concu pour une bande SOMBRE : c'est la seule valeur ou la charte le decrit.
   Les transparences passent par color-mix sur les jetons, aucune couleur
   litterale ici. Champs courts sur deux colonnes, message et consentement en
   pleine largeur. Aucun arrondi. */
.formulaire{display:grid;gap:var(--gouttiere);max-width:var(--l-long)}
.formulaire__duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gouttiere)}
.formulaire label{display:block;font-family:var(--mono);font-size:10.5px;
 letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--ink-d2)}
.formulaire label span.requis{color:var(--action)}
.formulaire input,
.formulaire select,
.formulaire textarea{display:block;width:100%;margin-top:8px;padding:15px 16px;
 font-family:var(--body);font-size:16px;color:var(--blanc);
 background:color-mix(in srgb, var(--blanc) 6%, transparent);
 border:1px solid color-mix(in srgb, var(--blanc) 22%, transparent);
 appearance:none}
.formulaire textarea{min-height:150px;resize:vertical}
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus{outline:none;border-color:var(--action);
 background:color-mix(in srgb, var(--blanc) 10%, transparent)}
.formulaire option{color:var(--ink);background:var(--card)}

/* Consentement : la case et son texte sur une ligne, en casse normale. */
.formulaire__accord{display:grid;grid-template-columns:auto 1fr;gap:12px;
 align-items:start;font-family:var(--body);font-size:14px;text-transform:none;
 letter-spacing:normal;color:var(--ink-d1)}
/* 24 px : le minimum exige pour une cible tactile. A 18 px, cocher son
   consentement au doigt releve de l'adresse — sur la seule case qui
   conditionne l'envoi du formulaire. */
.formulaire__accord input{width:24px;height:24px;margin-top:0;padding:0}
.formulaire__accord a{text-decoration:underline}

/* Piege a robots : jamais affiche, jamais annonce aux lecteurs d'ecran. */
.formulaire__leurre{position:absolute;left:-9999px}

/* Variante sur bande CLAIRE. L'alternance stricte impose une bande claire pour
   l'appel au contact des pages de competence : sans ces regles, le formulaire
   y afficherait du texte blanc sur des champs blancs.
   Ajoutee le 24/08/2026 avec le formulaire sur les six pages de competence. */
.band--light .formulaire label{color:var(--ink2)}
.band--light .formulaire input,
.band--light .formulaire select,
.band--light .formulaire textarea{color:var(--ink);background:var(--card);
 border-color:var(--line)}
.band--light .formulaire input:focus,
.band--light .formulaire select:focus,
.band--light .formulaire textarea:focus{border-color:var(--action);
 background:var(--card)}
.band--light .formulaire__accord{color:var(--ink2)}

/* --- Carte des implantations ----------------------------------------------
   Le contour suit currentColor : la carte se pose donc aussi bien sur une
   bande claire que sombre, sans regle supplementaire. Les bureaux prennent la
   couleur d'action — ici elle ne designe aucune competence, c'est un reperage.
   Trace SVG inline dans la page : un SVG appele en <img> n'aurait acces ni a
   currentColor ni aux variables. */
.carte-bloc{display:grid;grid-template-columns:1fr 1fr;gap:var(--gouttiere);
 align-items:center;background:var(--line)}
.carte-bloc>*{background:var(--card);padding:34px}
.carte{width:100%;height:auto;display:block}
.carte__contour{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.4;
 stroke-linejoin:round}
.carte__bureau{fill:var(--action)}
.carte__ville{font-family:var(--mono);font-size:12px;
 letter-spacing:var(--ls-mono);text-transform:uppercase;fill:var(--ink)}
.band--dark .carte-bloc{background:var(--line-d)}
.band--dark .carte-bloc>*{background:transparent;padding:0}
.band--dark .carte__ville{fill:var(--blanc)}

@media(max-width:760px){
 .carte-bloc{grid-template-columns:1fr}
 /* Deux champs cote a cote font 139 px chacun sur un ecran de 320 : trop
    etroits pour relire ce qu'on y saisit. Ce bloc est APRES la
    declaration de .formulaire__duo — a specificite egale, seule la
    derniere regle ecrite agit. */
 .formulaire__duo{grid-template-columns:1fr}
}

/* --- Corps d'article ------------------------------------------------------- */
/* Une seule colonne, calibrée sur le confort de lecture et non sur la largeur
   disponible : 74 caractères maximum pour un texte long. */
.article{max-width:var(--l-long);margin:0 auto;padding:0 var(--marge)}
.article h2{font-size:var(--t-h2);margin:2.2em 0 .7em}
.article h2:first-child{margin-top:0}
.article h3{font-size:var(--t-h3);margin:1.8em 0 .5em}
.article p{margin:0 0 1.15em}
.article ul,.article ol{margin:0 0 1.15em;padding-left:1.4em}
.article li{margin-bottom:.45em}
.article a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article a:hover{color:var(--action)}

/* Citation : filet latéral, pas de guillemets décoratifs ni de fond coloré */
.article blockquote{margin:1.6em 0;padding:0 0 0 24px;border-left:var(--filet-titre-h) solid var(--line);
 color:var(--ink2);font-size:var(--t-chapo)}

.article figure{margin:2em 0}
.article figure img{width:100%;height:auto}
.article figcaption{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
 letter-spacing:var(--ls-colonne);color:var(--ink3);margin-top:10px}

/* Tableau : angles vifs, filets d'un pixel, entêtes en mono — registre du
   document technique, pas de la brochure. */
.article table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:15px}
.article th,.article td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.article th{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
 letter-spacing:var(--ls-colonne);font-weight:400;background:var(--card)}

/* Notes de bas de page */
.article .notes{border-top:1px solid var(--line);margin-top:2.5em;padding-top:1.2em;
 font-size:14px;color:var(--ink2)}
.article sup a{text-decoration:none}

/* Duo sur fond sombre : même grille, surfaces inversées */
.duo--sombre{background:var(--line-d)}
.duo--sombre>*{background:var(--noir)}

/* --- Points de rupture ---------------------------------------------------- */
@media(max-width:980px){
 .band{padding:var(--bande-y-mob) 0}
 .band>*{padding:0 var(--marge-mobile)}
 .grille,.duo{grid-template-columns:1fr}
 .niveaux,.demo{grid-template-columns:1fr}
 .article{padding:0 var(--marge-mobile)}
 .article table{display:block;overflow-x:auto}
}
@media(max-width:760px){
 .bandeau-competences{grid-template-columns:repeat(2,1fr)}
}