/* ============================================================
   CalculSubvention. Feuille de style
   Base : tokens-visual.css (systeme Visual). Mobile d'abord.
   « Warm editorial zine. Cream paper. »

   Regles fermes :
     fond velin, jamais de blanc pur en fond
     serif pour les titres, mono pour les etiquettes,
     sans pour tout ce qui se LIT
     rayon 3px sur les controles, 8px sur les cartes
     aucune ombre, aucun degrade
     le surligneur trois fois maximum, jamais en couleur de texte
   ============================================================ */

/* Une valeur ajoutee pour l'accessibilite.
   --cendre (#d0d0c8) ne fait que 1,4:1 sur velin : il tient le role de
   filet decoratif, mais pas celui de bordure de controle, qui exige 3:1.
   Tout ce qui se clique prend --olive, mesure a 6,5:1. */
:root {
  --trait-controle: var(--olive);
  --trait-fin:      var(--cendre);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--velin);
  color: var(--encre);
  font-family: var(--sans);
  font-weight: var(--poids-normal);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  letter-spacing: var(--ls-corps);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

/* Les titres sont en serif. C'est la signature du systeme : des traits
   fins a grande echelle donnent de l'autorite par la retenue. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: var(--poids-titre);
  letter-spacing: var(--ls-titres);
  margin: 0;
}

p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

/* Bloc mono reutilisable : etiquettes, cotes, metadonnees. Jamais du
   texte a lire au long. */
.mono,
.marque__note,
.hero__label,
.prog__txt,
.est__label,
.merci__label,
.champ__label,
.pied__bas,
.hero__points li {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.enveloppe {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding-left: var(--e-24);
  padding-right: var(--e-24);
  width: 100%;
}

/* ---------- en-tete ---------- */
.entete {
  border-bottom: 1px solid var(--trait-fin);
  padding: var(--e-16) 0;
}
.entete .enveloppe {
  display: flex;
  align-items: baseline;
  gap: var(--e-12);
}
.marque {
  font-family: var(--serif);
  font-weight: var(--poids-titre);
  font-size: var(--t-titre-sm);
  line-height: 1;
  letter-spacing: var(--ls-titres);
  color: var(--encre);
}
.marque__note { color: var(--olive); }

/* ---------- grille principale ---------- */
.grille {
  display: block;
  padding-top: var(--e-32);
  padding-bottom: var(--e-64);
}

/* ---------- 1. hero ---------- */
.hero { margin-bottom: var(--e-32); }

/* USAGE 1 SUR 3 DU SURLIGNEUR : le bloc de 22 x 7 devant le surtitre. */
.hero__label {
  display: flex;
  align-items: center;
  gap: var(--e-8);
  color: var(--olive);
  margin-bottom: var(--e-24);
}
.hero__puce {
  flex: 0 0 auto;
  width: 22px;
  height: 7px;
  background: var(--surligneur);
  border-radius: 1px;
}

.hero__titre {
  font-size: clamp(30px, 5.4vw, 58px);
  line-height: 1.04;
  letter-spacing: var(--ls-titres);
  margin-bottom: var(--e-32);
  max-width: 18ch;
}

/* La ligne de positionnement. Elle doit se lire, pas se cacher. */
.hero__mention {
  font-size: var(--t-petit);
  line-height: var(--lh-petit);
  letter-spacing: var(--ls-petit);
  color: var(--lichen);
  margin-bottom: var(--e-24);
}

.hero__sous {
  font-size: var(--t-sous);
  line-height: var(--lh-sous);
  letter-spacing: var(--ls-sous);
  color: var(--lichen);
  max-width: 44ch;
}

.hero__points {
  margin-top: var(--e-32);
  display: flex;
  flex-direction: column;
  gap: var(--e-12);
}
.hero__points li {
  color: var(--olive);
  padding-left: var(--e-24);
  position: relative;
}
.hero__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 1px;
  background: var(--olive);
}

/* ---------- carte outil ---------- */
/* Le blanc est reserve aux cartes qui se posent sur le velin. */
.carte {
  border: 1px solid var(--trait-fin);
  border-radius: var(--r-cartes);
  padding: var(--pad-carte);
  background: var(--papier);
}

.ecran[hidden] { display: none; }

/* ---------- 2. progression + questions ---------- */
.prog { margin-bottom: var(--e-32); }

.prog__txt {
  color: var(--olive);
  margin-bottom: var(--e-12);
}

