/* ============================================================
 *  main.css — THÈME UNIQUE DU SITE HLS QSE
 * ------------------------------------------------------------
 *  Un seul fichier de thème pour toutes les pages. Toute
 *  modification visuelle se fait ICI, jamais page par page.
 *
 *  POLICES : servies depuis /fonts/ (aucun appel à un CDN
 *  externe, donc aucune adresse IP de visiteur transmise à un
 *  tiers). Six fichiers .woff2 sont attendus :
 *      archivo-black-400 · archivo-400 · archivo-600
 *      archivo-700 · jetbrains-mono-400 · jetbrains-mono-700
 *  Tant qu'ils ne sont pas déposés, font-display:swap fait
 *  retomber la page sur les polices système : la mise en page
 *  reste correcte, seule la typographie diffère.
 *  Les récupérer sur google-webfonts-helper (sous-ensemble
 *  latin, format woff2).
 * ============================================================ */

/* ---------- POLICES LOCALES ---------- */
@font-face{font-family:'Archivo Black';src:url('../fonts/archivo-black-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Texte réservé aux lecteurs d'écran. On n'utilise NI display:none NI
   visibility:hidden : ces deux propriétés retirent aussi le texte de
   l'arbre d'accessibilité, ce qui annulerait l'effet recherché. */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- THÈME ---------- */
:root{
--bg:#eef2ef;           /* béton industriel clair */
--surface:#f7faf8;
--surface-2:#e2e9e4;
--surface-3:#d3ddd6;    /* fond de la section Tarifs/contact uniquement.
                           --surface-2 n'offrait qu'un écart de 1,09 avec le
                           béton (--bg) : indiscernable à l'œil, l'alternance
                           ne tenait que par les filets. À 1,23 la section de
                           conversion se détache enfin ; --body reste à 5,7:1. */
--ink:#15231a;          /* vert très foncé */
--body:#46544b;
--faint:#65716a;      /* eclairci le 10/08 : #75827a ne donnait que 3,82:1,
                           sous le seuil AA, et servait a du texte de 9 a 11 px */
--line:#d3dcd5;
--line-strong:#a9b8ad;
--green:#0e7a45;        /* vert sécurité MASE */
--green-d:#0a5e35;
--green-soft:#e3f1e9;
--orange:#f2621b;      /* accent : filets, libelles, encadres d'alerte */
  --orange-btn:#cb4b0c; /* fond de bouton : le blanc y passe 4,61:1 (3,21:1 sur l'orange vif) */
  --orange-btn-h:#bc450b;       /* haute visibilité */
--orange-d:#bf4109;  /* libellés mono et liens de tableau. #cf4a0c ne tenait que
                         4,01:1 sur --bg à 12 px (WCAG AA en exige 4,5). 4,67:1 ici. */
--yellow:#f7b500;       /* signalétique */
--hatch:repeating-linear-gradient(45deg,rgba(21,35,26,.05) 0 3px,transparent 3px 9px);
--mono:"JetBrains Mono",monospace;
--disp:"Archivo Black",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
/* body en min-height et non height : avec height:100%, la hauteur du body
 est bornée à celle de la fenêtre, ce qui limite la portée du position:sticky
 de l'en-tête à un seul écran — au-delà, la barre se décollait et disparaissait. */
body{min-height:100%}
body{font-family:"Archivo",system-ui,sans-serif;background:var(--bg);color:var(--body);font-size:16.5px;line-height:1.6;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(21,35,26,.05) 1px,transparent 1.4px);background-size:20px 20px}
a{color:inherit;text-decoration:none}
strong{color:var(--ink)}
.mono{font-family:var(--mono)}
mark{background:var(--yellow);color:var(--ink);padding:0 .12em}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}


/* ===== HEADER ===== */
.hd{background:var(--surface);border-bottom:2px solid var(--ink)}
/* En-tête collant, à toutes les tailles d'écran.
   Deux pièges contournés ici :
   - body est en display:flex, ce qui rend le sticky capricieux selon les
     navigateurs → le header est sorti du flux flex par align-self;
   - l'en-tête doit passer au-dessus de tout le contenu. */
.hd{position:sticky;top:0;z-index:60;align-self:stretch;box-shadow:0 3px 0 rgba(21,35,26,.07)}
:target,section[id],[id]{scroll-margin-top:82px}
.hd-in{max-width:1080px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.hd-right{display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-size:1.25rem;letter-spacing:.01em;color:var(--ink)}
.logo em{font-style:normal;color:var(--green)}
.logo .mark{width:36px;height:36px;flex:none}
.logo .lbl{display:block;font-family:var(--mono);font-size:0.73rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.nav{display:flex;align-items:center;gap:2px}
.nav>a{font-family:var(--mono);font-size:0.76rem;font-weight:600;color:var(--body);padding:9px 11px;border-radius:7px;transition:all .15s}
.nav>a:hover{color:var(--green);background:var(--green-soft)}
.hd-cta{font-family:var(--mono);font-weight:600;font-size:.74rem;background:var(--orange-btn);color:#fff;padding:12px 18px;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.hd-cta:hover{background:var(--orange-btn-h);transform:translate(-1px,-1px)}
.hd-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.burger{display:none;background:none;border:1.5px solid var(--ink);width:42px;height:40px;border-radius:7px;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.burger svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}

/* ===== HERO ===== */
/* Le bandeau occupe la hauteur utile de l'écran au chargement, pour que le
   titre, le téléphone, la carte IPRP et les trois repères tiennent sans
   défilement. 100svh (small viewport height) et non 100vh : sur mobile,
   100vh compte la barre d'adresse rétractée, ce qui déborde toujours.
   Le rythme vertical est en clamp() indexé sur vh : il se resserre tout
   seul quand l'écran est bas, au lieu de couper le contenu. */
.hero{flex:1;display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);
  padding:clamp(16px,3.2vh,42px) 0}
.hero-in{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(24px,3vw,48px);align-items:center}
/* align-items:flex-start et non center : sur mobile le texte passe à 2 ou
   3 lignes, et « center » plaçait alors le triangle à mi-hauteur du bloc,
   flottant entre les lignes au lieu d'introduire la première.
   flex-shrink:0 empêche le triangle d'être écrasé quand le texte serre. */
.hero .kicker{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--mono);font-weight:600;font-size:0.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:var(--green-soft);border:1px solid var(--line-strong);padding:8px 14px;border-radius:7px;margin-bottom:22px}
.hero .kicker::before{content:"";width:10px;height:10px;flex:0 0 10px;margin-top:.34em;background:var(--green);clip-path:polygon(50% 0,100% 100%,0 100%)}
.hero h1{font-size:clamp(1.9rem,3.4vw + 1.1vh,3.5rem);color:var(--ink);font-family:var(--disp);letter-spacing:-.01em;line-height:1.05;text-transform:uppercase}
.hero h1 .marker{color:var(--green)}
.hero h1 .marker::after{content:"";display:block;height:6px;background:var(--hatch);border-top:2px solid var(--green);border-bottom:2px solid var(--green);margin-top:4px;width:100%}
.hero .lead{font-size:clamp(.95rem,.55vw + .55vh + .6rem,1.08rem);margin-top:clamp(12px,1.8vh,22px);max-width:620px}
.hero .note{margin-top:clamp(10px,1.6vh,20px);font-family:var(--mono);font-weight:600;font-size:.78rem;color:var(--orange-d);text-transform:uppercase;letter-spacing:.04em;border-left:4px solid var(--orange);padding-left:14px}
.phone{margin-top:clamp(14px,2.4vh,28px);display:flex;flex-direction:column;gap:8px}
.phone .ph{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-weight:600;font-size:clamp(1.5rem,3.3vw,2.2rem);color:var(--ink);letter-spacing:-.02em;background:var(--yellow);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:15px 26px;transition:all .16s;width:fit-content}
.phone .ph:hover{background:var(--orange);color:#fff;transform:translate(-1px,-1px)}
.phone .ph svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.phone .sub{font-family:var(--mono);font-size:0.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-left:6px}

/* carte IPRP */
.idcard{background:var(--surface);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--green);position:relative;transform:rotate(.6deg)}
.idcard::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:radial-gradient(circle 8.5px at 50% 50%,rgba(238,242,239,.98) 96%,transparent);box-shadow:inset 0 0 0 2px var(--ink)}
.idcard-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 18px;border-bottom:2px solid var(--ink);background:var(--ink);color:#fff}
.idcard-top b{font-family:var(--mono);font-size:0.76rem;letter-spacing:.1em;text-transform:uppercase}
.idcard-top .stamp{font-family:var(--mono);font-weight:600;font-size:0.73rem;text-transform:uppercase;color:var(--ink);background:var(--yellow);border:1.5px solid var(--ink);padding:3px 9px}
.idcard-body{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;padding:18px 20px;font-family:var(--mono);font-size:.74rem}
.idcard-body dt{color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-size:0.73rem;align-self:center}
.idcard-body dd{font-weight:600;color:var(--ink);border-bottom:1px dotted var(--line);padding:3px 0}
.idcard .link{display:block;margin:0 20px 16px;font-family:var(--mono);font-size:0.76rem;font-weight:600;color:var(--green)}

/* repères */
.reperes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,14px);margin-top:clamp(16px,3vh,38px)}
.rep{border:2px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--ink);padding:16px 18px;position:relative;overflow:hidden}
.rep::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--hatch);border-bottom:1px solid var(--line)}
.rep b{display:block;font-family:var(--mono);font-size:1.25rem;color:var(--green);letter-spacing:-.02em;line-height:1.1;margin-top:6px}
.rep span{display:block;margin-top:6px;font-size:.8rem;font-weight:600}

