:root{
  color-scheme: light;
  --red:#e30d18; --red-hover:#c10b16; --red-soft:#fef2f2;
  --blue:#283374; --blue-hover:#3a4a94;
  --g50:#f9fafb; --g100:#f3f4f6; --g200:#e5e7eb; --g300:#d1d5db; --g400:#6b7280; /* 08/08/2026 : 9ca3af (2,54:1) relevé à 4,83:1, audit WCAG */
  --g500:#6b7280; --g600:#4b5563; --g700:#374151; --g800:#1f2937; --g900:#111827;
  --ok:#15803d; /* 08/08/2026 : 16a34a (3,3:1 en petit corps) relevé à 5,0:1 */ --warn:#d97706; --bad:#dc2626;
  --dpe-A:#2e9b43; --dpe-B:#57a94a; --dpe-C:#a8c14b; --dpe-D:#f2c94c;
  --dpe-E:#f2994a; --dpe-F:#e8703a; --dpe-G:#d63b2f;
  --r:12px; --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 14px rgba(17,24,39,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;background:var(--g50);color:var(--g800);font-size:14px;line-height:1.5}
.wrap{max-width:1060px;margin:0 auto;padding:16px 16px 60px}
header.top{display:flex;align-items:center;gap:12px;padding:10px 0 4px}
.logo{font-weight:800;font-size:20px;letter-spacing:.5px;color:var(--g900)}
.logo b{color:var(--red)}
.tagline{color:var(--g500);font-size:12px}
/* stepper */
.stepper{display:flex;gap:4px;margin:14px 0 18px;flex-wrap:wrap}
/* `flex:1` (donc base 0) et non `flex:1 1 auto` : chaque case était ramenée à
   son plancher de 110px quelle que soit la longueur de son libellé. « Réglementaire »
   réclame 143px et « Recommandations travaux » 170px : les deux débordaient de leur
   pastille et passaient SOUS la case voisine, tronqués en plein mot (« Recommandatio »).
   Recette du 07/08/2026. Avec une base au contenu, la somme des sept cases fait 918px
   pour 1028px utiles : une seule rangée, sans rien couper. */
.step{flex:1 1 auto;min-width:110px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--g200);color:var(--g400);font-size:12px;font-weight:600;cursor:default;user-select:none}
/* Filet de sécurité : quelle que soit la largeur restante, le libellé se replie
   dans la pastille au lieu d'en sortir. Sans `min-width:0`, un enfant de flex
   refuse de descendre sous la largeur de son plus long mot. */
