/* ==========================================================================
   Dossier Mairie — système de design v4 « Parcelle & Brique de terre cuite »
   Intention : un cabinet technique, lisible et sûr de lui. Le livrable — le
   panneau d'affichage réglementaire — est le héros ; tout le reste est du
   filet et du blanc.
   La couleur encode la permission : vert = acquis, ocre = à vérifier,
   rouge = refusé. L'ocre est la seule couleur d'action, et ne sert jamais
   à écrire (1,9:1 sur blanc) : uniquement en aplat, texte encre dessus.
   Source unique : ce fichier. Aucune couleur ni taille en ligne ailleurs.
   Voir DESIGN.md.
   ========================================================================== */

/* Deux familles variables, auto-hébergées : aucune requête externe. */
@font-face{font-family:"Archivo";src:url("fonts/archivo-variable-latin.woff2") format("woff2-variations");
  font-weight:400 800;font-stretch:100% 125%;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-variable-latin.woff2") format("woff2-variations");
  font-weight:400 600;font-display:swap}

:root{
  /* Primitives */
  --ink-900:#131a22; --ink-700:#28323d; --ink-600:#3c4854; --ink-500:#5d6975;
  /* Bleus de la marque, relevés sur le logo : disque #014B8C, flèche #43BADA. */
  --bleu-950:#01274a; --bleu-900:#012f5c; --bleu-800:#013d72; --bleu-700:#014b8c;
  --bleu-500:#1a7cc4; --bleu-300:#7fbde2; --bleu-200:#b4d6ee; --bleu-100:#dbe9f6; --bleu-50:#eef4fb;
  --cyan-400:#43bada; --cyan-200:#a7dcea;
  /* Verts : réservés au sens « acquis / accordé », plus à la marque. */
  --vert-700:#14624a; --vert-500:#2c7a5b; --vert-200:#b6d2c1; --vert-100:#dbe8df;
  --ocre-600:#d99c0c; --ocre-500:#f0b323; --ocre-300:#f7d179; --ocre-200:#fbe6ac; --ocre-100:#fdf3d9;
  --rouge-700:#a62b2b; --rouge-300:#e3a9a5; --rouge-100:#f9e7e5;
  --calque:#eef1f5; --calque-2:#e1e7ee; --line-300:#c2cad4; --line-200:#d7dee6; --white:#fff;

  /* Rôles */
  --c-bg:var(--white); --c-bg-alt:var(--calque); --c-bg-accent:var(--bleu-50);
  --c-text:var(--ink-900); --c-text-muted:var(--ink-600); --c-text-subtle:var(--ink-500);
  --c-brand:var(--bleu-700); --c-brand-dark:var(--bleu-900); --c-link:var(--bleu-700);
  --c-action:var(--ocre-500); --c-action-hover:var(--ocre-600); --c-on-action:var(--ink-900);
  --c-border:var(--line-200); --c-border-strong:var(--line-300); --c-focus:var(--bleu-500);
  --c-row-hover:var(--calque); --c-speed:var(--vert-500);
  --c-chart-1:var(--bleu-700); --c-chart-2:var(--cyan-200); --c-chart-3:var(--line-300);
  --ok-700:var(--vert-500); --ok-100:var(--vert-100); --ok-300:var(--vert-200);
  --warn-700:#6b4b00; --warn-100:var(--ocre-100); --warn-300:var(--ocre-300);
  --err-700:var(--rouge-700); --err-100:var(--rouge-100); --err-300:var(--rouge-300);
  --on-dark:#e6eef7; --on-dark-muted:#9fb9d2; --dark-rule:#1d4a78;

  /* Typographie : Archivo pour l'interface et les titres (axe de largeur),
     Source Serif 4 pour la prose longue. */
  --font:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-ui:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:var(--font-ui);
  --fs-2xs:12px; --fs-xs:13px; --fs-sm:15px; --fs-base:16px; --fs-md:20px; --fs-lg:23px;
  --fs-xl:30px; --fs-2xl:clamp(28px,4.4vw,48px); --fs-3xl:clamp(36px,6.2vw,68px);
  --lh-tight:1.08; --lh-snug:1.22; --lh-body:1.62;
  --wd:118%;                      /* largeur des titres, axe wdth d'Archivo */

  /* Espacements base 4 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:36px; --s-7:64px; --s-8:120px;
  /* Formes */
  --r-sm:4px; --r:8px; --r-lg:8px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(10,41,30,.05),0 2px 10px rgba(10,41,30,.05);
  --sh-2:0 22px 46px -26px rgba(10,41,30,.45);
  --sh-cta:none;
  /* Mouvement */
  --t-fast:140ms; --t:200ms; --ease:cubic-bezier(.2,.7,.2,1);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--font);color:var(--c-text);background:var(--c-bg);
  line-height:var(--lh-body);font-size:var(--fs-md);font-optical-sizing:auto}
img{max-width:100%;height:auto}
a{color:var(--c-link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--bleu-500)}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px;border-radius:1px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);background:var(--c-action);color:var(--c-on-action);
  padding:var(--s-3) var(--s-4);z-index:99;font-family:var(--font-ui);font-weight:700}
.tabular,.p,table.data td,.chip,.assurances b,.num,.price{font-variant-numeric:tabular-nums}

