/* ==========================================================================
   SOLUCOM — solucomvideoprotection.fr
   Feuille de style unique de la maquette (toutes pages).
   Direction : « L'Accent » / signe « Le porche ».
   --------------------------------------------------------------------------
   Palette (charte figée) :
     encre  #191D24 · tuile #BF5B33 (claire #D96F45 sur fond sombre)
     blanc cassé #FAF7F2 · bleu nuit #0F1B2E
   Ajouts contrôlés :
     --sable #E2DCD2 : LA neutre intermédiaire autorisée (filets, fonds doux)
     --tuile-encree #A6491F : dérivé AA du tuile — obligatoire pour le petit
       texte et les fonds de bouton (le tuile #BF5B33 ne fait que 4,1:1 sur
       blanc cassé : réservé aux gros corps ≥ 24 px et aux aplats décoratifs).
   Aucune ressource externe. Polices système uniquement.
   ========================================================================== */

/* ---------- 1. Jetons ---------------------------------------------------- */
:root{
  --encre:#191D24;
  --nuit:#0F1B2E;
  --creme:#FAF7F2;
  --blanc:#FFFFFF;
  --tuile:#BF5B33;
  --tuile-claire:#D96F45;
  --tuile-encree:#A6491F;
  --sable:#E2DCD2;

  --texte:var(--encre);
  --texte-2:rgba(25,29,36,.72);
  --ligne:var(--sable);
  --ligne-forte:rgba(25,29,36,.5);

  --nuit-texte:var(--creme);
  --nuit-texte-2:rgba(250,247,242,.78);
  --nuit-ligne:rgba(250,247,242,.16);
  --nuit-carte:rgba(250,247,242,.06);

  --focus:var(--tuile-encree);

  --police:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --rayon:16px;
  --rayon-porche:999px 999px 16px 16px;
  --largeur:1120px;
  --gouttiere:clamp(18px,4vw,32px);
}

/* ---------- 2. Socle ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}
body{
  margin:0;
  background:var(--creme);
  color:var(--texte);
  font-family:var(--police);
  font-size:1.0625rem;            /* 17 px */
  line-height:1.65;
  -webkit-text-size-adjust:100%;
  overflow-wrap:break-word;
}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0}
a{color:var(--tuile-encree)}
a:hover{color:var(--encre)}
::selection{background:var(--tuile);color:var(--blanc)}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}

.evitement{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--encre);color:var(--creme);
  padding:12px 22px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none;
}
.evitement:focus{left:0}

/* ---------- 3. Typographie ------------------------------------------------ */
h1{font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.12;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.2;font-weight:800;letter-spacing:-.015em}
h3{font-size:1.17rem;line-height:1.35;font-weight:700}

.kicker{
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tuile-encree);margin:0 0 .8rem;
}
.chapo{font-size:clamp(1.08rem,2vw,1.28rem);line-height:1.55;color:var(--texte-2);max-width:62ch}
.texte-2{color:var(--texte-2)}

/* Sur fond nuit */
.surnuit{background:var(--nuit);color:var(--nuit-texte);--focus:var(--tuile-claire)}
.surnuit .kicker{color:var(--tuile-claire)}
.surnuit .chapo,.surnuit .texte-2{color:var(--nuit-texte-2)}
.surnuit a{color:var(--nuit-texte)}
.surnuit a:hover{color:var(--tuile-claire)}

