/* Maquette D3 « La chaleur dehors » · guidethermopompe.ca · ART-SYSTEM v2 (2026-10-20) — reprend ancres.css (validé) + extension
   Valeurs SOURCE : page #EBEBEB → #ECECE9, une police en 400 (Onformative) ; cadre arrondi + croix (Lusion) ;
   transitions « opacity 2s », « background 0.7s, color 0.7s », « 0.4s » (Onformative, CSSOM mesuré 2026-10-20) ;
   ouverture de la bande : clip-path inset(18% 12%) → inset(0), début « top center », fin « center center », scrub 0,85 (fiche expanding-section-scrub). */
@font-face{font-family:"Albert Sans";src:url(polices/albert-sans-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(polices/ibm-plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --page:#ECECE9; --champ:#E2E2DE; --encre:#1C1C1E; --encre-2:#5F5F5C; --filet:#C9C9C4; --rouge:#D61F2C; --saisie:#F6F6F4;
  --sans:"Albert Sans",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --marge:32px; --mur-x:58%; --t-ui:.4s; --t-etat:.7s; --t-fondu:2s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--page);color:var(--encre);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--page)}
::selection{background:var(--encre);color:var(--page)}
a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;transition:color var(--t-ui)}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px;border-radius:2px}
.sr,.evitement:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement:focus{position:absolute;left:12px;top:12px;z-index:20;background:var(--encre);color:var(--page);padding:10px 14px}
h1,h2,h3,h4{font-weight:400}
b,strong{font-weight:400}   /* un seul poids chargé (400) : pas de gras synthétique ; l'amorce se distingue par la couleur (voir .doc-texte, .faits) */
h1,h2,h3{text-wrap:balance}
a,button,summary,label,select,.puces span{-webkit-tap-highlight-color:transparent}

.entete{height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--marge);font-size:15px}
.marque{text-decoration:none;font-size:16px;letter-spacing:-.01em;display:inline-block;line-height:44px;white-space:nowrap}
.marque span,.pied-marque span{color:var(--encre-2)}
.entete nav{display:flex;gap:26px}
.entete nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.entete nav a[aria-current=page]{text-decoration:underline;text-underline-offset:.3em}

/* ——— matière : le champ dans un cadre déclaré ——— */
.cadre,.bande,.bande-pied{position:relative;overflow:hidden;background:var(--champ)}
.cadre{border-radius:22px}
.cadre picture,.bande picture,.bande-pied picture{position:absolute;inset:0}
.affiche{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.cadre canvas,.bande canvas,.bande-pied canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.croix{position:absolute;width:13px;height:13px;pointer-events:none;z-index:2}
.croix::before,.croix::after{content:"";position:absolute;background:var(--encre)}
.croix::before{left:6px;top:0;width:1px;height:13px}.croix::after{top:6px;left:0;height:1px;width:13px}
.c1{left:16px;top:16px}.c2{right:16px;top:16px}.c3{left:16px;bottom:16px}.c4{right:16px;bottom:16px}
.etiq{position:absolute;z-index:2;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--encre-2);background:var(--champ);padding:2px 6px}
.etiq b{font-weight:400;color:var(--encre)}

/* ——— 01 le courant ——— */
.s01 .cadre{margin:0 24px;height:calc(100svh - 60px - 392px);min-height:300px;max-height:760px}   /* 392 et 300 : la date de vérification reste dans l'écran 1 à 1440 × 900 et sur les portables courts (1366 × 768) */
.s01 .affiche{object-position:58% 50%}   /* même cadrage que le canvas (data-ancre=0.58) : le mur du hero reste à 58 % du cadre à toute largeur */
.e-dehors{left:38px;top:16px}.e-dedans{right:38px;top:16px}.e-mur{top:16px;left:var(--mur-hero,58%)}
.e-legende{left:38px;bottom:15px;max-width:540px}.e-param{right:38px;bottom:15px;text-align:right}
.sous-cadre{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:22px var(--marge) 40px}
.titre{grid-column:1 / span 6}
h1{font-size:44px;line-height:1.06;letter-spacing:-.02em;max-width:13em}
.divul{margin-top:14px;font-size:16px;line-height:1.5;color:var(--encre-2);max-width:36em}
.lede{font-size:16px;line-height:1.5;max-width:40em}
.outil{grid-column:7 / span 6}
.estimateur{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(max-content,1.5fr) minmax(max-content,.9fr) auto;gap:8px;align-items:end;margin-top:12px}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ label,.cp-l,legend{font-family:var(--mono);font-size:11.5px;color:var(--encre-2)}
select{appearance:none;font:inherit;font-size:15px;color:var(--encre);background:var(--saisie);border:1px solid var(--filet);border-radius:12px;padding:12px 26px 12px 12px;min-width:0;cursor:pointer;min-height:46px;
  background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);background-position:calc(100% - 17px) 54%,calc(100% - 12px) 54%;background-size:5px 5px;background-repeat:no-repeat;transition:border-color var(--t-ui)}
