@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../assets/fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   ShapeMax — site vitrine
   ========================================================================== */

:root {
  /* ShapeMax brand charter: framboise / blanc / bleu nuit + dérivés */
  --bg: #ffffff;
  --bg-elevated: #fafafa;
  --bg-card: #ffffff;
  --bg-card-hover: #fff5f6;
  --bg-card-hover-blue: #eef3ff;
  --border: #e7e7e7;
  --border-soft: #efefef;

  --text: #1b1b1b;
  --text-muted: #6b6b6b;
  --text-faint: #707070;
  --text-muted-strong: #4f4f4f;
  --accent-text: #D72638;

  --accent: #D72638;
  --accent-strong: #b81e2f;
  --accent-soft: #fbdde0;
  --accent-mid: #f4a0a8;
  --accent-grad: rgba(244, 160, 168, 0.5);
  --accent-glow: rgba(215, 38, 56, 0.22);
  --blue: #cfdcff;
  --blue-strong: #4f6fe0;
  --blue-soft: rgba(207, 220, 255, 0.6);
  --dark: #1b1b1b;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;

  --shadow-card: 0 1px 2px rgba(27, 27, 27, 0.04), 0 10px 26px -14px rgba(27, 27, 27, 0.16);
  --shadow-card-hover: 0 1px 2px rgba(27, 27, 27, 0.05), 0 16px 32px -14px rgba(215, 38, 56, 0.22);
}

/* Dark mode: follows the OS/browser preference automatically (no manual
   toggle) -- the brand charter already ships a "bleu nuit" (#1B1B1B) dark
   variant of the logo and every color, so this reuses the exact same
   accent/blue tokens, just re-based onto dark surfaces. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1b1b;
    --bg-elevated: #202020;
    --bg-card: #242424;
    --bg-card-hover: #2b2b2b;
    --bg-card-hover-blue: #2b2b2b;
    --border: #3a3a3a;
    --border-soft: #2f2f2f;

    --text: #f5f5f5;
    --text-muted: #a8a8a8;
    --text-faint: #8f8f8f;
    --text-muted-strong: #b4b4b4;
    --accent-text: #ee4b5d;

    --accent-strong: #ee4b5d;
    --accent-soft: rgba(215, 38, 56, 0.18);
    --accent-mid: #f4a0a8;
    --accent-grad: rgba(244, 160, 168, 0.22);
    --accent-glow: rgba(215, 38, 56, 0.4);
    --blue-strong: #cfdcff;
    --blue-soft: rgba(207, 220, 255, 0.18);

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -14px rgba(0, 0, 0, 0.55);
    --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 32px -14px rgba(215, 38, 56, 0.4);
  }

  .logo-img--light { display: none !important; }
  .logo-img--dark { display: block !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
/* GSAP pins need native (instant) scrolling; js/main.js smooths links. */
html.js-smooth-scroll { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 200;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

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

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-2);
}
.eyebrow-center { text-align: center; }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.section-title.center { text-align: center; margin-inline: auto; }

.section-lead {
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--text-muted);
  max-width: 620px;
  margin-top: var(--space-2);
}
.section-lead.center { margin-inline: auto; text-align: center; }

.section { padding-block: var(--space-7); position: relative; }
.section-alt { background: linear-gradient(180deg, transparent, var(--bg-elevated) 12%, var(--bg-elevated) 88%, transparent); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 3.40282e+38px;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(215, 38, 56, 0.55);
}
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-small { padding: 10px 20px; font-size: 14px; }
.list-toggle { display: none; }

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.store-buttons--center { justify-content: center; }