/* ---------- 4. Structure -------------------------------------------------- */
.conteneur{max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
.tranche{padding-block:clamp(3.2rem,8vw,5.6rem)}
.tranche-blanc{background:var(--blanc)}
.tranche-filet{border-top:2px solid var(--ligne)}

.tete-section{max-width:72ch;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.tete-section h2{margin-bottom:.6rem}
.tete-section .chapo{margin-top:.2rem}

.grille{display:grid;gap:clamp(16px,2.5vw,24px)}
@media (min-width:700px){
  .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:980px){
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- 5. Pictos (contrat : planche _pictos.svg incluse en haut de body)
   Substitution : <svg class="picto" aria-hidden="true"><use href="#p-audit"/></svg>
   Le trait prend currentColor → c'est ici qu'on les colore.
   Seul le point tuile #BF5B33 (8 pictos sur 22) garde sa couleur propre. ---- */
.picto{
  display:block;width:48px;height:48px;flex:none;
  color:var(--encre);
}
.picto-24{width:24px;height:24px}
.surnuit .picto{color:var(--creme)}
.picto-ligne{display:inline-block;vertical-align:-6px;margin-right:10px;
  width:26px;height:26px;color:var(--tuile-encree)}

/* ---------- 6. Boutons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:11px 26px;border-radius:999px;
  font:700 1.02rem/1.2 var(--police);text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-plein{background:var(--tuile-encree);color:var(--blanc)}
.btn-plein:hover{background:#8F3D18;color:var(--blanc)}
.btn-grand{min-height:56px;padding:14px 34px;font-size:1.1rem}
.btn-contour{border-color:var(--ligne-forte);color:var(--encre);background:transparent}
.btn-contour:hover{border-color:var(--encre);color:var(--encre)}
.surnuit .btn-contour{border-color:rgba(250,247,242,.55);color:var(--nuit-texte)}
.surnuit .btn-contour:hover{border-color:var(--creme);background:rgba(250,247,242,.08);color:var(--creme)}

/* ---------- 7. En-tête (bleu nuit, charte : hauteur logo 28–36 px) -------- */
.entete{
  position:sticky;top:0;z-index:50;
  background:var(--nuit);color:var(--nuit-texte);
  border-bottom:1px solid var(--nuit-ligne);
  --focus:var(--tuile-claire);
}
.entete-inner{
  max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere);
  display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap;
}
.marque{display:flex;align-items:center;padding:8px 0;text-decoration:none}
.marque-logo{display:block;height:32px;width:auto}

.menu-etat{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.menu-bouton{
  margin-left:auto;display:flex;align-items:center;gap:10px;
  min-height:44px;padding:8px 14px;border-radius:10px;cursor:pointer;
  color:var(--nuit-texte);font-weight:700;font-size:.95rem;
  border:1px solid var(--nuit-ligne);user-select:none;
}
.menu-etat:focus-visible + .menu-bouton{outline:3px solid var(--tuile-claire);outline-offset:3px}
.menu-trait{
  display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;
}
.menu-trait::before,.menu-trait::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;
}
.menu-trait::before{top:-6px}
.menu-trait::after{top:6px}

.nav{display:none;width:100%}
.menu-etat:checked ~ .nav{display:block;padding-bottom:14px}
.nav-liste{list-style:none;display:flex;flex-direction:column;gap:2px}
.nav-liste a{
  display:flex;align-items:center;min-height:46px;padding:8px 12px;border-radius:10px;
  color:var(--nuit-texte-2);text-decoration:none;font-weight:600;font-size:.98rem;
}
.nav-liste a:hover{color:var(--creme);background:var(--nuit-carte)}
.nav-cta{margin-top:10px;width:100%}

/* Onglet actif — posé par le serveur (nav_actif() : class="actif" + aria-current) */
.nav a[aria-current="page"],
.nav a.actif{
  color:var(--creme);
  box-shadow:inset 0 -3px 0 var(--tuile-claire);
  border-radius:10px 10px 4px 4px;
}

@media (min-width:980px){
  .menu-bouton{display:none}
  .nav{display:flex !important;width:auto;margin-left:auto;align-items:center;gap:14px;padding:0}
  .menu-etat:checked ~ .nav{padding:0}
  .nav-liste{flex-direction:row;gap:2px}
  .nav-liste a{min-height:64px;padding:8px 12px;border-radius:0;font-size:.94rem}
  .nav-liste a:hover{background:transparent}
  .nav-cta{margin-top:0;width:auto;min-height:42px;padding:8px 20px;font-size:.94rem}
}

/* ---------- 8. Héros ------------------------------------------------------ */
.heros{position:relative;overflow:hidden}
.heros-inner{
  position:relative;display:grid;gap:clamp(26px,5vw,48px);
  padding-block:clamp(3rem,7vw,5.2rem);
  align-items:center;
}
@media (min-width:900px){
  .heros-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.heros h1{max-width:18ch}
.heros .chapo{margin-top:1.1rem}
.heros-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.9rem}
.heros-note{margin-top:1.1rem;font-size:.92rem;color:var(--nuit-texte-2)}

/* L'arc décoratif en fond de héros (géométrie du signe, teinte de nuit) */
.heros-arc{
  position:absolute;pointer-events:none;
  width:min(72vw,760px);right:-14vw;top:-18%;opacity:.5;
}
.heros-arc path{stroke:rgba(250,247,242,.07)}
.heros-arc circle{fill:rgba(217,111,69,.14)}

/* Photo en « porche » : cadre en arc + point tuile posé dessous.
   Sans photo, le cadre reste un aplat sable : la page tient debout. */
.porche{position:relative;justify-self:center;width:min(100%,420px);padding-bottom:26px}
.porche .media{aspect-ratio:4/5;border-radius:var(--rayon-porche)}
.porche::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--tuile-claire);
}