.go{border:0;border-radius:999px;background:var(--encre);color:var(--page);font:inherit;font-size:15px;padding:13px 22px;min-height:46px;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;transition:opacity var(--t-ui),transform var(--t-ui) cubic-bezier(.16,1,.3,1)}
.go i{width:7px;height:7px;border-radius:50%;background:var(--rouge);display:inline-block}
.go:active,.puces span:active{transform:scale(.97);transition-duration:0s}
.etats{margin-top:12px;border-top:1px solid var(--filet)}
.etat{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:6px 0;border-bottom:1px solid var(--filet);font-size:15px;line-height:1.45}
.etat > span{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);padding-top:2px;display:flex;gap:7px;align-items:center}
.etat > span::before{content:"";width:8px;height:8px;border-radius:50%;border:1.3px solid var(--encre);flex:none}
.etat.ouvert > span::before{background:var(--encre)}
.etat.termine{color:var(--encre-2)}
.etat.termine > span::before{border-style:dotted}
.etat small{color:var(--encre-2);font-size:13px}
.verif{margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--encre-2)}
.statut-mobile{display:none}

/* ——— 02 l'état des aides : la bande s'ouvre, son mur devient la table ——— */
.s02{padding-top:64px}
.bande{height:340px;--p:1;
  clip-path:inset(calc(18% * (1 - var(--p))) calc(12% * (1 - var(--p))) calc(18% * (1 - var(--p))) calc(12% * (1 - var(--p))) round calc(24px * (1 - var(--p))))}
.b-dehors{top:16px;right:calc(100% - var(--mur-x) + 14px)}
.b-dedans{top:16px;left:calc(var(--mur-x) + 14px)}
.tete{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:40px var(--marge) 28px}
.tete h2{grid-column:1 / span 6;font-size:34px;line-height:1.1;letter-spacing:-.015em}
.tete p{grid-column:7 / span 6;font-size:16px;line-height:1.55;color:var(--encre-2);max-width:38em;padding-top:4px}
.pour-vous{margin:0 var(--marge) 22px;padding:18px 0 20px;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);display:grid;grid-template-columns:var(--mur-x) 1fr;align-items:baseline;opacity:1;transition:opacity var(--t-fondu)}
.pour-vous[hidden]{display:none}
.pour-vous:focus{outline:none}
.pv-rep{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);padding-right:24px}
.pv-txt{font-size:19px;line-height:1.45;padding-left:48px;letter-spacing:-.005em}
.table{display:grid;grid-template-columns:var(--mur-x) 1fr;padding:0 0 96px}
.col{padding-top:4px}
.dehors{grid-column:1;grid-row:1;padding:0 48px 0 var(--marge)}   /* le DOM met « ouvert maintenant » d'abord (clavier, lecteur d'écran) ; la grille garde dehors à gauche */
.dedans{position:relative;grid-column:2;grid-row:1;padding:0 var(--marge) 0 48px;border-left:1.3px solid var(--encre)}
/* les graduations du mur continuent dans la table : le mur est un instrument, il mesure */
.dedans::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--encre) 0 1px,transparent 1px 12px) 0 0/4px 100% no-repeat,repeating-linear-gradient(to bottom,var(--encre) 0 1px,transparent 1px 60px) 0 0/9px 100% no-repeat;opacity:.9}
.col-t{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);padding:14px 0 10px}
.col-t ~ .col-t{margin-top:36px}
.aide{padding:18px 0 20px;border-top:1px solid var(--filet);transition:opacity var(--t-etat),color var(--t-etat)}
.aide h4{font-size:22px;line-height:1.2;letter-spacing:-.01em;transition:color var(--t-etat)}
.aide .org{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);margin-top:4px}
.aide .montant{font-variant-numeric:tabular-nums;font-size:17px;line-height:1.4;margin-top:10px;transition:color var(--t-etat)}
.aide .cond{font-size:15px;line-height:1.5;color:var(--encre-2);margin-top:6px;max-width:44em}
.aide .meta{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);margin-top:10px}
.aide .meta a{color:var(--encre)}
.aide.federal{padding-bottom:24px}
.aide.federal .montant{font-size:19px}
.verdict{display:none;transition:opacity var(--t-etat);margin-top:10px;font-family:var(--mono);font-size:12px;line-height:1.45;color:var(--encre)}
.lentille .verdict{display:flex;gap:8px;align-items:baseline}
.verdict::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;transform:translateY(1px)}
.aide.oui .verdict::before{background:var(--rouge)}
.aide.peut .verdict::before{border:1.3px solid var(--rouge)}
.aide.non .verdict::before{border:1.3px dotted var(--encre-2)}
.lentille .aide.non h4,.lentille .aide.non .montant{color:var(--encre-2)}   /* atténué par la couleur (5,4:1), jamais par l'opacité : le texte reste lisible */
@starting-style{.pour-vous{opacity:0}.lentille .verdict{opacity:0}}
.fermes{border-top:1px solid var(--filet)}
.fermes p{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:2px;padding:10px 0;border-bottom:1px solid var(--filet);font-size:15px;line-height:1.4;color:var(--encre-2)}
.fermes b{font-weight:400;color:var(--encre)}
.fermes span{grid-column:1;font-family:var(--mono);font-size:11.5px}
.fermes a{grid-column:2;grid-row:1 / span 2;align-self:center;font-family:var(--mono);font-size:11.5px;display:inline-flex;align-items:center;min-height:44px}

