/* ═══════════════════════════════════════════════════════════════════════════
   TUNNEL /creer — feuille de style
   ═══════════════════════════════════════════════════════════════════════════

   Mobile d'abord, et pas seulement dans l'ordre des media-queries : la page
   est PENSÉE pour un pouce. Un écran = une question = toute la hauteur du
   téléphone. Le bouton reste collé en bas, où le pouce se trouve déjà.

   Les trois pièges du plein écran sur mobile, et leur traitement ici :
     • 100vh déborde sous la barre d'adresse de Safari → on utilise 100dvh ;
     • le clavier virtuel recouvre le bouton → le pied d'écran est `sticky`,
       pas `fixed` : il remonte avec le contenu au lieu d'être masqué ;
     • un zoom automatique se déclenche sur iOS dès qu'un champ fait moins de
       16px → tous les champs de saisie sont à 16px, sans exception.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bleu: #1566b3;
  --bleu-fonce: #0f4d8c;
  --bleu-clair: #e8f1fb;
  --vert: #0f7d54;
  --vert-clair: #e3f5ec;
  --encre: #0f2942;
  --gris: #56718e;
  --gris-clair: #8296ab;
  --bord: #dfe7ef;
  --fond: #f6f9fc;
  --blanc: #fff;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(15, 41, 66, .05), 0 8px 24px -12px rgba(15, 41, 66, .18);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  overflow-x: clip;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button, a, input, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }

/* ── Barre de progression ────────────────────────────────────────────────── */
.tunnel-haut {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tunnel-haut[hidden] { display: none; }
.retour {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent;
  color: var(--gris); display: grid; place-items: center; font-size: 22px; line-height: 1;
}
.retour:hover { background: var(--bord); color: var(--encre); }
.retour:disabled { opacity: .25; cursor: default; }
.jauge { flex: 1; height: 8px; border-radius: 99px; background: var(--bord); overflow: hidden; }
.jauge i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--bleu); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.jauge-texte { flex: none; font-size: 12px; font-weight: 700; color: var(--gris-clair); font-variant-numeric: tabular-nums; }

