/* Page « Diagnostic » : expliquer le diagnostic, puis offrir la demande.
   Les textes viennent de la page approuvée du 8 octobre ; la mise en page suit l'accueil (AGENTS.md).
   Aucune couleur ni police en dur : tout passe par styles/jetons.css. */

/* Un crochet est un trou à combler avec MA : on le repère d'un coup d'œil. */
.crochet { background: color-mix(in srgb, var(--accent) 22%, transparent); padding-inline: 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.jour .crochet { background: color-mix(in srgb, var(--accent) 52%, transparent); }

/* Liste à puces carrées au signal (« Avant d'écrire », « Ce qui vous protège ») */
.puces { margin: 0; padding: 0; list-style: none; border-top: var(--trame) solid var(--bordure); }
.puces li { position: relative; padding: var(--e-4) 0 var(--e-4) 28px; border-bottom: var(--trame) solid var(--bordure); line-height: 1.4; }
.puces li::before { content: ""; position: absolute; left: 0; top: calc(var(--e-4) + 0.42em); width: 10px; height: 10px; background: var(--accent); }
.puces strong { font-family: var(--police-interface); font-weight: var(--graisse-interface); }

/* ---------- 1. En-tête ---------- */
/* Le H au repos : la toile commence sous la barre ; à partir de 1100 px elle est assez haute pour que le H prenne sa pleine taille (300 px). */
.tete-page__toile { position: absolute; inset: var(--barre) 0 0 0; z-index: -1; width: 100%; height: calc(100% - var(--barre)); }
@media (min-width: 1100px) { .tete-page__toile { height: 900px; } }
.tete-page h1 { max-width: 11.5ch; }
.tete-page .t-intro { max-width: 38ch; }
.tete-page .appel-ligne { margin-top: var(--e-8); }

/* ---------- 2. Le diagnostic, avant de vous engager ---------- */
.objectif .entete-section { margin-bottom: clamp(40px, 5vw, 72px); }
.objectif h2 { max-width: 13ch; }
.reponses { margin: 0; padding: 0; list-style: none; display: grid; counter-reset: reponse; border-top: var(--trame) solid var(--bordure); }
@media (min-width: 900px) { .reponses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reponses > li { counter-increment: reponse; position: relative; display: grid; align-content: start; gap: var(--e-4); padding-block: clamp(28px, 3.4vw, 56px) clamp(32px, 4vw, 64px); border-bottom: var(--trame) solid var(--bordure); }
@media (min-width: 900px) {
  .reponses > li:nth-child(odd) { padding-right: clamp(24px, 3.5vw, 64px); }
  .reponses > li:nth-child(even) { padding-left: clamp(24px, 3.5vw, 64px); border-left: var(--trame) solid var(--bordure); }
}
.reponses > li::before { content: counter(reponse, decimal-leading-zero); font-family: var(--police-donnees); font-size: var(--t-donnees); color: var(--texte-doux); }
/* Un trait au signal se dessine en haut de chaque case quand elle entre à l'écran. */
.reponses > li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); }
@media (min-width: 900px) { .reponses > li:nth-child(even)::after { left: -1px; } }
.js-mouvement .reponses > li::after { transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--courbe-sortie); transition-delay: calc(var(--i, 0) * 120ms + 250ms); }
.js-mouvement .reponses > li.est-visible::after { transform: scaleX(1); }
.reponses h3 { font-size: clamp(1.875rem, calc(0.9rem + 2.9vw), 3.75rem); letter-spacing: -0.038em; line-height: 1; }
.reponses__fort { font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.375rem, calc(1rem + 1vw), 2rem); letter-spacing: -0.022em; line-height: 1.12; max-width: 30ch; }
.reponses__fort--duree { font-size: clamp(2.25rem, calc(1rem + 3.6vw), 4.5rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.reponses p:not(.reponses__fort) { color: var(--texte-doux); max-width: 50ch; }

/* ---------- 3. La demande ---------- */
/* « Racontez-nous votre dossier » mène ici : la section se pose juste sous la barre, et son haut est plus court que celui des autres. */
.demande { color-scheme: dark; scroll-margin-top: calc(var(--e-4) * -1); padding-top: clamp(64px, 8vw, 120px); }
.demande__grille { display: grid; gap: clamp(56px, 8vw, 96px); }
@media (min-width: 1100px) {
  .demande__grille { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
}
.avant { display: grid; gap: var(--e-8); align-content: start; }
/* « Avant d'écrire » reste à l'écran pendant qu'on écrit, si l'écran est assez haut pour le contenir en entier. */
@media (min-width: 1100px) and (min-height: 760px) { .avant { position: sticky; top: calc(var(--barre) + 32px); } }
.avant .puces li:first-child { font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.375rem, calc(1rem + 0.9vw), 1.875rem); letter-spacing: -0.025em; line-height: 1.1; }
.avant .puces li:first-child::before { top: calc(var(--e-4) + 0.38em); }
.avant h3 { font-family: var(--police-interface); font-size: var(--t-donnees); font-weight: 400; color: var(--texte-doux); margin-bottom: var(--e-2); letter-spacing: 0; }
.avant__numero { display: inline-block; font-size: clamp(1.75rem, calc(1rem + 1.6vw), 2.375rem); letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; border-bottom: var(--trame) solid color-mix(in srgb, var(--texte) 45%, transparent); }
.avant__numero:hover { border-bottom-color: var(--accent); text-decoration: none; }
.avant__appel > * + * { margin-top: var(--e-4); }
.avant__appel p:last-child { color: var(--texte-doux); }

.lettre { min-width: 0; }
.lettre__tete { display: grid; gap: var(--e-4); margin-bottom: clamp(24px, 3vw, 40px); }
.lettre__tete h2 { font-size: clamp(2rem, calc(1rem + 2.6vw), 3.5rem); }
.lettre__tete p { max-width: 54ch; color: var(--texte-doux); font-size: var(--t-l); line-height: 1.4; }

/* Le cadre : une console, comme celle de l'accueil (surface, trame de 1 px, coins). */
.lettre__form { position: relative; display: grid; padding: clamp(20px, 3.2vw, 44px); background: var(--surface); border: var(--trame) solid var(--bordure); }
.lettre__form > .hud-coin { border-color: color-mix(in srgb, var(--texte) 60%, transparent); }
.lettre__form > .hud-coin--hg { left: -8px; top: -8px; }
.lettre__form > .hud-coin--hd { right: -8px; top: -8px; }
.lettre__form > .hud-coin--bg { left: -8px; bottom: -8px; }
.lettre__form > .hud-coin--bd { right: -8px; bottom: -8px; }
.lettre__salut { color: var(--texte-doux); font-size: var(--t-l); line-height: 1.3; }
.lettre__progression { margin-top: var(--e-3); display: grid; gap: var(--e-2); }
.lettre__rang { font-family: var(--police-interface); font-size: var(--t-donnees); color: var(--texte-doux); }
.lettre__segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.lettre__segments span { display: block; height: 4px; background: var(--bordure); transition: background-color var(--duree-lente) var(--courbe); }
.lettre__segments .est-fait { background: var(--accent); }
.lettre__segments .est-courant { background: var(--texte); }

/* La liste des réponses : elle sert de barre de progression. Trait de fond, trait au signal qui avance, un carré par question. */
.lettre__reponses { margin-top: var(--e-4); }
.lettre__reponses > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: var(--cible); cursor: pointer; list-style: none; font-family: var(--police-donnees); font-size: var(--t-donnees); color: var(--texte-doux); border-bottom: var(--trame) solid var(--bordure); }
.lettre__reponses > summary::-webkit-details-marker { display: none; }
.lettre__reponses > summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--duree) var(--courbe); }
.lettre__reponses[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.lettre__liste { --haut: 12px; --carre: 11px; --carre-haut: 17px; position: relative; display: grid; margin: 0; padding: var(--haut) 0 0; list-style: none; }
.lettre__liste::before { content: ""; position: absolute; left: calc(var(--carre) / 2); top: calc(var(--haut) + var(--carre-haut) + var(--carre) / 2); height: var(--ligne-max, 0px); width: var(--trame); background: var(--bordure); }
.lettre__liste::after { content: ""; position: absolute; left: calc(var(--carre) / 2 - 1px); top: calc(var(--haut) + var(--carre-haut) + var(--carre) / 2); height: var(--ligne, 0px); width: 3px; background: var(--accent); transition: height 520ms var(--courbe-sortie); }
.lettre__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-2); align-items: start; padding: 10px 0 10px 30px; }
.lettre__item::before { content: ""; position: absolute; left: 0; top: var(--carre-haut); width: var(--carre); height: var(--carre); background: var(--surface); border: 2px solid var(--bordure); box-sizing: border-box; z-index: 1; transition: background-color var(--duree-lente) var(--courbe), border-color var(--duree-lente) var(--courbe); }
.lettre__item.est-fait::before { background: var(--accent); border-color: var(--accent); }
.lettre__item.est-courant::before { border-color: var(--texte); }
.lettre__nom { grid-column: 1; grid-row: 1; font-family: var(--police-interface); font-size: var(--t-donnees); color: var(--texte-doux); line-height: 1.4; }
.lettre__item.est-courant .lettre__nom { color: var(--texte); }
.lettre__rep { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; font-size: var(--t-s); line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.lettre__item.est-avenir .lettre__rep, .lettre__item.est-courant .lettre__rep { color: var(--texte-doux); }
/* Le bouton « Modifier » garde sa cible de 44 px sans agrandir la rangée : il se pose sur la ligne du nom. */
.lettre__item .lien { grid-column: 2; grid-row: 1; align-self: start; min-height: var(--cible); margin-block: -14px; padding: 0 var(--e-1); background: none; border: 0; color: var(--texte); cursor: pointer; font-size: var(--t-s); }

/* Les questions (une à la fois avec le script, toutes à la suite sans lui) */
.lettre .sommaire-erreurs { margin-top: var(--e-6); display: grid; gap: var(--e-2); background: var(--fond); }
.lettre .sommaire-erreurs h3 { font-size: var(--t-l); }
.lettre .sommaire-erreurs ul { display: grid; gap: var(--e-1); margin: 0; padding-left: var(--e-6); }
.lettre .sommaire-erreurs li { display: block; line-height: 1.4; }
.lettre .sommaire-erreurs a { display: inline-flex; align-items: center; min-height: var(--cible); }
.lettre__etapes { margin-top: var(--e-6); display: grid; gap: var(--e-12); }
.lettre fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lettre__etape { display: grid; gap: var(--e-6); align-content: start; }
.lettre:not([data-actif]) .lettre__etape + .lettre__etape legend { float: left; width: 100%; padding-top: var(--e-8); border-top: var(--trame) solid var(--bordure); }
.lettre:not([data-actif]) .lettre__etape + .lettre__etape legend + * { clear: both; }
.lettre legend { padding: 0; margin: 0 0 var(--e-6); max-width: 100%; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(1.875rem, calc(1rem + 2.4vw), 3.25rem); letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.lettre legend:focus { outline: none; }
.lettre legend small { display: block; margin-bottom: var(--e-2); font-family: var(--police-interface); font-weight: 400; font-size: var(--t-donnees); letter-spacing: 0; color: var(--texte-doux); }
.lettre[data-actif] legend small { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Un champ : le texte entre deux parenthèses dessinées, comme « ( Enter your email ) » chez Shift5. */
.lettre__champs { display: grid; gap: var(--e-6); align-items: start; }
/* Le nombre et le secteur se posent côte à côte seulement s'il reste de quoi lire « services professionnels ». */
.lettre__champs--entreprise { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); column-gap: var(--e-8); }
.lettre__champs--entreprise .champ--large { grid-column: 1 / -1; }
.lettre .champ { gap: var(--e-2); min-width: 0; grid-template-columns: minmax(0, 1fr); }
.lettre .champ__libelle { font-family: var(--police-interface); font-weight: 400; font-size: var(--t-donnees); color: var(--texte-doux); }
.lettre .champ__aide { max-width: 52ch; }
.champ__ctl { --crochet: color-mix(in srgb, var(--texte) 40%, transparent); position: relative; display: flex; align-items: stretch; gap: var(--e-3); min-width: 0; }
.champ__ctl::before, .champ__ctl::after { content: ""; flex: none; width: 15px; border: 2px solid var(--crochet); transition: border-color var(--duree) var(--courbe); }
.champ__ctl::before { border-right: 0; border-radius: 100% 0 0 100% / 50% 0 0 50%; }
.champ__ctl::after { border-left: 0; border-radius: 0 100% 100% 0 / 0 50% 50% 0; }
.champ__ctl:hover { --crochet: color-mix(in srgb, var(--texte) 70%, transparent); }
.champ__ctl:focus-within, .lettre .champ.est-valide .champ__ctl { --crochet: var(--accent); }
.champ__ctl:has([aria-invalid="true"]) { --crochet: var(--erreur); }
.lettre .champ input:not([type="checkbox"], [type="radio"]), .lettre .champ select, .lettre .champ textarea {
  flex: 1 1 0; width: auto; min-width: 0; min-height: calc(var(--champ) + 8px); padding: 10px 2px; background: var(--surface); color: var(--texte);
  border: 0; border-radius: 0; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--texte) 22%, transparent);
  font-family: var(--police-texte); font-size: clamp(1.25rem, calc(1rem + 0.9vw), 1.75rem); letter-spacing: -0.015em; line-height: 1.25;
}
.lettre .champ textarea { min-height: 10rem; padding-block: 12px; resize: vertical; line-height: 1.35; }
.lettre .champ input:hover, .lettre .champ select:hover, .lettre .champ textarea:hover { border-color: transparent; }
.lettre .champ input:not([type="checkbox"], [type="radio"]):focus-visible, .lettre .champ select:focus-visible, .lettre .champ textarea:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--accent); }
.lettre .champ input:not([type="checkbox"], [type="radio"])[aria-invalid="true"], .lettre .champ select[aria-invalid="true"], .lettre .champ textarea[aria-invalid="true"] { border: 0; box-shadow: inset 0 -2px 0 var(--erreur); }
.lettre .champ input:-webkit-autofill { -webkit-text-fill-color: var(--texte); box-shadow: 0 0 0 1000px var(--surface) inset; }
.lettre input[type="number"] { appearance: textfield; -moz-appearance: textfield; font-family: var(--police-donnees); font-size: clamp(1.125rem, calc(1rem + 0.6vw), 1.5rem); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lettre input[type="number"]::-webkit-outer-spin-button, .lettre input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.champ__suffixe { align-self: center; color: var(--texte-doux); font-size: var(--t-m); padding-right: var(--e-1); }
.lettre .champ select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; font-size: clamp(1.125rem, calc(1rem + 0.6vw), 1.5rem); text-overflow: ellipsis; }
.lettre select option { background: var(--surface); color: var(--texte); }
.champ__fleche { position: absolute; right: 38px; top: 50%; width: 9px; height: 9px; border: solid var(--texte); border-width: 0 2px 2px 0; transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.lettre .message-erreur { font-size: var(--t-s); }

/* La lettre, relue : une feuille de l'autre palette posée sur la console. */
.lettre .champ .lettre__copie { background: var(--accent-2); color: var(--sur-accent-2); box-shadow: none; padding: clamp(20px, 3vw, 36px); width: 100%; min-height: 14rem; font-family: var(--police-texte); font-size: var(--t-m); letter-spacing: 0; line-height: 1.6; resize: none; border: 0; }
.lettre .champ .lettre__copie:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: none; }