/* ——— 06 soumission : CTA comme environnement (C5) ——— */
.s06{padding:24px var(--marge) 110px}
.scene{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:stretch;border-top:1px solid var(--encre);padding-top:56px}
.action{grid-column:1 / span 6}
.s06 h2{font-size:56px;line-height:1.02;letter-spacing:-.025em;max-width:10.5em}
.etape{margin-top:20px;font-family:var(--mono);font-size:11.5px;color:var(--encre-2)}
.dispo{margin-top:22px}
fieldset{border:0}
.puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.puces label{position:relative}
.puces input{position:absolute;opacity:0;pointer-events:none}
.puces span{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--filet);border-radius:999px;padding:0 16px;font-size:15px;cursor:pointer;background:var(--saisie);transition:background-color var(--t-ui),border-color var(--t-ui),color var(--t-ui),transform var(--t-ui) cubic-bezier(.16,1,.3,1)}
.puces input:checked + span{background:var(--encre);border-color:var(--encre);color:var(--page)}
.puces input:focus-visible + span{outline:2px solid var(--encre);outline-offset:3px}
.cp-l{display:block;margin-top:22px}
.cp-rang{display:flex;align-items:flex-end;gap:16px;margin-top:6px;flex-wrap:wrap}
#cp{font-family:var(--mono);font-size:40px;letter-spacing:.06em;width:6.2ch;border:0;border-bottom:2px solid var(--encre);background:transparent;color:var(--encre);padding:2px 0 4px;text-transform:uppercase;border-radius:0}
input::placeholder{color:#686864;opacity:1}   /* 5,1:1 sur la saisie (le gris du navigateur : 4,3:1) */
#cp:focus{outline:none;border-bottom-color:var(--rouge)}
.cp-aide{margin-top:14px;font-size:15px;line-height:1.5;color:var(--encre-2);max-width:34em}
.erreur{margin-top:10px;font-size:15px;color:var(--encre)}
.erreur::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rouge);margin-right:8px}
.non{margin-top:26px;max-width:38em;font-size:16px;line-height:1.55}
.non:focus{outline:none}
.non-t{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin-bottom:10px}
.non p + p{margin-top:10px}
.rbq{color:var(--encre-2);font-size:15px}
.alerte{margin-top:28px;padding-top:18px;border-top:1px solid var(--filet)}
.alerte h3{font-size:20px;letter-spacing:-.01em}
.al-rang{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
input[type=email]{flex:1;min-width:220px;font:inherit;font-size:15px;color:var(--encre);background:var(--saisie);border:1px solid var(--filet);border-radius:12px;padding:12px 14px;min-height:46px}
.case{display:grid;grid-template-columns:22px 1fr;gap:8px;margin-top:12px;font-size:15px;line-height:1.45;cursor:pointer;min-height:44px;align-items:center}
.case input{width:18px;height:18px;margin-top:2px;accent-color:var(--encre)}
.petit{margin-top:12px;font-size:13px;line-height:1.5;color:var(--encre-2)}
.merci{margin-top:12px;font-family:var(--mono);font-size:12px}
.s06 .cadre{grid-column:7 / span 6;height:520px;align-self:start;position:sticky;top:24px}
.confirmation{scroll-margin-top:16px}
.u-legende{left:38px;bottom:15px;max-width:420px}

/* ——— 07 qui nous paie ——— */
.s07{display:grid;grid-template-columns:var(--mur-x) 1fr;padding:0 0 120px}
.s07 h2{padding:6px 48px 0 var(--marge);font-size:56px;line-height:1.02;letter-spacing:-.025em}
.registre{position:relative;padding:0 var(--marge) 0 48px;border-left:1.3px solid var(--encre)}
.registre p{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--filet);font-size:16px;line-height:1.5}
.registre p:first-child{padding-top:8px}
.registre span{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);padding-top:3px}

/* ——— 09 pied : la chaleur est arrivée ——— */
.bande-pied{height:200px}
.p-dedans{left:var(--marge);top:16px}
.pied-grille{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:22px;padding:34px var(--marge) 48px;font-size:15px;line-height:1.55;color:var(--encre-2)}
.pied-marque{grid-column:1 / span 3;font-size:16px;color:var(--encre)}
.pied-legal{grid-column:4 / span 5}
.pied-fraude{grid-column:9 / span 4}
.pied-liens{grid-column:4 / span 9;display:flex;flex-wrap:wrap;gap:22px;color:var(--encre)}
.pied-liens a{display:inline-flex;align-items:center;min-height:44px}
.pied-verif{grid-column:1 / span 3;grid-row:2;font-family:var(--mono);font-size:11.5px;align-self:center}

.barre-mobile{display:none}

