/**
 * Feuille de style du simulateur — portee de la maquette validee le 2026-08-27.
 *
 * SOURCE DE VERITE : docs/maquette/index.html. Toute evolution d'ergonomie passe
 * d'abord par la maquette, qui est ce que Julien relit et valide.
 *
 * Charte relevee sur heolian.fr (kit Elementor 758). Les jetons retombent sur les
 * variables globales Elementor quand elles existent : si la charte du site change,
 * le simulateur suit.
 */

/* ============================================================
   Charte relevée sur heolian.fr (kit Elementor 758).
   Maquette volontairement mono-thème clair : elle représente le site,
   qui est clair. Toutes les couleurs sont peintes explicitement.
   ============================================================ */
:root {
  --bleu:        #009FE3;
  --bleu-fonce:  #0079AC;
  --bleu-pale:   #E6F5FC;
  --rouge:       #FB342E;
  --rouge-fonce: #D91E18;
  --ardoise:     #354855;
  --texte:       #475A68;
  --texte-clair: #7A8B97;
  --ligne:       #DCE3E8;
  --fond:        #FFFFFF;
  --fond-doux:   #F4F6F7;
  --bureau:      #E4EAEE;
  --vert:        #7BC143;
  --vert-fonce:  #4E7F22;
  --gris-reseau: #B9C4CB;
  --r: 1px;
  --font: "Roboto", "Segoe UI", system-ui, sans-serif;
}

.hw-config, .hw-config * { box-sizing: border-box; }

/* Le simulateur ne peint jamais le fond de la page : il s'insere dans le theme
   du site — heolian.fr aujourd'hui, celui d'un distributeur demain. */
.hw-config { color: var(--texte); font-family: var(--font); font-size: 16px; line-height: 1.45; }
.hw-config h1, .hw-config h2, .hw-config h3, .hw-config h4 { color: var(--ardoise); margin: 0; text-wrap: balance; font-weight: 700; }

.hw-config { background: var(--fond); border: 1px solid var(--ligne); overflow: hidden; }

/* 🆕 2026-08-31. `overflow: hidden` fait du cadre un conteneur de defilement : une
   en-tete `position: sticky` s'y colle au cadre, pas a l'ecran — donc elle disparait
   des qu'on descend. `overflow: clip` coupe le debordement horizontal SANS creer ce
   conteneur, ce qui rend l'en-tete collante possible.
   Le repli ci-dessus reste pour les navigateurs sans `clip` (Safari < 16) : ils
   retrouvent exactement le comportement d'avant, en-tete non collante comprise. */
@supports (overflow: clip) {
  .hw-config { overflow: visible; overflow-x: clip; }
}

/* En mode cadre chez un distributeur : ni bordure ni ombre, la page hote fournit son cadre. */
.hw-embed .hw-config { border: 0; }

