/* Parcours en V2 « plan d'ingénieur » (lots 3 et 4) : formulaire de simulation, calculateurs rapide
   et expert, résultats de consommation, page Résultats (.rv2, lot 4). Chargée seulement si `design_plan`.

   Le HTML et le JavaScript de ces pages ne bougent pas (form_v2.js, calculateurs : leurs
   accroches restent intactes). On RHABILLE : leurs jetons sont remappés sur ceux de la V2,
   leurs angles redressés, leurs polices remplacées. Racines : .fv2 (formulaire), .cv2
   (calculateur rapide), .exp2 (expert), .r-wrap / .d-wrap / .cs2 (résultats). */

/* ── 1. Jetons des pages du parcours, remappés ──
   Sur body.plan pour les pages qui les posent sur :root ; sur la racine elle-même pour celles
   qui les y posent (.fv2, .cv2, .calc-v2 du calculateur expert), avec un poids (0,3,1) supérieur à `:root[data-theme] .fv2`. */
body.plan,
:root body.plan :is(.fv2,.cv2,.calc-v2,.rv2,.app){
  --navy:var(--p-fort);--navy-700:var(--p-fort);--ink:var(--p-fort);
  --text:var(--p-texte2);--text-muted:var(--p-texte2);--muted:var(--p-texte2);--faint:var(--p-texte2);
  --border:var(--p-trait-doux);--border-strong:var(--p-trait);--line:var(--p-trait-doux);--line-strong:var(--p-trait);--hair:var(--p-trait-doux);
  --bg:var(--p-surface-fort);--surface:var(--p-surface-fort);--card:var(--p-surface-fort);
  --bg-soft:var(--p-survol);--bg-warm:var(--p-survol);
  --orange-50:var(--p-orange-voile);--yellow-50:var(--p-or-voile);--navy-50:var(--p-survol);
  --orange-600:var(--p-orange-vif);--orange-700:var(--p-or-petit);
  --good:var(--p-vert);--good-50:transparent;--teal:var(--p-cyan);--teal-50:transparent;
  --warn:var(--p-ambre);--warn-50:transparent;--bad:var(--p-rouge);
  --grid-c:transparent;
  --shadow-s:none;--shadow-m:none;--shadow-l:4px 4px 0 var(--p-ombre);
  --shadow-sm:none;--shadow-md:none;--shadow-lg:4px 4px 0 var(--p-ombre);
  --ring:0 0 0 2px var(--p-or);
  --font:var(--p-titre);--mono:var(--p-mono);
  /* Jetons propres à la console interactive (lot 5) */
  --strong:var(--p-fort);--subtle:var(--p-texte2);--surface-2:var(--p-survol);
  --up:var(--p-vert);--down:var(--p-rouge);--net:var(--p-vert);--blue:var(--p-trait);--bat:var(--p-cyan);
}

/* ── 2. Fond : la feuille quadrillée passe sous les pages ── */
body.plan :is(.fv2,.cv2,.exp2,.r-wrap,.d-wrap,.cs2,.rv2,.app){background:transparent;font-family:var(--p-titre);color:var(--p-texte2)}
/* .fbg enveloppe toute la scène du formulaire : on n'en retire que le fond et la grille propres */
body.plan .fv2 .fbg{background:transparent;border-bottom:0}
body.plan .fv2 .fbg::before{display:none}

/* ── 3. Angles droits : une règle de poids (0,2,1) redresse les arrondis déclarés en deux
   classes (cartes, champs, boutons) mais perd devant ceux de trois classes et plus
   (pastilles, interrupteurs, curseurs), qui restent ronds. ── */
body.plan :is(.fv2,.cv2,.exp2,.r-wrap,.d-wrap,.cs2,.rv2,.app) *{border-radius:0}
body.plan .fv2 .pan-dot{border-radius:50%}

/* ── 4. Typographie : titres Archivo étirés en capitales, chiffres en Martian Mono ── */
body.plan :is(.fv2,.cv2,.exp2,.r-wrap,.d-wrap,.cs2,.rv2,.app) :is(h1,h2){font-family:var(--p-titre);font-stretch:118%;font-weight:850;text-transform:uppercase;letter-spacing:-.01em;color:var(--p-fort)}
body.plan :is(.fv2,.cv2,.exp2,.r-wrap,.d-wrap,.cs2,.rv2,.app) h3{font-family:var(--p-titre);font-stretch:110%;color:var(--p-fort)}
body.plan :is(.fv2,.cv2,.exp2,.r-wrap,.d-wrap,.cs2,.rv2,.app) :is(code,kbd,samp,.mono){font-family:var(--p-mono)}

/* ── 5. Champs de saisie : trait pointillé, valeur en mono ── */
body.plan :is(.fv2,.cv2,.exp2) :is(input[type=text],input[type=number],input[type=email],input:not([type]),select,textarea){
  font-family:var(--p-mono);color:var(--p-fort);background-color:transparent;box-shadow:none}
body.plan :is(.fv2,.cv2,.exp2) :is(input,select,textarea):focus-visible{outline:2px solid var(--p-or);outline-offset:1px}
body.plan :is(.fv2,.cv2,.exp2) select option{background:var(--p-fond2);color:var(--p-trait)}

