/* ==========================================================================
   BL Coaching — Design tokens (Graphite system)
   ========================================================================== */
/* Inter, self-hosted (assets/fonts, from @fontsource-variable/inter): no request to
   Google, one connection less. Weights 400–700 like the former Google Fonts link. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../assets/fonts/inter-latin-wght.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../assets/fonts/inter-latin-ext-wght.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --color-obsidian-canvas: #0a0a0a;
  --color-true-black: #000000;
  --color-charcoal-surface: #171717;
  --color-graphite-edge: #262626;
  --color-steel-border: #464646;
  --color-cloud-white: #fafafa;
  --color-paper-white: #e5e5e5;
  --color-fog: #a1a1a1;
  --color-ash: #737373;
  --color-brand-green: #008000;
  --color-brand-electric: #39FF14;
  --color-signal-green: #22c55e;
  --gradient-solar-spectrum: linear-gradient(90deg, #39ff14 15%, #ffffff 30%, #ffffff 40%, #2e73fc 50%);

  --font-matterfont: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --spacing-8: 8px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px;
  --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px; --spacing-72: 72px;
  --spacing-128: 128px; --spacing-224: 224px;

  --radius-cards: 10px; --radius-pills: 9999px; --radius-badges: 20px;
  --radius-images: 10px; --radius-inputs: 10px; --radius-buttons: 8px; --radius-mediaframes: 10px;

  --shadow-sm: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
  --shadow-subtle: rgba(101, 129, 128, 0.15) 0px 0px 2px 2px inset, rgba(32, 47, 46, 0.15) 0px 0px 4px 4px inset;
  --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-md: rgba(0, 0, 0, 0.3) 0px 8px 10px 0px;
  --shadow-subtle-3: rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px -2px 6px 0px inset;

  --page-max-width: 1152px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-obsidian-canvas);
  color: var(--color-cloud-white);
  font-family: var(--font-matterfont);
  font-size: 16px;
  line-height: 1.25;
  font-feature-settings: "clig" 0, "liga" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4 { font-weight: 500; letter-spacing: 0; }

::selection { background: var(--color-cloud-white); color: var(--color-obsidian-canvas); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-obsidian-canvas); }
::-webkit-scrollbar-thumb { background: var(--color-graphite-edge); border-radius: 10px; border: 2px solid var(--color-obsidian-canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--color-steel-border); }

.container { max-width: var(--page-max-width); margin: 0 auto; padding: 0 24px; }


/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 999; background: var(--color-obsidian-canvas);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  transition: opacity .6s var(--ease-out), visibility .6s;
  overflow: hidden;
}
.preloader.hidden { opacity: 0; visibility: hidden; }
.preloader.hidden .preloader-logo { transform: scale(1.08); }

.preloader-orb {
  position: absolute; top: 50%; left: 50%; width: 380px; height: 380px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.85);
  background: radial-gradient(circle, rgba(57,255,20,.22), rgba(57,255,20,0) 70%);
  animation: preloaderOrb 2.6s ease-in-out infinite;
  filter: blur(2px);
}
.preloader-logo {
  position: relative; width: 64px; height: 64px;
  opacity: 0; transform: scale(.7);
  animation: preloaderLogoIn .7s var(--ease-out) forwards;
  transition: transform .6s var(--ease-out);
}
.preloader-logo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(57,255,20,.4));
  animation: preloaderBreathe 1.8s ease-in-out .7s infinite;
}
.preloader-bar {
  position: relative; width: 160px; height: 3px;
  background: var(--color-graphite-edge); border-radius: 2px; overflow: hidden;
  opacity: 0; animation: preloaderFade .5s var(--ease-out) .2s forwards;
}
.preloader-bar span {
  display: block; height: 100%; width: 40%; border-radius: 2px;
  background: var(--gradient-solar-spectrum);
  box-shadow: 0 0 12px rgba(57,255,20,.5);
  animation: preloaderSlide 1.1s var(--ease-soft) infinite;
}
@keyframes preloaderOrb {
  0%, 100% { transform: translate(-50%, -50%) scale(.85); opacity: .55; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}
@keyframes preloaderLogoIn { to { opacity: 1; transform: scale(1); } }
@keyframes preloaderBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes preloaderFade { to { opacity: 1; } }
@keyframes preloaderSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ==========================================================================
   Reveal animation base states
   ========================================================================== */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: none; }

.reveal-line { display: block; overflow: hidden; }
.reveal-line span {
  display: block; transform: translateY(110%);
  transition: transform .9s var(--ease-out);
}
.reveal-line.in-view span { transform: translateY(0); }

.no-js .reveal, .no-js .reveal-line span { opacity: 1; transform: none; }

/* Looping decorations stop while their section is off-screen (js/main.js initOffscreenPause):
   the browser otherwise keeps recomputing them every frame. */
.anim-paused, .anim-paused * { animation-play-state: paused !important; }

/* ==========================================================================
   Buttons & badges
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 500; line-height: 20px;
  padding: 8px 16px; border-radius: var(--radius-buttons);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .25s, border-color .25s;
  white-space: nowrap;
}
.btn[hidden] { display: none; }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary {
  background: var(--color-paper-white); color: var(--color-charcoal-surface);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: rgb(255,255,255) 0px 1px 0px 0px inset, rgba(0,0,0,.1) 0px -2px 6px 0px inset;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), rgb(255,255,255) 0px 1px 0px 0px inset; }
.btn-secondary {
  background: var(--color-graphite-edge); color: var(--color-cloud-white);
  border: 1px solid var(--color-steel-border);
  box-shadow: var(--shadow-subtle-2);
}
.btn-secondary:hover { transform: translateY(-2px); background: #2e2e2e; }
body.light-mode .btn-primary { color: #171717; }
body.light-mode .btn-spinner { border-top-color: #171717; }
body.light-mode .btn-secondary:hover { background: #d4d4d4; }
.btn-ghost { background: transparent; color: var(--color-fog); border: 1px solid rgba(255,255,255,.1); }
.btn-ghost:hover { color: var(--color-cloud-white); border-color: var(--color-steel-border); }
.btn-green { background: var(--color-signal-green); color: #06210f; border: 1px solid var(--color-signal-green); }
.btn-green:hover { background: #34d16f; border-color: #34d16f; transform: translateY(-2px); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .4; pointer-events: none; }

.btn-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(23,23,23,.25); border-top-color: var(--color-charcoal-surface); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--color-fog);
  border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-badges);
  padding: 6px 12px 6px 10px; background: rgba(255,255,255,.02);
}
.badge-dark { background: var(--color-charcoal-surface); color: var(--color-cloud-white); }
body.light-mode .hero-copy > .badge { background: #d4d4d4; border-color: #b8b8b8; color: #333333; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-green); box-shadow: 0 0 8px 1px var(--color-brand-green); animation: pulseDot 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand-green); margin-bottom: 12px; }

/* ==========================================================================
   Announcement bar
   ========================================================================== */
.announce { background: var(--color-charcoal-surface); border-bottom: 1px solid var(--color-graphite-edge); position: relative; z-index: 50; }
.announce-inner { max-width: var(--page-max-width); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 500; text-align: center; flex-wrap: wrap; }
.announce-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-green); box-shadow: 0 0 8px 1px var(--color-brand-green); }
.announce-link { display: inline-flex; align-items: center; gap: 4px; color: var(--color-fog); }
.announce-link:hover { color: var(--color-cloud-white); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav-wrap { position: sticky; top: 0; z-index: 90; padding: 12px 24px 0; }
.nav {
  max-width: var(--page-max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* Opaque instead of backdrop-filter: a sticky blurred bar is re-blurred on every scroll frame. */
  background: rgba(12,12,12,.94);
  border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards);
  padding: 10px 16px; box-shadow: var(--shadow-sm);
  transition: padding .3s var(--ease-out), background .3s;
}
.nav-wrap.scrolled .nav { padding: 8px 16px; background: rgba(10,10,10,.97); }
body.light-mode .nav { background: rgba(255,255,255,.94); }
body.light-mode .nav-wrap.scrolled .nav { background: rgba(255,255,255,.97); }

.nav-logo { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 14px; font-weight: 600; line-height: 1; }
.nav-logo-mark { width: 26px; height: 26px; object-fit: contain; }
.nav-logo-text { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-fog); }

.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--color-fog); padding: 8px 12px; border-radius: var(--radius-buttons); transition: color .2s, background .2s; position: relative; }
.nav-link:hover { color: var(--color-cloud-white); background: rgba(255,255,255,.04); }
.nav-link.active { color: var(--color-cloud-white); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-text-short { display: none; }
.nav-member-link { padding: 8px 4px; white-space: nowrap; }
@media (max-width: 960px) { .nav-member-link { display: none; } }

/* Mobile menu only: the desktop "Espace membre" button (above) is hidden
   below 960px, so without this the client portal becomes unreachable
   from the nav on phones — only visible if this link takes its place
   inside the burger dropdown. */
.nav-link-member-mobile { display: none; }
.cart-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pills); background: var(--color-charcoal-surface); border: 1px solid var(--color-graphite-edge); transition: border-color .2s, transform .2s; }
.cart-btn:hover { border-color: var(--color-steel-border); transform: translateY(-1px); }
.cart-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--color-brand-green); color: #171717; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease-out); }
.cart-count.bump { animation: bump .35s var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }

.nav-burger { display: none; flex-direction: column; gap: 4px; width: 32px; height: 32px; align-items: center; justify-content: center; }
.nav-burger span { width: 18px; height: 1.5px; background: var(--color-cloud-white); transition: transform .3s var(--ease-out), opacity .3s; }
.nav-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: 72px 0 24px; position: relative; overflow: hidden; }
.hero-web { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }

.hero-title { font-size: 60px; line-height: 1; letter-spacing: -1.5px; font-weight: 500; margin: 20px 0 24px; }
.hero-title em { font-style: normal; color: var(--color-brand-green); }
.hero-sub { font-size: 18px; line-height: 1.5; color: var(--color-fog); max-width: 480px; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-actions .btn-methods { background: #008000; color: #fff; border: 1px solid #008000; font-weight: 700; box-shadow: 0 4px 18px rgba(0,128,0,.25); }
.hero-actions .btn-methods:hover { background: #006b00; border-color: #006b00; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,128,0,.35); }
.hero-actions .btn-methods:focus-visible { outline: 3px solid var(--color-cloud-white); outline-offset: 3px; }

.hero-trust { display: flex; align-items: center; gap: 12px; }
.hero-trust p { font-size: 14px; color: var(--color-fog); }
.hero-avatars { display: flex; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-graphite-edge); border: 2px solid var(--color-obsidian-canvas); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; margin-left: -8px; }
.avatar:first-child { margin-left: 0; }

.hero-visual { position: relative; }

/* Process graphic: static hero visual — a rising "stonks" line whose 5
   vertices are the Bilan → Objectif → Plan → Performance → Résultats steps */
.process-graphic {
  position: relative; width: 100%; max-width: 480px; aspect-ratio: 460 / 330; margin: 0 auto;
  border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards);
  background: radial-gradient(circle at 50% 15%, rgba(57,255,20,.10), transparent 55%), var(--color-obsidian-canvas);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}
body.light-mode .process-graphic {
  background:
    radial-gradient(ellipse at 15% 25%, rgba(161,161,161,.25), transparent 65%),
    radial-gradient(ellipse at 90% 80%, rgba(115,115,115,.22), transparent 60%),
    var(--color-obsidian-canvas);
  box-shadow: var(--shadow-subtle), 0 0 65px -12px rgba(161,161,161,.22);
}
.process-stonks { position: absolute; inset: 0; width: 100%; height: 100%; }
.process-stonks-fade { animation: stonksFade 6s linear infinite; }
@keyframes stonksFade {
  0%, 100% { opacity: 0; }
  10%, 78% { opacity: 1; }
  92% { opacity: 0; }
}
.process-stonks-line {
  fill: none; stroke: var(--color-brand-electric); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: stonksDraw 6s linear infinite;
}
/* Neon glow = two wider translucent copies of the line, drawn with it. */
.process-stonks-glow {
  fill: none; stroke: var(--color-brand-electric); stroke-width: 6; stroke-opacity: .35;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: stonksDraw 6s linear infinite;
}
.process-stonks-glow-wide { stroke-width: 16; stroke-opacity: .12; }
body.light-mode .process-stonks-glow { stroke: #22c55e; }
@keyframes stonksDraw {
  0% { stroke-dashoffset: 600; }
  55%, 100% { stroke-dashoffset: 0; }
}
body.light-mode .process-stonks-line { stroke: #16a34a; }

/* One label per step, sitting right at its vertex on the line. Each lights up
   and stays lit once the line's draw progress reaches it, percentages below =
   (cumulative path length at that vertex / total length) * 55% (the draw
   phase spans 0%-55% of the 6s loop, see stonksDraw above). */
.process-stonks-label {
  font: 600 15px/1 var(--font-matterfont), sans-serif;
  fill: var(--color-fog); filter: none;
  --label-active-fill: var(--color-brand-electric);
  --label-active-filter: drop-shadow(0 0 6px rgba(57,255,20,.85));
}
body.light-mode .process-stonks-label {
  --label-active-fill: #16a34a;
  --label-active-filter: drop-shadow(0 0 5px rgba(34,197,94,.7));
}
.process-stonks-label:nth-of-type(1) { animation: stonksLabel1 6s linear infinite; }
.process-stonks-label:nth-of-type(2) { animation: stonksLabel2 6s linear infinite; }
.process-stonks-label:nth-of-type(3) { animation: stonksLabel3 6s linear infinite; }
.process-stonks-label:nth-of-type(4) { animation: stonksLabel4 6s linear infinite; }
.process-stonks-label:nth-of-type(5) { animation: stonksLabel5 6s linear infinite; }
@keyframes stonksLabel1 {
  0% { fill: var(--color-fog); filter: none; }
  1% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  92% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  100% { fill: var(--color-fog); filter: none; }
}
@keyframes stonksLabel2 {
  0%, 13% { fill: var(--color-fog); filter: none; }
  14% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  92% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  100% { fill: var(--color-fog); filter: none; }
}
@keyframes stonksLabel3 {
  0%, 26% { fill: var(--color-fog); filter: none; }
  27% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  92% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  100% { fill: var(--color-fog); filter: none; }
}
@keyframes stonksLabel4 {
  0%, 40% { fill: var(--color-fog); filter: none; }
  41% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  92% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  100% { fill: var(--color-fog); filter: none; }
}
@keyframes stonksLabel5 {
  0%, 55% { fill: var(--color-fog); filter: none; }
  56% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  92% { fill: var(--label-active-fill); filter: var(--label-active-filter); }
  100% { fill: var(--color-fog); filter: none; }
}

/* ==========================================================================
   Values
   ========================================================================== */
.values { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px 24px 72px; }
/* Ambient glow straddling the hero/showcase boundary — a soft blurred circle,
   not a hard-edged gradient, projecting both up into the hero and down here. */
.values::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 0;
  width: min(960px, 100%); aspect-ratio: 1; transform: translate(-50%, -58%); border-radius: 50%;
  pointer-events: none;
  /* Soft falloff baked into the gradient (a 110 px blur filter was re-rasterised on scroll). */
  background: radial-gradient(circle, rgba(57,255,20,.1) 0%, rgba(57,255,20,.06) 30%, rgba(57,255,20,.02) 52%, transparent 70%);
}
body.light-mode .values::before { background: radial-gradient(circle, rgba(34,197,94,.08) 0%, rgba(34,197,94,.04) 32%, transparent 70%); }
.value-card {
  border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); padding: 24px;
  /* Opaque instead of backdrop-filter (re-blurred on every scroll frame). */
  background: rgba(20,20,20,.9);
  transition: border-color .3s, transform .3s, background .3s;
}
body.light-mode .value-card { background: rgba(255,255,255,.92); }
.value-card:hover { border-color: var(--color-steel-border); transform: translateY(-4px); }
.value-card svg { margin-bottom: 16px; }
.value-card p { font-size: 15px; color: var(--color-cloud-white); line-height: 1.4; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 360px) { .value-card { padding: 16px; } .value-card p { font-size: 14px; } }

/* ==========================================================================
   Section head
   ========================================================================== */
.section-head { max-width: 560px; margin-bottom: 56px; }
.section-title { font-size: 36px; line-height: 1.11; font-weight: 500; letter-spacing: -.5px; }
.section-sub { font-size: 16px; color: var(--color-fog); margin-top: 12px; line-height: 1.5; }

/* ==========================================================================
   How it works
   ========================================================================== */
.how { padding: 96px 0; }
.how-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.how-line { display: none; }
.how-step { border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); padding: 24px; background: var(--color-obsidian-canvas); transition: border-color .3s, transform .3s; }
.how-step:hover { border-color: var(--color-steel-border); transform: translateY(-4px); }
.how-index { display: block; font-size: 12px; font-weight: 700; color: var(--color-ash); margin-bottom: 16px; }
.how-step h3 { font-size: 18px; margin-bottom: 8px; }
.how-step p { font-size: 14px; color: var(--color-fog); line-height: 1.5; }

/* ==========================================================================
   Product demo frame
   ========================================================================== */
.demo { padding: 0 24px 96px; }
.demo-frame {
  position: relative; overflow: hidden; border-radius: var(--radius-mediaframes);
  border: 1px solid var(--color-graphite-edge); background: var(--color-true-black);
  box-shadow: var(--shadow-subtle); padding: 64px 32px;
}
.demo-fade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(46,115,252,.08), transparent 60%); pointer-events: none; }

/* Collage: a center CTA with example cards scattered around it — the
   rotation, dashed "Aperçu" tags and disabled-looking mock content are
   deliberate, so it reads as a preview and not a working dashboard. */