.lettre__actions { margin-top: var(--e-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); }
.lettre .bouton { min-height: var(--champ); }
.lettre .bouton[disabled] { opacity: 0.55; cursor: not-allowed; }
.lettre__passer { min-height: var(--cible); padding: 0 var(--e-1); background: none; border: 0; color: var(--texte); cursor: pointer; font-size: var(--t-m); }
.lettre__avis { margin-top: var(--e-4); max-width: 56ch; }
.lettre__avis a { color: var(--texte); }
.lettre__reussite { margin-top: var(--e-6); padding: var(--e-4) var(--e-6); background: var(--fond); border-left: var(--epaisseur-forte) solid var(--accent); display: grid; gap: var(--e-3); }
.lettre__reussite h3 { font-size: var(--t-l); letter-spacing: -0.015em; }
.lettre__reussite:focus { outline: none; }
.lettre__reussite p { max-width: 56ch; }
.lettre__reussite a { color: var(--texte); }
.lettre__copier { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }
.lettre .message-reussite { color: var(--accent); }

/* Avec le script : la question en cours, une à la fois. Large, la liste passe à gauche et sert de progression. */
.lettre[data-actif] .lettre__etapes { min-height: 12rem; }
.lettre[data-actif][data-large] .lettre__form {
  grid-template-columns: clamp(13rem, 30%, 17rem) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); align-items: start;
  grid-template-areas: "liste salut" "liste progres" "liste sommaire" "liste etapes" "liste fin" "liste actions" "liste avis";
}
.lettre[data-actif][data-large] .lettre__salut { grid-area: salut; }
.lettre[data-actif][data-large] .lettre__progression { grid-area: progres; }
.lettre[data-actif][data-large] .lettre__reponses { grid-area: liste; align-self: stretch; margin-top: 0; padding-right: clamp(16px, 2vw, 28px); border-right: var(--trame) solid var(--bordure); }
.lettre[data-actif][data-large] .sommaire-erreurs { grid-area: sommaire; }
.lettre[data-actif][data-large] .lettre__etapes { grid-area: etapes; min-height: 16rem; }
.lettre[data-actif][data-large] .lettre__reussite { grid-area: fin; }
.lettre[data-actif][data-large] .lettre__actions { grid-area: actions; }
.lettre[data-actif][data-large] .lettre__avis { grid-area: avis; }
.lettre[data-actif][data-large] .lettre__segments { display: none; }
.lettre[data-actif][data-large] .lettre__reponses > summary { pointer-events: none; }
.lettre[data-actif][data-large] .lettre__reponses > summary::after { display: none; }