/* Interface en Archivo ; la prose reste en romain. */
h1,h2,h3,h4,.brand-name,.eyebrow,button,input,select,textarea,label,legend,th,
.btn,.chip,.badge,.crumbs,.kpi,.hint,.note,.disclaimer,.legend,.stepper,.assurances b,
.doc-head,.panneau,.stamp,.trust-strip,.door-go,.door-prices,.door-foot,.price,.price-note,
.plan li,.piece,.trust,.journey,.result dt,.result dd,.toggle,.mbar,.sources,
table.data,dl.facture,.card .more{font-family:var(--font-ui)}
h1,h2,h3,h4{font-stretch:var(--wd);letter-spacing:-.012em;line-height:var(--lh-tight);color:var(--c-text)}
h1{font-size:var(--fs-3xl);font-weight:400;letter-spacing:-.022em;line-height:1.0;margin:0 0 var(--s-4)}
h2{font-size:var(--fs-2xl);font-weight:500;letter-spacing:-.018em;margin:0 0 var(--s-4);line-height:1.08}
h3{font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--s-2);line-height:var(--lh-snug);letter-spacing:-.005em}
h4{font-size:var(--fs-base);font-weight:700;margin:0 0 var(--s-2);letter-spacing:0;font-stretch:112%}
p{margin:0 0 var(--s-4);max-width:68ch}
.lead{font-size:var(--fs-lg);line-height:1.5;color:var(--c-text-muted)}
.sub{color:var(--c-text-muted);margin:0 0 var(--s-6);max-width:64ch;font-size:var(--fs-lg);line-height:1.5}
.hint,.note{font-size:var(--fs-sm);color:var(--c-text-muted)}
.note{margin-top:10px}
.center{text-align:center}.center .sub{margin-left:auto;margin-right:auto}
.narrow{max-width:720px}.mx-auto{margin-left:auto;margin-right:auto}
.hidden{display:none!important}
.m0{margin:0}
.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}
.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mb-5{margin-bottom:var(--s-5)}

/* L'œil-de-bœuf n'est plus en capitales : c'est une étiquette de contexte. */
.eyebrow{font-size:var(--fs-xs);font-weight:700;color:var(--c-brand);margin-bottom:var(--s-2);letter-spacing:0}

/* Icônes */
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.icon.lg{width:28px;height:28px}

/* ---------------------------------------------------------- En-tête ----- */
header.site{background:var(--white);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:74px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--c-text);flex:none}
.brand-mark{width:36px;height:36px;flex:none;display:block;border-radius:50%}
.brand-name{font-weight:700;font-size:var(--fs-base);font-stretch:112%;line-height:1.1;font-family:var(--font-ui)}
.brand-name small{display:block;font-weight:400;font-size:var(--fs-2xs);color:var(--c-text-subtle);
  font-stretch:100%;letter-spacing:0;margin-top:1px}
nav.main{display:flex;align-items:center;gap:clamp(13px,1.6vw,19px);margin-left:auto;font-family:var(--font-ui)}
nav.main a{color:var(--c-text);text-decoration:none;padding:6px 0;font-size:var(--fs-base);font-weight:500;
  border-bottom:2px solid transparent;white-space:nowrap}
nav.main a:hover{color:var(--c-text);border-bottom-color:var(--c-action)}
nav.main a[aria-current="page"]{font-weight:700;border-bottom-color:var(--c-brand)}
nav.main .btn{border-bottom:0;color:var(--c-on-action)}
.menu-toggle{display:none;background:none;border:1px solid var(--c-border);border-radius:var(--r);
  padding:9px 13px;font:inherit;font-family:var(--font-ui);font-weight:600;color:var(--c-text);cursor:pointer;margin-left:auto}

/* ------------------------------------------ Menu déroulant Ressources -- */
/* Sans JavaScript, le clavier ouvre quand même le panneau (:focus-within). */
.has-sub{position:relative;display:flex;align-items:center}
.sub-toggle{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  border-bottom:2px solid transparent;padding:6px 0;font:inherit;font-family:var(--font-ui);
  font-size:var(--fs-base);font-weight:500;color:var(--c-text);cursor:pointer;white-space:nowrap}
.sub-toggle:hover{border-bottom-color:var(--c-action)}
.sub-toggle.btn,.sub-toggle.btn:hover,.sub-toggle.btn[aria-current="page"]{border-bottom-color:transparent}
.sub-toggle.btn .chev{margin-right:-3px}
.sub-toggle[aria-current="page"]{font-weight:700;border-bottom-color:var(--c-brand)}
.sub-toggle .chev{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) var(--ease)}
.has-sub.open .sub-toggle .chev{transform:rotate(180deg)}
.sub{display:none;position:absolute;top:100%;right:0;margin-top:9px;width:336px;background:var(--white);
  border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:8px;z-index:30}
.has-sub.open > .sub{display:block}
/* Repli sans JavaScript : le clavier ouvre le panneau. Dès que le script a pris
   la main, cette règle s’efface, sinon un clic de fermeture serait annulé par
   le focus resté sur le bouton. */
html:not(.js-nav) .has-sub:focus-within > .sub{display:block}
.sub a{display:grid;grid-template-columns:22px 1fr;gap:2px 12px;padding:10px 12px;border-radius:var(--r);
  border-bottom:0;white-space:normal;align-items:start}
.sub a:hover{background:var(--c-bg-accent);border-bottom:0}
.sub a .icon{width:19px;height:19px;color:var(--c-brand);grid-row:span 2;margin-top:3px}
.sub a b{font-weight:700;font-size:var(--fs-base)}
.sub a small{grid-column:2;font-size:var(--fs-xs);color:var(--c-text-subtle);font-weight:400;line-height:1.35}
.sub .sub-all{grid-template-columns:1fr;font-size:var(--fs-sm);font-weight:700;color:var(--c-brand);
  border-top:1px solid var(--c-border);border-radius:0;margin-top:6px;padding-top:12px}
