/* ==========================================================================
   Coach landing page
   Design system: dark editorial, cool signal accent, mobile first.
   Everything is plain CSS, no framework, no build step.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --bg: #0a0a0b;
  --bg-elev: #121214;
  --bg-elev-2: #18181b;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --ink: #f3f5f9;
  --ink-muted: #9aa3b2;
  --ink-dim: #7d8695;
  --accent: #4c8dff;
  --accent-soft: rgba(76, 141, 255, 0.14);
  --accent-2: #7dc4ff;
  --good: #4ade80;
  /* Le partage du recapitulatif : vert pour ce qui joue pour le visiteur,
     ambre pour ce qui joue contre. Deux teintes suffisent a separer les deux
     colonnes sans ajouter de rouge, qui se lirait comme une alerte. */
  --good-soft: rgba(74, 222, 128, 0.14);
  --warn: #e8a75c;
  --warn-soft: rgba(232, 167, 92, 0.16);

  /* Le rose de TikTok, reserve aux marques du direct : l'anneau du profil,
     l'icone du bouton, le voyant quand le direct est en cours. */
  --tiktok: #fe2c55;
  --tiktok-soft: rgba(254, 44, 85, 0.16);

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  --shadow-accent: 0 18px 44px -16px rgba(76, 141, 255, 0.5);

  --shell: 1180px;
  --pad-section: clamp(3.75rem, 9vw, 7.5rem);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Les listes numerotees de la page portent leurs propres numero, ecrits dans un
   span. Le retrait de 40px que le navigateur applique a un ol n'a donc aucune
   raison d'etre, et il poussait les cartes des jours a droite en rognant leur
   largeur : sur un telephone la colonne de texte tombait a 197px, un mot par
   ligne. Un troisieme list-style en trop remettrait un numero devant un numero. */
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: #0a0a0b;
  font-weight: 700;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* --- Layout primitives -------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 2.5rem);
}

.section { padding-block: var(--pad-section); position: relative; }
.section + .section { border-top: 1px solid var(--line); }

/* --- Typography helpers ------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.h2 {
  font-size: clamp(1.9rem, 6.4vw, 3.4rem);
  margin-top: 1rem;
}

.lead {
  color: var(--ink-muted);
  font-size: clamp(1rem, 2.6vw, 1.14rem);
  max-width: 56ch;
}

.section-head { margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.section-head .lead { margin-top: 1.1rem; }

/* Les trois gains du bilan offert, sous le chapeau. Meme pastille cochee que
   les formules, mais sans le filet ni les marges de carte : la liste appartient
   au texte d'introduction, elle n'est pas un bloc a part. */
.plan-head-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.3rem;
  max-width: 62ch;
}
.plan-head-list li {
  display: flex;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-muted);
  align-items: flex-start;
}
.plan-head-list strong { color: var(--ink); font-weight: 700; }
.plan-head-list svg { flex: none; margin-top: 3px; color: var(--accent); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--accent);
  color: #06122c;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: #6fa3ff; }

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.06); }

.btn-block { width: 100%; }
.btn-lg { padding: 1.1rem 1.9rem; font-size: 1rem; }

/* --- Header -------------------------------------------------------------
   Une barre flottante plutot qu'une bande pleine largeur : la marque a
   gauche, l'abonnement a droite, et la carte de verre qui les porte. Le voile
   degrade derriere elle masque le contenu qui defile, sinon il reapparaitrait
   dans les coins arrondis. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: clamp(0.55rem, 1.6vw, 0.9rem);
}
/* Le voile qui efface le contenu passe sous la barre. Il descend d'un cran
   sous l'en-tete et s'eteint en degrades plutot qu'en palier : un arret net
   laisserait une ligne en travers de la page des qu'on defile. */
.site-header::before {
  content: "";
  position: absolute;
  inset: -1px 0 -1.6rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--bg) 6%,
    rgba(10, 10, 11, 0.86) 42%,
    rgba(10, 10, 11, 0.4) 72%,
    transparent 100%
  );
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
  padding: 0.45rem 0.5rem 0.45rem 0.85rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(13, 14, 19, 0.72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 20px 44px -32px rgba(0, 0, 0, 0.95);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-stuck .header-inner {
  border-color: var(--line-strong);
  background: rgba(13, 14, 19, 0.92);
  box-shadow: 0 24px 54px -28px rgba(0, 0, 0, 0.95);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.06rem;
  flex: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06122c;
  font-size: 0.95rem;
  font-weight: 900;
  flex: none;
}

.header-actions { display: flex; align-items: center; gap: 0.6rem; }
.header-actions .btn { padding: 0.7rem 1.15rem; font-size: 0.88rem; }

.header-cta { display: inline-flex; }
.header-cta .cta-short { display: none; }

/* Sur les petits ecrans, le libelle long pousse le bouton hors de la fenetre. */
@media (max-width: 560px) {
  .header-cta .cta-long { display: none; }
  .header-cta .cta-short { display: inline; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(2rem, 6vw, 3.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -30%;
  right: -20%;
  width: 90vw;
  max-width: 780px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(76, 141, 255, 0.16), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

.hero h1 {
  font-size: clamp(2.35rem, 11vw, 4.6rem);
  margin-top: 1.15rem;
}
.hero h1 .mark {
  background: linear-gradient(105deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin-top: 1.3rem;
  color: var(--ink-muted);
  font-size: clamp(1rem, 3vw, 1.16rem);
  max-width: 52ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}
.hero-ctas .btn { flex: 1 1 auto; min-width: min(100%, 210px); }

/* --- Profil TikTok -------------------------------------------------------
   La carte de visite du haut : la photo dans un anneau d'accent, le nom, le
   pseudo, le bouton pour suivre le profil, puis les trois chiffres. */
.tt-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.tt-ava {
  position: relative;
  width: 66px;
  height: 66px;
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 16px 34px -18px rgba(76, 141, 255, 0.85);
}
.tt-ava img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg);
}
.tt-ava-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #06070a;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--tiktok);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.95);
}
.tt-id { min-width: 0; }
.tt-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* Sur un ecran tres etroit, le pseudo passe avant le nom : il est coupe
   plutot que de pousser le bouton hors de la carte. */
.tt-name > span:first-child { overflow: hidden; text-overflow: ellipsis; }
/* Le point du profil suit l'etat du direct, comme la pastille plus bas : vert
   quand le direct est en cours, gris le reste du temps. Un point vert en
   permanence laisserait croire que le direct tourne a toute heure. */
.tt-presence {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ink-dim);
}
.tt-presence[data-state="live"] {
  background: var(--good);
  animation: pulse-good 1.9s infinite;
}
@keyframes pulse-good {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.tt-handle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.1rem;
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.tt-handle svg { flex: none; }
.tt-handle:hover { color: var(--accent); }
/* Le bouton reste discret : le bleu de l'accent porte l'abonnement a la
   newsletter, celui ci n'est qu'une porte vers le profil. */
.tt-follow {
  margin-left: auto;
  flex: none;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.tt-follow:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--ink); }
.tt-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.tt-tiles li {
  /* min-width: 0 : sans lui, un chiffre large impose sa largeur minimale a la
     colonne et la rangee deborde sur les ecrans de 320px. */
  min-width: 0;
  text-align: center;
  padding: 0.85rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.tt-tiles strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.6vw, 1.5rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.tt-tile-accent strong { color: var(--accent); }
.tt-tiles span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 480px) {
  .tt-follow { padding: 0.55rem 1.05rem; font-size: 0.85rem; }
  .tt-name { font-size: 1rem; }
  .tt-ava { width: 58px; height: 58px; }
  .tt-tiles strong { font-size: 1.1rem; }
  .tt-tiles span { font-size: 0.62rem; letter-spacing: 0.03em; }
}

/* Hero visual */
.hero-visual { position: relative; }

.hero-photo {
  position: relative;
  /* Sans cette remise a zero, la marge par defaut de figure (40px de chaque
     cote) rogne la colonne : la photo restait plus etroite que la place
     disponible, avec un vide a droite que rien ne justifiait. */
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  aspect-ratio: 4 / 5;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: contrast(1.06) saturate(0.92);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.86) 0%, rgba(10, 10, 11, 0.08) 45%, transparent 70%);
}