/* Le passage d'une question à l'autre : un glissé court (transform et opacity seulement). */
@keyframes lettre-sort-avant { to { opacity: 0; transform: translateX(-28px); } }
@keyframes lettre-sort-arriere { to { opacity: 0; transform: translateX(28px); } }
@keyframes lettre-entre-avant { from { opacity: 0; transform: translateX(44px); } }
@keyframes lettre-entre-arriere { from { opacity: 0; transform: translateX(-44px); } }
.js-mouvement .lettre__etape.sort-avant { animation: lettre-sort-avant 140ms var(--courbe) both; }
.js-mouvement .lettre__etape.sort-arriere { animation: lettre-sort-arriere 140ms var(--courbe) both; }
.js-mouvement .lettre__etape.entre-avant { animation: lettre-entre-avant 380ms var(--courbe-sortie) both; }
.js-mouvement .lettre__etape.entre-arriere { animation: lettre-entre-arriere 380ms var(--courbe-sortie) both; }

/* ---------- 4. Après votre lettre ---------- */
.apres__grille { display: grid; gap: var(--e-12); }
@media (min-width: 1100px) {
  .apres__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
  .apres__tete { position: sticky; top: calc(var(--barre) + 32px); }
}
.apres__tete .t-intro { max-width: 34ch; }
.apres .parcours { margin-top: 0; }
.apres .parcours > li { padding-bottom: var(--e-12); }
.apres .parcours > li:last-child { padding-bottom: 0; }
.apres .parcours dl { grid-template-columns: none; gap: 0; margin-top: var(--e-2); border-top: var(--trame) solid var(--bordure); }
.apres .parcours dl > div { display: grid; gap: var(--e-1) var(--e-4); padding-block: var(--e-3); border-bottom: var(--trame) solid var(--bordure); }
@media (min-width: 760px) { .apres .parcours dl > div { grid-template-columns: 9.5em minmax(0, 1fr); } }
.apres .parcours dd { max-width: 50ch; }
/* Ce que vous payez : la ligne qu'un acheteur cherche, marquée au signal. */
.apres .parcours dl > div:last-child { border-left: var(--epaisseur-forte) solid var(--accent); padding-left: calc(var(--e-4) - var(--epaisseur-forte)); margin-left: calc(var(--e-4) * -1); padding-inline-end: var(--e-3); background: color-mix(in srgb, var(--texte) 4%, transparent); }
.apres .parcours dl > div:last-child dt { color: var(--texte); }
.apres .parcours dl > div:last-child dd { font-weight: var(--graisse-interface); font-family: var(--police-interface); }
.sans-frais { margin-top: clamp(56px, 7vw, 104px); }
.sans-frais h3 { margin-bottom: var(--e-6); font-size: clamp(1.75rem, calc(1rem + 2vw), 3rem); letter-spacing: -0.035em; line-height: 1.02; }
.sans-frais .protections strong { display: block; }
.sans-frais .protections p { margin-top: var(--e-2); }