/* ——— mobile ——— */
@media (max-width:760px){
  :root{--marge:16px}
  .entete{height:54px;padding:0 var(--marge)}
  .entete nav a:not(:last-child){display:none}
  .entete nav a{white-space:normal;text-align:right;line-height:1.15}   /* à 320 px le dernier lien se replie plutôt que de pousser la page */
  .entete nav{gap:0}
  .s01 .cadre{margin:0 10px;height:240px;min-height:0;border-radius:18px}
  .e-mur,.e-legende,.e-param{display:none}
  .s01 .affiche{object-position:50% 58%}
  .e-dedans{right:auto;left:30px;top:auto;bottom:12px}
  .e-dehors{left:30px;top:12px}
  .c1{left:12px;top:12px}.c2{right:12px;top:12px}.c3{left:12px;bottom:12px}.c4{right:12px;bottom:12px}
  .sous-cadre{display:block;padding:18px var(--marge) 28px}
  h1{font-size:28px;line-height:1.08}
  .statut-mobile{display:block;margin-top:8px;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--encre-2)}
  .divul{font-size:16px;margin-top:10px}
  .lede{font-size:16px}
  .outil{margin-top:12px}
  .etats{margin-top:20px}
  .estimateur{grid-template-columns:1fr 1fr;grid-template-areas:'a c' 'b b' 'go go';gap:8px;margin-top:10px}
  .estimateur .champ:nth-child(1){grid-area:a}.estimateur .champ:nth-child(2){grid-area:b}.estimateur .champ:nth-child(3){grid-area:c}.estimateur .go{grid-area:go}
  select{font-size:16px}
  .etat{grid-template-columns:80px 1fr;font-size:15px}
  .s02{padding-top:40px}
  .bande{height:300px}
  .b-dehors,.b-dedans{display:none}
  .tete{display:block;padding:28px var(--marge) 18px}
  .tete h2{font-size:27px}
  .tete p{margin-top:10px}
  .pour-vous{display:block;margin:0 var(--marge) 18px}
  .pv-txt{padding:8px 0 0;font-size:17px}
  .table{display:flex;flex-direction:column;padding-bottom:64px}
  .dedans{order:-1;border-left:0;border-top:1.3px solid var(--encre);padding:0 var(--marge) 28px}
  .dedans::before{left:0;right:0;top:0;bottom:auto;width:auto;height:9px;
    background:repeating-linear-gradient(to right,var(--encre) 0 1px,transparent 1px 12px) 0 0/100% 4px no-repeat,repeating-linear-gradient(to right,var(--encre) 0 1px,transparent 1px 60px) 0 0/100% 9px no-repeat}
  .dehors{padding:0 var(--marge);border-top:1.3px solid var(--encre)}
  .aide h4{font-size:20px}
  .s06{padding:8px var(--marge) 80px}
  .scene{display:flex;flex-direction:column;padding-top:36px}
  .s06 h2{font-size:36px}
  #cp{font-size:34px}
  .s06 .cadre{position:relative;top:auto;height:300px;margin-top:36px;align-self:stretch}
  .s07{display:block;padding-bottom:72px}
  .s07 h2{padding:0 var(--marge) 18px;font-size:36px}
  .registre{border-left:0;border-top:1.3px solid var(--encre);padding:0 var(--marge)}
  .registre p{grid-template-columns:1fr;gap:4px}
  .bande-pied{height:160px}
  .pied-grille{display:flex;flex-direction:column;gap:16px;padding:28px var(--marge) 96px}
  .barre-mobile:not([hidden]){display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:30;gap:6px;align-items:center;opacity:1;transition:opacity var(--t-ui),transform var(--t-ui) cubic-bezier(.16,1,.3,1)}
  .barre-mobile .go{flex:1;min-width:0;min-height:52px;justify-content:space-between;padding:0 20px;font-size:16px}
  .barre-mobile .go span{font-family:var(--mono);font-size:11.5px;opacity:.75}
  .barre-mobile .fermer{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--encre);background:var(--page);color:var(--encre);font:inherit;font-size:22px;cursor:pointer}
}


/* ════════ EXTENSION v2 ════════ */
.rouge-point{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rouge);margin-right:8px;transform:translateY(-1px)}
.mono{font-family:var(--mono);font-size:11.5px;color:var(--encre-2)}
.nb{white-space:nowrap}   /* date numérique ou longue : ne se coupe pas en fin de ligne (lib/typographie.ts, posé au build) */
.lien-suite{display:inline-flex;align-items:center;min-height:44px;font-size:15px}