.sub .sub-all:hover{background:none;color:var(--c-brand-dark)}

/* ---------------------------------------------------------- Boutons ----- */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);background:var(--c-action);color:var(--c-on-action);
  text-decoration:none;padding:13px 20px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  font-family:var(--font-ui);font-size:var(--fs-base);font-weight:700;line-height:1.25;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),color var(--t-fast)}
.btn:hover{background:var(--c-action-hover);color:var(--c-on-action);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.secondary{background:transparent;color:var(--c-brand);border-color:var(--c-brand)}
.btn.secondary:hover{background:var(--vert-100);color:var(--bleu-800)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--c-brand);padding-left:var(--s-2);padding-right:var(--s-2)}
.btn.ghost:hover{background:var(--c-bg-alt)}
.btn.small{padding:9px 14px;font-size:var(--fs-sm)}
.btn.large{padding:15px 26px;font-size:var(--fs-md)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{pointer-events:none;opacity:.85}
.btn[aria-busy="true"]::before{content:"";width:14px;height:14px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.cta{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.cta.center{justify-content:center}

/* ------------------------------------------------ Sections et en-têtes -- */
section{padding:var(--s-8) 0;position:relative}
section.alt{background:var(--c-bg-alt)}
/* Limite de parcelle : un filet, et une équerre d'angle au coin du contenu. */
section.alt,section + section.ruled{border-top:1px solid var(--c-border)}
section.ruled > .wrap::before{content:"";position:absolute;top:-1px;width:16px;height:16px;
  border-left:2px solid var(--c-brand);border-top:2px solid var(--c-brand)}
section.navy{background:var(--bleu-900);color:var(--on-dark);border-top:0}
section.navy h2,section.navy h3,section.navy h4{color:var(--white)}
section.navy .lead,section.navy .sub,section.navy p{color:var(--on-dark)}
section.navy .hint,section.navy .note{color:var(--on-dark-muted)}
section.navy a{color:var(--white)}
section.navy .btn.secondary{color:var(--on-dark);border-color:var(--dark-rule)}
section.navy .btn.secondary:hover{background:rgba(255,255,255,.07);color:var(--white)}

.hero{position:relative;overflow:hidden;color:var(--on-dark);background:var(--bleu-900);padding:var(--s-8) 0}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--dark-rule) 1px,transparent 1px),
                   linear-gradient(90deg,var(--dark-rule) 1px,transparent 1px);
  background-size:72px 72px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(120% 90% at 6% 0%,#000 22%,transparent 70%);
  mask-image:radial-gradient(120% 90% at 6% 0%,#000 22%,transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:var(--white);max-width:20ch}
.hero h1 em{display:block;font-style:normal;font-weight:500;font-size:clamp(20px,2.4vw,28px);
  color:var(--on-dark);margin-top:12px;line-height:1.22;letter-spacing:-.005em}
.hero p.lead{color:var(--on-dark);max-width:46ch;margin-bottom:var(--s-5)}
.hero .hint{color:var(--on-dark-muted)}
.hero .eyebrow{color:var(--ocre-300)}
.hero .btn.secondary{background:transparent;color:var(--on-dark);border-color:var(--dark-rule)}
.hero .btn.secondary:hover{background:rgba(255,255,255,.07);color:var(--white)}
.hero .card,.hero .panneau{color:var(--c-text)}
.hero.light{background:var(--c-bg-alt);color:var(--c-text);border-bottom:1px solid var(--c-border)}
.hero.light::after{display:none}
.hero.light h1{color:var(--c-text)}
.hero.light p.lead,.hero.light .hint{color:var(--c-text-muted)}
.hero.light .eyebrow{color:var(--c-brand)}
.hero.light .btn.secondary{color:var(--c-brand);border-color:var(--c-brand)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
/* Champ d'adresse du héros : un formulaire GET vers le vérificateur, sans JS. */
.hero-form{margin-top:var(--s-5);max-width:540px}
.hero-form label{color:var(--white);font-size:var(--fs-base);font-weight:600;margin:0 0 var(--s-2)}
.field-row{display:flex;gap:var(--s-2)}
.field-row input{flex:1;min-width:0}
.field-row .btn{flex:none}
/* Variante sombre : uniquement dans le héros. */
.hero .field-row input{background:var(--bleu-950);color:var(--white);border-color:var(--dark-rule)}
.hero .field-row input::placeholder{color:#7fa08c}
.hero .field-row input:focus{border-color:var(--bleu-500);box-shadow:0 0 0 3px rgba(26,124,196,.35)}

.page-head{padding:var(--s-7) 0 var(--s-6);background:var(--c-bg-alt);border-bottom:1px solid var(--c-border)}
.page-head h1{margin:0 0 var(--s-3);font-size:var(--fs-2xl)}
.page-head p{margin:0;color:var(--c-text-muted);max-width:64ch;font-size:var(--fs-lg);line-height:1.5}
.crumbs{font-size:var(--fs-xs);color:var(--c-text-subtle);margin-bottom:10px}
.crumbs a{color:var(--c-text-muted)}

/* ------------------------------------------------- Grilles et cartes ---- */
.grid{display:grid;gap:var(--s-5)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--white);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-5)}
.card p{margin:0;color:var(--c-text-muted);font-size:var(--fs-base)}
.card.link{text-decoration:none;color:inherit;display:block;transition:background var(--t) var(--ease),border-color var(--t) var(--ease)}
.card.link:hover{background:var(--ocre-100);border-color:var(--ocre-300)}
.card.featured{border-color:var(--c-brand);box-shadow:var(--sh-2);position:relative}
.card.featured::before{content:attr(data-flag);position:absolute;top:0;left:0;right:0;height:6px;
  background:var(--c-action);border-radius:var(--r-lg) var(--r-lg) 0 0;font-size:0}
.card.featured{padding-top:calc(var(--s-5) + 6px)}
.card .more{display:inline-block;margin-top:var(--s-3);color:var(--c-link);font-weight:700;font-size:var(--fs-base)}
/* Le chiffre accolé au bénéfice : jamais une promesse nue. */
.card .figure{white-space:nowrap;font-family:var(--font-ui);font-size:clamp(40px,5vw,56px);font-weight:400;font-stretch:112%;
  line-height:1;letter-spacing:-.02em;color:var(--c-brand);margin:var(--s-3) 0 var(--s-3);font-variant-numeric:tabular-nums}
.card-flag{display:inline-block;font-family:var(--font-ui);font-size:var(--fs-2xs);font-weight:700;
  background:var(--ocre-200);color:var(--warn-700);padding:3px 9px;border-radius:var(--r-sm);margin-bottom:var(--s-3)}

/* Mur de preuve : les sources publiques remplacent les logos clients. */
.sources-wall{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--c-border);
  border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.sources-wall li{background:var(--white);padding:var(--s-5) var(--s-4);font-family:var(--font-ui)}
.sources-wall b{display:block;font-size:var(--fs-base);font-weight:700}
.sources-wall span{display:block;font-size:var(--fs-sm);color:var(--c-text-subtle);margin-top:3px}
@media (max-width:820px){.sources-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sources-wall{grid-template-columns:1fr}}
.card-icon{width:40px;height:40px;border-radius:var(--r);background:var(--bleu-100);color:var(--c-brand);
  display:grid;place-items:center;margin-bottom:var(--s-3)}
.steps{counter-reset:n}
.num{counter-increment:n;position:relative;padding-top:var(--s-5);border-top:2px solid var(--bleu-200)}
.num:first-child{border-top-color:var(--c-brand)}
.num::before{content:counter(n);position:absolute;top:-13px;left:0;padding-right:8px;background:var(--c-bg);
  font-family:var(--font-ui);font-weight:800;font-size:var(--fs-sm);color:var(--c-brand);font-variant-numeric:tabular-nums}
section.alt .num::before{background:var(--c-bg-alt)}

/* --------------------------------------- Panneau d'affichage (héros) ---- */
.panneau{background:var(--white);border:1px solid #cfd6cf;border-radius:var(--r-lg);box-shadow:var(--sh-2);
  width:100%;max-width:440px;margin-left:auto;position:relative}
.panneau-top{background:var(--c-action);padding:var(--s-3) var(--s-4);border-radius:var(--r-lg) var(--r-lg) 0 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.panneau-top b{font-size:var(--fs-sm);font-weight:800;font-stretch:var(--wd);color:var(--ink-900)}
.panneau-top span{font-size:var(--fs-2xs);font-weight:600;color:var(--ink-700)}
.panneau-body{padding:var(--s-4) var(--s-4) var(--s-3)}
.panneau dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 var(--s-4)}
.panneau dt{font-size:var(--fs-sm);color:var(--c-text-subtle);padding:8px 0;border-bottom:1px solid var(--c-border)}
.panneau dd{font-size:var(--fs-base);font-weight:600;margin:0;padding:8px 0;border-bottom:1px solid var(--c-border);
  text-align:right;font-variant-numeric:tabular-nums}
.panneau dl > :nth-last-child(-n+2){border-bottom:0}
.panneau-foot{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border-top:1px solid var(--c-border);background:var(--c-bg-alt);border-radius:0 0 var(--r-lg) var(--r-lg);
  font-size:var(--fs-2xs);color:var(--c-text-subtle)}
.stamp{margin-left:auto;font-size:var(--fs-sm);font-weight:800;font-stretch:var(--wd);color:var(--vert-500);
  border:2px solid var(--vert-500);border-radius:var(--r);padding:4px 10px;transform:rotate(-4deg);background:var(--white);
  animation:stamp 600ms cubic-bezier(.2,1.5,.4,1) 500ms both}
@keyframes stamp{from{opacity:0;transform:rotate(-4deg) scale(1.7)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
.panneau-legend{font-family:var(--font-ui);font-size:var(--fs-2xs);color:var(--on-dark-muted);
  text-align:right;max-width:440px;margin:10px 0 0 auto}

/* ---------------------------------------------------- Les deux portes --- */
.doors{display:grid;gap:1px;background:var(--c-border);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.door{background:var(--white);padding:var(--s-6);display:grid;grid-template-columns:1fr auto;gap:var(--s-5);
  align-items:center;text-decoration:none;color:inherit;transition:background var(--t) var(--ease)}
.door:hover{background:var(--ocre-100);color:inherit}
.door h3{margin-bottom:6px}
.door p{font-size:var(--fs-base);color:var(--c-text-muted);margin:0;max-width:54ch}
.door-prices{list-style:none;margin:var(--s-4) 0 var(--s-3);padding:0;max-width:46ch;font-size:var(--fs-sm)}
.door-prices li{display:flex;justify-content:space-between;gap:var(--s-4);padding:7px 0;border-bottom:1px solid var(--c-border)}
.door-prices li:last-child{border-bottom:0}
.door-prices b{font-weight:700;font-size:var(--fs-base);white-space:nowrap;font-variant-numeric:tabular-nums}
.door-foot{font-size:var(--fs-sm);color:var(--c-text-subtle);margin:var(--s-3) 0 0}
.door-foot b{color:var(--c-text);font-weight:700;white-space:nowrap}
.door-go{font-weight:700;font-size:var(--fs-base);color:var(--c-brand);white-space:nowrap;
  border:1px solid var(--c-brand);border-radius:var(--r);padding:11px 16px;transition:background var(--t),color var(--t)}
.door:hover .door-go{background:var(--c-brand);color:var(--white)}
.doors-note{font-family:var(--font-ui);font-size:var(--fs-base);color:var(--c-text-muted);margin:var(--s-4) 0 0;max-width:none}

/* ------------------------------------------------ Pièces du dossier ----- */
.pieces{border-top:1px solid var(--c-border)}
.piece{display:grid;grid-template-columns:78px 1fr auto;gap:var(--s-4);align-items:baseline;
  padding:var(--s-4) 0;border-bottom:1px solid var(--c-border)}
.piece .code{font-size:var(--fs-sm);font-weight:700;color:var(--c-brand);font-variant-numeric:tabular-nums}
.piece .what{font-size:var(--fs-base);font-weight:600}
.piece .what small{display:block;font-family:var(--font);font-weight:400;color:var(--c-text-subtle);
  font-size:var(--fs-sm);margin-top:3px}
.piece .who{font-size:var(--fs-sm);color:var(--c-text-subtle);text-align:right}

/* ------------------------------------------------ Chiffres de confiance - */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5);margin:0}
.trust.trust-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.trust div{border-left:2px solid var(--bleu-200);padding-left:var(--s-4)}
.trust dt{font-size:var(--fs-2xs);color:var(--c-text-subtle);margin-bottom:4px}
.trust dd{margin:0;font-size:var(--fs-base);font-weight:700;font-variant-numeric:tabular-nums}
.trust dd.mini{font-size:var(--fs-sm);font-variant-numeric:normal}
.trust dd small{display:block;font-weight:400;font-size:var(--fs-sm);color:var(--c-text-subtle);margin-top:2px}
section.navy .trust div{border-left-color:var(--dark-rule)}
section.navy .trust dt,section.navy .trust dd small{color:var(--on-dark-muted)}
section.navy .trust dd{color:var(--white)}

/* --------------------------------------------------- Bande de garanties - */
.assurances{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--c-border);
  border-radius:var(--r-lg);background:var(--white);margin-top:var(--s-6)}
.assurances div{padding:var(--s-4) 18px;border-right:1px solid var(--c-border);display:flex;gap:var(--s-3);align-items:flex-start}
.assurances div:last-child{border-right:0}
.assurances .icon{color:var(--c-brand);margin-top:3px}
.assurances b{display:block;color:var(--c-text);font-size:var(--fs-base);font-weight:700}
.assurances span{color:var(--c-text-muted);font-size:var(--fs-sm);font-family:var(--font)}
.hero .assurances{position:relative;z-index:1;color:var(--c-text)}

/* ------------------------------------------------ Bande d'identité ------ */
.trust-strip{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);justify-content:center;align-items:center;
  padding:var(--s-5) 0;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);background:var(--white)}
.trust-strip div{display:flex;align-items:center;gap:var(--s-2);color:var(--c-text-muted);font-size:var(--fs-sm)}
.trust-strip .icon{color:var(--c-brand)}
.trust-strip b{color:var(--c-text)}

/* --------------------------------------------------------- Puces -------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;
  color:var(--bleu-800);background:var(--vert-100);border-radius:var(--r);padding:3px 10px;line-height:1.5}
.chip .icon{width:16px;height:16px;vertical-align:0}
.chip.neutral{color:var(--c-text-muted);background:var(--c-bg-alt)}
.chip.warn{color:var(--warn-700);background:var(--ocre-200)}
.badge{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:3px var(--s-2);
  border-radius:var(--r-sm);background:var(--c-bg-alt);color:var(--c-text-muted)}
.badge.ok{background:var(--vert-100);color:var(--bleu-800)}
.badge.warn{background:var(--ocre-200);color:var(--warn-700)}
.badge.err{background:var(--rouge-100);color:var(--err-700)}

/* -------------------------------------------------------- Tableaux ------ */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;background:var(--white);font-size:var(--fs-base);min-width:620px}
table.data.compact{min-width:0}
table.data th,table.data td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--c-border);vertical-align:top}
table.data thead th{font-size:var(--fs-sm);color:var(--c-text-subtle);font-weight:600;
  border-bottom:2px solid var(--c-text);background:transparent}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover td{background:var(--c-row-hover)}