.prog__piste {
  height: 6px;
  background: var(--os);
  border-radius: 1px;
  overflow: hidden;
}
/* La jauge n'est plus jaune : le surligneur est reserve a trois endroits,
   le bloc du surtitre, le trait du hero et celui de l'estimation finale. */
.prog__jauge {
  height: 100%;
  width: 33.333%;
  background: var(--carbone);
  transition: width var(--duree-moyenne) var(--courbe);
}

.q__titre {
  font-size: var(--t-titre-sm);
  line-height: var(--lh-titre-sm);
  letter-spacing: var(--ls-titre-sm);
  margin-bottom: var(--e-24);
  max-width: 22ch;
}

.choix {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
}

.choix__b {
  display: block;
  width: 100%;
  min-height: 60px;
  text-align: left;
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  letter-spacing: var(--ls-corps);
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-controle);
  border-radius: var(--r-boutons);
  padding: var(--e-16);
  cursor: pointer;
  transition: background var(--duree-rapide) var(--courbe),
              border-color var(--duree-rapide) var(--courbe),
              color var(--duree-rapide) var(--courbe);
  -webkit-tap-highlight-color: transparent;
}
.choix__b:hover { background: var(--os); border-color: var(--encre); }
.choix__b.on {
  background: var(--carbone);
  border-color: var(--carbone);
  color: var(--velin);
}

.retour {
  margin-top: var(--e-24);
  padding: var(--e-8) 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: var(--t-petit);
  line-height: var(--lh-petit);
  color: var(--lichen);
  cursor: pointer;
  text-align: left;
}
.retour:hover { color: var(--encre); }
.retour[hidden] { display: none; }

/* ---------- 3. estimation ---------- */
.est__label,
.merci__label {
  color: var(--olive);
  margin-bottom: var(--e-16);
}

/* La carte fait 376px utiles. Une fourchette a 64px en mesure 425 et se
   replie, ce qui casse le surligneur : il ne souligne plus que la
   deuxieme ligne. On cale la taille sur la largeur reellement disponible. */
.est__montant {
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.0;
  letter-spacing: var(--ls-titres);
  font-weight: var(--poids-titre);
  margin-bottom: var(--e-24);
}

/* USAGE 3 SUR 3 DU SURLIGNEUR, et le plus important.
   Un trait de 6px sous les chiffres, legerement plus large qu'eux et
   remonte sur la ligne de base : la marque d'un surligneur passe a la
   main sur une feuille. C'est le moment que le visiteur est venu voir. */
.est__chiffres {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.est__chiffres::after {
  content: "";
  display: block;
  height: 6px;
  width: calc(100% + 12px);
  margin-left: -6px;
  margin-top: -0.16em;
  background: var(--surligneur);
  border-radius: 1px;
}

.est__titre {
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  letter-spacing: var(--ls-corps);
  font-weight: var(--poids-normal);
  color: var(--encre);
  margin-bottom: var(--e-12);
}

.est__note {
  font-size: var(--t-petit);
  line-height: var(--lh-petit);
  letter-spacing: var(--ls-petit);
  color: var(--lichen);
  max-width: 46ch;
}

.recap {
  margin-top: var(--e-32);
  border-top: 1px solid var(--trait-fin);
}
.recap li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-16);
  padding: var(--e-12) 0;
  border-bottom: 1px solid var(--trait-fin);
  font-size: var(--t-petit);
  line-height: var(--lh-petit);
}
.recap__l { color: var(--lichen); flex: 0 0 auto; }
.recap__v { color: var(--encre); text-align: right; }

/* ---------- formulaire ---------- */
.form { margin-top: var(--e-32); }

.form__intro {
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  letter-spacing: var(--ls-corps);
  color: var(--encre);
  margin-bottom: var(--e-24);
  max-width: 44ch;
}

.champ { margin-bottom: var(--e-16); }

.champ__label {
  display: block;
  color: var(--olive);
  margin-bottom: var(--e-8);
}

.champ__saisie {
  display: block;
  width: 100%;
  min-height: 54px;
  font-family: var(--sans);
  font-size: var(--t-corps);   /* 16px : evite le zoom automatique iOS */
  line-height: var(--lh-corps);
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--trait-controle);
  border-radius: var(--r-boutons);
  padding: var(--e-16);
  transition: border-color var(--duree-rapide) var(--courbe);
}
.champ__saisie::placeholder { color: var(--lichen); opacity: 1; }
.champ__saisie:hover { border-color: var(--encre); }
.champ__saisie[aria-invalid="true"] { border-color: var(--encre); border-width: 2px; }