/* ===== MODALITÉS D'INTERVENTION (2 blocs) ===== */
.plan{border-top:2px solid var(--ink);background:var(--surface);padding:44px 0}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:24px}
.sec-head .t{font-family:var(--disp);font-size:1.5rem;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:1.15}
.sec-head .mono{font-size:0.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d)}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.pblock{border:2px solid var(--ink);background:var(--bg);padding:24px 22px;position:relative}
.pblock-hot{border-color:var(--green);box-shadow:5px 5px 0 var(--green)}
.pblock .p-tag{display:inline-block;font-family:var(--mono);font-size:0.73rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d);border:1px solid var(--line-strong);padding:4px 11px;margin-bottom:14px}
.pblock-hot .p-tag{color:#fff;background:var(--green);border-color:var(--green)}
.pblock h3{font-family:var(--disp);font-size:1.15rem;color:var(--ink);margin-bottom:10px}
.pblock p{font-size:.92rem;margin-bottom:14px}
.pblock ul{list-style:none}
.pblock li{font-size:.88rem;padding:7px 0 7px 28px;position:relative}
.pblock li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border:2px solid var(--green);border-radius:3px;background:var(--green);clip-path:polygon(28% 55%,50% 75%,80% 30%,92% 40%,50% 95%,16% 65%)}
.pblock .p-ref{font-family:var(--mono);font-size:0.76rem;color:var(--faint);border-top:1px dashed var(--line);margin-top:16px;padding-top:12px}
.pblock .p-ref b{color:var(--green)}

/* ===== TABLEAU RÉFÉRENTIELS ===== */
.tab-sec{border-top:2px solid var(--ink);background:var(--bg);padding:44px 0}
.tab-wrap{overflow-x:auto}
.tab{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
.tab caption{text-align:left;font-family:var(--disp);font-size:1.3rem;color:var(--ink);margin-bottom:16px}
.tab th{font-family:var(--mono);font-size:0.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--ink);text-align:left;padding:11px 14px}
.tab td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tab td.code{font-family:var(--mono);font-weight:600;color:var(--green);white-space:nowrap}
.tab tr:hover td{background:var(--green-soft)}
.tab .go{font-family:var(--mono);font-size:0.76rem;font-weight:600;color:var(--orange-d);white-space:nowrap}

/* ===== BANQUE ARTICLES ===== */
/* ===== TARIFS / CONTACT ===== */
/* ── Blocs posés sur --surface-2 (#e2e9e4) ───────────────────────────────
   Ce fond est plus sombre que --bg et --surface. Trois couleurs de texte
   qui passent ailleurs y tombent sous le seuil AA de 4,5:1 :
       --faint     4,13:1     --green     4,37:1     --orange-d  4,28:1
   Plutôt que de corriger chaque règle une par une — et d'oublier la
   suivante — on REDÉFINIT les variables à l'intérieur de ces blocs. Tout
   descendant qui écrit var(--faint) hérite automatiquement de la version
   assombrie, y compris du texte ajouté plus tard. L'écart est de 2 à 6 %,
   invisible à l'œil.
   Lighthouse n'avait pas signalé ces trois cas : il n'a testé que la page
   d'accueil, et .art-sources ne vit que sur les pages d'articles. */
.aftercare,.art-sources{--faint:#5e6a63;--green:#0d7743;--orange-d:#b73e08}

.aftercare{border-top:2px solid var(--ink);background:var(--surface-3);padding:44px 0}
.aftercare-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:22px;align-items:start}
.price-note,.contact-form{border:2px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--ink);padding:22px}
.price-note h2,.contact-form h2{font-family:var(--disp);font-size:1.2rem;color:var(--ink);margin-bottom:10px;text-transform:uppercase}
.price-note p{font-size:.9rem;margin-bottom:14px}
.prices{display:grid;gap:0}
.prices div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:10px 0;font-size:.88rem}
.prices div:last-child{border-bottom:0}
.prices b{font-family:var(--mono);color:var(--green);white-space:nowrap;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.3}
/* Le tarif journalier équivalent, sous le montant mensuel. Il rend l'échelle
   dégressive lisible d'un coup d'œil : 690, 490, 440, 385, 350. Sans lui, le
   visiteur compare un prix à la journée et un prix au mois, et en tire une
   conclusion fausse sur le ponctuel. */
.prices .tj{font-family:var(--sans,inherit);font-size:.74rem;font-weight:400;
  color:var(--faint);letter-spacing:0}

/* ── Formules tarifaires (02/09/2026) ───────────────────────────────
   Remplace la liste de cinq lignes de même poids. Deux formules, parce
   que le visiteur n'a que deux décisions à prendre : ponctuel ou
   récurrent. Les quatre rythmes deviennent un détail à l'intérieur.
   Le tarif JOURNALIER est l'unité mise en avant : c'est lui qui montre
   la dégressivité de 690 à 350 €, invisible quand on compare un prix
   à la journée et un prix au mois. */
/* Bloc dense : il partage l'écran avec le formulaire de contact et doit
   tenir sans faire défiler. D'où des interlignes serrés, un prix en
   1,45rem plutôt que 2rem, et « à partir de » sorti du chiffre — sinon
   la ligne passe en deux et coûte 30 px de hauteur pour rien. */
.formules{display:grid;gap:10px}
.formule{border:1px solid var(--line-strong);border-radius:6px;padding:12px 14px}
.formule--phare{border-width:2px;border-color:var(--green)}
.formule-nom{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:3px}
.formule--phare .formule-nom{color:var(--green-d)}
.formule-prix{font-family:var(--mono);font-size:1.45rem;font-weight:700;
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;
  flex-wrap:wrap;gap:0 5px}
.formule-prix .des{font-family:var(--sans,inherit);font-size:.78rem;
  font-weight:400;color:var(--body);letter-spacing:0}
.formule-prix .u{font-size:.76rem;font-weight:400;color:var(--faint)}
.formule-desc{font-size:.83rem;line-height:1.45;color:var(--body);margin:5px 0 0}
.paliers{list-style:none;margin:9px 0 0;padding:9px 0 0;
  border-top:1px solid var(--line);display:grid;gap:4px}
.paliers li{display:flex;justify-content:space-between;gap:12px;
  font-size:.82rem;line-height:1.35;font-variant-numeric:tabular-nums}
.paliers .lib{color:var(--body)}
.paliers .val{font-family:var(--mono);white-space:nowrap}
.paliers .jour{color:var(--green);font-weight:700}
@media(max-width:420px){
  .paliers li{flex-direction:column;gap:0}
  .paliers .val{align-self:flex-start}
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label{display:grid;gap:5px;font-family:var(--mono);font-size:0.73rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.form-grid label.full{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{font:inherit;font-size:.88rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--line-strong);border-radius:6px;padding:10px 12px;width:100%}
.form-grid textarea{min-height:70px;resize:vertical}
/* outline:none uniquement pour le focus à la SOURIS, où le contour orange
   serait du bruit visuel. La bordure verte suffit alors comme accusé de
   réception. Voir la règle :focus-visible juste en dessous pour le clavier. */
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--green)}
/* ⚠ NE PAS SUPPRIMER. La règle générale a:focus-visible… (plus bas dans la
   feuille) était neutralisée ici par spécificité : « .form-grid input:focus »
   pèse plus lourd que « input:focus-visible ». Résultat, les champs du
   formulaire de contact étaient les SEULS éléments du site sans contour au
   clavier — il ne restait qu'un changement de bordure sur 1 px, mesuré à
   2,72:1 entre repos et focus, là où WCAG 2.4.11 exige 3:1 et 2 px. */