table.data td.p{font-weight:700;white-space:nowrap;text-align:right}
table.data tr.group td{background:var(--c-bg-accent);font-weight:700}
table.data tr.past td{color:var(--c-text-subtle)}
.compare td:nth-child(2){background:var(--bleu-50);font-weight:700}

/* ----------------------------------------------------------- Listes ----- */
ul.check{list-style:none;padding:0;margin:0}
ul.check li{padding-left:26px;position:relative;margin:8px 0}
ul.check li::before{content:"";position:absolute;left:3px;top:11px;width:11px;height:6px;
  border-left:2px solid var(--vert-500);border-bottom:2px solid var(--vert-500);transform:rotate(-45deg)}
ul.cross{list-style:none;padding:0;margin:0}
ul.cross li{padding-left:26px;position:relative;margin:8px 0;color:var(--c-text-muted)}
ul.cross li::before{content:"–";position:absolute;left:6px;color:var(--c-text-subtle)}

/* ------------------------------------------------------- Formulaires --- */
form.box,.tool{background:var(--white);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-5)}
section.alt form.box,section.alt .tool{background:var(--white)}
/* « align-items:end » aligne les champs entre eux quand une étiquette tient
   sur deux lignes et sa voisine sur une seule. */
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:end}
.row.inline{grid-template-columns:1fr auto}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-4);align-items:end}
label{display:block;font-weight:600;font-size:var(--fs-sm);margin:14px 0 6px;color:var(--c-text)}
label small{font-weight:400;color:var(--c-text-subtle);font-size:var(--fs-xs)}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--c-border-strong);border-radius:var(--r);
  font-family:var(--font-ui);font-size:var(--fs-base);background:var(--white);color:var(--c-text);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--bleu-500);outline:none;box-shadow:0 0 0 3px var(--bleu-100)}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--err-700);box-shadow:0 0 0 3px var(--err-100)}