/* L'erreur ne passe jamais par la seule couleur : le texte dit ce qui
   manque, et un filet epais la detache. */
.form__err {
  font-size: var(--t-petit);
  line-height: var(--lh-petit);
  color: var(--encre);
  background: var(--os);
  border-left: 3px solid var(--carbone);
  border-radius: 0 var(--r-boutons) var(--r-boutons) 0;
  padding: var(--e-12) var(--e-16);
  margin-bottom: var(--e-16);
}
.form__err[hidden] { display: none; }

/* Le seul bouton plein du systeme.
   inline-flex avec align-items: center et line-height: 1 sur le texte :
   c'est l'interligne herite d'une police mono qui decalait le libelle
   vers le haut. La hauteur n'est plus fixee, elle vient du padding. */
.bouton-noir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;              /* mobile : pleine largeur */
  padding: 18px 34px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: var(--poids-moyen);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--velin);
  background: var(--carbone);
  border: 1px solid var(--carbone);
  border-radius: var(--r-boutons);
  cursor: pointer;
  /* Uniquement la couleur : jamais la taille ni la position, sinon le
     bouton bouge sous le curseur au moment ou on le vise. */
  transition:
    background-color 150ms var(--courbe),
    border-color 150ms var(--courbe),
    color 150ms var(--courbe);
}

.bouton-noir:hover {
  background: var(--surligneur);
  border-color: var(--surligneur);
  color: var(--encre);
}

/* Le focus clavier ne ressemble pas au survol : contour plutot que
   inversion, pour qu'on distingue « je le vise » de « j'y suis ». */
.bouton-noir:focus-visible {
  outline: 2px solid var(--carbone);
  outline-offset: 3px;
}

.bouton-noir[disabled] {
  background: var(--lichen);
  border-color: var(--lichen);
  color: var(--velin);
  cursor: progress;
}

.form__note {
  margin-top: var(--e-16);
  font-size: var(--t-petit);
  line-height: var(--lh-petit);
  letter-spacing: var(--ls-petit);
  color: var(--lichen);
  max-width: 46ch;
}

/* ---------- 4. merci ---------- */
.merci__titre {
  font-size: var(--t-titre);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-titre);
  margin-bottom: var(--e-16);
}
.merci__txt {
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  letter-spacing: var(--ls-corps);
  color: var(--lichen);
  max-width: 46ch;
}
.merci__liste {
  margin-top: var(--e-32);
  border-top: 1px solid var(--trait-fin);
}
.merci__liste li {
  padding: var(--e-12) 0;
  border-bottom: 1px solid var(--trait-fin);
  font-size: var(--t-petit);
  line-height: var(--lh-petit);
  color: var(--lichen);
}

/* ---------- pied ---------- */
.pied {
  background: var(--carbone);
  color: var(--velin);
  padding: var(--e-32) 0;
  margin-top: var(--e-64);
}
.pied__disc {
  font-size: var(--t-micro);
  line-height: 1.6;
  color: rgba(246, 246, 244, 0.78);
  max-width: 82ch;
}
.pied__bas {
  margin-top: var(--e-16);
  color: rgba(246, 246, 244, 0.62);
}

/* ---------- focus visible, partout ---------- */
:where(a, button, input):focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 2px;
}
.pied :where(a, button):focus-visible { outline-color: var(--velin); }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .enveloppe { padding-left: var(--e-64); padding-right: var(--e-64); }

  .grille {
    display: grid;
    /* La colonne de gauche porte un H1 a 58px et un montant a 124px :
       a 452px elle cassait « Arretez de chauffer » en trois lignes.
       On reprend de la largeur sur la carte, qui n'en a pas besoin. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: var(--e-64);
    align-items: start;
    padding-top: var(--e-80);
    padding-bottom: var(--e-128);
  }

  .hero { margin-bottom: 0; padding-top: var(--e-4); }

  /* En desktop le bouton prend sa largeur naturelle. Celui du formulaire
     garde la pleine largeur : c'est l'action finale d'une colonne etroite. */
  .bouton-noir { width: auto; }
  .form .bouton-noir { width: 100%; }
  .carte { padding: var(--e-32); }
  .pied { padding: var(--e-64) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .prog__jauge { transition: none; }
}

/* ---------- le montant, visuel du hero ---------- */
/* Il ne meurt pas apres le hero : il reste affiche pendant tout le
   questionnaire et se met a jour a chaque reponse. C'est le seul chiffre
   que le visiteur est venu chercher. */

.chiffre { margin-bottom: var(--e-32); }

.chiffre__mention {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: var(--e-8);
}

.chiffre__ligne {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--e-12);
}

