/* Tinkly · feuille de style unique.
 *
 * Un seul fichier, chargé partout. Le parcours est d'abord un objet mobile :
 * tout est dimensionné pour un téléphone tenu à une main, et l'écran large
 * n'est qu'un cas particulier traité en fin de fichier.
 *
 * LE SYSTEME VISUEL EST CELUI DE TRENDSAAS, la reference dont ce produit
 * descend. Decision d'Ilyasse du 14 septembre 2026 : on garde ses couleurs,
 * ses icones et ses elements comme base, on change le nom.
 *
 * Un graphite froid, jamais de noir pur ni de teinte chaude. Un seul accent,
 * un acier pale, assez present pour guider l'oeil et assez desature pour ne
 * jamais claquer comme un accent de gabarit. L'action principale est BLANCHE,
 * texte graphite : sur ce fond, un bouton de couleur tire l'oeil vers la
 * couleur, un bouton blanc le tire vers l'action.
 *
 * Deux couleurs de sens survivent, et elles ne sont pas decoratives : le vert
 * marque ce qui est acquis, le rouge ce qui se perime. */

:root {
  /* ------------------------------------------------------------------------
     LE SYSTEME VISUEL VIENT DE TRENDSAAS, la reference dont ce produit
     descend, et c'est une decision d'Ilyasse du 14 septembre 2026 : « les
     couleurs de la landing page, les icones, tous les elements, on change
     juste le nom mais le reste on garde comme base intacte. »

     Les NOMS sont les notres, les VALEURS sont les siennes. Renommer les
     jetons aurait demande de reecrire les 1900 lignes qui suivent, pour
     exactement le meme resultat a l'ecran.

     Le violet #6d3bff qui tenait ici avant est parti avec cette decision. Son
     commentaire d'origine explique pourquoi l'accent est ce qu'il est : un
     acier pale, « assez present pour guider l'oeil, assez desature pour ne
     jamais claquer comme un accent de gabarit ». Un violet sature fait
     exactement ce qu'il dit d'eviter.
     --------------------------------------------------------------------- */

  /* Fonds : graphite froid. Jamais de noir pur, jamais de teinte chaude. */
  --fond: #0a0a0d;
  --fond-2: #0f1013;
  --surface: #15161b;
  --surface-haut: #1d1e25;

  /* Traits. En opacite et non en couleur pleine : ils se posent sur
     n'importe lequel des quatre fonds sans se recalculer. */
  --bord: rgba(255, 255, 255, 0.07);
  --bord-vif: rgba(255, 255, 255, 0.13);
  --bord-net: rgba(255, 255, 255, 0.24);

  /* Texte : neutres tres legerement bleutes. */
  --texte: #eef0f3;
  --texte-2: #9ba1ad;
  --texte-3: #6a707c;

  /* Accent unique : acier pale. */
  --accent: #aeb9cc;
  --accent-clair: #d6dde8;
  --accent-sombre: #78828f;
  --accent-voile: rgba(174, 185, 204, 0.09);
  --accent-halo: rgba(174, 185, 204, 0.26);

  /* L'ACTION PRINCIPALE EST BLANCHE, texte graphite. C'est le geste le plus
     visible du changement : nos boutons etaient violets. */
  --action: #ffffff;
  --action-texte: #0a0a0d;

  /* SON SYSTEME N'A AUCUNE COULEUR DE SENS, verifie : pas un seul vert dans
     ses 177 Ko de style. Ce qui est acquis se marque avec l'accent, et c'est
     coherent avec « un seul accent ». Le nom `--acquis` reste, parce que les
     douze endroits qui s'en servent disent bien « acquis » et pas
     « accentue » ; seule sa valeur change. Le vert acide #00e5a0 est parti
     avec l'ancienne identite.
     Le rouge devient son corail, plus doux que notre #ff2d55 : il n'a pas de
     rouge de palette, seulement une couleur d'erreur, #ff6b6b. */
  --acquis: var(--accent);
  --urgence: #ff6b6b;

  --rayon: 14px;
  --rayon-s: 8px;
  --rayon-l: 20px;
  --gouttiere: 20px;
  /* Le tunnel reste une colonne etroite : 620 px est la largeur de lecture
     d'une question, pas celle d'une landing. Sa valeur a lui, 1180 px, vit
     dans --max-large pour les pages qui en ont besoin. */
  --max: 620px;
  --max-large: 1180px;

  --ombre: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  --arete: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lueur: 0 0 0 1px var(--bord-net), 0 10px 34px -12px var(--accent-halo);

  --transition: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}


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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  /* Les trois polices de trendsaas. Instrument Sans porte le texte courant,
     Bricolage Grotesque les titres, Spline Sans Mono les kickers. */
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* LES DEUX HALOS DE TRENDSAAS, aux memes positions et aux memes opacites :
     un acier en haut a gauche, un bleu froid en haut a droite. Celui qu'on
     avait en bas a droite etait un vert acide `rgba(0, 229, 160, .09)`, la
     derniere trace de l'ancienne identite dans le fond de chaque page. */
  background-image: radial-gradient(900px 520px at 12% -8%, rgba(174, 185, 204, 0.1), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, rgba(90, 120, 200, 0.08), transparent 60%);
  background-attachment: fixed;
}

/* LE GRAIN. Une nappe de bruit fixe, a 35 % d'opacite sur un motif lui-meme a
   4,5 %, donc presque rien. C'est ce qui empeche les grandes surfaces
   graphite de se lire comme du plat, et c'est un element de son systeme :
   sans lui, les memes couleurs paraissent plus pauvres. En data URI pour ne
   pas ajouter une requete reseau au premier ecran. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  /* Bricolage Grotesque, la police de titre de trendsaas. C'est elle qui fait
     l'essentiel de son allure : tres serree, tres peu d'interligne, et un
     poids de 600 plutot que les 660 qu'on avait. Un titre en Inter lourd et
     un titre en Bricolage a 600 ne se ressemblent pas du tout, meme aux memes
     couleurs. */
  font-family: "Space Grotesk", "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Les trois reglages de detail qui completent son allure et qu'on n'avait
   pas : la selection prend l'accent, un `em` n'est pas de l'italique mais un
   mot mis en avant, et le focus clavier est visible. */
::selection {
  background: var(--accent);
  color: var(--action-texte);
}

em {
  font-style: normal;
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

p {
  margin: 0;
}

/* ------------------------------------------------------------- la coquille */

.parcours {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#barre {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--gouttiere);
  /* LA COULEUR NE S'ECRIT PLUS EN DUR. Elle valait exactement --fond en
     nuit, donc la nuit ne bouge pas ; en jour, elle posait une barre noire en
     haut d'une page claire. La premiere ligne reste en secours pour un
     navigateur sans color-mix. */
  background: rgba(10, 10, 13, 0.82);
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}

#retour {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: var(--surface);
  color: var(--texte-2);
  cursor: pointer;
  transition: var(--transition);
}

#retour:hover {
  border-color: var(--bord-vif);
  color: var(--texte);
}

#retour[hidden] {
  visibility: hidden;
  display: grid;
}

#jauge {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--surface-haut);
  overflow: hidden;
}

#jauge i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-clair));
  transition: width 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

#compteur {
  flex: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--texte-3);
}

#ecran {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--gouttiere) 120px;
}

/* Chaque écran entre par le bas. Discret : 10 px et 260 ms, au-delà ça donne
   l'impression d'attendre. */
.vue {
  animation: entree 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes entree {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vue {
    animation: none;
  }
  * {
    transition-duration: 1ms !important;
  }
}

/* ---------------------------------------------------------------- en-têtes */

.kicker {
  /* Le kicker de trendsaas : pas une pastille, une ligne de monospace tres
     espacee, precedee d'un point lumineux. La pastille arrondie coloree qui
     tenait ici avant est le marqueur visuel le plus reconnaissable d'un
     gabarit, et c'est exactement ce que son systeme evite. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-halo);
}

.titre {
  font-size: clamp(27px, 7.4vw, 36px);
  margin-bottom: 10px;
}

.sous {
  color: var(--texte-2);
  font-size: 16px;
  margin-bottom: 26px;
}

.corps {
  color: var(--texte-2);
  font-size: 17px;
  margin-bottom: 28px;
}

/* ---------------------------------------------------------------- options */

.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  cursor: pointer;
  transition: var(--transition);
}

.option:hover {
  background: var(--surface-haut);
  border-color: var(--bord-vif);
  transform: translateX(3px);
}

.option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-voile);
  box-shadow: var(--lueur);
}