/* ── 6. Boutons d'action orange : texte marine (contraste), ombre portée du plan ── */
body.plan :is(.fv2,.cv2,.exp2,.r-wrap,.d-wrap,.cs2,.rv2,.app) :is(.btn-primary,.btn.primary,.btn--primary,.btn-orange,.cta-primary){color:var(--p-sur-orange);box-shadow:4px 4px 0 var(--p-ombre)}

/* ── 7. Corrections manuelles après la feuille générée (plan_parcours_couleurs.css) ──
   Cases DPE cochées : le fond est la couleur de l'étiquette (A vert … G rouge), posée par une
   autre règle ; leur texte reste marine dans les deux thèmes, comme sur l'étiquette officielle. */
body.plan .cv2 .dpe input:checked+.box,
body.plan .exp2 .dpe-tile input:checked + .dpe-tile-box{color:var(--p-sur-orange)}

/* ── 8. Fond de page : certaines de ces pages imposent leur fond au body (en !important) ── */
/* Forme courte en !important chez elles : elle efface aussi le quadrillage, qu'on redéclare en entier. */
html body.plan{background:
  linear-gradient(var(--p-grille1) 1px,transparent 1px) 0 0/100px 100px,
  linear-gradient(90deg,var(--p-grille1) 1px,transparent 1px) 0 0/100px 100px,
  linear-gradient(var(--p-grille2) 1px,transparent 1px) 0 0/20px 20px,
  linear-gradient(90deg,var(--p-grille2) 1px,transparent 1px) 0 0/20px 20px,
  var(--p-fond) !important;background-attachment:fixed!important}

/* Encadré « Niveau de précision » : arrondi déclaré en trois classes, redressé à la main */
body.plan :is(.cv2,.exp2) .eprompt .precision{border-radius:0}

/* Pastille de légende de la consommation : elle suit le tracé (`--navy`, texte fort : marine en
   clair, blanc en sombre), pas le marine plein des cartes que la feuille générée lui applique. */
body.plan .rv2 .leg i[style*="background:var(--navy)"]{background:var(--p-fort)!important}

/* Couleurs posées par results_v2.js dans des attributs style construits à la volée (hors de
   portée du générateur, qui lit gabarits et feuilles) : soldes négatifs en rouge foncé. */
body.plan .rv2 [style*="#c0392b"]{color:var(--p-rouge)!important}
/* Pastille « i » des en-têtes du tableau de la batterie virtuelle : fond trait, texte papier,
   lisible dans les deux thèmes (le couple d'origine s'inversait mal en sombre). */
body.plan .rv2 .vb-th{background:var(--p-trait);color:var(--p-fond)}

/* ── Console interactive (lot 5) : elle suit le thème du site (console.js), son bouton de
   thème fait doublon avec celui de l'en-tête V2. ── */
body.plan .app #theme-toggle{display:none}
/* Légende de l'anneau : Archivo, plus large qu'Inter, faisait déborder « Autoconsommation »
   sur sa valeur dans la colonne étroite ; le nom se coupe au besoin, la valeur jamais. */
body.plan .app .dl-row .nm{overflow-wrap:anywhere;hyphens:auto}
body.plan .app .dl-row .v{white-space:nowrap}

/* ── Modale du calepinage 3D (page Résultats) : l'iframe suit le design de la page qui l'ouvre
   (frontend/design.py, `traductions.PARENT_EMBARQUE`, 2026-10-14) ; la barre devient celle d'une
   feuille V2 : trait plein, titre en capitales, boutons au trait. ── */
body.plan .rv2 .calmodal__panel{border:1.5px solid var(--p-trait);box-shadow:6px 6px 0 var(--p-ombre)}
body.plan .rv2 .calmodal__bar{border-bottom:1.5px solid var(--p-trait);padding:10px 14px 10px 18px}
body.plan .rv2 .calmodal__title{font:800 14px var(--p-titre);font-stretch:118%;text-transform:uppercase;letter-spacing:.03em}
body.plan .rv2 .calmodal__btn{background:transparent;border:1px solid var(--p-trait-doux);color:var(--p-fort)}
body.plan .rv2 .calmodal__btn:hover{background:var(--p-survol);border-color:var(--p-trait)}
body.plan .rv2 .calmodal__frame{background:var(--p-fond)}

/* ══ 8. Lot 8 : MISE EN PAGE de la maquette sur le formulaire de simulation ══
   Au lot 3 le formulaire n'avait été que rhabillé ; ici il prend la composition de la maquette
   validée : bandeau de feuille, colonne « Feuillets » (le rail d'étapes), fiche à cartouche au
   centre, « Relevé de saisie » à droite (static/frontend/js/plan_releve.js, lecture seule).
   Les éléments ajoutés au gabarit (`.p-…`) n'existent qu'en V2 ; le reste est le DOM d'origine. */
body.plan .fv2 .wrap{max-width:1280px;display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:28px;align-items:start;padding-top:60px}
body.plan .fv2 .p-fhero{grid-column:1/-1}
body.plan .fv2 .p-feuille-tete{display:flex;align-items:baseline;gap:22px;border-bottom:1px solid var(--p-trait-doux);padding-bottom:14px;margin-bottom:46px;font-family:var(--p-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--p-cyan)}
body.plan .fv2 .p-feuille-tete b{font-family:var(--p-titre);font-stretch:125%;font-size:13px;color:var(--p-trait);letter-spacing:.1em}
body.plan .fv2 .p-feuille-tete span:last-child{margin-left:auto}
body.plan .fv2 .p-fhero h1{font-size:clamp(34px,5.4vw,68px);line-height:1;margin:0 0 12px}
body.plan .fv2 .p-fhero h1 mark{background:linear-gradient(transparent 58%,var(--p-marque) 58% 92%,transparent 92%);color:inherit;padding:0 .08em}
body.plan .fv2 .p-fintro{font-size:18px;line-height:1.65;color:var(--p-texte2);max-width:700px;margin:0 0 46px}