input:disabled,select:disabled,textarea:disabled{background:var(--c-bg-alt);color:var(--c-text-subtle);cursor:not-allowed}
textarea{min-height:110px;font-family:var(--font)}
fieldset{border:0;border-top:1px solid var(--c-border);padding:var(--s-4) 0 0;margin:var(--s-5) 0 0}
legend{font-weight:700;font-size:var(--fs-base);font-stretch:112%;padding:0 10px 0 0;color:var(--c-text)}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:var(--s-2)}
.choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--c-border);border-radius:var(--r);
  padding:11px 13px;font-weight:400;margin:0;cursor:pointer;font-family:var(--font-ui);font-size:var(--fs-sm);
  transition:border-color var(--t-fast),background var(--t-fast)}
.choice:hover{border-color:var(--c-border-strong)}
.choice input{width:auto;margin-top:4px;accent-color:var(--c-brand)}
.choice:has(input:checked){border-color:var(--c-brand);background:var(--bleu-50)}
.consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:var(--fs-sm);
  color:var(--c-text-muted);font-family:var(--font)}
.consent input{width:auto;margin-top:5px;accent-color:var(--c-brand)}
.form-reassure{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--c-text-muted)}
.form-reassure span{display:inline-flex;gap:6px;align-items:center}
.form-reassure .icon{color:var(--c-speed);width:16px;height:16px}
/* Sélecteur de profil */
.toggle{display:inline-flex;background:var(--c-bg-alt);border:1px solid var(--c-border);border-radius:var(--r-pill);padding:3px;gap:3px}
.toggle button{font-size:var(--fs-sm);font-weight:700;border:0;background:transparent;color:var(--c-text-muted);
  padding:9px 18px;border-radius:var(--r-pill);cursor:pointer;width:auto}