/* ——— 03 comment ça marche : piste épinglée à fondu croisé (Air §8) ——— */
.s03{position:relative}
.s03-tete{padding:0 0 24px;display:grid;grid-template-columns:var(--mur-x) 1fr}
.s03-tete h2{font-size:34px;letter-spacing:-.015em;line-height:1.1;padding-left:var(--marge)}
.s03-tete p{font-size:16px;color:var(--encre-2);line-height:1.55;padding:6px var(--marge) 0 calc(48px + 1.3px)}
.epingle{position:relative;margin:0 24px;border-radius:22px;overflow:hidden;background:var(--champ);height:420px}
.epingle canvas,.epingle picture{position:absolute;inset:0;width:100%;height:100%}
.epingle .affiche{object-position:58% 50%}   /* même cadrage que le canvas (data-ancre=0.58) : le mur reste à 58 % du cadre */
.etapes{list-style:none;counter-reset:etape}
/* repos sans JS ou reduced-motion : les trois étapes en processus (C4), l'une sous l'autre */
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:28px var(--marge) 0}
.temps{border-top:1px solid var(--encre);padding-top:16px}
.temps .mot{display:block;font-size:44px;line-height:1;letter-spacing:-.03em}
.temps .rang{display:block;font-family:var(--mono);font-size:11.5px;color:var(--encre-2);margin-bottom:10px}
.temps p{margin-top:12px;font-size:16px;line-height:1.55;max-width:30em}
html.js-piste .s03{height:calc(100lvh * 4.5)}
html.js-piste .s03-colle{position:sticky;top:0;height:100lvh;display:flex;flex-direction:column;justify-content:center}
html.js-piste .s03-tete{position:absolute;top:28px;left:0;right:0;z-index:3;padding-bottom:0}
html.js-piste .epingle{position:absolute;inset:92px 24px 24px;height:auto;margin:0}
html.js-piste .etapes{display:block;position:absolute;left:48px;top:54%;z-index:3;width:min(600px,44vw);padding:0}
html.js-piste .temps{position:absolute;left:0;right:0;top:0;transform:translateY(-50%);border-top:0;padding:26px 28px 28px;background:var(--champ);opacity:0;will-change:opacity}
html.js-piste .temps .mot{font-size:clamp(56px,6.6vw,96px)}
html.js-piste .temps[data-actif]{z-index:2}
.s03-suivi{position:absolute;right:48px;bottom:44px;z-index:3;display:none;font-family:var(--mono);font-size:11.5px;color:var(--encre-2);background:var(--champ);padding:2px 6px}
html.js-piste .s03-suivi{display:block}

/* ——— 04 le fédéral : ce qu'on sait / le mur fermé / ce qu'on ne sait pas ——— */
.s04{padding:96px var(--marge) 96px}
.s04 > h2{font-size:34px;letter-spacing:-.015em;line-height:1.1;max-width:20em}
.s04 > .reponse{margin-top:12px;font-size:17px;line-height:1.55;max-width:46em;color:var(--encre)}
.trois{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,5fr);gap:32px;margin-top:36px;align-items:start}
.trois h3{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);padding-bottom:10px;border-bottom:1px solid var(--encre)}
.faits{list-style:none}
.faits li{padding:14px 0;border-bottom:1px solid var(--filet);font-size:16px;line-height:1.5}
.faits li .mono{display:block;margin-top:6px}
.faits li .mono a{color:var(--encre)}
.colonne-mur{position:relative;height:100%;min-height:440px;border-radius:22px;overflow:hidden;background:var(--champ)}
.colonne-mur canvas,.colonne-mur picture{position:absolute;inset:0;width:100%;height:100%}
.colonne-mur .etiq{left:12px;bottom:12px;right:12px}
.s04 .suite{display:flex;flex-wrap:wrap;gap:28px;margin-top:28px;align-items:center}

/* ——— 05 alerte d'ouverture seule ——— */
.s05{display:grid;grid-template-columns:var(--mur-x) 1fr;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);margin:0 0 96px}
.s05-dit{padding:34px 48px 34px var(--marge)}
.s05-dit h2{font-size:34px;letter-spacing:-.015em;line-height:1.1;max-width:13em}
.s05-dit p{margin-top:12px;font-size:16px;line-height:1.55;color:var(--encre-2);max-width:32em}
.s05-forme{position:relative;padding:30px var(--marge) 30px 48px;border-left:1.3px solid var(--encre)}
.s05-forme .alerte{margin-top:0;padding-top:0;border-top:0}
.graduation-v::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--encre) 0 1px,transparent 1px 12px) 0 0/4px 100% no-repeat,repeating-linear-gradient(to bottom,var(--encre) 0 1px,transparent 1px 60px) 0 0/9px 100% no-repeat}

.s05:not(.s05-page){border-bottom:0;margin-bottom:0}
.s05:not(.s05-page) + .s06{padding-top:0}

/* ——— 06 états du parcours avec partenaire (démonstration) ——— */
.demo-bandeau{margin-top:18px;padding:10px 12px;border:1px dashed var(--encre-2);font-family:var(--mono);font-size:11.5px;color:var(--encre)}
.etape2,.etape3,.confirmation{margin-top:24px}
.etape2 .rangs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.etape2 label,.etape3 .mono{display:block}
.etape2 input[type=text],.etape2 input[type=tel],.etape2 input[type=email],.etape2 select{width:100%;font:inherit;font-size:15px;color:var(--encre);background:var(--saisie);border:1px solid var(--filet);border-radius:12px;padding:12px 14px;min-height:46px}
.etape2 .champ-l{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);margin-bottom:6px}
.barre-progres{display:flex;gap:6px;margin-top:6px}
.barre-progres i{flex:1;height:3px;background:var(--filet)}
.barre-progres i.fait{background:var(--encre)}
[aria-invalid=true]{border-color:var(--encre) !important;box-shadow:inset 0 0 0 1px var(--encre)}