.hero-badge {
  position: absolute;
  z-index: 2;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: rgba(18, 18, 20, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
}

.hero-badge-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--accent);
  line-height: 1;
}
.hero-badge-label {
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--ink-muted);
}

/* --- Trust strip -------------------------------------------------------- */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
}

.trust-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}

.trust-item {
  background: var(--bg-elev);
  padding: 1.35rem clamp(1rem, 3vw, 1.75rem);
}
.trust-item:last-child { grid-column: 1 / -1; }

.trust-num {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 6vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.trust-num .unit { font-size: 0.5em; color: var(--accent); font-weight: 800; }

.trust-label {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* --- Live band (TikTok), juste sous le hero ------------------------------
   Le hero pose la promesse, le direct arrive tout de suite apres : c'est le
   rendez-vous quotidien qui fait revenir les gens, il reste donc haut dans la
   page, avant les autres sections. Le fond reste celui de la page, un halo
   bleu marque le haut du bandeau, et tout est fait de cartes de verre posees
   dessus : le profil, le direct, les trois rendez-vous.
   Sur grand ecran la carte se lit en deux colonnes, profil a gauche et direct
   a droite, puis les trois rendez-vous sur une rangee, sous les deux. */
.live-band {
  padding-block: clamp(1.5rem, 3.4vw, 2.6rem) clamp(1.8rem, 4vw, 3rem);
  background:
    radial-gradient(70% 90% at 50% -10%, rgba(76, 141, 255, 0.22), transparent 68%),
    radial-gradient(60% 80% at 100% 100%, rgba(125, 196, 255, 0.08), transparent 62%);
}

/* La carte : le profil TikTok ouvre, le direct se presente, les rendez-vous
   ferment. Le filet separe le profil du direct, comme sur un profil ou l'on
   passe de l'identite au contenu. */
.live-card {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
  padding: clamp(1.15rem, 3vw, 1.9rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(24, 27, 38, 0.82), rgba(14, 15, 21, 0.8));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
}
/* Les enfants d'une grille ont une largeur minimale automatique : un nom qui
   ne se coupe pas, comme le pseudo, elargirait alors toute la carte et ferait
   deborder la page sur les ecrans les plus etroits. */
.live-card > * { min-width: 0; }
.live-profile { padding-bottom: clamp(1.4rem, 3vw, 1.9rem); border-bottom: 1px solid var(--line); }

.live-body {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.live-note {
  margin-top: 1.1rem;
  font-size: 0.83rem;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}
.live-note svg { flex: none; color: var(--good); }

.live-title {
  font-size: clamp(1.5rem, 4.4vw, 2.35rem);
  margin-top: 0.9rem;
  letter-spacing: -0.03em;
}
.live-lead {
  color: var(--ink-muted);
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  line-height: 1.6;
  margin-top: 0.9rem;
  max-width: 60ch;
}
/* Le bouton du direct est une carte a part entiere : l'icone de TikTok a
   gauche, ce qu'on y trouve au milieu, la fleche a droite. Il porte le geste
   principal de la page apres l'abonnement. */
.live-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.7rem;
  padding: 0.95rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(120deg, rgba(30, 32, 43, 0.95), rgba(17, 18, 25, 0.95));
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}
.live-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(254, 44, 85, 0.5);
}
.live-cta-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--tiktok-soft);
  color: var(--tiktok);
  transition: transform 0.18s var(--ease);
}
.live-cta:hover .live-cta-icon { transform: scale(1.06); }
.live-cta-copy { flex: 1 1 auto; min-width: 0; }
.live-cta-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.live-cta-copy small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
}
.live-cta-go {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-muted);
  transition: transform 0.18s var(--ease), color 0.18s var(--ease);
}
.live-cta:hover .live-cta-go { transform: translateX(3px); color: var(--ink); }

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid rgba(76, 141, 255, 0.42);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.live-status[data-state="live"] .live-dot {
  background: var(--tiktok);
  box-shadow: 0 0 0 0 rgba(254, 44, 85, 0.6);
  animation: pulse 1.8s infinite;
}
.live-status[data-state="live"] {
  color: #ff8a9c;
  background: var(--tiktok-soft);
  border-color: rgba(254, 44, 85, 0.42);
}

/* La pastille du live tient sur une ligne : a 0.66rem et sans interlettre, le
   libelle complet passe meme sur un ecran de 360px, au lieu de se couper en
   deux avec un mot orphelin. */
@media (max-width: 480px) {
  .live-status { font-size: 0.66rem; letter-spacing: 0.02em; padding: 0.45rem 0.8rem 0.45rem 0.6rem; }
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .live-status[data-state="live"] .live-dot { animation: none; }
  .tt-presence { animation: none; }
  html { scroll-behavior: auto; }
}

/* Les trois rendez-vous du direct. Chacun ouvre sa fiche : le titre et le
   resume tiennent sur la carte, le detail s'ouvre au clic. Ce sont des
   boutons, pas des liens : le clavier et le lecteur d'ecran y accedent
   comme a n'importe quel bouton. */
.live-side {
  display: grid;
  gap: 0.7rem;
}
.live-side li { display: flex; }
.live-side-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.05rem;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.live-side-item:hover {
  border-color: rgba(76, 141, 255, 0.45);
  background: rgba(76, 141, 255, 0.08);
  transform: translateY(-2px);
}
.live-side-copy { flex: 1 1 auto; min-width: 0; }
.live-side-item strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  display: block;
  letter-spacing: -0.02em;
}
.live-side-item small { display: block; margin-top: 0.15rem; color: var(--ink-dim); font-size: 0.8rem; }
.live-side-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}
.live-side-icon.is-2 { background: rgba(125, 196, 255, 0.14); color: var(--accent-2); }
.live-side-icon.is-3 { background: rgba(74, 222, 128, 0.14); color: var(--good); }
.live-side-go {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-dim);
  transition: transform 0.18s var(--ease), color 0.18s var(--ease);
}
.live-side-item:hover .live-side-go { color: var(--accent); transform: translateX(3px); }

/* --- Story --------------------------------------------------------------- */
/* Le mot en degrade ferme le titre, comme le mot accentue du hero : meme
   famille de titre, meme recette, et le meme degrade d'un bout a l'autre de la
   page. */