/* Colonne « Feuillets » : le rail d'étapes d'origine, posé à la verticale */
body.plan .fv2 .fhead{grid-column:1;position:sticky;top:90px;padding:0}
body.plan .fv2 .frail{display:block;margin:0;border:1.5px solid var(--p-trait);background:var(--p-surface-fort)}
body.plan .fv2 .frail .seg,body.plan .fv2 .fcount{display:none}
body.plan .fv2 .p-titre-liste{padding:10px 14px;border-bottom:1.5px solid var(--p-trait);font-family:var(--p-mono);font-size:9px;letter-spacing:.16em;color:var(--p-cyan);text-transform:uppercase}
body.plan .fv2 .frail .node{display:grid;grid-template-columns:30px 1fr;gap:1px 10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--p-trait-doux)}
body.plan .fv2 .frail .dot{grid-row:span 2;width:28px;height:28px;border-radius:0;border:1.5px solid var(--p-trait-doux);background:transparent;color:var(--p-trait);box-shadow:none;font-size:11px}
body.plan .fv2 .frail .dot::before{content:"0"}
body.plan .fv2 .frail .lab{font-family:var(--p-titre);font-stretch:112%;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--p-trait)}
body.plan .fv2 .frail .p-sous{font-family:var(--p-mono);font-size:9px;letter-spacing:.12em;color:var(--p-cyan);text-transform:uppercase}
body.plan .fv2 .frail .node.cur{background:var(--p-orange-voile)}
body.plan .fv2 .frail .node.cur .dot{background:var(--p-orange);border-color:var(--p-orange);color:var(--p-sur-orange);font-weight:700}
body.plan .fv2 .frail .node.done .dot{background:transparent;border-color:var(--p-vert);color:var(--p-vert)}
body.plan .fv2 .p-jauge{height:4px;background:var(--p-trait-doux);position:relative}
body.plan .fv2 .p-jauge i{position:absolute;inset:0 auto 0 0;width:20%;background:var(--p-orange);transition:width .3s}
body.plan .fv2 .frail:has(.node[data-n="1"].cur) .p-jauge i{width:40%}
body.plan .fv2 .frail:has(.node[data-n="2"].cur) .p-jauge i{width:60%}
body.plan .fv2 .frail:has(.node[data-n="3"].cur) .p-jauge i{width:80%}
body.plan .fv2 .frail:has(.node[data-n="4"].cur) .p-jauge i{width:100%}

/* Fiche de l'étape : cartouche (numéro, titre, chapeau) au-dessus, questions dessous, pied */
body.plan .fv2 .fbody{grid-column:2;padding-top:0;min-width:0}
body.plan .fv2 .fstep.on{display:block;border:1.5px solid var(--p-trait);background:var(--p-surface)}
body.plan .fv2 .fprompt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:8px;padding:20px 26px 18px;border-bottom:1.5px solid var(--p-trait)}
body.plan .fv2 .fprompt :is(.num,.eyebrow){font-family:var(--p-mono);font-size:10.5px;font-weight:400;letter-spacing:.14em;color:var(--p-cyan);text-transform:uppercase;margin:0}
body.plan .fv2 .fprompt .eyebrow::before{content:"· "}
body.plan .fv2 .fprompt h2{flex-basis:100%;font-stretch:120%;font-size:clamp(24px,2.6vw,34px);line-height:1.02;margin:0;text-wrap:balance}
body.plan .fv2 .fprompt .lede{flex-basis:100%;font-size:15px;line-height:1.6;max-width:62ch;margin:0}
body.plan .fv2 .fcard{border:0;background:transparent;box-shadow:none;padding:0 26px}
body.plan .fv2 .fnav{margin:30px -26px 0;padding:16px 26px;border-top:1.5px solid var(--p-trait)}
body.plan .fv2 .subhead,body.plan .fv2 .field>label{font-family:var(--p-mono);font-size:10px;font-weight:400;letter-spacing:.16em;color:var(--p-cyan);text-transform:uppercase;margin:22px 0 10px}
body.plan .fv2 .subhead::after{display:none}

/* Relevé de saisie */
body.plan .fv2 .p-releve{grid-column:3;position:sticky;top:90px;border:1.5px solid var(--p-trait);background:var(--p-surface-fort)}
body.plan .fv2 .p-releve .p-titre-liste{display:flex;justify-content:space-between;align-items:center;font-family:var(--p-titre);font-stretch:120%;font-weight:850;font-size:13px;letter-spacing:0;color:var(--p-fort)}
body.plan .fv2 .p-releve .p-titre-liste small{font:400 9px var(--p-mono);letter-spacing:.14em;color:var(--p-cyan)}
body.plan .fv2 .p-releve dl{margin:0}
body.plan .fv2 .p-releve dl div{padding:9px 14px;border-bottom:1px solid var(--p-trait-doux)}
body.plan .fv2 .p-releve dt{font-family:var(--p-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-cyan)}
body.plan .fv2 .p-releve dd{font-size:14px;font-weight:600;color:var(--p-fort);margin:3px 0 0;line-height:1.35;overflow-wrap:anywhere}
body.plan .fv2 .p-releve dd.vide{color:var(--p-texte2);font-weight:400;font-style:italic}
body.plan .fv2 .p-releve-note{padding:12px 14px;margin:0;font-family:var(--p-main);font-size:24px;line-height:1.1;color:var(--p-or)}