/* ── Un écran ────────────────────────────────────────────────────────────── */
.ecran {
  display: none;
  min-height: calc(var(--hauteur-visible, 100dvh) - 64px - env(safe-area-inset-top, 0px));
  padding: 8px 20px 0;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
}
.ecran[data-hors-compte] { min-height: var(--hauteur-visible, 100dvh); }
.ecran.actif { display: flex; animation: entree .24s cubic-bezier(.2,.8,.2,1); }
@keyframes entree { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.ecran.recule.actif { animation-name: entreeArriere; }
@keyframes entreeArriere { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

/* Chaque écran est dimensionné pour tenir SANS SCROLL sur un iPhone ouvert
   dans Safari (390 × 664 visibles, barres comprises). Le scroll reste permis
   — jamais bloqué — pour les petits écrans et les photos ajoutées : il n'est
   simplement plus nécessaire dans le cas courant. */
.ecran-corps { flex: 1; min-width: 0; padding: 8px 0 12px; }
.ecran-pied {
  position: sticky; bottom: 0; z-index: 10;
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  margin-top: auto;
  background: var(--fond);
  box-shadow: 0 -10px 18px var(--fond);
}

h1, h2 { margin: 0 0 10px; letter-spacing: -.025em; line-height: 1.18; }
h1 { font-size: clamp(1.65rem, 6.8vw, 2.05rem); font-weight: 750; }
h2 { font-size: clamp(1.45rem, 6vw, 1.8rem); font-weight: 750; }
h1, h2 { overflow-wrap: anywhere; text-wrap: pretty; }
h1:focus, h2:focus { outline: none; }
.sous { margin: 0 0 18px; color: var(--gris); font-size: 1rem; }
.sous b { color: var(--encre); }
.etiquette {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  padding: 6px 12px; border-radius: 999px; background: var(--bleu-clair); color: var(--bleu-fonce);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.etiquette-verte { background: var(--vert-clair); color: var(--vert); }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.bouton {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 56px; padding: 14px 20px; border: 0; border-radius: var(--rayon);
  background: var(--bleu); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none;
  box-shadow: 0 3px 0 var(--bleu-fonce);
  transition: transform .15s ease, background .15s ease, opacity .15s ease;
}
.bouton:hover { background: var(--bleu-fonce); }
.bouton:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.bouton[disabled] { background: var(--bord); color: var(--gris-clair); box-shadow: none; cursor: not-allowed; }
.bouton-vert { background: var(--vert); box-shadow: 0 3px 0 #0c6544; }
.bouton-vert:hover { background: #0c6544; }
.bouton-fantome {
  background: none; color: var(--gris); box-shadow: none; min-height: 44px; font-size: 15px;
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.bouton-fantome:hover { background: none; color: var(--encre); }
.sous-bouton { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--gris-clair); text-wrap: balance; }
.legal { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--gris-clair); }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--encre); }

/* ── Champs ──────────────────────────────────────────────────────────────── */
.champ { margin-bottom: 14px; }
.champ label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 700; }
.champ input, .champ textarea {
  width: 100%; min-height: 56px; padding: 15px 16px; border: 1.5px solid var(--bord); border-radius: var(--rayon);
  background: var(--blanc); font-size: 16px; /* 16px minimum : en dessous, iOS zoome au focus */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.champ textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.champ input::placeholder, .champ textarea::placeholder { color: #a8b8c8; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(21, 102, 179, .13); }
.champ input.invalide { border-color: #c0392b; }
.aide { margin: -8px 0 16px; font-size: 13.5px; color: var(--gris); }
.aide b { color: var(--vert); }
.erreur { margin: 0 0 12px; color: #b3261e; font-size: 14px; font-weight: 600; }
.erreur[hidden] { display: none; }

/* ── Pastilles de choix ──────────────────────────────────────────────────── */
/* Trois colonnes de tuiles, icône au-dessus du nom : les 17 métiers tiennent
   dans un écran de téléphone, comme une grille de réponses Duolingo. */
.pastilles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pastille {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; min-height: 84px; padding: 10px 4px 9px;
  border: 1.5px solid var(--bord); border-radius: var(--rayon); background: var(--blanc);
  font-size: 13px; font-weight: 650; line-height: 1.2; text-align: center; transition: .14s ease;
  box-shadow: 0 2px 0 var(--bord);
}
.pastille span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.pastille:active { transform: translateY(2px); box-shadow: none; }
.pastille:hover { border-color: var(--bleu); background: var(--bleu-clair); }
.pastille[aria-pressed="true"] { border-color: var(--bleu); background: var(--bleu-clair); color: var(--bleu-fonce); box-shadow: 0 2px 0 var(--bleu); }
.pastille svg { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--bleu); }
.pastilles-libres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pastille-libre {
  padding: 10px 14px; border: 1.5px solid var(--bord); border-radius: 999px; background: var(--blanc);
  font-size: 14.5px; color: var(--gris); box-shadow: 0 2px 0 var(--bord);
}
.pastille-libre[aria-pressed="true"] { border-color: var(--bleu); background: var(--bleu); color: #fff; font-weight: 700; box-shadow: 0 2px 0 var(--bleu-fonce); }

/* ── Avatars Arthur & Camille ────────────────────────────────────────────── */
.equipe { display: flex; justify-content: center; gap: 18px; margin: 4px 0 16px; }
.tete { text-align: center; }
.tete-photo {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--bleu-clair);
  border: 3px solid var(--blanc); box-shadow: var(--ombre); margin: 0 auto 6px;
}
.tete-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.tete strong { display: block; font-size: 14px; }
.equipe-mini { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* `flex: none` : sans lui, un texte long écrasait les deux photos, qui se
   chevauchaient puis passaient sous le texte. */
.equipe-mini .piles { display: flex; flex: none; }
.equipe-mini .piles img {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--blanc); background: var(--bleu-clair);
  object-fit: cover; object-position: center 12%; box-shadow: 0 1px 3px rgba(15, 41, 66, .15);
}
.equipe-mini .piles img + img { margin-left: -12px; }
.equipe-mini p { margin: 0; min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--gris); }
/* Variante « message » : les deux visages, puis une bulle qui leur appartient. */
.equipe-mini.bulle p {
  position: relative; padding: 9px 12px; border: 1.5px solid var(--bord); border-radius: 14px;
  background: var(--blanc); color: var(--encre);
}
.equipe-mini.bulle p::before {
  content: ""; position: absolute; left: -7px; top: 50%; width: 11px; height: 11px; margin-top: -6px;
  background: var(--blanc); border-left: 1.5px solid var(--bord); border-bottom: 1.5px solid var(--bord);
  transform: rotate(45deg);
}

/* ── Capture réelle, recadrée et agrandissable ───────────────────────────────
   L'image source (484 × 500) est découpée en deux bandes par l'arrière-plan :
   la barre de recherche (y 64 → 136) puis le résultat (y 258 → 500). Les
   positions sont en % : décalage ÷ (hauteur image − hauteur bande). */
.preuve { position: relative; margin: 6px 0 0; }
/* Le fond de la carte reprend EXACTEMENT celui de la capture (#232429), et
   la carte rogne son contenu (`overflow: hidden`) : rien ne dépasse de ses
   coins arrondis. Une ombre douce seulement — une ombre dure décalée
   dessinait des pointes sous les coins. */
.preuve-carte {
  position: relative; display: block; padding: 12px 0 8px; border-radius: 22px; overflow: hidden;
  background: #232429; box-shadow: 0 12px 28px -12px rgba(15, 41, 66, .55); text-decoration: none;
}
.preuve-bande { display: block; width: 100%; background: url("img/premier1.png") no-repeat; background-size: 100% auto; }
.preuve-recherche { aspect-ratio: 484 / 72; background-position: 0 14.9%; }
/* y 258 → 494 : on s'arrête avant la dernière ligne de l'image, plus sombre,
   qui traçait un filet clair au bas de la carte. */
.preuve-resultat { aspect-ratio: 484 / 236; background-position: 0 97.7%; margin-top: 4px; }
/* Pastille « 1er sur Google » : même langage que les boutons du tunnel —
   aplat bleu, léger relief en bas, pas de dégradé ni de rotation. */
.preuve-medaille {
  position: absolute; top: -13px; right: 14px; pointer-events: none;
  display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 12px;
  border-radius: 99px; background: var(--bleu); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 3px 0 var(--bleu-fonce);
}
.preuve-medaille b { font-size: 16px; font-weight: 800; }
.preuve-medaille sup { font-size: 10px; }
.preuve figcaption { padding-top: 12px; text-align: center; font-size: 13.5px; color: var(--gris); }
.preuve figcaption strong { color: var(--encre); }
.preuve figcaption small { display: block; margin-top: 2px; font-size: 12px; color: var(--gris-clair); }
/* ── Prix ────────────────────────────────────────────────────────────────── */
.prix-bloc { background: var(--blanc); border: 1.5px solid var(--bord); border-radius: 18px; padding: 20px; box-shadow: var(--ombre); margin-bottom: 14px; }
.prix-gros { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 6px; }
.prix-bloc.prix-zero {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border-color: var(--vert); background: var(--vert-clair); box-shadow: 0 3px 0 rgba(15, 125, 84, .25);
}
.prix-bloc.prix-zero .prix-gros { color: var(--vert); margin: 0; flex: none; }
.prix-zero-texte { margin: 0; font-size: 14px; line-height: 1.35; color: var(--gris); }
.prix-zero-texte b { display: block; font-size: 16px; color: var(--vert); }
.prix-ensuite { margin-top: 18px; }
.prix-ensuite h3 { margin: 0 0 8px; font-size: 15px; }
.prix-formules { margin: 0; }
/* Les deux formules sont indentées de la même façon : la marge intérieure ne
   sert qu'à loger le fond de la formule mise en avant, sans décaler l'autre.
   Une marge négative sortait le prix Premium hors de l'écran à 360 px. */
.prix-formules > div { padding: 10px 12px; border-top: 1px solid var(--bord); }
.prix-formules dt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 700; }
.prix-formules strong { font-size: 20px; white-space: nowrap; }
.prix-formules small { font-size: 13px; font-weight: 500; color: var(--gris); }
.prix-formules dd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--gris); }
.sous-bouton b { color: var(--vert); }
.prix-formules .prix-jour { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--vert); white-space: nowrap; }
/* La formule Premium est celle qu'on veut voir choisie : elle sort du tableau
   sans crier, par un liseré et une marque, pas par une couleur criarde. */