.story-degrade {
  background: linear-gradient(105deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Les trois reperes --------------------------------------------------
   Trois cartes pour les trois chiffres du recit. Le nombre porte l'accent, le
   libelle reste gris : l'oeil accroche les reperes sans que les cartes se
   lisent comme trois titres de plus. Ce sont les chiffres de la frise du haut
   de page, sous une autre forme : la frise les annonce, les cartes les
   detaillent. */
.story-chiffres {
  display: grid;
  gap: clamp(0.75rem, 1.8vw, 1.1rem);
  margin-bottom: clamp(1.4rem, 3.2vw, 2.25rem);
}
/* Des 620px, les trois reperes tiennent sur une rangee : trois cartes qui se
   suivent du meme format se lisent comme une frise de chiffres, pas comme
   trois blocs a lire l'un apres l'autre, et la section y gagne cent pixels de
   hauteur. En dessous, elles restent empilees : a 390px, une rangee de trois
   ne laisse pas cinquante pixels de texte par carte. */
@media (min-width: 620px) {
  .story-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.story-chiffre {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(0.85rem, 2vw, 1.05rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)), var(--bg-elev);
}
.story-chiffre-icone {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(76, 141, 255, 0.28);
  background: var(--accent-soft);
  color: var(--accent);
}
.story-chiffre-valeur {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 1.85rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
/* L'unite se lit comme une precision, pas comme un deuxieme chiffre. */
.story-chiffre-valeur span {
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-muted);
}
/* Le libelle passe en capitales espacees, comme les surtitres de la page : la
   maquette importee marque ces trois reperes ainsi, et la carte se lit de haut
   en bas, le nombre d'abord, ce qu'il compte ensuite. */
.story-chiffre-label {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* --- La photo, sa pastille et la citation -------------------------------- */
.story-grid {
  display: grid;
  gap: clamp(1.4rem, 3.5vw, 2.25rem);
  align-items: start;
}

.story-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  /* La carte occupe toute la largeur de la colonne et se donne une bande
     franche, comme la maquette importee, ou la photo est une image de section
     et non une vignette. La hauteur suit la largeur, entre deux bornes qui
     gardent le sujet entier du telephone jusqu'au seuil des deux colonnes. La
     place est reservee avant l'arrivee du fichier : l'image est en chargement
     differe, et la section ne sautait plus quand elle arrivait. */
  width: 100%;
  height: clamp(340px, 46vw, 460px);
}
.story-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* En bande, un cadrage centre coupait les jambes du coureur : la fenetre
     descend d'un cran et garde le sujet entier. Sans effet quand la photo est
     recadree en largeur, c'est-a-dire dans la colonne des deux colonnes. */
  object-position: center 58%;
  filter: contrast(1.05) saturate(0.9);
}
/* Le degrade du bas porte deux choses : il detache la citation de la photo et
   il l'assoit sur un fond assez sombre pour qu'elle se lise, quelle que soit
   l'image. L'arrete est volontairement haut, sinon le bas de la photo
   disparaitrait sous le voile. */
.story-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.4) 40%, transparent 66%);
}

/* La pastille dit d'ou vient la methode avant la premiere phrase du recit :
   du terrain, pas des livres. */
.story-badge {
  position: absolute;
  z-index: 2;
  top: 0.7rem;
  left: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.62rem 0.32rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(76, 141, 255, 0.4);
  background: rgba(10, 10, 11, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--accent-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.story-badge svg { flex: none; }

/* La citation est une carte de verre posee sur la photo, pas un texte pose
   dessus : elle se detache du degrade et reste lisible meme sur une photo
   claire. Sa signature tient en deux lignes, l'auteur sous la phrase. */
.story-quote {
  position: absolute;
  z-index: 2;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.6rem;
  margin: 0;
  padding: 0.8rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(18, 18, 20, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(0.8rem, 2vw, 1.1rem);
}
.story-quote p {
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 1.9vw, 0.95rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.02em;
}
/* La signature tient sur une ligne, le libelle d'un cote, l'auteur de l'autre,
   comme la maquette importee. Elle se replie sur deux lignes si la carte
   devient trop etroite, sans jamais couper un mot. */
.story-quote footer {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 0.75rem;
  font-size: 0.72rem;
  line-height: 1.35;
}
.story-quote footer span:first-child { color: var(--ink-muted); }
.story-quote footer span:last-child { color: var(--accent-2); font-weight: 700; }

/* --- Le recit en deux volets --------------------------------------------
   Deux onglets pour deux volets : l'histoire d'un cote, la philosophie de
   l'autre. Le second porte hidden dans le balisage, donc sans JavaScript la
   page montre l'histoire et rien ne manque. Le jeu d'onglets suit le modele
   ARIA : un seul onglet dans l'ordre de tabulation, les fleches passent de
   l'un a l'autre. */
.story-recit { min-width: 0; }

.story-onglets {
  display: inline-flex;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.28rem;
  margin-bottom: clamp(0.9rem, 2.2vw, 1.2rem);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
.story-onglet {
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-muted);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.story-onglet:hover { color: var(--ink); }
/* L'onglet actif reprend l'aplat du bouton principal : c'est le meme signal
   pour la meme chose, un choix en cours. */
.story-onglet.is-actif {
  background: var(--accent);
  color: #06122c;
}

.story-volet {
  padding: clamp(1rem, 2.6vw, 1.4rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
/* Aujourd'hui la classe ne pose pas display, et [hidden] du navigateur suffit.
   La regle reste par precaution, comme pour les autres blocs caches de la
   page : le jour ou ce volet prend un display pour se ranger en colonnes,
   [hidden] ne l'emporterait plus, et les deux volets s'afficheraient l'un sous
   l'autre sans que rien ne le signale. */
.story-volet[hidden] { display: none; }
.story-volet-titre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.story-volet-titre svg { flex: none; color: var(--accent); }
.story-volet-texte {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-muted);
}

.story-piliers {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.9rem;
}
.story-piliers li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.story-pilier-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.story-piliers strong { color: var(--ink); }

/* --- L'appel a l'action qui ferme le recit ------------------------------
   Une carte teintee plutot qu'un bouton seul : la question a besoin d'etre
   posee, et la note dit en une ligne ce que le bouton donne. Le bouton mene au
   bilan dietetique, seul chemin d'entree du site : il n'y a pas de rendez-vous
   a reserver ici, et aucune adresse n'est demandee. */
.story-cta {
  margin-top: clamp(1rem, 2.4vw, 1.3rem);
  padding: clamp(1rem, 2.6vw, 1.4rem);
  border-radius: var(--radius);
  border: 1px solid rgba(76, 141, 255, 0.3);
  /* Le meme lavis d'accent que les cartes de formule : un degrade vertical
     discret, sans bord d'ellipse, qui teinte le haut de la carte et s'eteint
     vers le bas. Un halo circulaire laissait une diagonale visible au travers
     de la carte. */
  background: linear-gradient(180deg, rgba(76, 141, 255, 0.1), rgba(76, 141, 255, 0.02)), var(--bg-elev);
}
.story-cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.story-cta-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  flex: none;
  background: currentColor;
}
.story-cta-titre {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.8vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.story-cta-note {
  margin-top: 0.4rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: 46ch;
}
.story-cta .btn { margin-top: 0.95rem; }

/* Le temoignage ferme la section du parcours : le recit dit d'ou vient la
   methode, le temoignage montre ce qu'elle donne chez quelqu'un d'autre. Un
   filet les separe sans refaire une section, et le titre du temoignage passe
   au rang de sous-titre. */
.story-proof {
  display: grid;
  gap: clamp(1.1rem, 2.6vw, 1.5rem);
  margin-top: clamp(1.5rem, 3.2vw, 2.1rem);
  padding-top: clamp(1.3rem, 2.8vw, 1.8rem);
  border-top: 1px solid var(--line);
}
.story-proof-head .lead { margin-top: 0.55rem; }
.h3 {
  font-size: clamp(1.3rem, 3.8vw, 1.8rem);
  margin-top: 0.7rem;
}
.story-proof-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
.story-proof-cta-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
/* La note reste bridee meme quand la carte prend toute la largeur : une ligne
   de cent dix signes se lit mal, et c'est un texte de precaution, il doit se
   lire d'un seul regard. */
.story-proof-note { font-size: 0.85rem; color: var(--ink-dim); max-width: 58ch; }

/* La section porte maintenant deux niveaux de titre : le titre du recit
   redescend d'un cran, sinon le sous-titre du temoignage parait perdu. Il
   remonte tout de meme d'un cran par rapport a la version resserree : le
   chapo qui le suit decrit la section, et un titre de 1,75rem l'aurait fait
   passer pour une legende. */
#parcours { padding-block: clamp(2.4rem, 5.4vw, 4rem); }
#parcours .section-head { margin-bottom: clamp(1.2rem, 2.8vw, 1.75rem); }
#parcours .section-head .h2 { font-size: clamp(1.9rem, 5.6vw, 3.05rem); }
#parcours .section-head .lead { margin-top: 0.7rem; }

/* Le temoignage se range en deux colonnes des que la largeur le permet : la
   carte video a gauche, la carte d'appel a l'action a droite. La carte video
   perd alors sa largeur maximale, elle occupe simplement sa colonne.
   La bascule attend 1000px, et non les 860 du reste de la page : avant cela,
   la carte video ne garde que trois cents pixels de texte, et la ligne du
   temoignage se casse tous les deux mots. */
.story-proof-grid {
  display: grid;
  gap: clamp(1.1rem, 2.6vw, 1.5rem);
  align-items: center;
}
/* Dans cette section, la carte du temoignage prend la largeur de sa colonne :
   la largeur maximale de 600px, prevue pour un temoignage seul, laissait un
   vide a droite et decalait la carte d'appel posee dessous. */
.story-proof-grid .quote-video { max-width: none; margin-bottom: 0; }
@media (min-width: 1000px) {
  .story-proof-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: clamp(1.4rem, 3vw, 2.2rem);
  }
  .story-proof-grid .quote-video { grid-column: 1; }
  .story-proof-grid .story-proof-cta { grid-column: 2; align-self: center; }
}

/* Sous le seuil des deux colonnes, la photo est une bande pleine largeur posee
   au dessus du recit, comme dans la maquette importee : ce n'est pas une
   vignette a cote d'un texte, c'est l'image de la section. Les reperes se
   tassent et le titre perd un peu de hauteur pour que la section ne prenne pas
   toute la fenetre. */
@media (max-width: 1023px) {
  #parcours { padding-block: clamp(2rem, 5vw, 2.8rem); }
  #parcours .section-head .h2 { font-size: clamp(1.7rem, 7.6vw, 2.1rem); }
  #parcours .story-grid { gap: 1.1rem; }
  .story-volet { padding: 1rem; }
  .story-volet-texte { font-size: 0.88rem; line-height: 1.58; }
  .story-quote p { font-size: 0.88rem; }
}

.plans {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

.plan {
  --plan-pad: clamp(1.5rem, 4vw, 2rem);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--plan-pad);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.plan:hover { border-color: var(--line-strong); }

/* Bandeau photo en tete de carte, qui court jusqu'aux bords. */
.plan-media {
  position: relative;
  margin: calc(var(--plan-pad) * -1);
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg);
}
.plan-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.94);
}
.plan-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.45), transparent 55%, rgba(10, 10, 11, 0.5));
}

