/* French Path Canada · accueil et page coaching (refonte du 10 octobre 2026).

   Palette Late Fall Frosts, un rôle par couleur :
   Drape of Night #233145 (autorité, panneaux sombres), Stillness #3D566F,
   Paper #F7F5F2, Persimmon #D97455 (l'action, et seulement elle),
   Fragrant Olive #F1AC5F (la méthode, la réussite). Pas de vert.

   Texte posé sur Persimmon ou Olive : --on-accent (navy très sombre),
   jamais du blanc (3,2:1 sur Persimmon, mesuré). Les panneaux navy restent
   navy en mode nuit : le blanc y est juste. */

:root {
  --night: #233145;
  --still: #3D566F;
  --paper: #F7F5F2;
  --paper-2: #EFEDE9;
  --card: #FFFFFF;
  --persimmon: #D97455;
  --persimmon-hover: #E08B7A;
  --olive: #F1AC5F;
  --olive-wash: rgba(241, 172, 95, 0.16);
  --maple-wash: rgba(217, 116, 85, 0.12);
  --text: #5D6566;
  --strong: #233145;
  --muted: #696F7C;
  --border: #DEDACD;
  --warm: #F1E4DE;
  --ink-maple: #AF5232;
  --ink-gold: #8A6220;
  --on-accent: #1A2433;
  --on-dark: #F7F5F2;
  --muted-on-dark: #C9CFD8;
  --gold-on-dark: #F8C88C;
  --shadow-sm: 0 2px 8px rgba(35, 49, 69, 0.06);
  --shadow-md: 0 10px 30px rgba(35, 49, 69, 0.10);
  --shadow-lg: 0 24px 60px rgba(35, 49, 69, 0.16);
  --r: 16px;
  --r-lg: 24px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --maxw: 1120px;
  /* Le haut de page suit le thème (13 octobre) : clair et chaud en mode jour,
     navy en mode nuit. Il restait navy en plein jour, et la page paraissait
     sombre dès l'arrivée. L'accent du titre est un or plus profond en jour :
     l'Olive pur tombait à 2:1 sur fond clair (#B06A1E : 3,7:1, grand texte). */
  --hero-bg: #F4EFE7;
  --hero-title: #233145;
  --hero-text: #4A5566;
  --hero-accent: #B06A1E;
  --hero-eyebrow: #AF5232;
  --hero-line: rgba(35, 49, 69, 0.12);
  /* Les cartes posées sur la photo : surface plus claire que le fond, liseré
     et ombre franche, pour qu'elles se détachent dans les deux thèmes. */
  --float-bg: #FFFFFF;
  --float-border: rgba(35, 49, 69, 0.06);
  --float-shadow: 0 18px 44px rgba(35, 49, 69, 0.20);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #162131; --paper-2: #111A27; --card: #1E2B3D;
    --text: #D5DAE0; --strong: #F4F1EC; --muted: #A8B1BD;
    --border: #2F3E53; --warm: #2A3446;
    --ink-maple: #F0A98D; --ink-gold: #F3C27F;
    --olive-wash: rgba(241, 172, 95, 0.14); --maple-wash: rgba(217, 116, 85, 0.16);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
    --hero-bg: #233145; --hero-title: #FFFFFF; --hero-text: #C9CFD8; --hero-accent: #F1AC5F;
    --hero-eyebrow: #F8C88C; --hero-line: rgba(255, 255, 255, 0.12);
    --float-bg: #33455F; --float-border: rgba(255, 255, 255, 0.16); --float-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #162131; --paper-2: #111A27; --card: #1E2B3D;
  --text: #D5DAE0; --strong: #F4F1EC; --muted: #A8B1BD;
  --border: #2F3E53; --warm: #2A3446;
  --ink-maple: #F0A98D; --ink-gold: #F3C27F;
  --olive-wash: rgba(241, 172, 95, 0.14); --maple-wash: rgba(217, 116, 85, 0.16);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --hero-bg: #233145; --hero-title: #FFFFFF; --hero-text: #C9CFD8; --hero-accent: #F1AC5F;
  --hero-eyebrow: #F8C88C; --hero-line: rgba(255, 255, 255, 0.12);
  --float-bg: #33455F; --float-border: rgba(255, 255, 255, 0.16); --float-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { color: var(--strong); margin: 0; line-height: 1.15; }
h1, h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--night); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 12px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section.tight { padding: 72px 0; }
.alt { background: var(--paper-2); }
.tag {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-maple); margin-bottom: 14px;
}
.h2 { font-size: clamp(30px, 4.4vw, 46px); max-width: 20ch; }
.lead { font-size: 19px; max-width: 58ch; margin-top: 16px; }
.center { text-align: center; }
.center .h2, .center .lead { margin-left: auto; margin-right: auto; }