.step .lb{min-width:0;overflow-wrap:anywhere;line-height:1.25}
.step .n{width:22px;height:22px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.step.done{color:var(--g600);cursor:pointer}
.step.done .n{background:#e7f6ec;color:var(--ok)}
.step.cur{border-color:var(--red);color:var(--g900);box-shadow:var(--shadow)}
.step.cur .n{background:var(--red);color:#fff}
.screen{display:none}.screen.on{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
h1{font-size:22px;color:var(--g900);margin-bottom:4px}
h2{font-size:17px;color:var(--g900);margin-bottom:10px}
h3{font-size:14px;color:var(--g900)}
.sub{color:var(--g500);margin-bottom:14px}
.muted{color:var(--g500);font-size:12px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;border:none;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--red-hover)}
.btn.sec{background:#fff;color:var(--g700);border:1px solid var(--g300)}
.btn.sec:hover{background:var(--g50)}
.btn.blue{background:var(--blue)}.btn.blue:hover{background:var(--blue-hover)}
.btn:disabled{opacity:.45;cursor:not-allowed}
input[type=text],input[type=email],input[type=tel],select{width:100%;padding:10px 12px;border:1px solid var(--g300);border-radius:10px;font-size:14px;font-family:inherit;background:#fff;color:var(--g800)}
input:focus,select:focus{outline:2px solid #f8b4b8;border-color:var(--red)}
label.f{display:block;font-size:12px;font-weight:600;color:var(--g600);margin:10px 0 4px}
/* tabs entrée */
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tab{padding:9px 16px;border-radius:999px;border:1px solid var(--g300);background:#fff;font-size:13px;font-weight:600;color:var(--g600);cursor:pointer;font-family:inherit}
.tab.on{background:var(--red-soft);border-color:var(--red);color:#c40a14} /* 08/08/2026 : texte assombri, 4,43:1 -> 5,4:1 */
.sugg{border:1px solid var(--g200);border-radius:10px;margin-top:6px;overflow:hidden;background:#fff}
.sugg div{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--g100)}
.sugg div:hover{background:var(--red-soft)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700}
.pill.gray{background:var(--g100);color:var(--g600)}
.pill.red{background:var(--red-soft);color:var(--red)}
.pill.green{background:#e7f6ec;color:var(--ok)}
.pill.orange{background:#fef3e2;color:var(--warn)}
/* étiquettes */
.lbl{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:9px;color:#fff;font-weight:800;font-size:22px}
.lbl.sm{width:30px;height:30px;font-size:15px;border-radius:7px}
/* barre DPE */
/* La marge haute réserve la place des étiquettes flottantes (.tag, posées à
   top:-20px au-dessus de la frise). À 12px, elles mordaient de 8px sur la ligne
   « +N classes » juste au-dessus : les deux textes se superposaient. Recette du
   07/08/2026. 26px = 20px d'étiquette + 6px de respiration. */
.dpebar{display:flex;gap:3px;margin:26px 0 6px}
.dpebar .seg{flex:1;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;position:relative;opacity:.32}
.dpebar .seg.act{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--g800)}
.dpebar .seg.proj{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--red)}
.dpebar .tag{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:700;color:var(--g700);white-space:nowrap}
.dpebar .tag.p{color:var(--red)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr}.projgrid{grid-template-columns:1fr!important}.sticky-res{position:static!important}}
/* ==========================================================================
   RESPONSIVE — l'écran de référence est un téléphone
   Le parcours se consulte majoritairement sur mobile (un particulier ouvre son
   DPE depuis un lien reçu). Quatre défauts corrigés ici, tous constatés en
   réduisant la fenêtre à 390 px :
   • les barres de boutons (axes, logiques, vues) débordaient sans pouvoir
     défiler : elles passent en défilement horizontal avec inertie ;
   • les tableaux de comparaison (chaîne des versions, diff) débordaient de la
     carte : ils défilent maintenant dans leur propre conteneur ;
   • les cibles tactiles descendaient à 28 px de haut : plancher à 44 px, la
     recommandation d'accessibilité ;
   • le fil des étapes était coupé à droite sans indice de défilement.
   ========================================================================== */
@media(max-width:720px){
  body{font-size:15px}
  .card{padding:14px 12px;border-radius:14px}
  h2{font-size:18px;line-height:1.25}
  .cep-tog{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px}
  .cep-tog::-webkit-scrollbar{display:none}
  .cep-tog button{flex:0 0 auto;min-height:44px;padding:10px 12px;font-size:12.5px}
  .btn,button{min-height:44px}
  /* Le `overflow-x:auto` posé ici était sans effet : `flex-wrap:wrap` faisait
     retomber les cases à la ligne au lieu de les faire défiler, et sur 343px
     utiles les libellés longs se retrouvaient tronqués. On rétablit l'intention
     d'origine — une frise qui se balaie du doigt, chaque étape lisible en
     entier sur une seule ligne. */
  .stepper{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
  .stepper::-webkit-scrollbar{display:none}
  .step{flex:0 0 auto}
  .step .lb{overflow-wrap:normal;white-space:nowrap}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kv{font-size:12.5px;gap:10px}
  /* Le seul débordement horizontal du site venait d'ici : `white-space:nowrap`
     sur un total du type « 10 955 – 13 152 € » réclamait 103 px de plus que la
     colonne à 375 px, et le `display:flex` du parent refusait de rétrécir un
     enfant sous son contenu (min-width:auto par défaut). On autorise le retour
     à la ligne et on lève le plancher implicite. */
  .kv>*{min-width:0}
  .kv b{text-align:right;white-space:normal;overflow-wrap:anywhere}
  .ring{width:96px;height:96px}.ring .in{width:72px;height:72px}.ring .in b{font-size:22px}
  svg{max-width:100%;height:auto}
  .demogrid{grid-template-columns:1fr!important}
  details.check summary{padding:10px 8px;font-size:13px}
}
/* Très petits écrans : on protège la lisibilité des chiffres clés */
@media(max-width:400px){
  .stat b{font-size:16px}
  .res-big{font-size:22px}
  h2{font-size:17px}
}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--g200);font-size:13px}
.kv b{color:var(--g900)}
/* Sous 480 px, même en autorisant le retour à la ligne, un libellé long face à
   une fourchette de prix ne tient pas sur une ligne partagée : on empile.
   Placé APRÈS les règles de base, sinon la déclaration `.kv` ci-dessus, de même
   spécificité mais plus tardive, l'emporterait sur la requête média. */
@media(max-width:480px){
  .kv{flex-direction:column;align-items:flex-start;gap:2px}
  .kv b{text-align:left}
}
/* score ring */
.ring{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ring .in{width:92px;height:92px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .in b{font-size:28px;color:var(--g900)}
.check{border:1px solid var(--g200);border-radius:10px;margin-bottom:8px;overflow:hidden;background:#fff}
.check summary{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px;list-style:none}
.check summary::-webkit-details-marker{display:none}
.check .body{padding:0 14px 12px 40px;font-size:13px;color:var(--g600)}
.ico{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff;flex-shrink:0}
.ico.ok{background:var(--ok)}.ico.warn{background:var(--warn)}.ico.bad{background:var(--bad)}.ico.info{background:var(--blue)}
.ico.na{background:var(--g300,#cbd5e1);color:var(--g600)}
/* ---- écran fiabilité : registre des points de contrôle ---- */
.chkbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.chksec{margin-bottom:18px}
.chkhead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--g200);font-size:13.5px}
.chkhead .muted{font-size:12px}
.check .cn{font-weight:700;color:var(--g400);font-size:11px;min-width:20px;font-variant-numeric:tabular-nums}
.check.na{background:var(--g50);border-style:dashed}
.check.na summary{font-weight:500;color:var(--g500)}
.check .srcb{margin-left:auto;flex-shrink:0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--g500);background:var(--g100,#f1f5f9);border-radius:6px;padding:2px 6px}
.imp{margin-top:10px;padding:9px 11px;border-radius:9px;font-size:12.5px;line-height:1.5;border-left:3px solid}
.imp.worse{background:#fef2f2;border-color:var(--bad)}
.imp.better{background:#f0fdf4;border-color:var(--ok)}
.imp.same{background:#fffbeb;border-color:var(--warn)}
.imp.none{background:var(--g50);border-color:var(--g300,#cbd5e1);color:var(--g600)}
/* ---- guide de lecture de la trajectoire ---- */
.stairguide{margin-top:10px;font-size:12.5px;line-height:1.55;color:var(--g600)}
.stairguide .sg1{margin-bottom:7px}
.stairguide .sg2{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0}
.crow .uu{font-size:10.5px;color:var(--g400)}
/* ---- cartes des DPE d'exemple (écran 1) ---- */
.demogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:10px;margin-top:10px}
.democard{border:1px solid var(--g200);border-radius:11px;padding:11px 12px;background:#fff;display:flex;flex-direction:column;gap:7px}
.democard:hover{border-color:var(--blue)}
.dc-top{display:flex;gap:10px;align-items:flex-start}
.dc-t{flex:1;min-width:0;font-size:13px;line-height:1.35}
.dc-t .muted{font-size:11.5px;margin-top:2px}
.dc-meta{font-size:11.5px;color:var(--g500);font-style:italic}
.dc-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.dc-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11px}
.dc-links .num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--g400);letter-spacing:-.2px}
.dc-links a{color:var(--blue);text-decoration:none;border-bottom:1px dotted var(--blue)}
.dc-links a:hover{border-bottom-style:solid}
.btn.sm{padding:6px 12px;font-size:12px}
.dpeb{flex-shrink:0;width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff}
.dpe-A{background:#0f9d58}.dpe-B{background:#3fae4a}.dpe-C{background:#a4c73a;color:#3a4a08}
.dpe-D{background:#f4d03f;color:#5c4708}.dpe-E{background:#f0a13a}.dpe-F{background:#e8663c}.dpe-G{background:#d7332c}
.crow .aidok{font-size:11px;font-weight:700;color:var(--ok)}
.crow .aidko{font-size:11px;font-weight:700;color:var(--warn)}
.stairguide .jal{background:var(--g50);border:1px solid var(--g200);border-radius:8px;padding:5px 10px;font-size:12px;color:var(--g700)}
.steplist{list-style:none;margin:8px 0 12px;padding:0}
.stp{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:9px;background:var(--g50);
  margin-bottom:6px;border-left:3px solid transparent}
.stp.saut{background:#fff;border:1px solid var(--g200);border-left-width:3px}
.stp .num{flex-shrink:0;width:20px;height:20px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.stp .lbl{flex:1;min-width:0;font-size:12.5px;color:var(--g700)}
.stp .lbl .det{font-size:11.5px;color:var(--g500);margin-top:2px}
.stp .cum{flex-shrink:0;text-align:right;font-size:11.5px;font-weight:700;color:var(--g600);line-height:1.3}
.stp .cum .muted{font-weight:400;font-size:10px}
/* timeline reglementaire */
/* La frise porte 735 px de contenu pour ~317 px visibles sur mobile. Sans indice
   de bord, rien ne dit qu'elle défile : la barre est masquée sur iOS et le
   repère « votre bien » naissait hors champ. Le conteneur `.tlwrap` pose un
   dégradé sur le bord encore masqué ; les classes `.d`/`.g` sont posées par
   `majOmbreFrise()` selon la position réelle du défilement. */
.tlwrap{position:relative}
.tlwrap::before,.tlwrap::after{content:"";position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:2}
.tlwrap::before{left:0;background:linear-gradient(to right,#fff,rgba(255,255,255,0))}
.tlwrap::after{right:0;background:linear-gradient(to left,#fff,rgba(255,255,255,0))}
.tlwrap.g::before{opacity:1}
.tlwrap.d::after{opacity:1}
.tl{display:flex;gap:0;margin:14px 0;overflow-x:auto;padding-top:6px}
.tl .ev{flex:1;min-width:105px;position:relative;padding:12px 6px 0;text-align:center;font-size:11px;border-top:3px solid var(--g300)}
.tl .ev.past{border-top-color:var(--red)}
.tl .ev.you::before{content:"VOTRE BIEN";position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:var(--g900);color:#fff;padding:2px 8px;border-radius:6px;font-size:9px;font-weight:700;white-space:nowrap}
.tl .ev b{display:block;font-size:12px;color:var(--g900)}
/* projection */
.projgrid{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.sticky-res{position:sticky;top:10px}
/* UX P1 — le jargon du DPE (RFR, CEP, ITE/ITI, R, MAR, écrêtement) est le
   premier décrocheur pour un particulier. Chaque terme porte désormais son
   explication au survol, avec un soulignement pointillé qui invite à survoler. */
.jarg{border-bottom:1px dotted var(--g400);cursor:help}
.wcard{border:1px solid var(--g200);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff}
.wcard.on{border-color:var(--red);background:var(--red-soft)}
.whead{display:flex;align-items:center;gap:10px}
.whead .t{font-weight:700;font-size:13px;flex:1}
.wbody{margin-top:10px;display:none}
.wcard.on .wbody{display:block}
.switch{position:relative;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.sl{position:absolute;inset:0;background:var(--g300);border-radius:999px;cursor:pointer;transition:.15s}
.sl::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked+.sl{background:var(--red)}
.switch input:checked+.sl::before{transform:translateX(18px)}
input[type=range]{width:100%;accent-color:var(--red)}
.rrow{display:flex;align-items:center;gap:10px;font-size:12px;margin:6px 0}
.rrow .v{min-width:64px;text-align:right;font-weight:700;color:var(--g900)}
/* lignes composant (édition par élément) */
.crow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--g200);border-radius:9px;margin-bottom:6px;background:#fff}
.crow.on{border-color:var(--red);background:var(--red-soft)}
.crow input[type=checkbox]{width:16px;height:16px;accent-color:var(--red);flex-shrink:0}
.crow .ci{flex:1;min-width:0}
.crow .ci{text-align:left}
.crow .ci b{font-size:12.5px;display:block;color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
.crow .ci span{display:block;line-height:1.35}
.crow .ci span{font-size:11px;color:var(--g500)}
.crow select{width:auto;max-width:220px;font-size:11.5px;padding:6px 8px}
.pgain{font-size:13px;font-weight:800;color:var(--ok);white-space:nowrap}
.pgain span{font-weight:500;color:var(--g400);font-size:10.5px}
@media(max-width:720px){.crow{flex-wrap:wrap}.crow select{max-width:100%;width:100%}}
.res-big{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 2px}
.arrow{font-size:22px;color:var(--g400)}
.delta{font-size:12px;font-weight:700}
.delta.good{color:var(--ok)}
.stat{background:var(--g50);border:1px solid var(--g200);border-radius:10px;padding:8px 10px;text-align:center}
.stat b{display:block;font-size:16px;color:var(--g900)}
.stat span{font-size:10.5px;color:var(--g500)}
.cep-tog{display:flex;gap:4px;margin-top:10px}
.cep-tog button{flex:1;padding:6px;border-radius:8px;border:1px solid var(--g300);background:#fff;font-size:11px;font-weight:600;cursor:pointer;color:var(--g600);font-family:inherit}
.cep-tog button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--g300);background:#fff;font-size:12px;font-weight:600;cursor:pointer;color:var(--g700);font-family:inherit}
.chip:hover{border-color:var(--red);color:var(--red)}
/* gate modal */
.modal{position:fixed;inset:0;background:rgba(17,24,39,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.on{display:flex}
.mbox{background:#fff;border-radius:16px;max-width:460px;width:100%;padding:24px;max-height:92vh;overflow:auto}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--g600);margin-top:10px}
.consent input{margin-top:3px;accent-color:var(--red);width:15px;height:15px;flex-shrink:0}
.err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:10px 14px;border-radius:10px;font-size:13px;margin:10px 0;display:none}
.load{display:none;align-items:center;gap:10px;color:var(--g500);font-size:13px;margin:12px 0}
.spin{width:18px;height:18px;border:3px solid var(--g200);border-top-color:var(--red);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
footer{margin-top:26px;padding-top:14px;border-top:1px solid var(--g200);font-size:10.5px;color:var(--g400);line-height:1.6}
.banner{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:10px 14px;border-radius:10px;font-size:12.5px;margin-bottom:12px;display:none}
@media print{.stepper,.btn,.tabs,.noprint,.banner{display:none!important}body{background:#fff}}