/* Avec une photo en tete, le badge se pose sur l'image au lieu de depasser. */
.plan-with-media .plan-flag { top: 0.9rem; left: 0.9rem; z-index: 2; }

.plan-featured {
  border-color: rgba(76, 141, 255, 0.45);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(76, 141, 255, 0.1), transparent 60%),
    var(--bg-elev-2);
  box-shadow: var(--shadow);
}

.plan-flag {
  position: absolute;
  top: -0.72rem;
  left: clamp(1.5rem, 4vw, 2rem);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #06122c;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan-name {
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  padding-right: 0.5rem;
}
.plan-kicker {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.85rem;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-family: var(--font-display);
}
.plan-price .amount {
  font-size: clamp(2rem, 7vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
}
.plan-price .per { font-size: 0.8rem; color: var(--ink-dim); font-family: var(--font-body); }

.plan-desc {
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: 0.92rem;
  min-height: 3.4em;
}

.plan-features {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.7rem;
}
.plan-features li {
  display: flex;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: #d3d8e0;
  align-items: flex-start;
}
.plan-features svg { flex: none; margin-top: 3px; color: var(--accent); }

.plan .btn { margin-top: auto; }
.plan-features { margin-bottom: 1.6rem; }

.plan-foot {
  margin-top: 0.85rem;
  min-height: 2.6em;
  font-size: 0.76rem;
  color: var(--ink-dim);
  text-align: center;
}

.plans-note {
  margin-top: 1.5rem;
  max-width: 62ch;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--ink-dim);
}

/* --- Testimonials ------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 4vw, 1.85rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
.quote:hover { border-color: var(--line-strong); }

.quote-body {
  font-size: 1rem;
  line-height: 1.62;
  color: #dfe5ee;
  flex: 1;
}
.quote-body::before { content: "\201C"; }
.quote-body::after { content: "\201D"; }

.quote-meta {
  margin-top: 1.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.85rem;
}

.quote-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06122c;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.quote-name { font-weight: 700; font-size: 0.92rem; letter-spacing: -0.01em; }
.quote-detail { font-size: 0.78rem; color: var(--ink-dim); }
.quote-result {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* --- Temoignage video ----------------------------------------------------
   Une vignette verticale au format 9:16, comme la publication d'origine, et
   la citation en face. Format compact : la vignette reste petite, c'est le
   texte qui porte le temoignage. Le lecteur TikTok n'arrive qu'au clic. */
.quote-video {
  display: grid;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  max-width: 600px;
  padding: clamp(0.9rem, 2.4vw, 1.1rem);
  margin-bottom: 1.25rem;
}

.quote-media { min-width: 0; }

.quote-poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  aspect-ratio: 9 / 16;
  transition: border-color 0.25s var(--ease);
}
.quote-poster:hover { border-color: var(--line-strong); }

.quote-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Voile sombre en bas, pour que la legende reste lisible sur la photo. */
.quote-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 42%);
}

.quote-poster-play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  box-shadow: var(--shadow-accent);
  transition: transform 0.2s var(--ease);
}
.quote-poster:hover .quote-poster-play { transform: translate(-50%, -50%) scale(1.06); }

.quote-poster-play::before {
  content: "";
  margin-left: 2px;
  border-left: 9px solid #06122c;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.quote-poster-label {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0.4rem;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Lecteur officiel, injecte au clic. */
.quote-frame {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: var(--radius);
  background: #000;
}

.quote-video-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.quote-video .quote-body { font-size: 0.92rem; }

/* La signature se resserre avec la vignette. */
.quote-video .quote-meta { margin-top: 0.8rem; padding-top: 0.65rem; gap: 0.4rem 0.55rem; }
.quote-video .quote-avatar { width: 26px; height: 26px; font-size: 0.68rem; }
.quote-video .quote-name { font-size: 0.84rem; }
.quote-video .quote-detail { font-size: 0.72rem; }
.quote-video .quote-result { font-size: 0.84rem; }

.quote-source {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
}
.quote-source:hover { color: var(--ink); }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.75rem;
}