/* ── Boutons : une action principale, Persimmon ; tout le reste en retrait ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 17px; text-decoration: none; line-height: 1.2;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn-main { background: var(--persimmon); color: var(--on-accent); box-shadow: 0 8px 22px rgba(217, 116, 85, 0.35); }
.btn-main:hover { background: var(--persimmon-hover); transform: translateY(-2px); }
.btn-main .fleche { transition: transform 0.2s var(--ease); }
.btn-main:hover .fleche { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--strong); border: 2px solid var(--border); }
.btn-ghost:hover { border-color: var(--strong); }
.on-dark .btn-ghost { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.3); }
.on-dark .btn-ghost:hover { border-color: #fff; }
.lien { color: var(--ink-maple); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.2s; }
.lien:hover { border-color: currentColor; }
.on-dark .lien { color: var(--gold-on-dark); }
.hero .lien { color: var(--hero-eyebrow); }

/* ── Barre du haut : la seule place des réglages (langue, thème) ── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.3s;
}
.topbar.scrolled { border-bottom-color: var(--border); }
.topbar-in { max-width: var(--maxw); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--strong); margin-right: auto; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--persimmon); color: var(--on-accent); display: grid; place-items: center; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 15px; }
.logo-text { font-family: 'Playfair Display', serif; font-weight: 800; font-size: 18px; line-height: 1.1; }
.logo-text small { display: block; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-gold); }
.topnav { display: flex; gap: 22px; margin-right: 8px; }
.topnav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--text); }
.topnav a:hover { color: var(--strong); }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--card);
  color: var(--strong); display: grid; place-items: center; cursor: pointer; font-weight: 800; font-size: 13px;
}
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topbar .btn { min-height: 42px; padding: 9px 18px; font-size: 15px; box-shadow: none; }
.topbar .btn-cta { opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.25s, transform 0.25s; }
.topbar.scrolled .btn-cta { opacity: 1; pointer-events: auto; transform: none; }
@media (max-width: 860px) { .topnav { display: none; } }
@media (max-width: 520px) { .logo-text small { display: none; } .topbar .btn-cta { display: none; } }

/* ── Haut de page ── */
.hero { background: var(--hero-bg); color: var(--hero-text); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 85% 15%, rgba(241, 172, 95, 0.16), transparent 70%),
    radial-gradient(500px 380px at 10% 100%, rgba(217, 116, 85, 0.14), transparent 70%);
}
.hero-in { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 72px 24px 88px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hero-eyebrow); }
.hero .eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--persimmon); box-shadow: 0 0 0 4px rgba(217, 116, 85, 0.25); }
.hero h1 { color: var(--hero-title); font-size: clamp(40px, 6.2vw, 68px); margin-top: 18px; }
.hero h1 em { font-style: normal; color: var(--hero-accent); }
.hero-sub { font-size: 19px; color: var(--hero-text); max-width: 46ch; margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.hero-note { font-size: 14.5px; color: var(--hero-text); margin-top: 14px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hero-line); }
.hero-proof div { font-size: 14.5px; color: var(--hero-text); }
.hero-proof strong { display: block; font-family: 'Playfair Display', serif; font-size: 26px; color: var(--hero-title); line-height: 1.1; }
.hero-proof .etoiles { color: var(--hero-accent); letter-spacing: 1px; }