.demo-collage {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(220px,1.05fr) minmax(0,1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas:
    "prog   .        nutri"
    "prog   center   nutri"
    "msg    center   perf"
    "msg    .        perf";
  align-items: center;
  gap: 20px 28px;
}
.demo-card-programme { grid-area: prog; }
.demo-card-nutrition { grid-area: nutri; }
.demo-card-messagerie { grid-area: msg; }
.demo-card-progression { grid-area: perf; }

.demo-center {
  grid-area: center; position: relative; z-index: 3;
  text-align: center; padding: 12px;
}
.demo-center-glow {
  position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; max-width: 80vw;
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)));
  /* Already soft: no blur filter needed (it was re-rasterised while following the mouse). */
  background: radial-gradient(circle, rgba(57,255,20,.24), rgba(34,197,94,.12) 40%, rgba(34,197,94,.04) 58%, transparent 72%);
  z-index: -1; pointer-events: none;
}
.demo-center h3 { font-size: 22px; font-weight: 600; margin-top: 12px; }
.demo-center-cta { margin-top: 18px; padding: 12px 22px; font-size: 15px; }
.demo-center-sub { font-size: 12px; color: var(--color-ash); margin: 12px auto 0; max-width: 260px; line-height: 1.6; }

.demo-card {
  position: relative; background: var(--color-charcoal-surface);
  border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards);
  padding: 16px; box-shadow: var(--shadow-subtle-2);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.demo-card:hover { transform: rotate(0deg) translateY(-4px) scale(1.04) !important; box-shadow: var(--shadow-md); z-index: 2; }
.demo-card-programme { transform: rotate(-6deg); max-width: 240px; justify-self: end; }
.demo-card-nutrition { transform: rotate(5deg); max-width: 210px; justify-self: start; }
.demo-card-messagerie { transform: rotate(4deg); max-width: 220px; justify-self: end; }
.demo-card-progression { transform: rotate(-5deg); max-width: 230px; justify-self: start; }

.demo-card-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-ash); background: rgba(255,255,255,.03); border: 1px dashed var(--color-steel-border);
  padding: 3px 8px; border-radius: var(--radius-pills); margin-bottom: 12px;
}

.demo-mock-bar { height: 8px; border-radius: 4px; background: var(--color-graphite-edge); margin-bottom: 8px; opacity: .7; }
.demo-mock-bar.w-60 { width: 60%; } .demo-mock-bar.w-40 { width: 40%; }
.demo-mock-chart { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 14px; }
.demo-mock-chart span { flex: 1; background: linear-gradient(180deg, var(--color-fog), var(--color-graphite-edge)); border-radius: 3px 3px 0 0; opacity: .7; }
.demo-mock-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.demo-mock-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-fog); }
.demo-mock-list .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-graphite-edge); border: 1px solid var(--color-steel-border); flex-shrink: 0; }
.demo-mock-list .dot.ok { background: var(--color-ash); border-color: var(--color-ash); }

.demo-macro-row { display: flex; gap: 14px; margin-bottom: 4px; }
.demo-macro { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: var(--color-ash); }
.demo-ring {
  width: 34px; height: 34px; border-radius: 50%; display: block;
  background: conic-gradient(var(--ring-color) calc(var(--pct)), var(--color-graphite-edge) 0);
  opacity: .8; position: relative;
}
.demo-ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--color-charcoal-surface); }

.demo-chat { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.demo-chat-bubble { font-size: 12px; line-height: 1.5; padding: 8px 10px; border-radius: 10px; max-width: 90%; opacity: .85; }
.demo-chat-bubble.in { background: var(--color-graphite-edge); color: var(--color-fog); align-self: flex-start; border-bottom-left-radius: 3px; }
.demo-chat-bubble.out { background: rgba(255,255,255,.08); color: var(--color-fog); align-self: flex-end; border-bottom-right-radius: 3px; }

.demo-line-chart { width: 100%; height: 44px; opacity: .75; }
.demo-stat { font-size: 15px; font-weight: 600; margin-top: 8px; color: var(--color-fog); }
.demo-stat span { display: block; font-size: 11px; font-weight: 400; color: var(--color-ash); margin-top: 2px; }

@media (max-width: 900px) {
  .demo-collage {
    display: flex; flex-direction: column; gap: 20px; align-items: stretch;
  }
  .demo-card, .demo-card:hover { transform: none !important; max-width: none; justify-self: stretch; }
}

/* ==========================================================================
   Shop / Methods
   ========================================================================== */
.methods-header { padding: 72px 24px 0; }
.methods-header-inner { margin: 0 auto; text-align: center; max-width: 640px; }
.methods-header-title { font-size: 44px; }
.shop { padding: 96px 0; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product-card {
  display: flex; flex-direction: column; min-width: 0;
  position: relative; padding: 16px; border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards);
  background: rgba(255,255,255,.015); overflow: hidden;
  transform-style: preserve-3d; transition: border-color .3s, box-shadow .3s, transform .4s var(--ease-out);
}
.product-card:hover { border-color: var(--color-steel-border); box-shadow: var(--shadow-md); }
/* Share section heights across the formula cards, even when text wraps. */
@media (min-width: 721px) {
  .shop-grid > .product-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    row-gap: 0;
  }
  .shop-grid > .product-card > .plan-selector { margin-top: 0; }
}

/* Methods CTA banner (homepage teaser linking to the dedicated methods page) */

.thumb-svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; transition: transform .5s var(--ease-out); }
.product-card:hover .thumb-svg { transform: scale(1.04); }

/* Ambient animation, always running */
.thumb-glow { animation: thumbGlowPulse 4s ease-in-out infinite; }
@keyframes thumbGlowPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.thumb-particle { animation: thumbTwinkle 2.4s ease-in-out infinite; }
.tp1 { animation-delay: 0s; } .tp2 { animation-delay: .6s; } .tp3 { animation-delay: 1.2s; }
@keyframes thumbTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.streak { animation: thumbStreakFlow 2.6s ease-in-out infinite; }
.ts1 { animation-delay: 0s; } .ts2 { animation-delay: .3s; } .ts3 { animation-delay: .6s; }
@keyframes thumbStreakFlow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.thumb-hand { transform-origin: 345px 205px; animation: thumbSweep 6s linear infinite; }
@keyframes thumbSweep { to { transform: rotate(360deg); } }

.dna-rung { animation: dnaTwist 2.4s ease-in-out infinite; }
@keyframes dnaTwist { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }

.hybrid-barbell { transform-origin: 480px 170px; animation: hybridPump 1.8s ease-in-out infinite; }
@keyframes hybridPump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Cursor-reactive parallax — same language as the hero visual */
.thumb-bg, .thumb-main { transition: transform .3s var(--ease-out); }
.product-card:hover .thumb-bg { transform: translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -14px)); }
.product-card:hover .thumb-main { transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px)); }
.product-card:hover .thumb-hand { animation-duration: 1.4s; }
.product-card:hover .dna-rung { animation-duration: 1.1s; }
.product-card:hover .hybrid-barbell { animation-duration: .9s; }
.product-card h3 { font-size: 18px; margin-bottom: 6px; }
.product-card .product-desc { font-size: 14px; color: var(--color-fog); line-height: 1.5; margin-bottom: 16px; min-height: 42px; }
.product-audience-label { display: block; margin-bottom: 6px; color: var(--color-cloud-white); font-weight: 600; }
.product-audience-list { list-style: none; margin: 0; padding: 0; }
.product-audience-list li { position: relative; padding-left: 14px; }
.product-audience-list li + li { margin-top: 6px; }
.product-audience-list li::before { content: "-"; position: absolute; left: 0; }

.plan-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: auto; margin-bottom: 16px; }
.plan-pill {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px; border-radius: var(--radius-buttons); border: 1px solid var(--color-graphite-edge);
  background: rgba(255,255,255,.02); font-size: 13px; font-weight: 500; color: var(--color-fog);
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.plan-pill:hover { border-color: var(--color-steel-border); color: var(--color-cloud-white); transform: translateY(-1px); }
.plan-pill.selected { border-color: var(--color-cloud-white); background: var(--color-charcoal-surface); color: var(--color-cloud-white); }
.plan-pill-save { font-size: 11px; font-weight: 700; color: var(--color-brand-green); }
.plan-pill-trial { overflow: hidden; min-height: 64px; padding-right: 60px; justify-content: center; }
.plan-pill-ribbon {
  position: absolute; top: 18px; right: -26px; width: 104px;
  padding: 3px 0; transform: rotate(45deg); pointer-events: none;
  background: var(--color-cloud-white); color: var(--color-obsidian-canvas);
  font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.product-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.product-price { display: block; font-size: 22px; font-weight: 600; line-height: 1.2; }
.product-price-sub { display: block; font-size: 12px; color: var(--color-fog); margin-top: 2px; }
.add-cart-btn {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: var(--radius-buttons); background: var(--color-signal-green);
  color: #06210f; border: 1px solid var(--color-signal-green); transition: background .2s, border-color .2s, transform .2s;
}
.add-cart-btn:hover { background: #34d16f; border-color: #34d16f; transform: translateY(-2px); }
.add-cart-btn.added { background: var(--color-brand-green); color: #171717; border-color: var(--color-brand-green); }

/* ==========================================================================
   Bilan booking
   ========================================================================== */
.bilan { padding: 96px 0; border-top: 1px solid var(--color-graphite-edge); }
.bilan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.bilan-list { margin: 28px 0; display: flex; flex-direction: column; gap: 14px; }
.bilan-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--color-fog); }
.bilan-list svg { flex-shrink: 0; }
.bilan-coach { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--color-graphite-edge); }
.bilan-coach-name { font-size: 14px; font-weight: 500; }
.bilan-coach-role { font-size: 13px; color: var(--color-fog); }

.booking-card { border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); background: var(--color-charcoal-surface); padding: 24px; position: sticky; top: 100px; box-shadow: var(--shadow-sm); }
.booking-steps { display: flex; gap: 6px; margin-bottom: 20px; }
.booking-step-dot { height: 3px; flex: 1; border-radius: 3px; background: var(--color-graphite-edge); transition: background .3s; }
.booking-step-dot.active { background: var(--color-cloud-white); }