/* Héros de page intérieure */
.heros-page{position:relative;overflow:hidden}
.heros-page .heros-inner{grid-template-columns:1fr;padding-block:clamp(2.6rem,6vw,4rem)}
.heros-page h1{max-width:24ch}
.heros-page .chapo{max-width:66ch}

/* ---------- 9. Le signe en séparateur ------------------------------------- */
.signe-sep{display:block;width:56px;height:auto;margin:0 0 1.1rem}
.signe-sep path{stroke:var(--encre)}
.signe-sep circle{fill:var(--tuile)}
.surnuit .signe-sep path{stroke:var(--creme)}
.surnuit .signe-sep circle{fill:var(--tuile-claire)}

/* ---------- 10. Cartes ---------------------------------------------------- */
.carte{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:clamp(20px,3vw,28px);
  display:flex;flex-direction:column;gap:12px;
}
.carte .picto{margin-bottom:4px}
.carte h3{letter-spacing:-.01em}
.carte p{color:var(--texte-2);font-size:.99rem}
.carte-lien{margin-top:auto;font-weight:700;font-size:.95rem;text-decoration:none}
.carte-lien:hover{text-decoration:underline}

.surnuit .carte{background:var(--nuit-carte);border-color:var(--nuit-ligne)}
.surnuit .carte p{color:var(--nuit-texte-2)}

/* Numéro d'étape */
.etape-num{
  font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1;
  color:var(--tuile);
}