.portrait { position: relative; justify-self: center; width: min(100%, 360px); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow-lg); }
.portrait-sign { position: absolute; left: -22px; top: 26px; background: var(--float-bg); color: var(--strong); border: 1px solid var(--float-border); border-radius: 14px; padding: 10px 14px; box-shadow: var(--float-shadow); font-size: 14px; line-height: 1.35; }
.portrait-sign strong { display: block; font-size: 15px; }
.portrait-sign span { color: var(--muted); }
/* La carte de la séance du jour : ce que l'élève voit en ouvrant la plateforme. */
.seance-carte {
  position: absolute; right: -26px; bottom: -28px; width: 250px;
  background: var(--float-bg); color: var(--text); border: 1px solid var(--float-border); border-radius: 18px; padding: 16px 16px 14px;
  box-shadow: var(--float-shadow); font-size: 14px;
}
.seance-carte .t { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: var(--strong); font-size: 15px; }
.seance-carte .t { gap: 8px; }
.seance-carte .t span { white-space: nowrap; }
.seance-carte .t small { font-weight: 600; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.seance-ligne { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.seance-ligne i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.seance-ligne .ret { background: var(--maple-wash); color: var(--ink-maple); }
.seance-ligne .neuf { background: var(--olive-wash); color: var(--ink-gold); }
.barre { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--strong) 12%, transparent); margin-top: 14px; overflow: hidden; }
.barre span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--persimmon), var(--olive)); animation: remplir 2.4s 0.6s var(--ease) forwards; }
@keyframes remplir { to { width: 58%; } }
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 64px; padding: 48px 20px 80px; }
  .portrait { width: min(78%, 320px); }
  .portrait-sign { left: -14px; }
  .seance-carte { right: -18px; width: 230px; }
}
@media (max-width: 420px) { .seance-carte { right: -8px; bottom: -40px; width: 210px; } .portrait-sign { left: -8px; } }

/* ── Les élèves, en vidéo ── */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.vcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.vmedia { position: relative; aspect-ratio: 4 / 5; background: var(--night); }
.vmedia video { width: 100%; height: 100%; object-fit: cover; }
.vplay {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer;
  background: linear-gradient(180deg, transparent 55%, rgba(17, 26, 39, 0.55));
}
.vplay span { width: 66px; height: 66px; border-radius: 50%; background: var(--persimmon); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.2s var(--ease); }
.vplay:hover span { transform: scale(1.08); }
.vplay svg { width: 24px; height: 24px; fill: var(--on-accent); margin-left: 4px; }
.vplay.cache { display: none; }
.vbadge { position: absolute; left: 14px; top: 14px; background: var(--olive); color: var(--on-accent); font-weight: 800; font-size: 13px; padding: 5px 10px; border-radius: 99px; }
.vtexte { padding: 20px 22px 22px; }
.vtexte blockquote { margin: 0; font-size: 16.5px; color: var(--strong); font-weight: 500; }
.vtexte .qui { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.vtexte .qui strong { color: var(--strong); }
.note-preuve { margin-top: 26px; font-size: 15px; color: var(--muted); }
.note-preuve .etoiles { color: var(--olive); letter-spacing: 1px; }
@media (max-width: 900px) {
  .videos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 16px; margin: 36px -20px 0; scrollbar-width: none; }
  .videos::-webkit-scrollbar { display: none; }
  .vcard { scroll-snap-align: center; }
  .vcard:hover { transform: none; }
}

/* ── Comment ça marche : trois temps, un seul ouvert ── */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.etape {
  text-align: left; background: var(--card); border: 2px solid var(--border); border-radius: var(--r);
  padding: 18px 20px; cursor: pointer; color: var(--text); transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.etape:hover { transform: translateY(-2px); }
.etape .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); color: var(--strong); font-weight: 800; font-size: 14px; transition: background 0.2s, color 0.2s; }
.etape strong { display: block; color: var(--strong); font-size: 17.5px; margin-top: 10px; }
.etape small { display: block; font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.etape[aria-selected="true"] { border-color: var(--persimmon); box-shadow: var(--shadow-md); }
.etape[aria-selected="true"] .n { background: var(--persimmon); color: var(--on-accent); }
.panneau { margin-top: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--shadow-sm); }
.panneau[hidden] { display: none; }
.panneau-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.panneau h3 { font-size: 24px; font-family: 'Playfair Display', serif; }
.panneau p { margin-top: 12px; }
.panneau .suite { margin-top: 20px; }
@media (max-width: 760px) {
  .etapes { grid-template-columns: 1fr; gap: 10px; }
  .etape { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 14px 16px; }
  .etape strong { margin-top: 0; }
  .etape small { grid-column: 2; }
  .etape .n { grid-row: span 2; }
  .panneau { padding: 22px 18px; }
  .panneau-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Temps 1 : le niveau par compétence, la plus faible plafonne tout. */
.niveaux { display: grid; gap: 14px; }
.niv { display: grid; grid-template-columns: 110px 1fr 38px; gap: 12px; align-items: center; font-size: 15px; }
.niv .piste { height: 12px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.niv .piste span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--still); transition: width 1.1s var(--ease); }
.niv.faible .piste span { background: var(--persimmon); }
.niv b { color: var(--strong); text-align: right; }
.niv.faible b { color: var(--ink-maple); }
.niv-note { font-size: 14.5px; color: var(--muted); margin-top: 6px; }