.booking-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.cal-nav { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pills); border: 1px solid var(--color-graphite-edge); color: var(--color-fog); transition: border-color .2s, color .2s; }
.cal-nav:hover { border-color: var(--color-steel-border); color: var(--color-cloud-white); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--color-ash); margin-bottom: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 8px; color: var(--color-fog); transition: background .2s, color .2s, transform .2s; }
.cal-day.empty { visibility: hidden; }
.cal-day.available { color: var(--color-cloud-white); cursor: pointer; }
.cal-day.available:hover { background: var(--color-graphite-edge); transform: scale(1.08); }
.cal-day.disabled { color: var(--color-ash); opacity: .35; }
.cal-day.selected { background: var(--color-cloud-white); color: var(--color-obsidian-canvas); font-weight: 600; }
.cal-day.today::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--color-brand-green); position: relative; top: 12px; }

.booking-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-fog); margin-bottom: 16px; }
.booking-back:hover { color: var(--color-cloud-white); }
.booking-selected-date { font-size: 15px; font-weight: 500; margin-bottom: 16px; text-transform: capitalize; }
.slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.slot-btn { padding: 12px; border-radius: var(--radius-buttons); border: 1px solid var(--color-graphite-edge); font-size: 14px; text-align: center; transition: border-color .2s, background .2s, transform .2s; }
.slot-btn:not(.unavailable):hover { border-color: var(--color-steel-border); background: rgba(255,255,255,.04); transform: translateY(-2px); }
.slot-btn.unavailable { color: var(--color-ash); text-decoration: line-through; opacity: .4; cursor: not-allowed; }
.slot-btn.selected { background: var(--color-cloud-white); color: var(--color-obsidian-canvas); border-color: var(--color-cloud-white); font-weight: 500; }

.booking-recap { font-size: 14px; color: var(--color-fog); margin-bottom: 16px; padding: 12px; border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-buttons); background: rgba(255,255,255,.02); }
.booking-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field label { font-size: 12px; color: var(--color-fog); }
.field input, .field select {
  background: var(--color-obsidian-canvas); border: 1px solid var(--color-graphite-edge);
  border-radius: var(--radius-inputs); padding: 10px 12px; font-size: 14px; color: var(--color-cloud-white);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--color-steel-border); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.field input::placeholder { color: var(--color-ash); }
.password-field { position: relative; }
.field .password-field input { width: 100%; padding-right: 88px; }
.password-toggle { position: absolute; right: 4px; top: 0; bottom: 0; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--color-fog); border-radius: var(--radius-buttons); }
.password-toggle:hover { color: var(--color-cloud-white); }
.password-toggle:focus-visible { outline: 2px solid var(--color-cloud-white); outline-offset: -3px; }
.password-field input::-ms-reveal { display: none; }

.booking-confirm { text-align: center; padding: 12px 0; }
.confirm-check { width: 52px; height: 52px; border-radius: 50%; background: var(--color-cloud-white); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; animation: popIn .5s var(--ease-out); }
@keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
.booking-confirm h3 { font-size: 20px; margin-bottom: 12px; }
.confirm-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* ==========================================================================
   Start today (timeline)
   ========================================================================== */
.start-today { padding: 96px 24px; border-top: 1px solid var(--color-graphite-edge); border-bottom: 1px solid var(--color-graphite-edge); overflow: hidden; }
.start-today-head { max-width: none; text-align: center; margin: 0 auto 64px; }
.start-today-head .eyebrow { display: block; }
.start-today-head .section-title { font-size: 44px; }

.timeline { position: relative; display: flex; max-width: 800px; margin: 0 auto 48px; }
.timeline-line { position: absolute; top: 6px; left: 16.5%; right: 16.5%; height: 1px; background: var(--color-graphite-edge); }
.timeline-step { flex: 1; text-align: center; position: relative; padding: 0 12px; }
.timeline-node { display: block; width: 13px; height: 13px; border-radius: 50%; margin: 0 auto 20px; background: var(--color-obsidian-canvas); border: 2px solid var(--color-cloud-white); box-shadow: 0 0 0 5px var(--color-obsidian-canvas), 0 0 14px 2px rgba(57,255,20,.45); transition: transform .3s var(--ease-out); }
.timeline-step:hover .timeline-node { transform: scale(1.25); }
.timeline-duration { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand-green); margin-bottom: 8px; }
.timeline-step p { font-size: 16px; color: var(--color-cloud-white); line-height: 1.4; }

.start-today-cta { display: flex; width: max-content; margin: 0 auto; }

/* ==========================================================================
   Feature mosaic
   ========================================================================== */
.mosaic { padding: 0 24px 96px; position: relative; overflow: hidden; }
.mosaic-glow {
  position: absolute; top: 0; left: 50%; width: 640px; height: 500px; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(57,255,20,.08), transparent 70%);
  pointer-events: none; z-index: -1; animation: mosaicGlowPulse 8s ease-in-out infinite;
}
@keyframes mosaicGlowPulse { 0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }

.mosaic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mosaic-card {
  border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); background: var(--color-obsidian-canvas);
  padding: 24px; transition: border-color .3s, transform .3s, box-shadow .3s;
}
.mosaic-card:hover { border-color: var(--color-brand-green); transform: translateY(-6px); box-shadow: 0 16px 32px -16px rgba(57,255,20,.3); }
.mosaic-card h3 { font-size: 18px; margin: 16px 0 8px; }
.mosaic-card p { font-size: 14px; color: var(--color-fog); line-height: 1.5; }

/* Cascading stagger as each card crosses into view — reuses the existing
   scroll-reveal .reveal/.in-view classes, no extra JS needed. */
.mosaic-grid .mosaic-card:nth-child(1) { transition-delay: 0s; }
.mosaic-grid .mosaic-card:nth-child(2) { transition-delay: .08s; }
.mosaic-grid .mosaic-card:nth-child(3) { transition-delay: .16s; }
.mosaic-grid .mosaic-card:nth-child(4) { transition-delay: .24s; }
.mosaic-grid .mosaic-card:nth-child(5) { transition-delay: .32s; }

.mosaic-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,128,0,.1); border: 1px solid rgba(0,128,0,.2);
  transition: transform .3s var(--ease-out), background .3s;
}
.mosaic-card:hover .mosaic-icon { transform: scale(1.08) rotate(-4deg); background: rgba(0,128,0,.18); }

/* "Programmes évolutifs" — bars grow from zero the moment the card scrolls into view. */
.mosaic-bars .bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.mosaic-card.reveal.in-view .bar-1 { animation: growBar .5s var(--ease-out) .15s forwards; }
.mosaic-card.reveal.in-view .bar-2 { animation: growBar .5s var(--ease-out) .27s forwards; }
.mosaic-card.reveal.in-view .bar-3 { animation: growBar .5s var(--ease-out) .39s forwards; }
@keyframes growBar { to { transform: scaleY(1); } }

/* "De vrais coachs" — a live pulse ring, like an online status indicator. */
.mosaic-icon-pulse { position: relative; }
.mosaic-icon-pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 14px; border: 1px solid var(--color-brand-green); opacity: 0; }
.mosaic-card.reveal.in-view .mosaic-icon-pulse::after { animation: pulseRing 1.8s ease-out .5s infinite; }
@keyframes pulseRing { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }

/* "Programme sur-mesure" — the pencil draws itself in, echoing a plan being built by hand. */
.mosaic-icon-build .mosaic-draw { stroke-dasharray: 60; stroke-dashoffset: 60; }
.mosaic-card.reveal.in-view .mosaic-draw { animation: drawIcon 1s var(--ease-out) .2s forwards; }
@keyframes drawIcon { to { stroke-dashoffset: 0; } }

/* "Satisfait ou accompagné" — a slow reassuring glow, like a guarantee badge. */
.mosaic-card.reveal.in-view .mosaic-icon-shield { animation: shieldGlow 2.4s ease-in-out .6s infinite; }
@keyframes shieldGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(57,255,20,0); } 50% { box-shadow: 0 0 0 6px rgba(57,255,20,.12); } }

.mosaic-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-brand-green); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.mosaic-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-signal-green); box-shadow: 0 0 8px 1px var(--color-signal-green); animation: pulseDot 2s ease-in-out infinite; }