.toggle button[aria-pressed="true"]{background:var(--c-brand);color:var(--white)}

/* --------------------------------------------- Résultats et messages ---- */
.result{margin-top:var(--s-5);border-radius:var(--r);padding:var(--s-5);background:var(--white);
  border:1px solid var(--c-border);border-left:4px solid var(--c-border-strong)}
.result.ok{border-left-color:var(--vert-500)}
.result.warn{border-left-color:var(--c-action)}
.result.err{border-left-color:var(--rouge-700)}
.result h3{margin-top:0}
.result dl{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:0 var(--s-5);margin:var(--s-3) 0 0}
.result dt{font-size:var(--fs-sm);color:var(--c-text-subtle);padding:9px 0;border-bottom:1px solid var(--c-border)}
.result dd{font-size:var(--fs-base);margin:0;padding:9px 0;border-bottom:1px solid var(--c-border)}
.result dl > :nth-last-child(-n+2){border-bottom:0}
/* Suggestions de commune (guide « la DP dans votre ville ») */
/* Recherche d'une commune parmi celles qui sont documentées. */
.rech{max-width:640px}
.rech label{display:block;font-family:var(--font-ui);font-weight:700;font-size:var(--fs-sm);margin-bottom:8px}
.rech-champ{display:flex;gap:var(--s-3);align-items:stretch}
.rech-champ input{flex:1;min-width:0;margin:0}
.rech-champ .btn{flex:none}
.rech-aide{margin-top:10px}
@media (max-width:560px){.rech-champ{flex-direction:column}.rech-champ .btn{justify-content:center}}

.suggestions{list-style:none;margin:var(--s-2) 0 0;padding:0;border:1px solid var(--c-border);
  border-radius:var(--r);max-height:320px;overflow:auto;background:var(--white)}
.suggestions li + li{border-top:1px solid var(--c-border)}
.suggestions button,.suggestions a{display:flex;width:100%;gap:var(--s-3);align-items:baseline;justify-content:space-between;
  text-align:left;background:none;border:0;padding:11px 14px;cursor:pointer;font-family:var(--font-ui);
  font-size:var(--fs-base);color:var(--c-text)}