/* Cartes de choix : grandes, titre en capitales, description, coche carrée dans l'angle */
body.plan .fv2 :is(.obj,.ptl){border:1.5px solid var(--p-trait-doux);background:var(--p-surface);padding:15px 16px 14px;transform:none}
body.plan .fv2 :is(.obj,.ptl):hover{border-color:var(--p-trait);transform:none}
body.plan .fv2 :is(.obj,.ptl) b{font-stretch:112%;font-weight:800;font-size:14.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--p-fort);line-height:1.2}
body.plan .fv2 .obj span,body.plan .fv2 .ptl>p{font-size:13px;line-height:1.45;color:var(--p-texte2)}
/* Trois cartes par ligne : un titre long (« Autoconsommation + revente surplus ») se coupait au
   milieu d'un mot en capitales étirées ; plus petit, sans étirement, coupé aux espaces. */
body.plan .fv2 .objgrid3 .obj b{font-size:13px;font-stretch:100%;overflow-wrap:normal;hyphens:manual}
body.plan .fv2 :is(.obj,.ptl).sel{border-color:var(--p-orange);background:var(--p-orange-voile);box-shadow:inset 0 0 0 1px var(--p-orange)}
body.plan .fv2 :is(.obj,.ptl) .ok{top:-1.5px;right:-1.5px;width:24px;height:24px;background:var(--p-orange);color:var(--p-sur-orange)}
body.plan .fv2 :is(.obj,.ptl) .oi{width:auto;height:auto;background:transparent;border:0;justify-content:flex-start;margin-bottom:6px;color:var(--p-trait)}
body.plan .fv2 :is(.obj,.ptl).sel .oi{background:transparent;color:var(--p-or)}
/* Type de bâtiment : dessins de la maquette, descriptions visibles (le gabarit les compactait) */
body.plan .fv2 #fv2Bati .obj{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:15px 16px 14px}
body.plan .fv2 #fv2Bati .obj .oi{display:none}
body.plan .fv2 #fv2Bati .obj>span:last-child{display:block}
body.plan .fv2 #fv2Bati .obj b{font-size:14.5px}
body.plan .fv2 .p-illu{width:46px;height:34px;margin-bottom:4px;color:var(--p-trait);overflow:visible}
body.plan .fv2 .obj.sel .p-illu{color:var(--p-or)}
/* Où poser les panneaux : puces, comme la maquette */
body.plan .fv2 #fv2Support.objgrid3{display:flex;flex-wrap:wrap;gap:6px}
body.plan .fv2 #fv2Support .obj{display:inline-flex;padding:8px 12px;border-width:1px;box-shadow:none}
body.plan .fv2 #fv2Support .obj :is(.oi,.ok){display:none}
body.plan .fv2 #fv2Support .obj b{font:400 11px var(--p-mono);letter-spacing:.04em;text-transform:none;color:var(--p-trait)}
body.plan .fv2 #fv2Support .obj.sel{background:var(--p-orange);border-color:var(--p-orange)}
body.plan .fv2 #fv2Support .obj.sel b{color:var(--p-sur-orange);font-weight:700}

/* Champs : soulignés, valeur en grand ; le texte libre (adresse) en Archivo */
body.plan .fv2 .inp{background:transparent;border:0;border-bottom:1.5px dashed var(--p-trait-doux);padding:4px 0;box-shadow:none}
body.plan .fv2 .inp:focus-within{border-bottom:1.5px solid var(--p-orange);box-shadow:none}
body.plan .fv2 .inp input{font:500 17px var(--p-titre);color:var(--p-fort)}
body.plan .fv2 .inp :is(input.mono,input[inputmode="numeric"],input[inputmode="decimal"],input[type="number"]){font:600 22px var(--p-mono)}
body.plan .fv2 .inp .suf{font-size:11px;color:var(--p-cyan)}

/* Étape 2 : les trois questions sur un seul feuillet (maquette). Aucun JS ajouté : les volets
   « Priorité » et « Vente totale » portent déjà le bouton qui passe à l'étape 3 (`data-next`),
   et « Type » sait sauter la priorité du kit plug & play (`data-e2next`). */