/* ——— 08 questions ——— */
.s08{padding:0 0 110px}
.s08 > h2{padding:0 var(--marge) 18px;font-size:34px;letter-spacing:-.015em}
.faq{position:relative;border-top:1px solid var(--encre)}
.faq::before{content:"";position:absolute;left:var(--mur-x);top:0;bottom:0;border-left:1.3px solid var(--encre);pointer-events:none}   /* le mur tient la liste au repos : les réponses s'ouvrent contre lui */
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:var(--mur-x) 1fr;align-items:center;min-height:64px;padding:12px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{padding:0 48px 0 var(--marge);font-size:19px;line-height:1.35;letter-spacing:-.005em}
.faq summary i{justify-self:end;margin-right:var(--marge);width:28px;height:28px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:6px;right:6px;top:13px;height:1.3px;background:var(--encre);transition:transform var(--t-ui)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0deg)}
.faq .rep{display:grid;grid-template-columns:var(--mur-x) 1fr;padding:0 0 22px}
.faq .rep > div{grid-column:2;padding:0 var(--marge) 0 48px;border-left:1.3px solid var(--encre);font-size:16px;line-height:1.6;max-width:44em}
.faq .rep p + p{margin-top:10px}
.faq .rep .mono a{color:var(--encre)}

/* ——— famille document (pages intérieures) ——— */
.doc-bande{position:relative;height:220px;overflow:hidden;background:var(--champ)}
.doc-bande canvas,.doc-bande picture{position:absolute;inset:0;width:100%;height:100%}
.doc-bande .etiq{left:var(--marge);top:14px}
.fil{padding:18px var(--marge) 0;font-family:var(--mono);font-size:11.5px;color:var(--encre-2)}
.fil a{color:var(--encre-2)}
.doc-tete{display:grid;grid-template-columns:var(--mur-x) 1fr;padding:22px 0 40px}
.doc-tete > div{padding:0 48px 0 var(--marge)}
.doc-tete h1{font-size:44px;max-width:16em}
.doc-tete .reponse{margin-top:16px;font-size:19px;line-height:1.5;max-width:36em}
.doc-tete .divul{max-width:40em}
.doc-tete .meta{margin-top:14px}
.doc-corps{display:grid;grid-template-columns:var(--mur-x) 1fr;padding-bottom:110px;border-top:1px solid var(--encre)}
.doc-texte{padding:8px 48px 0 var(--marge);max-width:calc(680px + var(--marge) + 48px)}
.doc-texte h2{font-size:26px;letter-spacing:-.012em;line-height:1.2;margin-top:44px;scroll-margin-top:24px}
.doc-texte h2:first-child{margin-top:30px}
.doc-texte h3{font-size:19px;margin-top:24px}
.doc-texte p,.doc-texte li{font-size:17px;line-height:1.62}
.doc-texte p{margin-top:12px}
.doc-texte ul,.doc-texte ol{margin-top:12px;padding-left:1.2em}
.doc-texte li + li{margin-top:6px}
.doc-texte b,.faits b{color:var(--encre)}
.doc-texte p:has(> b:first-child),.doc-texte li:has(> b:first-child),.faits li:has(> b:first-child){color:var(--encre-2)}
.doc-texte .note{font-size:15px;color:var(--encre-2);line-height:1.55}
.doc-texte table{font-variant-numeric:tabular-nums;width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.doc-texte th{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);font-weight:400;text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--encre)}
.doc-texte td{padding:10px 10px 10px 0;border-bottom:1px solid var(--filet);vertical-align:top;line-height:1.45}
.doc-texte .exemple{margin-top:14px;padding:14px 16px;background:var(--champ);font-size:16px;line-height:1.55}
.a-confirmer{display:inline-block;margin-top:8px;padding:2px 8px;border:1px dashed var(--encre);font-family:var(--mono);font-size:11.5px}
.sources{margin-top:44px;padding-top:14px;border-top:1px solid var(--encre)}
.sources ol{font-size:15px;line-height:1.55;color:var(--encre-2)}
.sources a{color:var(--encre);word-break:break-word}
.doc-fiche{position:relative;border-left:1.3px solid var(--encre);padding:0 var(--marge) 0 48px}
.doc-fiche-colle{position:sticky;top:24px;padding-top:28px}
.fiche dl{display:grid;grid-template-columns:120px 1fr;gap:0;border-top:1px solid var(--filet)}
.fiche dt{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);padding:10px 12px 10px 0;border-bottom:1px solid var(--filet)}
.fiche dd{font-variant-numeric:tabular-nums;font-size:15px;line-height:1.45;padding:9px 0;border-bottom:1px solid var(--filet)}
.fiche dd a{color:var(--encre)}
.fiche .statut-gros{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:14px}
.fiche .statut-gros::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--encre)}
.fiche .statut-gros.annonce::before{background:transparent;border:1.5px solid var(--encre)}
.mini-lentille{margin-top:26px}
.mini-lentille h2{font-size:19px}
.mini-lentille form{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.mini-lentille .verdict-p{display:flex;gap:8px;align-items:baseline;margin-top:12px;font-family:var(--mono);font-size:12px;line-height:1.5}
.mini-lentille .verdict-p::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;transform:translateY(1px)}
.mini-lentille .verdict-p.oui::before{background:var(--rouge)}
.mini-lentille .verdict-p.peut::before{border:1.3px solid var(--rouge)}
.mini-lentille .verdict-p.non::before{border:1.3px dotted var(--encre-2)}

