/* RunForce — site de conversion.
 * Palette et polices reprises de l'app (runforce-android/theme/RunForceColors.kt,
 * généré depuis les .colorset iOS). Titres en Montserrat 800 (style des Réglages
 * de l'app) ; Bebas Neue écartée pour le site. Michroma = lettrage de la marque seul. */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  /* Bebas Neue : police des titres DANS l'app, pour réécrire le nom de la course
   * par-dessus la capture. Jamais utilisée pour la typo du site. */
  font-family: "Bebas Neue";
  src: url("fonts/bebasneue_regular.ttf") format("truetype");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Michroma";
  src: url("fonts/michroma_regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --background: #f5f5f5;
  --card: #ffffff;
  --elevated: #ededed;
  --foreground: #1f1f1f;
  --muted-fg: #636363;
  --border: rgba(31, 31, 31, 0.12);
  --brand: #d6bf97;
  --brand-ink: #8a6a28;
  --renfo: #ace5b3;
  --renfo-ink: #327a41;
  --course: #00a6f4;
  --cta: #1f1f1f;
  --cta-fg: #fafafa;
  --nuit: #0f0e0c;          /* fond des sections sombres (DA sombre de l'app) */
  --nuit-card: #25221f;
  --radius: 12px;
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ---------- Marque ---------- */
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marque img { width: 40px; height: 40px; border-radius: 10px; }
.marque span {
  font-family: "Michroma", sans-serif;
  font-size: 19px;
  letter-spacing: 0.14em;
  /* Michroma n'a qu'une graisse : on l'épaissit comme l'app, par un contour. */
  -webkit-text-stroke: 0.6px currentColor;
}
.marque .run { color: #1b1f23; }
.marque .force { color: var(--brand); }

/* ---------- En-tête : transparent sur la photo, plein au défilement ---------- */
header.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
header.top.plein {
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}
.menu-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--background);
  box-shadow: inset 0 0 0 1px var(--border);
  display: grid; place-items: center; color: var(--foreground);
}
.menu-btn svg { width: 20px; height: 20px; }
.menu {
  position: absolute; right: 20px; top: 64px; width: 240px;
  background: var(--card); border-radius: 16px; padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--border);
  display: grid;
  transform-origin: top right;
  animation: menu-ouvre 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.menu.ferme { animation: menu-ferme 0.16s ease forwards; }
@keyframes menu-ouvre { from { opacity: 0; transform: translateY(-6px) scale(0.92); } }
@keyframes menu-ferme { to { opacity: 0; transform: translateY(-6px) scale(0.95); } }
@media (prefers-reduced-motion: reduce) { .menu, .menu.ferme { animation: none; } }
.menu a {
  text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 12px 14px; border-radius: 10px;
}
.menu a:hover, .menu a:focus-visible { background: var(--elevated); outline: none; }
.menu a.cta-menu { background: var(--cta); color: var(--cta-fg); margin-top: 4px; text-align: center; }

/* ---------- Typo ---------- */
.etiquette {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-ink);
}
/* Titres : Montserrat ExtraBold, casse de phrase. */
.titre {
  font-family: "Montserrat", sans-serif; font-weight: 800;
  line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance;
}
h1.titre { font-size: clamp(38px, 6vw, 68px); }
h2.titre { font-size: clamp(30px, 4vw, 46px); }
.chapo { font-size: 18px; color: var(--muted-fg); max-width: 34em; margin: 12px 0 0; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; cursor: pointer; text-decoration: none;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 17px;
  color: var(--cta-fg);
  /* Le reflet du bouton « Ouvrir ma séance » de l'app */
  background: radial-gradient(ellipse 60% 120% at 30% 50%, #4a4a4a 0%, var(--cta) 70%);
  border-radius: 18px; padding: 17px 28px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* Sur fond sombre, on inverse : bouton clair, texte noir. Le noir reste la couleur
 * du bouton sur fond clair (le plus contrasté — cf. benchmark : c'est le contraste
 * qui compte, pas la teinte). */
.btn.clair { background: #f5f5f5; color: #16150f; }
.btn.clair:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4); }
.btn.large { width: 100%; }
.btn .fleche { font-size: 20px; font-weight: 500; line-height: 1; }

.rassure { font-size: 13px; color: var(--muted-fg); margin: 12px 0 0; }
.rassure b { color: var(--foreground); font-weight: 600; }

/* ---------- Héros : gros titre, bouton, téléphone (fond clair, modèle TSE) ---------- */
/* overflow-x seulement : sinon l'ombre du téléphone est coupée net et on voit
 * une ligne entre le héros et le bloc suivant. */
.heros { padding: 132px 0 40px; text-align: center; overflow-x: clip; overflow-y: visible; }
.heros h1 { margin: 0 auto; max-width: 14em; }
/* Surlignage du mot clé, comme le fluo de TSE — ici en sable de la marque.
 * Le mot est aussi en graisse plus légère que le reste du titre : c'est ce
 * contraste de graisse qui le détache, le surlignage ne fait que le souligner. */
.surligne {
  position: relative; white-space: nowrap; font-weight: 500;
  background: linear-gradient(to bottom, transparent 62%, var(--brand) 62%, var(--brand) 96%, transparent 96%);
  padding: 0 0.08em;
}
.heros .btn { margin-top: 32px; }
.heros .rassure { margin-top: 14px; }
.heros-visuel { position: relative; margin-top: 40px; display: grid; place-items: center; }
/* Le halo doit s'éteindre AVANT le bas de la section, sinon la coupure se voit
 * comme une ligne nette entre le héros et le bloc suivant. */
.heros-visuel .halo {
  position: absolute; width: min(120vw, 620px); aspect-ratio: 1; border-radius: 50%; top: -40px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent) 0%, transparent 62%);
}
/* Téléphone du héros : grand, façon TSE, sans être écrasant */
.heros-visuel .telephone { position: relative; width: min(78vw, 310px); }

/* ---------- Sections ---------- */
section.bloc { padding: 88px 0; }
.entete { max-width: 640px; margin-bottom: 36px; }
.entete .titre { margin-top: 10px; }