.suggestions button:hover,.suggestions a:hover{background:var(--ocre-100)}
.suggestions a{text-decoration:none;border-bottom:0}
.suggestions a[aria-selected="true"]{background:var(--bleu-100)}
.suggestions button b,.suggestions a b{font-weight:700}
.suggestions button span,.suggestions a span{color:var(--c-text-subtle);font-size:var(--fs-sm);white-space:nowrap}
.suggestions .vide{padding:11px 14px;font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--c-text-subtle)}

/* Verdict d'un outil : la réponse doit se voir avant tout le reste. */
.verdict{border:1px solid var(--c-border);border-left:6px solid var(--c-border-strong);
  border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s-5);background:var(--white)}
.verdict:focus{outline:none}
.verdict:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.verdict-head{padding:var(--s-5) var(--s-5) var(--s-4);background:var(--c-bg-alt);border-bottom:1px solid var(--c-border)}
.verdict-head h2{margin:0 0 var(--s-2);font-size:clamp(26px,4.2vw,41px);line-height:1.04}
.verdict-head p{margin:0;font-size:var(--fs-md);color:var(--c-text-muted);max-width:60ch}
.verdict-corps{padding:var(--s-5)}
.verdict-corps > :first-child{margin-top:0}
.verdict.ok{border-left-color:var(--vert-500)}
.verdict.ok .verdict-head{background:var(--vert-100)}
.verdict.warn{border-left-color:var(--c-action)}
.verdict.warn .verdict-head{background:var(--ocre-100)}
.verdict.err{border-left-color:var(--rouge-700)}
.verdict.err .verdict-head{background:var(--err-100)}
.verdict dl{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:0 var(--s-5);margin:0}
.verdict dt{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--c-text-subtle);padding:9px 0;border-bottom:1px solid var(--c-border)}
.verdict dd{font-family:var(--font-ui);font-size:var(--fs-base);margin:0;padding:9px 0;border-bottom:1px solid var(--c-border)}
.verdict dl > :nth-last-child(-n+2){border-bottom:0}
@media (max-width:620px){
  .verdict dl{grid-template-columns:1fr}
  .verdict dt{border-bottom:0;padding-bottom:0}
}
.sources,.disclaimer{font-size:var(--fs-2xs);color:var(--c-text-subtle);margin:var(--s-3) 0 0;max-width:none}
.disclaimer{border-left:2px solid var(--c-border);padding-left:var(--s-3);margin-top:var(--s-4)}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--c-border);border-top-color:var(--c-action);
  border-radius:50%;animation:spin .8s linear infinite;vertical-align:-3px;margin-right:var(--s-2)}
@keyframes spin{to{transform:rotate(360deg)}}

details{background:var(--white);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:13px 18px;margin-bottom:10px}
details summary{cursor:pointer;font-weight:600;font-family:var(--font-ui);color:var(--c-text)}
details[open] summary{margin-bottom:var(--s-1)}
details p,details ul{color:var(--c-text-muted);margin:10px 0 0}

.founder{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
.photo{width:200px;height:240px;border-radius:var(--r-lg);background:var(--c-bg-alt);display:grid;place-items:center;
  color:var(--c-text-subtle);font-size:var(--fs-xs);text-align:center;border:1px dashed var(--c-border-strong);font-family:var(--font-ui)}

.article{max-width:68ch}
.article h2{font-size:var(--fs-xl);margin-top:var(--s-7)}
.article h3{margin-top:var(--s-5)}
.article p,.article li{color:var(--ink-700)}
.callout{background:var(--c-bg-accent);border-left:3px solid var(--c-brand);padding:16px 20px;margin:var(--s-5) 0}

/* ---------------------------------------------------------- Pied -------- */
footer.site{background:var(--bleu-900);color:var(--on-dark);padding:var(--s-7) 0 var(--s-5);
  font-family:var(--font-ui);font-size:var(--fs-base)}
footer.site a{color:var(--on-dark);text-decoration:none}
footer.site a:hover{color:var(--white);text-decoration:underline}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-5)}
footer.site h4{color:var(--white);margin:0 0 var(--s-3);font-size:var(--fs-sm);letter-spacing:0}
footer.site p{color:var(--on-dark-muted);font-size:var(--fs-sm);max-width:38ch;font-family:var(--font)}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin:8px 0}
footer.site .legal{border-top:1px solid var(--dark-rule);margin-top:var(--s-6);padding-top:var(--s-4);
  font-size:var(--fs-2xs);color:var(--on-dark-muted);max-width:none;font-family:var(--font-ui)}

/* Barre d'action mobile : le pouce de l'artisan sur un chantier. */
.mbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--white);
  border-top:1px solid var(--c-border);padding:10px 12px;gap:10px;box-shadow:0 -8px 24px -18px rgba(10,41,30,.5)}
.mbar .btn{flex:1;justify-content:center;font-size:var(--fs-sm);padding:12px 8px;white-space:nowrap}

/* ------------------------------------------- Simulateur en étapes ------- */
.stepper{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-2);padding:0;margin:0 0 var(--s-5)}
.stepper li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);font-weight:600;
  color:var(--c-text-subtle);padding-top:var(--s-2);border-top:3px solid var(--c-border)}