.option .coche {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bord-vif);
  display: grid;
  place-items: center;
  transition: var(--transition);
}

.option[aria-pressed="true"] .coche {
  border-color: var(--accent);
  background: var(--accent);
  /* Le fond est un acier pale : la coche doit etre sombre, pas blanche. */
  color: var(--action-texte);
}

.option .coche svg {
  opacity: 0;
  transform: scale(0.5);
  transition: var(--transition);
}

.option[aria-pressed="true"] .coche svg {
  opacity: 1;
  transform: scale(1);
}

.option .texte {
  flex: 1;
  min-width: 0;
}

.option .label {
  font-weight: 560;
}

.option .detail {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--texte-3);
}

/* ------------------------------------------------------- curseur et échelle */

.curseur {
  margin: 34px 0 30px;
  text-align: center;
}

.curseur .valeur {
  font-size: clamp(40px, 13vw, 62px);
  font-weight: 720;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--accent-clair), var(--acquis));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.curseur .unite {
  display: block;
  margin-top: -4px;
  color: var(--texte-3);
  font-size: 14px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  background: transparent;
  cursor: grab;
}

input[type="range"]:active {
  cursor: grabbing;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-haut);
}

input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-haut);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -9px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 20px -2px var(--accent);
}

input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accent);
}

.echelle {
  display: flex;
  gap: 8px;
  margin: 26px 0 14px;
}

.echelle button {
  flex: 1;
  aspect-ratio: 1;
  border-radius: var(--rayon-s);
  border: 1px solid var(--bord);
  background: var(--surface);
  font-size: 19px;
  font-weight: 620;
  color: var(--texte-2);
  cursor: pointer;
  transition: var(--transition);
}

.echelle button:hover {
  border-color: var(--bord-vif);
  transform: translateY(-3px);
}

.echelle button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 26px -6px var(--accent);
}

.bornes {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--texte-3);
}

/* ------------------------------------------------------------------ champs */

.champ {
  width: 100%;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  transition: var(--transition);
}

.champ:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--lueur);
}

.champ::placeholder {
  color: var(--texte-3);
}

textarea.champ {
  min-height: 128px;
  resize: vertical;
}

.restant {
  margin-top: 8px;
  text-align: right;
  font-size: 13px;
  color: var(--texte-3);
  font-variant-numeric: tabular-nums;
}

.erreur {
  margin-top: 10px;
  color: var(--urgence);
  font-size: 14px;
}

/* ----------------------------------------------------------------- boutons */

.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  padding: 14px var(--gouttiere) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--fond) 55%, transparent);
}

.actions .dedans {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bouton {
  display: block;
  width: 100%;
  padding: 17px 22px;
  border: 1px solid transparent;
  border-radius: var(--rayon-s);
  /* BLANC FRANC SUR GRAPHITE, comme chez trendsaas. Un bouton de couleur sur
     un fond graphite tire l'oeil vers la couleur ; un bouton blanc le tire
     vers l'action. */
  background: var(--action);
  color: var(--action-texte);
  font-size: 17px;
  font-weight: 640;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 10px 34px -12px var(--accent-halo), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.bouton:hover {
  background: var(--accent-clair);
  transform: translateY(-2px);
}

.bouton:active {
  transform: translateY(0) scale(0.99);
}

.bouton[disabled] {
  background: var(--surface-haut);
  color: var(--texte-3);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.bouton.fantome {
  background: transparent;
  color: var(--texte-3);
  box-shadow: none;
  font-weight: 500;
  font-size: 15px;
  padding: 10px;
}

.bouton.fantome:hover {
  color: var(--texte);
  transform: none;
}

/* ------------------------------------------------------- écrans de machine */

.acte {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.acte .numero {
  color: var(--accent-clair);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.acte h2 {
  font-size: clamp(34px, 10vw, 52px);
  margin-bottom: 14px;
}

.etapes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 30px 0;
}

.etape {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--texte-3);
  transition: color 300ms;
}

.etape .puce {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bord-vif);
  display: grid;
  place-items: center;
  transition: var(--transition);
}

.etape.en-cours {
  color: var(--texte);
}

.etape.en-cours .puce {
  border-color: var(--accent);
  border-right-color: transparent;
  animation: tourne 700ms linear infinite;
}

.etape.finie {
  color: var(--texte-2);
}

.etape.finie .puce {
  border-color: var(--acquis);
  background: var(--acquis);
}

@keyframes tourne {
  to {
    transform: rotate(360deg);
  }
}

.carte {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  margin-bottom: 12px;
}

.carte .intitule {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-3);
  margin-bottom: 6px;
}

.chiffre {
  font-size: clamp(32px, 9vw, 44px);
  font-weight: 720;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--acquis);
}

.mention {
  margin-top: 16px;
  padding: 13px 15px;
  border-left: 3px solid var(--bord-vif);
  background: var(--fond-2);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  color: var(--texte-3);
  font-size: 13.5px;
}

/* Les questions de levier, posées par-dessus l'écran de calcul. */
.surimpression {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: end center;
  padding: var(--gouttiere);
  background: rgba(10, 10, 13, 0.76);
  background: color-mix(in srgb, var(--fond) 76%, transparent);
  backdrop-filter: blur(6px);
  animation: entree 200ms both;
}

.surimpression .panneau {
  width: 100%;
  max-width: var(--max);
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--bord-vif);
  border-radius: 22px;
  box-shadow: var(--ombre);
}

/* L'empreinte du serment. Ce n'est pas un bouton : il faut rester appuyé. */
.empreinte {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 36px auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--bord);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.empreinte svg.trace {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.empreinte circle {
  fill: none;
  stroke-width: 4;
}

.empreinte .fond-trace {
  stroke: var(--bord);
}

.empreinte .avance {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 80ms linear;
}

.empreinte .doigt {
  display: grid;
  place-items: center;
  color: var(--accent-clair);
  opacity: 0.7;
  transition: var(--transition);
}

.empreinte.appuye .doigt {
  opacity: 1;
  transform: scale(0.94);
}

.empreinte.signe .avance {
  stroke: var(--acquis);
}

/* ---------------------------------------------------------------- formules */

.remise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  margin-bottom: 20px;
  border-radius: var(--rayon);
  background: rgba(255, 45, 85, 0.12);
  border: 1px solid rgba(255, 45, 85, 0.42);
}

.remise .compte {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 20px;
  color: var(--urgence);
}

.remise.expiree {
  background: var(--surface);
  border-color: var(--bord);
}

.remise.expiree .compte {
  color: var(--texte-3);
}