.prix-formule-phare { position: relative; border-radius: 12px; background: var(--bleu-clair); border-top-color: transparent; }
.prix-marque { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--bleu); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.inclus { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inclus li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; }
.coche { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--vert-clair); color: var(--vert); display: grid; place-items: center; font-size: 13px; font-weight: 800; }

/* ── Options à cocher ────────────────────────────────────────────────────── */
.options { display: grid; gap: 8px; margin-bottom: 8px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 9px 14px;
  border: 1.5px solid var(--bord); border-radius: var(--rayon); background: var(--blanc);
  font-size: 15.5px; font-weight: 600; text-align: left; transition: .14s ease; box-shadow: 0 2px 0 var(--bord);
}
.option[aria-pressed="true"] { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: 0 2px 0 var(--bleu); }
.bascule {
  flex: none; width: 50px; height: 30px; border-radius: 99px; background: #cfd9e4; position: relative;
  transition: background .18s ease;
}
.bascule::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(15, 41, 66, .3); transition: transform .18s cubic-bezier(.2,.8,.2,1);
}
.option[aria-pressed="true"] .bascule { background: var(--vert); }
.option[aria-pressed="true"] .bascule::after { transform: translateX(20px); }

/* ── Couleurs ────────────────────────────────────────────────────────────── */
/* Cinq ronds sur une ligne, en comptant les marges du téléphone de 320 px.
   Chaque cible tactile conserve au moins 44 px. */