.chiffre__source {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--olive);
}

.montant {
  position: relative;
  display: inline-block;
  /* La taille vit ICI et non sur .montant__val : sans ca, le « 0.34em »
     du surligneur se calait sur le 16px herite du corps et donnait un
     trait de 5px au lieu des 42px attendus. */
  font-size: clamp(56px, 11vw, 124px);
}

.montant__val {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--serif);
  font-weight: var(--poids-titre);
  font-size: inherit;
  line-height: 0.92;
  white-space: nowrap;
  letter-spacing: -0.045em;
  /* tabular-nums : la largeur ne saute pas pendant que le compteur monte */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* USAGE 2 SUR 3 DU SURLIGNEUR : le trait derriere le montant du hero.
   Hauteur 34 % du chiffre, aligne en bas, deborde de 6px de chaque cote. */
.montant__surligne {
  position: absolute;
  left: -6px;
  right: -6px;
  /* 0.27em cale le BAS du trait sur le bas de l encre, mesure a 0,84em
     de hauteur d oeil. A 0.08em le trait passait SOUS les chiffres et se
     lisait comme un bloc pose la, pas comme un surligneur. */
  bottom: 0.27em;
  height: 0.34em;
  z-index: 0;
  background: var(--surligneur);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: surligner 700ms cubic-bezier(.22, .61, .36, 1) 500ms forwards;
}

@keyframes surligner { to { transform: scaleX(1); } }

/* Une fourchette fait 17 caracteres la ou « 6 700 $ » en fait 7.
   A 124px elle mesure environ 1100px et se replie sur deux lignes, ce qui
   casse le surligneur, qui ne souligne alors que la derniere. Le chiffre
   unique garde donc la pleine echelle, la fourchette prend la sienne. */
.montant--plage {
  font-size: clamp(38px, 9vw, 62px);
}

/* ---------- entree du hero : fondu et montee de 14px, decalee ---------- */
.bloc {
  opacity: 0;
  transform: translateY(14px);
  animation: entrer 520ms cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes entrer { to { opacity: 1; transform: none; } }

.hero__cta {
  margin-top: 28px;         /* le sous-titre respirait trop */
  margin-bottom: var(--e-32);
  text-decoration: none;
}

.hero__filet {
  border: 0;
  border-top: 1px solid var(--trait-fin);
  margin: 0 0 var(--e-24);
}

/* Mouvement reduit : rien ne bouge, tout est a son etat final. */
@media (prefers-reduced-motion: reduce) {
  .bloc,
  .montant__surligne {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .montant__surligne { transform: scaleX(1); }
}

/* ---------- le bareme, a decouvert ---------- */
/* C'est ce qui separe un calculateur credible d'une boite noire :
   le visiteur voit d'ou vient le chiffre. */

.calcul {
  margin-top: var(--e-16);
  border-top: 1px solid var(--trait-fin);
  border-bottom: 1px solid var(--trait-fin);
}

.calcul__t {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--olive);
  padding: var(--e-12) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-12);
}
.calcul__t::-webkit-details-marker { display: none; }
.calcul__t::after {
  content: "+";
  font-family: var(--mono);
  color: var(--olive);
}
.calcul[open] .calcul__t::after { content: "\2013"; }

.calcul__c {
  padding-bottom: var(--e-16);
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.7;
  color: var(--lichen);
  max-width: 52ch;
}
.calcul__c p + p { margin-top: var(--e-8); }

/* La mention obligatoire. Au-dessus du formulaire, jamais en bas de page,
   et jamais sous 14px. */
.avis {
  margin-top: var(--e-32);
  padding: var(--e-16);
  background: var(--os);
  border-radius: var(--r-boutons);
  font-size: var(--t-petit);
  line-height: 1.55;
  letter-spacing: var(--ls-petit);
  color: var(--olive);
  max-width: 56ch;
}

/* Le surtitre du montant disparait tant qu'il n'y a pas d'estimation :
   « 120 $ par 1 000 BTU/h » se suffit a lui-meme. */
.chiffre__mention[hidden] { display: none; }