/* Temps 2 : la question à essayer. */
.demo-doc { background: var(--paper-2); border-left: 4px solid var(--still); border-radius: 10px; padding: 14px 16px; color: var(--strong); font-size: 16px; }
.demo-q { font-weight: 700; color: var(--strong); margin: 16px 0 10px; }
.demo-opts { display: grid; gap: 8px; }
.demo-opt {
  text-align: left; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--border);
  background: var(--card); color: var(--text); cursor: pointer; font-size: 15.5px; transition: border-color 0.2s, background 0.2s;
}
.demo-opt:hover:not(:disabled) { border-color: var(--still); }
.demo-opt:disabled { cursor: default; }
.demo-opt.juste { border-color: var(--olive); background: var(--olive-wash); color: var(--strong); font-weight: 700; }
.demo-opt.faux { border-color: var(--persimmon); background: var(--maple-wash); }
.demo-expl { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--paper-2); font-size: 15.5px; animation: monter 0.35s var(--ease); }
.demo-expl strong { color: var(--strong); }
@keyframes monter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Temps 3 : la faute qui revient, J+1, J+3, J+7, J+14. */
.frise { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; padding-top: 6px; }
.frise::before { content: ''; position: absolute; left: 10%; right: 10%; top: 28px; height: 3px; background: var(--border); border-radius: 3px; }
.jalon { position: relative; text-align: center; font-size: 13.5px; color: var(--muted); }
.jalon i {
  width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: 14px; background: var(--card); border: 3px solid var(--border); color: var(--muted);
  transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.35s var(--ease);
}
.jalon.fait i { border-color: var(--still); color: var(--strong); transform: scale(1.06); }
.jalon.rate i { border-color: var(--persimmon); background: var(--maple-wash); color: var(--ink-maple); }
.jalon.tenu i { border-color: var(--olive); background: var(--olive); color: var(--on-accent); }
.jalon b { display: block; color: var(--strong); font-size: 14px; }
.frise-legende { margin-top: 18px; font-size: 15px; min-height: 48px; }

/* ── Les quatre épreuves ── */
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.tuile { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 22px; transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.tuile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tuile .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--olive-wash); color: var(--ink-gold); }
.tuile .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tuile h3 { font-size: 18px; margin-top: 16px; }
.tuile p { font-size: 15.5px; margin-top: 8px; }
@media (max-width: 960px) { .tuiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tuiles { grid-template-columns: 1fr; gap: 12px; } .tuile { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; } .tuile .ic { grid-row: span 2; } .tuile h3 { margin-top: 0; align-self: end; } .tuile p { margin-top: 0; } }