/* CHAQUE FORMULE EST UNE RANGEE, jamais une carte empilee. C'est la mise en
   page de la reference, redemandee par Ilyasse le 15 septembre 2026.

   LA RANGEE SE LIT DE DROITE A GAUCHE : l'oeil tombe d'abord sur le prix par
   jour, qui est le plus gros caractere de la ligne, puis remonte vers la duree
   et le tarif de l'abonnement, qui sont en petit. Une pile de cartes fait
   l'inverse, elle impose le montant preleve avant tout le reste.

   DEUX LIGNES ET TROIS COLONNES, et c'est ce que montre la capture quand on
   l'agrandit. En haut : la puce de selection, le bloc duree et tarif, le prix
   par jour cale a droite. En dessous, sur toute la largeur restante, la
   pastille de contenu : dans la formule 12 mois de la reference elle passe
   SOUS le prix par jour et court jusqu'au bord droit de la rangee.

   EN GRILLE ET PLUS EN FLEX, parce que le flex a une seule ligne obligeait la
   pastille a vivre DANS la colonne de gauche. Deux consequences, toutes deux
   visibles a l'ecran et fausses par rapport a la capture :

   - la pastille n'avait que la moitie de la largeur, se repliait sur sept
     lignes au telephone, et la rangee de base montait a 236 pixels. La carte
     empilee qu'on venait de supprimer revenait par la pastille ;
   - `align-items: center` centrait alors le prix par jour sur la HAUTEUR
     TOTALE de la rangee, pastille comprise, donc a cote du paragraphe. Dans la
     capture il est au niveau de la ligne de tarif. C'est la ligne 1 de la
     grille qui le remet la, sans avoir a deviner une hauteur.

   Les trois rangees n'ont pas la meme hauteur, parce que les trois contenus
   n'ont pas la meme longueur, et c'est deja vrai dans la reference. Ce qui
   compte est que les trois gros chiffres soient a la meme place DANS leur
   rangee : alignes sur le tarif, et non sur un milieu qui bouge. */
.formules {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.formule {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 9px;
  width: 100%;
  /* Un <button> centre son texte : sans cette ligne, toute ligne de contenu
     qui passe à la ligne se retrouve centrée au milieu de la carte. */
  text-align: left;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
}

.formule:hover {
  border-color: var(--bord-vif);
}

.formule[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: var(--lueur);
}

/* LE RUBAN EST CENTRE sur le bord haut, comme dans la reference. Il etait cale
   a gauche a 22 pixels, ce qui le posait juste au-dessus de la duree et le
   faisait lire comme une sur-etiquette de la formule plutot que comme un
   ruban de la rangee. */
.formule .populaire {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--accent);
  /* Le fond est un acier pale : le texte doit etre sombre, pas blanc. Meme
     raisonnement que la coche du parcours. */
  color: var(--action-texte);
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* La puce de selection, reprise telle quelle des options du parcours : un rond
   vide qui se remplit d'acier et porte la coche une fois choisi. Le paywall
   etait le seul ecran du tunnel ou l'on choisissait sans rien voir se cocher. */
.formule .coche {
  grid-column: 1;
  grid-row: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bord-vif);
  display: grid;
  place-items: center;
  transition: var(--transition);
}

.formule[aria-pressed="true"] .coche {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--action-texte);
}

.formule .coche svg {
  opacity: 0;
  transform: scale(0.5);
  transition: var(--transition);
}

.formule[aria-pressed="true"] .coche svg {
  opacity: 1;
  transform: scale(1);
}

/* LE BLOC DE GAUCHE : la duree, sa remise, et le tarif de l'abonnement. Il
   s'appelle `gauche` et pas `corps` : `.corps` est deja pris dans cette feuille
   par le paragraphe de texte courant du tunnel, qui porte `margin-bottom:
   28px`. Nomme `corps`, ce bloc heritait de ces 28 pixels et la rangee gagnait
   un blanc mort sous le tarif.

   `min-width: 0` sans quoi un tarif long refuse de se replier et pousse le prix
   par jour hors de la rangee : la taille minimale par defaut d'un element de
   grille est celle de son contenu, pas zero. La colonne elle-meme est declaree
   `minmax(0, 1fr)` pour la meme raison, un cran plus haut. */
.formule .gauche {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.formule .ligne-duree {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.formule .duree {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--texte);
}

/* La remise se DEDUIT du tarif plein et du tarif remise dans app.js, elle
   n'est ecrite nulle part. La reference la pose en vert ; notre systeme n'a
   qu'un accent et pas de couleur decorative, donc elle est en acier. */
.formule .economie {
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--acquis);
  color: var(--action-texte);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* LE TARIF DE L'ABONNEMENT, EN PETIT. Il reste parfaitement lisible : c'est
   le montant qui sera preleve, et l'ecraser serait une autre facon de mentir.
   Il est simplement second, derriere le prix par jour. */
.formule .prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
  font-size: 16px;
}

.formule .barre {
  color: var(--texte-3);
  text-decoration: line-through;
}

/* LE MONTANT REELLEMENT PRELEVE EST EN TEXTE PLEIN, dans les deux etats. Il
   etait en `--texte-2` tant que la remise courait et en `--texte` une fois
   elle expiree : le prix etait donc PLUS CLAIR quand il etait plus cher, et
   c'est exactement l'inverse de ce qu'il faut. Mesure a l'ecran : 155,161,173
   sur 18,99 EUR remise, 238,240,243 sur 37,97 EUR plein.

   La capture ne s'y trompe pas : « 37,97 € » y est gris barre et « 18,99 € »
   blanc. Le contraste ne vient pas d'eclaircir le barre, il vient d'assumer
   le prix qu'on demande. Une regle de moins, et un `:first-child` positionnel
   en moins, qui basculait la couleur selon un enfant absent. */
.formule .montant {
  font-weight: 650;
  color: var(--texte);
}

.formule .unite {
  font-size: 14px;
  color: var(--texte-3);
}

/* LE GROS CHIFFRE, A DROITE ET SUR LA LIGNE DU TARIF. Cale a droite et en
   chiffres tabulaires : les trois prix par jour se lisent en colonne, et 0,63 /
   0,33 / 0,19 doivent aligner leurs virgules pour que la comparaison saute aux
   yeux. Il occupe la ligne 1 de la grille, donc il reste au niveau du tarif
   quelle que soit la longueur de la pastille posee en dessous. */
.formule .parjour {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  line-height: 1.15;
}

.formule .parjour b {
  display: block;
  font-size: 30px;
  font-weight: 720;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--texte);
}

.formule .parjour span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--texte-3);
}

/* Le contenu de la formule, en UNE pastille posee sur la deuxieme ligne de la
   grille. Les coches empilees d'avant faisaient quatre lignes de texte courant,
   ce qui rendait la rangee aussi haute qu'une carte.

   ELLE PART DE LA COLONNE 2 ET VA JUSQU'AU BOUT, comme dans la capture, ou la
   pastille de la formule 12 mois passe sous le prix par jour. Enfermee dans la
   colonne de gauche, elle n'avait que la moitie de la largeur : sept lignes au
   telephone, et 236 pixels de haut pour la rangee de base. Le retrait de la
   colonne 1 est garde, il aligne la pastille sur la duree et pas sur la puce.

   `justify-self: start` : la pastille doit s'arreter au texte, sinon elle tire
   un trait jusqu'au bord de la rangee et redevient une boite. C'est cette ligne
   qui fait le travail, et plus `display: inline-block`, qui ne veut plus rien
   dire ici : une grille reblockifie ses enfants, l'inline etait devenu mort. */
.formule .contenu {
  grid-column: 2 / -1;
  grid-row: 2;
  justify-self: start;
  padding: 3px 11px;
  border: 1px solid var(--bord-vif);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texte-2);
  transition: var(--transition);
}

.formule[aria-pressed="true"] .contenu {
  border-color: var(--accent-halo);
  background: var(--accent-voile);
  color: var(--texte);
}

/* Sous 420 pixels, la rangee tient toujours mais elle serre : le gros chiffre
   descend d'un cran et la puce se rapproche du corps, sinon le prix par jour
   passe a la ligne au milieu de la virgule.

   `column-gap` et pas `gap` : le raccourci ecraserait aussi l'ecart entre la
   ligne de tarif et la pastille, qui n'a aucune raison de bouger parce que
   l'ecran est etroit. */
@media (max-width: 420px) {
  .formule {
    column-gap: 12px;
    padding: 16px 14px;
  }

  .formule .parjour b {
    font-size: 25px;
  }

  .formule .duree {
    font-size: 16px;
  }

  .formule .prix {
    font-size: 15px;
  }
}

.garantie {
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--rayon);
  background: var(--accent-voile);
  border: 1px solid var(--bord-vif);
}

.garantie h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.garantie p {
  color: var(--texte-2);
  font-size: 15px;
}