.ronds { display: flex; gap: clamp(8px, 2vw, 12px); justify-content: center; margin-bottom: 22px; padding: 4px; }
/* Le dégradé bicolore part du bord extérieur et ne se répète pas : avec une
   bordure transparente, le navigateur répétait l'image sous la bordure et
   des coins carrés apparaissaient dans le rond. La sélection est un anneau
   dessiné en ombre, autour d'un liseré blanc. */
.rond {
  width: clamp(44px, 12vw, 52px); height: clamp(44px, 12vw, 52px); flex: none; border-radius: 50%; padding: 0; position: relative;
  border: 3px solid #fff; background-color: #fff; background-origin: border-box; background-clip: border-box; background-repeat: no-repeat;
  box-shadow: 0 0 0 1.5px var(--bord), 0 3px 6px rgba(15, 41, 66, .16); transition: transform .16s ease, box-shadow .16s ease;
}
.rond:hover { transform: scale(1.08); }
.rond[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--encre), 0 3px 8px rgba(15, 41, 66, .25); transform: scale(1.1); }
.rond[aria-pressed="true"]::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 22px; font-weight: 800; text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
/* Aperçu miniature : une page de site réduite, repeinte à chaque choix. */
.apercu {
  border: 1.5px solid var(--bord); border-radius: 16px; overflow: hidden; background: var(--ap-cream, #f5f6f8);
  box-shadow: var(--ombre); margin-bottom: 8px;
}
.apercu-barre { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--ap-cream, #f5f6f8); border-bottom: 1px solid rgba(0, 0, 0, .07); }
.apercu-pastille { width: 26px; height: 26px; border-radius: 50%; background: var(--ap-ink, #23282e); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.apercu-nom { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ap-ink, #23282e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu-cta { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ap-ink, #23282e); }
.apercu-corps { padding: 18px 14px 20px; background: var(--ap-cream, #f5f6f8); }
.apercu-titre { font-family: "DM Serif Display", Georgia, serif; font-size: 26px; line-height: 1.05; color: var(--ap-ink, #23282e); margin: 0 0 4px; }
.apercu-titre em { color: var(--ap-moss, #4a5560); }
.apercu-ligne { height: 7px; border-radius: 99px; background: var(--ap-ink, #23282e); opacity: .16; margin-top: 9px; }
.apercu-ligne.courte { width: 58%; }
.apercu-bouton { margin-top: 14px; height: 34px; border-radius: 99px; background: var(--ap-ink, #23282e); width: 62%; }
.apercu-bande { height: 26px; background: var(--ap-ink, #23282e); display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.apercu-bande i { width: 7px; height: 7px; background: var(--ap-leaf, #7f8e9d); flex: none; clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%); }
.apercu-bande b { height: 5px; border-radius: 99px; background: var(--ap-cream, #f5f6f8); opacity: .55; flex: 1; max-width: 54px; }

/* ── Photos ──────────────────────────────────────────────────────────────── */
.photos-titre { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; }
.paire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.paire-basse { margin-bottom: 8px; }
.paire-basse .depot { min-height: 96px; gap: 3px; padding: 10px 8px; }
#depotLogo img { object-fit: contain; padding: 10px; background: var(--blanc); }
.depot {
  position: relative; display: grid; place-items: center; align-content: center; gap: 6px; min-height: 108px; padding: 12px;
  border: 2px dashed var(--bord); border-radius: var(--rayon); background: var(--blanc);
  color: var(--gris); font-size: 14px; font-weight: 700; text-align: center; overflow: hidden;
}
.depot:hover { border-color: var(--bleu); color: var(--bleu); }
.depot input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; cursor: pointer; }
.depot:focus-within { outline: 3px solid var(--bleu); outline-offset: 3px; }
.depot img { pointer-events: none; }
.depot svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.depot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.depot em { font-size: 12px; font-weight: 600; font-style: normal; color: var(--gris-clair); }
.depot.rempli { border-style: solid; border-color: var(--vert); }
.depot-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2; padding: 4px 9px; border-radius: 99px;
  background: rgba(15, 41, 66, .78); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.galerie { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.galerie figure { position: relative; margin: 0; width: 80px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--bord); }
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.galerie button {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 6px solid transparent; background-clip: padding-box; border-radius: 50%;
  background: rgba(15, 41, 66, .8); color: #fff; font-size: 13px; line-height: 1; display: grid; place-items: center;
}

/* ── Récapitulatif ───────────────────────────────────────────────────────── */
/* Des tuiles plutôt qu'un tableau : la même information en deux fois moins
   de hauteur. Grille de 6 : une tuile courte en prend 3, une longue 6, et
   la dernière ligne en range trois de 2. */
.recap { margin-bottom: 14px; }
.recap dl { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.recap div {
  grid-column: span 3; min-width: 0; padding: 8px 12px; border: 1.5px solid var(--bord); border-radius: 12px;
  background: var(--blanc); box-shadow: 0 2px 0 var(--bord);
}
.recap div.large { grid-column: span 6; }
.recap div.petite { grid-column: span 2; padding-inline: 10px; }
.recap dt { font-size: 12px; font-weight: 600; color: var(--gris-clair); }
.recap dd { margin: 1px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.consentement { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--bord); border-radius: var(--rayon); background: var(--blanc); margin-bottom: 12px; font-size: 13px; color: var(--gris); line-height: 1.45; }
.consentement input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--vert); }
.consentement a { color: var(--bleu); }

/* ── Chargement ──────────────────────────────────────────────────────────── */
.chargement { text-align: center; padding-top: 6vh; }
.anneau { position: relative; width: 168px; height: 168px; margin: 0 auto 26px; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.anneau .piste { stroke: var(--bord); }
.anneau .jauge-cercle { stroke: url(#degradeAnneau); transition: stroke-dashoffset .3s linear; }
.anneau-pourcent { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 2.3rem; font-weight: 750; letter-spacing: -.03em; }
.anneau-pourcent i { font-size: 1.1rem; font-style: normal; color: var(--gris-clair); }
.chargement-phase { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); margin: 0 0 8px; }
.chargement-titre { font-size: 1.25rem; font-weight: 800; margin: 0 0 8px; }
.chargement-sous { font-size: 15px; color: var(--gris); margin: 0; min-height: 46px; transition: opacity .22s ease; }

/* ── Objectif ────────────────────────────────────────────────────────────── */
/* ── Écran « style » : deux maquettes miniatures côte à côte ─────────────── */
.styles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.style-carte {
  display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 14px; text-align: left;
  border: 1.5px solid var(--bord); border-radius: var(--rayon); background: var(--blanc);
  box-shadow: 0 2px 0 var(--bord); transition: .14s ease; position: relative;
}
.style-carte:active { transform: translateY(2px); box-shadow: none; }
.style-carte[aria-pressed="true"] { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: 0 2px 0 var(--bleu); }
.style-carte b { display: block; font-size: 17px; font-weight: 800; padding: 0 4px; }
.style-carte small { display: block; font-size: 13px; line-height: 1.35; color: var(--gris); padding: 0 4px; }
.style-carte .choix-rond { position: absolute; top: 16px; right: 16px; background: #fff; z-index: 2; }
.style-carte[aria-pressed="true"] .choix-rond { border: 7px solid var(--bleu); }
.mini { height: 176px; border-radius: 10px; overflow: hidden; position: relative; font-family: "DM Serif Display", Georgia, serif; }
.mini-epure { background: #f4f7fa; border: 1px solid #e3eaf1; }
.mini-epure .m-barre { display: flex; align-items: center; gap: 5px; padding: 9px 9px 0; }
.mini-epure .m-rond { width: 14px; height: 14px; border-radius: 50%; background: #14314f; }
.mini-epure .m-trait { height: 4px; width: 36px; border-radius: 9px; background: #14314f; opacity: .35; }
.mini-epure .m-titre { position: absolute; left: 10px; top: 40px; font-size: 19px; line-height: 1.02; color: #14314f; }
.mini-epure .m-titre em { color: #4f93c4; }
.mini-epure .m-arche { position: absolute; right: -8px; top: 34px; width: 62px; height: 92px; border-radius: 40px 40px 6px 6px; background: linear-gradient(160deg, #bcdcf5, #d8e6f2); }
.mini-epure .m-bouton { position: absolute; left: 10px; top: 104px; width: 64px; height: 17px; border-radius: 99px; background: #14314f; }
.mini-epure .m-lignes { position: absolute; left: 10px; right: 10px; bottom: 12px; display: grid; gap: 5px; }
.mini-epure .m-lignes i { height: 4px; border-radius: 9px; background: #14314f; opacity: .14; }
.mini-prestige { background: #0b2138 center / cover no-repeat; color: #fff; }
.mini-prestige::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,33,56,.96) 10%, rgba(11,33,56,.45) 60%, rgba(11,33,56,.3)); }
.mini-prestige > * { position: relative; z-index: 1; }
.mini-prestige .m-barre { display: flex; align-items: center; justify-content: space-between; padding: 9px; }
.mini-prestige .m-carre { width: 14px; height: 14px; border-radius: 2px; background: #4f93c4; }
.mini-prestige .m-cta { width: 30px; height: 11px; border-radius: 2px; background: #4f93c4; }
.mini-prestige .m-titre { position: absolute; left: 10px; bottom: 44px; font-size: 20px; line-height: 1.02; }
.mini-prestige .m-titre em { color: #7fb6e0; }
.mini-prestige .m-bouton { position: absolute; left: 10px; bottom: 16px; width: 70px; height: 17px; border-radius: 2px; background: #4f93c4; }
.mini-prestige .m-bande { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #4f93c4; }
/* L'aperçu de l'écran couleur prend l'allure du style choisi. */
.apercu.apercu-prestige .apercu-barre, .apercu.apercu-prestige .apercu-corps { background: var(--ap-ink, #23282e); border-color: rgba(255,255,255,.12); }
.apercu.apercu-prestige .apercu-nom, .apercu.apercu-prestige .apercu-titre { color: #fff; }
.apercu.apercu-prestige .apercu-titre em { color: var(--ap-leaf, #7f8e9d); }
.apercu.apercu-prestige .apercu-pastille, .apercu.apercu-prestige .apercu-cta, .apercu.apercu-prestige .apercu-bouton { background: var(--ap-leaf, #7f8e9d); border-radius: 3px; }
.apercu.apercu-prestige .apercu-ligne { background: #fff; opacity: .22; }
.apercu.apercu-prestige .apercu-bande { background: var(--ap-leaf, #7f8e9d); }
.apercu.apercu-prestige .apercu-bande i { background: var(--ap-ink, #23282e); }

.choix { display: grid; gap: 12px; }
.choix-bouton {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 14px 16px;
  border: 1.5px solid var(--bord); border-radius: var(--rayon); background: var(--blanc);
  text-align: left; box-shadow: 0 2px 0 var(--bord); transition: .14s ease;
}
.choix-bouton:active { transform: translateY(2px); box-shadow: none; }
.choix-icone {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--bleu-clair); color: var(--bleu); transition: .14s ease;
}
.choix-icone svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.choix-texte { flex: 1; min-width: 0; }
.choix-texte b { display: block; font-size: 16.5px; font-weight: 750; line-height: 1.25; }
.choix-texte small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--gris); }
.choix-rond { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #c3d0dd; transition: .14s ease; }
.choix-bouton[aria-pressed="true"] { border-color: var(--bleu); background: var(--bleu-clair); box-shadow: 0 2px 0 var(--bleu); }
.choix-bouton[aria-pressed="true"] .choix-icone { background: var(--bleu); color: #fff; }
.choix-bouton[aria-pressed="true"] .choix-rond { border: 7px solid var(--bleu); }

/* ── Cartes d'attente, sous l'anneau ─────────────────────────────────────── */
/* Les visages sont posés AU-DESSUS de la carte, qui garde toute sa largeur
   pour le texte. Ils la chevauchent légèrement : c'est « eux » qui parlent. */
.info-visages { position: relative; z-index: 1; display: flex; justify-content: center; margin: 22px 0 -16px; }
.info-visages img {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--fond); background: var(--bleu-clair);
  object-fit: cover; object-position: center 12%; box-shadow: 0 2px 6px rgba(15, 41, 66, .15);
}
.info-visages img + img { margin-left: -12px; }
.info-attente {
  display: grid; margin: 0 0 10px; padding: 24px 16px 14px;
  border: 1.5px solid var(--bord); border-radius: 16px; background: var(--blanc); box-shadow: var(--ombre);
  text-align: center;
}
.info-carte {
  grid-area: 1 / 1; align-self: center;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.info-carte.visible { opacity: 1; transform: none; }
.info-titre { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; }
.info-texte { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gris); }
.info-points { display: flex; justify-content: center; gap: 6px; }
.info-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--bord); transition: .2s ease; }
.info-points i.actif { width: 18px; border-radius: 99px; background: var(--bleu); }

/* ── Succès ──────────────────────────────────────────────────────────────── */
.succes-lien { margin-bottom: 16px; }
/* « Voir mon premier jet » s'efface devant l'activation, sans disparaître. */
.bouton-clair { background: var(--blanc); color: var(--bleu-fonce); border: 1.5px solid var(--bleu); box-shadow: 0 3px 0 var(--bleu); }
.bouton-clair:hover { background: var(--bleu-clair); }
.suite { padding: 16px; margin-bottom: 18px; border: 1.5px solid var(--vert); border-radius: 18px; background: var(--vert-clair); }
.suite-titre { margin: 0 0 12px; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--encre); }
.etapes-suite { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; counter-reset: etape; }
.etapes-suite li { position: relative; padding-left: 36px; font-size: 14px; line-height: 1.4; counter-increment: etape; }
.etapes-suite li::before {
  content: counter(etape); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--vert); color: #fff; font-size: 13px; font-weight: 800;
}
.etapes-suite b { display: block; font-size: 15px; }
.etapes-suite span { color: var(--gris); }
.suite .sous-bouton { color: var(--gris); }
.note-question { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.notes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 4px 0 10px; }
.note {
  min-height: 52px; border: 1.5px solid var(--bord); border-radius: 12px; background: var(--blanc);
  font-size: 16px; font-weight: 700; color: var(--gris); transition: .14s ease; box-shadow: 0 2px 0 var(--bord);
}
.note:hover { border-color: var(--bleu); color: var(--bleu); }
.note[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; box-shadow: 0 2px 0 var(--bleu-fonce); }
.echelle { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--gris-clair); margin-bottom: 18px; }
.carte-merci { background: var(--vert-clair); border: 1.5px solid var(--vert); border-radius: 18px; padding: 18px; margin-bottom: 16px; }

/* ── Écrans larges ───────────────────────────────────────────────────────────
   La page reste un tunnel : on ne l'élargit pas en formulaire de bureau, on
   se contente de respirer davantage. 100 % des visiteurs arrivent du mobile. */
@media (min-width: 640px) {
  .ecran { padding-inline: 24px; }
  h1 { font-size: 2.3rem; }
}

@media (max-width: 359px) {
  .ecran { padding-inline: 16px; }
  .pastille { font-size: 12px; }
  .pastille svg { width: 24px; height: 24px; }
  .prix-bloc { padding: 16px; }
}

/* Téléphones courts (iPhone SE, Android compacts, navigateur Facebook avec
   sa barre) : on resserre encore avant de laisser le scroll prendre le
   relais. Rien n'est masqué, tout est seulement plus serré. */
@media (max-height: 700px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.4rem; }
  h1, h2 { margin-bottom: 8px; }
  .sous { font-size: 15px; line-height: 1.45; margin-bottom: 14px; }
  .etiquette { margin-bottom: 8px; padding: 5px 11px; }
  .pastille { min-height: 76px; padding-block: 7px; }
  .champ { margin-bottom: 10px; }
  .champ label { margin-bottom: 5px; }
  .champ input { min-height: 50px; padding-block: 12px; }
  .equipe-mini { margin-bottom: 12px; }
  .apercu-corps { padding: 12px 14px 14px; }
  .apercu-titre { font-size: 22px; }
  .ronds { margin-bottom: 14px; }
  .option { min-height: 50px; }
  .prix-ensuite { margin-top: 10px; }
  .prix-ensuite h3 { margin-bottom: 4px; }
  .prix-bloc.prix-zero { padding-block: 8px; margin-bottom: 0; }
  .prix-formules > div { padding-block: 7px; }
  .prix-formules dd { font-size: 13px; }
  .recap { margin-bottom: 10px; }
  .recap div { padding-block: 6px; }
  .bouton { min-height: 52px; padding-block: 12px; }
  .bouton-fantome { min-height: 40px; }
  /* Seule exception au « rien n'est masqué » : l'étiquette du prix est
     décorative, et le titre dit déjà la même chose. */
  [data-ecran="prix"] .etiquette { display: none; }
}

/* iPhone SE et équivalents (≈ 550 px visibles) : le scroll redevient parfois
   inévitable, on le réduit au minimum. */
@media (max-height: 620px) {
  .equipe { gap: 14px; margin-bottom: 10px; }
  .tete-photo { width: 56px; height: 56px; border-width: 2px; }
  .tete strong { font-size: 13px; }
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.3rem; }
  .sous { font-size: 14.5px; margin-bottom: 12px; }
  .inclus { gap: 6px; }
  .inclus li { font-size: 14px; }
  .legal { margin-top: 8px; }
  .equipe-mini.bulle p { padding: 7px 10px; font-size: 13px; }
  .champ input { min-height: 46px; padding-block: 10px; }
  .champ textarea { min-height: 64px; }
  .option { min-height: 46px; padding-block: 7px; font-size: 15px; }
  .pastille { min-height: 54px; gap: 3px; }
  .preuve figcaption { padding-top: 8px; }
}

@media (hover: none) {
  .pastille:hover { border-color: var(--bord); background: var(--blanc); }
  .pastille[aria-pressed="true"] { border-color: var(--bleu); background: var(--bleu-clair); }
  .rond:hover { transform: none; }
  .rond[aria-pressed="true"] { transform: scale(1.1); }
}

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