/* ── Les formules ── */
.examen { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.examen > span { font-weight: 700; color: var(--strong); margin-right: 4px; }
.puce {
  border: 2px solid var(--border); background: var(--card); color: var(--strong); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 15px; transition: border-color 0.2s, background 0.2s;
}
.puce:hover { border-color: var(--still); }
.puce[aria-pressed="true"] { border-color: var(--persimmon); background: var(--maple-wash); }
/* Ce qui est gratuit pour toujours, au-dessus des trois formules : une ligne,
   pas une quatrième colonne qui ferait concurrence à la formule conseillée. */
.gratuit-bande { margin: 28px auto 0; max-width: 860px; text-align: left; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding: 16px 22px; border-radius: var(--r); background: var(--card); border: 1px dashed var(--border); font-size: 15.5px; color: var(--text); }
.gratuit-bande strong { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-gold); white-space: nowrap; }
.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; align-items: stretch; }
.formule {
  position: relative; background: var(--card); border: 2px solid var(--border); border-radius: var(--r-lg);
  padding: 30px 26px 26px; display: flex; flex-direction: column; transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.formule.choisie { border-color: var(--persimmon); box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.formule .badge { position: absolute; top: -14px; left: 24px; background: var(--persimmon); color: var(--on-accent); font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 99px; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; }
.formule.choisie .badge { opacity: 1; transform: none; }
.formule .nom { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-gold); }
.formule .prix { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 800; color: var(--strong); line-height: 1; margin-top: 12px; }
.formule .prix sup { font-size: 24px; vertical-align: 22px; margin-right: 2px; }
.formule .prix small { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.formule .pour { font-size: 15px; color: var(--muted); margin-top: 8px; min-height: 2.6em; }
.formule ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; font-size: 15.5px; flex: 1; }
.formule li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.formule li::before { content: ''; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--olive-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6220' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.formule .plus { background: var(--olive-wash); border-radius: 12px; padding: 12px 14px; font-size: 15px; margin-top: 16px; }
.formule .plus strong { color: var(--strong); display: block; }
.formule .btn { width: 100%; }
.formule:not(.choisie) .btn-main { background: transparent; color: var(--strong); border: 2px solid var(--border); box-shadow: none; }
.formule:not(.choisie) .btn-main:hover { border-color: var(--strong); transform: none; }
.formules-pied { margin-top: 30px; display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 15px; color: var(--muted); }
.garantie { display: inline-flex; gap: 12px; align-items: flex-start; text-align: left; max-width: 640px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; color: var(--text); }
.garantie svg { flex-shrink: 0; width: 26px; height: 26px; fill: none; stroke: var(--ink-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.garantie strong { color: var(--strong); }
@media (max-width: 900px) {
  .formules { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .formule.choisie { transform: none; }
  .formule .pour { min-height: 0; }
}

/* La coche des formules : son trait est dans l'image, il faut l'éclaircir à la main en mode nuit. */
:root[data-theme="dark"] .formule li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3C27F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .formule li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3C27F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); } }

/* ── Le coaching, en un panneau ── */
.coaching { background: var(--still); color: var(--on-dark); border-radius: 32px; padding: 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
.coaching::after { content: ''; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(241, 172, 95, 0.22), transparent 70%); pointer-events: none; }
.coaching .tag { color: var(--gold-on-dark); }
.coaching h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); }
.coaching p { color: var(--muted-on-dark); margin-top: 14px; }
.coaching .actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 28px; }
.diag { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; padding: 26px; position: relative; z-index: 1; }
.diag .prix { font-family: 'Playfair Display', serif; font-size: 44px; font-weight: 800; color: #fff; line-height: 1; }
.diag .prix small { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600; color: var(--muted-on-dark); }
.diag ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--on-dark); }
.diag li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.diag li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--olive); margin-top: 9px; }
.rythmes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rythmes span { font-size: 14px; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); color: var(--on-dark); }
@media (max-width: 900px) { .coaching { grid-template-columns: 1fr; padding: 36px 24px; border-radius: 24px; gap: 28px; } }

/* ── Qui je suis ── */
.moi { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.moi img { border-radius: 28px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow-md); }
.moi p + p { margin-top: 16px; }
.moi .chiffres { display: flex; flex-wrap: wrap; gap: 18px 0; margin-top: 30px; }
/* Trois repères, pas trois boîtes : le chiffre en grand, ce qu'il veut dire
   en dessous, un filet entre eux (13 octobre : la boîte par repère, plus le
   cadre que la règle posait aussi sur le libellé, faisait un double cadre). */
.moi .chiffres > span { display: flex; flex-direction: column; padding: 0 28px; border-left: 1px solid var(--border); }
.moi .chiffres > span:first-child { padding-left: 0; border-left: 0; }
.moi .chiffres strong { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--strong); }
.moi .chiffres > span > span { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 520px) { .moi .chiffres > span { padding: 0 18px; } .moi .chiffres strong { font-size: 24px; } }
.signature { font-family: 'Playfair Display', serif; font-style: italic; font-size: 24px; color: var(--strong); margin-top: 22px; }
@media (max-width: 860px) { .moi { grid-template-columns: 1fr; gap: 32px; } .moi img { max-width: 340px; } }