/* Couleur d'accent d'un partenaire, appliquee sans toucher au reste de la charte. */
.hw-config[data-accent] .btn { background: var(--hw-accent-partenaire, var(--rouge)); border-color: var(--hw-accent-partenaire, var(--rouge)); }
/* ---------- Bandeau résultat persistant ---------- */
.hw-config .bandeau { background: var(--ardoise); color: #fff; padding: 14px 28px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hw-config .bandeau .marque { font-weight: 700; letter-spacing: .06em; font-size: 13px; text-transform: uppercase; }
.hw-config .bandeau .marque span { color: var(--bleu); }
.hw-config .compteurs { display: flex; gap: 26px; margin-left: auto; flex-wrap: wrap; }
.hw-config .compteur { min-width: 92px; }
.hw-config .compteur .val { font-size: 21px; font-weight: 700; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hw-config .compteur .val.vide { color: #7E93A2; font-weight: 300; }

/* 🆕 Un compteur « provisoire » : le chiffre existe deja, mais il repose sur une valeur
   par defaut, pas sur une reponse du visiteur. Il est lisible, pas eteint — sinon on
   perd l'effet recherche — et visiblement moins affirme que les autres. */
.hw-config .compteur .val.provisoire { color: #C3D1DA; font-weight: 500; }
.hw-config .compteur .val.provisoire em { color: #92A6B3; }

/* Un chiffre qui change doit se voir changer : c'est ce qui transforme des ecrans de
   questions en ecrans qui recompensent. */
@keyframes hw-compteur-maj {
  0%   { transform: translateY(4px); opacity: .35; }
  100% { transform: translateY(0);   opacity: 1; }
}
.hw-config .compteur .val.maj { animation: hw-compteur-maj .34s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .hw-config .compteur .val.maj { animation: none; }
}
.hw-config .compteur .lib { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #A7B8C4; margin-top: 3px; }
.hw-config .compteur .val em { font-style: normal; font-size: 13px; font-weight: 400; color: #C3D1DA; }

/* ---------- 🆕 En-tete collante (emprunt n°2) ----------
   Le bandeau de resultat et la barre d'etapes voyagent ensemble et restent en haut de
   l'ecran pendant tout le parcours.

   `--hw-entete-haut` existe pour les sites hotes qui posent DEJA une barre collante :
   heolian.fr aujourd'hui, le site d'un distributeur demain (lot L9). Il se regle depuis
   la page hote sans toucher a cette feuille, en redeclarant la variable sur .hw-config
   avec la hauteur de la barre du site — par exemple 72px. */
.hw-config .hw-entete {
  position: sticky;
  top: var(--hw-entete-haut, 0px);
  z-index: 40;
  background: var(--ardoise);
}

/* Sentinelle invisible : c'est elle qui sort du champ quand l'en-tete se colle. */
.hw-config .hw-entete-sentinelle { height: 1px; margin-bottom: -1px; }

/* Etat de l'estimation : combien de reponses sont deja prises en compte. La phrase est
   la contrepartie honnete du chiffre affiche d'entree — elle dit ce qui est suppose. */
.hw-config .hw-entete-etat {
  margin: 0;
  padding: 7px 28px;
  background: #2B3B46;
  color: #A7B8C4;
  font-size: 12px;
  line-height: 1.35;
  border-top: 1px solid #40525E;
}
.hw-config .hw-entete-etat strong { color: #E6F5FC; font-weight: 700; }
.hw-config .hw-entete-etat.complet { background: #24343E; color: #C3D1DA; }

/* Collee : on resserre, parce que sur un telephone cette en-tete mange la question. */
.hw-config .hw-entete.collee .bandeau { padding-top: 8px; padding-bottom: 8px; }
.hw-config .hw-entete.collee .compteur .val { font-size: 17px; }
.hw-config .hw-entete.collee .compteur .lib { font-size: 9.5px; }
.hw-config .hw-entete.collee .hw-entete-etat { display: none; }
.hw-config .hw-entete.collee { box-shadow: 0 6px 14px rgba(53, 72, 85, .18); }

/* La carte Leaflet monte ses calques jusqu'a z-index 1000. Sans contexte d'empilement
   propre, elle passerait AU-DESSUS de l'en-tete collante quand on fait defiler l'ecran 1.
   `z-index: 0` sur le cadre de la carte enferme ces valeurs chez elle. */
.hw-config .carte-geo { z-index: 0; }

.hw-config .progression { display: flex; background: var(--fond-doux); border-bottom: 1px solid var(--ligne); }
.hw-config .etape-pt { flex: 1; padding: 11px 8px; text-align: center; font-size: 11.5px; color: var(--texte-clair); border-bottom: 3px solid transparent; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hw-config .etape-pt.faite { color: var(--bleu-fonce); border-bottom-color: #9BD6F0; }
.hw-config .etape-pt.active { color: var(--ardoise); font-weight: 700; border-bottom-color: var(--bleu); background: var(--fond); }

.hw-config .ecran { display: none; padding: 34px 40px 40px; animation: entree .28s ease-out; }
.hw-config .ecran.actif { display: block; }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hw-config .ecran { animation: none; } }

.hw-config .question { font-size: 25px; margin-bottom: 4px; }
.hw-config .aide { color: var(--texte-clair); font-size: 14.5px; margin: 0 0 22px; max-width: 62ch; }
.hw-config .reste { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu); font-weight: 700; margin-bottom: 10px; }
.hw-config .colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

.hw-config label.champ { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--texte-clair); margin-bottom: 6px; font-weight: 500; margin-top: 18px; }
.hw-config label.champ:first-child { margin-top: 0; }
.hw-config input[type=text], .hw-config select { width: 100%; padding: 9px 10px; font-family: var(--font); font-size: 16px; border: 1px solid var(--texte); border-radius: var(--r); background: var(--fond); color: var(--ardoise); }
.hw-config input:focus-visible, .hw-config select:focus-visible, .hw-config button:focus-visible, .hw-config .carte:focus-visible, .hw-config .vignette:focus-visible, .hw-config .orient-btn:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

.hw-config .cartes { display: grid; gap: 10px; }
.hw-config .cartes.deux { grid-template-columns: 1fr 1fr; }
.hw-config .cartes.trois { grid-template-columns: repeat(3, 1fr); }
.hw-config .carte { border: 1px solid var(--ligne); background: var(--fond); border-radius: var(--r); padding: 13px 15px; cursor: pointer; text-align: left; font-family: var(--font); transition: border-color .15s, background .15s; }
.hw-config .carte:hover { border-color: var(--bleu); background: var(--bleu-pale); }
.hw-config .carte.choisie { border-color: var(--bleu); background: var(--bleu-pale); box-shadow: inset 0 0 0 1px var(--bleu); }
.hw-config .carte .t { display: block; font-weight: 700; color: var(--ardoise); font-size: 14.5px; }
.hw-config .carte .s { display: block; font-size: 12.5px; color: var(--texte-clair); margin-top: 2px; }

.hw-config .bascules { display: grid; gap: 8px; }
.hw-config .bascule { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border: 1px solid var(--ligne); cursor: pointer; background: var(--fond); border-radius: var(--r); font-size: 14.5px; color: var(--ardoise); font-family: var(--font); text-align: left; width: 100%; }
.hw-config .bascule:hover { border-color: var(--bleu); }
.hw-config .bascule .case { width: 18px; height: 18px; border: 1px solid var(--texte); flex: none; display: grid; place-items: center; font-size: 12px; color: #fff; line-height: 1; }
.hw-config .bascule.on { border-color: var(--bleu); background: var(--bleu-pale); }
.hw-config .bascule.on .case { background: var(--bleu); border-color: var(--bleu); }
.hw-config .bascule .detail { margin-left: auto; font-size: 12px; color: var(--texte-clair); font-variant-numeric: tabular-nums; }
.hw-config .phases { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texte-clair); padding: 2px 2px 0; }
.hw-config .phases .phase { padding: 6px 12px; border: 1px solid var(--ligne); background: var(--fond); border-radius: var(--r); font-family: var(--font); font-size: 13.5px; color: var(--ardoise); cursor: pointer; }
.hw-config .phases .phase.on { border-color: var(--bleu); background: var(--bleu-pale); }

/* ---------- Carte de localisation ---------- */
.hw-config .carte-geo { position: relative; border: 1px solid var(--ligne); overflow: hidden; }
.hw-config .carte-geo svg { display: block; width: 100%; height: auto; }
.hw-config .btn-geo {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--fond); border: 1px solid var(--texte); border-radius: var(--r);
  padding: 8px 13px; font-family: var(--font); font-size: 13.5px; color: var(--ardoise);
  cursor: pointer; display: flex; align-items: center; gap: 7px; box-shadow: 0 2px 6px rgba(53,72,85,.18);
}
.hw-config .btn-geo:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.hw-config .btn-geo .cible { width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 50%; position: relative; flex: none; }
.hw-config .btn-geo .cible::after { content: ""; position: absolute; inset: 3px; background: currentColor; border-radius: 50%; }
.hw-config .carte-legende { font-size: 12.5px; color: var(--texte-clair); margin-top: 8px; }

/* ---------- Rose des vents ---------- */
.hw-config .rose { display: grid; place-items: center; gap: 12px; }
.hw-config .rose svg { max-width: 240px; width: 100%; height: auto; }
.hw-config .rose .lecture { text-align: center; }
.hw-config .rose .lecture strong { display: block; font-size: 20px; color: var(--ardoise); }
.hw-config .rose .lecture span { font-size: 13px; color: var(--texte-clair); }
.hw-config .orient-btn { cursor: pointer; }
.hw-config .orient-btn circle { transition: r .15s, fill .15s; }

/* ---------- Sélecteur de dimensions ---------- */
.hw-config .dims { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.hw-config .dims .x { padding-bottom: 10px; color: var(--texte-clair); font-size: 18px; }
.hw-config .pas { display: flex; border: 1px solid var(--ligne); }
.hw-config .pas button { border: none; background: var(--fond); width: 34px; font-size: 19px; cursor: pointer; color: var(--ardoise); font-family: var(--font); }
.hw-config .pas button:hover { background: var(--bleu-pale); color: var(--bleu-fonce); }
.hw-config .pas .v { flex: 1; text-align: center; padding: 8px 4px; font-weight: 700; color: var(--ardoise); font-variant-numeric: tabular-nums; border-left: 1px solid var(--ligne); border-right: 1px solid var(--ligne); }
.hw-config .pas .v small { display: block; font-size: 10.5px; font-weight: 400; color: var(--texte-clair); text-transform: uppercase; letter-spacing: .06em; }

.hw-config .orient-pv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.hw-config .equiv { background: var(--fond-doux); border-left: 3px solid var(--gris-reseau); padding: 11px 14px; font-size: 13px; margin-top: 10px; }
.hw-config .equiv strong { color: var(--ardoise); }

/* ---------- Visuel isométrique ---------- */
.hw-config .visuel { background: linear-gradient(#F7FAFB, #EDF2F5); border: 1px solid var(--ligne); padding: 8px; }
.hw-config .visuel svg { display: block; width: 100%; height: auto; }
.hw-config .visuel-legende { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--texte-clair); padding: 6px 4px 2px; flex-wrap: wrap; gap: 8px; }
.hw-config .visuel-legende strong { color: var(--ardoise); font-variant-numeric: tabular-nums; }

.hw-config .vignettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hw-config .vignette { border: 1px solid var(--ligne); padding: 0; cursor: pointer; background: var(--fond); border-radius: var(--r); overflow: hidden; font-family: var(--font); }
.hw-config .vignette .echantillon { height: 42px; display: block; }
.hw-config .vignette .nom { display: block; font-size: 11.5px; padding: 6px 4px; color: var(--texte); text-align: center; }
.hw-config .vignette.choisie { border-color: var(--bleu); box-shadow: inset 0 0 0 1px var(--bleu); }
.hw-config .vignette.choisie .nom { color: var(--ardoise); font-weight: 700; }

/* ---------- Panneau d'information ---------- */
.hw-config .info { background: var(--bleu-pale); border-left: 3px solid var(--bleu); padding: 18px 20px; border-radius: var(--r); }
.hw-config .info .titre { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--bleu-fonce); font-weight: 700; margin-bottom: 10px; }
.hw-config .info .gros { font-size: 33px; font-weight: 700; color: var(--ardoise); line-height: 1.05; font-variant-numeric: tabular-nums; }
.hw-config .info .gros small { font-size: 15px; font-weight: 400; color: var(--texte); }
.hw-config .info p { margin: 10px 0 0; font-size: 14px; }
.hw-config .info .repere { margin-top: 14px; padding-top: 12px; border-top: 1px solid #BFE3F5; font-size: 13px; color: var(--texte); }
.hw-config .info strong { color: var(--ardoise); }
.hw-config .jauge { height: 7px; background: #CDE8F6; margin: 12px 0 6px; border-radius: var(--r); overflow: hidden; }
.hw-config .jauge span { display: block; height: 100%; background: var(--bleu); transition: width .5s ease-out; }

/* ---------- Syllogisme ---------- */
.hw-config .syllo { display: grid; gap: 0; margin: 14px 0 0; border-top: 1px solid #BFE3F5; padding-top: 12px; }
.hw-config .syllo div { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13.5px; }
.hw-config .syllo .num { font-weight: 700; color: var(--bleu-fonce); font-size: 12px; min-width: 16px; }
.hw-config .syllo .donc { border-top: 1px dashed #9FD3EC; margin-top: 4px; padding-top: 9px; font-weight: 700; color: var(--ardoise); }

.hw-config .pied { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ligne); }
.hw-config .btn { background: var(--rouge); border: 1px solid var(--rouge); color: #fff; padding: 9px 22px; font-size: 16px; font-family: var(--font); border-radius: var(--r); cursor: pointer; transition: background .15s; }
.hw-config .btn:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.hw-config .btn.fantome { background: transparent; border-color: var(--ligne); color: var(--texte); }
.hw-config .btn.fantome:hover { border-color: var(--texte); background: var(--fond-doux); }
.hw-config .btn.bleu { background: var(--bleu); border-color: var(--bleu); }
.hw-config .btn.bleu:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.hw-config .pied .note { margin-left: auto; font-size: 12.5px; color: var(--texte-clair); }

/* ---------- Résultat ---------- */
.hw-config .chiffres-cles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); margin: 20px 0; }
.hw-config .cle { background: var(--fond); padding: 16px 14px; }
.hw-config .cle .v { font-size: 26px; font-weight: 700; color: var(--ardoise); font-variant-numeric: tabular-nums; line-height: 1.1; }
.hw-config .cle .v small { font-size: 14px; font-weight: 400; }
.hw-config .cle .l { font-size: 12px; color: var(--texte-clair); margin-top: 4px; line-height: 1.35; }

.hw-config .flux svg { width: 100%; height: auto; }
.hw-config .legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; margin-top: 6px; }
.hw-config .legende i { width: 11px; height: 11px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

.hw-config .levier { border: 1px solid var(--vert); background: #F3FAEC; padding: 16px 18px; border-radius: var(--r); margin: 20px 0; }
.hw-config .levier .t { font-weight: 700; color: var(--vert-fonce); font-size: 15px; margin-bottom: 4px; }
.hw-config .levier p { margin: 0; font-size: 14px; }
.hw-config .levier .gain { color: var(--vert-fonce); font-weight: 700; }

.hw-config .budget { border: 1px solid var(--ligne); padding: 18px 20px; border-radius: var(--r); background: var(--fond-doux); }
.hw-config .budget .etiq { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texte-clair); font-weight: 500; margin-bottom: 6px; }
.hw-config .budget .montant { font-size: 25px; font-weight: 700; color: var(--ardoise); font-variant-numeric: tabular-nums; }
.hw-config .budget .mention { font-size: 12.5px; color: var(--texte-clair); margin-top: 6px; }
.hw-config .budget .comparatif { display: flex; gap: 14px; margin-top: 4px; }
.hw-config .budget .carport { flex: 1 1 0; border: 1px solid var(--ligne); background: #fff; border-radius: var(--r); padding: 12px 14px; }
.hw-config .budget .carport.solaire { border-color: var(--bleu); }
.hw-config .budget .carport .nom { font-size: 12.5px; color: var(--texte-clair); margin-bottom: 4px; }
.hw-config .budget .carport .sous { font-size: 12.5px; color: var(--texte-clair); margin-top: 4px; }
.hw-config .budget .phrase { font-size: 14.5px; color: var(--ardoise); margin-top: 12px; line-height: 1.45; }
.hw-config .budget .carport .vue3d { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #fff; border-radius: calc(var(--r) - 2px); margin-bottom: 10px; }
.hw-config .budget .montant small { font-size: 13px; font-weight: 500; color: var(--texte-clair); }
@media (max-width: 560px) { .hw-config .budget .comparatif { flex-direction: column; } }

.hw-config .mentions { font-size: 12px; color: var(--texte-clair); border-top: 1px solid var(--ligne); margin-top: 24px; padding-top: 14px; }
.hw-config .mentions li { margin-bottom: 5px; }

/* ---------- Mail ---------- */
.hw-config .mail { border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; background: var(--fond); }
.hw-config .mail .entete-mail { background: var(--fond-doux); border-bottom: 1px solid var(--ligne); padding: 12px 18px; font-size: 13px; }
.hw-config .mail .entete-mail .obj { color: var(--ardoise); font-weight: 700; font-size: 14.5px; margin-top: 4px; }
.hw-config .mail .corps { padding: 22px 24px; font-size: 14.5px; }
.hw-config .mail .bloc-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); margin: 16px 0; }
.hw-config .mail .bloc-chiffres div { background: var(--fond); padding: 12px 14px; }
.hw-config .mail .bloc-chiffres b { display: block; font-size: 19px; color: var(--ardoise); font-variant-numeric: tabular-nums; }
.hw-config .mail .bloc-chiffres span { font-size: 12px; color: var(--texte-clair); }
.hw-config .mail .pj { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ligne); padding: 10px 14px; margin: 16px 0; font-size: 13.5px; }
.hw-config .mail .pj .ic { width: 26px; height: 32px; background: var(--rouge); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; flex: none; }
.hw-config .mail .signature { border-top: 1px solid var(--ligne); margin-top: 18px; padding-top: 14px; font-size: 13px; color: var(--texte-clair); }

/* ---------- Contrôle de revue ---------- */
.hw-config .bascule-prix button.on { background: var(--ardoise); color: #fff; }

/* ---------- Notes ---------- */
/* ---------- Adaptations mobiles — en FIN de feuille : à spécificité égale,
     c'est la dernière règle qui gagne. ---------- */
@media (max-width: 900px) {
  .hw-config .colonnes { grid-template-columns: 1fr; gap: 24px; }
  .hw-config .ecran { padding: 26px 20px 32px; }
  .hw-config .vignettes { grid-template-columns: repeat(2, 1fr); }
  .hw-config .cartes.trois { grid-template-columns: 1fr; }
  .hw-config .chiffres-cles { grid-template-columns: 1fr 1fr; }
  .hw-config .pied { flex-wrap: wrap; }
  .hw-config .pied .note { margin-left: 0; width: 100%; }
  .hw-config .bandeau { padding: 12px 20px; }
  .hw-config .compteurs { margin-left: 0; gap: 18px; }
}
@media (max-width: 560px) {
  .hw-config .cartes.deux { grid-template-columns: 1fr; }
  .hw-config .orient-pv { grid-template-columns: 1fr; }
  .hw-config .question { font-size: 21px; }
}

/* ---------- Atelier d'optimisation ---------- */
.hw-config .score-bloc { background: var(--ardoise); color: #fff; padding: 20px 24px; border-radius: var(--r); }
.hw-config .score-tete { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.hw-config .score-val { font-size: 46px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hw-config .score-palier { margin-left: auto; text-align: right; }
.hw-config .score-palier .nom { font-size: 17px; font-weight: 700; color: var(--vert); }
.hw-config .score-palier .lib { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #A7B8C4; }
.hw-config .score-barre { height: 10px; background: #223540; margin: 16px 0 6px; overflow: hidden; }
.hw-config .score-barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--bleu), var(--vert)); transition: width .7s cubic-bezier(.22,.9,.3,1); }
.hw-config .score-jalons { display: flex; justify-content: space-between; font-size: 10.5px; color: #8DA0AD; letter-spacing: .04em; }
.hw-config .score-gain { font-size: 15px; color: #D5E2EA; margin-top: 12px; }
.hw-config .score-gain strong { color: var(--vert); font-size: 19px; font-variant-numeric: tabular-nums; }

.hw-config .leviers { display: grid; gap: 10px; }
.hw-config .levier-c {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 13px; align-items: start;
  border: 1px solid var(--ligne); background: var(--fond); padding: 14px 16px;
  border-radius: var(--r); cursor: pointer; font-family: var(--font); text-align: left; width: 100%;
  transition: border-color .15s, background .15s;
}
.hw-config .levier-c:hover { border-color: var(--bleu); }
.hw-config .levier-c.pris { border-color: var(--vert); background: #F5FBEF; }
.hw-config .levier-c .coche { width: 22px; height: 22px; border: 1px solid var(--texte); display: grid; place-items: center; font-size: 13px; color: #fff; margin-top: 2px; }
.hw-config .levier-c.pris .coche { background: var(--vert); border-color: var(--vert); }
.hw-config .levier-c .titre-l { font-weight: 700; color: var(--ardoise); font-size: 14.5px; }
.hw-config .levier-c .desc-l { font-size: 13px; color: var(--texte-clair); margin-top: 3px; }
.hw-config .levier-c .gain-l { text-align: right; white-space: nowrap; }
.hw-config .levier-c .gain-l b { display: block; color: var(--vert-fonce); font-size: 17px; font-variant-numeric: tabular-nums; }
.hw-config .levier-c .gain-l span { font-size: 11px; color: var(--texte-clair); text-transform: uppercase; letter-spacing: .06em; }
.hw-config .levier-c.investir .gain-l b { color: var(--bleu-fonce); }
.hw-config .etiq-cout { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; padding: 1px 6px; margin-left: 7px; vertical-align: 1px; }
.hw-config .etiq-cout.gratuit { background: #EEF7E6; color: var(--vert-fonce); }
.hw-config .etiq-cout.invest { background: var(--bleu-pale); color: var(--bleu-fonce); }

.hw-config .bravo { border: 1px solid var(--vert); background: #F3FAEC; padding: 14px 18px; border-radius: var(--r); margin-top: 14px; font-size: 14px; display: none; }
.hw-config .bravo.visible { display: block; animation: entree .35s ease-out; }
.hw-config .bravo strong { color: var(--vert-fonce); }

.hw-config .journal { margin-top: 16px; border-top: 1px solid var(--ligne); padding-top: 14px; }
.hw-config .journal .t { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-clair); font-weight: 700; margin-bottom: 8px; }
.hw-config .journal ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.hw-config .journal li { margin-bottom: 4px; }
.hw-config .journal .vide { font-size: 13.5px; color: var(--texte-clair); font-style: italic; }

/* ---------- Vitrine réseau (heolian.fr uniquement) ----------
   Volontairement en bas de parcours et sur fond ardoise : elle s'adresse aux
   professionnels sans jamais parasiter le parcours du particulier. */
/* Placee DANS le dernier ecran, elle deborde volontairement de son padding pour
   retrouver la pleine largeur du cadre — un bandeau, pas un encart. */
.hw-config .hw-vitrine {
  background: var(--ardoise); color: #fff; padding: 30px 40px;
  margin: 34px -40px -40px; border-radius: var(--r);
}
.hw-config .hw-vitrine-inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.hw-config .hw-vitrine-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--bleu); font-weight: 700; margin-bottom: 8px;
}
.hw-config .hw-vitrine h3 { color: #fff; font-size: 22px; margin-bottom: 8px; }
.hw-config .hw-vitrine p { margin: 0; font-size: 14.5px; color: #C3D1DA; max-width: 62ch; }
.hw-config .hw-vitrine-liste {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; padding: 0; list-style: none;
  font-size: 13.5px; color: #D5E2EA;
}
.hw-config .hw-vitrine-liste li::before { content: "✓"; color: var(--vert); font-weight: 700; margin-right: 7px; }
.hw-config .hw-vitrine-action { display: grid; gap: 10px; justify-items: center; }
.hw-config .hw-vitrine-note { font-size: 12px; color: #8DA0AD; text-align: center; max-width: 20ch; }
.hw-config .hw-vitrine .btn { text-decoration: none; display: inline-block; }

@media (max-width: 900px) {
  .hw-config .hw-vitrine { padding: 24px 20px; margin: 26px -20px -32px; }
  .hw-config .hw-vitrine-inner { grid-template-columns: 1fr; gap: 20px; }
  .hw-config .hw-vitrine-action { justify-items: start; }
  .hw-config .hw-vitrine-note { text-align: left; max-width: none; }
}

/* ---------- Carte et recherche d'adresse ---------- */
.hw-config .hw-carte { height: 340px; width: 100%; background: var(--fond-doux); z-index: 1; }
.hw-config .leaflet-container { font-family: var(--font); }
.hw-config .leaflet-control-attribution { font-size: 10px; }
.hw-config .leaflet-control-layers-toggle { width: 32px; height: 32px; }

/* Le bouton flotte au-dessus de la carte : Leaflet monte ses propres couches a 400,
   il faut passer devant sans masquer les commandes de zoom. */
.hw-config .carte-geo { position: relative; }
.hw-config .carte-geo .btn-geo { z-index: 500; }

.hw-config .hw-recherche { position: relative; }
.hw-config .hw-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 600;
  margin: 2px 0 0; padding: 0; list-style: none;
  background: var(--fond); border: 1px solid var(--texte); border-top: 0;
  max-height: 260px; overflow-y: auto;
  box-shadow: 0 6px 18px rgba(53,72,85,.15);
}
.hw-config .hw-suggestions li {
  padding: 9px 12px; cursor: pointer; font-size: 14.5px;
  border-bottom: 1px solid var(--ligne); color: var(--ardoise);
}
.hw-config .hw-suggestions li:last-child { border-bottom: 0; }
.hw-config .hw-suggestions li:hover, .hw-config .hw-suggestions li[aria-selected="true"] { background: var(--bleu-pale); }
.hw-config .hw-suggestions li small { display: block; color: var(--texte-clair); font-size: 12px; margin-top: 1px; }

.hw-config .hw-adresse-choisie { font-size: 13.5px; color: var(--texte); margin-top: 8px; min-height: 20px; }
.hw-config .hw-adresse-choisie strong { color: var(--ardoise); }
.hw-config .hw-adresse-choisie .coord { color: var(--texte-clair); font-size: 12px; font-variant-numeric: tabular-nums; }

.hw-config .hw-chargement { display: inline-block; font-size: 13px; color: var(--bleu-fonce); }
.hw-config .hw-chargement::after {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 7px;
  border: 2px solid var(--bleu); border-right-color: transparent; border-radius: 50%;
  animation: hw-tourne .7s linear infinite; vertical-align: -1px;
}
@keyframes hw-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hw-config .hw-chargement::after { animation: none; } }

/* ---------- Contrôle « Me localiser » ----------
   Dessiné comme les autres commandes Leaflet, pour qu'il en fasse visuellement partie
   plutôt que d'avoir l'air posé dessus. */
.hw-config .hw-ctrl-geo a {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: var(--fond); color: var(--ardoise);
}
.hw-config .hw-ctrl-geo a:hover { background: var(--bleu-pale); color: var(--bleu-fonce); }
.hw-config .hw-cible {
  width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%;
  position: relative; display: block;
}
.hw-config .hw-cible::after {
  content: ""; position: absolute; inset: 3px; background: currentColor; border-radius: 50%;
}
.hw-config .hw-ctrl-geo a.hw-cherche .hw-cible {
  border-right-color: transparent; animation: hw-tourne .7s linear infinite;
}
.hw-config .hw-ctrl-geo a.hw-cherche .hw-cible::after { display: none; }

/* ---------- Attribution ----------
   Leaflet 1.9 insère un drapeau en SVG dans son préfixe. Il est retiré côté JS, mais on
   borne aussi les images ici : le thème hôte ne contraint pas les SVG, et un futur
   changement de version ne doit pas pouvoir réoccuper le quart de la carte. */
.hw-config .leaflet-control-attribution {
  font-size: 10px; line-height: 1.4;
  background: rgba(255,255,255,.82);
  padding: 1px 6px; max-width: 70%;
}
.hw-config .leaflet-control-attribution svg, .hw-config .leaflet-control-attribution img {
  width: auto !important; height: 8px !important;
  max-width: 12px !important; vertical-align: baseline;
}
.hw-config .leaflet-control-attribution a { color: var(--texte); }

/* ---------- Repere de la carte ----------
   Dessine en SVG : le site utilise FooBox et Meow Lightbox, qui ouvrent en galerie
   toute balise <img> de la page — y compris le marqueur par defaut de Leaflet. */
.hw-config .hw-marqueur { background: none; border: 0; cursor: grab; }
.hw-config .hw-marqueur:active { cursor: grabbing; }
.hw-config .hw-marqueur svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* ---------- Adresse issue de la carte ----------
   Grisee et en italique : le visiteur voit d'un coup d'oeil que cette adresse vient du
   repere qu'il a pose, et non de ce qu'il a tape. Elle redevient normale des qu'il
   modifie le champ. */
.hw-config input#adresse.hw-depuis-carte {
  color: var(--texte-clair);
  font-style: italic;
  background: var(--fond-doux);
}

.hw-config .hw-alerte { color: var(--rouge-fonce); font-weight: 700; }

/* Icone du controle de localisation */
.hw-config .hw-icone-geo { display: block; }

/* ================= ÉCRAN 9 : le formulaire de contact =================
   Tout est scopé sous .hw-config : on est sur un site de production qu'on n'a pas écrit,
   aucun style ne doit fuir. Les champs reprennent l'apparence des champs existants du
   parcours plutôt que celle de Gravity Forms : le visiteur ne change pas d'outil en
   arrivant sur cet écran, il finit celui qu'il a commencé. */

.hw-config .hw-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hw-config .hw-duo label.champ { margin-top: 18px; }

.hw-config input[type=email], .hw-config input[type=tel], .hw-config textarea {
  width: 100%;
  padding: 9px 10px;
  font-family: var(--font);
  font-size: 16px;
  border: 1px solid var(--texte);
  border-radius: var(--r);
  background: var(--fond);
  color: var(--ardoise);
}

.hw-config textarea { resize: vertical; min-height: 44px; }

/* Un champ refusé par le serveur se signale par la couleur ET par un liseré épais :
   la couleur seule ne se voit pas quand on ne distingue pas le rouge. */
.hw-config .hw-champ-fautif {
  border-color: var(--rouge);
  box-shadow: inset 0 0 0 1px var(--rouge);
}

/* ---------- Pot de miel ----------
   Masqué en CSS et non par l'attribut `hidden` : certains robots ignorent les champs
   cachés par attribut, aucun ne lit une feuille de style. Il reste hors du flux et hors
   du parcours au clavier (tabindex="-1" sur le champ). */
.hw-config .hw-pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Consentement ----------
   Case à cocher native, jamais pré-cochée, et cliquable sur toute la ligne. */
.hw-config .hw-consentement {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: var(--fond);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.hw-config .hw-consentement input { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: var(--bleu); }
.hw-config .hw-consentement:hover { border-color: var(--bleu); }
.hw-config .hw-consentement.hw-champ-fautif, .hw-config .hw-consentement:has(.hw-champ-fautif) { border-color: var(--rouge); }

.hw-config .hw-mention-rgpd {
  font-size: 12.5px;
  color: var(--texte-clair);
  margin: 8px 2px 0;
  line-height: 1.45;
}

/* ---------- Message d'erreur ----------
   Au-dessus du bouton, pas en bas de page : le visiteur doit le voir sans chercher. */
.hw-config .hw-erreur {
  margin-top: 16px;
  padding: 11px 14px;
  border-left: 3px solid var(--rouge);
  background: #FDF1F0;
  color: var(--rouge-fonce);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- Confirmation ---------- */
.hw-config .hw-succes {
  padding: 22px 24px;
  border: 1px solid var(--vert, #7BC143);
  border-left: 3px solid var(--vert, #7BC143);
  background: #F3FAEC;
  border-radius: var(--r);
}

.hw-config .hw-succes h3 { margin: 0 0 8px; font-size: 19px; color: var(--ardoise); }
.hw-config .hw-succes p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; }
.hw-config .hw-succes-suite { color: var(--texte-clair); font-size: 13px; }

@media (max-width: 640px) {
  .hw-config .hw-duo { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Titre accessible ----------
   Le titre de la page fait doublon avec le bandeau du simulateur : il est masqué au niveau
   de la page (réglage natif du thème). Le simulateur pose alors son propre <h1>, invisible
   à l'œil mais lu par les lecteurs d'écran et les moteurs de recherche.

   ⚠️ Ni `display:none` ni `visibility:hidden` : les deux retirent l'élément de l'arbre
   d'accessibilité, ce qui reviendrait à n'avoir aucun titre du tout. La technique retenue
   est celle recommandée par le W3C — sortir le texte du rendu sans le sortir du document. */
.hw-config .hw-titre-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Barre d'étapes sur petit écran ----------
   🔴 Corrigé le 28/08/2026, après un test sur téléphone.

   Neuf étapes en `flex: 1` sur une largeur de 355 px, cela fait 39 px chacune : tous les
   libellés tombaient à une lettre suivie de points de suspension — « O… V… V… S… E… ».
   Illisible, et pas cliquable non plus : 39 px est sous la cible tactile minimale.

   La barre devient donc une bande qui défile horizontalement, chaque onglet reprenant sa
   largeur naturelle. On garde ainsi les deux choses que la troncature détruisait : les
   libellés lisibles, et la navigation directe vers une étape déjà faite. L'étape courante
   est ramenée au centre à chaque changement (voir montrerEtapeActive dans le JS).

   `scroll-margin-top` : la page hôte porte un en-tête ; sans cette marge, le défilement de
   retour en haut glisserait le haut de l'outil dessous. */
.hw-config { scroll-margin-top: 12px; }

@media (max-width: 900px) {
  .hw-config .progression {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hw-config .progression::-webkit-scrollbar { display: none; }

  .hw-config .etape-pt {
    flex: 0 0 auto;
    padding: 12px 16px;
    font-size: 12.5px;
    scroll-snap-align: center;
    text-overflow: clip;
  }

  /* Les boutons du parcours passent la cible tactile de 44 px. « Continuer » n'en faisait
     que 39 : c'est l'action principale de chaque écran, celle qu'on presse neuf fois, et
     souvent d'un pouce. Un bouton trop court se rate, et un visiteur qui rate son bouton
     croit que l'outil ne répond pas. */
  .hw-config .btn, .hw-config .btn.fantome {
    padding: 12px 22px;
    min-height: 44px;
  }

  /* Sur un écran étroit, les deux boutons de pied de page s'empilent plutôt que de se
     serrer : « Retour » à côté de « Continuer » sur 355 px donne deux cibles étriquées. */
  .hw-config .pied .btn { flex: 1 1 auto; }
}

/* ---------- Débordement horizontal sur petit écran ----------
   🔴 Corrigé le 28/08/2026, signalé sur l'écran 3 : « tout est trop large ».

   La cause tient en une ligne de spécification CSS : un enfant de grille a
   `min-width: auto`, donc il REFUSE de descendre sous la largeur minimale de son
   contenu. Le sélecteur de dimensions (« − 4 en largeur + × − 3 en profondeur + »)
   exige 313 px ; sur un téléphone la colonne en fait 250. Elle s'élargissait donc à
   313 px, entraînant avec elle TOUT le contenu de l'écran — cartes comprises — et
   l'`overflow: hidden` du cadre coupait le tout au bord.

   D'où le symptôme trompeur : un seul élément était en cause, mais l'écran entier
   paraissait déborder. `min-width: 0` rend aux colonnes le droit de rétrécir.

   ⚠️ Ce commentaire a lui-même été mutilé par tools/scoper-css.py, qui prenait le texte
   d'un commentaire contenant des accolades pour une liste de sélecteurs. Réparé le
   31/08/2026, en même temps que le script. */
.hw-config .colonnes > * { min-width: 0; }
.hw-config .cartes > *, .hw-config .dims > *, .hw-config .chiffres-cles > * { min-width: 0; }

/* En dessous de cette largeur, les deux sélecteurs ne tiennent plus côte à côte : ils
   s'empilent, chacun sur toute la largeur, plutôt que de se serrer jusqu'à l'illisible. Le
   « × » reste entre les deux — c'est lui qui dit « 4 panneaux sur 3 ». */
@media (max-width: 480px) {
  .hw-config .dims { grid-template-columns: 1fr; gap: 6px; }
  .hw-config .dims .x { padding: 2px 0; text-align: center; }
}


/* ---------- 🆕 Bandeau de reassurance (emprunt n°3) ----------
   Visible sur les neuf ecrans, en pied de simulateur. Registre volontairement sobre :
   ce sont des faits verifiables, pas des arguments. */
.hw-config .hw-reassurance {
  border-top: 1px solid var(--ligne);
  background: var(--fond-doux);
  padding: 20px 28px;
}
.hw-config .hw-reassurance-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px 24px;
}
.hw-config .hw-reassurance-liste li { margin: 0; }
.hw-config .hw-reassurance-liste strong {
  display: block;
  color: var(--ardoise);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}
.hw-config .hw-reassurance-liste strong a { color: inherit; text-decoration: none; }
.hw-config .hw-reassurance-liste strong a:hover { color: var(--bleu-fonce); }
.hw-config .hw-reassurance-liste span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--texte-clair);
  line-height: 1.4;
}

/* Temoignages : rien ne s'affiche tant que Julien n'en a pas fourni de vrais. */
.hw-config .hw-temoignages {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ligne);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 24px;
}
.hw-config .hw-temoignages blockquote {
  margin: 0;
  font-size: 13.5px;
  color: var(--texte);
  line-height: 1.5;
}
.hw-config .hw-temoignages cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 12px;
  color: var(--texte-clair);
}

@media (max-width: 640px) {
  .hw-config .hw-reassurance { padding: 16px 20px; }
  .hw-config .hw-entete-etat { padding-left: 20px; padding-right: 20px; }
}


/* ---------- 🆕 L acces au sur-mesure ----------
   Remontee du terrain le 01/09/2026 : le bouton n etait pas assez visible. Il partageait
   l apparence des cartes neutres alors qu il porte l argument qui nous separe des kits en
   paliers fixes — la fabrication a la cote du chantier.

   Le traitement reste sobre : un filet d accent a gauche, un fond legerement teinte, une
   etiquette qui nomme la capacite. On veut qu il se voie, pas qu il crie : c est une porte
   de sortie utile, pas l action principale de l ecran. */
.hw-config .hw-sur-mesure {
  position: relative;
  width: 100%;
  margin-top: 18px;
  padding-left: 18px;
  border-color: var(--bleu);
  background: var(--bleu-pale);
  box-shadow: 0 1px 3px rgba(53, 72, 85, .08);
}
.hw-config .hw-sur-mesure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--rouge);
}
/* La case : le visiteur doit voir que son choix est ENREGISTRE, pas qu il a
   simplement deplie un texte. C est ce qui le rassure sur la prise en compte. */
.hw-config .hw-sur-mesure .case {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid var(--bleu-fonce);
  background: var(--fond);
  border-radius: var(--r);
}
.hw-config .hw-sur-mesure.choisie .case {
  background: var(--rouge);
  border-color: var(--rouge);
  position: relative;
}
.hw-config .hw-sur-mesure.choisie .case::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.hw-config .hw-sur-mesure.choisie {
  border-color: var(--rouge);
  background: #FFF3F2;
}

.hw-config .hw-sur-mesure:hover {
  background: #DCF0FA;
  border-color: var(--bleu-fonce);
}

/* L etiquette nomme la CAPACITE avant que le libelle ne nomme le probleme. */
.hw-config .hw-sur-mesure-etiquette {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 8px;
  background: var(--rouge);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: var(--r);
}

/* Un chevron : sans lui, rien ne dit que le bloc s ouvre. */
.hw-config .hw-sur-mesure .hw-chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--bleu-fonce);
  border-bottom: 2px solid var(--bleu-fonce);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.hw-config .hw-sur-mesure[aria-expanded="true"] .hw-chevron {
  transform: rotate(-135deg);
  margin-top: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .hw-config .hw-sur-mesure .hw-chevron { transition: none; }
}