/* ---------- Avis : bande qui défile ---------- */
.avis { padding: 8px 0 72px; overflow: hidden; }
.avis .entete { margin-bottom: 28px; text-align: center; margin-left: auto; margin-right: auto; max-width: 760px; }
.defile { display: flex; width: max-content; gap: 16px; animation: defile 60s linear infinite; padding: 4px 0; }
.defile:hover, .defile:focus-within { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) {
  .defile { animation: none; }
  .avis-piste { overflow-x: auto; }
}
/* Modèle « Elevate » retenu : la photo carrée, puis une carte de texte détachée
 * juste dessous (8 px). Le résultat passe en pastille DANS le texte. */
/* Photo à sa hauteur, le texte prend le reste : toutes les cartes finissent au même niveau. */
.avis-carte { width: 266px; flex: none; display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.avis-photo { position: relative; border-radius: 18px; overflow: hidden; }
.avis-photo img {
  width: 100%; display: block; aspect-ratio: 1; object-fit: cover;
  /* Un même étalonnage chaud pour toutes les photos : c'est lui qui fait la cohérence. */
  filter: saturate(0.85) sepia(0.12) contrast(1.02);
}
.avis-texte {
  background: var(--cta); color: #f2f0ea; border-radius: 18px;
  padding: 16px 18px; display: grid; gap: 8px; align-content: start;
}
.resultat {
  justify-self: start;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  background: rgba(214, 191, 151, 0.18); color: var(--brand);
  padding: 4px 10px; border-radius: 999px;
}
.avis-texte p { margin: 0; font-size: 14px; line-height: 1.5; color: #e4e0d6; }
/* Étoiles plus grosses, mais dans la même hauteur de ligne qu'avant : rien ne descend dessous. */
.etoiles { color: #ffc531; letter-spacing: 2px; font-size: 19px; line-height: 21.7px; height: 21.7px; }
.auteur { font-size: 12px; color: #a9a49a; }
.auteur b { display: block; color: #f2f0ea; font-weight: 700; font-size: 14px; }

.telephone {
  transform-style: preserve-3d;
  transition: box-shadow 0.3s ease;
  will-change: transform;
}
.indice-slider { text-align: center; font-size: 13px; color: #a9a49a; margin: 6px 0 0; }
/* Châssis du téléphone = une IMAGE SVG posée par-dessus la capture
 * (assets/img/cadre-iphone.svg), comme le fait elevateapp.fr avec son image de
 * hardware. Le centre du SVG est évidé : la capture se voit au travers, et les
 * dégradés de la tranche suivent chaque côté — plus de bande claire, et c'est
 * net à n'importe quelle taille (vectoriel).
 * Géométrie : écran 603 x 1311 dans un appareil de 633 x 1341, donc une tranche
 * de 15 px → 2,37 % en largeur et 1,12 % en hauteur. */
.telephone {
  position: relative; width: 260px; height: auto; flex: none;
  aspect-ratio: 659 / 1355;
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.26)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16));
}
.telephone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("img/cadre-iphone.svg") center / 100% 100% no-repeat;
}
/* ⚠️ « > » obligatoire : sans lui, la règle attrapait aussi l'image de fond de
 * l'écran du bloc 2 (.ep-fond), décalée alors de 14 px par rapport aux surcouches
 * → la fameuse « double jauge ». */
.telephone > img,
.telephone > .ecran-cadre {
  /* Écran 603 x 1311 posé en (28, 22) dans un gabarit de 659 x 1355. */
  position: absolute; left: 4.249%; top: 1.624%; width: 91.502%; height: 96.753%;
  display: block; margin: 0; border-radius: 14.93% / 6.87%;
}
.telephone > img { object-fit: cover; }
/* Vidéo de démonstration posée sur le carré vidéo de la capture d'exécution.
 * Carré relevé sur la capture (603 x 1311, iPhone 17 Pro) : x 24 → 579, y 227 → 782, rayon 22 ;
 * rapporté au gabarit du téléphone (659 x 1355, écran en 28, 22).
 * Invisible tant qu'elle ne joue pas : la capture, dessous, sert d'image d'attente. */
.telephone > video.ecran-video {
  position: absolute; left: 7.891%; top: 18.376%; width: 84.219%; height: 40.959%;
  object-fit: cover; border-radius: 3.964%; background: transparent;
  opacity: 0; transition: opacity 0.45s ease; pointer-events: none;
}
.telephone > video.ecran-video.joue { opacity: 1; }
/* Le bouton « remplacer l'exercice » de l'app, redéposé par-dessus la vidéo. */
.ecran-video-pastille {
  position: absolute; left: 86.343%; top: 21.144%; width: 6.98%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: url("img/app/execution-pastille.webp") center / cover no-repeat;
}
.telephone.petit { width: 200px; }

.puces { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; font-weight: 600; }
.puces li { display: flex; gap: 10px; align-items: center; }
.puces li::before {
  content: "✓"; width: 24px; height: 24px; border-radius: 8px; flex: none;
  background: color-mix(in srgb, var(--renfo) 45%, white); color: var(--renfo-ink);
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}


/* ---------- Relance finale ---------- */
.final { background: var(--nuit); color: #f2f0ea; text-align: center; padding: 96px 0; }
.final .chapo { color: #a9a49a; margin-inline: auto; }
.final .btn { margin-top: 28px; }
.final .rassure { color: #a9a49a; }

/* ---------- Page d'offre ---------- */
/* Page d'offre : en-tête blanc, logo centré */
.page-offre header.top { position: static; background: #fff; box-shadow: 0 1px 0 var(--border); }
.page-offre header.top .wrap { justify-content: center; }
.offre-page { padding: 40px 0 72px; }
.offre-page .wrap { max-width: 560px; }
.formules { display: grid; gap: 12px; margin-top: 24px; }
.formule {
  position: relative; display: grid; gap: 6px; text-align: center;
  background: var(--card); border: 2px solid var(--border); border-radius: 20px;
  padding: 18px 20px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.formule input { position: absolute; opacity: 0; pointer-events: none; }
/* La formule choisie est pleine et noire : on voit d'un coup d'œil ce qu'on prend */
.formule:has(input:checked) {
  background: var(--cta); border-color: var(--cta); color: var(--cta-fg);
}
.formule:has(input:checked) .detail { color: rgba(242, 240, 234, 0.82); }
.formule:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.formule .nom { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.formule .detail { font-size: 15px; color: var(--muted-fg); line-height: 1.4; }
/* Pastille posée à cheval sur le bord haut de la carte */
.badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--renfo); color: #14261a;
  border: 0; border-radius: 999px;
  font-size: 13px; font-weight: 800; white-space: nowrap;
  padding: 6px 16px;
  box-shadow: 0 2px 10px rgba(20, 38, 26, 0.18);
}
/* Frise de l'essai : 3 étapes en ligne, au-dessus des formules */
.frise {
  list-style: none; margin: 22px 0 26px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  text-align: center; isolation: isolate;
}
.frise li { position: relative; padding-top: 22px; }
.frise li::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--border);
}
.frise li.fait::before { background: var(--renfo-ink); border-color: var(--renfo-ink); }
/* le trait qui relie les étapes */
.frise li:not(:first-child)::after {
  content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 3px;
  background: var(--border); z-index: -1;
}
.frise b { display: block; font-size: 13px; font-weight: 800; }
.frise .txt { display: block; font-size: 12px; color: var(--muted-fg); line-height: 1.35; }
.formulaire label.champ { display: block; font-weight: 600; font-size: 14px; margin: 26px 0 8px; }
.formulaire input[type="email"],
.formulaire input[type="text"],
.formulaire input[type="date"] {
  width: 100%; font: inherit; font-size: 17px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--elevated); border: 1px solid rgba(31, 31, 31, 0.16); color: var(--foreground);
}
.formulaire input[type="email"]:focus,
.formulaire input[type="text"]:focus,
.formulaire input[type="date"]:focus { outline: 2px solid var(--foreground); outline-offset: 1px; }
.formulaire .aide { font-size: 13px; color: var(--muted-fg); margin: 8px 0 18px; }
.erreur { color: #ce2324; font-size: 14px; margin: 10px 0 0; min-height: 1em; }

/* ---------- Adapté à ton matériel ----------
 * Volontairement SANS téléphone : trois cartes larges, un pictogramme par
 * réglage. La sélection tourne toute seule tant que le bloc est à l'écran
 * (app.js), avec la même animation de choix que les tuiles d'objectif. */
section.bloc.materiel { padding: 60px 0 44px; }
.materiel .entete-etape { margin-bottom: 44px; }
.mat-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 860px; margin: 0 auto; }
.mat-carte {
  position: relative; background: var(--card); border: 2px solid var(--border); border-radius: 22px;
  padding: 22px 16px 20px; display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}
/* Pictogrammes dessinés dans le style des icônes route / montagne (noir + sable), sans pastille. */
.mat-ic { display: grid; place-items: center; margin-bottom: 12px; }
.mat-ic img { width: 58px; height: auto; display: block; }
/* Visuel fourni par Iban (rendu 3D) : un peu plus large que les pictogrammes, même hauteur de ligne. */
.mat-ic { min-height: 68px; }
.mat-ic img.mat-photo { width: 74px; }
.mat-ic img.mat-photo-haut { width: auto; height: 56px; }
/* Le rack est fin et détaillé : un peu plus grand que les deux autres pour rester lisible. */
.mat-ic img.mat-photo-salle { height: 68px; }
.mat-carte b { font-size: 18px; font-weight: 800; }
.mat-detail { font-size: 14px; color: var(--muted-fg); }
/* Simple liste : aucune carte n'a l'air sélectionnée ni sélectionnable (comme « Tous les objectifs »). */

@media (max-width: 860px) {
  section.bloc.materiel { padding: 48px 0 26px; }
  /* Cartes un peu en retrait des bords de l'écran (26 px), contenu légèrement décalé vers la droite. */
  .mat-grille { grid-template-columns: 1fr; gap: 10px; width: auto; max-width: none; margin: 0 6px; }
  .mat-carte { grid-template-columns: 62px 1fr; justify-items: start; text-align: left; gap: 0 20px; padding: 16px 16px 16px 26px; }
  /* Visuel centré dans sa colonne : la distance au texte est la même sur les trois cartes. */
  .mat-ic { grid-row: span 2; margin-bottom: 0; align-self: center; justify-self: center; }
  .mat-ic img { width: 48px; }
  .mat-ic { min-height: 0; }
  .mat-ic img.mat-photo { width: 58px; }
  .mat-ic img.mat-photo-haut { width: auto; height: 44px; }
  .mat-ic img.mat-photo-salle { height: 56px; }
  .mat-carte b { align-self: end; }
  .mat-detail { align-self: start; }
}

/* ---------- Bande de messages ----------
 * Même mécanique que la bande d'avis (.defile duplique son contenu et se
 * translate de -50 %), mais en sens inverse et plus lentement. Bulles de
 * conversation : claires pour ce qu'on reçoit, noires pour ce qu'on envoie. */
.messages { padding: 4px 0 56px; overflow: hidden; }
.defile-messages { animation-duration: 78s; animation-direction: reverse; align-items: center; gap: 14px; }
.msg {
  flex: none; max-width: 300px; border-radius: 20px; padding: 13px 16px;
  font-size: 14.5px; line-height: 1.5;
}
.msg p { margin: 0; }
.msg span { display: block; margin-top: 6px; font-size: 11.5px; }
.msg.recu {
  background: var(--card); border: 1px solid var(--border); color: var(--foreground);
  border-bottom-left-radius: 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.msg.recu span { color: var(--muted-fg); }
.msg.envoye { background: var(--cta); color: #f2f0ea; border-bottom-right-radius: 6px; }
.msg.envoye span { color: #a9a49a; }
/* léger décalage vertical : ça respire comme une conversation */
.msg.recu { transform: translateY(-10px); }
.msg.envoye { transform: translateY(10px); }

/* ---------- Créé par Estelle ----------
 * Repris du bloc « Par qui ? » d'estellefabrecoaching.com, mais à la DA d'ici :
 * fond blanc entre deux blocs gris (mêmes fondus que le bloc programme), halo
 * sable au lieu du bleu, cartes pleines au lieu du verre dépoli. */
section.bloc.estelle { position: relative; background: var(--card); padding: 58px 0 52px; }
.estelle::before, .estelle::after {
  content: ""; position: absolute; left: 0; right: 0; height: 150px; pointer-events: none; z-index: 0;
}
.estelle::before { top: 0; background: linear-gradient(var(--background), var(--card)); }
.estelle::after { bottom: 0; background: linear-gradient(var(--card), var(--background)); }
.estelle .wrap { position: relative; z-index: 1; }
.estelle .entete-etape { margin-bottom: 52px; }
.est-grille { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; max-width: 900px; margin: 0 auto; }

.est-visuel { position: relative; width: 300px; justify-self: center; }
.est-halo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 130%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent) 0%, transparent 68%);
}
.est-cadre {
  position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.16);
}
.est-cadre img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.est-pastille {
  position: absolute; background: var(--cta); color: var(--cta-fg); border-radius: 14px;
  padding: 10px 14px; text-align: center; max-width: 150px; line-height: 1.2;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.est-pastille b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* > span : la seconde ligne de la pastille. Le chiffre animé, lui, vit DANS le <b>
 * et doit rester inline (sinon « +10 ans » se casse en trois lignes). */
.est-pastille > span { display: block; font-size: 12px; font-weight: 600; color: #cfc6b4; }
.est-pastille b span { display: inline; font: inherit; color: inherit; }
.est-pastille-haut { top: -16px; left: -26px; }
.est-pastille-bas { bottom: -16px; right: -26px; }
.est-pastille-bas b { font-size: 14px; }
/* Arrivée : la photo monte et se pose, puis les deux pastilles apparaissent
 * l'une après l'autre. Rien de tout ça en « mouvement réduit » (la classe
 * .vu n'est jamais posée dans ce cas). */
@media (prefers-reduced-motion: no-preference) {
  html.anim .est-visuel[data-anim] { transform: translateY(34px) scale(0.94); }
  html.anim .est-visuel[data-anim].vu { transform: none; transition: opacity 0.9s cubic-bezier(0.22, 0.8, 0.24, 1), transform 0.9s cubic-bezier(0.22, 0.8, 0.24, 1); }
  html.anim .est-pastille { opacity: 0; }
  html.anim .est-visuel.vu .est-pastille { animation: pastille-arrive 0.65s cubic-bezier(0.22, 1.2, 0.36, 1) both; }
  html.anim .est-visuel.vu .est-pastille-haut { animation-delay: 0.35s; }
  html.anim .est-visuel.vu .est-pastille-bas { animation-delay: 0.52s; }
}
@keyframes pastille-arrive {
  0% { opacity: 0; transform: translateY(14px) scale(0.85); }
  60% { opacity: 1; transform: translateY(-3px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}

.est-texte .etiquette { display: block; margin-bottom: 10px; }
.est-texte .titre { margin-bottom: 22px; }
.est-texte p { margin: 0 0 16px; color: var(--muted-fg); font-size: 16.5px; line-height: 1.65; }
.est-texte p b { color: var(--foreground); font-weight: 700; }
.est-texte p:last-child { margin-bottom: 0; }
.estelle .cta-centre { text-align: center; margin-top: 44px; }

@media (max-width: 860px) {
  section.bloc.estelle { padding: 42px 0 40px; }
  .est-grille { grid-template-columns: 1fr; gap: 46px; justify-items: center; }
  .est-texte { text-align: center; }
  .est-texte p { text-align: left; }
  .est-visuel { width: min(280px, 74vw); }
  .est-pastille-haut { left: -14px; }
  .est-pastille-bas { right: -14px; }
}

/* ---------- FAQ ---------- */
/* section.bloc.faq et pas .faq : sinon le padding générique de section.bloc
 * (88 px, plus spécifique) l'emporte et laisse un grand vide avant la FAQ. */
section.bloc.faq { padding: 24px 0 88px; }
.faq-liste { display: grid; gap: 10px; max-width: 760px; }
.faq details {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px;
}
.faq summary {
  /* Pas de surlignage du texte au clic : sans ça, l'ouverture fait clignoter une
   * sélection grise sur la question. */
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: pointer; font-weight: 700; font-size: 16px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.24, 1);
  content: "+"; font-weight: 700; font-size: 20px; color: var(--muted-fg); line-height: 1;
}
.faq details[open] summary::after { content: "–"; transform: rotate(180deg); }
/* overflow caché : l'animation de hauteur (app.js) doit rogner le texte */
.faq details p { overflow: hidden; margin: 12px 0 0; color: var(--muted-fg); font-size: 15px; line-height: 1.55; }
.faq .a-valider { color: var(--brand-ink); font-style: italic; }

/* ---------- Pied de page ---------- */
.pied { background: var(--card); color: var(--foreground); padding: 56px 0 40px; border-top: 1px solid var(--border); }
/* Pied de page en colonnes, sur le modèle d'elevateapp.fr : la marque et le
 * contact à gauche, puis Navigation et Légal. */
.pied-haut {
  display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; align-items: flex-start;
  padding-bottom: 30px; border-bottom: 1px solid var(--border);
}
.pied-marque { max-width: 340px; }
.pied-contact { display: flex; align-items: center; gap: 8px; margin-top: 14px !important; }
.pied-contact svg { width: 18px; height: 18px; color: var(--muted-fg); flex: none; }
.pied-contact a { color: var(--foreground); text-decoration: none; font-weight: 600; font-size: 14px; }
.pied-contact a:hover { text-decoration: underline; }
.pied-marque .stores { margin-top: 20px; }
.pied-colonnes { display: flex; gap: 56px; flex-wrap: wrap; }
.pied-colonne { display: grid; gap: 10px; align-content: start; }
.pied-colonne h2 {
  margin: 0 0 4px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--foreground);
}
.pied-colonne a { color: var(--muted-fg); text-decoration: none; font-size: 14px; }
.pied-colonne a:hover { color: var(--foreground); text-decoration: underline; }
.pied-marque p { margin: 12px 0 0; color: var(--muted-fg); font-size: 14px; max-width: 28ch; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--cta); color: var(--cta-fg); border-radius: 14px; padding: 10px 18px 10px 14px;
  transition: transform 0.15s ease;
}
.store:hover { transform: translateY(-1px); }
.store svg { width: 24px; height: 24px; flex: none; }
.store span { display: grid; line-height: 1.15; }
.store small { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.store b { font-size: 15px; font-weight: 800; }
.pied-bas { margin: 22px 0 0; font-size: 12.5px; color: var(--muted-fg); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .etape { grid-template-columns: 1fr; gap: 28px; }
  .etapes { gap: 64px; }
  section.bloc, .final { padding: 72px 0; }
  .puces { justify-items: center; }
}
@media (max-width: 480px) {
  .marque span { font-size: 15px; }
  .marque img { width: 34px; height: 34px; }
  .heros .wrap { padding-bottom: 40px; }
  .heros .btn { width: 100%; }
}

.menu[hidden] { display: none; }


/* ---------- Animations (inspiration Elevate) ----------
 * Tout apparaît en fondu vers le haut, avec un léger décalage entre les éléments
 * d'un même bloc. La classe « anim » n'est posée par le JS que si l'utilisateur
 * n'a pas demandé à réduire les animations : sans JS, la page est visible. */
@media (prefers-reduced-motion: no-preference) {
  html.anim [data-anim] {
    opacity: 0;
    transform: translateY(22px);
    will-change: opacity, transform;
  }
  html.anim [data-anim].vu {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.8s cubic-bezier(0.22, 0.8, 0.24, 1) var(--retard, 0s),
      transform 0.8s cubic-bezier(0.22, 0.8, 0.24, 1) var(--retard, 0s);
  }
  /* Le téléphone du héros arrive d'un peu plus bas et avec un souffle d'échelle */
  html.anim .heros-visuel[data-anim] { transform: translateY(40px) scale(0.97); }
  html.anim .heros-visuel[data-anim].vu { transform: none; }
  /* Le petit téléphone du bloc 3 arrive juste après le grand */
  html.anim .sea-petit[data-anim] { transform: translateY(40px) scale(0.9); }
  html.anim .sea-petit[data-anim].vu { transform: none; transition: opacity 0.85s cubic-bezier(0.22, 0.8, 0.24, 1) 0.18s, transform 0.85s cubic-bezier(0.22, 0.8, 0.24, 1) 0.18s; }
  /* Les 4 tuiles d'objectif apparaissent l'une après l'autre (retard posé par app.js) */
  html.anim .obj-choix[data-anim] { transform: translateY(30px) scale(0.965); }
  html.anim .obj-choix[data-anim].vu {
    transform: none;
    transition:
      opacity 0.75s cubic-bezier(0.22, 0.85, 0.26, 1) var(--retard, 0s),
      transform 0.75s cubic-bezier(0.22, 0.85, 0.26, 1) var(--retard, 0s);
  }
  /* Les cartes d'avis arrivent une par une */
  html.anim .avis-carte { transition: transform 0.4s ease; }
}


/* ---------- Les 3 étapes (objectif, programme, entraînement) ----------
 * Même en-tête pour les trois : pastille numérotée reprise des cartes de phase
 * de l'app, puis le titre, le tout centré. */
.entete-etape { text-align: center; margin-left: auto; margin-right: auto; max-width: 760px; }
.titre .num {
  display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--cta); color: var(--cta-fg); font-size: 0.68em; font-weight: 800;
  margin: 0 auto 0.42em; letter-spacing: 0; line-height: 1;
}

/* ---------- Choisis ton objectif ----------
 * Même principe que le bloc programme : le contenu reste collé pendant la
 * traversée de la piste et le choix passe d'une tuile à l'autre (app.js pose
 * la classe .choisi). La hauteur de la zone collante et la taille du carré sont
 * mesurées en JS (visualViewport), jamais en vh. */
.objectifs { position: relative; padding: 0; }
.obj-carre { transition: width 0.2s ease; }
/* La tuile choisie ne change pas seulement de bordure : elle se soulève d'un coup,
 * avec un halo sable, et sa pastille et son icône réagissent. L'animation est
 * rejouée à chaque changement de tuile (la classe est retirée puis reposée).
 * Elle est réservée aux tuiles déjà apparues (.vu) pour ne pas écraser
 * l'animation d'entrée — et elle ne joue pas du tout en « mouvement réduit ». */
@keyframes tuile-choisie {
  0% { transform: translateY(0) scale(1); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
  45% { transform: translateY(-10px) scale(1.055); box-shadow: 0 0 0 5px rgba(214, 191, 151, 0.38), 0 18px 34px rgba(0, 0, 0, 0.14); }
  100% { transform: translateY(-4px) scale(1.022); box-shadow: 0 0 0 4px rgba(214, 191, 151, 0.3), 0 12px 26px rgba(0, 0, 0, 0.1); }
}
@keyframes pastille-choisie {
  0% { transform: scale(0.55); } 55% { transform: scale(1.3); } 100% { transform: scale(1); }
}
@keyframes icone-choisie {
  0% { transform: none; } 40% { transform: translateY(-7px) scale(1.1); } 100% { transform: none; }
}

/* ---------- Choisis ton objectif ---------- */
.objectifs .entete { margin-bottom: 40px; }
.seance-feat .entete-etape { margin-bottom: 44px; }
/* Bouton descendu sans rien repousser : ce qu'on ajoute au-dessus est repris en marge négative dessous. */
.seance-feat .cta-centre { text-align: center; margin-top: 64px; margin-bottom: -22px; }
.objectifs .cta-centre { text-align: center; margin-top: 46px; margin-bottom: -12px; }

@media (max-width: 860px) {
}


/* ---------- Découvre ton programme ----------
 * Fond = la capture iOS elle-même (603 x 1311). Par-dessus, uniquement les
 * éléments qui s'animent, posés aux coordonnées RELEVÉES SUR LA CAPTURE : ne pas
 * les retoucher « au jugé », les revérifier avec scratchpad/compare.cjs (écart en
 * % de pixels) et zones.cjs (boîtes de référence).
 * app.js met l'écran à l'échelle du téléphone (--k) et pose --p (0 → 1).
 * Le téléphone reste collé pendant la traversée du bloc : pause, remplissage, reprise. */
section.bloc.programme-scroll { position: relative; background: var(--card); padding: 52px 0 64px; }
/* Fondu entre le gris des blocs voisins et le blanc de celui-ci : sans ça, la
 * cassure gris/blanc se voit comme un trait. */
.programme-scroll::before, .programme-scroll::after {
  /* z-index 0 : sans ça, le dégradé du bas se peint PAR-DESSUS le téléphone collé
   * et on croit que l'écran est coupé. */
  content: ""; position: absolute; left: 0; right: 0; height: 190px; pointer-events: none; z-index: 0;
}
.programme-scroll::before { top: 0; background: linear-gradient(var(--background), var(--card)); }
.programme-scroll::after { bottom: 0; background: linear-gradient(var(--card), var(--background)); }
.programme-scroll .wrap {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 3vh, 44px);
}
.prog-entete { display: grid; justify-items: center; }
.sous-titre {
  margin: 12px auto 0; max-width: 30em; text-align: center;
  font-size: clamp(15px, 1.45vw, 18px); font-weight: 500; color: var(--muted-fg);
}
.prog-tel { width: min(340px, 82vw); }
.ecran-cadre { overflow: hidden; background: #f5f5f5; }
.ecran-prog {
  position: absolute; left: 0; top: 0; width: 603px; height: 1311px;
  transform: scale(var(--k, 0.5)); transform-origin: top left;
  font-family: "Montserrat", system-ui, sans-serif; color: #1f1f1f; line-height: 1.3;
}
.ep-fond { position: absolute; left: 0; top: 0; width: 603px; height: 1311px; max-width: none; }

/* Nom de la course : réécrit par-dessus celui de la capture, dans la police des
 * titres de l'app. « Marathon de Paris » avec 85 km et 4 600 m D+ n'avait aucun
 * sens — c'est un ultra-trail, pas un marathon. */
.ep-course-nom {
  /* Métriques relevées sur la capture : encre en x=143, cap height 28 px. */
  /* Calé sur une capture À JOUR de l'app (outils/ref-objectif.jpg) : le nom y est
   * plus gros et plus bas que sur l'ancienne capture de fond. */
  /* Le pavé déborde de 8 px à gauche pour couvrir le début de l'ancien titre
   * (son « M » commence à x=142) ; padding-left remet MON texte à x=144. */
  position: absolute; left: 136px; top: 256px; width: 321px; height: 48px; padding-left: 8px; background: #fff;
  font-family: "Bebas Neue", "Montserrat", sans-serif; font-weight: 400; font-size: 42px;
  line-height: 48px; text-transform: uppercase; letter-spacing: 0; color: #1f1f1f;
}

/* Ligne « 29 nov. 2026 · 85 km · 4 600 m D+ » : sur la capture elle passe à la
 * ligne (« m D+ » tout seul). On repeint la zone en blanc (fond de la carte) et
 * on la réécrit d'un seul tenant. */
.ep-meta {
  /* Même débord à gauche et en haut : l'ancienne ligne commence à x=142, y=310. */
  position: absolute; left: 134px; top: 306px; width: 323px; height: 46px; padding: 4px 0 0 8px; background: #fff;
  font-size: 18px; line-height: 26px; color: #636363; white-space: nowrap;
}
.ep-meta b { font-weight: 700; color: #1f1f1f; }

/* Compte à rebours (fond gris du badge : #ededed) */
.ep-badge {
  position: absolute; left: 460px; top: 244px; width: 94px; height: 90px;
  border-radius: 16px; background: #ededed; text-align: center;
}
.ep-badge b { display: block; margin-top: 20px; font-size: 40px; font-weight: 700; line-height: 32px; font-variant-numeric: tabular-nums; }
.ep-badge i { display: block; margin-top: 9px; font-style: normal; font-size: 16px; font-weight: 500; color: #636363; }

/* Pourcentage et barre */
.ep-pct {
  /* Le pavé déborde de 2 px à droite pour couvrir l'anticrénelage du « 45 % »
   * de la capture ; padding-right remet MON texte à la bonne place. */
  position: absolute; right: 24px; top: 395px; width: 98px; height: 28px; padding-right: 2px;
  background: #f5f5f5; text-align: right; font-size: 21px; font-weight: 800; line-height: 28px;
  font-variant-numeric: tabular-nums;
}
.ep-barre { position: absolute; left: 23px; top: 434px; width: 556px; height: 18px; border-radius: 9px; background: #ededed; overflow: hidden; }
.ep-barre i { display: block; height: 100%; border-radius: 9px; background: #1f1f1f; width: calc(var(--p, 0.45) * 100%); }
.ep-seances {
  position: absolute; left: 24px; top: 463px; width: 320px; height: 24px;
  background: #f5f5f5; font-size: 16px; font-weight: 500; line-height: 24px; color: #636363;
}
.ep-seances b { font-weight: 700; color: #1f1f1f; font-variant-numeric: tabular-nums; }
.ep-semaine {
  position: absolute; left: 175px; top: 568px; width: 220px; height: 26px;
  background: #fff; font-size: 16px; font-weight: 500; line-height: 26px; color: #636363;
}

/* Frise des 4 semaines (aplat blanc de la carte, puis traits et pastilles) */
.ep-semaines { position: absolute; left: 99px; top: 612px; width: 460px; height: 48px; background: #fff; }
/* Chaque jauge se remplit AVANT que la semaine suivante ne se coche (--f, posé par app.js) */
.ep-trait { position: absolute; top: 24px; height: 3px; transform: translateY(-50%); background: #e8ddc8; border-radius: 2px; overflow: hidden; }
.ep-trait::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px;
  background: #1f1f1f; width: calc(var(--f, 0) * 100%);
}
.ep-trait.t1 { left: 48px; width: 87px; }
.ep-trait.t2 { left: 184px; width: 87px; }
.ep-trait.t3 { left: 310px; width: 111px; }
.ep-sem {
  position: absolute; top: 24px; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #c9c9c9;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ep-sem.s1 { left: 23.5px; }
.ep-sem.s2 { left: 159.5px; }
.ep-sem.s3 { left: 295.5px; width: 22px; height: 22px; }
.ep-sem.s4 { left: 431.5px; background: #d6bf97; border-color: #e0cba6; }
.ep-sem::after {
  content: ""; position: absolute; left: 50%; top: 47%; width: 7px; height: 3.5px;
  border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff;
  transform: translate(-50%, -60%) rotate(-45deg) scale(0.3);
  opacity: 0; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.ep-sem.ok { background: #1f1f1f; border-color: #1f1f1f; width: 22px; height: 22px; }
.ep-sem.ok::after { opacity: 1; transform: translate(-50%, -60%) rotate(-45deg) scale(1); }
.ep-sem.s3.ok::after { width: 9px; height: 4.5px; }
.ep-sem.actuelle { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f1f1f; }

/* Pastilles des 6 séances de la semaine */
.ep-coches { position: absolute; left: 99px; top: 697px; width: 30px; height: 216px; background: #fff; }
.ep-coche {
  position: absolute; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2px solid #d5d5d5;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.ep-coche[data-seance="1"] { top: 6px; }
.ep-coche[data-seance="2"] { top: 42px; }
.ep-coche[data-seance="3"] { top: 78px; }
.ep-coche[data-seance="4"] { top: 114px; }
.ep-coche[data-seance="5"] { top: 150px; }
.ep-coche[data-seance="6"] { top: 186px; }
.ep-coche::after {
  content: ""; position: absolute; left: 50%; top: 47%; width: 9px; height: 4.5px;
  border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff;
  transform: translate(-50%, -60%) rotate(-45deg) scale(0.3);
  opacity: 0; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.ep-coche.ok { background: #9b9b9b; border-color: #9b9b9b; }
.ep-coche.ok::after { opacity: 1; transform: translate(-50%, -60%) rotate(-45deg) scale(1); }
.ep-coche.actuelle { border-color: #d6bf97; }

@media (max-width: 860px) {
}
@media (prefers-reduced-motion: reduce) {
  .ep-sem, .ep-sem::after, .ep-coche, .ep-coche::after, .ep-barre i { transition: none; }
}

/* ---------- Démarre ton entraînement ----------
 * L'écran de séance en grand à gauche, le profil (objectif, courses à venir,
 * semaine type) en petit par-dessus, en bas à droite. Composition fixe pour
 * l'instant : l'animation de défilement reste à définir. */
section.bloc.seance-feat { position: relative; padding: 56px 0 72px; overflow-x: clip; }
/* Les deux téléphones posés sur la MÊME base : le petit est calé sur le bas du
 * grand (plus de décalage vers le bas). */
.sea-scene { position: relative; width: min(580px, 92vw); margin: 0 auto; }
.sea-grand { width: 68%; }
.sea-petit { position: absolute; right: 0; bottom: 0; width: 48%; z-index: 2; }

@media (max-width: 860px) {
  .sea-scene { width: 100%; }
  .seance-feat .wrap { padding-left: 12px; padding-right: 12px; }
}


/* ---------- Paiement intégré à la page ---------- */
#paiement { margin-top: 8px; }
.chargement { color: var(--muted-fg); font-size: 14px; text-align: center; padding: 28px 0; }
.paiement-titre { font-size: 20px; margin-bottom: 16px; }
#checkout-form { min-height: 320px; }


/* ---------- Réassurance sous le paiement ---------- */
/* Page coaching.html : un seul prix, sobre (option C) */
.coaching-offre {
  margin: 22px 0 18px; padding: 22px 22px 18px; border-radius: 16px;
  background: var(--nuit); color: #f2f0ea; text-align: center; display: grid; gap: 6px;
}
.coaching-offre p { margin: 0; }
.coaching-coach { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.coaching-desc { font-size: 14px; line-height: 1.45; color: rgba(242, 240, 234, 0.78); max-width: 38ch; margin-inline: auto !important; }
.coaching-prix { margin-top: 8px; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.coaching-prix .montant { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--brand); }
.coaching-prix .periode { font-size: 15px; color: rgba(242, 240, 234, 0.78); }
.coaching-engagement { font-size: 12.5px; color: rgba(242, 240, 234, 0.7); }

.sous-paiement { margin: 14px 0 6px; text-align: center; display: grid; gap: 5px; }
.sous-paiement p { margin: 0; line-height: 1.4; }
.sous-paiement .ligne1 { font-size: 12.5px; font-weight: 600; }
.sous-paiement .ligne2 { font-size: 12.5px; }
.sous-paiement .ligne3 { font-size: 11px; color: var(--muted-fg); max-width: 44ch; margin-inline: auto; }




/* ---------- Pages de texte (légal) ---------- */
.page-texte .wrap { max-width: 720px; }
.page-texte h1 { font-size: clamp(28px, 5vw, 38px); margin-bottom: 20px; }
.page-texte p { font-size: 16px; line-height: 1.6; margin: 0 0 14px; color: var(--muted-fg); }
.page-texte .avis-rediger {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: 0 12px 12px 0; padding: 14px 16px; color: var(--foreground);
}
.page-texte h2 {
  font-size: 20px; line-height: 1.3; margin: 38px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.page-texte h3 { font-size: 16px; margin: 24px 0 8px; }
.page-texte ul, .page-texte ol { margin: 0 0 14px; padding-left: 20px; }
.page-texte li { font-size: 16px; line-height: 1.6; margin-bottom: 8px; color: var(--muted-fg); }
.page-texte li strong, .page-texte p strong { color: var(--foreground); }
.page-texte .maj { font-size: 14px; color: var(--muted-fg); }
.page-texte .encadre {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 18px;
}
.page-texte .encadre p:last-child, .page-texte .encadre ul:last-child { margin-bottom: 0; }
/* Champ qu'Iban doit remplir avant la mise en ligne — volontairement voyant. */
.page-texte .a-completer {
  background: rgba(255, 176, 32, .14); border: 1px dashed rgba(255, 176, 32, .55);
  border-radius: 6px; padding: 1px 7px; color: var(--foreground);
  font-size: .94em; white-space: normal;
}

/* Page d'offre : avis et questions sous le paiement */
.page-offre .offre-page { padding-bottom: 8px; }
.page-offre .avis { padding: 48px 0 48px; }
.page-offre .avis .titre, .faq-offre .titre { font-size: clamp(24px, 5vw, 30px); text-align: center; }
.faq-offre { padding: 0 0 64px; }
.faq-offre .wrap { max-width: 560px; }
.faq-offre .entete { margin-bottom: 18px; }

/* FAQ de l'offre façon TSE : liste à plat, filets fins, chevron */
.faq-offre .sous-titre { text-align: center; margin: 6px 0 0; color: var(--muted-fg); font-size: 14px; }
.faq-offre .faq-liste { gap: 0; }
.faq-offre details {
  background: none; border: 0; border-radius: 0; padding: 16px 2px;
  border-bottom: 1px solid var(--border);
}
.faq-offre summary { font-size: 15px; line-height: 1.35; }
.faq-offre summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--foreground, #1f1f1f); border-bottom: 2px solid var(--foreground, #1f1f1f);
  transform: rotate(45deg) translateY(-3px); transition: transform 0.2s ease;
}
.faq-offre details[open] summary::after { content: ""; transform: rotate(-135deg) translateY(-2px); }
.faq-offre details p { font-size: 14px; margin-top: 10px; }
.faq-offre details a { color: inherit; font-weight: 600; }

/* Choisis ton objectif : 4 tuiles comme dans le questionnaire de l'app */
section.bloc.objectifs { padding-top: 56px; padding-bottom: 24px; }
/* ⚠️ PAS d'aspect-ratio ici : si le carré devient plus étroit que ce que le texte
 * des tuiles exige, les lignes de la grille débordent du carré et le bouton
 * passe par-dessus (bug vu sur iPhone). La hauteur suit donc le contenu, les deux
 * lignes restant égales grâce aux 1fr. */
.obj-carre { width: min(100%, 440px); margin: 0 auto; }
.obj-choix-grille { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.obj-choix {
  position: relative; background: var(--card); border: 2px solid var(--border); border-radius: 20px;
  display: grid; align-content: center; justify-items: start; gap: 2px; padding: 16px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.obj-choix img { width: 58px; height: auto; margin-bottom: 10px; }
.obj-choix b { font-size: 17px; font-weight: 700; }
.obj-choix > span { font-size: 13px; color: var(--muted-fg); line-height: 1.3; }
/* Les tuiles ne sont PAS cliquables (décision d'Iban) : ni lien, ni rond de
 * sélection, ni survol — elles ne font que présenter les quatre objectifs. */
@media (max-width: 860px) {
  section.bloc.objectifs { padding-top: 44px; padding-bottom: 16px; }
  .obj-choix { padding: 14px; }
  .obj-choix img { width: 50px; }
  .obj-choix b { font-size: 16px; }
}

/* ---------- Bandeau cookies (assets/consentement.js) ----------
 * « Tout refuser » et « Tout accepter » ont exactement le même poids visuel
 * (exigence CNIL) ; « Personnaliser » est en contour. */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  transform: translateY(110%); transition: transform .35s ease;
  pointer-events: none;
}
.cookies.ouvert { transform: none; pointer-events: auto; }
.cookies-boite {
  width: 100%; max-width: 560px;
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  padding: 18px 18px 16px;
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.cookies-titre { margin: 0 0 4px; font-weight: 800; font-size: 16px; }
.cookies-txt { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted-fg); }
.cookies-txt a { color: var(--foreground); }
.cookies-detail { margin-top: 12px; border-top: 1px solid var(--border); }
.cookies-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--border); cursor: default;
}
label.cookies-ligne { cursor: pointer; }
.cookies-ligne b { display: block; font-size: 14px; }
.cookies-ligne span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted-fg); }
.cookies-ligne .cookies-toujours { flex: none; font-size: 12px; font-weight: 700; color: var(--renfo-ink); }
.cookies-interrupteur {
  flex: none; appearance: none; -webkit-appearance: none; margin: 0;
  width: 44px; height: 26px; border-radius: 13px; background: #d4d4d4;
  position: relative; cursor: pointer; transition: background .2s;
}
.cookies-interrupteur::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s;
}
.cookies-interrupteur:checked { background: var(--foreground); }
.cookies-interrupteur:checked::after { transform: translateX(18px); }
.cookies-interrupteur:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.cookies-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.cookies-btn {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 11px 8px; border-radius: 12px;
  border: 1.5px solid var(--foreground); background: var(--foreground); color: var(--cta-fg);
}
.cookies-btn[data-action="perso"] { background: transparent; color: var(--foreground); }
.cookies-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (max-width: 480px) {
  .cookies-actions { grid-template-columns: 1fr 1fr; }
  .cookies-btn[data-action="perso"] { grid-column: 1 / -1; order: 3; }
}
@media (prefers-reduced-motion: reduce) { .cookies { transition: none; } }
.tableau-cookies { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 24px; }
.tableau-cookies th, .tableau-cookies td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.tableau-cookies td:first-child { font-family: ui-monospace, monospace; font-size: 13px; white-space: nowrap; }