.footer-bottom {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-legal a:hover { color: var(--ink); }

/* Avertissement sante : centre dans le pied de page et mis en avant. Le bloc
   est un avis, pas un paragraphe de plus, donc il se lit au milieu et se
   signale par une teinte bleue, un filet d'accroche en haut et un halo. Le
   liseret vertical a disparu avec le centrage : un trait sur le cote ne veut
   plus rien dire quand le texte est au milieu. */

/* La largeur limite le nombre de caracteres par ligne. Centre, un texte trop
   large devient difficile a suivre, l'oeil doit retrouver chaque debut de
   ligne dans les deux sens. D'ou une mesure volontairement courte. */
.footer-disclaimer {
  max-width: 64ch;
  margin-inline: auto;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.15rem, 3.2vw, 2.1rem);
  border: 1px solid rgba(76, 141, 255, 0.3);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(76, 141, 255, 0.11), rgba(76, 141, 255, 0.03));
  /* Halo symetrique, sans decalage vertical : un halo decale vers le bas ne
     depasse que sous la carte et se lit comme une tache au lieu d'une lueur. */
  box-shadow: 0 0 64px -26px rgba(76, 141, 255, 0.75);
  text-align: center;
}

.footer-disclaimer-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.footer-disclaimer-label svg { flex: none; }