.store-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  min-height: 56px;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease);
}
html[data-os="ios"] .store-btn--android,
html[data-os="android"] .store-btn--ios { display: none; }
.store-btn:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--bg-card-hover); }
.store-btn svg { height: 26px; width: auto; fill: var(--text); flex-shrink: 0; }
.store-btn-text { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.15; }
.store-btn-text small { font-family: var(--font-body); font-weight: 500; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.hero-note { color: var(--text-faint); font-size: 13px; margin-top: var(--space-2); }
.hero-note.center { text-align: center; }

/* ---------- promo bar ---------- */

/* Dark in the light theme, white in the dark theme (see the media query
   below). It sits in the normal flow above the header and scrolls away with
   the page. */
.promo-bar {
  /* Above the sticky header (z-index 100) so the info panel can overlap it. */
  position: relative;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px var(--space-2);
  background: #141414;
  color: #e8e8e8;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.promo-logo { height: 14px; width: auto; flex-shrink: 0; }
.promo-tag {
  font-weight: 600;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.promo-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.promo-code:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }
.promo-code svg { width: 13px; height: 13px; flex-shrink: 0; }
/* Both labels share one grid cell so the button keeps its width on "Copié". */
.promo-code-label { display: inline-grid; }
.promo-code-label > * { grid-area: 1 / 1; }
.promo-code-done { visibility: hidden; text-align: center; letter-spacing: 0.04em; }
.promo-code.is-copied .promo-code-text { visibility: hidden; }
.promo-code.is-copied .promo-code-done { visibility: visible; }

/* With the bar above it, the header sticks to the top once the bar has
   scrolled away. The negative margin keeps it out of the flow, exactly like
   the fixed header the hero padding was written for. */
.promo-logo-base { fill: #ffffff; }
@media (prefers-color-scheme: dark) {
  .promo-bar { background: #ffffff; color: #1b1b1b; }
  .promo-logo-base { fill: #1b1b1b; }
  .promo-tag { border-right-color: rgba(27, 27, 27, 0.25); }
  .promo-code { color: #1b1b1b; border-color: rgba(27, 27, 27, 0.3); }
  .promo-code:hover { background: rgba(27, 27, 27, 0.06); border-color: rgba(27, 27, 27, 0.5); }
}

.promo-bar + .site-header {
  position: sticky;
  left: auto;
  right: auto;
  margin-bottom: calc(var(--header-h) * -1);
}

/* "i" button + panel explaining that promo codes cancel the free trial. */
.promo-info {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  padding: 0;
  color: #ffffff;
}
/* Circle and "i" are one drawing (24-unit grid, "i" centred on the circle),
   so the letter can never drift off-centre like a font glyph would. */
.promo-info svg { width: 100%; height: 100%; opacity: 0.75; transition: opacity 0.2s var(--ease); }
.promo-info svg circle { transition: fill-opacity 0.2s var(--ease); }
.promo-info:hover svg, .promo-info[aria-expanded="true"] svg { opacity: 1; }
.promo-info:hover svg circle, .promo-info[aria-expanded="true"] svg circle { fill: currentColor; fill-opacity: 0.16; }
/* Larger touch target than the 20px icon. */
.promo-info::after { content: ""; position: absolute; inset: -8px; }
.promo-info-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: #1b1b1b;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(27, 27, 27, 0.08);
}
.promo-info-panel[hidden] { display: none; }
.promo-info-wrap { position: relative; display: inline-flex; }
@media (prefers-color-scheme: dark) {
  .promo-info { color: #1b1b1b; }
  .promo-info-panel {
    background: #2b2b2b;
    color: #f5f5f5;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.14);
  }
}

.promo-text--short { display: none; }

/* Mobile: one slim line (short offer + code) instead of three stacked ones. */
@media (max-width: 640px) {
  .promo-bar { flex-wrap: nowrap; gap: 10px; padding: 7px 10px; font-size: 12.5px; }
  .promo-logo, .promo-tag, .promo-text--full { display: none; }
  .promo-text--short { display: inline; white-space: nowrap; }
  .promo-code { white-space: nowrap; }
  /* Anchor the panel to the full-width bar so it never leaves the screen. */
  .promo-info-wrap { position: static; }
  .promo-info-panel { top: calc(100% + 8px); }
}

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* Desktop: logo | menu | actions on a 3-column grid, so the menu sits at the
   true centre of the bar whatever the widths of the logo and the buttons. */
@media (min-width: 1025px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .header-actions { justify-self: end; }
}

.logo { display: flex; align-items: center; padding-block: 6px; }
.logo-img { height: 22px; width: auto; display: block; }
.logo-img--dark { display: none; }

.main-nav { display: flex; gap: var(--space-4); }
@media (max-width: 1240px) { .main-nav { gap: var(--space-3); } }
@media (max-width: 1120px) { .main-nav { gap: 20px; } }
.main-nav a {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.main-nav a:hover { color: var(--text); }
.main-nav a { position: relative; }
.main-nav a.is-current { color: var(--text); }
.main-nav a.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-login { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  margin-inline: auto;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--space-5));
  overflow-x: clip;
}

.hero-head { text-align: center; position: relative; z-index: 2; }

.hero-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.8vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.text-accent { color: var(--accent); }

.hero-sub {
  margin-top: var(--space-3);
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--text-muted);
  max-width: 520px;
}
.hero-sub strong { color: var(--text); }
.hero-head .hero-sub { max-width: 600px; margin-inline: auto; margin-top: 18px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* ---- fan of app cards ----
   Cards hang from one point (bottom centre of .fan-inner) and spread by
   --i (position, -2..2) and --d (distance from the centre). --spread opens
   the fan on load, --open widens it while scrolling (both set from JS).
   The bottom of the cards is cut by the stage, like cards in a hand. */

.hero-fan {
  --spread: 1;
  --open: 1;
  --gap: 205px;
  --tilt: 7deg;
  --fan-scale: 1;
  position: relative;
  height: 370px;
  margin-top: var(--space-4);
  overflow: visible clip;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 78%, transparent);
}
.hero-fan::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 980px;
  height: 560px;
  translate: -50% 0;
  background: radial-gradient(closest-side, var(--accent-grad), var(--blue-soft) 55%, transparent);
  opacity: 0.8;
  pointer-events: none;
}
.fan-inner {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  scale: var(--fan-scale);
  transform-origin: 0 0;
}

.fan-card {
  --w: 230px;
  --h: 320px;
  position: absolute;
  left: calc(var(--w) / -2);
  bottom: -30px;
  z-index: calc(10 - var(--d));
  width: var(--w);
  height: var(--h);
  padding: 20px;
  border-radius: 28px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 30px 60px -28px rgba(27, 27, 27, 0.5);
  transform-origin: 50% 100%;
  transform:
    translateX(calc(var(--i) * var(--gap) * var(--spread) * var(--open)))
    translateY(calc(var(--d) * 20px * var(--spread)))
    rotate(calc(var(--i) * var(--tilt) * var(--spread) * var(--open)));
  transition: translate 0.35s var(--ease);
}
@media (hover: hover) {
  .fan-card:hover { translate: 0 -16px; }
}

.fan-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.fan-card-sub { margin-top: 4px; font-size: 13px; font-weight: 600; opacity: 0.7; }

/* Radar: the app's chart on white in both themes, so it never sits dark
   next to the dark scan card. */
.fan-card--radar { background: #ffffff; color: #1b1b1b; border: 1px solid #ededed; }
.fan-radar { display: block; width: 86%; margin: 12px auto 0; }
.fan-radar-grid polygon, .fan-radar-grid path { fill: none; stroke: rgba(27, 27, 27, 0.22); stroke-width: 1.2; }
.fan-radar-fill { fill: rgba(215, 38, 56, 0.22); }
.fan-radar-ref { fill: rgba(244, 160, 168, 0.85); }
.fan-radar-line { fill: none; stroke: #e5293d; stroke-width: 3.5; stroke-linejoin: round; }
.fan-radar-dots circle { fill: #e5293d; }

/* Grade: the in-app pink grade card, with the real badge */
.fan-card--grade { background: #ffd9dc; color: #b8162a; }
/* Three overlapping badges: the current grade in front, the one below
   and the one above tilted behind it. */
.fan-badges {
  position: relative;
  height: 150px;
  margin-top: 2px;
}
.fan-badge {
  position: absolute;
  top: 50%; left: 50%;
  aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent);
  mask-image: radial-gradient(closest-side, #000 86%, transparent);
}
.fan-badge img {
  position: absolute;
  top: 50%; left: 50%;
  width: calc(var(--w) * 1.6%);
  max-width: none;
  height: auto;
  translate: -50% -50%;
}
.fan-badge--c { z-index: 2; width: 118px; translate: -50% -50%; }
.fan-badge--l, .fan-badge--r { width: 100px; }
.fan-badge--l { translate: calc(-50% - 66px) calc(-50% + 12px); rotate: -14deg; }
.fan-badge--r { translate: calc(-50% + 66px) calc(-50% + 12px); rotate: 14deg; }

/* Generated session: brand red */
.fan-card--seance { background: var(--accent); color: #ffffff; }
.fan-exos { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; }
.fan-exos li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  font-weight: 600;
  font-size: 13px;
}
.fan-exos b { font-weight: 800; }

/* Progression: brand blue (keeps the centre of the fan light) */
.fan-card--progress { background: #cfdcff; color: #1b1b1b; }
.fan-card--progress .fan-score span { color: #4a5470; }
.fan-score {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.fan-score span { font-size: 17px; font-weight: 700; color: var(--text-muted); margin-left: 2px; }
.fan-line { display: block; width: 100%; height: 80px; margin-top: 18px; overflow: visible; }
.fan-line path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Scan IA: front card, the app's dark scan screen */
.fan-card--scan {
  --w: 270px;
  --h: 380px;
  bottom: -20px;
  background: #0d0d0f;
  color: #ffffff;
  border: 1px solid #2a2a2d;
  box-shadow: 0 40px 70px -30px rgba(215, 38, 56, 0.55);
}
.fan-body {
  position: absolute;
  left: 50%;
  top: 92px;
  height: 236px;
  width: auto;
  translate: -50% 0;
}
.fan-body-sil { fill: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 11 8; stroke-linecap: round; }
.fan-body-bone { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; stroke-linecap: round; }
.fan-body-kps circle { fill: #ffffff; stroke: var(--accent); stroke-width: 2.5; }
.fan-tag {
  position: absolute;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(24, 24, 27, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.fan-tag b { margin-left: 4px; font-weight: 800; }
.fan-tag--a { right: 14px; top: 116px; }
.fan-tag--b { left: 14px; top: 168px; border-color: var(--accent); }
.fan-tag--b b { color: #ff6b7a; }

/* The full fan is ~1210px wide: shrink it in steps so the outer cards
   stay on screen (scale ≈ (viewport - 24px) / 1210px at each step). */
@media (max-width: 1240px) { .hero-fan { --fan-scale: 0.89; height: 340px; } }
@media (max-width: 1100px) { .hero-fan { --fan-scale: 0.77; height: 300px; } }
@media (max-width: 960px)  { .hero-fan { --fan-scale: 0.65; height: 260px; } }
@media (max-width: 820px)  { .hero-fan { --fan-scale: 0.55; height: 230px; } }
@media (max-width: 700px)  { .hero-fan { --fan-scale: 0.5;  height: 210px; } }
@media (max-width: 640px) {
  .hero-head h1 { font-size: 34px; }
  .hero-br { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  /* All five cards fit the phone width: smaller, closer, less tilted. */
  .hero-fan { --fan-scale: 0.5; --gap: 100px; --tilt: 5deg; height: 230px; }
  /* Right-hand cards are covered on their left edge: title on the right. */
  .fan-card--progress .fan-card-title, .fan-card--progress .fan-card-sub, .fan-card--progress .fan-score,
  .fan-card--seance .fan-card-title, .fan-card--seance .fan-card-sub { text-align: right; }
  .fan-card--progress .fan-card-title { font-size: 19px; }
  .hero-fan::before { width: 560px; height: 300px; bottom: -150px; }
}
/* Small phones: shrink a little more so the outer cards stay on screen. */
@media (max-width: 370px) { .hero-fan { --fan-scale: 0.46; } }
@media (max-width: 340px) { .hero-fan { --fan-scale: 0.42; } }

@media (prefers-reduced-motion: reduce) {
  .fan-card { transition: none; }
}

/* ---------- demo video ---------- */

.video-embed {
  margin-top: var(--space-6);
  max-width: 860px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  background: var(--bg-card);
}

.video-embed-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
}
.video-embed-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-embed-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(215, 38, 56, 0.55);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.video-embed-play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-embed-trigger:hover .video-embed-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent-strong);
}

.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* ---------- scan IA ---------- */

/* The lead holds the privacy promise: keep it on one line on desktop. */
#scan-ia .section-lead { max-width: 820px; }

.scan-ia-inner {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
}

/* The demo mirrors the app's scan screen, so it stays dark in both themes. */
.scan-demo {
  position: relative;
  width: 100%;
  max-width: 500px;
  justify-self: center;
  padding: 12px;
  border-radius: 30px;
  background: #141416;
  border: 1px solid #2a2a2d;
  box-shadow: 0 30px 60px -30px rgba(27, 27, 27, 0.55);
  color: #f5f5f5;
}

/* Pause / play for the auto-advancing demo (WCAG 2.2.2). */
.scan-pause {
  position: absolute;
  top: 88px;
  right: 26px;
  z-index: 4;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  transition: background 0.2s var(--ease);
}
.scan-pause:hover { background: rgba(255, 255, 255, 0.2); }
.scan-pause::after { content: ""; position: absolute; inset: -6px; }
.scan-pause[hidden] { display: none; }
.scan-pause-icon { width: 16px; height: 16px; }
.scan-pause-icon--play { display: none; margin-left: 2px; }
.scan-pause.is-paused .scan-pause-icon--pause { display: none; }
.scan-pause.is-paused .scan-pause-icon--play { display: block; }

.scan-poses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: #1c1c1f;
  border: 1px solid #2c2c30;
}
.scan-pose {
  padding: 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #9a9a9a;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.scan-pose:hover { color: #ffffff; }
.scan-pose.is-active { background: var(--accent); color: #ffffff; }

.scan-view {
  position: relative;
  margin-top: 12px;
  height: 540px;
  border-radius: 24px;
  border: 1px solid #2a2a2d;
  background:
    radial-gradient(70% 50% at 50% 55%, rgba(215, 38, 56, 0.1), transparent 70%),
    #000;
  overflow: hidden;
}

.scan-figure {
  position: absolute;
  top: 30px; bottom: 74px;
  left: 50%;
  translate: -50% 0;
  aspect-ratio: 1 / 2;
}
.scan-figure svg { width: 100%; height: 100%; overflow: visible; }
.scan-art { display: none; }
.scan-art.is-active { display: inline; }
.scan-art .sil {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-dasharray: 10 7;
  stroke-linecap: round;
}
.scan-art .bone {
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.scan-art .kps circle {
  fill: #ffffff;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.scan-labels { position: absolute; inset: 0; display: none; }
.scan-labels.is-active { display: block; }
.scan-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(24, 24, 27, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 600;
  font-size: 12.5px;
  color: #d8d8d8;
  opacity: 0;
}
.scan-label b { margin-left: 5px; color: #ffffff; font-weight: 800; }
.scan-label--r { transform: translate(14px, -50%); }
.scan-label--l { transform: translate(calc(-100% - 14px), -50%); }
.scan-label--weak { border-color: var(--accent); }
.scan-label--weak b { color: #ff6b7a; }


.scan-done {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  background: #cfdcff;
  color: #1b1b1b;
  font-weight: 700;
  font-size: 13.5px;
  opacity: 0;
}
.scan-done svg { width: 16px; height: 16px; }

/* One pass of the analysis, restarted by JS on every pose (.is-running). */
.scan-demo.is-running .kps circle { animation: kp-pop 0.4s var(--ease) var(--d) forwards; }
.scan-demo.is-running .bone { animation: fade-in 0.6s ease 1.3s forwards; }
.scan-demo.is-running .scan-label { animation: label-in 0.45s var(--ease) var(--d) forwards; }
.scan-demo.is-running .scan-done { animation: done-in 0.45s var(--ease) 2.5s forwards; }

@keyframes kp-pop { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes label-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes done-in { from { opacity: 0; translate: -50% 10px; } to { opacity: 1; translate: -50% 0; } }

/* Static, fully-drawn state when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .scan-art .bone, .scan-art .kps circle, .scan-label, .scan-done { opacity: 1; animation: none !important; }
}

.scan-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.scan-step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.scan-step-num {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-card);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.scan-step-num svg { width: 20px; height: 20px; }
.scan-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin-top: 2px; }
.scan-step p { margin-top: 4px; color: var(--text-muted); font-size: 15px; }
.scan-step.is-active {
  background: var(--bg-card);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-card);
}
.scan-step.is-active .scan-step-num {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-soft);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

@media (max-width: 980px) {
  .scan-ia-inner { grid-template-columns: 1fr; }
  .scan-steps { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .scan-view { height: 460px; }
  .scan-figure { top: 24px; bottom: 70px; }
  .scan-label { font-size: 11.5px; padding: 4px 9px; }
  .scan-step { padding: 14px; gap: 14px; grid-template-columns: 40px 1fr; }
  .scan-step-num { width: 40px; height: 40px; font-size: 13px; }
  .scan-step h3 { font-size: 17px; }
  .scan-step p { font-size: 14.5px; }
}


/* ---------- features (banner + three cards) ---------- */

.feat { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }

/* Banner: the headline feature, on the brand red. */
.feat-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  border-radius: 28px;
  background:
    radial-gradient(70% 90% at 85% 20%, rgba(255, 255, 255, 0.16), transparent 60%),
    var(--accent);
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 30px 60px -32px rgba(215, 38, 56, 0.7);
}
.feat-banner-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
}
.feat-banner-icon svg { width: 26px; height: 26px; }
.feat-banner h3 {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 480px;
}
.feat-banner p { margin-top: var(--space-2); font-size: 16.5px; line-height: 1.6; opacity: 0.92; max-width: 470px; }
.feat-banner-tag {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}
.feat-banner-visual { display: flex; justify-content: center; }
.feat-banner-visual .app-card { rotate: 2deg; }
.feat-banner-visual .app-priority { background: #2a1a1d; border: 1px solid rgba(215, 38, 56, 0.45); }

/* Three cards, each with its app visual on top. */
.feat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.feat-card {
  display: flex;
  flex-direction: column;
  padding: 14px 14px var(--space-4);
  border-radius: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}
.feat-card-visual {
  height: 268px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  border-radius: 16px;
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(215, 38, 56, 0.16), transparent 70%),
    #1c1c1e;
  color: #ffffff;
}
.feat-card-visual--radar { align-items: center; padding: 10px; }
.feat-card-visual--radar .app-radar { height: 100%; width: auto; margin: 0; }
.feat-card-visual .app-radar-labels text { font-size: 15px; }
.feat-card-visual .app-muscles { margin: 0; gap: 11px; }
.feat-card-visual .app-muscles li { grid-template-columns: 84px 1fr 34px; font-size: 14px; }
.feat-card-visual .app-score { margin: 0; }
.feat-card-visual .app-score strong { font-size: 38px; }
.feat-card-visual .app-chart { margin-top: 10px; }
.feat-card h3 { margin: var(--space-3) 10px 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.feat-card > p { margin: 6px 10px 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }

.app-card {
  width: 100%;
  max-width: 380px;
  padding: 20px;
  border-radius: 24px;
  background: #1c1c1e;
  border: 1px solid #2c2c2e;
  color: #ffffff;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.app-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8a8a8;
}
.app-head small { font-size: 12px; letter-spacing: 0; text-transform: none; color: #7a7a7a; }

/* séance */
.app-priority {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--accent);
}
.app-priority span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.app-priority strong { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.app-priority p { margin-top: 4px; font-size: 13px; line-height: 1.45; opacity: 0.92; }
.app-exos { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.app-exos li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  background: #2a1a1d;
  border: 1px solid rgba(215, 38, 56, 0.35);
}
.app-exo-thumb {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: #ffffff;
  color: #d72638;
}
.app-exo-thumb svg { width: 22px; height: 22px; }
.app-exo-thumb { overflow: hidden; }
.app-exo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.app-exo-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.app-exo-copy strong { font-weight: 600; font-size: 14px; }
.app-exo-copy em {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-exo-copy small { font-size: 12px; color: #9a9a9a; }

/* radar */
.app-radar { display: block; width: 100%; margin-top: 8px; }
.app-radar-grid polygon, .app-radar-grid path { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1; }
.app-radar-fill { fill: rgba(215, 38, 56, 0.32); }
.app-radar-prev { fill: rgba(244, 184, 206, 0.78); }
.app-radar-line { fill: none; stroke: #e5293d; stroke-width: 3; stroke-linejoin: round; }
.app-radar-dots circle { fill: #e5293d; }
.app-radar-labels text { fill: #c4c4c4; font-family: var(--font-display); font-weight: 600; font-size: 12px; }
.app-legend { display: flex; justify-content: center; gap: var(--space-3); margin-top: 6px; font-size: 12.5px; color: #a8a8a8; }
.app-legend span { display: inline-flex; align-items: center; gap: 7px; }
.app-key { width: 11px; height: 11px; border-radius: 3px; }
.app-key--cur { background: #e5293d; }
.app-key--prev { background: #f4b8ce; }

/* notes */
.app-muscles { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.app-muscles li {
  display: grid;
  grid-template-columns: 92px 1fr 38px;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.app-muscles i {
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(#cfdcff, #cfdcff) no-repeat 0 0 / var(--v) 100%, rgba(255, 255, 255, 0.1);
}
.app-muscles b { text-align: right; font-weight: 800; }
.app-muscles .is-weak span, .app-muscles .is-weak b { color: #ff6b7a; }
.app-muscles .is-weak i { background: linear-gradient(#e5293d, #e5293d) no-repeat 0 0 / var(--v) 100%, rgba(255, 255, 255, 0.1); }
.feat-card.is-visible .app-muscles i { animation: feat-bar 0.9s var(--ease) 0.3s backwards; }
@keyframes feat-bar { from { background-size: 0 100%; } }

/* progression */
.app-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin-top: 12px; }
.app-score strong { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1; }
.app-score span { font-weight: 600; color: #a8a8a8; }
.app-score em { flex-basis: 100%; font-style: normal; font-weight: 600; font-size: 13px; color: #cfdcff; }
.app-chart { display: block; width: 100%; margin-top: 16px; overflow: visible; }
.app-chart-grid line { stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.app-chart-area { fill: rgba(215, 38, 56, 0.18); }
.app-chart-line { fill: none; stroke: #e5293d; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.app-chart-dots circle { fill: #e5293d; }
.app-chart-labels text { fill: #8a8a8a; font-size: 11px; font-weight: 600; }
.feat-card.is-visible .app-chart-line { stroke-dasharray: 600; animation: feat-draw 1.2s var(--ease) 0.3s backwards; }
@keyframes feat-draw { from { stroke-dashoffset: 600; } }

@media (max-width: 980px) {
  .feat-banner { grid-template-columns: 1fr; padding: var(--space-4); gap: var(--space-4); }
  .feat-banner-visual .app-card { rotate: 0deg; }
  .feat-cards { grid-template-columns: 1fr; max-width: 520px; width: 100%; margin-inline: auto; }
  .feat-card-visual { height: auto; min-height: 230px; }
}
@media (max-width: 640px) {
  .feat { margin-top: var(--space-4); gap: var(--space-2); }
  .feat-banner { padding: var(--space-3); border-radius: 22px; }
  .feat-banner p { font-size: 15px; }
  .app-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .feat-card.is-visible .app-muscles i,
  .feat-card.is-visible .app-chart-line { animation: none; }
}

/* ---------- grades ---------- */

.grades { margin-top: var(--space-6); }

/* The stage is always dark (like the goal cards): the badges are lit by
   their own glow, which only reads on a dark surface. --glow is the RGB
   triplet of the selected grade, set from JS. */
.grade-stage {
  --glow: 143, 162, 224;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid #2c2c2c;
  background:
    radial-gradient(60% 90% at 25% calc(65% - var(--prog, 0) * 30%), rgba(var(--glow), 0.22), transparent 70%),
    #161616;
  color: #f5f5f5;
  overflow: hidden;
  transition: background 0.4s var(--ease);
}
.grade-badge {
  position: relative;
  width: min(100%, 340px, 46svh);
  aspect-ratio: 1;
  /* Slow upward drift while the pinned panel is scrolled. */
  translate: 0 calc((0.5 - var(--prog, 0.5)) * 56px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grade-badge img {
  /* Out of flow, centred: a badge wider than its box must not grow the box. */
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: calc(var(--w, 100) * 1.3%);
  max-width: none;
  height: auto;
  transition: opacity 0.14s ease, transform 0.14s ease;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
}
.grade-stage.is-swapping .grade-badge img { opacity: 0; transform: scale(0.92); }

.grade-kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--glow), 1);
}
.grade-info h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.grade-desc {
  margin-top: var(--space-2);
  max-width: 460px;
  font-size: clamp(15px, 1.3vw, 17px);
  color: #b4b4b4;
}
.grade-tiers {
  display: inline-flex;
  gap: 4px;
  margin-top: var(--space-3);
  padding: 4px;
  border: 1px solid #333;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
}
.grade-tiers[hidden], .grade-single[hidden] { display: none; }
.grade-tier {
  min-width: 52px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #b4b4b4;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.grade-tier:hover { color: #ffffff; }
.grade-tier.is-active { background: #f5f5f5; color: #161616; }
.grade-single {
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: 14px;
  color: #8a8a8a;
}

.grade-ladder {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: var(--space-2);
}
.grade-tab {
  --c: var(--accent);
  min-height: calc(124px + var(--step) * 10px);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Hover is deliberately neutral (no grade colour, no lift): the pointer stays
   on a card after it is clicked and scrolled past, and a coloured hover would
   read as "still the active grade". Colour is reserved for .is-active. */
@media (hover: hover) {
  .grade-tab:not(.is-active):hover { border-color: var(--text-faint); }
}
.grade-tab.is-active {
  border-color: var(--c);
  background: var(--bg-card);
  box-shadow: 0 16px 36px -20px var(--c);
}
.grade-tab-thumb {
  --zoom: 1.3;
  position: relative;
  width: 100%;
  max-width: 84px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fade the SVG's own glow out before the box edge so it is not cut square. */
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent);
  mask-image: radial-gradient(closest-side, #000 82%, transparent);
}
.grade-tab-thumb img {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: calc(var(--w, 100) * var(--zoom) * 1%);
  height: auto;
  max-width: none;
}
.grade-tab-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.grade-tab-meta { font-size: 12.5px; color: var(--text-faint); }
.grade-tab.is-active .grade-tab-name { color: var(--c); }

@media (max-width: 980px) {
  .grade-stage { grid-template-columns: 1fr; text-align: center; padding: var(--space-4) var(--space-3); gap: var(--space-2); }
  .grade-badge { width: min(100%, 300px); }
  .grade-desc { margin-inline: auto; }
  .grade-ladder { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .grade-tab { min-height: 0; }
}
@media (max-width: 640px) {
  .grade-ladder { gap: var(--space-1); }
  .grade-tab { padding: 12px 6px; }
  .grade-tab-name { font-size: 13.5px; }
  .grade-tab-meta { font-size: 12.5px; }
}
.grades.is-pinned .grade-stage::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: rgb(var(--glow));
  transform-origin: 0 50%;
  transform: scaleX(var(--prog, 0));
}
@media (max-width: 980px) {
  .grades.is-pinned .grade-stage { padding: 24px 16px; }
  .grades.is-pinned .grade-badge { width: min(100%, 220px, 24svh); }
  .grades.is-pinned .grade-ladder { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .grades.is-pinned .grade-tab { padding: 6px 2px; }
  .grades.is-pinned .grade-tab-name,
  .grades.is-pinned .grade-tab-meta { display: none; }
}
/* Short laptop screens: keep stage + ladder inside the pinned viewport. */
@media (min-width: 981px) and (max-height: 780px) {
  .grades.is-pinned { margin-top: var(--space-4); }
  .grades.is-pinned .grade-stage { padding: 20px var(--space-5); }
  .grades.is-pinned .grade-badge { width: min(100%, 280px, 40svh); }
  .grades.is-pinned .grade-tab { min-height: calc(96px + var(--step) * 8px); }
  .grades.is-pinned .grade-tab-thumb { max-width: 64px; }
  .grades.is-pinned .grade-tab-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grade-badge img, .grade-stage { transition: none; }
  .grade-badge { translate: none; }
}

/* ---------- avis (reviews) ---------- */

.review-list {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.review-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.review-stars { display: flex; gap: 3px; }
.review-stars svg { width: 15px; height: 15px; fill: var(--accent); }
.review-stars svg.is-empty { fill: var(--border); }
.review-quote { color: var(--text); font-size: 15px; line-height: 1.55; flex-grow: 1; }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: var(--space-1); }
.review-avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}
.review-avatar--blue { background: var(--blue-soft); color: var(--blue-strong); }
.review-author-info { display: flex; flex-direction: column; }
.review-name { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.review-meta { font-size: 12.5px; color: var(--text-muted); }

/* ---------- FAQ ---------- */

.faq-list { margin-top: var(--space-6); max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 20px 22px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}

.faq-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--text-muted);
  transition: transform 0.3s var(--ease), background 0.2s var(--ease);
}
.faq-icon::before { width: 10px; height: 1.6px; }
.faq-icon::after { width: 1.6px; height: 10px; }
.faq-item.is-open .faq-icon { border-color: var(--accent); background: var(--accent-soft); }
.faq-item.is-open .faq-icon::before, .faq-item.is-open .faq-icon::after { background: var(--accent); }
.faq-item.is-open .faq-icon::after { transform: rotate(90deg) scaleY(0); }

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.faq-item.is-open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-answer { overflow: hidden; }
.faq-answer p { padding: 0 22px 20px; color: var(--text-muted); font-size: 15.5px; max-width: 640px; }

/* ---------- CTA final ---------- */

.cta-final { text-align: center; }
.cta-final-inner { display: flex; flex-direction: column; align-items: center; }

/* ---------- legal / basic content pages ---------- */

.legal-main { padding-top: calc(var(--header-h) + var(--space-6)); padding-bottom: var(--space-7); }
.legal-header { max-width: 720px; margin-bottom: var(--space-5); }
.legal-updated { color: var(--text-faint); font-size: 13px; margin-top: var(--space-2); }

.legal-body {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: var(--space-2);
}
.legal-body p { color: var(--text-muted); line-height: 1.6; }
.legal-body p + p { margin-top: var(--space-2); }
.legal-body ul { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-2); }
.legal-body li {
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: 22px;
  position: relative;
}
.legal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.legal-body strong { color: var(--text); }
.legal-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--accent-strong); }

.todo {
  background: rgba(255, 196, 0, 0.22);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--text);
  font-weight: 500;
}

.legal-body:has(.legal-table-wrap) { max-width: 1080px; }
.legal-body:has(.legal-table-wrap) > div > :is(p, ul, h2) { max-width: 720px; }
.legal-table-wrap { overflow-x: auto; margin-top: var(--space-2); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 900px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text-muted); line-height: 1.5; }
.legal-table th { color: var(--text); font-weight: 600; background: var(--bg-elevated); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { color: var(--text); font-weight: 600; }

.legal-note {
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--border-soft); padding-block: var(--space-6); }
.footer-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-4);
}

.footer-brand { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.footer-icon { width: 40px; height: 40px; display: block; flex-shrink: 0; }
.footer-icon .logo-img { height: 100%; width: 100%; object-fit: contain; }
.footer-tagline { color: var(--text-muted); font-size: 15px; white-space: nowrap; }

.footer-legal {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3);
  padding-top: 0;
  border-top: none;
}
.footer-legal a {
  display: inline-block;
  padding-block: 6px;
  color: var(--text-muted);
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.footer-legal a:hover { color: var(--text); }

.footer-copy { color: var(--text-faint); font-size: 13px; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 1240px) {
  .footer-inner { flex-wrap: wrap; justify-content: center; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }
}

/* ---------- comparatif gratuit / premium ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.plans {
  max-width: 820px;
  margin: var(--space-5) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}
.plan--premium {
  border: 2px solid var(--accent);
  background: linear-gradient(170deg, var(--accent-soft), var(--bg-card) 55%);
  box-shadow: var(--shadow-card-hover);
}
.plan-badge {
  position: absolute;
  top: -13px;
  right: var(--space-4);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
}
.plan-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.plan--premium .plan-name { color: var(--accent-strong); }
.plan-tag { margin-top: 2px; font-size: 13.5px; color: var(--text-muted); }
.plan-price {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.plan-price small { font-size: 15px; font-weight: 600; color: var(--text-muted); margin-left: 3px; letter-spacing: 0; }
.plan-alt { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.plan--premium .plan-tag, .plan--premium .plan-alt, .plan--premium .plan-list-intro { color: var(--text-muted-strong); }
.plan-cta { margin-top: var(--space-3); width: 100%; }
.plan-list {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
}
.plan-list li { display: flex; align-items: flex-start; gap: 10px; }
.plan-list svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
  padding: 4px;
  border-radius: 50%;
  background: var(--accent-soft);
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan--premium .plan-list svg { background: var(--accent); stroke: #ffffff; }
.plan-list-intro { font-weight: 700; font-size: 13px; color: var(--text-muted); }

@media (max-width: 720px) {
  .plans { grid-template-columns: 1fr; max-width: 440px; }
  .plan { padding: var(--space-3); }
}

.compare-note { margin-top: var(--space-4); text-align: center; font-size: 13px; color: var(--text-faint); }
#tarifs { padding-bottom: var(--space-3); }
#faq { padding-top: var(--space-4); }

.compare-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }


/* ---------- reveal animation base ---------- */

.reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; }
.reveal-ready [data-reveal].is-visible { animation: reveal-in 0.6s var(--ease) backwards; }
@keyframes reveal-in {
  from { opacity: 0; translate: 0 28px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- responsive ---------- */

/* Burger menu below 1025px: six links no longer fit centred between the
   logo and the buttons. */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .site-header.nav-open .main-nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-soft);
    padding: var(--space-3);
    gap: var(--space-2);
  }
}

@media (max-width: 980px) {
  .hero-sub { margin-inline: auto; }
  .store-buttons { justify-content: center; }

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

@media (max-width: 860px) {

  .review-list { grid-template-columns: 1fr; }

  /* Collapse "avis"/"faq" to their first 3 items with a "voir plus" /
     "voir moins" toggle button -- desktop always shows the full list. */
  .list-toggle {
    display: flex;
    margin: var(--space-4) auto 0;
  }
  #review-list:not(.is-expanded) .review-card:nth-child(n+4),
  #faq-list:not(.is-expanded) .faq-item:nth-child(n+4) {
    display: none;
  }
}

@media (max-width: 640px) {
  .wrap { padding-inline: var(--space-2); }
  .btn-login { display: none; }
  .nav-login { display: block; }
  .section { padding-block: var(--space-5); }
  .hero { padding-top: calc(var(--header-h) + var(--space-5)); }
  .video-embed, .review-list, .faq-list { margin-top: var(--space-4); }
  .legal-main { padding-bottom: var(--space-5); }
  .store-btn { flex: 1; justify-content: center; padding-inline: 14px; }
  .faq-question { font-size: 16px; padding: 16px 18px; }
  .faq-answer p { padding: 0 18px 18px; }

  .footer-inner { flex-wrap: wrap; justify-content: center; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }
  .footer-tagline, .footer-legal a, .footer-copy { white-space: normal; }
}