.stepper li span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--c-bg-alt);border:1px solid var(--c-border-strong);font-size:var(--fs-xs);flex:none}
.stepper li.done{color:var(--c-brand);border-top-color:var(--c-brand)}
.stepper li.done span{background:var(--c-brand);border-color:var(--c-brand);color:var(--white)}
.stepper li.current{color:var(--c-text);border-top-color:var(--c-action)}
.stepper li.current span{background:var(--c-action);border-color:var(--c-action);color:var(--c-on-action)}
.wizard .step{min-height:260px}
.wizard-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  border-top:1px solid var(--c-border);padding-top:var(--s-4);margin-top:var(--s-4)}
.choices.compass{grid-template-columns:repeat(4,1fr)}
.sim-result{margin-top:var(--s-6)}
.sim-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-4)}
.sim-head h2{margin-bottom:var(--s-1)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.kpi{background:var(--white);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-4);
  display:flex;flex-direction:column;gap:2px}
.kpi span{font-size:var(--fs-sm);color:var(--c-text-subtle);font-weight:600}
.kpi b{font-family:var(--font-ui);font-size:var(--fs-2xl);font-stretch:112%;color:var(--c-text);
  letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi small{font-size:var(--fs-xs);color:var(--c-text-subtle)}
.kpi.highlight{background:var(--bleu-900);border-color:var(--bleu-900)}
.kpi.highlight span,.kpi.highlight small{color:var(--on-dark-muted)}
.kpi.highlight b{color:var(--white)}
dl.facture{display:grid;grid-template-columns:1fr auto;gap:var(--s-2) var(--s-4);margin:var(--s-3) 0 0}
dl.facture dt{color:var(--c-text-muted)}
dl.facture dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.chart{margin:var(--s-3) 0 0;background:var(--white);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-4)}
.chart svg{width:100%;height:auto;display:block}
.chart text{font-size:var(--fs-xs);fill:var(--c-text-subtle);font-family:var(--font-ui)}
.chart .axis{stroke:var(--c-border-strong)}
.chart .b-prod{fill:var(--c-chart-2)}
.chart .b-auto{fill:var(--c-chart-1)}
.chart .b-conso{fill:var(--c-chart-3)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);font-size:var(--fs-xs);color:var(--c-text-muted);margin-top:var(--s-2)}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend .k-auto::before{background:var(--c-chart-1)}
.legend .k-prod::before{background:var(--c-chart-2)}
.legend .k-conso::before{background:var(--c-chart-3)}
.dp-callout{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-5);align-items:center}
.dp-callout .cta{justify-content:flex-end}

/* --------------------------------------------------------- Adaptatif --- */
@media (max-width:1000px){
  .g3,.g4,.kpis,.trust,.trust.trust-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .panneau,.panneau-legend{margin-left:0;max-width:520px}
  .panneau-legend{text-align:left}
}
/* La navigation passe au menu déroulant avant de déborder : la marque, cinq
   entrées dont deux panneaux et le bouton d’action ne tiennent plus sous
   1120 px. Mesuré, pas deviné. */
@media (max-width:1120px){
  nav.main{display:none}
  .menu-toggle{display:inline-block}
  nav.main.open{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--white);
    border-bottom:1px solid var(--c-border);flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s-3) clamp(16px,4vw,32px) var(--s-5)}
  nav.main.open a{padding:14px 0;border-bottom:1px solid var(--c-border)}
  nav.main.open .btn{margin-top:var(--s-4);justify-content:center;border-bottom:0}
  nav.main.open .has-sub{display:block}
  nav.main.open .sub-toggle{display:flex;width:100%;justify-content:space-between;padding:14px 0;
    border-bottom:1px solid var(--c-border)}
  nav.main.open .sub{position:static;width:auto;margin:0;padding:2px 0 8px 14px;border:0;
    border-bottom:1px solid var(--c-border);box-shadow:none;border-radius:0}
  nav.main.open .sub a{padding:10px 12px;border-bottom:0}
  .assurances{grid-template-columns:1fr 1fr}
  .assurances div:nth-child(2){border-right:0}
  .assurances div:nth-child(-n+2){border-bottom:1px solid var(--c-border)}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .dp-callout{grid-template-columns:1fr}
  .dp-callout .cta{justify-content:flex-start}
  .mbar{display:flex}
  body{padding-bottom:70px}
}
@media (max-width:620px){
  section{padding:var(--s-7) 0}
  .g2,.g3,.g4,.row,.row3,.founder,.kpis,.trust,.trust.trust-3,.door{grid-template-columns:1fr}
  .row.inline{grid-template-columns:1fr}
  .field-row{flex-direction:column}
  .field-row .btn{justify-content:center}
  .assurances{grid-template-columns:1fr}
  .assurances div{border-right:0;border-bottom:1px solid var(--c-border)}
  .assurances div:last-child{border-bottom:0}
  .result dl{grid-template-columns:1fr}
  .result dt{border-bottom:0;padding-bottom:0}
  .piece{grid-template-columns:56px 1fr}
  .piece .who{grid-column:2;text-align:left}
  footer.site .cols{grid-template-columns:1fr}
  .photo{width:100%;max-width:240px}
  .stepper{grid-template-columns:repeat(6,auto);gap:var(--s-1)}
  .stepper li{font-size:0;gap:0;justify-content:center}
  .stepper li span{font-size:var(--fs-xs)}
  .choices.compass{grid-template-columns:1fr 1fr}
  .kpi b{font-size:var(--fs-xl)}
  .sim-head{flex-direction:column}
  .wizard .step{min-height:0}
  .door{gap:var(--s-4)}
}
@media print{
  header.site,footer.site,.cta,.no-print,.mbar{display:none!important}
  body{font-size:12pt;padding-bottom:0}
  section{padding:12px 0}
}