/* ---------- 11. Bande de chiffres ----------------------------------------- */
.chiffres{list-style:none;display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:700px){.chiffres{grid-template-columns:repeat(3,minmax(0,1fr))}}
.chiffres li{
  border-top:3px solid var(--tuile);padding-top:14px;
}
.chiffre-n{font-size:clamp(2.1rem,4vw,2.9rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;color:var(--encre)}
.chiffre-l{color:var(--texte-2);margin-top:.35rem;font-size:.98rem}
.surnuit .chiffre-n{color:var(--creme)}
.surnuit .chiffres li{border-top-color:var(--tuile-claire)}
.surnuit .chiffre-l{color:var(--nuit-texte-2)}

/* ---------- 12. Images & emplacements ------------------------------------- */
.media{
  position:relative;overflow:hidden;border-radius:var(--rayon);
  background:var(--sable);
}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media-169{aspect-ratio:16/9}
.media-43{aspect-ratio:4/3}
.media-11{aspect-ratio:1/1}
figure.figure{display:flex;flex-direction:column;gap:10px}
figure.figure figcaption{font-size:.88rem;color:var(--texte-2)}
.surnuit figure.figure figcaption{color:var(--nuit-texte-2)}

/* Emplacement réservé (aucune image encore fournie) */
.media-slot{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:2px dashed rgba(25,29,36,.28);background:rgba(25,29,36,.05);
  color:var(--texte-2);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  padding:16px;border-radius:var(--rayon);
}
.surnuit .media-slot{border-color:rgba(250,247,242,.3);background:rgba(250,247,242,.05);color:var(--nuit-texte-2)}

/* ---------- 13. Bandeau photo pleine largeur ------------------------------ */
.bandeau{margin:0}
.bandeau .media{border-radius:0;aspect-ratio:21/8}
.bandeau figcaption{
  max-width:var(--largeur);margin-inline:auto;padding:10px var(--gouttiere) 0;
  font-size:.85rem;color:var(--texte-2);
}

/* ---------- 14. Listes à puces « point tuile » ---------------------------- */
.liste-points{list-style:none;display:grid;gap:10px}
.liste-points li{position:relative;padding-left:26px}
.liste-points li::before{
  content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;
  border-radius:50%;background:var(--tuile);
}
.surnuit .liste-points li::before{background:var(--tuile-claire)}

/* ---------- 15. Le calcul du reste à charge (financement) ----------------- */
.calcul{display:grid;gap:0;max-width:820px}
.calcul-ligne{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);
  padding:clamp(20px,3vw,28px);
  display:grid;gap:6px 18px;grid-template-columns:auto 1fr;align-items:start;
}
.calcul-ligne .picto{grid-row:span 3;margin-top:2px}
.calcul-ligne h3{align-self:center}
.calcul-ligne p{grid-column:2;color:var(--texte-2)}
.calcul-op{
  justify-self:center;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin:10px 0;border-radius:50%;
  background:var(--tuile);color:var(--blanc);
  font-size:1.7rem;font-weight:800;line-height:1;
}
.calcul-resultat{
  background:var(--nuit);border-color:var(--nuit);color:var(--nuit-texte);
}
.calcul-resultat .picto{color:var(--creme)}
.calcul-resultat p{color:var(--nuit-texte-2)}
.calcul-note{margin-top:1.2rem;font-size:.92rem;color:var(--texte-2);max-width:70ch}

/* Étiquettes d'aides (DETR, FIPD…) */
.aides{list-style:none;display:flex;flex-wrap:wrap;gap:8px;grid-column:2;margin-top:4px}
.aides li{
  border:1px solid var(--ligne-forte);border-radius:999px;
  padding:5px 14px;font-size:.88rem;font-weight:700;color:var(--encre);
}

/* ---------- 16. Accordéons (questions en conseil municipal) --------------- */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--rayon);
}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  min-height:56px;padding:14px 20px;font-weight:700;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:none;width:10px;height:10px;
  border-right:3px solid var(--tuile-encree);border-bottom:3px solid var(--tuile-encree);
  transform:rotate(45deg);transition:transform .15s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 20px 18px;color:var(--texte-2);max-width:72ch}

/* ---------- 17. Équipe ---------------------------------------------------- */
.membre{align-items:flex-start}
.membre .porche{width:min(100%,240px);justify-self:start;padding-bottom:20px;margin-bottom:6px}
.membre .porche::after{width:13px;height:13px;background:var(--tuile)}
.membre .porche .media{aspect-ratio:4/5}
.membre-role{font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tuile-encree)}