/* fédéral : trois colonnes de faits */
.doc-trois{display:grid;grid-template-columns:var(--mur-x) 1fr;padding:30px 0 0}
.doc-trois > section:first-child{grid-row:1 / span 2;padding:0 48px 0 var(--marge)}
.doc-trois > section:nth-child(n+2){grid-column:2;border-left:1.3px solid var(--encre);padding:0 var(--marge) 0 48px}
.doc-trois > section:nth-child(3){padding-top:36px}
.doc-trois h2{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);padding-bottom:10px;border-bottom:1px solid var(--encre);font-weight:400}

/* prix : la règle graduée (les graduations du mur, couchées) */
.regle{margin-top:20px;--max:16000}
.regle-axe{position:relative;height:30px;margin:0 0 6px 0;border-bottom:1.3px solid var(--encre)}
.regle-axe span{position:absolute;bottom:6px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--encre-2);white-space:nowrap}
.regle-axe::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:9px;
  background:repeating-linear-gradient(to right,var(--encre) 0 1px,transparent 1px calc(100% / 32)) 0 100%/100% 4px no-repeat,repeating-linear-gradient(to right,var(--encre) 0 1px,transparent 1px calc(100% / 8)) 0 100%/100% 9px no-repeat}
.plage{position:relative;padding:12px 0 10px;border-bottom:1px solid var(--filet)}
.plage-l{font-variant-numeric:tabular-nums;font-size:15px;line-height:1.35}
.plage-l b{font-weight:400}
.plage-l .mono{margin-left:6px}
.plage-barre{position:relative;height:10px;margin-top:8px}
.plage-barre i{position:absolute;top:3px;height:4px;background:var(--encre);left:calc(var(--de) / var(--max) * 100%);width:calc((var(--a) - var(--de)) / var(--max) * 100%)}
.plage-barre i.plus::after{content:"";position:absolute;right:-14px;top:-3px;border:5px solid transparent;border-left:8px solid var(--encre)}
.plage-barre i.faible{background:repeating-linear-gradient(to right,var(--encre) 0 6px,transparent 6px 10px)}

/* micro-pages */
.micro{padding:56px var(--marge) 110px;max-width:860px}
.micro h1{font-size:44px;max-width:15em}
.micro p{margin-top:14px;font-size:17px;line-height:1.6;max-width:38em}
.micro .rappel{margin-top:20px;padding:16px 18px;background:var(--champ);font-size:15px;line-height:1.55}

@starting-style{.barre-mobile:not([hidden]){opacity:0;transform:translateY(8px)}}
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--encre-2)}
  select:hover{border-color:var(--encre-2)}
  .go:hover{opacity:.86;color:var(--page)}
  .faq summary:hover span{color:var(--encre-2)}
}
.go[aria-disabled=true]{opacity:.6;cursor:progress}