.faq {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq details {
  padding: 15px 17px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
}

.faq summary {
  cursor: pointer;
  font-weight: 560;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  float: right;
  color: var(--texte-3);
}

.faq details[open] summary::after {
  content: "−";
}

.faq p {
  margin-top: 10px;
  color: var(--texte-2);
  font-size: 15px;
}

/* -------------------------------------------------------------- le compte */

.champs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.separateur {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--texte-3);
  font-size: 13px;
}

.separateur::before,
.separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bord);
}

/* ---------------------------------------------------------- écrans larges */

@media (min-width: 720px) {
  body {
    font-size: 18px;
  }

  #ecran {
    padding-top: 56px;
  }

  .options {
    gap: 12px;
  }

  .actions {
    position: static;
    background: none;
    padding: 24px var(--gouttiere) 60px;
  }
}

/* ============================================================== l'accueil ==
   La page d'accueil réutilise tout ce qui précède (boutons, cartes, formules,
   FAQ). Ce qui suit ne fait qu'ajouter ce qui lui est propre : la mise en
   page longue, qui n'existe pas dans le parcours. */

.accueil {
  padding-bottom: 0;
}

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px var(--gouttiere);
  /* Voir la note de .barre : la couleur suit --fond au lieu d'etre ecrite. */
  background: rgba(10, 10, 13, 0.82);
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}

.marque {
  font-weight: 720;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--texte);
  text-decoration: none;
}

.bouton.compact {
  width: auto;
  padding: 10px 18px;
  font-size: 15px;
}

.bouton.grand {
  width: auto;
  display: inline-block;
  padding: 18px 34px;
  font-size: 18px;
}

.accueil main {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.hero {
  padding: 64px 0 56px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(34px, 8.6vw, 62px);
  margin: 6px 0 18px;
  max-width: 15ch;
  margin-inline: auto;
}

.chapo {
  max-width: 54ch;
  margin: 0 auto 30px;
  color: var(--texte-2);
  font-size: clamp(17px, 4.4vw, 20px);
}

/* Sous un titre de section, aligné à gauche, le chapeau doit l'être aussi :
   centré, il flotte au milieu sans rien pour l'accrocher. */
.chapo.court {
  margin: 0 0 24px;
  max-width: 60ch;
}

.note-prix {
  margin-top: 16px;
  color: var(--texte-3);
  font-size: 14px;
}

.sous-bouton {
  margin-top: 14px;
  color: var(--texte-3);
  font-size: 14px;
}

/* La bande de chiffres. Ils décrivent ce que le produit contient, et ils sont
   calculés depuis les données : ils ne peuvent pas se désynchroniser. */
.bande {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}

.bande li {
  padding: 18px 14px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.bande b {
  display: block;
  font-size: 32px;
  font-weight: 720;
  letter-spacing: -0.03em;
  color: var(--accent-clair);
  font-variant-numeric: tabular-nums;
}

.bande span {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--texte-3);
  line-height: 1.35;
}

.bloc {
  padding: 56px 0;
  border-top: 1px solid var(--bord);
}

.bloc h2 {
  font-size: clamp(26px, 6.4vw, 38px);
  margin-bottom: 26px;
  max-width: 20ch;
}

.grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tuile {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.tuile h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.tuile p {
  color: var(--texte-2);
  font-size: 15.5px;
}

.etapes-liste {
  counter-reset: pas;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.etapes-liste li {
  counter-increment: pas;
  position: relative;
  padding: 22px 22px 22px 66px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  color: var(--texte-2);
  font-size: 15.5px;
}

.etapes-liste li::before {
  content: counter(pas);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.etapes-liste b {
  display: block;
  color: var(--texte);
  margin-bottom: 3px;
}

/* Sur l'accueil les formules sont des articles, pas des boutons : rien à
   choisir ici, le choix se fait à la fin du questionnaire. */
.accueil .formule {
  cursor: default;
}

.accueil .formule.en-avant {
  border-color: var(--accent);
}

.accueil .formule .bouton {
  margin-top: 18px;
}

.bloc.final {
  text-align: center;
  padding: 72px 0 88px;
}

.bloc.final h2 {
  margin-inline: auto;
  margin-bottom: 26px;
}

.pied-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 30px var(--gouttiere) calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bord);
}

.pied-page a,
.garantie a {
  color: var(--texte-3);
  font-size: 14px;
}

.garantie a {
  color: var(--acquis);
}

@media (min-width: 760px) {
  .bande {
    grid-template-columns: repeat(4, 1fr);
  }

  .grille {
    grid-template-columns: repeat(3, 1fr);
  }

  .accueil .formules {
    flex-direction: row;
    align-items: stretch;
  }

  .accueil .formule {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .accueil .formule ul {
    flex: 1;
  }

  .bloc {
    padding: 76px 0;
  }
}

/* ==================================================================== dossier
   La page d'après paiement. Elle ne partage avec le parcours que les jetons de
   couleur, la carte et le bouton : tout le reste est une page longue qui se
   lit et se relit, là où le parcours est une suite d'écrans qu'on traverse une
   fois. Les deux ne peuvent pas avoir la même mise en page.

   Tout est préfixé par .dossier. Sans ce préfixe, `.actions` reprendrait sa
   position fixe en bas de l'écran du parcours, et les boutons de copie du
   prompt se retrouveraient collés au bas de la fenêtre. */

.dossier main#ecran {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gouttiere) 80px;
}

/* Les boutons de cette page vivent dans le flux : ce sont des actions au
   milieu d'un texte, pas la seule sortie d'un écran. */
.dossier .entete {
  gap: 12px;
}

.dossier .entete .marque {
  flex: none;
}

.dossier .actions {
  position: static;
  padding: 0;
  background: none;
  margin: 20px 0 34px;
}

.dossier .actions .bouton {
  max-width: 420px;
}

/* LES DEUX RACCOURCIS DE L'ECRAN D'ACCUEIL, cote a cote et jamais empiles.

   Ils doublent volontairement la navigation : l'accueil dit ou aller, la
   colonne permet d'y revenir. Comme `.bouton` est un bloc en pleine largeur,
   les poser tels quels donnait un bouton geant surmontant un second qui,
   en `fantome`, se lisait comme une legende et pas comme une action. Un
   bouton qui ne se lit pas comme un bouton est un bouton absent. */
.dossier .raccourcis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 8px;
}

.dossier .raccourcis .bouton {
  width: auto;
}

.dossier .tete {
  padding: 40px 0 26px;
}

.dossier .tete .titre {
  margin: 6px 0 14px;
}

.dossier .tete .chapo {
  margin: 0;
  max-width: 58ch;
}

/* ------------------------------------------------------------------ onglets */

/* Trois onglets plus le nom de la marque ne tiennent pas dans 420 px : la
   barre debordait de 9 px, et un debordement horizontal sur telephone fait
   glisser toute la page sous le doigt. Les onglets defilent lateralement au
   lieu de pousser la barre, et l'ascenseur reste invisible. */
#onglets {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#onglets::-webkit-scrollbar {
  display: none;
}

.onglet {
  flex: none;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--texte-3);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.onglet:hover {
  color: var(--texte);
}

.onglet[aria-current="page"] {
  color: var(--texte);
  background: var(--surface-haut);
  border-color: var(--bord-vif);
}

/* --------------------------------------------------------------- les idées */

.dossier .idee {
  padding: 24px;
  margin-bottom: 20px;
}

.dossier .idee > .intitule {
  font-size: clamp(21px, 5vw, 27px);
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--texte);
  margin: 4px 0 10px;
  line-height: 1.25;
}

.dossier .idee .bornes {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin: 16px 0 4px;
}

.dossier .idee .bornes span {
  padding: 5px 11px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 999px;
}

.volet {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bord);
}

.volet .intitule {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texte-3);
  margin-bottom: 8px;
}

.volet p:last-child {
  margin-bottom: 0;
}

.volet ul {
  margin: 0;
  padding-left: 20px;
}

.volet li {
  margin-bottom: 6px;
}