/* ---------- 18. Témoignage ------------------------------------------------ */
.temoin{
  display:grid;gap:clamp(20px,4vw,40px);align-items:center;
}
@media (min-width:900px){.temoin{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.temoin-fig{margin:0}
.temoin-fig blockquote{
  margin:0;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.45;font-weight:600;
  letter-spacing:-.01em;
}
.temoin-fig blockquote::before{
  content:"";display:block;width:44px;height:4px;border-radius:2px;
  background:var(--tuile);margin-bottom:1rem;
}
.temoin-fig figcaption{margin-top:1rem;color:var(--texte-2);font-size:.95rem}
.surnuit .temoin-fig figcaption{color:var(--nuit-texte-2)}
/* Témoignage en carte (page références) : corps plus posé */
.carte.temoin-fig blockquote{font-size:1.08rem;font-weight:500;letter-spacing:0}

/* ---------- 19. Bande d'appel finale (toutes pages) ----------------------- */
.bande-audit{
  background:var(--nuit);color:var(--nuit-texte);position:relative;overflow:hidden;
  --focus:var(--tuile-claire);
}
.bande-audit-inner{
  position:relative;max-width:760px;margin-inline:auto;padding:clamp(3.4rem,8vw,5.6rem) var(--gouttiere);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.bande-audit .kicker{color:var(--tuile-claire);margin:0}
.bande-audit h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.bande-audit-texte{color:var(--nuit-texte-2);max-width:56ch}
.bande-audit-actions{margin-top:.6rem}
.bande-audit-alt{font-size:.95rem;color:var(--nuit-texte-2)}
.bande-audit-alt a{color:var(--nuit-texte);font-weight:700}
.bande-audit-alt a:hover{color:var(--tuile-claire)}
.bande-audit .signe-sep{margin:0 auto .2rem}

/* ---------- 20. Formulaire de contact ------------------------------------- */
.contact-grille{display:grid;gap:clamp(28px,5vw,56px)}
@media (min-width:940px){.contact-grille{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}

.formulaire{display:grid;gap:18px}
.champ{display:grid;gap:6px}
.champ label{font-weight:700;font-size:.98rem}
.champ .aide{font-size:.88rem;color:var(--texte-2)}
.champ input,.champ textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font:400 1rem/1.5 var(--police);color:var(--encre);
  background:var(--blanc);border:1.5px solid var(--ligne-forte);border-radius:12px;
}
.champ textarea{min-height:150px;resize:vertical}
.champ input:focus-visible,.champ textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:1px;border-color:var(--encre);
}
.formulaire .btn{justify-self:start}
.form-rgpd{font-size:.9rem;color:var(--texte-2);max-width:64ch}
.obligatoire{color:var(--tuile-encree)}

.contact-aside{display:grid;gap:22px;align-content:start}
.contact-aside .carte{gap:8px}

.suite{list-style:none;display:grid;gap:16px;counter-reset:suite}
.suite li{position:relative;padding-left:52px;counter-increment:suite}
.suite li::before{
  content:counter(suite);position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--encre);color:var(--creme);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;
}
.suite h3{font-size:1.02rem;margin-bottom:2px}
.suite p{color:var(--texte-2);font-size:.95rem}

/* ---------- 21. Prose (mentions, confidentialité) ------------------------- */
.prose{max-width:72ch;display:grid;gap:1rem}
.prose h2{font-size:1.3rem;margin-top:1.2rem}
.prose strong{color:var(--encre)}
.prose ul{list-style:disc;padding-left:1.3rem;display:grid;gap:.4rem}

/* Placeholder de donnée manquante — bien visible pour la relecture */
.a-completer{
  background:rgba(191,91,51,.12);border-radius:4px;padding:0 4px;
  font-style:italic;color:var(--tuile-encree);
}

/* ---------- 22. Pied de page ---------------------------------------------- */
.pied{background:var(--nuit);color:var(--nuit-texte);--focus:var(--tuile-claire);
  border-top:1px solid var(--nuit-ligne)}
.pied a{color:var(--nuit-texte-2);text-decoration:none}
.pied a:hover{color:var(--creme);text-decoration:underline}
.pied-inner{
  max-width:var(--largeur);margin-inline:auto;padding:clamp(2.6rem,6vw,4rem) var(--gouttiere) 2rem;
  display:grid;gap:clamp(28px,5vw,48px);
}
@media (min-width:820px){
  .pied-inner{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1fr)}
}
.pied-logo{display:block;width:min(238px,70%);height:auto}
.pied-baseline{
  margin-top:10px;font-size:1.02rem;letter-spacing:.12em;color:var(--nuit-texte);
}
.pied-desc{margin-top:4px;font-size:.9rem;color:var(--nuit-texte-2)}
.pied-titre{
  font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tuile-claire);margin-bottom:12px;
}
.pied-nav ul{list-style:none;display:grid;gap:2px}
.pied-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.97rem}
.pied-coord p{margin-bottom:12px;font-size:.97rem;color:var(--nuit-texte-2)}
.pied-coord a{color:var(--nuit-texte);font-weight:600}
.pied-bas{
  border-top:1px solid var(--nuit-ligne);
}
.pied-bas-inner{
  max-width:var(--largeur);margin-inline:auto;padding:18px var(--gouttiere);
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;
  font-size:.88rem;color:var(--nuit-texte-2);
}
.pied-legal{list-style:none;display:flex;flex-wrap:wrap;gap:0 22px}
.pied-legal a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- 23. Divers ---------------------------------------------------- */
.note-encadree{
  background:var(--blanc);border:1px solid var(--ligne);border-left:4px solid var(--tuile);
  border-radius:12px;padding:18px 22px;max-width:72ch;
}
.note-encadree p{color:var(--texte-2)}
.note-encadree strong{color:var(--encre)}