/* ── Questions fréquentes ── */
.faq { max-width: 760px; margin: 40px auto 0; display: grid; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); transition: border-color 0.2s; }
.faq details[open] { border-color: var(--still); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--strong); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; font-weight: 500; color: var(--ink-maple); transition: transform 0.25s var(--ease); line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .rep { padding: 0 22px 20px; font-size: 16px; }

/* ── Le dernier appel ── */
.final { background: var(--night); color: var(--on-dark); text-align: center; padding: 96px 24px; position: relative; overflow: hidden; }
.final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0%, rgba(241, 172, 95, 0.16), transparent 70%); pointer-events: none; }
.final h2 { color: #fff; font-size: clamp(32px, 5vw, 52px); max-width: 18ch; margin: 0 auto; position: relative; }
.final p { color: var(--muted-on-dark); margin: 16px auto 30px; max-width: 46ch; position: relative; }
.final .hero-actions { justify-content: center; position: relative; }

/* ── Pied de page ── */
footer { background: var(--paper-2); padding: 64px 0 36px; font-size: 15px; }
.pied { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 36px; }
.pied h3 { font-size: 13px; font-family: 'DM Sans', sans-serif; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied a { text-decoration: none; color: var(--text); }
.pied a:hover { color: var(--strong); text-decoration: underline; }
.pied .logo { margin-bottom: 12px; }
.lettre form { display: flex; gap: 8px; margin-top: 10px; }
.lettre input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--strong); font: inherit; font-size: 16px; }
.lettre button { height: 46px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--strong); color: var(--paper); font-weight: 700; cursor: pointer; }
.lettre .etat { margin-top: 8px; font-size: 14px; }
.hp { position: absolute; left: -9999px; }
.legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .pied { grid-template-columns: 1fr 1fr; } .pied .marque, .pied .lettre { grid-column: 1 / -1; } }

/* ── La question à Jonathan : seul bouton flottant ── */
.ask-launcher { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--still); color: #fff; border: 2px solid rgba(255, 255, 255, 0.22); box-shadow: var(--shadow-lg); display: grid; place-items: center; }
.ask-launcher svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask-panel { position: fixed; right: 18px; bottom: 86px; z-index: 61; width: min(360px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 20px; }
.ask-panel[hidden] { display: none; }
.ask-head { display: flex; justify-content: space-between; align-items: center; }
.ask-head strong { color: var(--strong); font-size: 17px; }
.ask-close { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.ask-panel p { font-size: 14.5px; margin: 6px 0 12px; }
.ask-panel label { display: block; font-size: 13.5px; font-weight: 700; color: var(--strong); margin: 10px 0 4px; }
.ask-panel input, .ask-panel textarea { width: 100%; border-radius: 10px; border: 1px solid var(--border); background: var(--paper); color: var(--strong); padding: 10px 12px; font: inherit; font-size: 16px; }
.ask-panel textarea { min-height: 96px; resize: vertical; }
.ask-panel .btn { width: 100%; margin-top: 14px; min-height: 46px; }
.ask-err { color: var(--ink-maple); font-size: 14px; margin-top: 8px; }

/* Apparition au défilement, discrète, et seulement si le script tourne. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.vu { opacity: 1; transform: none; }

/* ── Page coaching ── */
.page-tete { background: var(--night); color: var(--on-dark); padding: 64px 0 72px; }
.page-tete h1 { color: #fff; font-size: clamp(36px, 5.4vw, 56px); max-width: 18ch; }
.page-tete p { color: var(--muted-on-dark); font-size: 19px; max-width: 54ch; margin-top: 18px; }
.page-tete .hero-actions { margin-top: 28px; }
.plans-coaching .formule .prix small { font-size: 15px; }
.plans-coaching .formule.choisie { transform: none; }
.conditions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; }
.conditions div { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; }
.conditions strong { display: block; color: var(--strong); margin-bottom: 6px; }
.avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.avis figure { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; }
.avis blockquote { margin: 0; font-size: 15.5px; }
.avis figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.avis figcaption strong { color: var(--strong); }
.avis .etoiles { color: var(--olive); letter-spacing: 1px; margin-bottom: 8px; display: block; }
@media (max-width: 860px) { .conditions, .avis { grid-template-columns: 1fr; } }

/* La langue : un seul texte visible à la fois. */
[data-lang="fr"] .en-only, [data-lang="en"] .fr-only { display: none !important; }