/* Ce qui va, en vert. Ce qui coince, en rouge. Les deux sont affichés côte à
   côte et avec le même poids : une fiche qui ne montre que le vert est une
   fiche de vente, pas un classement. */
.volet.raisons {
  border-top-color: color-mix(in srgb, var(--acquis) 40%, var(--bord));
}

.volet.raisons li::marker {
  color: var(--acquis);
}

.volet.reserves {
  border-top-color: color-mix(in srgb, var(--urgence) 40%, var(--bord));
}

.volet.reserves li::marker {
  color: var(--urgence);
}

/* `.volet.rappel` vivait ici. `.volet` reste, les idees l'emettent toujours ;
   c'est la seule variante rappel qui est morte avec le plan. */

.dossier .ecartees {
  margin: 10px 0 30px;
}

.dossier .ecartees ul {
  margin: 0;
  padding: 0 0 16px 20px;
  color: var(--texte-2);
  font-size: 15px;
}

.dossier .ecartees li {
  margin-bottom: 8px;
}

/* `.bloc-prompt` et `.copier` vivaient ici. Meme histoire que les trente
   jours : partagees avec /apercu, mortes seulement une fois le prompt retire
   des deux cotes. */

/* `.dossier .phase`, `.jours`, `.jour` et toutes leurs sous-regles vivaient
   ici : la mise en page des trente jours. Elles etaient PARTAGEES avec la page
   publique /apercu, qui les emettait aussi, et c'est pour ca qu'elles n'ont pu
   partir qu'une fois vuePlan retiree des deux cotes. */

@media (min-width: 720px) {
  .dossier .idee {
    padding: 28px 30px;
  }
}

/* ------------------------------------------------ la colonne du dossier --

   LES PARTIES DU DOSSIER SONT UNE COLONNE A GAUCHE, PAS UNE RANGEE EN HAUT.

   Ilyasse : « ca serait pas mieux que les volets ils soient dans une barre
   laterale a gauche ». La recette visuelle vient de la colonne du studio, qui
   marche deja : rangees pleine largeur, alignees a gauche, 9px de rayon, fond
   `surface-haut` sur l'entree courante.

   MAIS RIEN N'EN EST RECOPIE TEL QUEL, et surtout pas son `position: fixed`.
   Celui du studio ne tient que parce que `body.studio` est en `height: 100dvh`
   et `overflow: hidden`. Le dossier, lui, est un document qui defile, avec un
   pied de page en fin de flux : une colonne fixe sortirait du flux, laisserait
   le contenu passer dessous et rendrait ce pied inatteignable. `sticky` fait
   le meme effet en restant dans le flux.

   Et pas de tiroir sur telephone non plus : il faudrait un bouton, un voile,
   un `overflow: hidden` sur le corps et un z-index a arbitrer contre l'entete.
   Tiroir ferme, plus rien ne dirait dans quelle partie du dossier on est. La
   rangee horizontale actuelle reste donc la rangee du telephone, simplement
   posee sous l'entete au lieu d'etre dedans. */

.dossier {
  /* Mesure de l'entete collante, relue dans le navigateur : 12px de marge
     haute, 29px de contenu, 12px de marge basse, 1px de filet. La rangee des
     parties se colle juste dessous, sinon elle disparait des qu'on descend et
     changer de partie oblige a remonter toute la page. */
  --h-entete: 54px;
}

.dossier #onglets {
  position: sticky;
  top: var(--h-entete);
  z-index: 15;
  padding: 10px var(--gouttiere);
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bord);
}

/* UNE COLONNE VIDE NE PREND PAS DE PLACE, et ça n'est pas un détail de style.

   Le nav existe dans le HTML avant que quiconque soit connecté, et `monter` ne
   le remplit qu'une fois le dossier reçu. Sur l'écran de connexion et sur les
   quatre messages, il restait donc une colonne vide de 226px dans la rangée :
   elle ne se voyait pas, mais elle poussait la carte de connexion de 113px vers
   la droite. La toute première chose que voit quelqu'un qui revient était
   décentrée, sans que rien ne l'indique.

   `:empty` est exact ici : le nav n'a aucun enfant tant que `monter` n'a pas
   fabriqué ses boutons, et il en a dès qu'elle l'a fait. Le HTML ne laisse
   aucune espace entre ses balises, sinon le nœud de texte suffirait à le rendre
   non vide. */
.dossier #onglets:empty {
  display: none;
}

@media (min-width: 1000px) {
  .dossier-corps {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    /* Une borne pour les tres grands ecrans, et elle ne depend pas de la vue :
       c'est ce qui garantit que la colonne se pose au meme endroit sur
       l'atelier que sur une page de lecture. */
    max-width: 1600px;
    margin: 0 auto;
  }

  /* LA COLONNE EST DU MOBILIER : ELLE NE BOUGE PAS D'UNE VUE A L'AUTRE.

     Premier essai, le couple colonne + contenu etait centre comme un tout.
     Mesure : la colonne se posait a 214px sur les ecrans de lecture et a 0 sur
     l'atelier, qui prend toute la largeur. Elle sautait donc de 214px a chaque
     passage de l'un a l'autre, sous l'oeil de quelqu'un qui n'a fait que
     cliquer dans un menu.

     Elle est donc calee a gauche, et c'est le CONTENU qui se recentre dans ce
     qui reste. Son `margin: 0 auto` fait exactement ca, a condition de ne pas
     lui demander de centrer sur la fenetre entiere : la rangee flex le limite
     a l'espace situe apres la colonne. */
  .dossier .dossier-corps > main#ecran {
    flex: 1 1 auto;
    /* Sans ca, une vue large (l'atelier) ne peut plus retrecir et deborde. */
    min-width: 0;
  }

  .dossier #onglets {
    flex: none;
    width: 226px;
    flex-direction: column;
    gap: 2px;
    /* La rangee du telephone defilait lateralement ; empilee, elle n'a plus
       rien a faire defiler. */
    overflow-x: visible;
    top: 82px;
    padding: 34px 0 0 var(--gouttiere);
    background: none;
    backdrop-filter: none;
    border-bottom: 0;
  }

  .dossier #onglets .onglet {
    width: 100%;
    padding: 9px 12px;
    border-radius: 9px;
    text-align: left;
    font-size: 14.5px;
  }
}

/* Les deux liens de la barre d'accueil. Le lien vers le dossier est volontairement
   discret : il ne s'adresse qu'a ceux qui ont deja paye, et il ne doit pas
   disputer l'attention au bouton qui fait entrer dans le parcours. */
.liens-entete {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lien-discret {
  color: var(--texte-3);
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.lien-discret:hover {
  color: var(--texte);
}

/* ============================================================ pages legales
   Mentions legales et remboursement. Deux pages de texte, sans JavaScript :
   une mention legale qui ne s'affiche que si un script demarre est une mention
   legale absente pour qui bloque les scripts, et c'est justement la page dont
   l'absence se reproche.

   Pas de fioriture, une mesure de lecture confortable, et des titres qui se
   distinguent sans crier. */

/* ------------------------------------------------------- ecrans courts --

   La connexion, les trois messages du dossier, et la page de mot de passe.
   Deux champs et un bouton : une carte, centree, et pas une page.

   Avant, ces ecrans heritaient de la largeur de l'atelier : sur 1440px, le
   champ d'adresse mesurait 1240px, soit 86 % de la page, et le bouton restait
   colle a gauche sous deux barres qui traversaient l'ecran. */

main#ecran.etroit {
  max-width: 420px;
  margin: 0 auto;
  /* Centre verticalement dans ce qui reste sous l'en-tete, sans jamais forcer
     un depassement : `min-height` et non `height`, pour qu'un message long
     pousse la page au lieu d'etre coupe. */
  min-height: calc(100svh - 190px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

main#ecran.etroit .tete {
  padding-top: 0;
  text-align: center;
}

main#ecran.etroit .tete .chapo {
  max-width: none;
}

/* Une seule action a l'ecran : elle prend toute la carte. Un bouton de 420px
   dans une carte de 420px, c'est la meme chose, mais ecrit une seule fois. */
main#ecran.etroit .actions {
  margin: 4px 0 0;
}

