/* Quiz P90+ — charte de « Le visuel de l'application » (OlyLife - Quiz de qualification P90+.md). */

@font-face {
  font-family: "Manrope";
  src: url("polices/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --vert: #1A7F42;          /* action : boutons, réponse choisie */
  --vert-nuit: #0D2D1E;     /* dégradé du logo, début */
  --vert-logo: #23984E;     /* dégradé du logo, fin */
  --jauge-vert: #2EB062;
  --jauge-ambre: #E8A33D;
  --jauge-corail: #E4685A;
  --fond: #F7F9F6;
  --texte: #14251B;
  --texte-doux: #536257;
  --bord: #D9E4DC;
  --vide: #DDE7E0;

  --gouttiere: 16px;
  --ecart: 10px;
  --part: 0.45;             /* largeur de la colonne du double (essai à 45 %) */
  --taille-rep: 15px;
  --taille-titre: 26px;
  --contenu: min(100vw - 2 * var(--gouttiere), 720px);
  --col-double: calc((var(--contenu) - var(--ecart)) * var(--part));
}
@media (min-width: 360px) { :root { --taille-rep: 16px; } }
@media (min-width: 600px) { :root { --taille-rep: 18px; --taille-titre: 30px; --gouttiere: 24px; --ecart: 16px; } }
/* Ordinateur : le double (2,08 fois plus haut que large) ne prend pas plus de 45 % de la hauteur de la fenêtre,
   pour que le texte qui le suit tienne lui aussi à l'écran. */
@media (min-width: 900px) {
  :root { --col-double: min(calc((var(--contenu) - var(--ecart)) * var(--part)), calc((100vh - 300px) / 2.03), calc(45vh / 2.083)); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte); line-height: 1.45;
  background: var(--fond);
  background: linear-gradient(180deg, #EEF7F1 0%, #D5EBDD 100%) fixed;
  overflow-x: hidden;
}
/* Écrans de révélation : vert lumineux, avec une lumière verte derrière le double (à gauche). */
body.sombre {
  color: #fff;
  background:
    radial-gradient(ellipse 55% 40% at 22% 42%, rgba(80, 180, 120, .55), rgba(80, 180, 120, 0) 70%),
    linear-gradient(165deg, #174F31 0%, #1A7F42 60%, #23984E 100%) fixed;
}
/* Motif « cellules en fondu » : hexagones fins derrière le double, estompés vers les bords. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath fill='%231A7F42' fill-opacity='.16' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E") 0 0 / 18px 31.5px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 22% 42%, #000 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0) 85%);
  mask-image: radial-gradient(ellipse 70% 55% at 22% 42%, #000 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0) 85%);
}
body.sombre::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath fill='%23ffffff' fill-opacity='.13' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E") 0 0 / 18px 31.5px;
}
button { font: inherit; color: inherit; }
/* Pas de zone bleutée au toucher, ni de cadre après un clic (le cadre reste pour la navigation au clavier). */
* { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }
img { display: block; }

/* ---------- En-tête : retour, batterie, progression en 6 segments nommés ---------- */

header {
  max-width: calc(720px + 2 * var(--gouttiere)); margin: 0 auto;
  padding: 8px var(--gouttiere) 6px;
  display: grid; grid-template-columns: 36px 1fr 52px; grid-template-rows: auto auto; align-items: center;
  column-gap: 8px;
}
.retour {
  grid-column: 1; grid-row: 1; width: 36px; height: 36px; border: 0; background: none; padding: 0;
  font-size: 34px; line-height: 30px; color: var(--vert); cursor: pointer; border-radius: 50%;
}
.retour:focus:not(:focus-visible) { outline: none; }
.retour[hidden] { display: block; visibility: hidden; }
.sombre .retour { color: #fff; }
.batterie-mini { grid-column: 3; grid-row: 1; justify-self: end; }

/* La marque « 90 Days Transform Your Life ». */
.marque { grid-column: 2; grid-row: 1; justify-self: center; display: flex; align-items: center; gap: 8px; min-width: 0; }
.anneau { flex: none; width: 36px; height: 36px; overflow: visible; }
.anneau .piste { stroke: rgba(26, 127, 66, .14); }
.anneau .arret-clair { stop-color: #5BC786; }
.anneau .arret-fonce { stop-color: #1A7F42; }
.anneau .etincelle { fill: #fff; stroke: #2EB062; stroke-width: 1.6; }
.anneau .nonante { font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: -0.06em; fill: var(--vert-nuit); }
.mots { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.jours { margin-bottom: 3px; font-size: 10px; font-weight: 800; letter-spacing: .46em; color: var(--vert); }
.devise { font-size: 14px; font-weight: 800; letter-spacing: -0.015em; color: var(--vert-nuit); }
.devise em {
  font-style: normal; color: var(--vert);
  background: linear-gradient(90deg, #1A7F42, #2EB062); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sombre .anneau .piste { stroke: rgba(255, 255, 255, .2); }
.sombre .anneau .arret-clair { stop-color: #FFFFFF; }
.sombre .anneau .arret-fonce { stop-color: #9FE3B8; }
.sombre .anneau .etincelle { fill: #1A7F42; stroke: #fff; }
.sombre .anneau .nonante, .sombre .devise { fill: #fff; color: #fff; }
.sombre .jours { color: #9FE3B8; }
.sombre .devise em { color: #fff; background-image: linear-gradient(90deg, #C9F2D7, #fff); }
/* Écran 1 : la marque en grand, la petite de l'en-tête s'efface. */
/* Rien à suivre encore à l'écran 1 : pas d'en-tête, le logo ouvre la page. */
.accueil header { display: none; }
.accueil main { padding-top: 18px; }
.marque-grande { display: flex; align-items: center; gap: 14px; margin: 6px 0 22px; }
.marque-grande .anneau { width: 74px; height: 74px; filter: drop-shadow(0 4px 10px rgba(26, 127, 66, .22)); }
.marque-grande .jours { margin-bottom: 6px; font-size: 13px; letter-spacing: .6em; }
.marque-grande .devise { font-size: 27px; font-size: min(27px, 7vw); letter-spacing: -0.035em; line-height: 1; }
.marque-grande .mots { position: relative; padding-bottom: 10px; }
/* Écran 0 : le slogan sous la marque, puis la promesse dans un encadré. */
/* Le slogan en trois lignes qui montent en intensité, du vert pâle au blanc. */
.slogan { margin: -6px 0 20px; font-size: 25px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.slogan span { display: block; }
.slogan span:nth-child(1) { color: #9FE3B8; }
.slogan span:nth-child(2) { color: #C9F2D7; }
.slogan span:nth-child(3) { color: #fff; }
.accueil.sombre h1 { font-size: 19px; margin-bottom: 6px; }
.accueil.sombre .texte { margin-top: 8px; font-size: 15.5px; }
.promesse {
  margin: 12px 0 0; padding: 12px 14px; border-left: 4px solid #9FE3B8; border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .08); font-size: 14.5px;
}
.cadeau { margin: 18px 0 0; font-size: 16.5px; font-weight: 800; line-height: 1.3; text-align: center; color: #C9F2D7; }
.cadeau + .principal { margin-top: 10px; }
/* Le choix de la langue : un globe à droite du slogan, qui ouvre la liste des trois langues. */
.tete-accueil { position: relative; }
.tete-accueil .slogan { padding-right: 52px; }
.choix-langue { position: absolute; top: 0; right: 0; z-index: 5; }
.bouton-langue {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.bouton-langue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bouton-langue[aria-expanded="true"] { background: #fff; color: var(--vert-nuit); }
.liste-langues {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; margin: 0; padding: 6px; list-style: none;
  border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
.liste-langues button {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--vert-nuit); font-size: 16px; font-weight: 700; text-align: left; cursor: pointer;
}
.liste-langues button.actuelle { background: #EEF7F1; color: var(--vert); }
/* Petits téléphones : on resserre pour que le bouton reste visible sans défiler. */
@media (max-width: 380px) {
  .accueil.sombre main { padding-top: 10px; }
  .accueil.sombre .marque-grande { margin-bottom: 14px; }
  .slogan { margin-bottom: 14px; font-size: 23px; }
  .accueil.sombre .texte p { margin-bottom: 8px; }
  .cadeau { margin-top: 12px; font-size: 15.5px; }
}
@media (min-width: 600px) {
  .slogan { font-size: 32px; }
  .accueil.sombre h1 { font-size: 24px; }
}
/* Un trait dégradé sous la devise, qui s'efface vers la droite. */
.marque-grande .mots::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #2EB062, rgba(46, 176, 98, 0));
}
@media (min-width: 600px) {
  .marque-grande .anneau { width: 92px; height: 92px; }
  .marque-grande .jours { font-size: 15px; }
  .marque-grande .devise { font-size: 36px; }
}
@media (min-width: 600px) {
  .anneau { width: 42px; height: 42px; }
  .jours { font-size: 11px; }
  .devise { font-size: 17px; }
}
.progression {
  grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 4px;
}
.progression[hidden] { display: none; }
.segment .barre { height: 4px; border-radius: 2px; background: var(--vide); overflow: hidden; }
.segment .barre span { display: block; height: 100%; background: var(--vert); border-radius: 2px; }
.segment .nom {
  display: block; margin-top: 4px; font-size: 10px; line-height: 1.15; font-weight: 600; text-align: center;
  color: #93A398; letter-spacing: -0.01em;
}
.segment.fait .nom { color: var(--vert); }
.segment.actuel .nom { color: var(--texte); font-weight: 800; }
.sombre .segment .barre { background: rgba(255, 255, 255, .18); }
.sombre .segment .barre span { background: #fff; }
.sombre .segment .nom { color: rgba(255, 255, 255, .5); }
.sombre .segment.fait .nom { color: rgba(255, 255, 255, .8); }
.sombre .segment.actuel .nom { color: #fff; }
@media (min-width: 600px) { .segment .nom { font-size: 12px; } }

/* La petite batterie : 5 cellules, une par colonne, ou « ? » tant qu'elle est inconnue. */
.pile { position: relative; display: flex; align-items: center; }
.pile .corps {
  display: flex; gap: 2px; width: 46px; height: 22px; padding: 2px; border: 2px solid var(--texte); border-radius: 5px;
}
.pile .borne { width: 3px; height: 8px; margin-left: 1px; background: var(--texte); border-radius: 0 2px 2px 0; }
.pile .cellule { flex: 1; border-radius: 1.5px; background: transparent; }
/* Batteries sur fond plein : le motif du fond ne passe jamais au travers. */
.pile .corps { background: #F4FAF6; }
.sombre .pile .corps { background: #1D5A39; }
.pile .inconnue { position: absolute; left: 0; width: 46px; text-align: center; font-weight: 800; font-size: 14px; line-height: 22px; }
.sombre .pile .corps { border-color: #fff; }
.sombre .pile .borne { background: #fff; }

.cellule.vert { background: var(--jauge-vert); }
.cellule.ambre { background: var(--jauge-ambre); }
.cellule.corail { background: var(--jauge-corail); }

/* Animation 1 sur 3 : un segment qui s'allume avec une légère pulsation. */
.cellule.pulse { animation: pulse .6s ease-out; }
@keyframes pulse {
  0% { transform: scale(1); filter: brightness(1.35); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ---------- Mise en page ---------- */

main {
  max-width: calc(720px + 2 * var(--gouttiere)); margin: 0 auto;
  padding: 10px var(--gouttiere) 32px;
}
h1 {
  font-size: var(--taille-titre); line-height: 1.2; font-weight: 800; letter-spacing: -0.015em;
  margin: 6px 0 10px;
}
.sous { margin: 0 0 14px; font-size: var(--taille-rep); color: var(--texte-doux); }
.sombre .sous { color: rgba(255, 255, 255, .8); }
.indication { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--texte-doux); }

/* Le double à gauche, les réponses à droite. */
.scene {
  display: grid; grid-template-columns: var(--col-double) minmax(0, 1fr); column-gap: var(--ecart);
  margin-top: 14px;
}
/* Le double : aucun fond, l'image détourée se pose directement sur le fond de l'application. */
.double { position: relative; align-self: center; overflow: hidden; }
/* Image 800 × 1000, pieds à 975, tête à 75 ; dans les images « avant », le personnage le plus large tient dans x 164-636.
   On garde la bande x 160-640 (480 px) : l'image fait 166,67 % de la colonne, décalée de 33,33 %.
   Seules des largeurs et des marges en % : même proportion sur tous les téléphones, jamais coupé. */
.double img {
  position: relative; z-index: 1; display: block; width: 166.67%; max-width: none; height: auto;
  margin-left: -33.33%; margin-bottom: -5.2%; pointer-events: none;  /* les pieds (y 975) touchent le bas */
}
/* Écran 2 : une illustration sans visage (deux bulles de conversation). */
.double.illustration { display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.double.illustration svg { width: 88%; height: auto; }

/* La grande batterie, à la place du double (écrans 9 et 10) ou en jauge (écrans 4 et 11). */
.double.pile-seule {
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px;
  height: calc(var(--col-double) * 2.083);
}
.grande {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  width: min(72%, 120px);
}
.grande .borne { width: 36%; height: 10px; border-radius: 4px 4px 0 0; background: var(--texte); }
.grande .corps {
  width: 100%; aspect-ratio: 1 / 1.9; border: 4px solid var(--texte); border-radius: 14px; padding: 5px;
  display: flex; flex-direction: column-reverse; gap: 5px; position: relative; overflow: hidden;
  background: #F4FAF6;
}
.grande .cellule { flex: 1; border-radius: 6px; background: var(--vide); }
.grande .inconnue {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 54px; font-weight: 800;
}
.sombre .grande .borne { background: #fff; }
.sombre .grande .corps { border-color: #fff; background: #1D5A39; }
.sombre .grande .cellule { background: #34694B; }
/* Les cellules allumées gardent leur couleur dans la grande batterie, sur fond clair comme sur fond sombre. */
.grande .cellule.vert, .sombre .grande .cellule.vert { background: var(--jauge-vert); }
.grande .cellule.ambre, .sombre .grande .cellule.ambre { background: var(--jauge-ambre); }
.grande .cellule.corail, .sombre .grande .cellule.corail { background: var(--jauge-corail); }

/* La jauge de l'écran 11. */
.jauge .corps { padding: 0; display: block; }
.sombre .jauge .corps { background: #24603F; }
.jauge .niveau { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.jauge .niveau.vert { background: var(--jauge-vert); }
.jauge .niveau.ambre { background: var(--jauge-ambre); }
.jauge .niveau.corail { background: var(--jauge-corail); }
.jauge .chiffre {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums;
}
@media (min-width: 600px) { .jauge .chiffre { font-size: 40px; } }

/* La colonne des réponses. */
.reponses { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 6px 6px 6px 0; }

/* Cartes de réponse : coins arrondis, fond blanc, fin contour. Au toucher : remplies de vert, avec une coche. */
.option {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 54px;
  padding: 12px 14px; border: 1.5px solid var(--bord); border-radius: 14px; background: #fff;
  font-size: var(--taille-rep); font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 37, 27, .05);
  -webkit-tap-highlight-color: transparent;
}
.option .coche {
  display: none; position: absolute; top: -7px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: var(--vert); font-size: 13px; font-weight: 800; line-height: 22px; text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.option.choisie { background: var(--vert); border-color: var(--vert); color: #fff; }
.option.choisie .coche { display: block; }
.option:focus-visible, .carte:focus-visible, .principal:focus-visible { outline: 3px solid var(--jauge-ambre); outline-offset: 2px; }

/* Boutons */
.principal {
  display: block; width: 100%; margin-top: 18px; padding: 16px; border: 0; border-radius: 14px;
  background: var(--vert); color: #fff; font-size: 17px; font-weight: 800; cursor: pointer;
}
.principal:disabled { opacity: .35; cursor: default; }
.sombre .principal { background: #fff; color: var(--vert-nuit); }
.secondaire {
  display: block; width: 100%; margin-top: 14px; padding: 13px; border: 2px solid var(--vert); border-radius: 14px;
  background: #fff; color: var(--vert); font-size: 16px; font-weight: 800; cursor: pointer;
}
.lien { display: block; margin: 14px auto 0; padding: 8px; border: 0; background: none; color: var(--vert); text-decoration: underline; font-size: 15px; font-weight: 600; cursor: pointer; }

/* ---------- Écran 1 : les cartes d'âge (duo femme-homme) ---------- */

.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.carte {
  position: relative; display: flex; flex-direction: column; padding: 0; border: 1.5px solid var(--bord); border-radius: 16px;
  background: #fff; overflow: hidden; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(20, 37, 27, .05);
}
.carte .visuel { display: flex; }
.carte .libelle { padding: 10px 8px 12px; font-size: var(--taille-rep); font-weight: 800; }
.carte .coche {
  display: none; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: var(--vert); font-weight: 800; font-size: 14px; line-height: 24px;
}
.carte.choisie { background: var(--vert); border-color: var(--vert); color: #fff; }
.carte.choisie .coche { display: block; }

/* Portrait : la tête et les épaules, recadrées dans l'image en pied (x 160-640, y 40-640 sur 800 × 1000). */
/* Uniquement des marges en % de la largeur : le cadre fait toujours 4/5, sur tous les navigateurs. */
.portrait { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; }
.portrait img { width: 166.67%; max-width: none; height: auto; margin: -8.33% 0 -75% -33.33%; }

/* Écran 1 : les âges, en grandes cartes sans visages. */
.carte.age { justify-content: center; min-height: 76px; }
.carte.age .libelle { padding: 18px 8px; font-size: 20px; }

/* Écran 3 : les visages défilent au doigt ; la carte suivante dépasse pour inviter à faire défiler. */
.defile {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 16px calc(-1 * var(--gouttiere)) 0; padding: 4px var(--gouttiere) 10px; scroll-padding: 0 var(--gouttiere);
  scrollbar-width: none;
}
.defile::-webkit-scrollbar { display: none; }
.defile .carte { flex: 0 0 44%; scroll-snap-align: start; }
@media (min-width: 600px) { .defile .carte { flex-basis: 30%; } }
.navigation { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.navigation .indication { margin: 0; text-align: center; }
/* Les flèches, au doigt comme à la souris ; la flèche « suivants » est pleine pour attirer l'œil. */
.fleche {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1.5px solid var(--vert); border-radius: 50%;
  background: #fff; color: var(--vert); font-size: 26px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fleche[data-v="1"] { background: var(--vert); color: #fff; box-shadow: 0 4px 12px rgba(26, 127, 66, .3); }

.bas { margin-top: 24px; font-size: 15px; color: var(--texte); text-align: center; }
.bas p { margin: 0 0 8px; }
.bas .confiance { font-weight: 600; }
.bas .liens { font-size: 14px; }
.bas a { color: var(--vert); font-weight: 600; }
/* La zone géographique, dans un encadré bien visible. */
.zone {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 440px; margin: 14px auto 12px; padding: 8px 8px 8px 16px;
  background: #fff; border: 1.5px solid var(--bord); border-radius: 14px; box-shadow: 0 1px 2px rgba(20, 37, 27, .05);
  font-weight: 700; text-align: left;
}
.zone select {
  min-width: 0; padding: 8px 10px; border: 1.5px solid var(--vert); border-radius: 10px; background: #fff;
  font: inherit; font-size: 15px; color: var(--vert);
}

/* ---------- Écrans sombres ---------- */

.texte { font-size: var(--taille-rep); margin: 16px 0 0; }
.texte p { margin: 0 0 10px; }
.annonce { font-size: calc(var(--taille-titre) - 2px); font-weight: 800; line-height: 1.2; margin: 18px 0 8px; }
.relance { font-style: italic; color: rgba(255, 255, 255, .85); }
.mention { margin: 10px 0 0; font-size: 12.5px; text-align: center; color: rgba(255, 255, 255, .75); }
.cote-jauge { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px; }
.cote-jauge .grande { width: min(58%, 130px); }

/* ---------- Chapitres 2 à 4 ---------- */

/* Listes longues (écrans 12, 14 et 27) : le double reste fixe à gauche pendant que les réponses défilent. */
.scene.liste .double { align-self: start; position: -webkit-sticky; position: sticky; top: 10px; }
.scene.liste .reponses { justify-content: flex-start; }
/* Le bouton des choix multiples reste à portée de pouce, en bas de l'écran (fond plein, même inactif). */
/* Le bouton principal reste visible en bas de l'écran pendant que le contenu défile (comme sur les listes). */
.principal.colle, #ecran > .principal { position: -webkit-sticky; position: sticky; bottom: 12px; z-index: 2; box-shadow: 0 6px 18px rgba(13, 45, 30, .25); }
.sombre #ecran > .principal { box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.principal.colle:disabled, #ecran > .principal:disabled { opacity: 1; background: #A8CDB6; box-shadow: none; }
/* L'image de groupe (état 5 « après ») : entière, sans recadrage. */
.double.entier img { width: 100%; margin-left: 0; margin-bottom: -2.5%; }

/* Écran 16 : la réponse de l'écran 15, en grand. */
.cote-reponse { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.cote-reponse .etiquette { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.cote-reponse .citee { font-size: calc(var(--taille-titre) - 2px); font-weight: 800; line-height: 1.15; }

/* Écran 18 : le curseur de 1 à 10. */
.cote-envie { display: flex; align-items: center; justify-content: center; }
.cote-envie .valeur { font-size: 76px; font-weight: 800; line-height: 1; color: var(--vert); font-variant-numeric: tabular-nums; }
.cote-envie .valeur small { margin-left: 2px; font-size: 24px; color: var(--texte-doux); }
.curseur { margin-top: 16px; }
.curseur input[type="range"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px; margin: 12px 0 8px;
  border-radius: 5px; background: var(--vide); cursor: pointer;
}
.curseur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 3px solid var(--vert); box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.curseur input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--vert); box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.curseur input[type="range"]:focus-visible { outline: 3px solid var(--jauge-ambre); outline-offset: 6px; }
/* Graduations centrées sous le pouce : 15 px de marge = la moitié du pouce. */
.graduations { display: flex; justify-content: space-between; padding: 0 5px; font-size: 13px; font-weight: 700; color: var(--texte-doux); }
.graduations span { width: 20px; text-align: center; }
.curseur .indication { margin-top: 10px; text-align: center; }
.transition { margin: 16px 0 0; font-size: var(--taille-rep); font-weight: 700; font-style: italic; }

/* Pictogrammes (écrans 19 à 23) : vert sur fond clair, blanc sur fond sombre. */
.double.picto { display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.double.picto svg { width: 86%; height: auto; }
svg .fond { fill: #D9EFE1; }
svg .plein { fill: var(--vert); }
svg .trait { fill: none; stroke: var(--vert); }
svg .leger { opacity: .45; }
.sombre svg .fond { fill: rgba(255, 255, 255, .14); }
.sombre svg .plein { fill: #fff; }
.sombre svg .trait { stroke: #fff; }
/* Le pictogramme à gauche, le texte coule autour. */
.picto-texte { margin-top: 12px; font-size: var(--taille-rep); }
.picto-texte::after { content: ""; display: table; clear: both; }
.picto-texte .picto { float: left; width: 34%; margin: 2px 14px 8px 0; }
.picto-texte .picto svg { display: block; width: 100%; height: auto; }
.picto-texte p { margin: 0 0 10px; }

/* Écran 22 : les trois points. */
.points { list-style: none; display: grid; gap: 10px; margin: 6px 0 0; padding: 0; }
.points li {
  padding: 12px 14px; background: #fff; border: 1.5px solid var(--bord); border-radius: 14px;
  font-size: calc(var(--taille-rep) - 1px); line-height: 1.4;
}
.points b, .etapes b, .frise b { color: var(--vert); }
body.clair .mention { color: var(--texte-doux); text-align: left; }

/* Écran 23 : les quatre temps de la séance, numérotés. */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etapes li { position: relative; overflow: hidden; min-height: 28px; margin: 0 0 12px; padding-left: 38px; counter-increment: etape; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--vert); color: #fff; font-size: 15px; font-weight: 800; line-height: 28px; text-align: center;
}
.bandeau { margin: 6px 0 0; padding: 14px 16px; border-radius: 14px; background: #fff; border-left: 4px solid var(--vert); font-size: var(--taille-rep); font-weight: 700; }
.prix { margin: 14px 0 0; font-size: 14px; color: var(--texte-doux); }
.prix a { color: var(--vert); font-weight: 700; }

/* Écran 24 : la frise des 48 heures. */
.frise { position: relative; list-style: none; margin: 14px 0 0; padding: 0 0 0 26px; }
.frise::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 14px; width: 2px; background: #A8D8B9; }
.frise li { position: relative; margin: 0 0 12px; font-size: var(--taille-rep); }
.frise li::before {
  content: ""; position: absolute; left: -26px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--jauge-vert); border: 3px solid #E6F3EA;
}
.question { margin: 18px 0 0; font-size: calc(var(--taille-rep) + 1px); font-weight: 800; line-height: 1.3; }

/* Écran 25 : la citation et nos engagements. */
.citation { margin: 14px 0 0; padding: 18px 18px 16px; background: #fff; border: 1.5px solid var(--bord); border-radius: 16px; }
.citation blockquote { margin: 0; font-size: calc(var(--taille-rep) + 1px); font-weight: 600; line-height: 1.45; }
.citation figcaption { margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--texte-doux); }
.citation.temoin blockquote { font-size: var(--taille-rep); }
.engagements {
  margin: 16px 0 0; padding: 14px 16px; border-left: 4px solid var(--vert); border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .6); font-size: 15px;
}

/* Écran 26 : les cartes du double « après ». */
.cartes-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.carte.apres { text-align: left; }
/* États 1 à 4 : on garde la bande x 100-700 et y 40-975 de l'image 800 × 1000 (le personnage seul, plus grand). */
.carte.apres .visuel { display: block; overflow: hidden; }
.carte.apres .visuel img { width: 133.33%; max-width: none; height: auto; margin: -6.67% 0 -4.17% -16.67%; }
.carte.apres.large .visuel img { width: 100%; margin: 0 0 -2.5%; }
.carte.apres .libelle { padding: 4px 12px 12px; font-size: calc(var(--taille-rep) - 1px); font-weight: 700; line-height: 1.3; }
.carte.apres.large { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.carte.apres.large .visuel { flex: 0 0 50%; }
.carte.apres.large .libelle { flex: 1; padding: 12px 12px 12px 4px; font-size: var(--taille-rep); }
/* Animation 3 sur 3 : l'arrivée du double « après » en fondu. */
.carte.apres img { animation: fondu .9s ease-out both; }
/* Ordinateur : les quatre cartes sur une ligne, la carte de groupe dessous, pour tout voir d'un coup. */
@media (min-width: 900px) {
  .cartes-apres { grid-template-columns: repeat(4, 1fr); }
  .carte.apres.large .visuel { flex: 0 0 26%; }
}
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

/* Écran 27 : le champ « Autre chose ». */
.autre {
  display: block; width: 100%; padding: 12px 14px; border: 1.5px solid var(--vert); border-radius: 14px;
  background: #fff; color: var(--texte); font: inherit; font-size: 16px;
}
.autre[hidden] { display: none; }

/* Écran 28 : le loader, et ses questions en surimpression. */
.etapes-chargement { display: flex; flex-direction: column; justify-content: center; gap: 20px; min-width: 0; }
.etape-chargement .haut { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 6px; font-size: 14px; font-weight: 700; line-height: 1.25; }
.etape-chargement .pourcent { flex: none; color: var(--vert); font-variant-numeric: tabular-nums; }
.etape-chargement .barre { height: 8px; border-radius: 4px; background: var(--vide); overflow: hidden; }
.etape-chargement .barre span { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--vert); }
.etape-chargement.faite .haut span:first-child { color: var(--vert); }
.surimpression {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(13, 45, 30, .45);
}
.surimpression[hidden] { display: none; }
.carte-question {
  width: 100%; max-width: 400px; padding: 22px 18px 18px; border-radius: 18px; background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25); animation: fondu .25s ease-out;
}
.carte-question p { margin: 0 0 16px; font-size: calc(var(--taille-rep) + 1px); font-weight: 800; line-height: 1.3; text-align: center; }
.oui-non { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oui-non .option { justify-content: center; text-align: center; }

/* Fin « Sécurité » */
a.principal, a.secondaire { text-align: center; text-decoration: none; }
.confirmation { margin: 10px 0 0; font-size: 14px; color: var(--texte-doux); word-break: break-all; }

/* ---------- Chapitres 5 et 6 ---------- */

/* Écrans 30 et 31 : le double à gauche, le texte coule autour. */
.picto-texte > .double { float: left; width: 40%; margin: 0 14px 6px 0; }
.picto-texte.large > .double { width: 50%; }
/* Écran 30 : le double à la taille habituelle, à gauche, le texte à côté. */
.echo-texte { display: flex; align-items: center; min-width: 0; margin: 0; font-size: calc(var(--taille-rep) + 1px); font-weight: 600; line-height: 1.5; }
/* Écran 31 : l'image de groupe en entier, centrée au-dessus du texte (au plus 45 % de la hauteur de la fenêtre). */
.groupe-large { display: flex; justify-content: center; margin-top: 10px; }
.groupe-large .double { width: 78%; max-width: 36vh; }
.texte-groupe { margin: 14px 0 0; font-size: var(--taille-rep); }

/* Écran 33 : la phrase en grand, à côté du double. */
.cote-texte { display: flex; align-items: center; min-width: 0; margin: 0; font-size: calc(var(--taille-titre) - 5px); font-weight: 800; line-height: 1.25; }

/* Écran 35 : le message « Venez à deux ». */
.message-deux { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: #fff; border-left: 4px solid var(--vert); font-size: var(--taille-rep); font-weight: 700; }

/* Écran 36 : le prénom et la ville (16 px au moins, pour que l'iPhone ne zoome pas). */
.champs { display: grid; gap: 14px; margin-top: 18px; }
.champ span { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 800; }
.champ input {
  display: block; width: 100%; padding: 14px; border: 1.5px solid var(--bord); border-radius: 14px;
  background: #fff; color: var(--texte); font: inherit; font-size: 17px;
}
.champ input:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px rgba(26, 127, 66, .18); }
.note-envoi { margin: 0; font-size: 14px; color: var(--texte-doux); }
.champs .principal { margin-top: 4px; }

/* Écran 37 : le haut du résultat est sombre, sur toute la largeur. */
.resultat-haut {
  margin: -10px calc(-1 * var(--gouttiere)) 0; padding: 12px var(--gouttiere) 20px; border-radius: 0 0 24px 24px; color: #fff;
  background:
    radial-gradient(ellipse 60% 45% at 50% 40%, rgba(80, 180, 120, .5), rgba(80, 180, 120, 0) 70%),
    linear-gradient(165deg, #174F31 0%, #1A7F42 60%, #23984E 100%);
}
/* Les deux doubles du résultat gardent la taille habituelle du double, même sur ordinateur. */
.avant-apres { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: end; max-width: calc(var(--col-double) * 2 + 26px); margin: 6px auto 0; }
/* L'image de groupe (trois personnes) a besoin de plus de largeur. */
.avant-apres.groupe { grid-template-columns: 0.8fr 22px 1.3fr; }
.avant-apres figure { margin: 0; min-width: 0; }
.avant-apres figcaption { margin-top: 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, .85); }
.fleche-resultat { align-self: center; font-size: 26px; font-weight: 800; text-align: center; }
body.clair .resultat-haut .mention { color: rgba(255, 255, 255, .75); text-align: center; }
.charge-resultat { display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: var(--taille-rep); }
.charge-resultat p { margin: 0 0 6px; }
.charge-resultat .valeur-charge { font-size: calc(var(--taille-titre) - 2px); font-weight: 800; line-height: 1.15; }
.charge-resultat .grande { flex: none; width: 74px; }
.resultat-haut .grande .borne { background: #fff; }
.resultat-haut .grande .corps { border-color: #fff; background: #24603F; border-width: 3px; border-radius: 12px; }
.charge-resultat .jauge .chiffre { font-size: 18px; }
.bloc-resultat { margin-top: 16px; padding: 16px; background: #fff; border: 1.5px solid var(--bord); border-radius: 16px; font-size: var(--taille-rep); }
.bloc-resultat h2 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vert); }
.bloc-resultat p { margin: 0 0 8px; }
.bloc-resultat .objectif { font-size: calc(var(--taille-rep) + 2px); font-weight: 800; line-height: 1.3; }
.bloc-resultat .frise { margin-top: 10px; }
.bloc-resultat .frise li:last-child { margin-bottom: 0; }
.premiers { margin: 0; padding-left: 20px; font-weight: 600; }
.premiers li { margin-bottom: 4px; }

/* Écran 38 : les boutons qui s'enchaînent, puis les options. */
.actions-fin { display: grid; gap: 12px; margin-top: 16px; }
.action {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px;
  border: 2px solid var(--vert); border-radius: 14px; background: var(--vert); color: #fff;
  font-size: 17px; font-weight: 800; line-height: 1.25; text-decoration: none;
}
.action .num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--vert);
  font-size: 15px; line-height: 28px; text-align: center;
}
.action .petit { margin-left: auto; padding-left: 8px; font-size: 13px; font-weight: 600; opacity: .8; }
.action.option { background: #fff; color: var(--vert); }
/* Pas encore allumé : visible, mais il attend le bouton précédent. */
.action.eteinte { background: #E3ECE6; border-color: #E3ECE6; color: #93A398; pointer-events: none; }
.action.eteinte .num { background: #CBD8CF; color: #fff; }
/* Déjà touché : il reste disponible, en blanc, avec une coche. */
.action.faite { background: #fff; color: var(--vert); }
.action.faite .num { background: var(--vert); color: #fff; }
.action:focus-visible { outline: 3px solid var(--jauge-ambre); outline-offset: 2px; }
.phrase-fin { margin: 18px 0 0; font-size: var(--taille-rep); font-weight: 700; }
.ressources { list-style: none; display: grid; gap: 8px; margin: 10px 0 0; padding: 0; }
.ressources a {
  display: block; padding: 12px 14px; border: 1.5px solid var(--bord); border-radius: 14px; background: #fff;
  color: var(--texte); font-size: calc(var(--taille-rep) - 1px); font-weight: 700; text-decoration: none;
}
.ressources a::after { content: " ↗"; color: var(--vert); }
.partage { margin-top: 22px; text-align: center; }

/* ---------- Page d'information (lien inactif) ---------- */

.info { padding-top: 40px; }
.info p { font-size: var(--taille-rep); }

.legal { max-width: min(420px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 20px; font-family: inherit; color: var(--texte); }
.legal::backdrop { background: rgba(13, 45, 30, .5); }
.legal h2 { margin: 0 0 8px; font-size: 19px; }

@media (prefers-reduced-motion: reduce) {
  .cellule.pulse, .carte.apres img, .carte-question { animation: none; }
}