.footer-disclaimer-body {
  display: grid;
  gap: 0.85rem;
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* La phrase qui renvoie vers le medecin garde sa mise en avant, mais par un
   fond teinte puisque le filet lateral a disparu. Le texte passe en blanc
   franc, le fond reste assez sombre pour ne pas casser le contraste. */
.footer-disclaimer-alert {
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

/* Le gris le plus sombre tombe sous le seuil de lisibilite sur ce fond teinte,
   la mention des resultats individuels reste donc en gris moyen et se detache
   par un filet plutot que par la couleur. */
.footer-disclaimer-note {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- Fenetre modale -----------------------------------------------------
   Une seule fenetre vit encore dans la page : la fiche d'un rendez-vous du
   direct. La fenetre d'abonnement a ete retiree avec ses etapes numerotees,
   son emplacement d'integration et ses arguments de confiance : les appels a
   l'action gratuits menent maintenant au generateur de bilan. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(5, 5, 6, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), visibility 0.22s;
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; visibility: visible; }

.modal-card {
  width: 100%;
  max-width: 560px;
  max-height: min(90vh, 760px);
  overflow-y: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.24s var(--ease);
  box-shadow: var(--shadow);
}
.modal.is-open .modal-card { transform: none; }

/* La fiche d'un rendez-vous du direct : la meme fenetre, en plus court, car
   elle ne porte qu'un titre et un paragraphe. */
.modal-card-narrow { max-width: 460px; }

.live-sheet-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.live-sheet-icon.is-2 { background: rgba(125, 196, 255, 0.14); color: var(--accent-2); }
.live-sheet-icon.is-3 { background: rgba(74, 222, 128, 0.14); color: var(--good); }
.modal-card-narrow .modal-head h3 { font-size: 1.32rem; }
.live-sheet-text {
  margin-top: 0.9rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.modal-head h3 { font-size: 1.4rem; letter-spacing: -0.025em; }
.modal-head p { color: var(--ink-muted); font-size: 0.9rem; margin-top: 0.6rem; }

.modal-close {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.modal-close:hover { color: var(--ink); border-color: var(--ink); }

.modal-foot {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* --- Generateur de plan sur mesure --------------------------------------
   Le questionnaire se remplit au doigt : les options sont de grandes
   pastilles cliquables, pas des ronds de radio minuscules, parce que la page
   est lue majoritairement sur telephone. La carte du formulaire et le plan
   compose s'empilent, le resultat venant sous la carte. */

.plan-tool { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

.plan-panel {
  padding: clamp(1.25rem, 3.4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}

.plan-form { display: grid; gap: 1.6rem; }
/* display sur la classe l'emporte sur [hidden] du navigateur. Sans cette
   regle, masquer le formulaire apres composition ne ferait rien a l'ecran :
   la propriete serait bien posee, mais le formulaire resterait affiche. */
.plan-form[hidden] { display: none; }

.plan-form-intro {
  margin: 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* Les trois parties du bilan coaching, dans l'ordre du questionnaire. Sans
   elles, la page posait onze questions a la suite : le visiteur ne savait pas
   ou il en etait, et le bilan rendu parlait de volets qu'il n'avait pas vus.
   Chaque partie porte son numero, et les parties sont separees par un filet
   pour que l'oeil sache ou l'une finit et ou l'autre commence. */
.plan-part {
  display: grid;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.plan-part:first-of-type { padding-top: 0; border-top: 0; }

.plan-part-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.plan-part-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 0.78rem;
  font-weight: 800;
}

.plan-question {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.plan-question legend {
  padding: 0;
  margin-bottom: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* La pastille des questions facultatives. Le questionnaire n'exige que six
   reponses : sans ce mot sur la legende, le visiteur croit devoir tout
   remplir, ce qui est exactement ce que le passage a la moitie facultative
   cherche a eviter. Elle est posee apres le texte de la question, en petit et
   en retrait, pour se lire comme une precision et non comme un titre. */
.plan-optional {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-dim);
  vertical-align: 0.12em;
}

.plan-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* L'echelle de motivation : dix pastilles qui tiennent sur une rangee, meme a
   390 pixels, parce qu'elles ne portent qu'un chiffre. Elles se partagent la
   largeur au lieu de se suivre, sinon la dixieme passe seule a la ligne et
   l'echelle se lit de travers. */
.plan-options-note { gap: 0.3rem; }
.plan-options-note .plan-option {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  padding: 0.6rem 0.2rem;
}

.plan-question-note {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* La pastille est un label : le clic n'importe ou dedans coche la reponse.
   L'input reste dans le flux pour le clavier et les lecteurs d'ecran, il est
   simplement rendu invisible plutot que retire. */
.plan-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-size: 0.87rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.plan-option:hover { border-color: var(--line-strong); color: var(--ink); }

.plan-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.plan-option span { position: relative; }

.plan-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}
.plan-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.plan-question.is-missing legend { color: #ffb4a8; }
.plan-question.is-missing .plan-options {
  outline: 2px dashed rgba(255, 138, 128, 0.55);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

.plan-note-field { display: grid; gap: 0.5rem; }
.plan-note-field label {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.plan-note-field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 4.6rem;
}
.plan-note-field textarea::placeholder { color: var(--ink-dim); }
.plan-note-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Les exemples sous une question ouverte. Une page blanche ne dit pas quoi
   ecrire : le visiteur qui se demande s'il en dit trop ou pas assez ferme
   l'onglet. Les phrases montrent la bonne taille de reponse et le genre de
   detail utile, et elles se posent dans le champ d'un clic. Elles sont plus
   discretes que les pastilles de reponse : c'est une aide, pas une question.
   Le mot " Exemples " ouvre la rangee au lieu de tenir sa propre ligne : la
   consigne reste lisible sans ajouter une ligne par question. */
.plan-suggestions-lead {
  align-self: center;
  margin-right: 0.1rem;
  font-size: 0.76rem;
  color: var(--ink-dim);
}
.plan-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.plan-suggestion {
  padding: 0.32rem 0.62rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: 0.79rem;
  line-height: 1.35;
  color: var(--ink-muted);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.plan-suggestion:hover { border-color: var(--accent); color: var(--ink); }
.plan-suggestion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-suggestion[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

.plan-form-foot { display: grid; gap: 0.85rem; justify-items: start; }
.plan-form-note {
  font-size: 0.78rem;
  color: var(--ink-dim);
  max-width: 52ch;
}
.plan-form-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.plan-message {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 138, 128, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(255, 138, 128, 0.08);
  font-size: 0.86rem;
  color: #ffd9d2;
}

/* --- Carte d'inscription du bloc de verrou ------------------------------
   Elle vit dans le bloc de verrou, sur le bilan voile : l'adresse s'y
   laisse, le serveur du site l'enregistre puis la transmet a Substack, et le
   voile se leve. Le ton reste celui du site : une etape, pas un mur. */
.plan-unlock {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  width: 100%;
  min-width: 0;
}

.plan-unlock-label {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.plan-unlock-label input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(76, 141, 255, 0.4);
  border-radius: var(--radius);
  outline: none;
}
.plan-unlock-label input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

/* Le consentement se lit avec sa case, avant le bouton : c'est lui qui est
   enregistre avec l'adresse, donc c'est lui qui s'affiche entierement. */
.plan-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: start;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-muted);
  cursor: pointer;
}
.plan-consent input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

.plan-unlock-btn[disabled] { opacity: 0.6; cursor: wait; }

/* Les messages de la carte : l'envoi en cours, le refus, l'adresse refusee.
   role="status" les porte aux lecteurs d'ecran des qu'ils changent. */
.plan-unlock-flash {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.plan-unlock-flash[hidden] { display: none; }

/* La phrase pour le deja-abonne : redonner son adresse ne relance rien. */
.plan-lock-alt {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* La confirmation posee au-dessus du bilan devoile : le bloc de verrou
   disparait avec le voile, mais l'email de Substack reste a confirmer. */
.plan-unlocked {
  margin: 0 0 1rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
  border: 1px solid rgba(76, 141, 255, 0.35);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(76, 141, 255, 0.08), rgba(76, 141, 255, 0.02));
}
/* Le lien de confirmation Substack, dans la note : il porte l'adresse
   pre-remplie, il se lit comme un lien du site, pas comme un bouton qui
   ferait croire a une etape de plus sur place. */
.plan-unlocked-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.plan-unlocked-link:hover, .plan-unlocked-link:focus-visible {
  text-decoration: none;
}

@media (max-width: 600px) {
  .plan-unlock-btn { justify-self: stretch; text-align: center; }
}

/* Sous 760px, la vignette passe au-dessus du texte : cote a cote, la colonne
   de texte deviendrait trop etroite pour etre lue confortablement. */
@media (max-width: 760px) {
  .quote-video {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    max-width: none;
  }
  .quote-media {
    max-width: 124px;
    width: 100%;
    margin: 0 auto;
  }
  .quote-video-body { text-align: center; }
  /* Le resultat ne part plus a droite : le bloc se centre d'un seul tenant. */
  .quote-video .quote-meta { justify-content: center; }
  .quote-video .quote-result { margin-left: 0; }
  .quote-source { align-self: center; }
}

/* --- Le travail en cours -------------------------------------------------
   Le visiteur attend une dizaine de secondes : cette fenetre nomme ce que le
   modele fait, passe par passe, plutot que de battre en silence. Les passes
   sont decoratives (voir montrerTravail dans la page), le seul etat lu par un
   lecteur d'ecran est le titre, en role="status". */
.plan-loading {
  margin-top: 1.1rem;
  padding: clamp(0.95rem, 2.4vw, 1.2rem);
  border: 1px solid rgba(76, 141, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(76, 141, 255, 0.06);
}
/* display sur une classe l'emporte sur [hidden] du navigateur : sans ces deux
   regles, les blocs resteraient visibles avant leur premiere utilisation. */
.plan-loading[hidden] { display: none; }

.plan-work-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.plan-loading-dot {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  animation: plan-pulse 1.1s var(--ease) infinite;
}
.plan-work-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.plan-work-steps {
  display: grid;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.plan-work-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: center;
  font-size: 0.88rem;
  color: var(--ink-dim);
  transition: color 0.35s var(--ease);
}
.plan-work-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
/* La passe en cours porte un point plein, la passe terminee une coche. Les
   deux se dessinent en CSS plutot qu'avec une image : la page n'importe rien
   pour trois points. */
.plan-work-step.is-active { color: var(--ink); font-weight: 600; }
.plan-work-step.is-active .plan-work-mark {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 3.5px);
}
.plan-work-step.is-done { color: var(--ink-muted); }
.plan-work-step.is-done .plan-work-mark {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.plan-work-step.is-done .plan-work-mark::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid var(--accent-2);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.plan-work-note {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--ink-dim);
}
@keyframes plan-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-loading-dot { animation: none; opacity: 1; }
  .plan-work-step, .plan-work-mark { transition: none; }
  /* Le flou est une mise en forme, pas une animation : il reste, sans
     transition. Un voile qui s'effacerait en fondu serait un effet de plus. */
  .plan-veil-body { transition: none; }
}

/* --- Le plan compose --- */
.plan-output {
  padding: clamp(1.25rem, 3.4vw, 2rem);
  border: 1px solid rgba(76, 141, 255, 0.32);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(76, 141, 255, 0.09), rgba(76, 141, 255, 0.02));
  display: grid;
  gap: 1.5rem;
}
.plan-output[hidden] { display: none; }

/* --- Le voile ---
   Le bilan se compose avant la demande d'adresse, et il s'affiche voile : le
   visiteur voit que son bilan est pret, sans pouvoir le lire. Le flou porte sur
   le texte lui meme (filter sur le corps), pas sur une image, donc il suit la
   mise en page a toutes les largeurs.

   Le bloc de verrou est place par dessus le haut du corps voile, la ou le
   regard arrive. Il porte le geste a faire, et il est le seul element lisible
   tant que le voile est en place : c'est lui qui ouvre la porte.

   Le corps voile est borne en hauteur (voir plus bas) : le voile promet un
   bilan, il ne fait pas traverser ses deux mille pixels de texte flou.

   Le voile s'accompagne d'un degrade qui s'eclaircit vers le bas, pour que le
   bloc de verrou se detache du texte flou, et d'un `inert` pose en JavaScript
   qui retire le corps voile des lecteurs d'ecran et du clavier. */
.plan-veil {
  position: relative;
  min-width: 0;
}
.plan-veil-body {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
  transition: filter 260ms ease;
}
.plan-veil-body.is-locked {
  filter: blur(7px) saturate(0.7);
  /* Un texte flou reste selectionnable et copiable, ce qui laisserait lire le
     bilan caractere par caractere. La selection est donc retiree tant que le
     voile est en place. */
  user-select: none;
  pointer-events: none;
  /* Le voile ne garde pas toute la hauteur du bilan. Un texte flou garde son
     volume : la carte mesurait plus de mille pixels sur un ordinateur et plus
     de deux mille sur un telephone, que le visiteur traversait sans rien
     pouvoir lire avant d'arriver a la suite. Le corps est donc borne, et il
     s'efface vers le bas : le debut du bilan se devine, sa longueur reste
     promise, et la carte tient dans un ecran.

     La borne n'est pas un reglage de gout. Elle doit couvrir le bloc de verrou
     (243 px sur un telephone) et laisser voir du texte flou en dessous ; d'ou
     le plancher de 20rem, pour les ecrans courts ou 54vh ne suffiraient pas.
     Le degrade commence sous le bloc de verrou : ce qu'on voit de flou est
     voulu, ce qu'on ne voit pas est le bilan, entier, qui attend dessous. */
  max-height: clamp(20rem, 54vh, 26rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0) 100%);
}

.plan-lock {
  /* Le bloc se pose sur le haut du bilan voile, la ou le regard arrive, et
     non au centre : c'est la qu'il se lit, et il laisse deviner le texte
     flou en dessous. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 1px solid rgba(76, 141, 255, 0.4);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.97) 30%, rgba(10, 10, 11, 0.86) 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.plan-lock-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
}
.plan-lock-kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plan-lock-text {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}
.plan-lock-note {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 62ch;
}

@media (min-width: 860px) {
  .plan-lock {
    top: 1.5rem;
    left: clamp(1.5rem, 4vw, 3rem);
    right: auto;
    max-width: 34rem;
  }
}

/* Le bouton "composer un autre bilan" disparait tant que le voile est en
   place : un second bilan ne servirait a rien avant d'avoir lu le premier. */
.plan-result-actions[hidden] { display: none; }

.plan-result-kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.plan-result-profil {
  margin-top: 0.6rem;
  font-size: 1.02rem;
  color: var(--ink);
}

.plan-block-title { font-size: 1.05rem; }

/* --- Le bilan en trois volets ------------------------------------------
   C'est la reponse au questionnaire, elle ouvre le resultat : trois cartes,
   une par partie du bilan coaching. La phrase de lecture se detache du reste
   par sa taille, les points restent des puces discretes, pour que l'oeil
   trouve d'abord la lecture et lise les actions ensuite. */
.plan-bilan {
  display: grid;
  gap: clamp(0.7rem, 1.8vw, 0.95rem);
  margin-bottom: 1.4rem;
}
@media (min-width: 860px) {
  .plan-bilan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Trois cartes de hauteurs differentes se lisent mal alignees : la grille
     les etire sur la plus haute, et le contenu se place en haut de chacune.
     Le troisieme titre passe sur deux lignes la ou les deux autres en
     prennent une : sans reserve de hauteur, sa lecture commencait dix pixels
     plus bas que celle de ses voisines. La reserve couvre deux lignes, tous
     les titres s'alignent, et les trois lectures demarrent ensemble. */
  .plan-volet { align-content: start; }
  .plan-volet-title { min-height: 2.5em; }
}
.plan-volet {
  display: grid;
  padding: clamp(1rem, 2.4vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}
.plan-volet-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.plan-volet-lecture {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
}

/* --- Le diagnostic : pourquoi le poids monte -----------------------------
   Les raisons numerotees, une par ligne. Le numero se detache comme un
   reperage, le titre porte le mecanisme, la lecture l'explique. */
.plan-raisons { display: grid; gap: 0.55rem; list-style: none; }
.plan-raison {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.plan-raison-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
}
.plan-raison-body { display: grid; gap: 0.4rem; }
.plan-raison-title {
  font-size: 0.98rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.plan-raison-lecture {
  font-size: 0.89rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* --- Le recapitulatif des habitudes --------------------------------------
   Deux colonnes, ce qui joue pour et ce qui joue contre. La colonne des freins
   porte un liseré d'alerte, celle des atouts un liseré d'appui : le visiteur
   voit le partage avant de lire, et les deux tas ne se confondent pas. */
.plan-reperes {
  display: grid;
  gap: clamp(0.7rem, 1.8vw, 0.95rem);
}
@media (min-width: 860px) {
  .plan-reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plan-repere-col {
  display: grid;
  align-content: start;
  padding: clamp(0.95rem, 2.4vw, 1.15rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}
.plan-repere-atouts { border-left-color: var(--good); }
.plan-repere-freins { border-left-color: var(--warn); }
.plan-repere-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.plan-repere-sub {
  margin-top: 0.25rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.plan-repere-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding: 0;
  list-style: none;
}
.plan-repere-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--ink);
}
.plan-repere-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  background: var(--accent-soft);
  color: var(--accent-2);
}
.plan-repere-atouts .plan-repere-mark { background: var(--good-soft); color: var(--good); }
.plan-repere-freins .plan-repere-mark { background: var(--warn-soft); color: var(--warn); }

/* --- La passerelle vers le coaching --------------------------------------
   Le seul endroit du resultat qui vend, et il vient apres le contenu : le
   visiteur a lu son diagnostic avant qu'on lui parle de la suite. */
.plan-passerelle {
  display: grid;
  gap: 0.55rem;
  justify-items: start;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(76, 141, 255, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(76, 141, 255, 0.08);
}
.plan-passerelle-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.plan-passerelle-text { font-size: 0.92rem; line-height: 1.6; }
/* Les deux sorties de la passerelle. Elles passent l'une sous l'autre sur un
   telephone : cote a cote, deux libelles longs ne tiennent pas sur la largeur
   d'un ecran de 390 px, et leurs mots insecables feraient deborder la page. */
.plan-passerelle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.35rem;
  justify-content: flex-start;
}
.plan-passerelle-actions .btn { flex: 0 1 auto; }
.plan-passerelle-note {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 62ch;
}

.plan-result-foot { display: grid; gap: 1rem; }
.plan-result-disclaimer {
  font-size: 0.78rem;
  color: var(--ink-dim);
  max-width: 62ch;
}
.plan-result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* --- Reveal on scroll --------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 600px) {
  .trust-list { grid-template-columns: repeat(4, 1fr); }
  .trust-item:last-child { grid-column: auto; }

  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }

  .modal-foot { flex-direction: row; }
  .modal-foot .btn { flex: 1; }

  .plan-form-foot { grid-template-columns: auto; }
}

@media (min-width: 860px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .hero-ctas .btn { flex: 0 0 auto; }

  .plans { grid-template-columns: repeat(2, 1fr); }
}

/* La photo et le recit se rangent cote a cote a partir de 1024px, le seuil de
   la maquette importee. En dessous, la photo reste une bande pleine largeur :
   a 900px, deux colonnes ne laissaient a la photo qu'un tiers etroit de la
   page et le recit se lisait en colonne de journal. La photo garde sa largeur
   maximale et le recit prend le reste : c'est la colonne de texte qui doit
   absorber la largeur disponible, pas l'image. Elle s'etire sur la hauteur de
   la rangee : la colonne de texte a grandi avec la carte d'appel a l'action,
   et une vignette calee sur son seul format laissait sous elle un vide qui se
   lisait comme une colonne inachevee. */
@media (min-width: 1024px) {
  .story-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: stretch; }
  .story-figure { height: 100%; }
}

@media (min-width: 1100px) {
  /* The featured card is raised rather than scaled, so the row stays level. */
  .plan-featured { margin-top: -0.9rem; }

  /* Le bandeau du live : le profil dans la colonne de gauche, le direct a sa
     droite, et les trois rendez-vous sur une rangee sous les deux. La bascule
     attend 1100px et non 860 : plus bas, le nom, le pseudo et le bouton pour
     suivre ne tiennent pas sur une ligne dans une colonne de cette largeur.
     La colonne de gauche recoit un peu plus que le tiers pour la meme raison. */
  .live-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.9fr);
    padding: clamp(1.6rem, 2.6vw, 2.1rem);
  }
  /* La colonne de gauche est plus haute que son contenu : le profil est donc
     centre verticalement, sinon le vide se lit comme un trou entre le nom et
     les chiffres. La hauteur de la colonne est donnee par le direct, a droite. */
  .live-profile {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 clamp(1.5rem, 2.6vw, 2.2rem) 0 0;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .live-body { grid-column: 2; grid-row: 1; align-content: start; }
  .live-side {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    padding-top: clamp(1.4rem, 2.6vw, 1.9rem);
    border-top: 1px solid var(--line);
  }
  .live-side-item { height: 100%; }
  .live-cta { max-width: 30rem; }
}

/* ==========================================================================
   Pages legales
   Meme charte que la page d'accueil, mais une seule colonne de lecture.
   ========================================================================== */

.legal-page { padding-block: clamp(2.25rem, 5.5vw, 3.75rem) clamp(3rem, 8vw, 5.5rem); }

.legal-page .eyebrow { margin-bottom: 1.1rem; }

.legal-page h1 {
  font-size: clamp(1.85rem, 5.6vw, 2.9rem);
  line-height: 1.07;
  max-width: 24ch;
}

.legal-updated {
  margin-top: 1.1rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.legal-body {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 64ch;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.72;
}

.legal-body > * + * { margin-top: 1.1rem; }

.legal-body h2 {
  font-size: clamp(1.15rem, 3.2vw, 1.42rem);
  color: var(--ink);
  margin-top: clamp(2.1rem, 4.5vw, 2.9rem);
}
.legal-body h2 + * { margin-top: 0.85rem; }

.legal-body h3 {
  font-size: 1rem;
  color: var(--ink);
  margin-top: 1.75rem;
}
.legal-body h3 + * { margin-top: 0.7rem; }

.legal-body strong { color: var(--ink); font-weight: 600; }

.legal-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--accent-2); }

.legal-body ul,
.legal-body ol {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
}
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li::marker { color: var(--ink-dim); }

.legal-note {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.88rem;
}

.legal-facts {
  border-top: 1px solid var(--line);
  margin-top: 1.25rem;
}
.legal-facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.legal-facts dt {
  flex: 0 0 13rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.legal-facts dd {
  flex: 1 1 15rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
}

.legal-foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-bottom: 1.5rem;
}

.legal-foot-nav { display: flex; flex-wrap: wrap; gap: 0.55rem 1.35rem; }
.legal-foot-nav a {
  font-size: 0.88rem;
  color: var(--ink-muted);
  transition: color 0.16s var(--ease);
}
.legal-foot-nav a:hover { color: var(--accent); }

.legal-top-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
  flex: none;
  white-space: nowrap;
}
.legal-top-link:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 420px) {
  .legal-top-link { font-size: 0.76rem; padding: 0.45rem 0.7rem; }
}

/* ==========================================================================
   Telephones
   Les regles ci dessous ne s'appliquent qu'aux ecrans etroits. Au dessus, la
   mise en page reste celle du portable et de l'ecran large, inchangee.
   ========================================================================== */

/* Le libelle d'un bouton ne doit jamais elargir la carte qui le contient. Trois
   d'entre eux gardaient leur libelle sur une seule ligne quoi qu'il arrive :
   ceux des offres, en pleine largeur, celui de la carte d'accompagnement sous
   le temoignage, et ceux de l'accueil. Leur largeur minimale, 336px pour une
   offre et 318px pour la carte, depassait alors un ecran de 320px et faisait
   deborder la page entiere de 35px. Rendre la ligne au libelle suffit : il
   passe sur deux lignes quand la place manque, et rien ne bouge des qu'elle
   est la. */
@media (max-width: 620px) {
  .btn { white-space: normal; }
}

/* Un champ de saisie sous 16px declenche le zoom automatique de Safari au
   moment du focus : la page se decale, et le visiteur doit dezoomer a la main
   pour retrouver le formulaire. */
@media (max-width: 620px) {
  .plan-note-field textarea { font-size: 1rem; }
}

/* Les pastilles de suggestion ne mesuraient que 29px de haut : deux pastilles
   voisines se touchaient presque, et le doigt visait a cote. Elles prennent la
   hauteur d'un doigt sur un ecran etroit. */
@media (max-width: 620px) {
  .plan-suggestion {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* Le lien vers la publication d'origine ne faisait que 19px de haut. Sa marge
   interieure etend la zone touchee sans deplacer le texte. */
@media (max-width: 760px) {
  .quote-source { padding: 0.5rem 0.7rem; }
}

/* Sous 400px, le pseudo, son icone et le bouton pour suivre ne tiennent plus
   sur une ligne : le pseudo, insecable, debordait de la carte des 390px, et de
   69px a 320px. Le bouton passe donc sous le nom, aligne a droite. */
@media (max-width: 400px) {
  .tt-top { flex-wrap: wrap; }
}

/* Le lien vers le profil ne faisait que 22px de haut. Sa marge interieure
   porte la zone touchee a 32px, et reste sans effet sur la hauteur de la
   carte : la colonne du nom a de la place sous la photo. */
@media (max-width: 620px) {
  .tt-handle { padding-block: 0.32rem; }
}

/* La rangee des pages legales, en bas de page, n'est pas un lien au fil d'une
   phrase : c'est une rangee de liens, et chacun ne faisait que 21px de haut.
   Elle prend la hauteur d'un doigt, sur la page d'accueil comme sur les pages
   legales, qui portent la meme rangee sous un autre nom. */
@media (max-width: 620px) {
  .footer-legal a { padding-block: 0.45rem; }
  .legal-foot-nav a { padding-block: 0.45rem; }
}

/* Sur un telephone, les mentions les plus petites passaient sous 11px : les
   libelles des trois chiffres, celui de la vignette video et la pastille des
   offres. Elles prennent un demi point, sans changer de role ni de place.
   Les majuscules espacees restent des reperes, pas du texte a lire : c'est leur
   role. Les deux mentions en minuscules, elles, se lisent vraiment, et 11.5px
   etait trop juste : la date du temoignage et le lien vers sa source montent
   d'un cran. */
@media (max-width: 620px) {
  .tt-tiles span { font-size: 0.7rem; }
  .quote-poster-label { font-size: 0.7rem; }
  .plan-flag { font-size: 0.7rem; }
  .quote-video .quote-detail { font-size: 0.8rem; }
  .quote-source { font-size: 0.8rem; }
}

/* L'echelle de motivation range ses dix chiffres sur une seule ligne : c'est ce
   qui la rend lisible d'un coup d'oeil, et la feuille de style la veut ainsi
   jusqu'a 390px. Elle y tient, mais les cases se retrecissent avec la fenetre :
   mesurees a 390px elles font 26px de large, et a 360px elles tombent a 23px,
   sous le minimum tactile de 24px. Sous 366px, elles passent donc sur deux
   rangees de cinq, qui se lisent encore dans l'ordre : la case fait alors
   44px, la taille d'un doigt. Au dessus, l'echelle garde sa seule ligne. */
@media (max-width: 365px) {
  .plan-options-note {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}