main#ecran.etroit .actions .bouton,
main#ecran.etroit .actions button {
  max-width: none;
  width: 100%;
}

/* LA CARTE DES ECRANS COURTS. Ce sont les seuls ecrans qu'une personne voit
   avant d'etre entree, et ils n'avaient aucune forme : les champs, le bouton et
   les liens etaient poses a meme le graphite. Une carte, un filet, une ombre
   portee tres etalee, et le meme rayon que partout ailleurs. */
main#ecran.etroit .panneau {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 32px 28px 22px;
  box-shadow: var(--ombre);
}

/* Le titre n'a plus a pousser le haut de la page : c'est la carte qui respire
   maintenant, et 40px de padding sous son propre bord ferait un trou. */
main#ecran.etroit .panneau .tete {
  padding-bottom: 22px;
}

/* Deux champs etiquetes ne respirent pas comme deux champs nus : l'etiquette du
   second se colle au champ du premier et on ne sait plus a qui elle appartient. */
main#ecran.etroit .champs {
  gap: 16px;
  margin-bottom: 20px;
}

/* Le separateur separe : colle sous le bouton, il en avait l'air d'une legende. */
main#ecran.etroit .separateur {
  margin: 20px 0 16px;
}

/* LE CHAMP REMPLI PAR LE NAVIGATEUR. Chrome repeint le fond en bleu pale et le
   texte en noir, par-dessus tout ce que la feuille demande : sur un formulaire
   sombre, le mot de passe ressortait en bloc clair au milieu de la carte. La
   seule prise est une ombre interne assez epaisse pour couvrir le champ, et la
   transition de neuf mille secondes qui empeche le bleu de revenir. */
.champ:-webkit-autofill,
.champ:-webkit-autofill:hover,
.champ:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texte);
  -webkit-box-shadow: 0 0 0 1000px var(--fond-2) inset;
  caret-color: var(--texte);
  transition: background-color 9999s ease-in-out 0s;
}

/* DEUX BOUTONS BLANCS COTE A COTE NE DISENT PLUS LEQUEL EST LE GESTE. Celui de
   Google portait son blanc en dur dans l'attribut style, donc identique a
   l'action principale en nuit, et blanc sur blanc en jour. Il devient ce qu'il
   est : le second chemin. */
/* Le bouton qui porte une marque : le dessin et le mot sur la meme ligne,
   centres ensemble. `.bouton` est du texte centre par defaut, un enfant en plus
   le decalerait. */
.bouton.avec-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bouton.avec-logo svg {
  flex: none;
}

.bouton.second {
  background: none;
  color: var(--texte);
  border-color: var(--bord-vif);
  box-shadow: none;
}

.bouton.second:hover {
  background: var(--surface-haut);
  border-color: var(--bord-net);
}

/* L'etiquette au-dessus du champ, et pas seulement dans le champ : un indice
   ecrit en placeholder disparait des qu'on tape, et il disparait aussi quand le
   navigateur remplit tout seul. */
.champ-bloc {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.champ-bloc > .etiquette {
  padding-left: 2px;
  color: var(--texte-3);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* La barre d'accent a gauche pointe le debut d'une ligne : sous un texte
   centre, elle ne pointe plus rien. On rend la carte symetrique. */
main#ecran.etroit .mention {
  text-align: center;
  border-left: 0;
  border-top: 1px solid var(--bord);
  border-radius: 0 0 var(--rayon-s) var(--rayon-s);
  background: none;
  padding: 14px 4px 0;
  margin-top: 22px;
}

/* Sur telephone, la carte occupe deja toute la largeur utile : on lui rend sa
   respiration verticale plutot que de la coincer au milieu. */
@media (max-width: 560px) {
  main#ecran.etroit {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 28px;
  }
}

.legal main {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px var(--gouttiere) 60px;
}