.deux-colonnes{display:grid;gap:clamp(24px,5vw,56px);align-items:center}
@media (min-width:900px){.deux-colonnes{grid-template-columns:repeat(2,minmax(0,1fr))}}

.centre{text-align:center}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}

/* ---------- 24. Retouches ------------------------------------------------- */
blockquote{margin:0}

/* Rangée de pictos illustrant une étape (page Notre métier, etc.) */
.pictos-rangee{display:flex;flex-wrap:wrap;gap:16px;margin-top:1.6rem}

/* Placeholder « à compléter » sur fond nuit : passer en tuile claire (AA) */
.surnuit .a-completer,
.pied .a-completer,
.bande-audit .a-completer,
.calcul-resultat .a-completer{
  color:var(--tuile-claire);background:rgba(217,111,69,.16);
}

/* Cartes de l'aparté contact : titres à l'échelle de la colonne */
.contact-aside .carte h2{font-size:1.25rem;letter-spacing:-.01em}

/* ---------- 20. Formulaire : accusé, erreurs, pot de miel ------------------ */
.form-ok,.form-ko{
  margin:0 0 1.6rem;padding:16px 20px;border-radius:var(--rayon);
  font-size:1rem;line-height:1.5;
}
.form-ok{background:#EAF3EC;border:2px solid #2E6B3E;color:#1C4527}
.form-ko{background:#FBEDE7;border:2px solid var(--tuile-encree);color:#7A3616}
.form-ok strong{color:inherit}

.champ-erreur{
  margin:.45rem 0 0;font-size:.92rem;font-weight:600;color:#8F3D18;
}
.champ:has(.champ-erreur) input,
.champ:has(.champ-erreur) textarea{border-color:var(--tuile-encree)}

/* Pot de miel : invisible pour l'humain, présent pour le robot.
   Surtout pas display:none — certains robots ignorent les champs masqués ainsi. */
.pot-de-miel{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Zone d'intervention (page Références) */
.zones{
  list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin-top:1.6rem;
}
.zones li{
  display:flex;align-items:center;gap:10px;
  padding:12px 20px;border:2px solid var(--ligne);border-radius:999px;
  font-weight:700;background:var(--creme);
}
.zones .picto{color:var(--tuile-encree)}