@media (max-width:1415px) and (min-width:761px){
  /* les trois menus gardent la largeur de leur plus long libellé (aucune troncature) ; le bouton passe dessous ; le cadre cède 54 px à cette ligne */
  .estimateur{grid-template-columns:repeat(3,minmax(max-content,1fr))}
  .estimateur .go{grid-column:1 / -1}
  .s01 .cadre{height:calc(100svh - 60px - 446px)}
}
@media (max-width:1160px) and (min-width:761px){
  .e-param{display:none}   /* trop longue : elle passerait sur le pied du mur */
}
@media (max-width:1000px) and (min-width:761px){
  /* cinq liens ne tiennent plus avec le mot-symbole : « Aides ouvertes » (section de l'accueil) et « Qui nous paie » (lien du pied) s'effacent */
  .entete nav a:nth-child(1),.entete nav a:nth-child(4){display:none}
  .entete nav{gap:20px}
}
@media (max-width:1100px) and (min-width:761px){
  .titre,.outil{grid-column:1 / -1}
  .outil{margin-top:20px}
  .e-mur,.e-legende{display:none}   /* les étiquettes du mur et la légende longue se collent aux autres à cette largeur (comme sur mobile) */
  .trois{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .colonne-mur{grid-column:1 / span 2;order:2;min-height:220px}
  .trois > div:last-child{order:3}
  .s07{display:block;padding-bottom:72px}
  .s07 h2{padding:0 var(--marge) 18px;font-size:44px}
  .registre{border-left:0;border-top:1.3px solid var(--encre);padding:0 var(--marge)}
  .registre p{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .doc-fiche{padding-left:32px}
  .fiche dl{grid-template-columns:96px minmax(0,1fr)}
  .fiche dd,.fiche dt,.doc-texte td{overflow-wrap:break-word;hyphens:auto}
}
@media (max-width:760px){
  html{scroll-padding-bottom:72px}
  input[type=email],.etape2 input[type=text],.etape2 input[type=tel],.etape2 input[type=email],.etape2 select{font-size:16px}   /* 16 px : pas de zoom au focus sur iOS */
  .s03-tete{display:block;padding:0 var(--marge) 16px}
  .s03-tete h2{padding-left:0;font-size:27px}
  .s03-tete p{padding:8px 0 0}
  .epingle .affiche{object-position:50% 58%}
  .epingle{margin:0 10px;height:280px;border-radius:18px}
  .etapes{grid-template-columns:1fr;gap:18px}
  html.js-piste .epingle{inset:120px 10px 12px}
  html.js-piste .s03-tete{top:16px}
  html.js-piste .etapes{left:22px;right:22px;width:auto;top:132px;bottom:auto;transform:none}
  html.js-piste .temps{top:0;bottom:auto;transform:none;padding:16px 16px 18px}
  html.js-piste .temps .mot{font-size:46px}
  html.js-piste .temps p{font-size:15px;margin-top:8px}
  html.js-piste .temps .rang{margin-bottom:6px}
  .s03-suivi{right:22px;bottom:86px}
  .s04{padding:64px var(--marge)}
  .s04 > h2{font-size:27px}
  .trois{display:flex;flex-direction:column;gap:22px}
  .colonne-mur{min-height:220px;width:100%}
  .s05{display:block;margin-bottom:64px}
  .s05-dit{padding:26px var(--marge) 8px}
  .s05-dit h2{font-size:27px}
  .s05-forme{border-left:0;padding:16px var(--marge) 26px}
  .s05-forme.graduation-v::before{display:none}
  .etape2 .rangs{grid-template-columns:1fr}
  .s08 > h2{font-size:27px}
  .faq::before{display:none}
  .faq summary{grid-template-columns:1fr 44px}
  .faq summary span{padding:0 0 0 var(--marge);font-size:17px}
  .faq .rep{display:block;padding:0 var(--marge) 20px}
  .faq .rep > div{padding:0 0 0 14px}
  .doc-bande{height:160px}
  .doc-tete{display:block;padding:18px 0 28px}
  .doc-tete > div{padding:0 var(--marge)}
  .doc-tete h1{font-size:30px}
  .doc-tete .reponse{font-size:17px}
  .doc-corps{display:flex;flex-direction:column}
  .doc-fiche{order:-1;border-left:0;border-bottom:1.3px solid var(--encre);padding:0 var(--marge) 24px}
  .doc-fiche.graduation-v::before{display:none}
  .doc-fiche-colle{position:static;padding-top:18px}
  .doc-texte{padding:0 var(--marge)}
  .doc-texte h2{font-size:22px}
  .doc-texte p,.doc-texte li{font-size:16px}
  .doc-texte table{font-size:15px}
  .doc-trois{display:flex;flex-direction:column;gap:28px;padding:20px var(--marge) 0}
  .doc-trois > section:nth-child(n){border-left:0;padding:0}
  .doc-texte th,.doc-texte td{overflow-wrap:break-word;hyphens:auto}
  .pied-verif{align-self:flex-start}
  .pied-liens{gap:0 22px}
  .fiche dl{grid-template-columns:104px 1fr}
  .micro{padding:36px var(--marge) 96px}
  .micro h1{font-size:30px}
}
@media (max-width:480px){
  /* tableau « geste · renseignements · conservation » : une fiche par geste (rôles ARIA posés dans le HTML) */
  .doc-texte table,.doc-texte tbody,.doc-texte tr,.doc-texte td{display:block}
  .doc-texte thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .doc-texte tr{padding:12px 0;border-bottom:1px solid var(--filet)}
  .doc-texte td{border:0;padding:3px 0}
  .doc-texte td:first-child{font-family:var(--mono);font-size:11.5px;color:var(--encre-2)}
  .doc-texte td:nth-child(2)::before,.doc-texte td:nth-child(3)::before{display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;color:var(--encre-2)}
  .doc-texte td:nth-child(2)::before{content:"renseignements" / ""}
  .doc-texte td:nth-child(3)::before{content:"conservation" / ""}
}
@media (max-width:360px){
  .marque{font-size:15px}   /* 12 px d'écart avec le lien sans pousser la page à 320 px */
  .barre-mobile .go span{display:none}
  .estimateur{grid-template-columns:1fr;grid-template-areas:'a' 'c' 'b' 'go'}
  h1{font-size:26px}
  .s06 h2,.s07 h2{font-size:31px}
  #cp{font-size:30px}
  .cp-rang .go{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}
  .bande{clip-path:none}
}
.lien-suite-p{grid-column:2;padding:6px var(--marge) 0 48px}
@media (max-width:1100px){ .lien-suite-p{padding:6px var(--marge) 0} }
.doc-corps-federal{display:block}
.doc-corps-federal .s05-page{margin:48px 0 0}
.doc-sources{padding:0 var(--marge)}
.s05-dit .go{margin-top:18px}
.fiche dd a{display:inline-flex;align-items:center;min-height:44px}
.doc-texte h3 + .plage,.regle h3{margin-top:0}
.regle h3{font-family:var(--mono);font-size:11.5px;color:var(--encre-2);padding-top:22px}
.micro .lien-suite{margin-top:10px}
@media (max-width:760px){ .doc-sources{padding:0 var(--marge)} }