.legal h1 {
  font-size: clamp(30px, 7vw, 42px);
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.legal .maj {
  color: var(--texte-3);
  font-size: 14px;
  margin: 0 0 36px;
}

.legal section {
  margin-bottom: 30px;
}

.legal h2 {
  font-size: clamp(21px, 4.8vw, 26px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.legal h3 {
  font-size: 18px;
  margin: 0 0 10px;
}

.legal p {
  color: var(--texte-2);
  margin: 0 0 12px;
}

.legal a {
  color: var(--accent-clair);
}

.legal hr {
  border: none;
  border-top: 1px solid var(--bord);
  margin: 44px 0 34px;
}

.legal ol,
.legal ul {
  color: var(--texte-2);
  padding-left: 22px;
  margin: 0 0 12px;
}

.legal li {
  margin-bottom: 12px;
}

.legal li b {
  color: var(--texte);
}

/* L'identite de l'editeur se lit comme une fiche, pas comme un paragraphe :
   c'est ce qu'on vient verifier ligne par ligne. */
.legal .identite {
  list-style: none;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.legal .identite li {
  margin-bottom: 8px;
}

.legal .identite li:last-child {
  margin-bottom: 0;
}

/* La phrase de garantie est l'engagement lui-meme : elle ne se lit pas comme
   le reste du texte. */
.legal .accroche {
  padding: 16px 18px;
  background: var(--fond-2);
  border-left: 3px solid var(--acquis);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  color: var(--texte);
  font-size: 17.5px;
}

/* Le logo, a gauche du nom dans les barres. Les deux sont un seul lien : deux
   liens cote a cote vers la meme page font deux arrets au clavier pour une
   seule destination. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.marque img {
  width: 26px;
  height: 26px;
  display: block;
}

/* Les liens poses dans un texte, hors pages legales. Sans cette regle ils
   sortent en bleu souligne par defaut du navigateur, ce qui est illisible sur
   le fond presque noir et ne ressemble a rien d'autre sur le site. */
.mention a,
.chapo a {
  color: var(--accent-clair);
  text-decoration-color: color-mix(in srgb, var(--accent-clair) 45%, transparent);
  text-underline-offset: 2px;
}

.mention a:hover,
.chapo a:hover {
  color: var(--texte);
}

/* `.choix-idee` vivait ici, le choix de l'idee a construire dans l'onglet
   du depot. L'onglet est parti le 15 septembre 2026, plus rien n'emet cette
   classe. */

/* ================================================================== atelier
   La conversation a gauche, l'apercu a droite. C'est la disposition de Lovable
   et de Bolt, et elle n'est pas un hasard : on ne construit pas en aveugle,
   on construit en regardant.

   SUR TELEPHONE, LES DEUX S'EMPILENT, apercu en premier. L'ordre compte : ce
   qu'on veut voir en arrivant, c'est le produit qui existe deja, pas un champ
   de saisie vide. C'est toute la difference entre « voici ton produit,
   change-le » et « dis-moi quoi construire ». */

.atelier {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  margin-top: 20px;
}

.colonne-apercu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pages-apercu {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.pages-apercu::-webkit-scrollbar {
  display: none;
}

.onglet-page {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: none;
  color: var(--texte-3);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.onglet-page[aria-pressed="true"] {
  color: var(--texte);
  background: var(--surface-haut);
  border-color: var(--bord-vif);
}

/* Le cadre de l'apercu imite une fenetre de navigateur sans en dessiner une :
   un faux navigateur dessine est exactement ce qu'on reproche a la reference,
   qui en affiche un pour faire croire a une generation. */
.apercu {
  width: 100%;
  height: 62vh;
  min-height: 380px;
  border: 1px solid var(--bord-vif);
  border-radius: var(--rayon);
  background: #fff;
  display: block;
}

/* -------------------------------------------------------------------- fil */

.colonne-fil {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fil {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 4px;
}

.echange {
  padding: 12px 14px;
  border-radius: var(--rayon-s);
  background: var(--surface);
  border: 1px solid var(--bord);
}

.echange.toi {
  background: var(--fond-2);
  border-color: var(--bord-vif);
}

.echange .qui {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--texte-3);
  margin-bottom: 5px;
}

.echange.atelier .qui {
  color: var(--accent-clair);
}

.echange p {
  margin: 0;
  color: var(--texte);
  font-size: 15.5px;
}

.echange .touches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.echange .touches code,
.liste-fichiers code {
  padding: 3px 8px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--acquis);
}

/* ----------------------------------------------------------------- saisie */

.saisie-zone {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 12px;
}

.champ.saisie {
  flex: 1;
  min-height: 52px;
  resize: vertical;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.45;
}

.saisie-zone .bouton {
  width: auto;
  flex: none;
  padding: 15px 22px;
}

.actions-atelier {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.actions-atelier .bouton {
  width: auto;
  flex: 1;
  min-width: 180px;
  padding: 12px 18px;
  font-size: 15px;
}

.fichiers {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bord);
}

.liste-fichiers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.liste-fichiers code {
  color: var(--texte-3);
}

/* L'atelier est la seule vue qui gagne vraiment a la largeur : sur un ecran
   d'ordinateur, voir la conversation et le produit en meme temps supprime
   l'aller-retour qui casse le rythme. */
@media (min-width: 1000px) {
  /* LA LARGEUR SE DEMANDE, ELLE NE S'HERITE PLUS.

     Cette regle s'ecrivait `:not(.etroit)`, et tant que `poser` reposait la
     marque a chaque rendu, elle n'etait jamais satisfaite : tout le dossier
     tenait dans 420px. Corriger ca l'a rendue vraie pour les CINQ vues d'un
     coup, l'atelier comme les ecrans de lecture, et un texte lu sur 1240px de
     large est un texte qu'on ne lit pas.

     L'atelier est la seule vue qui gagne a la largeur, et il la demande
     maintenant par `poser(..., { large: true })`. Les autres restent sur les
     760px de la section dossier, qui sont une mesure de lecture. */
  .dossier main#ecran.large {
    max-width: 1280px;
  }
}

/* LE SEUIL DES DEUX COLONNES DE L'ATELIER EST REMONTE A 1240px, ET C'EST LA
   COLONNE DE GAUCHE QUI L'EXIGE.

   Il etait calcule quand le dossier prenait toute la fenetre. Les 226px de la
   colonne plus sa gouttiere partent maintenant du meme budget : a 1100px de
   fenetre, l'atelier ne disposait plus que de 848px, le fil en prend 400 fixes,
   et l'apercu du produit tombait sous 430px. Un apercu plus etroit qu'un
   telephone ne montre plus le produit, il le suggere.

   Sous ce seuil, l'atelier reprend l'empilement du telephone : le fil, puis
   l'apercu dessous. C'est plus long a parcourir, ce n'est jamais illisible. */
@media (min-width: 1240px) {
  .atelier {
    flex-direction: row;
    align-items: stretch;
    gap: 22px;
  }

  .colonne-fil {
    flex: 0 0 400px;
  }

  .colonne-apercu {
    flex: 1;
  }

  .fil {
    max-height: 46vh;
  }

  .apercu {
    height: 76vh;
  }
}

/* Les pages de texte n'ont pas de barre d'action collee en bas : leur bouton
   est une etape dans le flux, pas la seule sortie d'un ecran de parcours.
   Sans cette regle, .actions garde sa position fixe et le bouton flotte au bas
   de la fenetre, tres loin du champ qu'il valide. */
.legal .actions {
  position: static;
  padding: 0;
  background: none;
  margin: 20px 0 30px;
  max-width: 420px;
}

/* ------------------------------------------------ l'aperçu, /apercu.html --

   Une liste verticale de phrases. Elle existe parce que `.bornes`, qui a
   l'air d'être ça, est un `display: flex` avec `space-between` fait pour deux
   ou trois libellés courts sur une MÊME ligne : les neuf idées écartées s'y
   alignaient horizontalement et la page débordait de 293 px sur un écran de
   390. Un débordement horizontal ne se voit pas en lisant le code, et sur
   mobile il casse la page entière. */

.points {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.points li {
  position: relative;
  padding-left: 15px;
  color: var(--texte-2);
  font-size: 15px;
  line-height: 1.55;
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bord-vif);
}

/* Le premier bloc du prompt est du texte préformaté, avec des lignes écrites
   pour une largeur d'éditeur. Sans le retour à la ligne forcé, il pousse la
   page à la largeur de sa plus longue ligne. */
.page-exemple pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

/* ------------------------------------------------ la réaction à un choix --

   SON TIROIR, reprise exacte de `.note-tiroir` et `.note-choix` de trendsaas,
   avec nos noms de jetons. Il fait mieux que le fondu simple qui tenait ici :

   · l'ouverture anime `grid-template-rows` de `0fr` à `1fr`, la seule façon
     d'animer une hauteur inconnue sans la mesurer en JavaScript ;
   · L'ÉTAT VISIBLE EST LA VALEUR PAR DÉFAUT. Son commentaire dit pourquoi, et
     c'est le détail qui compte : si la transition ne joue pas, onglet en
     arrière-plan ou animation interrompue, la note reste LISIBLE. Seul l'état
     fermé masque, et il ne dure que le temps de l'ouverture. L'inverse, un
     état caché par défaut qu'on révèle, laisse une note invisible chaque fois
     que l'animation ne part pas ;
   · `sans-anim` sert au re-rendu : revenir sur un écran déjà répondu doit
     montrer la note tout de suite, pas rejouer son ouverture.

   Le liseré à gauche et le retrait la rattachent à l'option au-dessus. Sans
   eux, elle se lit comme un commentaire sur la question entière, et la
   personne ne comprend pas que c'est SA réponse qui a produit cette phrase. */

.note-tiroir {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.note-tiroir > * {
  overflow: hidden;
  min-height: 0;
}

.note-tiroir.ouvert {
  grid-template-rows: 1fr;
}

.note-tiroir:not(.ouvert) > .reaction {
  opacity: 0;
  transform: translateY(-10px) scaleY(0.97);
}

.note-tiroir.sans-anim,
.note-tiroir.sans-anim > .reaction {
  transition: none;
}

.reaction {
  margin: 6px 0 4px 18px;
  padding: 14px 18px;
  border: 1px solid var(--bord-vif);
  border-left: 2px solid var(--accent);
  border-radius: 0 11px 11px 0;
  background: var(--accent-voile);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte);
  transform-origin: top center;
  transition: opacity 0.3s ease 0.1s, transform 0.38s cubic-bezier(0.22, 0.8, 0.24, 1) 0.06s;
}

@media (prefers-reduced-motion: reduce) {
  .note-tiroir,
  .note-tiroir > .reaction {
    transition: none;
  }
}

/* ======================================================== LE MODE JOUR ==
   Demande par Ilyasse le 15 septembre 2026, pour tout le site.

   POURQUOI CA TIENT EN TRENTE LIGNES et pas en une reecriture : les 1900
   lignes au-dessus ne nomment jamais une couleur en dur, elles passent
   toutes par les jetons du :root. Retourner les jetons retourne donc tout le
   site, et le mode nuit reste le defaut, exactement comme avant.

   LE RAISONNEMENT DU PALETTAGE : on n'eclaircit pas la palette sombre, on
   inverse les ROLES. L'accent acier pale est lisible sur du graphite et
   illisible sur du blanc : en mode jour il descend en acier profond. Et
   l'action, blanche sur fond sombre, devient graphite sur fond clair : dans
   les deux cas c'est le contraste maximal disponible, ce qui est la seule
   chose qui compte pour un bouton d'achat. */

:root[data-theme="jour"] {
  color-scheme: light;

  /* Fonds : blanc casse legerement bleute, jamais de blanc pur. Le blanc pur
     sur un ecran allume fatigue et fait ressortir chaque bord. */
  --fond: #f6f7f9;
  --fond-2: #ffffff;
  --surface: #ffffff;
  --surface-haut: #eceef2;

  /* Traits : la meme opacite qu'en nuit, mais posee en noir. */
  --bord: rgba(12, 14, 20, 0.09);
  --bord-vif: rgba(12, 14, 20, 0.15);
  --bord-net: rgba(12, 14, 20, 0.3);

  --texte: #12141a;
  --texte-2: #545c6b;
  --texte-3: #858d9c;

  /* L'accent descend au lieu de monter. */
  --accent: #5a6475;
  --accent-clair: #38414f;
  --accent-sombre: #949cab;
  --accent-voile: rgba(90, 100, 117, 0.07);
  --accent-halo: rgba(90, 100, 117, 0.22);

  --action: #12141a;
  --action-texte: #ffffff;

  --ombre: 0 20px 48px -22px rgba(12, 14, 20, 0.28);
  --arete: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --lueur: 0 0 0 1px var(--bord-net), 0 10px 30px -14px var(--accent-halo);
}

/* Les deux ombres du studio. Elles etaient ecrites en noir a 45 et 55 pour
   cent directement dans studio.css : sur fond clair, ca posait des taches
   grises sous chaque panneau. */
:root {
  --ombre-panneau: 0 18px 50px rgba(0, 0, 0, 0.45);
  --ombre-maquette: 0 24px 70px rgba(0, 0, 0, 0.55);
  --voile-modale: rgba(0, 0, 0, 0.62);
}

:root[data-theme="jour"] {
  --ombre-panneau: 0 14px 40px -18px rgba(12, 14, 20, 0.3);
  --ombre-maquette: 0 20px 56px -20px rgba(12, 14, 20, 0.34);
  --voile-modale: rgba(20, 24, 32, 0.42);
}

/* LA QUESTION S ECRIT A L ECRAN.

   Demande d Ilyasse du 15 septembre 2026 : « sur chaque page, la question elle
   doit avoir une animation ou elle s ecrit ».

   Le texte est POSE EN ENTIER des la premiere image, en transparent, et chaque
   lettre se revele a son tour. Ecrire dans le DOM caractere par caractere
   ferait grandir le bloc pendant la frappe, et tout ce qui est en dessous
   descendrait d une ligne au milieu de l animation : sur telephone, le premier
   bouton bougerait sous le doigt au moment ou on le vise. */
.titre .lettre {
  opacity: 0;
  animation: lettre-apparait 180ms ease forwards;
}

@keyframes lettre-apparait {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Le reglage systeme coupe tout. Du texte qui apparait lettre a lettre est
   exactement ce que `prefers-reduced-motion` existe pour eteindre, et le
   JavaScript ne pose deja plus de lettres quand il est actif : cette regle est
   la ceinture, pour un titre deja peint avant que le reglage soit lu. */
@media (prefers-reduced-motion: reduce) {
  .titre .lettre {
    opacity: 1;
    animation: none;
  }
}

/* ================================================================== */
/* LES ECRANS AJOUTES PAR LE CHANTIER DU 15 SEPTEMBRE 2026            */
/* ================================================================== */

/* ---------------------------------------- le compteur qui monte -- */

.bloc-compteur {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 26px 0 18px;
}

.compteur-valeur {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(44px, 13vw, 76px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  /* Les chiffres ne doivent pas changer de largeur pendant qu ils defilent :
     sans ca, le bloc entier tremble a chaque image. */
  font-variant-numeric: tabular-nums;
}

.bloc-compteur .unite {
  font-size: 15px;
  color: var(--texte-3);
}

/* ------------------------------------------ le curseur de revenu -- */

/* La mention a cote du chiffre : realiste, accessible, ambitieux, tres
   ambitieux. Elle est posee dans la meme ligne que la valeur, a droite, comme
   dans la reference. */
.pastille-palier {
  margin-left: auto;
  padding: 6px 13px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-2);
  white-space: nowrap;
}

.ligne-clients {
  margin-top: 14px;
}

/* ---------------------------------------------- les cinq emoji -- */

/* Le bareme chiffre demandait une conversion mentale, et devant une note sur
   cinq tout le monde repond 3. Cinq visages se choisissent sans traduire. */
.echelle button.palier-emoji {
  font-size: 26px;
  line-height: 1;
  padding: 12px 0;
  /* La police d emoji du systeme, sinon Instrument Sans rend des carres sur
     certaines machines Windows. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.echelle button.palier-emoji:hover {
  opacity: 0.85;
}

.echelle button.palier-emoji[aria-pressed="true"] {
  filter: none;
  opacity: 1;
  transform: scale(1.12);
}

/* ------------------------------ le champ « pas dans la liste » -- */

.champ-libre {
  padding: 10px 2px 2px;
}

.champ-libre .champ {
  width: 100%;
}

/* ------------------------------------------ le second paragraphe -- */

.corps.second {
  margin-top: 14px;
  color: var(--texte-2);
}

/* ---------------------------------------------- l anneau de calcul -- */

/* Trois anneaux concentriques qui tournent a des vitesses differentes. Rien
   ne mesure une progression : ce serait mentir, le classement ne rend pas
   d avancement. Ils disent seulement que ca travaille. */
.anneau-calcul {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 30px auto 26px;
}

.anneau-calcul i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--texte-2);
  animation: anneau-tourne 1.5s linear infinite;
}

.anneau-calcul i:nth-child(2) {
  inset: 14px;
  border-top-color: var(--texte-3);
  animation-duration: 2.1s;
  animation-direction: reverse;
}

.anneau-calcul i:nth-child(3) {
  inset: 28px;
  border-top-color: var(--bord-fort, rgba(255, 255, 255, 0.3));
  animation-duration: 2.9s;
}

@keyframes anneau-tourne {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .anneau-calcul i { animation: none; }
}

/* ------------------------------------------ la bande de projection -- */

.bande-projection .piste {
  position: relative;
  height: 10px;
  margin: 14px 0 12px;
  border-radius: 999px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
}

.bande-projection .plage {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--texte);
  opacity: 0.85;
  min-width: 4px;
}

.bande-projection .repere {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--texte-3);
}

/* -------------------------------------------- le tableau a un an -- */

.tableau-futur {
  display: grid;
  gap: 1px;
  background: var(--bord);
  border: 1px solid var(--bord);
  border-radius: 14px;
  overflow: hidden;
  margin: 22px 0 18px;
}

.ligne-futur {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  padding: 14px 16px;
  background: var(--fond-2);
}

.ligne-futur .quoi {
  font-weight: 600;
  font-size: 14px;
}

.ligne-futur .combien {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  grid-row: span 2;
  align-self: center;
  font-variant-numeric: tabular-nums;
}

.ligne-futur .comment {
  font-size: 12px;
  line-height: 1.4;
  color: var(--texte-3);
}

/* ---------------------------------------------- avant et apres -- */

.avant-apres {
  display: grid;
  gap: 18px;
  margin: 22px 0 14px;
}

.ligne-avant-apres {
  display: grid;
  gap: 8px;
}

.qui-avant-apres {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.qui-avant-apres .prenom {
  font-weight: 600;
  font-size: 14px;
}

.qui-avant-apres .delai {
  font-size: 12px;
  color: var(--texte-3);
}

.barres {
  display: grid;
  gap: 5px;
}

/* La barre porte son montant DEDANS quand elle est assez large, et a cote
   quand elle ne l est pas : un montant qui deborde d une barre de deux pour
   cent de large sort de l ecran sur telephone. */
.barre {
  position: relative;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 68px;
}

.barre.avant {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  color: var(--texte-3);
}

.barre.apres {
  background: var(--texte);
  color: var(--fond);
  font-weight: 600;
}

.legende-avant-apres {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--texte-3);
  margin-top: 6px;
}

.legende-avant-apres .pastille {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
}

.legende-avant-apres .pastille.avant {
  background: var(--fond-2);
  border: 1px solid var(--bord);
}

.legende-avant-apres .pastille.apres {
  background: var(--texte);
}

.legende-avant-apres .pastille.apres + span {
  margin-right: 0;
}

.etq-illustration {
  align-self: start;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-3);
}