.mosaic-wide { grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 32px; }
.mosaic-copy h3 { font-size: 24px; font-weight: 600; margin: 0 0 12px; }
.mosaic-copy p { font-size: 16px; color: var(--color-fog); line-height: 1.5; margin-bottom: 0; }
.mosaic-visual { display: flex; flex-direction: column; gap: 10px; background: var(--color-charcoal-surface); border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); padding: 20px; }
.mosaic-mock-msg { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: 13px; opacity: 0; transform: translateY(8px); }
.mosaic-card.reveal.in-view .mock-in { animation: mockMsgIn .5s var(--ease-out) .3s forwards; }
.mosaic-card.reveal.in-view .mock-out { animation: mockMsgIn .5s var(--ease-out) .65s forwards; }
@keyframes mockMsgIn { to { opacity: 1; transform: none; } }
.mock-in { align-self: flex-start; background: var(--color-graphite-edge); border-bottom-left-radius: 4px; }
.mock-out { align-self: flex-end; background: var(--color-cloud-white); color: var(--color-obsidian-canvas); border-bottom-right-radius: 4px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: 96px 24px; }
.faq-list { border-top: 1px solid var(--color-graphite-edge); }
.faq-item { border-bottom: 1px solid var(--color-graphite-edge); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 4px; font-size: 16px; font-weight: 500; text-align: left; }
.faq-q svg { flex-shrink: 0; transition: transform .3s var(--ease-out); color: var(--color-fog); }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p { overflow: hidden; font-size: 14px; color: var(--color-fog); line-height: 1.6; padding: 0 4px; }
.faq-item.open .faq-a p { padding-bottom: 20px; }
.faq-a > p { min-height: 0; }
.faq-a { overflow: hidden; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner { position: relative; padding: 96px 24px; text-align: center; overflow: hidden; border-top: 1px solid var(--color-graphite-edge); }
.cta-glow { position: absolute; top: 50%; left: 50%; width: 600px; height: 300px; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(46,115,252,.12), transparent 70%); pointer-events: none; }
.cta-inner h2 { font-size: 36px; margin-bottom: 12px; }
.cta-inner p { font-size: 16px; color: var(--color-fog); margin-bottom: 28px; }

/* ==========================================================================
   Thank-you page
   ========================================================================== */
.thanks { position: relative; min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 96px 24px; overflow: hidden; text-align: center; }
.thanks-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.thanks-inner { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.thanks-badge {
  width: 88px; height: 88px; border-radius: 50%; background: var(--color-cloud-white);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  animation: popIn .6s var(--ease-out);
  box-shadow: 0 0 0 10px rgba(255,255,255,.04), 0 0 60px 14px rgba(57,255,20,.25);
}
.thanks .eyebrow { margin-bottom: 12px; }
.thanks-title { font-size: 44px; font-weight: 500; letter-spacing: -1px; margin-bottom: 16px; }
.thanks-sub { font-size: 17px; color: var(--color-fog); line-height: 1.6; margin-bottom: 8px; }
.thanks-sub strong { color: var(--color-cloud-white); }
.thanks-recap { width: 100%; max-width: 380px; margin: 24px 0 8px; text-align: left; }
.thanks-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.thanks .eyebrow.reveal { transition-delay: .12s; }
.thanks-title.reveal { transition-delay: .22s; }
.thanks-sub.reveal { transition-delay: .32s; }
.thanks-recap.reveal { transition-delay: .42s; }
.thanks-actions.reveal { transition-delay: .52s; }

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal { padding: 72px 24px 96px; max-width: 760px; margin: 0 auto; }
.legal-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand-green); margin-bottom: 12px; }
.legal h1 { font-size: 40px; font-weight: 500; letter-spacing: -.5px; margin-bottom: 8px; }
.legal-updated { font-size: 13px; color: var(--color-ash); margin-bottom: 40px; }
.legal-toc { border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); background: rgba(255,255,255,.015); padding: 20px 24px; margin-bottom: 48px; }
.legal-toc p { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-ash); margin-bottom: 12px; }
.legal-toc ol { padding-left: 20px; margin: 0; display: grid; gap: 8px; }
.legal-toc a { font-size: 14px; color: var(--color-fog); transition: color .2s; }
.legal-toc a:hover { color: var(--color-cloud-white); }
.legal section { scroll-margin-top: 100px; padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--color-graphite-edge); }
.legal section:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.legal h2 { font-size: 22px; font-weight: 600; margin-bottom: 14px; }
.legal h3 { font-size: 16px; font-weight: 600; color: var(--color-cloud-white); margin: 20px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; color: var(--color-fog); margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 16px; }
.legal strong { color: var(--color-cloud-white); font-weight: 600; }
.legal a:not(.legal-toc a) { color: var(--color-brand-green); }
.legal-fill { color: var(--color-brand-green); font-style: italic; }
.legal-note { margin-top: 56px; padding: 20px 24px; border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); background: rgba(0,128,0,.06); }
.legal-note p { color: var(--color-fog); font-size: 13px; margin-bottom: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--color-obsidian-canvas); border-top: 1px solid var(--color-graphite-edge); padding: 64px 24px 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--color-graphite-edge); }
.footer-brand p { font-size: 14px; color: var(--color-fog); margin: 16px 0 20px; max-width: 260px; line-height: 1.5; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 32px; height: 32px; border-radius: var(--radius-pills); border: 1px solid var(--color-graphite-edge); display: flex; align-items: center; justify-content: center; color: var(--color-fog); transition: color .2s, border-color .2s; }
.footer-social a:hover { color: var(--color-cloud-white); border-color: var(--color-steel-border); }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 { font-size: 13px; color: var(--color-ash); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.footer-col a { font-size: 14px; color: var(--color-fog); transition: color .2s; }
.footer-col a:hover { color: var(--color-cloud-white); }
.footer-newsletter p { font-size: 13px; color: var(--color-fog); }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input { flex: 1; min-width: 0; background: var(--color-charcoal-surface); border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-inputs); padding: 10px 12px; font-size: 13px; color: var(--color-cloud-white); }
.newsletter-form input:focus { outline: none; border-color: var(--color-steel-border); }
.newsletter-form button { width: 38px; border-radius: var(--radius-inputs); background: var(--color-cloud-white); color: var(--color-obsidian-canvas); display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.newsletter-form button:hover { transform: translateX(2px); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; font-size: 13px; color: var(--color-ash); flex-wrap: wrap; gap: 8px; }
.footer-admin-link { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; color: var(--color-graphite-edge); opacity: .75; transition: color .3s, opacity .3s; }
.footer-admin-link:hover { color: var(--color-fog); opacity: 1; }

/* ==========================================================================
   Cart drawer & overlay
   ========================================================================== */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); z-index: 120; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); }
.overlay.visible { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 92vw;
  background: var(--color-charcoal-surface); border-left: 1px solid var(--color-graphite-edge);
  z-index: 130; transform: translateX(100%); transition: transform .4s var(--ease-out);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--color-graphite-edge); }
.cart-header h3 { font-size: 18px; }
.icon-btn { width: 32px; height: 32px; border-radius: var(--radius-pills); display: flex; align-items: center; justify-content: center; color: var(--color-fog); transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--color-graphite-edge); color: var(--color-cloud-white); }

.cart-items { flex: 1; overflow-y: auto; padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); animation: itemIn .3s var(--ease-out); }
@keyframes itemIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.cart-item-thumb { width: 52px; height: 52px; border-radius: 8px; background: var(--color-obsidian-canvas); border: 1px solid var(--color-graphite-edge); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-info h5 { font-size: 14px; margin-bottom: 4px; }
.cart-item-plan { font-size: 12px; font-weight: 400; color: var(--color-ash); }
.cart-item-price { font-size: 13px; color: var(--color-fog); }
.cart-item-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qty-btn { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--color-graphite-edge); display: flex; align-items: center; justify-content: center; font-size: 13px; transition: border-color .2s; }
.qty-btn:hover { border-color: var(--color-steel-border); }
.cart-item-remove { margin-left: auto; font-size: 12px; color: var(--color-ash); }
.cart-item-remove:hover { color: var(--color-brand-green); }

.cart-empty { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--color-ash); font-size: 14px; }
.cart-drawer.is-empty .cart-empty { display: flex; }
.cart-drawer.is-empty .cart-items { display: none; }
.cart-footer { padding: 20px; border-top: 1px solid var(--color-graphite-edge); }
.cart-drawer.is-empty .cart-footer { display: none; }
.cart-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; margin-bottom: 16px; }