.form-grid input:focus-visible,.form-grid select:focus-visible,.form-grid textarea:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.form-actions{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.form-actions button{font:inherit;font-family:var(--mono);font-weight:600;font-size:0.76rem;text-transform:uppercase;background:var(--green);color:#fff;border:1.5px solid var(--ink);padding:13px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.form-actions button:hover{background:var(--green-d);transform:translate(-1px,-1px)}
.form-actions span{font-size:.76rem;color:var(--faint)}

.ft{background:var(--ink);color:var(--faint);padding:18px 0;border-top:3px solid var(--yellow)}
.ft-in{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:0.76rem}
.ft a:hover{color:var(--orange)}

@media(max-width:1020px){
.hero-in{grid-template-columns:1fr;gap:30px}
.idcard{max-width:440px}
.plan-grid,.aftercare-grid{grid-template-columns:1fr}
.reperes{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:860px){
.nav{display:none}
.burger{display:flex}
}
@media(max-width:720px){
.reperes{grid-template-columns:1fr}
.aftercare-grid,.form-grid{grid-template-columns:1fr}
.form-grid label.full{grid-column:auto}
.phone .ph{font-size:1.35rem;padding:13px 20px}
.hero{padding:24px 0}
}
@media(max-width:560px){
.nav{position:fixed;inset:66px 0 auto;flex-direction:column;align-items:stretch;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(21,35,26,.14);padding:10px 16px 16px;z-index:30;display:none}
.nav.open{display:flex}
.nav>a{padding:12px 12px;border-radius:7px}
.nav>a:hover{background:var(--green-soft)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{
body{background:#fff;color:#000;font-size:11px}
.hd,.ft{display:none}
.idcard,.rep,.pblock,.tab td,.price-note,.contact-form{border-color:#000;box-shadow:none}
}

/* Note sous la grille tarifaire et mention RGPD du formulaire */
/* ---------- Histogramme journalier de /mesure-lire ----------
   En CSS pure, sans JavaScript : la CSP du site interdit les scripts en ligne,
   et charger une bibliothèque de graphiques romprait la règle « aucun tiers ».
   La largeur de .mes-remplissage est le seul attribut style= en ligne accepté
   du site, parce que sa valeur est CALCULÉE (proportion du jour le plus actif)
   et ne peut donc pas vivre dans une feuille statique. */
.mes-jours{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:5px}
.mes-jours li{display:grid;grid-template-columns:46px 1fr 42px;align-items:center;gap:10px}
.mes-jour{font-family:var(--mono);font-size:.76rem;color:var(--faint)}
.mes-barre{display:block;height:16px;background:var(--surface-2);
  border:1px solid var(--line);position:relative}
.mes-remplissage{display:block;height:100%;background:var(--green);min-width:2px}
.mes-nb{font-family:var(--mono);font-size:.8rem;font-weight:700;color:var(--ink);text-align:right}

.prices-note{margin-top:14px;font-size:.86rem;line-height:1.55;color:var(--body)}
.prices-note a{color:var(--green-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.form-rgpd{margin:14px 0 0;font-size:.8rem;line-height:1.55;color:var(--body)}
.form-rgpd a{color:var(--green-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Téléphone rappelé dans la section contact : le canal le plus rapide reste visible
   au moment où le visiteur consulte les tarifs. */
.contact-phone{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.contact-phone .ph{font-size:clamp(1.25rem,2.6vw,1.7rem);padding:13px 22px}
.contact-phone .sub{font-size:.84rem;color:var(--body)}

/* Repère d'ancrage : le prix d'appel est affiché, mais le chiffre qui reste
   en tête est celui de l'alternative — le poste que le dirigeant n'a pas créé. */
.rep-anchor{border-color:var(--green)}
.rep-anchor b{color:var(--green)}
.rep-anchor strong{color:var(--ink);white-space:nowrap}
/* L'appel de note ne mesurait que 5 × 9 px : impossible à viser au doigt.
   Le padding élargit la zone tactile sans changer l'aspect du chiffre ;
   inline-block est nécessaire pour que ce padding soit réellement pris. */
.rep-anchor sup a{color:var(--faint);text-decoration:none;font-size:.7em;display:inline-block;padding:10px 12px;margin:-10px -8px}


/* ============================================================
 *  COUCHE « PAGES INTÉRIEURES »
 * ------------------------------------------------------------
 *  Habille le vocabulaire de classes déjà présent dans les
 *  pages du site (.header, .page-hero, .content-section, etc.)
 *  plutôt que d'imposer un nouveau balisage. Aucune page n'a
 *  besoin d'être réécrite : il suffit qu'elle charge ce fichier.
 * ============================================================ */

:root{
  /* bleu réservé à l'obligation réglementaire — une couleur, un sens */
  --blue:#1d5fa8;
  --blue-soft:#e5eef8;
  /* alias des anciennes variables, pour que rien ne casse si une
     règle résiduelle les référence encore */
  --dark:var(--ink); --mid:var(--body); --muted:var(--faint); --border:var(--line);
}

.container{max-width:1080px;margin:0 auto;padding:0 24px;width:100%}

/* ---------- BOUTONS ---------- */
.btn-primary,.btn-nav,.btn-ghost,.btn-cta-ghost{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;font-weight:600;padding:12px 18px;border:1.5px solid var(--ink);transition:transform .15s,background .15s;white-space:nowrap}
.btn-primary,.btn-nav{background:var(--orange-btn);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.btn-primary:hover,.btn-nav:hover{background:var(--orange-btn-h);color:#fff;transform:translate(-1px,-1px)}
.btn-ghost,.btn-cta-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover,.btn-cta-ghost:hover{background:var(--green-soft);color:var(--green-d)}

/* ---------- EN-TÊTE (balisage historique) ---------- */
/* body est en display:flex, colonne. Un enfant collant doit être sorti du
   comportement d'étirement flex par align-self, sinon le collage devient
   capricieux selon le navigateur. C'est ce que faisait déjà .hd ; .header
   ne l'avait pas, il a hérité du bug au passage aux includes.
   flex-shrink:0 empêche par ailleurs la barre d'être comprimée. */
.header{position:sticky;top:0;z-index:60;align-self:stretch;flex:0 0 auto;background:var(--surface);border-bottom:2px solid var(--ink);box-shadow:0 3px 0 rgba(21,35,26,.07)}
.header-inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo-link{display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:2px;font-family:var(--disp);font-size:1.25rem;color:var(--ink)}
.logo-hls{color:var(--ink)}
.logo-qse{color:var(--green)}
#navMenu{display:flex;align-items:center;gap:2px}
#navMenu>a,.nav-dropdown-trigger{font-family:var(--mono);font-size:0.76rem;font-weight:600;color:var(--body);padding:9px 11px;border-radius:7px;background:none;border:0;cursor:pointer;transition:background .15s,color .15s}
#navMenu>a:hover,.nav-dropdown-trigger:hover{color:var(--green);background:var(--green-soft)}
.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:var(--surface);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:14px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .16s;z-index:70}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-group+.nav-dropdown-group{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.nav-dropdown-label{display:block;padding:0 18px 6px;font-family:var(--mono);font-size:0.73rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:7px 18px;font-size:.85rem;color:var(--body)}
.nav-dropdown-menu a:hover{background:var(--green-soft);color:var(--green-d)}
.dd-dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--green)}
.dd-dot-orange{background:var(--orange)}
.dd-dot-blue{background:var(--blue)}
.dd-dot-teal{background:#0f766e}
/* Le bouton du menu doit rester orange. La règle « #navMenu>a » ci-dessus
   pèse 1-0-1 en spécificité, contre 0-1-0 pour « .btn-nav » : sans ce
   sélecteur plus précis, son background:none et son border:0 l'emportent
   et le bouton redevient un lien ordinaire. */
#navMenu>a.btn-nav{background:var(--orange-btn);color:#fff;border:1.5px solid var(--ink);border-radius:0;box-shadow:3px 3px 0 var(--ink);padding:11px 17px;margin-left:6px}
#navMenu>a.btn-nav:hover{background:var(--orange-btn-h);color:#fff;transform:translate(-1px,-1px)}
#menuToggle{display:none;background:none;border:1.5px solid var(--ink);width:42px;height:40px;border-radius:7px;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
#menuToggle svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}

/* ---------- PIED DE PAGE ---------- */
.footer{background:var(--ink);color:var(--faint);padding:18px 0;border-top:3px solid var(--yellow);margin-top:auto}
.footer-inner{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:0.76rem}
.footer-logo{font-family:var(--disp);font-size:.95rem}
/* Seul HLS posait problème : il hérite de var(--ink), soit un vert quasi
   noir sur le fond d'encre du pied de page — invisible. Il passe en blanc.
   QSE garde exactement le vert du menu : c'est la couleur de marque, elle
   doit être identique partout. Son contraste ici est de 3,02:1, sous le
   seuil AA de 4,5 — mais la règle WCAG 1.4.3 exempte explicitement les
   logotypes et noms de marque de toute exigence de contraste. */
/* Signature du pied de page. L'emoji cœur n'est pas décoratif au sens de
   l'accessibilité : sans aria-label, un lecteur d'écran annonce « emoji cœur
   anatomique », ce qui n'apporte rien. Il porte donc role="img" et un
   libellé court dans le HTML. */
.ft-signature{margin-top:10px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.04em;color:var(--faint)}
.footer .ft-signature{color:#9fb0a6}
.footer .ft-signature a{color:#fff;text-decoration:underline;text-underline-offset:2px}
/* Le sélecteur de variante U+FE0F demande le rendu en emoji couleur, ce que
   font tous les systèmes courants. Mais si la police de secours n'a que le
   glyphe monochrome (certains Linux, anciens navigateurs), le cœur sortirait
   NOIR sur fond sombre : invisible. D'où la couleur explicite, qui ne sert
   que dans ce cas de repli. */
/* .ft-coeur supprimée : plus aucun élément ne portait cette classe depuis le
   remplacement de la signature du pied de page par « Réalisé par ». */

.footer .logo,.footer .logo-hls{color:#fff}
.footer .logo-qse{color:var(--green)}
.footer a:hover{color:var(--orange)}
.sep{opacity:.4;margin:0 6px}

/* ---------- BANDEAU DE PAGE ---------- */
/* Fond clair, comme le bandeau d'index2.php. L'encre est réservée aux
   bordures et au pied de page : une seule zone foncée par page, sinon
   les pages intérieures paraissent plus lourdes que l'accueil. */
.page-hero,.art-hero,.res-hero,.dv-hero,.ap-hero{background:var(--surface);border-bottom:2px solid var(--ink);padding:34px 0 32px;position:relative}
.page-hero::before,.art-hero::before,.res-hero::before,.dv-hero::before,.ap-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--hatch);border-bottom:1px solid var(--line)}
.page-breadcrumb,.art-breadcrumb,.res-breadcrumb,.breadcrumb{font-family:var(--mono);font-size:0.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;padding-top:12px}
.page-breadcrumb a,.art-breadcrumb a,.res-breadcrumb a,.breadcrumb a{color:var(--green-d);font-weight:600}
.page-breadcrumb a:hover,.art-breadcrumb a:hover{text-decoration:underline}
.page-breadcrumb span,.art-breadcrumb span{margin:0 7px;color:var(--line-strong)}
.page-hero-tag,.art-badge,.res-tag,.dv-hero-tag{display:inline-block;font-family:var(--mono);font-size:0.73rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--yellow);border:1.5px solid var(--ink);padding:4px 11px;margin-bottom:14px}
.page-hero h1,.art-hero h1,.res-hero h1,.dv-hero h1,.ap-hero h1{font-family:var(--disp);font-size:clamp(1.6rem,4vw,2.35rem);line-height:1.12;color:var(--ink);margin-bottom:14px;letter-spacing:-.01em}
.page-hero-sub,.art-hero-meta,.res-hero p,.dv-intro{font-size:1rem;color:var(--body);line-height:1.7;max-width:660px}
.page-hero-sub{margin-bottom:26px}
.art-hero-meta{font-family:var(--mono);font-size:0.76rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
/* La date ne doit jamais se couper en deux lignes (« MIS À JOUR » / « LE 8 AOÛT
   2026 »). Cause du bug initial : le séparateur s'écrivait «  ·  »,
   insécable des DEUX côtés, ce qui interdisait la coupure entre segments et
   forçait le navigateur à couper à l'intérieur de la date. Le séparateur est
   désormais «  · » suivi d'une espace ordinaire — la ligne se coupe donc
   après le point — et ce nowrap garantit que le groupe date reste entier. */
/* Généralisé à TOUS les <time> : la règle mobile ligne 865 remet
   white-space:normal sur .res-l-meta, ce qui recasserait les dates de
   l'index des ressources. Une date fait au plus 25 caractères, soit
   ~200 px : elle tient sur le plus petit écran. */
time{white-space:nowrap}
/* repères chiffrés : mêmes cartes que sur l'accueil */
.page-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.page-stat{border:2px solid var(--ink);background:var(--bg);box-shadow:4px 4px 0 var(--ink);padding:14px 16px}
.page-stat-val{font-family:var(--mono);font-size:1.22rem;font-weight:700;color:var(--green);line-height:1.1;margin-bottom:4px;letter-spacing:-.02em}
.page-stat-label{font-size:.78rem;font-weight:600;color:var(--body);line-height:1.5}

/* ---------- CORPS RÉDACTIONNEL ---------- */
.content-outer,.art-wrap{max-width:820px;margin:0 auto;padding:0 24px 72px}
.content-section{padding-top:46px}
.content-section h2,.art-wrap h2{font-family:var(--disp);font-size:clamp(1.15rem,3vw,1.5rem);color:var(--ink);margin-bottom:16px;padding-bottom:11px;border-bottom:2px solid var(--ink);text-transform:uppercase;letter-spacing:.01em}
.content-section h3,.art-wrap h3{font-family:var(--disp);font-size:1.02rem;color:var(--ink);margin:22px 0 8px}
.content-section p,.art-wrap p{color:var(--body);font-size:.95rem;line-height:1.82;margin-bottom:14px}
.content-section strong,.art-wrap strong{color:var(--ink)}
.content-section a,.art-wrap a{color:var(--green-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.content-section .c-green,.c-green{color:var(--green)}
.content-section ul,.content-section ol,.art-wrap ul,.art-wrap ol{margin:0 0 14px 22px}
.content-section li,.art-wrap li{font-size:.94rem;line-height:1.75;margin-bottom:6px}

/* encadré réglementaire — bleu, une couleur un sens */
.legal-callout,.art-note{background:var(--blue-soft);border:1.5px solid var(--blue);border-left:5px solid var(--blue);padding:14px 18px;margin:18px 0;font-size:.89rem;color:var(--body);line-height:1.7}
/* alerte / piège — orange haute visibilité */
.trap-card,.art-alert{background:#fff4ec;border:1.5px solid var(--orange);border-left:5px solid var(--orange);padding:14px 16px;font-size:.88rem;color:var(--body);line-height:1.62}
.trap-card strong,.art-alert strong{display:block;font-family:var(--mono);font-size:0.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-d);margin-bottom:6px}
.trap-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
/* mise en avant neutre */
.art-callout{background:var(--surface);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:18px 20px;margin:20px 0;font-size:.92rem}

.check-list{list-style:none;padding:0;margin:0 0 14px}
.check-list li{padding:9px 0 9px 30px;position:relative;font-size:.93rem;color:var(--body);line-height:1.65;border-bottom:1px solid var(--line);margin:0}
.check-list li:last-child{border-bottom:0}
.check-list li::before{content:"";position:absolute;left:0;top:12px;width:16px;height:16px;border:2px solid var(--green);background:var(--green);clip-path:polygon(28% 55%,50% 75%,80% 30%,92% 40%,50% 95%,16% 65%)}

.mission-steps,.stepper{margin-top:16px}
.mission-step,.step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.mission-step:last-child,.step:last-child{border-bottom:0}
.mission-step-num,.step-num,.why-num,.num{flex:none;width:32px;height:32px;background:var(--ink);color:var(--yellow);font-family:var(--mono);font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ink)}
.mission-step-text h3,.step-text h3{font-family:var(--disp);font-size:.96rem;color:var(--ink);margin:0 0 4px}
.mission-step-text p,.step-text p{font-size:.88rem;color:var(--body);line-height:1.65;margin:0}

/* ---------- FAQ ---------- */
.faq-list,.faq-container{margin-top:6px}
.faq-item{border-bottom:1px solid var(--line);padding:18px 0}
.faq-item:last-child{border-bottom:0}
.faq-q,.faq-question{font-family:var(--disp);font-size:.98rem;color:var(--ink);margin-bottom:8px;background:none;border:0;text-align:left;width:100%;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.faq-a,.faq-answer{font-size:.92rem;color:var(--body);line-height:1.8;margin:0}
.faq-chevron{flex:none;color:var(--green);transition:transform .18s}

/* ---------- APPELS À L'ACTION EN PIED DE PAGE ---------- */
/* Bloc clair souligné d'une ombre verte, comme le bloc « Récurrent »
   d'index2.php. C'est l'ombre portée qui accroche l'œil, pas un aplat noir. */
.page-cta,.content-cta,.art-cta,.res-cta,.ap-cta,.dv-cta{margin-top:52px;background:var(--surface);border:2px solid var(--green);box-shadow:6px 6px 0 var(--green);padding:34px 32px;text-align:center;position:relative}
/* ⚠ .ap-cta était présent dans la règle du CONTENEUR juste au-dessus, mais
   absent de celle qui style son TITRE. Le bloc d'appel à l'action de la page
   « À propos » n'a donc jamais eu de titre mis en forme, ni en h3 comme
   auparavant, ni en h2. Défaut invisible : le bloc s'affichait correctement,
   seul son titre sortait en police par défaut.
   Leçon : quand on ajoute une variante à une famille de composants, vérifier
   TOUTES les règles de la famille, pas seulement la première. */
.page-cta h2,.content-cta h2,.art-cta h2,.dv-cta h3,.res-cta h2,.ap-cta h2{font-family:var(--disp);font-size:clamp(1.2rem,3vw,1.6rem);color:var(--ink);margin-bottom:10px;border:0;padding:0;text-transform:uppercase}
.page-cta p,.content-cta p,.art-cta p,.dv-cta p,.res-cta p{color:var(--body);font-size:.95rem;margin-bottom:22px}
.art-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.art-cta-alt{margin-top:14px;font-family:var(--mono);font-size:0.76rem;color:var(--faint)}

/* ---------- CODE COULEUR PAR DOMAINE ---------- */
/* Repris à l'identique de ressources.html et des articles : une teinte
   par domaine, tenue sur toutes les pages (badge d'article, pastille de
   catégorie, point du menu, tuile de certification).
   Les teintes retenues sont les versions foncées, celles qui servaient
   déjà de couleur de texte : sur un aplat, elles passent le contraste
   WCAG AA en blanc, ce que les versions vives ne faisaient pas.
   SEUL ÉCART assumé avec l'original : « digitalisation » y partageait
   exactement le vert de « environnement ». Deux domaines de la même
   couleur, ce n'est plus un code — la digitalisation passe donc en
   sarcelle. Pour revenir à l'identique : --dom-digital:var(--dom-enviro). */
:root{
  --dom-qualite:#1d4ed8;   /* bleu    — qualité, ISO 9001 */
  --dom-securite:#c2410c;  /* orange  — sécurité, réglementation */
  --dom-enviro:#065f46;    /* vert    — environnement, ISO 14001 */
  --dom-rse:#6d28d9;       /* violet  — RSE */
  --dom-digital:#0f766e;   /* sarcelle— digitalisation */
}
.badge-securite,.badge-enviro,.badge-qualite,.badge-digital,.badge-rse,
.dv-badge,.art-cat-badge,.apc-tag,.cert-badge,.res-cat-count{display:inline-block;font-family:var(--mono);font-size:0.73rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border:1.5px solid currentColor;background:var(--surface);color:var(--ink)}
/* aplat + texte blanc */
.badge-qualite,.dv-badge.bdg-qualite {background:var(--dom-qualite); border-color:var(--dom-qualite); color:#fff}
.badge-securite,.dv-badge.bdg-securite{background:var(--dom-securite);border-color:var(--dom-securite);color:#fff}
.badge-enviro,.dv-badge.bdg-enviro   {background:var(--dom-enviro);  border-color:var(--dom-enviro);  color:#fff}
.badge-rse                           {background:var(--dom-rse);     border-color:var(--dom-rse);     color:#fff}
.badge-digital,.dv-badge.bdg-digital {background:var(--dom-digital);  border-color:var(--dom-digital); color:#fff}
/* texte seul, sur fond clair */
.apc-qualite {color:var(--dom-qualite)}
.apc-securite{color:var(--dom-securite)}
.apc-enviro  {color:var(--dom-enviro)}
/* pastilles rondes : sommaire des ressources et menu déroulant */
.res-cat-dot,.dot-qualite,.dot-securite,.dot-enviro,.dot-rse,.dot-digital{width:12px;height:12px;flex:none;border-radius:50%;border:1.5px solid var(--ink)}
.dot-qualite {background:var(--dom-qualite)}
.dot-securite{background:var(--dom-securite)}
.dot-enviro  {background:var(--dom-enviro)}
.dot-rse     {background:var(--dom-rse)}
.dot-digital {background:var(--dom-digital)}
.dd-dot-blue  {background:var(--dom-qualite)}
.dd-dot-orange{background:var(--dom-securite)}
.dd-dot-teal  {background:var(--dom-enviro)}
.dd-dot-digital{background:var(--dom-digital)}
/* badges de certification : contour, puis aplat au survol */
.cert-badge{background:var(--surface)}
.cert-badge-b{color:var(--dom-qualite)}
.cert-badge-o{color:var(--dom-securite)}
.cert-badge-g{color:var(--dom-enviro)}
.cert-badge-p{color:var(--dom-rse)}
.cert-badge-b:hover,.cert-badge-o:hover,.cert-badge-g:hover,.cert-badge-p:hover{background:currentColor;color:#fff}
.cert-badge-b:hover{background:var(--dom-qualite)}
.cert-badge-o:hover{background:var(--dom-securite)}
.cert-badge-g:hover{background:var(--dom-enviro)}
.cert-badge-p:hover{background:var(--dom-rse)}

/* ---------- TUILES DE CERTIFICATION ---------- */
.cert-tile{border:2px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--ink)}
.cert-tile-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--ink);color:#fff;border-bottom:2px solid var(--ink)}
.cert-abbr{font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--yellow)}
.cert-tile-body{padding:16px;font-size:.9rem;line-height:1.7}
/* variantes de domaine, reprises de .cth-* / .ca-* */
.cert-tile-head.cth-blue  {background:var(--dom-qualite)}
.cert-tile-head.cth-orange{background:var(--dom-securite)}
.cert-tile-head.cth-teal,.cert-tile-head.cth-green{background:var(--dom-enviro)}
.cert-tile-head.cth-purple{background:var(--dom-rse)}
.cth-blue .cert-abbr,.cth-orange .cert-abbr,.cth-teal .cert-abbr,.cth-green .cert-abbr,.cth-purple .cert-abbr{color:#fff}
.ca-blue{background:var(--dom-qualite);color:#fff}
.ca-orange{background:var(--dom-securite);color:#fff}
.ca-teal,.ca-green{background:var(--dom-enviro);color:#fff}
.ca-purple{background:var(--dom-rse);color:#fff}

/* ---------- TABLEAUX DANS LE CORPS ---------- */
.art-table-wrap{overflow-x:auto;margin:18px 0}
/* Indication de geste : n'a de sens que quand le tableau deborde, donc
   masquee par defaut et revelee dans la media query mobile plus bas. */
.tab-hint{display:none}
.art-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.art-table th{font-family:var(--mono);font-size:0.73rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);text-align:left;padding:10px 13px}
.art-table td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.art-table tr:hover td{background:var(--green-soft)}

/* ---------- ACCESSIBILITÉ ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- ADAPTATIF ---------- */
@media(max-width:900px){
  .page-stats{grid-template-columns:1fr 1fr}
  .trap-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  #menuToggle{display:flex}
  #navMenu{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:2px solid var(--ink);box-shadow:0 8px 0 rgba(21,35,26,.08);padding:10px 20px 18px;display:none;max-height:calc(100vh - 64px);overflow-y:auto}
  #navMenu.show{display:flex}
  #navMenu>a,.nav-dropdown-trigger{padding:12px 4px;border-bottom:1px dashed var(--line);border-radius:0;text-align:left;width:100%}
  #navMenu>a.btn-nav{margin:12px 0 4px;padding:13px 16px;justify-content:center;border:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
  .nav-dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--line);margin:4px 0 8px 8px;padding:6px 0;min-width:0;display:none}
  .nav-dropdown.open .nav-dropdown-menu{display:block}
  .page-cta,.content-cta,.art-cta{padding:26px 18px;box-shadow:4px 4px 0 var(--green)}
}
@media(max-width:520px){
  .page-stats{grid-template-columns:1fr}
  .footer-inner{justify-content:flex-start}
}

/* ---------- LIEN D'ÉVITEMENT (RGAA) ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--yellow);color:var(--ink);font-family:var(--mono);font-size:0.76rem;font-weight:600;padding:10px 16px;border:2px solid var(--ink)}
.skip:focus{left:8px;top:8px}

/* ============================================================
 *  PAGES SINGULIÈRES
 *  ressources · articles · devis · à propos · mentions & RGPD
 * ============================================================ */

/* ---------- SOMMAIRE DES RESSOURCES ---------- */
.res-body{max-width:1080px;margin:0 auto;padding:32px 24px 72px}
.res-cat{margin-bottom:40px}
.res-cat-header{display:flex;align-items:center;gap:11px;padding-bottom:10px;margin-bottom:18px;border-bottom:2px solid var(--ink)}
.res-cat-title{font-family:var(--disp);font-size:1.12rem;color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
.res-cat-count{margin-left:auto}
.art-grid,.art-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.art-card,.art-preview-card{display:flex;flex-direction:column;border:2px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--ink);padding:18px 20px;transition:transform .15s,box-shadow .15s}
.art-card:hover,.art-preview-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--green)}
.art-card h3,.art-preview-card h3{font-family:var(--disp);font-size:1rem;color:var(--ink);margin:8px 0}
.art-card p,.art-preview-card p{font-size:.88rem;line-height:1.65;margin-bottom:12px}
.art-read,.apc-read{margin-top:auto;font-family:var(--mono);font-size:0.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-d)}
.res-cta-text{max-width:560px;margin:0 auto}

/* ---------- BAS D'ARTICLE ---------- */
.art-also{margin-top:44px;border-top:2px solid var(--ink);padding-top:22px}
.art-also h2{font-family:var(--disp);font-size:1rem;text-transform:uppercase;border:0;padding:0;margin-bottom:12px}
.art-also-links{display:grid;gap:8px}
.art-also-links a{display:block;padding:10px 14px;border-left:3px solid var(--green);background:var(--surface);font-size:.9rem;font-weight:600;text-decoration:none}
.art-also-links a:hover{background:var(--green-soft)}
.art-publine{font-family:var(--mono);font-size:0.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.art-sources{margin-top:32px;padding:16px 18px;background:var(--surface-2);border-left:4px solid var(--line-strong);font-size:.84rem;line-height:1.7}
.art-sources h2,.art-sources h3{font-family:var(--mono);font-size:0.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:0;padding:0;margin-bottom:8px}

/* ---------- DEVIS : CARTES ET PANIER ---------- */
.dv-body{max-width:1080px;margin:0 auto;padding:32px 24px 72px}
.dv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px;margin-top:22px}
.dv-card{display:flex;flex-direction:column;border:2px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--ink);padding:18px 20px}
.dv-card.selected{box-shadow:5px 5px 0 var(--green);border-color:var(--green)}
.dv-card h3{font-family:var(--disp);font-size:1rem;color:var(--ink);margin:6px 0 4px}
.dv-card ul{list-style:none;margin:12px 0 16px;padding:0}
.dv-card li{font-size:.85rem;padding:6px 0 6px 22px;position:relative;line-height:1.55}
.dv-card li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:12px;background:var(--green);clip-path:polygon(28% 55%,50% 75%,80% 30%,92% 40%,50% 95%,16% 65%)}
.dv-card-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);color:var(--ink);margin-bottom:10px}
.ic-securite{background:var(--dom-securite);color:#fff}
.ic-qualite{background:var(--dom-qualite);color:#fff}
.ic-enviro{background:var(--dom-enviro);color:#fff}
.ic-digital{background:var(--dom-digital);color:#fff}
.dv-price{font-family:var(--mono);font-size:1.15rem;font-weight:700;color:var(--green);letter-spacing:-.02em}
.dv-price span{font-size:0.76rem;font-weight:400;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-left:5px}
.dv-freq{margin-bottom:14px;font-family:var(--mono);font-size:0.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.dv-freq select{width:100%;margin-top:6px;padding:9px 10px;border:1.5px solid var(--ink);background:var(--bg);font-family:var(--mono);font-size:.76rem;color:var(--ink)}
.dv-select-btn{margin-top:auto;width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:0.76rem;font-weight:600;padding:11px 14px;border:1.5px solid var(--ink);background:var(--surface-2);color:var(--ink);cursor:pointer;transition:background .15s}
.dv-select-btn:hover{background:var(--green-soft)}
.dv-card.selected .dv-select-btn{background:var(--green);color:#fff;border-color:var(--green)}
.dv-select-btn .check,.dv-card.selected .dv-select-btn .plus{display:none}
.dv-card.selected .dv-select-btn .check{display:inline}
.dv-note{margin-top:22px;font-size:.86rem;line-height:1.7;color:var(--body)}
/* panier flottant */
.dv-cart{position:fixed;right:20px;bottom:20px;z-index:80}
.dv-cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.74rem;font-weight:600;padding:13px 18px;background:var(--orange-btn);color:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.dv-cart-count{position:absolute;top:-9px;right:-9px;width:23px;height:23px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:50%;font-family:var(--mono);font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.dv-cart-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(340px,calc(100vw - 40px));background:var(--surface);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px;display:none;max-height:70vh;overflow-y:auto}
.dv-cart-panel.open{display:block}
.dv-cart-title{font-family:var(--disp);font-size:.95rem;color:var(--ink);margin-bottom:12px}
.dv-cart-items{list-style:none;margin:0 0 14px;padding:0;font-size:.85rem}
.dv-cart-items li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.dv-cart-remove{background:none;border:0;color:var(--orange-d);cursor:pointer;font-family:var(--mono);font-size:0.76rem;font-weight:700}
.dv-cart-field{margin-bottom:10px}
.dv-cart-field input,.dv-cart-field textarea,.dv-cart-msg{width:100%;padding:9px 11px;border:1.5px solid var(--line-strong);background:var(--bg);font:inherit;font-size:.85rem}
.dv-cart-field input:focus,.dv-cart-field textarea:focus{border-color:var(--green);outline:0}
/* ⚠ Même correctif que pour .form-grid : l'outline:0 ci-dessus supprimait
   aussi le contour clavier sur les champs de la page devis. */
.dv-cart-field input:focus-visible,.dv-cart-field textarea:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.dv-cart-send{width:100%;padding:12px;border:1.5px solid var(--ink);background:var(--green);color:#fff;font-family:var(--mono);font-size:.76rem;font-weight:600;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.dv-cart-send:disabled{background:var(--line-strong);cursor:not-allowed;box-shadow:none}
.dv-cart-note{margin-top:9px;font-size:0.76rem;color:var(--faint);line-height:1.5}

/* ---------- À PROPOS ---------- */
.ap-body{max-width:900px;margin:0 auto;padding:32px 24px 72px}
.ap-grid{display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:start}
.ap-photo-wrap{position:relative}
.ap-photo{width:100%;display:block;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--green)}
.ap-badge{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:0.73rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);padding:5px 11px}
.ap-role{font-family:var(--mono);font-size:0.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-d);margin-bottom:8px}
.ap-bio{font-size:1rem;line-height:1.8}
/* Appel à l'action intercalé dans la présentation. L'objectif de la page est
   de déclencher un appel : attendre le bloc du bas, à 800 mots de là, revient
   à le perdre. */
.ap-appel{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-size:.95rem;color:var(--body)}

.ap-section{margin-top:38px}
.ap-section h2{font-family:var(--disp);font-size:1.2rem;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:16px}
.ap-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.ap-value-card{border:2px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--ink);padding:16px 18px}
.ap-value-card h3{font-family:var(--disp);font-size:.95rem;color:var(--ink);margin-bottom:6px}
.ap-value-card p{font-size:.87rem;line-height:1.65;margin:0}

/* ---------- MENTIONS LÉGALES & CONFIDENTIALITÉ ---------- */
.ml-wrap{max-width:780px;margin:0 auto;padding:32px 24px 72px}
.ml-title{font-family:var(--disp);font-size:clamp(1.4rem,4vw,2rem);color:var(--ink);margin-bottom:10px;text-transform:uppercase}
.ml-intro{font-size:.98rem;line-height:1.75;color:var(--body);margin-bottom:8px}
.ml-update{font-family:var(--mono);font-size:0.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:26px}
.ml-section{margin-top:34px}
.ml-section h2{font-family:var(--disp);font-size:1.08rem;color:var(--ink);text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:9px;margin-bottom:14px}
.ml-section h3{font-family:var(--disp);font-size:.95rem;color:var(--ink);margin:18px 0 6px}
.ml-section p,.ml-section li{font-size:.92rem;line-height:1.8;color:var(--body)}
.ml-section ul,.ml-section ol{margin:0 0 12px 22px}
.ml-iprp-badge{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--green);padding:12px 16px;font-family:var(--mono);font-size:.74rem;font-weight:600;color:var(--ink);margin:14px 0}
.ml-right-card{border:1.5px solid var(--line-strong);background:var(--surface);padding:14px 16px}
.ml-right-card h3{font-family:var(--disp);font-size:.92rem;color:var(--ink);margin:0 0 6px}
.ml-right-card p{font-size:.86rem;line-height:1.65;margin:0}
.ml-rights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.ml-table{width:100%;border-collapse:collapse;font-size:.88rem;margin:14px 0}
.ml-table th{font-family:var(--mono);font-size:0.73rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--ink);text-align:left;padding:10px 12px}
.ml-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}

/* ---------- PAGE 404 ---------- */
.err-wrap{max-width:640px;margin:0 auto;padding:70px 24px;text-align:center}
.err-code{font-family:var(--disp);font-size:clamp(3.4rem,14vw,6rem);line-height:1;color:var(--ink)}
.err-title{font-family:var(--disp);font-size:1.3rem;color:var(--ink);margin:12px 0 8px;text-transform:uppercase}
.err-sub{font-size:.96rem;line-height:1.75;color:var(--body);margin-bottom:26px}
.err-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media(max-width:760px){
  .ap-grid{grid-template-columns:1fr}
  .ap-photo{max-width:220px}
  .dv-cart{right:12px;bottom:12px}
}

/* ============================================================
 *  SIGNAL DE DOMAINE SUR LES PAGES
 * ------------------------------------------------------------
 *  Chaque page de domaine pose sur <body> une classe .dom-*,
 *  qui alimente la variable --dom. Le repère reste discret :
 *  un filet sous l'en-tête, l'étiquette, le fil d'Ariane, les
 *  chiffres du bandeau et l'ombre du bloc d'appel. Le corps du
 *  texte n'est pas touché — la couleur situe, elle ne décore pas.
 *  Les pages sans domaine gardent le vert par défaut.
 * ============================================================ */
body{--dom:var(--green)}
.dom-qualite {--dom:var(--dom-qualite)}
.dom-securite{--dom:var(--dom-securite)}
.dom-enviro  {--dom:var(--dom-enviro)}
.dom-digital {--dom:var(--dom-digital)}

[class*="dom-"] .page-hero{border-top:5px solid var(--dom)}
[class*="dom-"] .page-hero-tag{background:var(--dom);border-color:var(--dom);color:#fff}
[class*="dom-"] .page-breadcrumb a{color:var(--dom)}
[class*="dom-"] .page-stat-val{color:var(--dom)}
[class*="dom-"] .page-cta,
[class*="dom-"] .content-cta{border-color:var(--dom);box-shadow:6px 6px 0 var(--dom)}
[class*="dom-"] .check-list li::before{border-color:var(--dom);background:var(--dom)}
@media(max-width:720px){
  [class*="dom-"] .page-cta,[class*="dom-"] .content-cta{box-shadow:4px 4px 0 var(--dom)}
}

/* ---------- PIED DE PAGE : PLAN DU SITE ---------- */
.footer{padding:34px 0 16px}
.ft-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px 30px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.14)}
.ft-col h2{font-family:var(--mono);font-size:0.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:11px;border:0;padding:0}
.ft-col a,.ft-col span{display:block;font-size:.82rem;line-height:1.5;padding:3px 0;color:rgba(255,255,255,.72)}
.ft-col a:hover{color:var(--orange)}
.ft-col span{color:rgba(255,255,255,.48)}
.ft-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:16px;font-family:var(--mono);font-size:0.76rem}
.ft-bar p{margin:0;color:rgba(255,255,255,.6)}
.ft-bar a{color:rgba(255,255,255,.72)}
.ft-bar a:hover{color:var(--orange)}
@media(max-width:560px){.ft-map{gap:20px}.ft-bar{justify-content:flex-start}}

/* ---------- POT DE MIEL ANTI-ROBOT ---------- */
/* Masqué à l'écran mais présent dans le DOM : un robot le remplit,
   un humain ne le voit pas. On évite display:none, que certains
   robots détectent — et aria-hidden + tabindex=-1 le retirent du
   parcours des lecteurs d'écran et du clavier. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.content-section h1{font-family:var(--disp);font-size:clamp(1.3rem,3.4vw,1.8rem);color:var(--ink);text-transform:uppercase;margin-bottom:16px;padding-bottom:11px;border-bottom:2px solid var(--ink)}

/* ---------- CONDITIONS TARIFAIRES (page devis) ---------- */
.dv-conditions{margin-top:34px;padding:26px 28px;background:var(--surface);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--line-strong)}
.dv-conditions h2{font-family:var(--disp);font-size:1.1rem;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.dv-conditions h3{font-family:var(--mono);font-size:0.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d);margin:20px 0 7px}
.dv-conditions h3:first-of-type{margin-top:0}
/* Sur un écran de 1440, ces paragraphes s'étalaient sur 924 px, soit 115
   caractères par ligne : au-delà d'environ 90, l'œil perd la ligne en
   revenant à la marge gauche et doit la rechercher à chaque retour.
   Le reste du site tient déjà ses textes à 660–680 px (.dv-intro,
   .dv-tarifs-lead) ; cette section avait simplement été oubliée.
   Unité ch plutôt que px : elle vaut la largeur du zéro, donc la mesure
   reste juste si la taille de police change un jour. */
.dv-conditions p{font-size:.88rem;line-height:1.75;color:var(--body);margin-bottom:10px;max-width:72ch}
.dv-conditions a{color:var(--green-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(max-width:560px){.dv-conditions{padding:20px 18px;box-shadow:3px 3px 0 var(--line-strong)}}

/* ---------- BLOC TARIFAIRE DE LA PAGE DEVIS ---------- */
.dv-tarifs{margin-bottom:38px}
.dv-tarifs h2{font-family:var(--disp);font-size:1.25rem;color:var(--ink);text-transform:uppercase;margin-bottom:8px}
.dv-tarifs-lead{font-size:.95rem;line-height:1.7;color:var(--body);max-width:680px;margin-bottom:18px}
.dv-tarifs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.dv-t{border:2px solid var(--ink);background:var(--surface);padding:22px 22px 20px}
.dv-t-hot{border-color:var(--green);box-shadow:5px 5px 0 var(--green)}
.dv-t-tag{display:inline-block;font-family:var(--mono);font-size:0.73rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d);border:1px solid var(--line-strong);padding:4px 11px;margin-bottom:14px}
.dv-t-hot .dv-t-tag{color:#fff;background:var(--green);border-color:var(--green)}
.dv-t-amt{display:flex;align-items:baseline;gap:9px;margin-bottom:12px}
.dv-t-amt b{font-family:var(--mono);font-size:1.75rem;font-weight:700;letter-spacing:-.03em;color:var(--green);line-height:1}
.dv-t-amt em{font-style:normal;font-family:var(--mono);font-size:0.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.dv-t p{font-size:.89rem;line-height:1.7;color:var(--body);margin:0}
.dv-t-list{list-style:none;margin:0 0 12px;padding:0;border-top:1px dashed var(--line)}
.dv-t-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.86rem}
.dv-t-list b{font-family:var(--mono);color:var(--ink);white-space:nowrap}
/* Le tarif journalier en vert, comme dans le bloc tarifs de l'accueil :
   c'est lui qui porte la dégressivité, il doit se lire avant le montant
   mensuel qui, lui, augmente d'une ligne à l'autre. */
.dv-t-list .jour{color:var(--green);font-weight:700}
.dv-tarifs-note{margin-top:14px;font-size:.84rem;color:var(--faint)}
.dv-tarifs-note a{color:var(--green-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media(max-width:760px){.dv-tarifs-grid{grid-template-columns:1fr}.dv-t-hot{box-shadow:4px 4px 0 var(--green)}}

/* ---------- SOMMAIRE DE LA PAGE RESSOURCES ---------- */
.res-sommaire{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:14px 16px;margin-bottom:34px;background:var(--surface);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--line-strong)}
.res-sommaire>span{font-family:var(--mono);font-size:0.73rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-right:4px}
.res-sommaire a{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1.5px solid var(--line-strong);font-size:.8rem;font-weight:600;color:var(--ink);background:var(--bg)}
.res-sommaire a:hover{border-color:var(--ink);background:var(--green-soft)}
.res-sommaire a b{font-family:var(--mono);font-size:0.76rem;font-weight:700;color:var(--faint)}
.res-cat{scroll-margin-top:86px}
.res-cat-title{font-family:var(--disp);font-size:1.1rem;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;margin:0;border:0;padding:0}


/* ---------- ÉCRANS BAS : on resserre puis on renonce ---------- */
/* Entre 640 et 780 px de haut, on comprime encore. En dessous de 640 px
   — portable en paysage, très petit écran — forcer la pleine hauteur
   tasserait le contenu jusqu'à l'illisible : on laisse alors la page
   défiler normalement, ce qui vaut mieux qu'un bandeau étranglé. */
@media (min-height:640px) and (max-height:780px){
  .hero .kicker{margin-bottom:12px;padding:6px 12px}
  .hero h1 .marker::after{height:4px;margin-top:2px}
  .phone .ph{padding:11px 20px;font-size:clamp(1.3rem,2.6vw,1.7rem)}
  .phone .ph svg{width:22px;height:22px}
  .idcard-body{padding:12px 16px}
  .rep{padding:12px 14px}
  .rep b{font-size:1.1rem}
}
@media (max-height:639px){
  .hero{min-height:0;padding:30px 0}
}
.ft-col .ft-h2-2{margin-top:16px}
/* la ligne de date précède la ligne d'auteur dans le bandeau d'article */
.art-publine{margin-bottom:6px}
.art-publine time{font-variant-numeric:tabular-nums}
/* « (arobase) » n'est affiché que si le script n'a pas remplacé le texte */
.js-mailto-val .at{font-style:italic}
/* une ligne du tableau peut renvoyer vers plusieurs pages */
.tab td.go-multi{display:flex;flex-direction:column;gap:4px;white-space:nowrap}

/* ============================================================
 *  RESSOURCES — INDEX DE DOCUMENTATION
 * ------------------------------------------------------------
 *  Pas de cartes : des filets et de la typographie. Une ligne
 *  par guide, avec sa date et sa durée de lecture — les deux
 *  informations sur lesquelles un lecteur choisit réellement.
 * ============================================================ */
.res-body{max-width:900px;margin:0 auto;padding:30px 24px 72px}

/* le guide mis en avant */
.res-une{display:block;border:2px solid var(--ink);background:var(--surface);box-shadow:6px 6px 0 var(--green);padding:24px 26px;margin-bottom:42px;position:relative;transition:transform .15s,box-shadow .15s}
.res-une:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--green)}
.res-une-lbl{display:inline-block;font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--yellow);border:1.5px solid var(--ink);padding:4px 11px;margin-bottom:14px}
.res-une h2{font-family:var(--disp);font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.2;color:var(--ink);margin-bottom:10px;border:0;padding:0;text-transform:none}
.res-une p{font-size:.95rem;line-height:1.7;color:var(--body);margin-bottom:14px}
.res-une-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;color:var(--body)}
.res-une-meta b{color:var(--orange-d)}
.res-une-meta .sep{opacity:.5}

/* rubriques */
.res-sec{margin-bottom:34px;scroll-margin-top:86px}
.res-sec-t{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.81rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding-bottom:9px;margin-bottom:2px;border-bottom:2px solid var(--ink)}
.res-sec-t b{margin-left:auto;font-weight:400;color:var(--body)}

/* lignes d'index */
.res-list{display:block}
.res-l{display:grid;grid-template-columns:118px 1fr auto;align-items:baseline;gap:18px;padding:17px 8px 17px 0;border-bottom:1px dashed var(--line);transition:background .13s,padding .13s}
.res-l:last-child{border-bottom:0}
.res-l:hover{background:var(--green-soft);padding-left:10px}
.res-l-tag{font-family:var(--mono);font-size:.77rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--body);padding-top:2px}
.res-l:hover .res-l-tag{color:var(--green-d)}
.res-l-txt strong{display:block;font-family:var(--disp);font-size:1.05rem;line-height:1.28;color:var(--ink);margin-bottom:4px}
.res-l-txt span{display:block;font-size:.92rem;line-height:1.62;color:var(--body)}
.res-l-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-family:var(--mono);font-size:.79rem;color:var(--body);white-space:nowrap}
.res-l-meta b{font-weight:600;color:var(--ink)}
@media(max-width:640px){
  .res-l{grid-template-columns:1fr;gap:5px}
  .res-l-meta{flex-direction:row;align-items:center;gap:10px}
  .res-une{box-shadow:4px 4px 0 var(--green);padding:20px}
}

/* ---------- ZONE D'INTERVENTION ---------- */
.zone{border-top:2px solid var(--ink);background:var(--surface);padding:40px 0}
.zone-l{display:grid;grid-template-columns:auto 1fr;gap:0 26px;align-items:baseline}
.zone-l dt{font-family:var(--disp);font-size:.92rem;color:var(--ink);padding:11px 0;border-top:1px solid var(--line);white-space:nowrap}
.zone-l dd{font-family:var(--mono);font-size:.85rem;line-height:1.65;color:var(--body);padding:11px 0;border-top:1px solid var(--line);margin:0}
.zone-l dt:first-of-type,.zone-l dd:first-of-type{border-top:0}
.zone-note{margin-top:18px;font-size:.9rem;color:var(--body)}
@media(max-width:700px){
  .zone-l{grid-template-columns:1fr;gap:0}
  .zone-l dt{padding:12px 0 2px}
  .zone-l dd{border-top:0;padding:0 0 12px}
  .zone-l dd:first-of-type{padding-top:0}
}

/* ---------- BLOC D'APPEL EN FIN D'ARTICLE ---------- */
/* Le soulignement des liens du corps ne doit pas déborder sur les boutons :
   .art-wrap a est souligné, ce qui donnait des boutons à l'aspect cassé. */
.art-cta a,.page-cta a,.content-cta a,.res-cta a{text-decoration:none}
.art-cta .btn-primary,.art-cta .btn-cta-ghost{text-decoration:none}
/* Un appel à l'action en fin de lecture n'a pas besoin du corps d'un titre
   de page : on descend d'un cran par rapport aux h2 du contenu. */
.art-cta h2{font-size:clamp(1.05rem,2.2vw,1.28rem);text-transform:none;letter-spacing:0;margin-bottom:8px}
.art-cta{padding:26px 24px;margin-top:44px}
.art-cta p{margin-bottom:18px}
.art-cta-note{margin:14px 0 0;font-family:var(--mono);font-size:.75rem;color:var(--faint)}
.art-cta-note a{color:var(--green-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}


/* ---------- BOUTONS DANS UNE ZONE DE PROSE ---------- */
/* .art-wrap a et .content-section a imposent le vert souligné des liens de
   texte, avec une spécificité (0-1-1) supérieure à .btn-primary (0-1-0) :
   sans ces règles, le texte des boutons ressortait en vert sur fond orange,
   soit 2,45:1 — illisible. Toujours re-déclarer couleur ET soulignement. */
.art-wrap a.btn-primary,.content-section a.btn-primary,.art-cta a.btn-primary,
.page-cta a.btn-primary,.res-cta a.btn-primary,.dv-cta a.btn-primary{color:#fff;text-decoration:none}
.art-wrap a.btn-ghost,.content-section a.btn-ghost,.art-cta a.btn-cta-ghost,
.page-cta a.btn-ghost,.res-cta a.btn-ghost{color:var(--ink);text-decoration:none}
.art-wrap a.btn-ghost:hover,.content-section a.btn-ghost:hover,
.art-cta a.btn-cta-ghost:hover,.page-cta a.btn-ghost:hover{color:var(--green-d)}

/* ---------- TABLEAU DES RÉFÉRENTIELS SUR MOBILE ---------- */
/* Le min-width de 560 px forçait un défilement horizontal : sur un écran de
   360 px, un tiers du tableau était hors champ. Plutôt que de le faire
   glisser — geste que personne ne devine — chaque ligne devient un bloc.
   L'en-tête est retiré du flux visuel : empilé il n'apporte rien, chaque
   cellule se décrivant d'elle-même (le référentiel, puis son périmètre,
   puis les liens). Il reste lisible par un lecteur d'écran. */
@media(max-width:700px){
  /* Le kicker occupait 3 lignes et 57 px sur un écran de 375 px : l'interlettrage
     de .14em coûtait à lui seul une ligne entière. Réduit à .08em, la mention
     tient sur 2 lignes sans perdre son allure capitale. */
  .hero .kicker{letter-spacing:.08em}
  .tab-wrap{overflow-x:visible}
  .tab{min-width:0;display:block}
  /* ⚠ display:block OBLIGATOIRE ici, et c'est la cause réelle du défaut.
     .tab passe en display:block juste au-dessus, mais la légende conservait
     display:table-caption. Le navigateur lui fabrique alors une table anonyme
     qui se rétracte sur son contenu : la légende faisait 88 px de large dans
     un tableau de 327, soit 6 lignes de trois mots. Raccourcir le texte ne
     corrigeait rien, seul le mode d'affichage était en cause. */
  .tab caption{display:block;width:100%;font-size:.95rem;margin-bottom:14px}
  .tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tab tbody,.tab tr,.tab td{display:block}
  .tab tr{border:2px solid var(--ink);background:var(--surface);box-shadow:3px 3px 0 var(--ink);
          margin-bottom:14px;padding:14px 16px}
  .tab tr:hover td{background:transparent}
  .tab tr:hover{background:var(--green-soft)}
  .tab td{border:0;padding:0}
  .tab td.code{font-size:1rem;margin-bottom:7px;white-space:normal;
               padding-bottom:7px;border-bottom:1px dashed var(--line)}
  .tab td.go-multi{flex-direction:row;flex-wrap:wrap;gap:8px 16px;margin-top:10px}
  .tab td:last-child{margin-top:10px}
}

/* ---------- AUTRES DÉBORDEMENTS SUR PETIT ÉCRAN ---------- */
/* .art-table gardait un min-width de 520 px : même traitement que le tableau
   des référentiels, mais en conservant l'en-tête, qui porte ici du sens
   (unités, seuils…) et ne peut pas être déduit du contenu de la cellule. */
@media(max-width:700px){
  /* Le défilement existait déjà, mais rien ne l'annonçait : sur l'article
     « DUERP : 4 000 € d'amende », les colonnes MONTANT et RÉCIDIVE — les deux
     seules qui portent le chiffre — sont hors écran, et le visiteur n'a aucune
     raison de deviner qu'il faut faire glisser.
     Technique des ombres de défilement : deux dégradés « local » masquent les
     ombres quand on est en butée, deux dégradés « scroll » les révèlent dès
     qu'il reste du contenu de ce côté. L'ombre apparaît donc si et seulement
     s'il y a quelque chose à aller chercher. Aucun JavaScript, aucun HTML. */
  .art-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
                  border:1px solid var(--line);border-radius:0;
                  background:
                    linear-gradient(to right, var(--surface) 40%, rgba(255,255,255,0)) left center/34px 100% no-repeat local,
                    linear-gradient(to left,  var(--surface) 40%, rgba(255,255,255,0)) right center/34px 100% no-repeat local,
                    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.22), rgba(0,0,0,0)) left center/16px 100% no-repeat scroll,
                    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.22), rgba(0,0,0,0)) right center/16px 100% no-repeat scroll}
  .art-table{min-width:420px;font-size:.86rem}
  .art-table th,.art-table td{padding:9px 10px}
  /* L'indication de geste ne peut PAS vivre dans la légende : celle-ci
     appartient au <table>, donc à la zone défilante — elle glisse avec le
     contenu et se fait couper au premier déplacement. Elle est portée par un
     paragraphe .tab-hint placé avant le conteneur, hors du défilement. */
  .tab-hint{display:block;font-family:var(--mono);font-size:.72rem;
            letter-spacing:.04em;color:var(--faint);margin:16px 0 -8px}
  .art-table caption{text-align:left}
  .ml-table{display:block;overflow-x:auto}
  /* Même cause que pour .tab caption plus haut, symptôme inverse : la table
     anonyme fabriquée autour de la légende s'était calée sur une ligne unique
     de 479 px dans un écran de 375, et la fin de la phrase était coupée par
     le overflow-x:clip du body — donc définitivement invisible.
     RÈGLE GÉNÉRALE : toute table passée en display:block sur mobile doit
     voir sa légende passée en display:block elle aussi. */
  .ml-table caption{display:block;width:100%}
}
/* Les libellés en nowrap ne doivent jamais pousser leur conteneur au-delà de
   l'écran. On les laisse revenir à la ligne là où la largeur est contrainte. */
@media(max-width:520px){
  .zone-l dt,.tab td.code{white-space:normal}
  .rep-anchor strong{white-space:normal}
  .res-l-meta{white-space:normal}
  .btn-primary,.btn-nav,.btn-ghost,.btn-cta-ghost{white-space:normal;text-align:center}
}
/* Filet contre le défilement horizontal.
   ⚠ NE JAMAIS mettre overflow-x:hidden sur html ni body : un ancêtre dont
   l'overflow n'est pas « visible » devient un conteneur de défilement, ce
   qui ANNULE le position:sticky de l'en-tête. Erreur commise le 10/08.
   « clip » coupe le débordement sans créer ce conteneur : le collage de la
   barre de menu est préservé. Sur un navigateur qui ne connaît pas clip
   (Safari antérieur à 16), la règle est ignorée et l'on retombe sur un
   éventuel défilement horizontal — moindre mal qu'un menu qui décroche. */
body{overflow-x:clip}
.content-section,.art-wrap,.zone,.tab-sec,.aftercare{overflow-wrap:break-word}

/* ---------- ALERTE DU FORMULAIRE ---------- */
/* Un échec silencieux fait perdre la demande sans que personne ne le sache.
   role="alert" fait annoncer le message par un lecteur d'écran dès son
   apparition, sans attendre que l'utilisateur atteigne le bloc. */
.form-alerte{background:#fff4ec;border:2px solid var(--orange);border-left:6px solid var(--orange);
             padding:16px 18px;margin-bottom:20px}
.form-alerte strong{display:block;font-family:var(--disp);font-size:1rem;color:var(--orange-d);margin-bottom:8px}
.form-alerte ul{margin:0 0 10px 20px}
.form-alerte li{font-size:.92rem;line-height:1.65;margin-bottom:4px}
.form-alerte p{font-size:.9rem;margin:0}
.form-alerte a{color:var(--green-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Aide sous un champ : dire la contrainte AVANT l'erreur, pas après. */
/* Marqueur de champ obligatoire, et sa légende.
   Convention retenue : astérisque sur les champs obligatoires, RIEN sur les
   facultatifs. C'est déjà celle de la page devis, et c'est ce que les
   visiteurs connaissent.

   ⚠ aria-hidden="true" sur l'astérisque : sans lui, un lecteur d'écran
     annonce « Nom, société, astérisque », ce qui ne veut rien dire. Le
     caractère obligatoire est déjà porté par l'attribut « required » du
     champ, que les lecteurs d'écran annoncent correctement. L'astérisque
     n'est donc qu'une convention VISUELLE, et doit être masquée à
     l'oral pour éviter le doublon. */
/* ⚠ .form-lbl EST INDISPENSABLE, ne pas le retirer.
   « .form-grid label » est un conteneur GRID avec gap:5px. Dans une grille,
   chaque enfant occupe sa propre cellule : un nœud de texte nu et un <span>
   frère forment donc DEUX LIGNES. L'astérisque s'affichait ainsi seul sous
   le libellé, comme un point rouge orphelin.
   Le texte du libellé et son astérisque doivent être réunis dans un seul
   élément pour n'occuper qu'une cellule. Les cinq libellés portent ce span,
   même ceux sans astérisque, pour que tous se comportent identiquement. */
.form-lbl{display:block}
.form-req{color:var(--orange-d);font-weight:700}
.form-legende{margin:0 0 12px;font-size:.82rem;color:var(--faint)}


/* ============================================================
   BOUTON D'APPEL FLOTTANT — MOBILE UNIQUEMENT
   ------------------------------------------------------------
   Masqué par défaut : sur ordinateur, le numéro est déjà présent
   dans le bandeau d'accueil, la barre Tarifs & Devis et le pied
   de page. Un bouton flottant n'y apporterait que de l'encombrement.

   Reprend la signature visuelle du bouton téléphone principal —
   fond jaune, bordure encre de 2 px, ombre portée franche — pour
   qu'il soit reconnu comme le même geste, pas comme un élément
   rapporté. Encre sur jaune : 8,98:1, très au-dessus du seuil AA.

   ⚠ z-index:50, volontairement SOUS l'en-tête (60) et sous le menu
     déroulant : le bouton ne doit jamais masquer la navigation.
   ⚠ env(safe-area-inset-*) : sur iPhone, la barre de gestes occupe
     le bas de l'écran ; sans cette marge le bouton serait à moitié
     inatteignable.
   ⚠ 52 px de haut, au-delà des 44 px requis pour une cible tactile.
   ============================================================ */
.fab-tel{display:none}
@media(max-width:700px){
  .fab-tel{
    display:inline-flex;align-items:center;gap:9px;
    position:fixed;
    right:calc(14px + env(safe-area-inset-right,0px));
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    z-index:50;
    min-height:52px;padding:0 18px;
    font-family:var(--mono);font-size:.86rem;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
    color:var(--ink);background:var(--yellow);
    border:2px solid var(--ink);border-radius:999px;
    box-shadow:3px 3px 0 var(--ink);
    transition:transform .14s,box-shadow .14s;
  }
  .fab-tel:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
  .fab-tel svg{flex:0 0 20px}

  /* ---- Apparition conditionnelle ----
     La classe fab-auto n'est posée sur <body> QUE si le navigateur sait
     observer les intersections (voir js/site.js). Sans JavaScript, ou sur
     un navigateur trop ancien, aucune de ces deux règles ne s'applique et
     le bouton reste simplement toujours visible : la dégradation ne prive
     jamais le visiteur du moyen d'appeler.
     visibility, et pas seulement opacity : un élément à opacity:0 reste
     cliquable et reste annoncé par les lecteurs d'écran. */
  body.fab-auto .fab-tel{opacity:0;visibility:hidden;transform:translateY(14px);
                         transition:opacity .18s ease,transform .18s ease,visibility .18s}
  body.fab-auto .fab-tel.is-visible{opacity:1;visibility:visible;transform:none}
  /* Le bouton flotte au-dessus du contenu : sans cette réserve, il
     recouvrirait les dernières lignes du pied de page. */
  .footer .ft-bar{padding-bottom:78px}
}
/* À l'impression, un bouton d'appel n'a aucun sens. */
@media print{.fab-tel{display:none!important}}

/* ============================================================
   MÉTHODE, ENGAGEMENTS, GUIDES — section de preuve de l'accueil
   ------------------------------------------------------------
   Aucun élément nouveau dans le vocabulaire : les quatre étapes
   reprennent .pblock (bordure encre, fond béton), la carte des
   engagements reprend .idcard (encre sur fond clair, ombre verte),
   la liste des guides reprend les filets pointillés de .idcard-body.
   Le lecteur doit reconnaître les mêmes objets, pas en découvrir.
   ============================================================ */
.methode{border-top:2px solid var(--ink);background:var(--bg);padding:44px 0}

.etapes{list-style:none;margin:0 0 26px;padding:0;
        display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:etape}
.etape{border:2px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--ink);
       padding:18px 18px 20px;position:relative}
.etape-n{display:block;font-family:var(--mono);font-weight:700;font-size:1.6rem;line-height:1;
         color:var(--green);margin-bottom:10px}
.etape h3{font-family:var(--disp);font-size:1rem;color:var(--ink);margin:0 0 8px;line-height:1.2}
.etape p{font-size:.88rem;line-height:1.6;color:var(--body);margin:0}

/* align-items:stretch (valeur par défaut, donc non écrite) : la carte des
   engagements prend la hauteur de la colonne des guides. Avec « start »,
   elle s'arrêtait après sa dernière ligne et laissait un vide en dessous. */
.preuves{display:grid;grid-template-columns:1fr 1.6fr;gap:18px}

.engagements{background:var(--ink);color:var(--surface);border:2px solid var(--ink);
             box-shadow:5px 5px 0 var(--green);padding:18px 20px 20px}
.engagements h3{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.1em;
                text-transform:uppercase;color:var(--yellow);margin:0 0 12px}
.engagements ul{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.8rem;line-height:1.5}
.engagements li{padding:6px 0 6px 22px;position:relative;border-bottom:1px dotted rgba(247,250,248,.25)}
.engagements li:last-child{border-bottom:0}
.engagements li::before{content:"✓";position:absolute;left:0;top:6px;color:var(--yellow);font-weight:700}
.engagements a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}

.guides-recents h3{font-family:var(--mono);font-size:.76rem;font-weight:600;letter-spacing:.1em;
                   text-transform:uppercase;color:var(--green);margin:0 0 12px}
.guides-recents ul{list-style:none;margin:0 0 12px;padding:0}
.guides-recents li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
                   border:2px solid var(--ink);background:var(--surface);padding:11px 14px;margin-bottom:8px}
.guides-recents li a{font-weight:600;color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.35}
.guides-recents li a:hover{color:var(--green)}
.guides-recents time{font-family:var(--mono);font-size:.72rem;color:var(--faint);white-space:nowrap;flex:0 0 auto}
.guides-recents .link{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--orange-d)}

@media(max-width:1020px){
  .etapes{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .etapes{grid-template-columns:1fr;gap:12px}
  .preuves{grid-template-columns:1fr}
  /* Sur petit écran, la date passe sous le titre du guide plutôt que de
     le comprimer sur trois lignes à côté d'une colonne trop étroite. */
  .guides-recents li{flex-direction:column;align-items:flex-start;gap:4px}
}