body.plan .fv2 [data-step="1"] .e2crumb{display:none}
body.plan .fv2 [data-step="1"] .e2pane:is([data-e2="projet"],[data-e2="type"],[data-e2="prio"]){display:block}
body.plan .fv2 [data-step="1"] .e2pane[data-e2="vente"]{display:none}
body.plan .fv2 [data-step="1"] .e2pane:is([data-e2="projet"],[data-e2="type"]) .fnav{display:none}
body.plan .fv2 [data-step="1"] .fcard:has(.ptl.sel[data-mode="vente"]) .e2pane:is([data-e2="type"],[data-e2="prio"]){display:none}
body.plan .fv2 [data-step="1"] .fcard:has(.ptl.sel[data-mode="vente"]) .e2pane[data-e2="vente"]{display:block}
body.plan .fv2 [data-step="1"] .fcard:has(#fv2Typegrid .obj.sel[data-type="kit_plug_play"]) .e2pane[data-e2="prio"]{display:none}
body.plan .fv2 [data-step="1"] .fcard:has(#fv2Typegrid .obj.sel[data-type="kit_plug_play"]) .e2pane[data-e2="type"] .fnav{display:flex}

/* ══ 9. Lot 8 : MISE EN PAGE de la maquette sur les calculateurs rapide (.cv2) et expert (.exp2) ══
   Bandeau « F.01 », colonne de gauche = onglets Rapide | Expert + liste cliquable des 14 postes
   (bâtie par le script de chaque page depuis ses catégories), fiche à cartouche « Poste NN / 14 » :
   l'en-tête de catégorie d'origine (`.ecat-h` / `.step-header`), masqué jusqu'ici au profit du
   titre de gauche, devient ce cartouche. Le texte entier (« Poste NN / 14 ») vient de l'attribut
   `data-poste` posé par le même script, qui reçoit le mot du serveur : une CSS n'est pas extraite
   par les catalogues de traduction, et un compteur CSS ne compterait pas les catégories masquées. */
body.plan :is(.cv2,.exp2) .p-chero{grid-column:1/-1}
body.plan :is(.cv2,.exp2) .p-feuille-tete{display:flex;align-items:baseline;gap:22px;border-bottom:1px solid var(--p-trait-doux);padding-bottom:14px;margin-bottom:46px;font-family:var(--p-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--p-cyan)}
body.plan :is(.cv2,.exp2) .p-feuille-tete b{font-family:var(--p-titre);font-stretch:125%;font-size:13px;color:var(--p-trait);letter-spacing:.1em}
body.plan :is(.cv2,.exp2) .p-feuille-tete span:last-child{margin-left:auto}
body.plan :is(.cv2,.exp2) .p-chero h1{font-size:clamp(34px,5.4vw,68px);line-height:1;margin:0 0 12px}
body.plan :is(.cv2,.exp2) .p-chero h1 mark{background:linear-gradient(transparent 58%,var(--p-marque) 58% 92%,transparent 92%);color:inherit;padding:0 .08em}
body.plan :is(.cv2,.exp2) .p-fintro{font-size:18px;line-height:1.65;color:var(--p-texte2);max-width:700px;margin:0 0 46px}
body.plan .cv2 .wrap{max-width:1280px;padding-top:60px}
body.plan .exp2-wrap{max-width:1280px!important;padding-top:24px}
body.plan :is(.cv2,.exp2) .grid2{grid-template-columns:250px minmax(0,1fr);gap:28px;margin-top:0}

/* Colonne de gauche : onglets + postes (+ total des fiches de l'expert), dans un cadre au trait */
body.plan :is(.cv2,.exp2) .eprompt{top:90px;border:1.5px solid var(--p-trait);background:var(--p-surface-fort);max-height:calc(100vh - 110px);overflow:auto}
body.plan :is(.cv2,.exp2) .eprompt :is(.enum,h2,.elede,.pbar,.exp-pbar){display:none}
body.plan :is(.cv2,.exp2) .eprompt .precision{margin:0;padding:0;border:0;border-bottom:1.5px solid var(--p-trait);background:transparent;box-shadow:none}
body.plan :is(.cv2,.exp2) .eprompt .prec-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.plan :is(.cv2,.exp2) .eprompt .prec-opts{flex-direction:row;gap:0}
body.plan :is(.cv2,.exp2) .eprompt .prec-opt{flex:1;padding:10px 8px;border:0;text-align:center;background:transparent}
body.plan :is(.cv2,.exp2) .eprompt .prec-opt+.prec-opt{border-left:1px solid var(--p-trait-doux)}
body.plan :is(.cv2,.exp2) .eprompt .prec-opt b{font:400 10px var(--p-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p-trait)}
body.plan :is(.cv2,.exp2) .eprompt .prec-opt span{display:none}
body.plan :is(.cv2,.exp2) .eprompt .prec-opt.cur{background:var(--p-orange)}
body.plan :is(.cv2,.exp2) .eprompt .prec-opt.cur b{color:var(--p-sur-orange);font-weight:700}
body.plan :is(.cv2,.exp2) .p-postes button{display:grid;grid-template-columns:28px 18px 1fr;gap:10px;align-items:center;width:100%;text-align:left;padding:8px 14px;border:0;border-bottom:1px solid var(--p-trait-doux);background:transparent;color:var(--p-trait);font:inherit;cursor:pointer}
body.plan :is(.cv2,.exp2) .p-postes button:last-child{border-bottom:0}
body.plan :is(.cv2,.exp2) .p-postes button:hover{background:var(--p-survol)}
body.plan :is(.cv2,.exp2) .p-postes button:focus-visible{outline:2px solid var(--p-or);outline-offset:-2px}
body.plan :is(.cv2,.exp2) .p-postes i{font:normal 10px var(--p-mono);color:var(--p-cyan)}
body.plan :is(.cv2,.exp2) .p-postes svg{width:16px;height:16px;color:var(--p-cyan)}
/* Icônes de la maquette (plan_icones.js) : un tracé au trait, sans remplissage */
body.plan :is(.cv2,.exp2) .p-postes svg.p-ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
body.plan :is(.cv2,.exp2) .p-postes b{font-size:13px;font-weight:600;color:var(--p-fort)}
body.plan :is(.cv2,.exp2) .p-postes button[aria-current="step"]{background:var(--p-orange-voile)}
body.plan :is(.cv2,.exp2) .p-postes button[aria-current="step"] i{color:var(--p-or-petit);font-weight:700}
body.plan :is(.cv2,.exp2) .p-postes button[aria-current="step"] svg{color:var(--p-or)}
/* Poste validé par « Suivant » (calculateur V2) : une coche verte en bout de ligne. Le tracé
   est un masque (aucun mot dans `content`), peint de --p-vert, qui suit le thème. */
body.plan .cv2 .p-postes button[data-fait]{grid-template-columns:28px 18px 1fr 14px}
body.plan .cv2 .p-postes button[data-fait]::after{content:"";width:14px;height:14px;background:var(--p-vert);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
body.plan .exp2 .p-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px;border-top:1.5px solid var(--p-trait)}
body.plan .exp2 .p-total span:first-child{font:400 9px var(--p-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-cyan)}
body.plan .exp2 .p-total b{font:600 16px var(--p-mono);color:var(--p-fort);white-space:nowrap}

/* Fiche du poste : cartouche au-dessus, questions, pied. Retrait des questions porté par la
   catégorie (padding) : plusieurs sous-titres ont une marge écrite en ligne qui annulerait un
   retrait posé sur eux. Le cartouche ressort de ce retrait. */
body.plan .cv2 .card,body.plan .exp2 .calc-card{border:1.5px solid var(--p-trait);background:var(--p-surface);box-shadow:none;padding:0}
body.plan .exp2 .calc-stepper{display:none}
/* Pied de fiche de l'expert : la fiche n'a plus de marge intérieure (le retrait vit sur les étapes) */
body.plan .exp2 .calc-nav{margin:0;padding:16px 26px;border-top:1.5px solid var(--p-trait)}
body.plan .cv2 .ecat,body.plan .exp2 .step{padding:0 26px}
body.plan .cv2 .card .ecat-h,body.plan .exp2 .calc-card .step-header{display:grid;gap:8px;margin:0 -26px 4px;padding:20px 26px 18px;border-bottom:1.5px solid var(--p-trait)}
body.plan .cv2 .card .ecat-h::before,body.plan .exp2 .calc-card .step-header::before{content:attr(data-poste);font:400 10.5px var(--p-mono);letter-spacing:.14em;color:var(--p-cyan);text-transform:uppercase}
body.plan .cv2 .card .ecat-h .ci,body.plan .exp2 .calc-card .step-num{display:none}
body.plan .cv2 .card .ecat-h .ct,body.plan .exp2 .step-title{font-family:var(--p-titre);font-stretch:120%;font-weight:850;font-size:clamp(24px,2.6vw,34px);line-height:1.02;text-transform:uppercase;color:var(--p-fort)}
body.plan .cv2 .card .ecat-h .cs,body.plan .exp2 .step-sub{font-size:15px;line-height:1.6;color:var(--p-texte2);margin-top:6px}
body.plan .cv2 .ecat .fg{padding:18px 0;margin-bottom:0;border-bottom:1px solid var(--p-trait-doux)}
body.plan .cv2 .ecat .fg:last-child{border-bottom:0}
body.plan .cv2 .nav{margin:0;padding:16px 26px;border-top:1.5px solid var(--p-trait)}
body.plan .cv2 label.lab{font:400 10px var(--p-mono);letter-spacing:.16em;color:var(--p-cyan);text-transform:uppercase}

/* Champs soulignés, valeur en grand ; listes déroulantes au trait */
body.plan .cv2 input.in{border:0;border-bottom:1.5px dashed var(--p-trait-doux);background:transparent;padding:4px 0;font:600 22px var(--p-mono);color:var(--p-fort);box-shadow:none}
body.plan .cv2 input.in:focus{border-bottom:1.5px solid var(--p-orange);outline:0;box-shadow:none}
body.plan .cv2 select.in{border:1px solid var(--p-trait-doux);border-radius:0;background-color:var(--p-surface);font:500 15px var(--p-titre)}
/* Type de logement : grandes cartes, titre en capitales à gauche (maquette) */
/* `:not([hidden])` : le script de la page masque par l'attribut `hidden` les types qui ne
   correspondent pas au bâtiment choisi à l'étape 1 du formulaire ; un `display` posé ici
   l'écraserait et afficherait les quatre types (appartements compris pour une maison). */
body.plan .cv2 .cv2-logement .chip:not([hidden]){display:flex}
body.plan .cv2 .cv2-logement .chip{flex-direction:column;align-items:flex-start;gap:5px;padding:15px 16px 14px;border:1.5px solid var(--p-trait-doux);background:var(--p-surface);text-align:left}
/* Illustrations des types de logement (maquette) : trait fin, logement concerné en orange */
body.plan :is(.cv2 .cv2-logement .chip,.exp2 .exp-logement-opt) svg.p-illu-log{width:68px;height:46px;margin-bottom:4px;color:var(--p-trait);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;overflow:visible}
body.plan svg.p-illu-log .acc{stroke:var(--p-orange);stroke-width:1.8}
body.plan svg.p-illu-log .accf{fill:var(--p-orange-voile);stroke:var(--p-orange);stroke-width:1.6}
body.plan .cv2 .cv2-logement .chip span{font-stretch:112%;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--p-fort)}
body.plan .cv2 .cv2-logement .chip small{font-size:13px;color:var(--p-texte2)}
body.plan .cv2 .cv2-logement .chip.sel{border-color:var(--p-orange);background:var(--p-orange-voile);box-shadow:inset 0 0 0 1px var(--p-orange)}
body.plan .cv2 .cv2-logement .chip.sel svg{color:var(--p-or)}

/* DPE : flèches aux couleurs officielles de l'étiquette (maquette) */
body.plan .cv2 .dpe{gap:3px;align-items:flex-end;padding-top:8px}
body.plan .cv2 .dpe label{border-bottom:3px solid transparent;padding-bottom:3px}
body.plan .cv2 .dpe .box{border:0;font:800 17px var(--p-titre);width:46px;height:34px;padding:0 0 0 10px;display:flex;align-items:center;clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%);color:#0F2D52;transition:transform .15s}
body.plan .cv2 .dpe input[value="A"]+.box{background:#009C6D;color:#fff}
body.plan .cv2 .dpe input[value="B"]+.box{background:#52B153}
body.plan .cv2 .dpe input[value="C"]+.box{background:#A5CC74}
body.plan .cv2 .dpe input[value="D"]+.box{background:#F4E70F}
body.plan .cv2 .dpe input[value="E"]+.box{background:#F0B50F}
body.plan .cv2 .dpe input[value="F"]+.box{background:#EB8235}
body.plan .cv2 .dpe input[value="G"]+.box{background:#D7221F;color:#fff}
body.plan .cv2 .dpe input[value="inconnu"]+.box{clip-path:none;width:auto;padding:0 12px;font:500 11px var(--p-mono);background:var(--p-surface);border:1px solid var(--p-trait-doux);color:var(--p-trait)}
body.plan .cv2 .dpe label:has(input:checked){border-bottom-color:var(--p-trait)}
body.plan .cv2 .dpe input:checked+.box{transform:translateY(-5px) scale(1.12)}

/* Expert : mêmes champs que le rapide, sous ses propres classes (field-*, dpe-tile, exp-logement) */
body.plan .exp2 .field-label{font:400 10px var(--p-mono);letter-spacing:.16em;color:var(--p-cyan);text-transform:uppercase}
body.plan .exp2 input.field-input:not([type=checkbox]):not([type=radio]){border:0;border-bottom:1.5px dashed var(--p-trait-doux);border-radius:0;background:transparent;padding:4px 0;font:600 22px var(--p-mono);color:var(--p-fort);box-shadow:none}
body.plan .exp2 input.field-input:focus{border-bottom:1.5px solid var(--p-orange);outline:0;box-shadow:none}
body.plan .exp2 select{border-radius:0}
body.plan .exp2 .exp-logement-opt{align-items:flex-start;text-align:left;gap:5px;padding:15px 16px 14px;border:1.5px solid var(--p-trait-doux);background:var(--p-surface)}

body.plan .exp2 .exp-logement-opt span{font-stretch:112%;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--p-fort)}
body.plan .exp2 .exp-logement-opt small{font-size:13px;color:var(--p-texte2)}
body.plan .exp2 .exp-logement-opt.sel{border-color:var(--p-orange);background:var(--p-orange-voile);box-shadow:inset 0 0 0 1px var(--p-orange)}
body.plan .exp2 .exp-logement-opt.sel svg{color:var(--p-or)}
body.plan .exp2 .dpe-grid{gap:3px;align-items:flex-end;padding-top:8px}
body.plan .exp2 .dpe-tile{border-bottom:3px solid transparent;padding-bottom:3px}
body.plan .exp2 .dpe-tile-box{border:0;font:800 17px var(--p-titre);width:46px;height:34px;padding:0 0 0 10px;display:flex;align-items:center;clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%);color:#0F2D52;transition:transform .15s}
body.plan .exp2 .dpe-tile input[value="A"]+.dpe-tile-box{background:#009C6D;color:#fff}
body.plan .exp2 .dpe-tile input[value="B"]+.dpe-tile-box{background:#52B153}
body.plan .exp2 .dpe-tile input[value="C"]+.dpe-tile-box{background:#A5CC74}
body.plan .exp2 .dpe-tile input[value="D"]+.dpe-tile-box{background:#F4E70F}
body.plan .exp2 .dpe-tile input[value="E"]+.dpe-tile-box{background:#F0B50F}
body.plan .exp2 .dpe-tile input[value="F"]+.dpe-tile-box{background:#EB8235}
body.plan .exp2 .dpe-tile input[value="G"]+.dpe-tile-box{background:#D7221F;color:#fff}
body.plan .exp2 .dpe-tile input[value="inconnu"]+.dpe-tile-box{clip-path:none;width:auto;padding:0 12px;font:500 11px var(--p-mono);background:var(--p-surface);border:1px solid var(--p-trait-doux);color:var(--p-trait)}
body.plan .exp2 .dpe-tile:has(input:checked){border-bottom-color:var(--p-trait)}
body.plan .exp2 .dpe-tile input:checked+.dpe-tile-box{transform:translateY(-5px) scale(1.12)}

@media (max-width:860px){
  body.plan :is(.cv2,.exp2) .grid2{grid-template-columns:minmax(0,1fr);gap:18px}
  body.plan :is(.cv2,.exp2) .eprompt{position:static;max-height:none}
  body.plan :is(.cv2,.exp2) .p-postes{display:flex;overflow-x:auto}
  body.plan :is(.cv2,.exp2) .p-postes button{min-width:170px;border-bottom:0;border-right:1px solid var(--p-trait-doux)}
  body.plan :is(.cv2,.exp2) .p-feuille-tete span:last-child{display:none}
}
@media (max-width:560px){
  body.plan .cv2 .ecat,body.plan .exp2 .step,body.plan .cv2 .card .ecat-h,body.plan .exp2 .calc-card .step-header,body.plan .cv2 .nav{padding-left:16px;padding-right:16px}
  body.plan .cv2 .card .ecat-h,body.plan .exp2 .calc-card .step-header{margin-left:-16px;margin-right:-16px}
}

/* ══ 10. Flèches des boutons de navigation : la PASTILLE du bouton « Simuler » (plan.css,
   `.p-pastille`) : carré arrondi de la couleur du texte, chevron évidé. À droite pour avancer
   (Continuer, Suivant, Lancer, Calculer), à gauche et retournée pour reculer (Retour, Précédent).
   Les icônes d'origine (SVG, ou caractère « → » isolé dans `.cv2-fl`) sont masquées. ══ */
body.plan :is(
  .fv2 :is([data-next],[data-e2next],#fv2Launch),.cv2 :is(#cv2Next,#cv2Go),.exp2 :is(#next-btn,#submit-btn),
  .fv2 :is([data-prev],[data-e2prev]),.cv2 #cv2Prev,.exp2 #prev-btn
){align-items:center;gap:10px}
body.plan :is(.fv2 :is([data-next],[data-e2next],[data-prev],[data-e2prev],#fv2Launch),.exp2 :is(#next-btn,#prev-btn,#submit-btn))>svg,
body.plan .cv2 .cv2-fl{display:none}
body.plan :is(.fv2 :is([data-next],[data-e2next],#fv2Launch),.cv2 :is(#cv2Next,#cv2Go),.exp2 :is(#next-btn,#submit-btn))::after,
body.plan :is(.fv2 :is([data-prev],[data-e2prev]),.cv2 #cv2Prev,.exp2 #prev-btn)::before{
  content:"";display:inline-block;width:1.45em;height:1.45em;flex-shrink:0;background:currentColor;border-radius:.46em;transition:transform .2s;
  -webkit-mask:var(--p-chevron) center/62% no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:var(--p-chevron) center/62% no-repeat,linear-gradient(#000 0 0);mask-composite:exclude}
body.plan :is(.fv2,.cv2,.exp2){--p-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body.plan :is(.fv2 :is([data-prev],[data-e2prev]),.cv2 #cv2Prev,.exp2 #prev-btn){--p-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 6l-6 6 6 6' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body.plan :is(.fv2 :is([data-next],[data-e2next],#fv2Launch),.cv2 :is(#cv2Next,#cv2Go),.exp2 :is(#next-btn,#submit-btn)):hover::after{transform:translateX(3px)}
body.plan :is(.fv2 :is([data-prev],[data-e2prev]),.cv2 #cv2Prev,.exp2 #prev-btn):not(:disabled):hover::before{transform:translateX(-3px)}
@media (prefers-reduced-motion:reduce){
  body.plan :is(.fv2,.cv2,.exp2) :is(button)::after,body.plan :is(.fv2,.cv2,.exp2) :is(button)::before{transition:none}
}

/* Étape 5 : comme la maquette, le curseur n'apparaît que si l'on choisit soi-même la puissance
   (en mode estimé il affichait « X kWc » sur une valeur qui ne sera pas utilisée) */
body.plan .fv2 .field:has(#fv2AutoPow .sel[data-ap="auto"]) #fv2PowBlock{display:none}

/* Petits écrans : une colonne ; les feuillets en bandeau défilant, le relevé sous la fiche */
@media (max-width:1100px){
  body.plan .fv2 .wrap{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:32px}
  body.plan .fv2 :is(.fhead,.fbody,.p-releve){grid-column:1;position:static}
  body.plan .fv2 .frail{display:flex;overflow-x:auto}
  body.plan .fv2 .frail :is(.p-titre-liste,.p-jauge,.p-sous){display:none}
  body.plan .fv2 .frail .node{display:flex;gap:8px;border-bottom:0;border-right:1px solid var(--p-trait-doux);flex:1 0 auto}
  body.plan .fv2 .frail .lab{display:inline}
  body.plan .fv2 .p-feuille-tete span:last-child{display:none}
}
@media (max-width:560px){
  body.plan .fv2 .frail .node:not(.cur) .lab{display:none}
  body.plan .fv2 :is(.fprompt,.fcard){padding-left:16px;padding-right:16px}
  body.plan .fv2 .fnav{margin:24px -16px 0;padding:14px 16px}
}

/* Synthèse de consommation, onglet Détails : chiffres en police de cotes, pastilles carrées (le reste suit le remappage ci-dessus) */
body.plan .cs2 :is(.det-v,.det-kwh,.det-eur,.det-resume b,.det-tag){font-family:var(--p-mono)}
body.plan .cs2 .det-barre{border:1px solid var(--p-trait-doux);background:transparent}
body.plan .cs2 .det-poste{border-color:var(--p-trait-doux);background:var(--p-surface)}
body.plan .cs2 .det-poste[open]>summary{border-bottom:1px solid var(--p-trait-doux)}
body.plan .cs2 .det-resume{border-color:var(--p-trait)}