/* ==========================================================================
   Modal / checkout
   ========================================================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 150; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); padding: 20px; }
.modal-overlay.visible { opacity: 1; pointer-events: auto; }
.modal {
  position: relative; width: 440px; max-width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--color-charcoal-surface); border: 1px solid var(--color-graphite-edge);
  border-radius: var(--radius-cards); padding: 32px; box-shadow: var(--shadow-md);
  transform: scale(.94) translateY(10px); opacity: 0; transition: transform .35s var(--ease-out), opacity .35s;
}
.modal-overlay.visible .modal { transform: scale(1) translateY(0); opacity: 1; }
.modal-close { position: absolute; top: 16px; right: 16px; }
.checkout-body h3 { font-size: 20px; margin-bottom: 16px; }
.checkout-summary { border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); padding: 14px; margin-bottom: 20px; font-size: 13px; color: var(--color-fog); }
.checkout-summary-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.checkout-summary-row > span:last-child { flex-shrink: 0; white-space: nowrap; }
.checkout-summary-row.total { color: var(--color-cloud-white); font-weight: 600; font-size: 15px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--color-graphite-edge); }
#checkoutFormEl { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
#checkoutFormEl[hidden] { display: none; }
.checkout-note { font-size: 11px; color: var(--color-ash); text-align: center; line-height: 1.5; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab { flex: 1; font-size: 13px; font-weight: 500; color: var(--color-fog); padding: 8px; border-radius: var(--radius-buttons); border: 1px solid var(--color-graphite-edge); transition: border-color .2s, color .2s, background .2s; }
.auth-tab:hover { color: var(--color-cloud-white); }
.auth-tab.active { background: var(--color-cloud-white); color: var(--color-obsidian-canvas); border-color: var(--color-cloud-white); font-weight: 600; }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.auth-form[hidden] { display: none; }
.checkout-success { text-align: center; padding: 20px 0; }
.checkout-success h3 { font-size: 20px; margin-bottom: 8px; }
.checkout-success p { font-size: 14px; color: var(--color-fog); margin-bottom: 8px; }
.checkout-success .btn { margin-top: 16px; }

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--color-cloud-white); color: var(--color-obsidian-canvas);
  font-size: 14px; font-weight: 500; padding: 12px 18px; border-radius: var(--radius-pills);
  box-shadow: var(--shadow-md); z-index: 200; opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease-out), opacity .35s; display: flex; align-items: center; gap: 8px;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; width: 100%; max-width: 320px; margin: 0 auto; }
  .hero-title { font-size: 44px; letter-spacing: -1px; }
  .bilan-grid { grid-template-columns: 1fr; }
  .booking-card { position: static; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .mosaic-grid { grid-template-columns: repeat(2, 1fr); }
  .mosaic-wide { grid-column: span 2; grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav-links { position: fixed; top: 76px; left: 16px; right: 16px; background: rgba(10,10,10,.97); border: 1px solid var(--color-graphite-edge); border-radius: var(--radius-cards); flex-direction: column; align-items: stretch; padding: 12px; gap: 4px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .3s var(--ease-out), opacity .3s; }
  body.light-mode .nav-links { background: rgba(255,255,255,.97); }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-link { padding: 12px; }
  .nav-link-member-mobile {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: #06210f; background: var(--color-signal-green); font-weight: 600; margin-bottom: 4px;
  }
  .nav-link-member-mobile:hover { color: #06210f; background: var(--color-signal-green); }
  .nav-burger { display: flex; }
  .nav { gap: 8px; }
  .nav-logo-text { display: none; }
  .btn-text-full { display: none; }
  .btn-text-short { display: inline; }
  .announce-inner { font-size: 12px; }
  .hero-title { font-size: 36px; }
  .hero-sub { font-size: 16px; }
  /* Single column: stretching each card to its row made the poster grow and
     pushed the price + "Ajouter" button out of the (overflow-hidden) card. */
  .shop-grid { grid-template-columns: 1fr; align-items: start; }
  .shop-grid > .product-card > * { flex-shrink: 0; }
  .how-grid { grid-template-columns: 1fr; }
  .start-today-head .section-title { font-size: 32px; }
  .timeline { flex-direction: column; align-items: flex-start; gap: 32px; max-width: 320px; }
  .timeline-line { top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; }
  .timeline-step { text-align: left; padding: 0 0 0 32px; }
  .timeline-node { position: absolute; left: 0; top: 2px; margin: 0; }
  .mosaic-grid { grid-template-columns: 1fr; }
  .mosaic-wide { grid-column: span 1; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 24px 56px; }
  .footer-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .section-title { font-size: 28px; }
  /* Bigger tap target — at 24px this was too small and too faint to reliably hit on a phone. */
  .footer-admin-link { width: 40px; height: 40px; opacity: .85; }
}

/* Error line of the checkout sign-up / login forms. */
.admin-login-error { font-size: 13px; color: #ff6b6b; margin: -4px 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }

  /* The hero stonks line is a deliberate, contained animation (not page-wide motion) — keep it running. */
  .process-stonks-fade, .process-stonks-line, .process-stonks-label { animation-duration: 6s !important; animation-iteration-count: infinite !important; }

  /* Product thumbnail illustrations: same rationale — small, contained, deliberate motion. */
  .thumb-glow { animation-duration: 4s !important; animation-iteration-count: infinite !important; }
  .thumb-particle { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
  .streak { animation-duration: 2.6s !important; animation-iteration-count: infinite !important; }
  .thumb-hand { animation-duration: 6s !important; animation-iteration-count: infinite !important; }
  .dna-rung { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
  .hybrid-barbell { animation-duration: 1.8s !important; animation-iteration-count: infinite !important; }
}

/* ==========================================================================
   Day mode (landing page toggle)
   ========================================================================== */
body.light-mode {
  --color-obsidian-canvas: #ffffff;
  --color-true-black: #ffffff;
  --color-charcoal-surface: #f2f2f2;
  --color-graphite-edge: #e2e2e2;
  --color-steel-border: #c9c9c9;
  --color-cloud-white: #0a0a0a;
  --color-fog: #595959;
  --color-ash: #8f8f8f;
}
body.light-mode [stroke="#fafafa"] { stroke: var(--color-cloud-white); }
body.light-mode [fill="#fafafa"] { fill: var(--color-cloud-white); }
body.light-mode [stroke="#0a0a0a"] { stroke: var(--color-obsidian-canvas); }
body.light-mode .nav-logo-mark,
body.light-mode .preloader-logo img { filter: invert(1); }

.theme-toggle {
  position: fixed; left: 20px; bottom: 20px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-charcoal-surface); border: 1px solid var(--color-graphite-edge);
  color: var(--color-cloud-white); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-md);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.theme-toggle:hover { border-color: var(--color-steel-border); transform: translateY(-2px); }
.theme-toggle svg { position: absolute; transition: opacity .3s var(--ease-out), transform .4s var(--ease-out); }
.theme-toggle .theme-icon-sun { opacity: 0; transform: rotate(-40deg) scale(.6); }
.theme-toggle .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
body.light-mode .theme-toggle .theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); }
body.light-mode .theme-toggle .theme-icon-moon { opacity: 0; transform: rotate(40deg) scale(.6); }