/* ---------- 5. Des résultats. Pas des promesses. ---------- */
.resultats .entete-section { margin-bottom: clamp(32px, 4vw, 56px); }
.jalons { margin: 0; padding: 0; list-style: none; display: grid; border-top: var(--trame) solid color-mix(in srgb, var(--texte) 16%, transparent); }
@media (min-width: 760px) { .jalons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jalons li { position: relative; display: flex; align-items: baseline; gap: var(--e-4); padding-block: var(--e-6) var(--e-8); border-bottom: var(--trame) solid color-mix(in srgb, var(--texte) 16%, transparent); }
@media (min-width: 760px) {
  .jalons li { display: grid; align-content: start; gap: var(--e-3); padding: var(--e-8) clamp(16px, 2vw, 32px) var(--e-12); border-bottom: 0; }
  .jalons li:first-child { padding-left: 0; }
  .jalons li + li { border-left: var(--trame) solid color-mix(in srgb, var(--texte) 16%, transparent); }
}
.jalons li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--accent); }
.js-mouvement .jalons li::before { transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--courbe-sortie); transition-delay: calc(var(--i, 0) * 260ms + 250ms); }
.js-mouvement .jalons li.est-visible::before { transform: scaleX(1); }
.jalons__nombre { display: block; margin-left: -0.05em; font-family: var(--police-titres); font-weight: var(--graisse-titres); font-size: clamp(5.5rem, calc(1rem + 16vw), 18rem); letter-spacing: -0.06em; line-height: 0.8; font-variant-numeric: tabular-nums; }
.jalons__unite { font-family: var(--police-interface); font-size: var(--t-donnees); color: var(--texte-doux); }
.resultats__apres { margin-top: var(--e-4); font-family: var(--police-interface); font-size: var(--t-donnees); color: var(--texte-doux); }
.resultats__deux { display: grid; gap: var(--e-12); margin-top: clamp(56px, 7vw, 104px); }
@media (min-width: 1100px) { .resultats__deux { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: start; } }
.resultats h3 { margin-bottom: var(--e-6); font-size: clamp(1.5rem, calc(1rem + 1.4vw), 2.375rem); letter-spacing: -0.03em; line-height: 1.05; }
.resultats .puces strong { color: var(--texte); }
.resultats .puces li { color: var(--texte-doux); }
.resultats__protege > p { margin-top: var(--e-6); }
.resultats .couts { border-bottom: var(--trame) solid var(--bordure); }
.resultats .couts li:first-child { border-top: var(--trame) solid var(--bordure); }
.resultats .couts p { color: var(--texte-doux); }
.resultats .couts strong { color: var(--texte); }