/* Scrolling brand banner above the experience cards. */
.brand-marquee { position: relative; overflow: hidden; padding: 10px 0; background: #000; color: #fff; border-block: 1px solid #262626; }
.brand-marquee-track { display: flex; width: max-content; animation: brandMarquee 38s linear infinite !important; }
.brand-marquee-group { display: flex; flex-shrink: 0; align-items: center; justify-content: space-around; gap: 28px; padding-right: 28px; min-width: 100vw; }
.brand-marquee-group span { white-space: nowrap; font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
.brand-marquee-group img { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; filter: brightness(0) invert(1); }
@keyframes brandMarquee { to { transform: translateX(-50%); } }

/* Homepage method posters */
.methods-showcase { overflow: hidden; background: radial-gradient(ellipse at 50% 45%, rgba(34,197,94,.09), transparent 65%); }
.methods-showcase-head { text-align: center; margin: 0 auto 48px; }
.methods-showcase-head h2 { font-size: clamp(38px,6vw,78px); font-weight: 900; line-height: .98; letter-spacing: -.055em; margin: 16px 0 24px; }
.methods-showcase-head h2 em { color: var(--color-signal-green); font-style: italic; }
.methods-showcase-head p { color: var(--color-fog); font-size: 17px; line-height: 1.6; }
.methods-showcase-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.method-poster { position: relative; display: flex; align-items: flex-end; min-height: 490px; overflow: hidden; isolation: isolate; padding: 28px; border: 1px solid #343434; border-radius: 12px; background: #101310; color: #fff; transition: border-color .3s, box-shadow .3s; }
.method-poster:hover, .method-poster:focus-visible { border-color: #22c55e; box-shadow: 0 10px 40px rgba(34,197,94,.15); }
.method-poster:focus-visible { outline: 3px solid #22c55e; outline-offset: 4px; }
.method-poster-level { position: absolute; top: 22px; left: 24px; z-index: 2; padding: 7px 10px; background: #222; border: 1px solid #444; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.method-poster-art { position: absolute; inset: 24px -100px auto; height: 260px; z-index: -2; opacity: .8; transition: transform .6s; }
.method-poster:hover .method-poster-art { transform: scale(1.08); }
.method-poster-art .thumb-svg { height: 100%; width: 100%; }
.method-poster::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 15%, rgba(10,15,10,.25) 35%, #0a100c 70%); }
.method-poster-number { position: absolute; right: 18px; top: 68px; color: rgba(255,255,255,.08); font-size: 128px; font-weight: 900; font-style: italic; line-height: 1; }
.method-poster-copy { width: 100%; }
.method-poster-place { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #58e78b; }
.method-poster h3 { font-size: clamp(30px,3.7vw,52px); font-weight: 900; font-style: italic; letter-spacing: -.045em; line-height: 1.1; margin: 12px 0 18px; }
.method-poster-copy > strong { font-size: 18px; }
.method-poster-copy p { min-height: 66px; margin-top: 10px; color: #bcbfbd; font-size: 14px; line-height: 1.55; }
.method-poster-link { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #354139; margin-top: 22px; padding-top: 18px; font-weight: 700; font-size: 13px; }
.method-poster-link > span { font-size: 24px; color: #58e78b; }
.methods-showcase-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 32px; }
.methods-showcase-footer p { max-width: 490px; font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--color-fog); }
.methods-showcase-footer strong { color: var(--color-signal-green); }
.product-card { scroll-margin-top: 120px; }
body.light-mode .methods-showcase-head h2 em, body.light-mode .methods-showcase-footer strong { color: #008000; }
/* Day mode: the method posters (homepage showcase + shop formula cards) become light cards.
   The artwork strokes already flip to dark via the generic [stroke="#fafafa"] rule; only its
   dark backdrop, the fade and the fixed dark colours need overriding. */
body.light-mode .method-poster { background: linear-gradient(180deg, #f3f8f3, #fff 60%); border-color: #dde5dd; color: #0a0a0a; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
body.light-mode .method-poster:hover, body.light-mode .method-poster:focus-visible { border-color: #22c55e; box-shadow: 0 12px 36px rgba(0,128,0,.12); }
body.light-mode .method-poster::after { background: linear-gradient(180deg, transparent 15%, rgba(255,255,255,.4) 35%, #fff 70%); }
body.light-mode .method-poster-art rect[fill^="url(#bg-"] { fill: transparent; }
body.light-mode .method-poster-art .thumb-bg, body.light-mode .method-poster-art .thumb-bg * { stroke: #d3dcd3; }
body.light-mode .method-poster-level { background: #fff; border-color: #d3dcd3; color: #1a1a1a; }
body.light-mode .method-poster-number { color: rgba(0,0,0,.06); }
body.light-mode .method-poster-place, body.light-mode .method-poster-link > span { color: #008000; }
body.light-mode .method-poster-copy p { color: #595959; }
body.light-mode .method-poster-link { border-top-color: #dde5dd; }
body.light-mode .method-poster-logo { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 760px) {
  .methods-showcase-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 6px 4px 20px; }
  .method-poster { flex: 0 0 86%; min-height: 460px; scroll-snap-align: center; padding: 24px; }
  .method-poster h3 { font-size: 44px; }
  .methods-showcase-footer { flex-direction: column; text-align: center; }
  .methods-showcase-head p br { display: none; }
}

/* Keep the complete method showcase comfortable on laptop screens. */
.methods-showcase { padding: 32px 0; scroll-margin-top: 78px; }
.methods-showcase-head { margin-bottom: 24px; }
.methods-showcase-head h2 { font-size: clamp(36px, 4.6vw, 60px); margin: 10px 0 14px; }
.methods-showcase-head p { font-size: 15px; line-height: 1.45; }
.method-poster { min-height: 380px; padding: 22px; }
.method-poster-art { inset: 12px -80px auto; height: 200px; }
.method-poster-level { top: 16px; left: 20px; padding: 6px 9px; }
.method-poster-number { top: 52px; font-size: 100px; }
.method-poster h3 { font-size: clamp(30px, 3vw, 42px); margin: 8px 0 10px; }
.method-poster-copy > strong { font-size: 16px; }
.method-poster-copy p { margin-top: 7px; min-height: 60px; font-size: 13px; }
.method-poster-link { margin-top: 12px; padding-top: 10px; }
.methods-showcase-footer { margin-top: 18px; }
@media (max-width: 760px) {
  .methods-showcase { padding: 28px 0; }
  .method-poster { min-height: 380px; }
  .method-poster h3 { font-size: 38px; }
  .methods-showcase-footer { gap: 12px; }
}

.method-poster h3 { height: 48px; display: flex; align-items: center; }
.method-poster-logo { display: block; width: auto; max-width: 100%; height: 48px; object-fit: contain; }

/* Formula comparison uses the same visual identity as the homepage posters. */
#shopGrid > .product-card { padding: 0 22px 22px; border-color: #343434; background: #0a100c; color: #fff; --color-fog: #bcbfbd; --color-cloud-white: #fff; --color-charcoal-surface: #171d19; --color-graphite-edge: #354139; --color-steel-border: #46564b; }
#shopGrid > .product-card:hover { border-color: #22c55e; box-shadow: 0 10px 40px rgba(34,197,94,.15); }
#shopGrid .formula-poster { min-height: 265px; margin: 0 -22px 20px; padding: 22px; border: 0; border-radius: 0; box-shadow: none; }
#shopGrid .formula-poster h3 { font-size: clamp(30px,3vw,42px); margin: 8px 0 10px; }
#shopGrid .product-desc { color: #bcbfbd; }
#shopGrid .product-audience-label { color: #fff; }
@media (min-width: 721px) {
  #shopGrid > .product-card { grid-row: span 4; }
}
/* Day mode: the formula cards drop their dark palette (the poster on top is handled above). */
body.light-mode #shopGrid > .product-card { border-color: #dde5dd; background: #fff; color: #0a0a0a; --color-fog: #595959; --color-cloud-white: #0a0a0a; --color-charcoal-surface: #f3f6f3; --color-graphite-edge: #dde5dd; --color-steel-border: #c9d3c9; }
body.light-mode #shopGrid > .product-card:hover { border-color: #22c55e; box-shadow: 0 12px 36px rgba(0,128,0,.12); }
body.light-mode #shopGrid .product-desc { color: #595959; }
body.light-mode #shopGrid .product-audience-label { color: #0a0a0a; }

/* Homepage: a unified athletic poster identity. */
.home-page { --home-panel: #0d130f; --home-border: #2c3930; --home-accent: #22c55e; }
.home-page.light-mode { --home-panel: #f2f6f3; --home-border: #cbd8cf; --home-accent: #008000; }
.home-page .hero-title { font-size: clamp(40px,5.2vw,68px); font-weight: 900; text-transform: uppercase; letter-spacing: -.055em; line-height: .98; }
.home-page .hero-title em { font-style: italic; color: var(--home-accent); }
.home-page .section-title, .home-page .cta-inner h2 { font-size: clamp(32px,4vw,52px); font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: 1.04; }
.home-page .section-title em, .home-page .cta-inner h2 em { color: var(--home-accent); font-style: italic; }
.home-page .eyebrow { color: var(--home-accent); font-weight: 700; letter-spacing: .13em; }
.home-page .section-head { margin-bottom: 32px; }
.home-page .section-sub { line-height: 1.6; }
.home-page .btn { border-radius: 8px; font-weight: 700; }
.home-page .btn-green, .home-page .btn-methods { background: #008000; color: #fff; border-color: #008000; }
.home-page .btn-green:hover, .home-page .btn-methods:hover { background: #006b00; }
.home-page .value-card, .home-page .how-step, .home-page .mosaic-card, .home-page .booking-card { background: linear-gradient(145deg,rgba(34,197,94,.045),transparent 65%),var(--home-panel); border: 1px solid var(--home-border); border-radius: 12px; }
.home-page .value-card:hover, .home-page .how-step:hover, .home-page .mosaic-card:hover { border-color: var(--home-accent); box-shadow: 0 8px 28px rgba(34,197,94,.08); }
.home-page .value-card p { font-weight: 600; }
.home-page .value-card svg { color: var(--home-accent); }
.home-page .how { padding: 60px 0; }
.home-page .how-step { position: relative; overflow: hidden; padding: 24px; }
.home-page .how-index { font-size: 54px; font-weight: 900; font-style: italic; letter-spacing: -.06em; line-height: 1; color: var(--home-accent); opacity: .65; margin-bottom: 22px; }
.home-page .how-step h3 { font-size: 18px; font-weight: 700; }
.home-page .demo-frame { border-color: var(--home-border); border-radius: 12px; box-shadow: none; background: var(--home-panel); }
.home-page .demo-fade { background: radial-gradient(ellipse at center,rgba(34,197,94,.1),transparent 65%); }
.home-page .demo-center h3 { font-weight: 900; text-transform: uppercase; font-style: italic; letter-spacing: -.025em; }
.home-page .demo-card { border-color: var(--home-border); }
.home-page .bilan { padding-top: 64px; padding-bottom: 64px; }
.home-page .booking-card { box-shadow: 0 16px 48px rgba(0,0,0,.12); }
.home-page .start-today { border-block: 1px solid var(--home-border); background: radial-gradient(ellipse at 50% 50%,rgba(34,197,94,.08),transparent 70%); }
.home-page .mosaic { padding-top: 64px; padding-bottom: 64px; }
.home-page .mosaic-card h3 { font-weight: 800; letter-spacing: -.025em; }
.home-page .faq { padding-top: 64px; padding-bottom: 64px; }
.home-page .faq-list { border-top: 0; display: grid; gap: 10px; }
.home-page .faq-item { border: 1px solid var(--home-border); background: var(--home-panel); border-radius: 10px; padding: 0 20px; }
.home-page .faq-item.open { border-color: var(--home-accent); }
.home-page .faq-q { font-weight: 700; gap: 20px; }
.home-page .faq-q svg { color: var(--home-accent); }
.home-page .cta-banner { padding: 64px 24px; border-color: var(--home-border); background: var(--home-panel); }
.home-page .cta-glow { background: radial-gradient(ellipse,rgba(34,197,94,.14),transparent 70%); }
.home-page footer { border-top-color: var(--home-border); }
@media (max-width: 760px) {
  .home-page .hero { padding-top: 36px; }
  .home-page .hero-title { font-size: clamp(38px,9vw,56px); }
  .home-page .how, .home-page .bilan { padding-top: 40px; padding-bottom: 40px; }
  .home-page .mosaic, .home-page .faq, .home-page .cta-banner { padding-top: 40px; padding-bottom: 40px; }
  .home-page .how-index { font-size: 40px; margin-bottom: 16px; }
  .home-page .faq-item { padding-inline: 14px; }
}

/* Retain the navigation layout while emphasizing the free consultation. */
.nav > .nav-logo { min-width: 70px; }
.nav > .nav-logo .nav-logo-mark { width: 39px; height: 39px; }
.nav .nav-member-link { background: transparent; color: var(--color-cloud-white); border: 1px solid var(--color-steel-border); box-shadow: none; }
.nav .nav-member-link:hover { border-color: var(--color-signal-green); background: rgba(34,197,94,.06); }
@media (max-width: 720px) {
  .nav > .nav-logo { min-width: 0; }
  .nav > .nav-logo .nav-logo-mark { width: 26px; height: 26px; }
}

/* Lighter glass backgrounds for the highlighted homepage panels. */
.home-page { --home-glass: rgba(13,19,15,.52); }
.home-page.light-mode { --home-glass: rgba(242,246,243,.52); }
.home-page .value-card,
.home-page .how-step,
.home-page .demo-frame {
  background: linear-gradient(145deg,rgba(34,197,94,.025),transparent 65%), var(--home-glass);
}
.home-page .process-graphic {
  background: radial-gradient(circle at 50% 15%,rgba(57,255,20,.08),transparent 55%),rgba(10,10,10,.48);
}
.home-page.light-mode .process-graphic {
  background: radial-gradient(ellipse at 15% 25%,rgba(161,161,161,.18),transparent 65%),radial-gradient(ellipse at 90% 80%,rgba(115,115,115,.15),transparent 60%),rgba(255,255,255,.48);
}

/* Prominent calls to action, scoped to the six homepage content buttons. */
.home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) .btn {
  min-height: 48px; padding: 13px 20px; gap: 12px;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 10px; font-weight: 700; line-height: 1.3;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) :is(.btn-green,.btn-methods) {
  background: linear-gradient(135deg,#159b38,#00751d); color: #fff;
  border: 1px solid #35c65a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24),0 4px 0 #034f17,0 8px 24px rgba(34,197,94,.22);
}
.home-page :is(.hero-actions,.start-today,.cta-inner) .btn-primary {
  background: linear-gradient(135deg,#fff,#dce9df); color: #102416;
  border: 1px solid #fff;
  box-shadow: inset 0 1px 0 #fff,0 4px 0 #8d9f92,0 8px 24px rgba(34,197,94,.13);
}
.home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) .btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg,transparent 20%,rgba(255,255,255,.25) 50%,transparent 80%);
  transform: translateX(-150%); transition: transform .65s ease;
}
@media (hover: hover) {
  .home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) .btn:hover {
    transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 6px 0 #065722,0 12px 32px rgba(34,197,94,.3);
  }
  .home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) .btn:hover::after { transform: translateX(150%); }
}
.home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) .btn:active { transform: translateY(2px); box-shadow: inset 0 1px 3px rgba(0,0,0,.15),0 1px 0 #065722; }
.home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) .btn:focus-visible { outline: 3px solid var(--home-accent); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) .btn,
  .home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) .btn::after { transition: none; }
  .home-page :is(.hero-actions,.demo-center,.methods-showcase-footer,.start-today,.cta-inner) .btn::after { display: none; }
}

.nav .btn { border-radius: 8px; font-weight: 700; }
.nav .btn-green { background: #008000; color: #fff; border-color: #008000; }
.nav .btn-green:hover { background: #006b00; border-color: #006b00; }

/* Keep homepage section anchors below the sticky navigation. */
.home-page :is(#comment, #bilan, #progression, #faq) { scroll-margin-top: 88px; }

/* Optional prepaid commitment: explicit opt-in and transparent savings. */
#shopGrid .commitment-option { margin: 14px 0; padding: 14px; border: 1px solid #365c40; border-radius: 10px; background: rgba(34,197,94,.06); }
#shopGrid .commitment-option[hidden] { display: none; }
#shopGrid .commitment-option.is-selected { border-color: #22c55e; background: rgba(34,197,94,.14); }
.commitment-option label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.commitment-toggle { width: 20px; height: 20px; flex-shrink: 0; accent-color: #22c55e; }
.commitment-toggle:focus-visible { outline: 2px solid #58e78b; outline-offset: 4px; }
.commitment-option strong { display: block; color: #fff; font-size: 14px; }
.commitment-offer { display: block; color: #58e78b; font-size: 12px; margin-top: 5px; line-height: 1.5; }
.commitment-detail { margin-top: 10px; color: #bcbfbd; font-size: 12px; line-height: 1.5; }
body.light-mode #shopGrid .commitment-option { border-color: #b9dcc1; }
body.light-mode .commitment-option strong { color: #0a0a0a; }
body.light-mode .commitment-offer { color: #008000; }
body.light-mode .commitment-detail { color: #595959; }
body.light-mode .commitment-toggle:focus-visible { outline-color: #008000; }
@media (min-width: 721px) { #shopGrid > .product-card { grid-row: span 6; } }
@media (min-width: 721px) {
  #shopGrid > .product-card > .formula-poster { grid-row: 1; }
  #shopGrid > .product-card > .product-desc { grid-row: 2; }
  #shopGrid > .product-card > .plan-selector { grid-row: 3; }
  #shopGrid > .product-card > .commitment-option { grid-row: 4; }
  #shopGrid > .product-card > .payment-choice { grid-row: 5; }
  #shopGrid > .product-card > .product-footer { grid-row: 6; }
}

.installment-note { display: block; margin-top: 8px; max-width: 260px; font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--color-signal-green); }
.installment-note[hidden] { display: none; }

/* Prominent installment information with eligibility always visible. */
.payment-highlight { display: flex; align-items: center; gap: 20px; margin-top: 26px; padding: 20px 24px; border: 1px solid #22c55e; border-radius: 12px; background: linear-gradient(120deg,rgba(34,197,94,.17),rgba(34,197,94,.035)); }
.payment-highlight strong { display: block; color: var(--color-cloud-white); font-size: clamp(19px,2.2vw,26px); font-weight: 800; }
.payment-highlight p { margin: 6px 0 0; color: var(--color-fog); font-size: 14px; line-height: 1.5; }
.product-footer .installment-note { padding: 10px 12px; border-left: 3px solid #22c55e; border-radius: 6px; background: rgba(34,197,94,.12); color: #58e78b; font-size: 13px; }
@media (max-width: 560px) {
  .payment-highlight { gap: 14px; padding: 16px; align-items: flex-start; }
}
.payment-highlight-mark { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.payment-highlight-mark > span { display: grid; place-items: center; width: 46px; height: 48px; border: 1px solid rgba(34,197,94,.35); border-radius: 8px; background: rgba(34,197,94,.04); color: var(--color-cloud-white); font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
@media (max-width: 560px) {
  .payment-highlight { flex-direction: column; gap: 12px; }
  .payment-highlight-mark > span { width: 40px; height: 36px; font-size: 19px; }
}

/* Simple, prominent installment terms. */
.payment-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; border-block: 1px solid var(--color-steel-border); padding: 24px 0; }
.payment-option { text-align: center; padding: 8px 18px; }
.payment-option + .payment-option { border-left: 1px solid var(--color-steel-border); }
.payment-option strong { display: block; font-size: clamp(20px,2.6vw,32px); font-weight: 900; font-style: italic; letter-spacing: -.035em; color: var(--color-cloud-white); }
.payment-option strong span { color: var(--color-signal-green); font-size: 1.5em; margin-right: 4px; }
.payment-option p { margin-top: 6px; font-size: 13px; color: var(--color-fog); }
@media (max-width: 560px) { .payment-options { grid-template-columns: 1fr; padding: 8px 0; } .payment-option { padding: 16px 8px; } .payment-option + .payment-option { border-left: 0; border-top: 1px solid var(--color-graphite-edge); } }

.payment-choice { display: grid; gap: 8px; margin: 16px 0; font-size: 13px; font-weight: 600; }
.payment-select { width: 100%; padding: 12px; border: 1px solid rgba(34,197,94,.5); border-radius: 8px; background: var(--color-bg, #101710); color: inherit; font: inherit; }
.payment-select:focus-visible { outline: 2px solid #22c55e; outline-offset: 3px; }