/* Base (reprise du cadre de l'aperçu) */
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Mise en page : sections noires et gris clair en alternance, titres fins et centrés, pilules partout, l'orange en touches */
:root {
  --black: #000000;
  --black-raised: rgba(255, 255, 255, 0.06);
  --black-line: rgba(255, 255, 255, 0.10);
  --white: #FFFFFF;
  --mist: #A1A1AA;
  --light: #F7F7F8;
  --light-card: #FFFFFF;
  --light-line: #E7E7EA;
  --dark-ink: #131316;
  --dark-muted: #62626B;
  --orange: #F1641E;
  --orange-text: #C2490E;
  --gold: #FDAF0F;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-card: 24px;
  --r-pill: 9999px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--black); color: var(--white); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--black); }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Navigation flottante */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; padding-top: 14px; }
.nav-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 18px; border-radius: var(--r-pill);
  background: rgba(10, 10, 12, 0.72); border: 1px solid var(--black-line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.brand img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 30px; font-size: 13.5px; color: var(--mist); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--white); }
.nav-cta { font-size: 13.5px; font-weight: 500; text-decoration: none; padding: 10px 18px; border-radius: var(--r-pill); background: var(--white); color: var(--dark-ink); white-space: nowrap; }

/* Éléments communs */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--black-raised); border: 1px solid var(--black-line); color: var(--white);
}
.light .pill { background: rgba(17, 17, 17, 0.05); border-color: var(--light-line); color: var(--dark-ink); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px rgba(241, 100, 30, 0.9); flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; }
.btn-white { background: var(--white); color: var(--dark-ink); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06); }
.head { display: grid; justify-items: center; text-align: center; gap: 16px; margin-bottom: 48px; }
h1, h2 { margin: 0; font-weight: 500; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.6vw, 46px); line-height: 1.1; max-width: 20ch; }
/* Titres de section en deux tons : la fin du titre passe à la ligne, en gris (même règle partout) */
h2 .soft, h3 .soft { display: block; color: var(--mist); }
.light h2 .soft, .light h3 .soft { color: #6B6B73; }
.fade { background: linear-gradient(180deg, #FFFFFF 30%, #8A8A93); -webkit-background-clip: text; background-clip: text; color: transparent; }
.head p { margin: 0; max-width: 56ch; color: var(--mist); }
.light .head p { color: var(--dark-muted); }
section .wrap { padding-block: var(--sp-sec); }
.light { background: var(--light); color: var(--dark-ink); }

/* Hero */
.hero .wrap { padding-block: clamp(56px, 8vw, 88px) 0; display: grid; justify-items: center; text-align: center; gap: 22px; }
.hero-glow { position: relative; overflow: hidden; }
.hero-glow::before {
  content: ""; position: absolute; inset: -80px 0 auto; height: 620px; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgba(241, 100, 30, 0.18), transparent 70%);
}
.hero-glow > * { position: relative; }
h1 { font-size: clamp(36px, 5.6vw, 56px); line-height: 1.08; max-width: 19ch; }
.lead { margin: 0; max-width: 52ch; color: var(--mist); font-size: 17px; }
.stage {
  position: relative; width: 100%; max-width: 980px; margin-top: 18px;
  aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--black-line); background: #0C0C0E;
}
.stage-bg { position: absolute; inset: -40px; background: center / cover no-repeat url("../media/tim-poster.jpg"); filter: blur(40px) brightness(0.45) saturate(1.1); }
.stage video { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; display: block; margin: 0 auto; object-fit: cover; background: #000; }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--white); color: var(--dark-ink); display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12);
  transition: transform .2s ease;
}
.play:hover { transform: translate(-50%, -50%) scale(1.06); }
.play svg { width: 24px; height: 24px; margin-left: 3px; }
.stage-tag { position: absolute; left: 16px; bottom: 16px; }
.hero-cta { display: grid; justify-items: center; gap: 16px; margin-top: 14px; }
.proof-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 13px; color: var(--mist); }
.proof-line span { display: inline-flex; align-items: center; gap: 6px; }
.proof-line svg { width: 14px; height: 14px; color: var(--gold); }

/* Bandeau d'atouts */
.strip { margin-top: 64px; border-top: 1px solid var(--black-line); border-bottom: 1px solid var(--black-line); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-item { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 12px; font-size: 14px; font-weight: 500; }
.strip-item + .strip-item { border-left: 1px solid var(--black-line); }
.strip-item svg { width: 18px; height: 18px; color: var(--mist); flex: none; }

/* Résultats */
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 270px)) minmax(0, 1fr); gap: 16px; align-items: start; }
.card-white { background: var(--light-card); border: 1px solid var(--light-line); border-radius: var(--r-card); padding: 10px; min-width: 0; color: var(--dark-ink); }
.video-card { display: grid; gap: 12px; padding-bottom: 16px; }
.video-card video { width: 100%; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #000; display: block; }
.who { display: grid; padding-inline: 8px; }
.who strong { font-size: 15px; font-weight: 600; }
.who span { font-size: 13px; color: var(--dark-muted); }
.proofs { display: grid; gap: 16px; min-width: 0; }
.proof { margin: 0; display: grid; gap: 10px; padding-bottom: 14px; }
.proof img { width: 100%; max-width: 100%; height: auto; border-radius: 16px; display: block; }
.proof figcaption { padding-inline: 8px; font-size: 14px; color: var(--dark-muted); }
.proof figcaption strong { color: var(--dark-ink); font-weight: 600; }
.disclaimer { margin: 28px auto 0; max-width: 70ch; text-align: center; font-size: 13px; color: var(--dark-muted); }

/* Le club */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--r-card); background: var(--black-raised); border: 1px solid var(--black-line); min-width: 0; }
.feature-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); }
.feature-icon svg { width: 20px; height: 20px; }
.feature h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.feature p { margin: 0; font-size: 14.5px; color: var(--mist); }
.center { display: flex; justify-content: center; margin-top: 40px; }

/* Parcours */
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: var(--r-card); background: var(--black-raised); border: 1px solid var(--black-line); min-width: 0; }
.step.now { background: linear-gradient(180deg, rgba(241, 100, 30, 0.16), rgba(241, 100, 30, 0.02)); border-color: rgba(241, 100, 30, 0.5); }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.step-num { font-size: 13px; font-weight: 500; color: var(--mist); font-variant-numeric: tabular-nums; }
.price-tag { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); font-variant-numeric: tabular-nums; }
.step.now .price-tag { background: var(--orange); color: #111111; }
.step h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: 14.5px; color: var(--mist); }
.step a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--white); }
.step a:hover { color: var(--gold); }

/* Réseaux */
.socials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.social { display: grid; gap: 12px; align-content: start; padding: 24px; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.social:hover { transform: translateY(-3px); border-color: var(--dark-ink); }
.social-top { display: flex; align-items: center; justify-content: space-between; }
.social-name { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.social-top svg { width: 18px; height: 18px; color: var(--dark-muted); }
.social p { margin: 0; font-size: 14.5px; color: var(--dark-muted); }
.handle { font-size: 13.5px; font-weight: 500; color: var(--orange-text); }

/* FAQ */
.faq-sec { border-top: 1px solid var(--light-line); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.faq-grid .head { justify-items: start; text-align: left; margin: 0; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--light-card); border: 1px solid var(--light-line); border-radius: 18px; padding: 0 22px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--dark-muted); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--dark-muted); font-size: 15px; }

/* Final + pied de page */
/* Dernier appel : une carte sur la fumée animée du haut de page, bien délimitée (bord noir, coins arrondis), qui monte dans le blanc */
.final { position: relative; --final-rise: clamp(40px, 5vw, 72px); }
.final .wrap { padding-block: 0 56px; }
.final-card {
  position: relative; z-index: 3; max-width: 880px; margin: calc(var(--final-rise) * -1) auto 0; display: grid; justify-items: center; gap: 20px;
  padding: clamp(44px, 6vw, 72px) clamp(20px, 5vw, 56px); text-align: center; overflow: hidden;
  border-radius: clamp(24px, 3vw, 40px); border: 2px solid #000000;
  background: #000000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 80px rgba(0, 0, 0, 0.45);
}
.final-card > * { position: relative; }
/* La scène Unicorn Studio du haut de page (même projet), sous le texte ; sans elle, la carte reste noire */
.final-card > .final-fumee { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.final h2 { font-size: clamp(36px, 5.6vw, 56px); max-width: 16ch; }
.final p { margin: 0; max-width: 46ch; color: #C4C4CC; }
.footer-grid { padding-block: 48px 32px; border-top: 1px solid var(--black-line); display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer-brand { display: grid; gap: 12px; align-content: start; min-width: 0; }
.footer-brand p { margin: 0; font-size: 14px; color: var(--mist); max-width: 34ch; }
.mail { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: inherit; text-decoration: none; transition: color 0.2s; }
.mail svg { width: 16px; height: 16px; flex: none; }
.mail:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.footer-col { display: grid; gap: 10px; align-content: start; font-size: 14px; }
.footer-col h4 { margin: 0 0 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.footer-col a { text-decoration: none; opacity: .85; }
.footer-col a:hover { opacity: 1; color: var(--gold); }
.footer-bottom { padding-block: 20px 40px; border-top: 1px solid var(--black-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mist); }

/* Tête de section en deux colonnes */
.split-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: 48px; }
.split-head .left { display: grid; gap: 16px; justify-items: start; }
.split-head h2 { max-width: 16ch; }
.split-head .right { display: grid; gap: 20px; justify-items: start; }
.split-head .right p { margin: 0; color: var(--dark-muted); max-width: 46ch; }
.btn-dark { background: var(--dark-ink); color: var(--white); }

/* Cartes blanches en colonnes */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile { display: grid; gap: 12px; align-content: start; padding: 26px; }
.tile-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--light); border: 1px solid var(--light-line); color: var(--dark-ink); }
.tile-icon svg { width: 20px; height: 20px; }
.tile h3 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.tile p { margin: 0; font-size: 14.5px; color: var(--dark-muted); }
.tile .tag { justify-self: start; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--r-pill); background: var(--light); border: 1px solid var(--light-line); color: var(--dark-muted); }

/* Résultats sur fond noir */
#resultats .disclaimer { color: var(--mist); }

/* Offres */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; }
.offer { display: grid; gap: 20px; align-content: start; padding: 32px; border-radius: var(--r-card); background: var(--black-raised); border: 1px solid var(--black-line); min-width: 0; }
.offer.featured { background: linear-gradient(180deg, rgba(241, 100, 30, 0.14), rgba(255, 255, 255, 0.03) 60%); border-color: rgba(241, 100, 30, 0.45); }
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.offer-label { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.offer h3 { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -0.03em; }
.offer > p { margin: 0; font-size: 15px; color: var(--mist); }
.price { display: grid; gap: 2px; }
.price strong { font-size: 40px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
.price span { font-size: 13px; color: var(--mist); text-transform: uppercase; letter-spacing: 0.08em; }
.checks { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--black-line); display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; }
.checks svg { width: 18px; height: 18px; color: var(--gold); margin-top: 1px; }
.checks small { display: block; color: var(--mist); font-size: 13.5px; }
.offer .btn { justify-self: stretch; }
.vip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--gold); color: #111111; }
.alt-line { margin: 28px 0 0; text-align: center; font-size: 14px; color: var(--mist); }
.alt-line a { color: var(--white); }

@media (max-width: 1000px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .split-head { grid-template-columns: 1fr; }
  .cols-3, .offers { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cols-4 { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proofs { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .path, .socials { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .strip .wrap { grid-template-columns: repeat(2, 1fr); }
  .strip-item:nth-child(3) { border-left: 0; }
  .strip-item:nth-child(n+3) { border-top: 1px solid var(--black-line); }
  .proofs { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: var(--sp-head); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .stage { aspect-ratio: 4 / 5; }
  .results, .features, .path, .socials { grid-template-columns: 1fr; }
  .video-card { max-width: 340px; width: 100%; justify-self: center; }
  .brand span { display: none; }
  .hero-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Retouches inspirées de 8lab : police d'affichage, colonne plus étroite, hero encadré, filets fins */
:root { --display: "Geist", "Inter", system-ui, sans-serif; --hairline: rgba(255, 255, 255, 0.07); }
.wrap { max-width: 1002px; }
h1, h2, .offer h3, .step h3, .social-name, .price strong, .tile h3 { font-family: var(--display); }
h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--white); max-width: 20ch; }
h2 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.light h2 { font-weight: 400; }
.light { background: radial-gradient(70% 420px at 50% 0%, #FFFFFF, rgba(255, 255, 255, 0) 70%), var(--light); }

/* Pilules : fines, sans point */
.pill { background: transparent; border-color: var(--hairline); font-size: 15px; font-weight: 400; padding: 10px 16px; line-height: 1; }
.light .pill { background: transparent; border-color: var(--light-line); }
.pill-halo { background: #15141C; border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 -10px 18px -12px rgba(241, 100, 30, 0.7); padding: 10px 16px 12px; }
.stage-tag { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; padding: 8px 12px; }

/* Navigation pleine largeur */
.nav { padding-top: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--hairline); }
.nav-bar { padding: 12px 0; background: transparent; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-links { gap: 4px; }
.nav-links a { padding: 8px 12px; font-weight: 300; color: rgba(255, 255, 255, 0.73); }
.nav-cta { background: #15141C; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.12); font-weight: 600; padding: 11px 20px; }

/* Hero encadré avec lignes rayonnantes */
.hero .wrap { display: block; padding-block: 16px 0; }
.hero-frame {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; text-align: center; gap: 22px;
  padding: clamp(48px, 7vw, 80px) clamp(16px, 4vw, 48px) clamp(40px, 5vw, 56px);
  border: 1px solid var(--hairline); border-radius: 28px;
  background: radial-gradient(60% 50% at 50% 0%, rgba(241, 100, 30, 0.14), transparent 70%), #050505;
}
.hero-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 90deg at 50% -12%, rgba(255, 255, 255, 0.07) 0deg 0.25deg, transparent 0.25deg 7.5deg);
  mask-image: radial-gradient(80% 60% at 50% 18%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 18%, #000 25%, transparent 80%);
}
.hero-frame > * { position: relative; }
.stage { max-width: 900px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36); background: #0A0A0A; }
.btn-white { box-shadow: 0 0 28px rgba(255, 255, 255, 0.16); padding: 12px 20px 12px 16px; }

/* Preuve sociale sous le bouton */
.proof-avatars { display: flex; align-items: center; gap: 14px; text-align: left; }
.avatars { display: flex; }
.avatars > img, .avatar-logo { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #050505; background: #15141C; }
.avatars > img { object-fit: cover; }
.avatars > * + * { margin-left: -10px; }
.avatar-logo { display: grid; place-items: center; }
.avatar-logo img { width: 18px; height: 18px; }
.proof-text { display: grid; line-height: 1.35; }
.proof-text strong { font-size: 14px; font-weight: 500; }
.proof-text span { font-size: 13px; color: var(--mist); }

/* Bandeau d'atouts entre deux filets verticaux */
.strip-row {
  list-style: none; margin: 40px auto 0; padding: 0; max-width: 970px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-inline: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.strip-row li { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 12px; font-size: 14px; font-weight: 500; text-align: center; }
.strip-row li + li { border-left: 1px solid var(--hairline); }
.strip-row svg { width: 18px; height: 18px; color: var(--mist); flex: none; }

/* Apparition douce au défilement (la page reste lisible sans) */
.reveal { transform: translateY(18px); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { transform: none; }

@media (max-width: 860px) {
  .strip-row { grid-template-columns: repeat(2, 1fr); }
  .strip-row li:nth-child(3) { border-left: 0; }
  .strip-row li:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 600px) {
  .proof-avatars { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: none; }
}

/* Haut de page repris d'entrepreneursclub.fr */
:root { --sys: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
@keyframes gradient-x { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1.08); } to { transform: translate3d(3%, 2%, 0) scale(1.15); } }

/* Navigation */
.nav { background: rgba(0, 0, 0, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.nav .wrap { max-width: 1200px; }
.nav-bar { padding: 14px 0; }
.nav .brand { gap: 12px; }
.nav .brand img { width: 30px; height: 30px; }
.nav .brand span { font-family: var(--sys); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-gold, .nav-plain { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sys); font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .2s ease; }
.nav-gold:hover, .nav-plain:hover { transform: scale(1.05); }
.nav-gold svg { width: 16px; height: 16px; color: #D4A843; flex: none; }
.nav-gold span {
  background: linear-gradient(to right, #6B4A10, #E8C84A, #6B4A10); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradient-x 3s ease infinite;
}
.nav-plain:hover { color: rgba(255, 255, 255, 0.7); }
.nav .nav-cta { font-family: var(--sys); background: #000000; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; font-size: 14px; font-weight: 700; padding: 10px 18px; }

/* Hero */
.hero { position: relative; overflow: hidden; background: #000000; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 192px; background: linear-gradient(to top, #000000, rgba(0, 0, 0, 0)); pointer-events: none; }
.smoke { position: absolute; inset: -10%; pointer-events: none; opacity: 0.22; animation: drift 26s ease-in-out infinite alternate; }
.smoke svg { width: 100%; height: 100%; display: block; }
.hero .wrap.hero-inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding-block: clamp(72px, 10vw, 104px) 48px; max-width: 928px; }
.hero h1 {
  font-family: var(--sys); font-weight: 700; color: var(--white);
  font-size: clamp(36px, 6.2vw, 60px); line-height: 1.1; letter-spacing: -0.015em;
  max-width: 900px; margin: 0 0 16px;
}
.shine { color: #FFFFFF; }
.hero .lead { font-family: var(--sys); color: #A0A0A0; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.4; max-width: 56rem; margin: 0 0 28px; }
.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.hbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 28px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: var(--sys); font-size: 14px; font-weight: 600; line-height: 20px; text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
.hbtn:hover { transform: scale(1.03); }
.hbtn-white { background: #FFFFFF; color: #000000; }
.hbtn-black { background: #000000; color: #FFFFFF; }
.hbtn-black:hover { background: #0D0D0D; }
.hbtn svg { width: 18px; height: 18px; flex: none; }
.club-icon { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); display: grid; place-items: center; flex: none; }
.club-icon img { width: 12px; height: 12px; }
.free-badge {
  position: absolute; top: -10px; right: -8px;
  background: #000000; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px;
  font-family: var(--sys); font-size: 10px; font-weight: 700; line-height: 15px; padding: 2px 8px;
}
.vsl { position: relative; display: block; width: 100%; max-width: 768px; margin-top: 40px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid #222222; background: #0A0A0A; }
.vsl img, .vsl video { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; }
.vsl-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); transition: background-color .2s ease; }
.vsl:hover .vsl-shade { background: rgba(0, 0, 0, 0.3); }
.vsl-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); }
.vsl-play .ping { position: absolute; inset: 0; border-radius: 50%; background: rgba(249, 115, 22, 0.3); opacity: 0; }
.vsl:hover .ping { opacity: 1; animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite; }
.vsl-play .disc {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(249, 115, 22, 0.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .2s ease;
}
.vsl:hover .disc { transform: scale(1.1); }
.vsl-play svg { width: 24px; height: 24px; color: #FFFFFF; margin-left: 3px; }
.vsl-yt { position: absolute; right: 12px; bottom: 12px; font-family: var(--sys); font-size: 12px; font-weight: 600; color: #FFFFFF; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.15); }
.hero-socials { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }
.hero-socials a { width: 36px; height: 36px; display: grid; place-items: center; color: #555555; transition: color .2s ease, transform .2s ease; }
.hero-socials a:hover { color: #F97316; transform: scale(1.1); }
.hero-socials svg { width: 22px; height: 22px; }

@media (max-width: 700px) {
  .nav-gold, .nav-plain { display: none; }
  .hero-btns { width: 100%; flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .smoke, .shine, .nav-gold span { animation: none; }
  .vsl:hover .ping { animation: none; opacity: 0; }
}

/* Fumée animée : quand WebGL est disponible, le canvas remplace le fond SVG */
.smoke.gl { inset: 0; opacity: 1; animation: none; }
.smoke.gl svg { display: none; }
.smoke canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Typographie de 8lab : titres fins en Geist (proche d'Aeonik Pro), textes et boutons en Inter */
:root { --sys: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
.hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 5.2vw, 48px); line-height: 1.2; letter-spacing: -0.02em; }
.nav .brand span { font-family: var(--display); font-weight: 500; }
.nav-gold, .nav-plain { font-size: 13.5px; font-weight: 500; }
.nav .nav-cta { font-size: 13.5px; font-weight: 600; letter-spacing: -0.2px; }
.hbtn { font-size: 15px; font-weight: 500; letter-spacing: -0.2px; }
.free-badge { font-weight: 600; }

/* Fond de 8lab : lignes en perspective, filets fins et balayage de lumière */
@keyframes balayage { 0% { transform: translateX(-10vw); } 9% { transform: translateX(-8vw); } 100% { transform: translateX(100vw); } }
@keyframes balayage-vertical { 0% { transform: translateY(-80px); } 100% { transform: translateY(100cqh); } }
.hero { background: radial-gradient(45% 40% at 50% 62%, rgba(255, 255, 255, 0.05), transparent 70%), #000000; }
.lines-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hline { position: absolute; left: 0; right: 0; height: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.06); z-index: 2; pointer-events: none; }
.hline-top { top: 0; }
.hline-bottom { bottom: 0; }
.hline i { position: absolute; top: 0; left: 0; width: 80px; height: 1px; background: linear-gradient(270deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0)); animation: balayage 5.5s linear infinite; }
.hero-rails { position: absolute; top: 0; bottom: 0; left: 50%; width: min(970px, calc(100% - 32px)); transform: translateX(-50%); z-index: 2; pointer-events: none; }
.rail { position: absolute; top: 0; bottom: 0; width: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.06); container-type: size; }
.rail-l { left: 0; }
.rail-r { right: 0; }
.rail i { position: absolute; top: 0; left: 0; width: 1px; height: 80px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0)); animation: balayage-vertical 5.5s linear infinite; }
@media (max-width: 700px) { .hero-rails { display: none; } }
@media (prefers-reduced-motion: reduce) { .hline i, .rail i { animation: none; opacity: 0; } }

/* Bloc sous la vidéo, inspiré de 8lab */
@keyframes marquee { to { transform: translateX(-50%); } }
.proof-cta { display: grid; justify-items: center; gap: 22px; margin-top: 36px; }
.pill-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px 14px 18px; border-radius: 9999px;
  background: #FFFFFF; color: #131316; text-decoration: none;
  font-family: var(--sys); font-size: 16px; font-weight: 500; letter-spacing: -0.2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06), 0 10px 36px rgba(255, 255, 255, 0.14);
  transition: transform .2s ease;
}
.pill-cta:hover { transform: translateY(-1px); }
.pill-cta svg { width: 15px; height: 15px; }
.green-dot { width: 9px; height: 9px; border-radius: 50%; background: #F97316; box-shadow: 0 0 10px rgba(249, 115, 22, 0.8); flex: none; }
.proof-cta .avatars > img, .proof-cta .avatar-logo { width: 41px; height: 41px; border: 1px solid rgba(255, 255, 255, 0.25); }
.proof-cta .avatars > * + * { margin-left: -14px; }
.proof-cta .proof-text strong { font-family: var(--sys); font-size: 15px; }
.hero-socials { margin-top: 28px; }

.band-line { position: relative; z-index: 2; height: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.07); }
.band-line i { position: absolute; top: 0; left: 0; width: 80px; height: 1px; background: linear-gradient(270deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0)); animation: balayage 5.5s linear infinite; }
.band { position: relative; z-index: 1; width: min(970px, calc(100% - 32px)); margin: 0 auto; }
.hero-inner + .band-line { margin-top: 56px; }
.band-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.band-strip li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 12px; font-family: var(--sys); font-size: 16px; font-weight: 500; }
.band-strip li + li { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.band-strip svg { width: 20px; height: 20px; flex: none; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { display: grid; justify-items: center; align-content: space-between; gap: 14px; padding: 40px 16px; text-align: center; }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.07); }
.stat span { font-family: var(--sys); font-size: 15px; color: var(--mist); }
.stat strong { font-family: var(--display); font-size: clamp(30px, 4vw, 38px); font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.marquee { overflow: hidden; padding: 30px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee-set { display: flex; gap: 64px; padding-right: 64px; }
.marquee-set span { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; color: rgba(255, 255, 255, 0.85); }
.hero { padding-bottom: 0; }
.hero::after { height: 120px; }

/* Découpe entre le haut de page noir et la section claire */
.notch { position: relative; height: 44px; background: var(--light); }
.notch::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1570px, 88%); height: 100%; background: #000000;
  clip-path: polygon(0 0, 100% 0, calc(100% - 44px) 100%, 44px 100%);
}

@media (max-width: 760px) {
  .notch { height: 28px; }
  .notch::before { width: 92%; clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 28px 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .band-line i { animation: none; }
}

/* Bande de photos des membres */
.avatar-strip { display: block; height: 44px; width: auto; max-width: 100%; }
.hero .lead + .vsl { margin-top: 12px; }
@media (max-width: 600px) { .avatar-strip { height: 36px; } }

/* Espace vidéo → bouton : 40 px au total avec l'écart de la grille (22 px), comme sur 8lab */
.hero .proof-cta { margin-top: 18px; }

/* Fond animé : la scène Unicorn Studio d’entrepreneursclub.fr, à la place des lignes en perspective */
.hero { background: #000000; }
.silk-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* Bouton lecture : grand disque blanc plein, triangle noir */
.vsl-play { width: 60px; height: 60px; }
.vsl-play .disc {
  width: 60px; height: 60px;
  background: #FFFFFF; border: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}
.vsl-play svg { width: 19px; height: 19px; color: #000000; margin-left: 3px; }
.vsl-play .ping { background: rgba(255, 255, 255, 0.35); }
.vsl:hover .disc { transform: scale(1.06); }
@media (max-width: 600px) {
  .vsl-play, .vsl-play .disc { width: 50px; height: 50px; }
  .vsl-play svg { width: 16px; height: 16px; }
}

/* Le mot Etsy du titre, en orange Etsy */
.hero h1 .etsy { color: #F1641E; }

/* Étiquette au-dessus du titre et équilibre titre / sous-titre, comme 8lab */
.hero-badge {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center;
  padding: 10px 18px 12px; border-radius: 9999px;
  background: #15141C; border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--sys); font-size: 16px; font-weight: 400; line-height: 1; color: #FFFFFF;
  margin-bottom: 18px;
}
.hero-badge::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
.hero h1 { font-size: clamp(36px, 6vw, 62px); line-height: 1.12; letter-spacing: -0.025em; max-width: 15em; margin-bottom: 20px; }
.hero .lead { max-width: 780px; text-wrap: balance; font-size: clamp(16px, 2vw, 19px); line-height: 1.5; }

/* Animations des boutons : un reflet blanc qui fait le tour du contour, comme sur les filets verticaux */
@property --beam { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes beam-spin { to { --beam: 360deg; } }

/* Contour fin + reflet qui tourne (bouton principal, bouton du menu, étiquette du haut) */
.pill-cta, .nav .nav-cta, .hero-badge { position: relative; isolation: isolate; }
.hero-badge { overflow: visible; }
.pill-cta::before, .nav .nav-cta::before, .hero-badge::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background:
    conic-gradient(from var(--beam), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 290deg, rgba(255, 255, 255, 0.9) 345deg, rgba(255, 255, 255, 0) 360deg),
    rgba(255, 255, 255, 0.08);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-spin 5.5s linear infinite;
  pointer-events: none;
}
.pill-cta::before { inset: -7px; padding: 1px; }
.nav .nav-cta::before { animation-delay: -1.8s; }
.hero-badge::before { animation-delay: -3.6s; }
.pill-cta:hover { transform: translateY(-2px); }
.nav .nav-cta:hover { transform: translateY(-1px); }

/* Boutons des sections : reflet qui traverse au survol */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  transform: skewX(-18deg); pointer-events: none;
  transition: left .7s ease;
}
.btn-white::after { background: linear-gradient(105deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)); }
.btn:hover::after { left: 120%; }
.btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .pill-cta::before, .nav .nav-cta::before, .hero-badge::before { animation: none; }
  .btn::after { transition: none; }
}

/* Bouton lecture sans animation */
.vsl-play .ping { display: none; }
.vsl:hover .disc { transform: none; }
.vsl-play .disc { transition: none; }

/* Titre sur 2 lignes : « Print-on-Demand » ne se coupe pas, taille ajustée pour que la 2e ligne tienne */
.nowrap { white-space: nowrap; }
.hero h1 { font-size: clamp(34px, 5.4vw, 56px); max-width: none; }

/* Preuve sociale façon 8lab : photos cerclées à gauche, étoiles vertes et nombre de membres à droite */
.proof-cta .proof-avatars { gap: 16px; text-align: left; }
.proof-cta .avatar-strip { height: 48px; }
.proof-cta .proof-text { gap: 4px; }
.proof-cta .proof-text .stars { display: flex; gap: 3px; color: #6EE7A0; }
.stars svg { width: 20px; height: 20px; fill: currentColor; }
.proof-cta .proof-text strong { font-family: var(--sys); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: #FFFFFF; }
@media (max-width: 600px) {
  .proof-cta .proof-avatars { flex-direction: row; text-align: left; }
  .proof-cta .avatar-strip { height: 40px; }
  .stars svg { width: 17px; height: 17px; }
  .proof-cta .proof-text strong { font-size: 16px; }
}

/* Réseaux : 3 cartes (sans Discord) */
.socials { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .socials { grid-template-columns: 1fr; } }

/* Menu : logo et nom du club */
.nav .brand img { width: 32px; height: 32px; }

/* Sans la section Réseaux, la FAQ suit directement les offres */
.faq-sec { border-top: 0; }

/* Sans les icônes réseaux : écart photos → bandeau ramené à 72 px */
.hero .wrap.hero-inner { padding-bottom: 16px; }

/* Étoiles en carrés verts, collées comme sur Trustpilot */
.proof-cta .proof-text .stars-square { gap: 2px; }
.stars-square i { width: 22px; height: 22px; display: grid; place-items: center; background: #00B67A; }
.stars-square svg { width: 17px; height: 17px; fill: #FFFFFF; }
@media (max-width: 600px) {
  .stars-square i { width: 19px; height: 19px; }
  .stars-square svg { width: 14px; height: 14px; }
}

/* Équilibre en pyramide, comme 8lab : titre plus large que le sous-titre */
.hero h1 { font-size: clamp(36px, 6.6vw, 68px); line-height: 1.1; }
.hero .lead { max-width: 680px; font-size: clamp(16px, 2vw, 17.5px); }

/* 1re ligne du titre plus longue que la 2e, comme 8lab ; retour à la ligne libre sur mobile */
.hero h1 { font-size: clamp(36px, 6.2vw, 64px); }
@media (max-width: 700px) { .br-desk { display: none; } }

/* Sous-titre : coupure après « expérience, », en pyramide sous le titre */
.hero .lead { max-width: 700px; }

/* Page Club Privé : « Comment ça se passe » en 3 étapes */
.path.path-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .path.path-3 { grid-template-columns: 1fr; } }

/* Sous-titre : 1re ligne plus longue que la 2e */
.hero .lead { max-width: 720px; }

/* Offres façon 8lab : cartes larges empilées, tarif encadré, liste sur deux colonnes */
.plans-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-t) 40px; flex-wrap: wrap; margin-bottom: 40px; }
.plans-head h2 { font-size: clamp(28px, 3.6vw, 40px); max-width: none; margin: 0; text-align: left; }
.plans-head .proof-avatars { gap: 14px; text-align: left; }
.plans-head .avatar-strip { height: 44px; }
.plans-head .proof-text { gap: 4px; }
.plans-head .proof-text .stars-square { display: flex; gap: 2px; }
.plans-head .proof-text strong { font-family: var(--sys); font-size: 17px; font-weight: 500; color: #FFFFFF; }
.plans { display: grid; gap: 18px; }
.plan {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 32px 48px;
  padding: clamp(24px, 4vw, 44px); border-radius: 28px;
  background: #0E0E0F; border: 1px solid rgba(255, 255, 255, 0.08);
}
.plan-featured {
  background: radial-gradient(90% 120% at 0% 0%, rgba(241, 100, 30, 0.22), rgba(241, 100, 30, 0) 60%), linear-gradient(135deg, #1A120D, #0E0E0F 70%);
  border-color: rgba(241, 100, 30, 0.35);
}
.plan-left { display: grid; align-content: start; justify-items: start; gap: 16px; min-width: 0; }
.plan-tag {
  font-family: var(--sys); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #D4D4D8;
}
.plan-featured .plan-tag { background: rgba(241, 100, 30, 0.16); color: #F5833F; }
.plan h3 { margin: 0; font-family: var(--display); font-size: clamp(28px, 3.4vw, 38px); font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.1; }
.plan-left p { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--mist); max-width: 40ch; }
.plan .plan-cta { width: 100%; justify-content: center; margin-top: auto; }
.plan-right { display: grid; align-content: start; gap: 26px; min-width: 0; }
.plan-price {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.10);
}
.plan-price > div { display: grid; gap: 4px; }
.plan-price strong { font-family: var(--display); font-size: clamp(32px, 3.6vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-label { font-family: var(--sys); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }
.plan-side { text-align: right; justify-items: end; }
.plan-side span:last-child { font-size: 15px; font-weight: 500; color: #FFFFFF; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.plan-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; color: #F4F4F5; }
.plan-list svg { width: 18px; height: 18px; color: #F97316; margin-top: 1px; }
.plans-free { margin: 28px 0 0; text-align: center; font-size: 15px; color: var(--mist); }
.plans-free a { color: #FFFFFF; }
@media (max-width: 860px) {
  .plan { grid-template-columns: 1fr; }
  .plan .plan-cta { order: 3; }
}
@media (max-width: 560px) {
  .plan-list { grid-template-columns: 1fr; }
  .plans-head h2 { max-width: none; }
}

/* Offres : photos toujours à côté des étoiles, tarif aligné à gauche sur mobile */
@media (max-width: 600px) {
  .plans-head .proof-avatars { flex-direction: row; text-align: left; }
}
@media (max-width: 560px) {
  .plan-side { text-align: left; justify-items: start; }
}

/* Ligne bonus sous la liste du Club Privé */
.plan-bonus { margin: -8px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; color: #F4F4F5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plan-bonus .plan-label { color: #F5833F; }
.plan-plus { margin: 0 0 -10px; font-family: var(--sys); font-size: 15px; font-weight: 500; color: #FFFFFF; }

@media (max-width: 560px) { .plan-dot { display: none; } .plan-bonus .plan-label { flex-basis: 100%; } }

/* Nombre de membres à côté de l'étiquette de chaque offre */
.plan-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.plan-members { font-family: var(--sys); font-size: 15px; font-weight: 400; color: #A1A1AA; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.plan-members svg { width: 18px; height: 18px; flex: none; }

/* Offres sur toute la largeur, comme 8lab : cartes alignées sur la barre du haut, colonne de droite plus large */
#offres .wrap { max-width: 1200px; }
.plans-head h2 { font-size: clamp(30px, 4.2vw, 52px); letter-spacing: -0.03em; }
.plan { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: 32px 64px; padding: clamp(24px, 4vw, 56px); }
.plan-left { display: flex; flex-direction: column; align-items: flex-start; }
.plan-left p { max-width: 48ch; }
/* Etsy Print : la méthode des 4P en vidéo, à regarder avant l'achat (vignette cliquable entre le texte et le bouton) */
.plan-video { text-decoration: none; display: flex; align-items: center; gap: 14px; width: 100%; max-width: 380px; padding: 10px; border-radius: 16px; border: 1px solid #26262B; background: rgba(255, 255, 255, 0.03); color: #FFFFFF; transition: border-color 0.2s, background 0.2s; }
.plan-video:hover { border-color: #3A3A40; background: rgba(255, 255, 255, 0.055); }
.plan-video-img { position: relative; flex: none; width: 116px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; }
.plan-video-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plan-video-play { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #131316; background: #FFFFFF; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
/* Sur ordinateur, cartes resserrées : les deux offres tiennent ensemble dans l'écran quand un bouton y mène */
@media (min-width: 861px) {
  .plan { padding: clamp(24px, 3vw, 40px); }
  .plan-left { gap: 10px; }
  .plan-left p { margin-bottom: 4px; max-width: none; }
  .plan-right { gap: 20px; }
  .plan-video { padding: 8px; }
  .plan-video-img { width: 100px; }
}
.plan-video-play svg { width: 12px; height: 12px; margin-left: 2px; }
.plan-video-txt { display: grid; gap: 2px; text-align: left; }
.plan-video-txt b { font-size: 15.5px; font-weight: 600; }
.plan-video-txt span { font-size: 13.5px; color: var(--mist); }
/* Comparatif des deux formules, sous les cartes */
.plan-compare { margin-top: 16px; border-radius: 28px; background: #0E0E0F; border: 1px solid rgba(255, 255, 255, 0.08); }
.plan-compare-t { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px; list-style: none; cursor: pointer; font: 500 16px/1.2 var(--display); color: #FFFFFF; transition: color 0.2s; }
.plan-compare-t::-webkit-details-marker { display: none; }
.plan-compare-t:hover { color: #D4D4D8; }
.plan-compare-t svg { width: 18px; height: 18px; transition: transform 0.25s; }
.plan-compare[open] .plan-compare-t svg { transform: rotate(180deg); }
.plan-compare-scroll { padding: 0 clamp(18px, 4vw, 56px) clamp(22px, 3.4vw, 40px); }
.plan-compare table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.plan-compare th, .plan-compare td { padding: 15px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-align: left; vertical-align: middle; }
.plan-compare tbody tr:last-child th, .plan-compare tbody tr:last-child td { border-bottom: 0; }
.plan-compare thead th { padding-top: 0; font: 600 13px/1.2 var(--sys); letter-spacing: 0.08em; text-transform: uppercase; color: #A1A1AA; }
.plan-compare thead th.pc-club { color: #FFFFFF; }
.plan-compare tbody th { width: 46%; padding-left: 0; font-weight: 400; color: #D4D4D8; }
.plan-compare td { width: 27%; color: #FFFFFF; font-weight: 500; }
.plan-compare td:last-child { background: rgba(255, 255, 255, 0.025); }
/* Le tableau est rangé par thème (formation et outils, coaching, communauté, ton choix) : un petit titre ouvre chaque groupe */
.plan-compare .pc-groupe th, .plan-compare .pc-groupe td { padding-top: 30px; padding-bottom: 10px; border-bottom-color: rgba(255, 255, 255, 0.16); }
.plan-compare .pc-groupe th { font: 600 12px/1.2 var(--sys); letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; }
.plan-compare tbody:first-of-type .pc-groupe th, .plan-compare tbody:first-of-type .pc-groupe td { padding-top: 14px; }
/* Dernière ligne : la conclusion du tableau (seul ou en groupe), un peu plus marquée */
.plan-compare .pc-choix th, .plan-compare .pc-choix td { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 18px; padding-bottom: 18px; }
.plan-compare .pc-choix th { color: #FFFFFF; font-weight: 500; }
.plan-compare .pc-choix td { font-weight: 600; }
.pc-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; vertical-align: -6px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }
.pc-yes svg { width: 14px; height: 14px; }
/* Non inclus : une croix dans le même rond que la coche, en plus discret */
.pc-no { display: inline-grid; place-items: center; width: 22px; height: 22px; vertical-align: -6px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #A1A1AA; }
.pc-no svg { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .plan-compare table { font-size: 13.5px; }
  .plan-compare th, .plan-compare td { padding: 12px 6px; }
  .plan-compare tbody th { width: 44%; }
  .plan-compare thead th { font-size: 11px; letter-spacing: 0.05em; }
  .plan-compare .pc-groupe th { font-size: 11px; letter-spacing: 0.08em; }
  .plan-compare .pc-groupe th, .plan-compare .pc-groupe td { padding-top: 24px; }
  .pc-yes { width: 20px; height: 20px; margin-right: 4px; }
  .pc-no { width: 20px; height: 20px; }
}
.plan-list { gap: 20px 32px; }
.plan-list li { font-size: 16px; }
@media (max-width: 860px) {
  .plan { grid-template-columns: 1fr; }
}

/* Témoignages façon entrepreneursclub.fr : un témoignage au centre, ses voisins flous sur les côtés */
#resultats .wrap { max-width: 1200px; }
.testi-head { justify-items: start; text-align: left; gap: 20px; margin-bottom: 56px; }
.testi-head h2 { max-width: none; font-family: var(--display); font-size: clamp(34px, 4.8vw, 60px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; color: #FFFFFF; }
.testi-head-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-btn) 40px; flex-wrap: wrap; }
.testi-head-row p { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: #D4D4D8; }
.testi-stage { display: grid; grid-template-columns: 160px minmax(0, 672px) 160px; justify-content: center; align-items: center; gap: 16px; }
.testi-slide { display: none; grid-row: 1; min-width: 0; }
.testi-slide.is-active { display: block; grid-column: 2; }
.testi-slide.is-enter { animation: testi-in 0.3s ease-out; }
.testi-slide.is-prev, .testi-slide.is-next { display: block; opacity: 0.3; transform: scale(0.9); filter: blur(1px); pointer-events: none; user-select: none; }
.testi-slide.is-prev { grid-column: 1; }
.testi-slide.is-next { grid-column: 3; }
@keyframes testi-in { from { opacity: 0; transform: translateX(var(--dx, 0px)) scale(0.98); } to { opacity: 1; transform: none; } }
.testi-row { position: relative; display: flex; align-items: stretch; gap: 8px; width: 100%; aspect-ratio: 2.444; }
.testi-shot { position: relative; flex: 1; min-width: 0; height: 100%; background: #333333; border: 1px solid #1A1A1A; border-radius: 16px; overflow: hidden; }
.testi-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.testi-video { position: relative; flex: none; height: 100%; aspect-ratio: 9 / 16; padding: 0; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); background: #000; cursor: pointer; }
.testi-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testi-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.1); transition: background 0.2s; }
.testi-video:hover .testi-play { background: rgba(0, 0, 0, 0.25); }
.testi-play > span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(249, 115, 22, 0.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 0.2s; }
.testi-video:hover .testi-play > span { transform: scale(1.1); }
.testi-play svg { width: 14px; height: 14px; margin-left: 2px; }
.testi-audio { position: absolute; right: 16px; bottom: 16px; width: min(280px, 75%); display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.testi-audio button { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #F97316; color: #FFFFFF; display: grid; place-items: center; cursor: pointer; transition: transform 0.15s; }
.testi-audio button:hover { transform: scale(1.05); }
.testi-audio svg { width: 14px; height: 14px; }
.testi-audio .ic-play svg { margin-left: 2px; }
.testi-audio .ic-pause, .testi-audio.is-playing .ic-play { display: none; }
.testi-audio.is-playing .ic-pause { display: block; }
.testi-audio button > span { display: grid; place-items: center; }
.testi-wave { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; gap: 2px; }
.testi-wave i { flex: 1; border-radius: 999px; background: rgba(255, 255, 255, 0.25); transition: background 0.15s; }
.testi-wave i.on { background: #FFFFFF; }
.testi-time { flex: none; font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.7); }
.testi-nav { display: flex; justify-content: center; gap: 16px; margin-top: 24px; }
.testi-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #000000; border: 1px solid #F97316; color: #F97316; cursor: pointer; transition: background 0.2s; }
.testi-btn:hover { background: rgba(249, 115, 22, 0.12); }
.testi-btn svg { width: 20px; height: 20px; }
.testi-modal { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.testi-modal[hidden] { display: none; }
.testi-modal video { width: auto; max-width: 100%; max-height: calc(100dvh - 32px); aspect-ratio: 9 / 16; border-radius: 16px; background: #000; }
.testi-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: rgba(255, 255, 255, 0.12); cursor: pointer; }
.testi-close svg { width: 20px; height: 20px; }
@media (max-width: 1023px) {
  .testi-stage { grid-template-columns: minmax(0, 672px); }
  .testi-slide.is-prev, .testi-slide.is-next { display: none; }
  .testi-slide.is-active { grid-column: 1; }
}
@media (max-width: 639px) {
  .testi-video { border-radius: 8px; }
  .testi-play > span { width: 24px; height: 24px; }
  .testi-play svg { width: 10px; height: 10px; }
  .testi-audio { right: 8px; bottom: 8px; width: 58%; gap: 6px; padding: 4px 10px 4px 4px; }
  .testi-audio button { width: 26px; height: 26px; }
  .testi-audio svg { width: 11px; height: 11px; }
  .testi-wave { height: 16px; }
  .testi-time { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .testi-slide.is-enter { animation: none; }
}

/* « Tu n'es jamais seul » façon 8lab : grand titre, 3 cartes illustrées et animées, fond pointillé */
#accompagnement { position: relative; overflow: hidden; }
#accompagnement::before { content: ""; position: absolute; top: 0; right: 0; width: 60%; height: 75%; pointer-events: none;
  background-image: radial-gradient(rgba(19, 19, 22, 0.16) 1px, transparent 1.3px); background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(55% 60% at 75% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(55% 60% at 75% 30%, #000 20%, transparent 75%); }
#accompagnement .wrap { position: relative; max-width: 1200px; }
.acc-head { display: grid; justify-items: start; gap: 20px; margin-bottom: 48px; }
.acc-head h2 { max-width: none; font-family: var(--display); font-size: clamp(34px, 4.8vw, 60px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; color: var(--dark-ink); }
.acc-head-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-btn) 40px; flex-wrap: wrap; }
.acc-head-row p { margin: 0; max-width: 54ch; font-size: 17px; line-height: 1.55; color: var(--dark-muted); }
.acc-head-row .btn svg { width: 16px; height: 16px; margin-left: 2px; }
.acc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: 30px; border: 1px solid var(--light-line); background: rgba(255, 255, 255, 0.55); }
.acc-card { display: grid; align-content: start; padding-bottom: 30px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--light-line); box-shadow: 0 1px 2px rgba(19, 19, 22, 0.04), 0 10px 30px rgba(19, 19, 22, 0.05); overflow: hidden; }
.acc-card h3 { margin: 26px 28px 10px; font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -0.015em; color: var(--dark-ink); }
.acc-card p { margin: 0 28px; font-size: 16px; line-height: 1.55; color: var(--dark-muted); }
.acc-visual { position: relative; height: 272px; overflow: hidden; border-bottom: 1px solid #F0F0F2; background: linear-gradient(180deg, #FFFFFF, #FAFAFB); }
.acc-logo { background: #131316 url(../media/logo-blanc.png) center / 52% no-repeat; }
.acc-chip { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--light-line); box-shadow: 0 2px 8px rgba(19, 19, 22, 0.06); font-size: 13px; font-weight: 500; color: var(--dark-ink); }
.acc-chip i { width: 7px; height: 7px; border-radius: 50%; background: #F1641E; }

/* Carte 1 : l'appel avec ton coach et les 4 étapes qui se cochent */
.acc-tab { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 8px 16px; border: 1px solid var(--light-line); border-top: 0; border-radius: 0 0 14px 14px; background: #FFFFFF; font-size: 13px; font-weight: 500; color: var(--dark-ink); white-space: nowrap; }
.acc-callrow { position: absolute; top: 70px; left: 10%; right: 10%; display: flex; align-items: center; gap: 8px; }
.acc-avatar { flex: none; width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5px var(--light-line), 0 6px 16px rgba(19, 19, 22, 0.12); }
.acc-you { display: grid; place-items: center; background: #F1641E; color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.acc-line { flex: 1; height: 2px; background: linear-gradient(90deg, #C9C9D0 50%, transparent 0) 0 0 / 8px 2px repeat-x; animation: acc-dash 0.8s linear infinite; }
@keyframes acc-dash { to { background-position: 8px 0; } }
.acc-phone { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; border: 1px solid var(--light-line); color: var(--dark-ink); }
.acc-phone svg { width: 15px; height: 15px; }
.acc-phone::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid #F1641E; animation: acc-ping 2s ease-out infinite; }
@keyframes acc-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
.acc-steps { position: absolute; left: 5%; right: 5%; top: 160px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.acc-steps li { display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--light-line); box-shadow: 0 1px 4px rgba(19, 19, 22, 0.05); font-size: 12px; font-weight: 500; color: var(--dark-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-steps i { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #D4D4D8; background: #FFFFFF center / 11px no-repeat; animation: acc-tick 7s var(--d) infinite both; }
@keyframes acc-tick {
  0% { background-color: #FFFFFF; border-color: #D4D4D8; background-image: none; }
  6%, 82% { background-color: #131316; border-color: #131316; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8.2 9 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  90%, 100% { background-color: #FFFFFF; border-color: #D4D4D8; background-image: none; }
}

/* Carte 2 : le groupe WhatsApp, les messages arrivent un par un */
.acc-chat-card { position: absolute; top: 50%; transform: translateY(-50%); left: 6%; right: 6%; padding: 12px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--light-line); box-shadow: 0 6px 20px rgba(19, 19, 22, 0.07); }
.acc-chat-top { display: flex; align-items: center; gap: 10px; }
/* Groupe WhatsApp : bandeau noir en haut avec les icônes appel vidéo et appel vocal, comme la fenêtre « Ton coach » */
.acc-chat-card .acc-chat-top { margin: -12px -12px 0; padding: 10px 12px; border-radius: 17px 17px 0 0; color: #FFFFFF; background: #131316; }
.acc-chat-card .acc-chat-name strong { color: #FFFFFF; }
.acc-chat-card .acc-chat-name span { color: #A1A1AA; }
.acc-wa { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #FFFFFF; }
.acc-wa svg { width: 17px; height: 17px; }
.acc-chat-name { display: grid; line-height: 1.25; min-width: 0; }
.acc-chat-name strong { font-size: 13px; font-weight: 600; color: var(--dark-ink); }
.acc-chat-name span { font-size: 11.5px; color: var(--dark-muted); }
/* Les 18 membres en pile : les ronds se chevauchent plus ou moins selon la place disponible */
.acc-stack { display: grid; grid-auto-flow: column; grid-template-columns: repeat(17, minmax(6px, 16px)) 22px; justify-content: start; padding: 10px 0 2px 2px; border-bottom: 1px solid #F0F0F2; padding-bottom: 10px; }
.acc-stack i { width: 22px; height: 22px; border-radius: 50%; background: #E5E5EA center / cover no-repeat; box-shadow: 0 0 0 1.5px #FFFFFF; }
.acc-msgs { display: grid; gap: 6px; padding-top: 10px; align-content: start; }
.acc-msg { max-width: 88%; padding: 6px 10px; border-radius: 12px; font-size: 12px; line-height: 1.35; animation: acc-pop 8s var(--d) infinite both; }
.acc-in { justify-self: start; background: #F2F2F4; color: var(--dark-ink); border-bottom-left-radius: 4px; }
.acc-out { justify-self: end; background: #DCF8C6; color: #0B3B16; border-bottom-right-radius: 4px; }
/* Heure en bas à droite de chaque message, et coches bleues « lu » sur les messages envoyés, comme dans WhatsApp */
.acc-msg time { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 5px 0 -3px 10px; font-size: 9.5px; color: #667781; }
@keyframes acc-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.97); }
  5%, 84% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: none; }
}

/* Carte 4 : le live du dimanche façon Google Meet, tout en clair comme la carte des appels (en diagonale, les deux fenêtres
   WhatsApp ont leur bandeau noir) : cadre blanc, vignettes sur gris très clair, tous les boutons en gris clair */
.lv-win { position: absolute; top: 16px; left: 6%; right: 6%; display: grid; gap: 6px; padding: 6px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--light-line); box-shadow: 0 6px 20px rgba(19, 19, 22, 0.07); }
.lv-stage { position: relative; height: 116px; overflow: hidden; border-radius: 12px; background: #F1F3F4 url(../media/live/live-dimanche.jpg) center / contain no-repeat; }
/* Barre de Google Meet : nom à gauche, commandes au centre, participants et chat à droite */
.lv-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; padding: 2px 4px 2px 6px; }
.lv-title { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; color: var(--dark-ink); }
.lv-title > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Logo Meet dans un rond blanc, avec l'onde bleue de l'appel stratégique : le live est en cours */
.lv-meet-rond { position: relative; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; box-shadow: 0 3px 8px rgba(19, 19, 22, 0.14), 0 0 0 1px var(--light-line); }
.lv-meet-rond::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(38, 132, 252, 0.7); animation: cl-ring 1.8s ease-out infinite; }
.lv-meet { width: 14px; height: 14px; }
.lv-ctrls { justify-self: center; display: flex; gap: 5px; }
.lv-ctrls i { position: relative; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #F1F3F4; color: #3C4043; }
.lv-ctrls svg { width: 12px; height: 12px; }
.lv-ctrls .lv-end svg { width: 16px; height: 16px; }
.lv-ctrls .lv-opt { display: none; }
.lv-side { justify-self: end; display: flex; gap: 2px; color: #3C4043; }
.lv-side i { width: 22px; height: 22px; display: grid; place-items: center; }
.lv-side svg { width: 13px; height: 13px; }
/* Les réactions sortent du bouton réactions, comme quand on clique dans Meet, et restent dans la barre : aucun visage n'est caché */
.lv-react { position: absolute; left: 50%; bottom: 3px; margin-left: -7px; font-size: 13px; font-style: normal; line-height: 1; opacity: 0; pointer-events: none; animation: lv-react 4.2s var(--d) ease-out infinite; }
@keyframes lv-react { 0% { opacity: 0; transform: translate(0, 2px) scale(0.7); } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -17px) scale(1.05); } }
@media (min-width: 1200px) { .lv-ctrls .lv-opt { display: grid; } }
@media (max-width: 520px) {
  .lv-bar { display: flex; justify-content: space-between; }
  .lv-side, .lv-ctrls .lv-hand { display: none; }
}
.acc-chip-live { bottom: 16px; }

@media (max-width: 900px) {
  .acc-cards { grid-template-columns: 1fr; }
}
/* Cartes étroites (tablette) : un peu plus de hauteur pour que la conversation respire */
@media (min-width: 901px) and (max-width: 1180px) {
  .acc-visual { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-line, .acc-phone::before, .acc-steps i, .acc-msg, .lv-meet-rond::before { animation: none; }
  .lv-react { display: none; }
  .acc-steps i { background-color: #131316; border-color: #131316; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8.2 9 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}

/* Bouton WhatsApp flottant */
.wa-float { position: fixed; right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px)); z-index: 900; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #FFFFFF; box-shadow: 0 0 0 4px #FFFFFF, 0 10px 28px rgba(0, 0, 0, 0.28); transition: transform 0.2s ease; }
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; }
@media (max-width: 639px) {
  /* Sur mobile : plus petit, et masqué pendant les offres et la FAQ pour ne pas cacher le contenu (main.js) */
  .wa-float { right: 14px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; box-shadow: 0 0 0 3px #FFFFFF, 0 8px 22px rgba(0, 0, 0, 0.28); transition: transform 0.25s ease, opacity 0.25s ease; }
  .wa-float svg { width: 23px; height: 23px; }
  .wa-float.is-cache { opacity: 0; transform: scale(0.8); pointer-events: none; }
}

#club-prive, #etsy-print { scroll-margin-top: 96px; }


/* Jonctions façon 8lab (la découpe .notch du haut de page reste telle quelle)
   Blanc → noir : un grand panneau gris à petits points monte dans le blanc puis se fond dans le noir.
   Noir → blanc : un panneau noir arrondi avec une poignée, ou une forme à pans coupés. */
.light { position: relative; --j-in: max(12px, 2.5%); --j-rise: clamp(40px, 5vw, 72px); --j-r: clamp(24px, 3vw, 44px); }
.jonction-ecran, .jonction-ecran-suite {
  position: absolute; z-index: 2; left: max(12px, 2.5%); right: max(12px, 2.5%); pointer-events: none;
  background: linear-gradient(90deg, #36363C 0%, #45444C 28%, #3A3A40 52%, #4A4951 78%, #37363C 100%);
}
.jonction-ecran::before, .jonction-ecran-suite::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0.9px, transparent 1.3px) 0 6px / 9px 9px;
  -webkit-mask-image: radial-gradient(40% 140% at 22% 0%, #000, transparent 70%), radial-gradient(40% 140% at 78% 0%, #000, transparent 70%);
  mask-image: radial-gradient(40% 140% at 22% 0%, #000, transparent 70%), radial-gradient(40% 140% at 78% 0%, #000, transparent 70%);
}
.jonction-ecran::before { bottom: 3px; }
.jonction-poignee::before { top: 3px; }
.jonction-ecran { bottom: 0; height: var(--j-rise); border: 2px solid #000000; border-bottom: 0; border-radius: var(--j-r) var(--j-r) 0 0; }
.jonction-ecran-suite { top: -2px; height: 170px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.jonction-ecran-suite::before { background-position: 0 1px; }
.jonction-ecran-suite ~ .wrap { position: relative; z-index: 3; }
#resultats, #offres { position: relative; }
.jonction-poignee { position: absolute; z-index: 2; top: 0; left: max(12px, 2.5%); right: max(12px, 2.5%); height: var(--j-rise); border: 2px solid #000000; border-top: 0; border-radius: 0 0 var(--j-r) var(--j-r); background: linear-gradient(90deg, #36363C 0%, #45444C 28%, #3A3A40 52%, #4A4951 78%, #37363C 100%); box-shadow: 0 18px 40px rgba(19, 19, 22, 0.12); pointer-events: none; }
.jonction-poignee::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(rgba(255, 255, 255, 0.2) 0.9px, transparent 1.3px) 0 3px / 9px 9px; -webkit-mask-image: radial-gradient(40% 140% at 22% 100%, #000, transparent 70%), radial-gradient(40% 140% at 78% 100%, #000, transparent 70%); mask-image: radial-gradient(40% 140% at 22% 100%, #000, transparent 70%), radial-gradient(40% 140% at 78% 100%, #000, transparent 70%); }
.jonction-suite-bas { top: auto; bottom: -2px; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
.jonction-suite-bas::before { -webkit-mask-image: radial-gradient(40% 140% at 22% 100%, #000, transparent 70%), radial-gradient(40% 140% at 78% 100%, #000, transparent 70%); mask-image: radial-gradient(40% 140% at 22% 100%, #000, transparent 70%), radial-gradient(40% 140% at 78% 100%, #000, transparent 70%); }
.jonction-poignee::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 46px; height: 9px; transform: translateX(-50%); border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.45); }
.jonction-trapeze { position: absolute; z-index: 2; top: -1px; left: 50%; width: min(1570px, 88%); height: 44px; transform: translateX(-50%); background: #000000; clip-path: polygon(0 0, 100% 0, calc(100% - 44px) 100%, 44px 100%); pointer-events: none; }
@media (max-width: 760px) {
  .jonction-trapeze { width: 92%; height: 28px; clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 28px 100%); }
  .jonction-poignee::after { bottom: 8px; width: 36px; height: 7px; }
}

/* Dernière ligne de la page, façon 8lab : ton sur ton orange (le violet de 8lab devient notre orange). Le fond passe du noir à un brun orangé
   vers l'horizon, le logo en volume, orange clair presque blanc dans la lumière, ressort sur le fond ; il tourne lentement, coupé par l'horizon, avec son reflet */
.logo-3d { --s: clamp(320px, 54vw, 740px); --logo: url(../media/logo-blanc.png); position: relative; height: calc(var(--s) * 0.62); overflow: hidden;
  background: radial-gradient(55% 75% at 50% 95%, rgba(194, 104, 58, 0.2), rgba(194, 104, 58, 0) 70%), linear-gradient(180deg, #000000 0%, #170F0B 40%, #2B1A12 100%); }
.logo-3d-ciel { position: absolute; inset: 0 0 20% 0; overflow: hidden; perspective: 1100px; }
.logo-3d-sol { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; overflow: hidden; perspective: 1100px; background: linear-gradient(180deg, #24150E, #0E0806); border-top: 1px solid rgba(255, 200, 170, 0.12); }
.logo-3d-tourne { position: absolute; left: 50%; width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); transform-style: preserve-3d; animation: logo-tourne 24s linear infinite; }
.logo-3d-ciel .logo-3d-tourne { bottom: calc(var(--s) * -0.32); }
.logo-3d-reflet { position: absolute; left: 0; right: 0; top: calc(var(--s) * -0.3); height: var(--s); transform: scaleY(-1); opacity: 0.12; filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 45%); mask-image: linear-gradient(0deg, #000 0%, transparent 45%); }
.logo-3d-tourne i { position: absolute; inset: 0; background: linear-gradient(135deg, #8E5232, #66381F 50%, #452510);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logo-3d-tourne i.face { background: linear-gradient(150deg, #F6D3BC 0%, #E3A57E 30%, #C07A50 62%, #8E5232 100%); }
@keyframes logo-tourne { from { transform: rotateX(-8deg) rotateY(0deg); } to { transform: rotateX(-8deg) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .logo-3d-tourne { animation: none; transform: rotateX(-8deg) rotateY(-24deg); }
}



/* Barre du haut façon 8lab : pilule flottante, liens internes, section visible allumée */
.nav { --nav-h: 74px; padding-top: 12px; margin-bottom: calc(var(--nav-h) * -1); background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav .wrap { max-width: 1120px; }
.nav .nav-bar { gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(12, 12, 14, 0.74); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* Bouton en pilule, comme la barre qui l'entoure : les deux arrondis s'emboîtent */
.nav .nav-cta { border-radius: 999px; }
/* « Se connecter » (espace membre) : après FAQ, séparé des liens de sections par un trait fin */
.nav-menu .nav-login { position: relative; display: inline-flex; align-items: center; gap: 7px; margin-left: 9px; }
.nav-menu .nav-login::before { content: ""; position: absolute; left: -6px; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: rgba(255, 255, 255, 0.16); }
.nav-menu .nav-login svg { width: 15px; height: 15px; }
.nav-menu a { white-space: nowrap; }
/* Ordinateur étroit : icône seule, pour que le menu tienne sur une ligne */
@media (max-width: 1100px) { .nav-menu .nav-login { padding-inline: 11px; } .nav-menu .nav-login .nav-login-txt { display: none; } .nav-menu .nav-login svg { width: 17px; height: 17px; } }
.nav-drawer .nav-login { display: flex; align-items: center; gap: 10px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0 0 14px 14px; }
.nav-drawer .nav-login svg { width: 18px; height: 18px; color: #F5833F; }
.nav-menu { display: flex; align-items: center; gap: 2px; }
.nav-menu a { padding: 8px 14px; border-radius: 999px; font-family: var(--sys); font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.68); text-decoration: none; transition: color 0.2s, background 0.2s; }
.nav-menu a:hover, .nav-menu a.is-active { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.nav .nav-right { gap: 8px; }
.nav-burger { display: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; cursor: pointer; place-items: center; align-content: center; gap: 5px; }
.nav-burger span { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: #FFFFFF; transition: transform 0.25s; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.nav-drawer { display: grid; gap: 2px; margin-top: 8px; padding: 8px; border-radius: 22px; background: rgba(12, 12, 14, 0.94); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav-drawer[hidden] { display: none; }
.nav-drawer a { padding: 14px 16px; border-radius: 14px; font-size: 16px; font-weight: 500; color: #FFFFFF; text-decoration: none; }
.nav-drawer a:hover, .nav-drawer a.is-active { background: rgba(255, 255, 255, 0.08); }
#accompagnement, #roadmap, #resultats, #offres, #faq { scroll-margin-top: 72px; }
@media (max-width: 900px) {
  .nav-menu { display: none; }
  .nav-burger { display: grid; }
  .nav { --nav-h: 70px; }
  .nav .nav-bar { padding: 6px 6px 6px 14px; }
}
@media (min-width: 901px) { .nav-drawer { display: none !important; } }

/* Roadmap Etsy façon 8lab : parcours au choix, étapes à gauche, détail et interface d'exemple à droite */
#roadmap .wrap { max-width: 1200px; }
/* En-tête de la roadmap centré (étiquette, titre, phrase, onglets), façon 8lab */
.rm-intro { justify-items: center; text-align: center; gap: 18px; margin-bottom: 48px; }
.rm-intro-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.rm-intro h2 { max-width: none; font-family: var(--display); font-size: clamp(34px, 4.8vw, 60px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; color: #FFFFFF; }
.rm-intro p { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: #D4D4D8; }
.rm-tabs { display: inline-flex; gap: 6px; padding: 6px; margin-top: 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); }
.rm-tabs button { padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); background: transparent; color: #FFFFFF; font: 500 15px/1 var(--sys); cursor: pointer; transition: background 0.2s; }
.rm-tabs button[aria-selected="true"] { background: #141416; border-color: rgba(255, 255, 255, 0.14); }
/* Sous chaque onglet, la période qu'il couvre */
.rm-tabs button { display: grid; justify-items: center; gap: 5px; }
.rm-tabs button small { font-size: 12px; font-weight: 400; color: var(--mist); white-space: nowrap; }
@media (max-width: 560px) {
  .rm-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .rm-tabs button { align-content: center; padding: 10px 8px; }
  .rm-tabs button small { font-size: 11px; }
}
.rm-tabs button[aria-selected="true"] small { color: #F5A26B; }
.rm-box { position: relative; min-height: 576px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }
.rm-list { list-style: none; margin: 0; padding: 0; width: 50%; border-right: 1px solid rgba(255, 255, 255, 0.08); }
.rm-list[hidden] { display: none; }
.rm-step { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; height: 96px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: transparent; color: #FFFFFF; font: 500 18px/1.2 var(--sys); text-align: left; cursor: pointer; transition: background 0.2s; }
.rm-item:last-child .rm-step { border-bottom: 0; }
.rm-step > svg { width: 22px; height: 22px; flex: none; color: rgba(255, 255, 255, 0.55); transition: transform 0.25s, color 0.25s; }
.rm-step:hover { background: rgba(255, 255, 255, 0.025); }
.rm-item.is-active .rm-step { background: #111113; }
.rm-item.is-active .rm-step > svg { color: #F1641E; transform: translateX(4px); }
.rm-panel { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: 50%; flex-direction: column; }
.rm-item.is-active .rm-panel { display: flex; }
.rm-panel-text { padding: 30px 32px 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.rm-panel-text h3 { margin: 0 0 12px; font: 500 20px/1.2 var(--display); color: #FFFFFF; }
.rm-panel-text p { margin: 0; font-size: 16px; line-height: 1.6; color: #A1A1AA; }
/* Roadmap : les 4 appels avec le coach (semaines 1, 4, 8 et 12). Sous le titre de l'étape, une petite étiquette en verre ;
   dans le panneau, une carte de l'appel au-dessus du titre. Tons neutres (blanc, gris), police des titres. */
.rm-step-t { display: grid; justify-items: start; gap: 9px; min-width: 0; }
.rm-step-call { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); font: 500 12.5px/1.2 var(--display); font-style: normal; letter-spacing: 0.01em; color: #D4D4D8; transition: border-color 0.2s, color 0.2s; }
.rm-step-call svg { width: 14px; height: 14px; flex: none; color: #FFFFFF; }
.rm-item.is-active .rm-step-call { border-color: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.rm-call { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 11px 16px 11px 11px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.rm-call-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #FFFFFF; background: #1B1B1F; border: 1px solid rgba(255, 255, 255, 0.12); }
.rm-call-ic svg { width: 17px; height: 17px; }
.rm-call-txt { display: grid; gap: 3px; min-width: 0; }
.rm-call-txt b { font: 500 15px/1.25 var(--display); letter-spacing: -0.01em; color: #FFFFFF; }
.rm-call-txt small { font-size: 13px; line-height: 1.45; color: #A1A1AA; }
.rm-stage { flex: 1; display: grid; place-items: center; padding: 28px 32px; }
/* « Développer ma boutique » a une liste plus longue : le visuel reste juste sous le texte au lieu de flotter au milieu */
.rm-list[data-track="dev"] .rm-stage { place-items: start center; }
.rm-mock { width: 100%; max-width: 440px; display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: #161618; border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.02); font-size: 13px; color: #E4E4E7; }
.rm-item.is-active .rm-mock { animation: rm-in 0.45s ease-out; }
@keyframes rm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Éléments des interfaces d'exemple */
.rm-head { display: flex; align-items: center; gap: 10px; }
.rm-head b { font-weight: 600; color: #FFFFFF; font-size: 14px; }
.rm-muted { color: #8A8A93; }
.rm-badge { margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #F5833F; border: 1px solid rgba(241, 100, 30, 0.45); background: rgba(241, 100, 30, 0.1); white-space: nowrap; }
/* Validations de la roadmap en orange, la couleur du site (pas de vert) */
.rm-badge.ok { color: #FFFFFF; border-color: #F1641E; background: #F1641E; }
.rm-badge.bad { color: #F87171; border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.08); }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-chips span { padding: 5px 10px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.rm-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rm-plan div { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.rm-plan span { font-size: 11px; color: #8A8A93; }
.rm-plan b { font-size: 12px; font-weight: 500; color: #FFFFFF; line-height: 1.3; }
.rm-plan div:first-child { border-color: rgba(241, 100, 30, 0.5); background: rgba(241, 100, 30, 0.08); }
.rm-prog { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 12px; color: #8A8A93; }
.rm-prog i, .rm-bar i, .rm-score i { grid-column: 1 / -1; display: block; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rm-prog i b, .rm-bar i b, .rm-score i b { display: block; height: 100%; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #F1641E, #FBBF24); }
.rm-item.is-active .rm-prog i b, .rm-item.is-active .rm-bar i b, .rm-item.is-active .rm-score i b { animation: rm-grow 0.9s 0.15s ease-out both; }
@keyframes rm-grow { from { width: 0; } }
.rm-rows { display: grid; gap: 8px; }
.rm-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.rm-row.on { border-color: rgba(241, 100, 30, 0.45); }
.rm-row > b { font-size: 12px; font-weight: 500; color: #FFFFFF; line-height: 1.3; }
.rm-bar { display: grid; gap: 4px; font-size: 10.5px; color: #8A8A93; }
.rm-bar.good i b { background: #F1641E; }
.rm-bar.bad i b { background: #F87171; }
.rm-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rm-checks li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: #A1A1AA; }
.rm-checks li.ok { color: #FFFFFF; }
.rm-checks em { margin-left: auto; font-style: normal; font-size: 12px; color: #F5833F; }
.rm-checks.small li { padding: 8px 12px; }
.rm-tick { width: 18px; height: 18px; flex: none; border-radius: 6px; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, 0.2); color: #FFFFFF; }
.rm-checks li.ok .rm-tick { background: #F1641E; border-color: #F1641E; }
.rm-tick svg { width: 11px; height: 11px; }
.rm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rm-tiles.four { grid-template-columns: repeat(4, 1fr); }
.rm-tiles span { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 12px; background: #F7F7F8; font-size: 28px; }
.rm-tiles em { font-style: normal; font-size: 11px; color: #62626B; }
.rm-search { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 999px; background: #FFFFFF; color: #131316; font-size: 13px; }
.rm-results { display: grid; gap: 6px; }
.rm-results div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: #A1A1AA; }
.rm-results i { width: 30px; height: 30px; flex: none; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.rm-results .me { color: #FFFFFF; border-color: rgba(241, 100, 30, 0.55); background: rgba(241, 100, 30, 0.08); }
.rm-results .me i { background: linear-gradient(135deg, #F1641E, #FBBF24); }
.rm-results em { margin-left: auto; font-style: normal; font-weight: 600; color: #F5833F; }
.rm-audit { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; }
.rm-radar { width: 130px; height: 130px; }
.rm-radar .g polygon, .rm-radar .g line { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 0.6; }
.rm-radar .shape { fill: rgba(255, 255, 255, 0.1); stroke: #FFFFFF; stroke-width: 1; }
.rm-radar circle { fill: #FFFFFF; }
.rm-radar circle.low { fill: #F87171; }
.rm-radar circle.mid { fill: #FBBF24; }
.rm-bottom { display: grid; gap: 8px; }
.rm-cap { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8A93; }
.rm-score { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.rm-score b { font-weight: 600; color: #FFFFFF; }
.rm-score > span { font-size: 11.5px; color: #8A8A93; }
.rm-score.bad i b { background: #F87171; }
.rm-score.mid i b { background: #FBBF24; }
.rm-big { display: flex; align-items: baseline; gap: 12px; font-family: var(--display); }
.rm-big .old { font-size: 30px; color: #6B6B73; text-decoration: line-through; }
.rm-big .arrow { color: #8A8A93; }
.rm-big .new { font-size: 48px; font-weight: 600; color: #FFFFFF; }
.rm-big .out { color: #8A8A93; }
.rm-table { display: grid; gap: 4px; }
.rm-table div { display: grid; grid-template-columns: 1.6fr 0.7fr 0.7fr; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); font-variant-numeric: tabular-nums; }
.rm-table .th { background: transparent; padding-block: 2px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #8A8A93; }
.rm-table span:not(:first-child) { text-align: right; }
.bs { margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #131316; background: #FDE8D7; }
.rm-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rm-kpis div { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.rm-kpis span { font-size: 11px; color: #8A8A93; }
.rm-kpis b { font-family: var(--display); font-size: 24px; font-weight: 600; color: #FFFFFF; }
.rm-toggles { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rm-toggles li { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.rm-toggles i { position: relative; width: 30px; height: 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); }
.rm-toggles i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; transition: left 0.2s; }
.rm-toggles i.on { background: #F1641E; }
.rm-toggles i.on::after { left: 14px; }
.rm-chart { height: 96px; display: flex; align-items: flex-end; gap: 6px; padding: 8px 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rm-chart i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #F1641E, rgba(241, 100, 30, 0.35)); }
.rm-item.is-active .rm-chart i { animation: rm-rise 0.8s ease-out both; }
@keyframes rm-rise { from { height: 0; } }
.rm-notifs { display: grid; gap: 10px; }

/* Notification « Cha-Ching! » telle qu'elle arrive sur iPhone (mode sombre) : titre et heure sur une ligne, commande en dessous */
.cha { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgba(58, 58, 62, 0.88); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(255, 255, 255, 0.06); color: #FFFFFF; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); text-align: left; }
.rm-item.is-active .cha { animation: cha-in 0.6s var(--d, 0s) cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes cha-in { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
.cha-app { width: 38px; height: 38px; flex: none; border-radius: 9px; display: grid; place-items: center; background: #F1641E; color: #FFFFFF; font: 700 18px/1 Georgia, "Times New Roman", serif; }
.cha-txt { display: grid; flex: 1; gap: 1px; min-width: 0; font-size: 13px; line-height: 1.3; }
.cha-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cha-top span { flex: none; font-size: 12px; color: rgba(235, 235, 245, 0.6); }
.cha strong { font-size: 13.5px; font-weight: 600; }
.cha-txt > span:last-child { color: rgba(255, 255, 255, 0.92); }
/* Pile de notifications qui défile : la plus récente arrive en haut et pousse les autres vers le bas */
.cha-feed { --peek: 38; position: relative; overflow: hidden; margin: -4px -6px; padding: 4px 6px; }
.cha-feed.is-live { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); }
.cha-track { display: grid; gap: 8px; }
.cha-track.is-sliding { transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1); }

@media (max-width: 900px) {
  .rm-box { min-height: 0; }
  .rm-list { width: 100%; border-right: 0; }
  .rm-step { height: 72px; padding: 0 20px; font-size: 16px; }
  .rm-panel { position: static; width: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: #0B0B0C; }
  .rm-panel-text { padding: 20px; }
  .rm-stage { padding: 20px; }
  .rm-tabs button { padding: 11px 16px; font-size: 14px; }
}
@media (max-width: 520px) {
  .rm-audit { grid-template-columns: 1fr; justify-items: center; }
  .rm-bottom { width: 100%; }
  .rm-row { grid-template-columns: 1fr; gap: 6px; }
  .rm-plan { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-item.is-active .rm-mock, .rm-item.is-active .cha, .rm-item.is-active .rm-chart i, .rm-item.is-active .rm-prog i b, .rm-item.is-active .rm-bar i b, .rm-item.is-active .rm-score i b { animation: none; }
}


/* 4e carte : la formation vidéo, à suivre à son rythme */
.acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vid-card { position: absolute; left: 8%; right: 8%; top: 50%; transform: translateY(-58%); display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: center; }
.vid-player { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: radial-gradient(80% 90% at 30% 20%, #3A2418, #131316 70%); box-shadow: 0 12px 28px rgba(19, 19, 22, 0.22); }
.vid-badge { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; color: #FFFFFF; background: rgba(255, 255, 255, 0.14); }
.vid-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; display: grid; place-items: center; color: #131316; background: #FFFFFF; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15); animation: vid-pulse 2.4s ease-in-out infinite; }
.vid-play svg { width: 14px; height: 14px; margin-left: 2px; }
@keyframes vid-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15); } 50% { box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.06); } }
.vid-bar { position: absolute; left: 10px; right: 52px; bottom: 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.vid-bar i { display: block; height: 100%; width: 35%; border-radius: 3px; background: #F1641E; animation: vid-progress 9s linear infinite; }
@keyframes vid-progress { from { width: 18%; } to { width: 92%; } }
.vid-time { position: absolute; right: 10px; bottom: 6px; font-size: 10.5px; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; }
.vid-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vid-list .vid-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #FFFFFF; border: 1px solid var(--light-line); box-shadow: 0 1px 4px rgba(19, 19, 22, 0.05); font-size: 12px; font-weight: 500; color: #62626B; }
.vid-list .vid-row span { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #62626B; border: 1.5px solid #D4D4D8; }
.vid-list .vid-row svg { width: 10px; height: 10px; }
.vid-list .vid-row.done { color: var(--dark-ink); }
.vid-list .vid-row.done span { color: #FFFFFF; background: #131316; border-color: #131316; }
.vid-list .vid-row.now { color: var(--dark-ink); border-color: rgba(241, 100, 30, 0.45); }
.vid-list .vid-row.now span { color: #FFFFFF; background: #F1641E; border-color: #F1641E; }
.vid-list em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #C2490E; }
.acc-video .vid-chip { bottom: 16px; }
@media (max-width: 900px) {
  .acc-cards { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .vid-card { left: 6%; right: 6%; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vid-list .vid-row { padding: 6px 8px; font-size: 11px; }
  .vid-list em { display: none; }
}
@media (prefers-reduced-motion: reduce) { .vid-play, .vid-bar i { animation: none; } }

/* Roadmap experte : compteur de fiches, flux de commande, fournisseurs, marchés */
.rm-count { display: flex; align-items: baseline; gap: 10px; }
.rm-count b { font-family: var(--display); font-size: 52px; font-weight: 600; line-height: 1; color: #FFFFFF; letter-spacing: -0.03em; }
.rm-count span { color: #A1A1AA; }
.rm-split { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rm-split div { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.rm-split span { font-size: 11.5px; color: #A1A1AA; }
.rm-split b { font-family: var(--display); font-size: 20px; font-weight: 600; color: #FFFFFF; }
.rm-flow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #8A8A93; }
.rm-flow span { padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); white-space: nowrap; }
.rm-flow span.on { color: #FFFFFF; border-color: rgba(241, 100, 30, 0.45); background: rgba(241, 100, 30, 0.08); }
.rm-flow i { flex: 1; height: 1px; min-width: 8px; background: rgba(255, 255, 255, 0.15); }
/* Roadmap : produits prévus pour plus tard (semaine 8) et nouveaux produits */
.rm-split .rm-soon { opacity: 0.45; border-style: dashed; }
.rm-new { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rm-new em { margin-right: 2px; font-style: normal; font-size: 11.5px; color: #8A8A93; }
@media (max-width: 480px) { .rm-new em { flex-basis: 100%; } }
.rm-new span { padding: 5px 9px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; color: #FFFFFF; border: 1px solid rgba(241, 100, 30, 0.4); background: rgba(241, 100, 30, 0.1); }
.rm-suppliers { display: grid; gap: 6px; }
.rm-suppliers div { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.rm-suppliers .sp { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
.rm-suppliers b { font-weight: 500; color: #FFFFFF; }
.rm-suppliers em { margin-left: auto; font-style: normal; font-size: 11.5px; color: #8A8A93; }
.rm-suppliers .star { border-color: rgba(241, 100, 30, 0.5); background: rgba(241, 100, 30, 0.08); }
.rm-suppliers .star .sp { background: #F1641E; }
.rm-suppliers .star em { color: #F5833F; font-weight: 600; }
.rm-markets { display: grid; gap: 10px; }
.rm-markets div { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.rm-markets i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.rm-markets i b { display: block; height: 100%; width: var(--w); min-width: 6px; border-radius: 6px; background: linear-gradient(90deg, #F1641E, #FBBF24); }
.rm-item.is-active .rm-markets i b { animation: rm-grow 0.9s 0.15s ease-out both; }
.rm-markets em { font-style: normal; font-weight: 600; color: #F5833F; }

/* Globe des marchés */
.globe-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px 56px; align-items: center; margin-top: 18px; padding: clamp(24px, 4vw, 48px); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08); background: radial-gradient(60% 80% at 80% 50%, rgba(241, 100, 30, 0.12), rgba(241, 100, 30, 0) 70%), #050506; overflow: hidden; }
.globe-text { display: grid; justify-items: start; gap: 16px; }
.globe-text h3 { margin: 0; font-family: var(--display); font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: #FFFFFF; }
.globe-text p { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: #A1A1AA; }
.globe-legend { width: 100%; max-width: 360px; display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.globe-legend li { display: block; }
.globe-legend button { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); font: inherit; font-size: 14px; color: #FFFFFF; text-align: left; cursor: pointer; overflow: hidden; transition: border-color 0.2s, background 0.2s; }
.globe-legend button:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); }
.globe-legend button:focus-visible { outline: 2px solid #F5833F; outline-offset: 2px; }
.globe-legend button b { font-weight: 600; color: #A1A1AA; font-variant-numeric: tabular-nums; }
.globe-legend button i { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w); background: rgba(255, 255, 255, 0.2); transition: background 0.2s; }
.globe-legend button.is-on { border-color: rgba(241, 100, 30, 0.55); background: rgba(241, 100, 30, 0.1); }
.globe-legend button.is-on b { color: #F5833F; }
.globe-legend button.is-on i { background: linear-gradient(90deg, #F1641E, #FBBF24); }
.globe-tag { position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; white-space: nowrap; font-size: 13px; color: #FFFFFF; background: rgba(12, 12, 14, 0.82); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.globe-tag b { font-weight: 600; color: #F5833F; }
.globe-key { display: flex; align-items: center; gap: 9px; margin: 2px 0 0; font-size: 13px; color: #A1A1AA; }
.globe-key i { flex: none; width: 10px; height: 10px; margin: -3px 1px 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle at 50% 50%, #FFFFFF 0 26%, #F1641E 30%); }
.rm-markets div + div em { font-weight: 500; color: #A1A1AA; }
.globe-wrap { position: relative; width: 100%; max-width: 480px; justify-self: center; aspect-ratio: 1; }
.globe-wrap::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(241, 100, 30, 0.18), rgba(241, 100, 30, 0) 65%); filter: blur(10px); }
.globe-canvas { position: relative; display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.globe-canvas.is-dragging { cursor: grabbing; }
@media (max-width: 900px) {
  .globe-block { grid-template-columns: 1fr; }
  .globe-wrap { max-width: 360px; }
  .rm-markets div { grid-template-columns: 104px 1fr auto; }
}

/* Graphique des commandes semaine par semaine (Roadmap, semaine 8) */
.rm-chart-weeks { height: 80px; }
/* Ordinateur étroit : graphique plus bas et notification précédente moins visible, pour que la pile tienne dans le cadre de la roadmap */
@media (min-width: 901px) and (max-width: 1100px) { .rm-chart-weeks { height: 60px; } .cha-feed { --peek: 26; } }

/* Formation vidéo : vraies miniatures des modules qui défilent, barre de lecture en bas */
.vid-player { aspect-ratio: 608 / 327; background: #131316; }
.vid-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.vid-player img.on { opacity: 1; }
.vid-player::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(rgba(10, 10, 12, 0), rgba(10, 10, 12, 0.7)); pointer-events: none; }
.vid-play { left: 8px; top: auto; bottom: 7px; width: 22px; height: 22px; margin: 0; z-index: 1; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); animation: none; }
.vid-play svg { width: 9px; height: 9px; margin-left: 1px; }
.vid-bar { left: 38px; right: 12px; bottom: 16px; z-index: 1; }
.vid-bar i { width: 100%; transform-origin: left; animation: vid-fill 4s linear both; }
@keyframes vid-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vid-list .vid-row b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.vid-list .vid-row em { flex: none; }
@media (min-width: 901px) and (max-width: 1180px) { .vid-list em { display: none; } }
@media (prefers-reduced-motion: reduce) { .vid-bar i { animation: none; transform: scaleX(0.4); } .vid-player img { transition: none; } }

/* Formation vidéo : on choisit son module (flèches du lecteur ou liste des 12) */
.vid-ctrl { position: absolute; left: 8px; right: 10px; bottom: 8px; z-index: 1; display: flex; align-items: center; gap: 5px; }
.vid-ctrl .vid-bar { position: static; flex: 1; margin: 0 4px; }
.vid-nav { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #131316; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14); cursor: pointer; transition: background 0.2s, color 0.2s; }
.vid-nav:hover { color: #FFFFFF; background: #F1641E; }
.vid-nav svg { width: 12px; height: 12px; }
.vid-nav:focus-visible, .vid-row:focus-visible { outline: 2px solid #F1641E; outline-offset: 2px; }
.vid-count { flex: none; font-size: 10.5px; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.vid-list { position: relative; max-height: 138px; margin: -3px; padding: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 4px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(transparent, #000 4px, #000 calc(100% - 18px), transparent); }
.vid-list::-webkit-scrollbar { display: none; }
.vid-list li { display: block; }
.vid-row { width: 100%; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s; }
.vid-row:hover { border-color: #D4D4D8; }
.vid-row span i { font-style: normal; }
.vid-row span svg { display: none; }
.vid-row.done span svg:first-child, .vid-row.now span svg:last-of-type { display: block; }
.vid-row.done span i, .vid-row.now span i { display: none; }
.vid-row:not(.now) em { display: none; }
@media (max-width: 520px) { .vid-list { max-height: 120px; } .vid-count { display: none; } .vid-nav { width: 22px; height: 22px; } }

/* Partie Inclus : bouton qui descend vers la carte Club Privé, avec une ligne d'explication */
.club-cta { display: grid; justify-items: center; gap: 12px; }
.club-cta p { margin: 0; font-size: 14px; color: #71717A; }
/* Lien vers la démo de l’espace membre, sous le bouton (s’ouvre dans un nouvel onglet) */
.club-demo { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--dark-ink); text-decoration: underline; text-decoration-color: rgba(19, 19, 22, 0.3); text-underline-offset: 4px; transition: text-decoration-color 0.2s; }
.club-demo:hover { text-decoration-color: currentColor; }
.club-demo svg { width: 14px; height: 14px; }

/* Roadmap : ROAS (Etsy Ads) et courbe du chiffre d'affaires */
.rm-roas { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; color: #D4D4D8; background: rgba(241, 100, 30, 0.08); border: 1px solid rgba(241, 100, 30, 0.3); }
.rm-roas-k { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: #FFFFFF; background: #F1641E; }
.rm-roas b { margin-left: auto; flex: none; font-family: var(--display); font-size: 18px; font-weight: 600; color: #F5833F; }
.rm-shot { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #F7F6F2; cursor: zoom-in; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.rm-shot img { display: block; width: 100%; height: auto; }
.rm-shot-zoom { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: #FFFFFF; background: rgba(19, 19, 22, 0.82); }
.rm-shot-zoom svg { width: 13px; height: 13px; }
.rm-shot:hover .rm-shot-zoom { background: #F1641E; }
.rm-shot:focus-visible { outline: 2px solid #F5833F; outline-offset: 3px; }
/* Légende sous la capture : à qui est la boutique et sur quelle période */
.rm-shot-cap { margin: -4px 0 0; font-size: 12px; line-height: 1.4; text-align: center; color: #8A8A93; }
.rm-shot-cap b { font-weight: 500; color: #D4D4D8; }
.rm-shot-cap i { font-style: normal; }
/* Sur téléphone, la période passe à la ligne au lieu de couper le texte au milieu */
@media (max-width: 560px) {
  .rm-shot-cap b { display: block; }
  .rm-shot-cap i { display: none; }
}
.shot-zoom { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(5, 5, 6, 0.86); cursor: zoom-out; }
.shot-zoom[hidden] { display: none; }
.shot-zoom img { max-width: min(1200px, 100%); max-height: 100%; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }

/* Roadmap · Etsy Ads : jauge du budget pub (30 à 100 € par mois), le curseur va et vient dans la fourchette */
.rm-budget { display: grid; gap: 9px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); }
.rm-budget-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rm-budget-top span { font-size: 11px; color: #8A8A93; }
.rm-budget-top b { font-family: var(--display); font-size: 20px; font-weight: 600; color: #FFFFFF; white-space: nowrap; }
.rm-budget-top small { font-family: var(--sys); font-size: 12px; font-weight: 400; color: #A1A1AA; }
/* Curseur de budget Etsy Ads : 1 à 5 € par jour par paliers d'1 €, un point par palier, la partie remplie suit le curseur */
.rm-budget-scale { position: relative; }
.rm-budget-range { --p: 40%; position: relative; display: block; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.rm-budget-range:focus { outline: none; }
.rm-budget-range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(42, 42, 47, 0) var(--p), #2A2A2F var(--p)), linear-gradient(90deg, rgba(241, 100, 30, 0.55), #F1641E 55%, #FBBF24); }
.rm-budget-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(241, 100, 30, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4); transition: transform 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none; }
.rm-budget-range:hover::-webkit-slider-thumb, .rm-budget-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.rm-budget-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(241, 100, 30, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4); }
.rm-budget-range::-moz-range-track { height: 8px; border-radius: 8px; background: #2A2A2F; }
.rm-budget-range::-moz-range-progress { height: 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(241, 100, 30, 0.55), #F1641E 55%, #FBBF24); }
.rm-budget-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 4px rgba(241, 100, 30, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4); }
.rm-budget-top output { font: inherit; }
/* Points et montants alignés sur les positions du curseur (centre du rond : 10 px du bord) */
.rm-budget-ticks { position: absolute; top: 50%; left: 10px; right: 10px; pointer-events: none; }
.rm-budget-ticks i { position: absolute; top: -2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.rm-budget-ticks i.is-in { background: rgba(255, 255, 255, 0.85); }
.rm-budget-ticks i.is-on { opacity: 0; }
.rm-budget-axis { position: relative; height: 14px; margin: 0 10px; }
.rm-budget-axis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; line-height: 14px; color: #8A8A93; white-space: nowrap; cursor: pointer; transition: color 0.15s; }
.rm-budget-axis span.is-on { color: #F5833F; font-weight: 600; }
.rm-budget-ticks i:nth-child(1), .rm-budget-axis span:nth-child(1) { left: 0%; }
.rm-budget-ticks i:nth-child(2), .rm-budget-axis span:nth-child(2) { left: 25%; }
.rm-budget-ticks i:nth-child(3), .rm-budget-axis span:nth-child(3) { left: 50%; }
.rm-budget-ticks i:nth-child(4), .rm-budget-axis span:nth-child(4) { left: 75%; }
.rm-budget-ticks i:nth-child(5), .rm-budget-axis span:nth-child(5) { left: 100%; }

.rm-toggles-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Nom du poster sur une ligne, jamais collé à l'interrupteur */
.rm-toggles li { gap: 8px; }
.rm-toggles span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-toggles i { flex: none; }
@media (max-width: 420px) { .rm-toggles-row li { gap: 6px; padding: 9px 8px; font-size: 12px; } }
@media (max-width: 374px) { .rm-toggles-row { grid-template-columns: 1fr; } }

/* Carte des 4 appels : notification d'appel + frise des 12 semaines qui avance d'appel en appel */
.acc-calls .cl-call { position: absolute; top: 28px; left: 50%; width: min(86%, 380px); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--light-line); box-shadow: 0 14px 34px rgba(19, 19, 22, 0.08), 0 1px 3px rgba(19, 19, 22, 0.05); }
.cl-avatar { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; }
.cl-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 2.5px #FFFFFF; }
.cl-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cl-txt b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 600; color: var(--dark-ink); }
.cl-txt span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #71717A; }
.cl-call.is-switch .cl-txt { animation: cl-swap 0.5s ease both; }
@keyframes cl-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cl-dur { flex: none; padding: 4px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #C2490E; background: rgba(241, 100, 30, 0.1); }
.cl-join { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: #22C55E; box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35); }
.cl-join svg { width: 18px; height: 18px; }
.cl-join::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #22C55E; animation: cl-ring 1.8s ease-out infinite; }
@keyframes cl-ring { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.7); opacity: 0; } }
.cl-track { position: absolute; left: 13%; right: 13%; top: 158px; }
.cl-rail { position: relative; height: 4px; border-radius: 4px; background: #ECECEF; }
.cl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 4px; background: linear-gradient(90deg, #FBAB6E, #F1641E); transition: width 1.1s cubic-bezier(0.45, 0.05, 0.25, 1); }
.cl-w { position: absolute; top: 50%; left: var(--x); width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #D4D4D8; }
.cl-steps { position: absolute; left: 0; right: 0; top: 2px; margin: 0; padding: 0; list-style: none; }
.cl-steps li { position: absolute; left: var(--x); top: -17px; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; }
.cl-node { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #A1A1AA; background: #FFFFFF; border: 1.5px solid #D4D4D8; transition: background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s; }
.cl-node svg { width: 16px; height: 16px; }
.cl-steps b { font-size: 11px; font-weight: 600; color: #A1A1AA; transition: color 0.4s; }
.cl-steps em { margin-top: -3px; font-style: normal; font-size: 12px; font-weight: 500; white-space: nowrap; color: #52525B; }
.cl-steps li.done .cl-node { color: #FFFFFF; background: #131316; border-color: #131316; }
.cl-steps li.now .cl-node { color: #FFFFFF; background: #F1641E; border-color: #F1641E; box-shadow: 0 0 0 6px rgba(241, 100, 30, 0.16); }
.cl-steps li.now b { color: #F1641E; }
.cl-steps li.now em { color: var(--dark-ink); font-weight: 600; }
@media (max-width: 520px) {
  .acc-calls .cl-call { width: 90%; gap: 10px; padding: 10px; }
  .cl-dur { display: none; }
  .cl-txt span { white-space: normal; }
  .cl-track { left: 12%; right: 12%; }
  .cl-steps em { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .cl-join::before { animation: none; } .cl-fill { transition: none; } .cl-call.is-switch .cl-txt { animation: none; } }

/* Bandeau des logos : blancs, même poids visuel, ils s'allument au survol */
.marquee-logos { align-items: center; gap: 72px; padding-right: 72px; }
.marquee-logos img { display: block; flex: none; height: var(--h); width: auto; max-width: none; filter: brightness(0) invert(1); opacity: 0.72; transition: opacity 0.2s; }
.marquee-logos img:hover { opacity: 1; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (max-width: 640px) { .marquee-logos { gap: 48px; padding-right: 48px; } .marquee-logos img { height: calc(var(--h) * 0.8); } }

/* Roadmap · Semaine 12 : l'escalier de la suite (1 boutique → d'autres boutiques Etsy → d'autres produits) ; 7 étapes tiennent dans le cadre */
.rm-list .rm-step { height: 92px; }
.rm-stairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; height: 210px; padding-top: 22px; }
.rm-stairs > div { position: relative; height: var(--h); display: grid; align-content: start; justify-items: start; gap: 5px; padding: 12px; border-radius: 12px 12px 6px 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.rm-stairs > div.on { background: linear-gradient(180deg, rgba(241, 100, 30, 0.24), rgba(241, 100, 30, 0.06)); border-color: rgba(241, 100, 30, 0.5); }
.rm-stairs em { position: absolute; left: 0; top: -22px; font-style: normal; font-size: 11px; font-weight: 600; color: #F5833F; white-space: nowrap; }
.rm-stairs-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
.rm-stairs-ico svg { width: 17px; height: 17px; }
.rm-stairs-ico.etsy { font: 700 16px/1 Georgia, serif; background: #F1641E; }
.rm-stairs-ico.shop { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.rm-stairs-ico.shopify { background: #95BF47; }
.rm-stairs b { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #FFFFFF; }
.rm-stairs small { font-size: 11px; line-height: 1.3; color: #8A8A93; }
.rm-item.is-active .rm-stairs > div { animation: rm-rise 0.7s calc(0.15s + var(--i) * 0.15s) ease-out backwards; }
@keyframes rm-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .rm-item.is-active .rm-stairs > div { animation: none; } }
@media (max-width: 900px) { .rm-list .rm-step { height: auto; min-height: 72px; padding-block: 14px; } }
@media (max-width: 520px) { .rm-stairs { height: 220px; gap: 8px; } .rm-stairs > div { padding: 10px; } .rm-stairs small { display: none; } }

/* Titre du bandeau des logos */
.marquee-label { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 28px 16px 0; text-align: center; font-family: var(--sys); font-size: 14px; color: var(--mist); }
.ml-arrow { flex: none; width: 16px; height: 16px; margin-top: 6px; opacity: 0.8; }
.ml-arrow-r { transform: scaleX(-1); }
.marquee-label + .marquee { padding-top: 20px; }
.marquee-label { text-wrap: balance; }
@media (max-width: 480px) { .marquee-label { gap: 8px; padding-inline: 8px; font-size: 13px; } }

/* Notifications Cha-ching : la vraie icône de l'app Etsy Seller (bleue) */
.cha-app { background: #5568C4 url(../media/etsy-seller.png) center / cover no-repeat; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); }


/* Section Inclus façon 8lab : titre deux tons, grandes cartes visuelles, aperçu de l'espace membre */
.eco-head { display: grid; justify-items: start; gap: 18px; max-width: 760px; }
.eco-title { margin: 0; font-family: var(--display); font-size: clamp(36px, 5vw, 64px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; color: var(--dark-ink); }
.eco-title span { display: block; color: #6B6B73; }
.eco-head p { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.6; color: #71717A; }
.eco-head p b { font-weight: 500; color: var(--dark-ink); }
.eco-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: clamp(32px, 5vw, 52px); padding: 10px; border-radius: 28px; border: 1px solid var(--light-line); background: #F6F6F7; }
.eco-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 20px; background: #FFFFFF; border: 1px solid var(--light-line); }
.eco-visual { position: relative; aspect-ratio: 16 / 8.4; overflow: hidden; background: #0B0B0D; }
.eco-body { padding: 24px 28px 28px; }
.eco-body h3 { margin: 0 0 10px; font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--dark-ink); }
.eco-body p { margin: 0; font-size: 16px; line-height: 1.55; color: #71717A; }
/* 1. Formation : mosaïque des modules + module en avant */
.eco-mosaic { position: absolute; inset: -6%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; transform: rotate(-4deg); opacity: 0.32; filter: saturate(0.7); }
.eco-mosaic img { width: 100%; aspect-ratio: 1.86; object-fit: cover; border-radius: 8px; }
.eco-feature { position: absolute; left: 50%; top: 50%; width: 48%; transform: translate(-50%, -50%) rotate(-2deg); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px #FFFFFF, 0 24px 50px rgba(0, 0, 0, 0.6); animation: eco-float 6s ease-in-out infinite; }
.eco-feature img { display: block; width: 100%; aspect-ratio: 1.86; object-fit: cover; }
.eco-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; display: grid; place-items: center; color: #131316; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18); }
.eco-play svg { width: 14px; height: 14px; margin-left: 2px; }
.eco-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 62%; background: #F1641E; }
@keyframes eco-float { 0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); } 50% { transform: translate(-50%, -54%) rotate(-1deg); } }
/* 2. WhatsApp : résultats des membres + icône */
.eco-shots { position: absolute; inset: -8% -4%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transform: rotate(3deg); filter: brightness(0.42) saturate(0.8); }
.eco-shots img { width: 100%; aspect-ratio: 1.88; object-fit: cover; border-radius: 10px; }
.eco-wa { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: #25D366; box-shadow: 0 0 0 10px rgba(37, 211, 102, 0.18), 0 18px 40px rgba(0, 0, 0, 0.5); }
.eco-wa svg { width: 36px; height: 36px; }
.eco-tag { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #FFFFFF; background: rgba(12, 12, 14, 0.75); border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.eco-tag-orange { color: #FFFFFF; background: #F1641E; border-color: #F1641E; }
/* 3. Unlens.io : logo blanc sur halo orange */
.eco-v-unlens { background: radial-gradient(60% 75% at 50% 55%, rgba(241, 100, 30, 0.45), rgba(241, 100, 30, 0) 70%), radial-gradient(40% 50% at 30% 30%, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0) 70%), #0B0B0D; }
.eco-unlens { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)); }
.eco-spark { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: #FFD3AE; box-shadow: 0 0 12px 4px rgba(251, 171, 110, 0.6); animation: eco-twinkle 3.2s var(--d) ease-in-out infinite; }
@keyframes eco-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.2); } }
/* Aperçu de l'espace membre */
.eco-app { display: grid; grid-template-columns: 230px minmax(0, 1fr); margin-top: 16px; overflow: hidden; border-radius: 24px; background: #0C0C0E; border: 1px solid #1F1F23; box-shadow: 0 40px 90px rgba(19, 19, 22, 0.22); color: #E4E4E7; font-size: 13px; }
.eco-side { display: flex; flex-direction: column; gap: 14px; padding: 20px 14px; border-right: 1px solid #1C1C20; background: linear-gradient(180deg, #111114, #0C0C0E); }
.eco-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 6px; font-weight: 600; color: #FFFFFF; }
.eco-brand .acc-logo { width: 28px; height: 28px; border-radius: 8px; }
.eco-side-k { padding: 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5C5C66; }
.eco-side nav { display: grid; gap: 2px; margin-top: -6px; }
.eco-side nav span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: #A1A1AA; }
.eco-side nav span.on { color: #FFFFFF; background: #1C1C21; box-shadow: inset 2px 0 0 #F1641E; }
.eco-side nav svg { width: 16px; height: 16px; flex: none; }
.eco-side nav em { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 10.5px; color: #D4D4D8; background: #222227; }
.eco-side-wa { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; color: #131316; background: #FFFFFF; }
.eco-side-wa svg { width: 16px; height: 16px; flex: none; color: #25D366; }
.eco-side-wa b { font-weight: 600; }
.eco-side-wa i { margin-left: auto; font-style: normal; color: #8A8A93; }
.eco-me { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; border-radius: 12px; border: 1px solid #1F1F23; background: #121215; }
.eco-me-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #FFFFFF; background: linear-gradient(135deg, #F1641E, #FBBF24); }
.eco-me > span:last-child { display: grid; line-height: 1.25; }
.eco-me b { font-weight: 600; color: #FFFFFF; }
.eco-me small { font-size: 11px; color: #8A8A93; }
.eco-main { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px 20px 22px; }
.eco-top { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #1C1C20; font-size: 12px; color: #8A8A93; }
.eco-crumb i { font-style: normal; margin: 0 6px; }
.eco-crumb b { font-weight: 500; color: #FFFFFF; }
.eco-search { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 7px 12px; min-width: 210px; border-radius: 999px; border: 1px solid #222227; background: #121215; color: #6B6B75; }
.eco-search svg, .eco-bell svg { width: 15px; height: 15px; }
.eco-bell { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #222227; }
.eco-bell i { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #F1641E; box-shadow: 0 0 0 2px #0C0C0E; }
.eco-call { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0) 40%), #131316; border: 1px solid #1F1F23; }
.eco-call-av { flex: none; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px #0C0C0E, 0 0 0 3.5px #F1641E; }
.eco-call > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.eco-call-k { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #FFFFFF; }
.eco-call-k em { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #4ADE80; background: rgba(74, 222, 128, 0.12); }
.eco-call-k em svg { width: 10px; height: 10px; }
.eco-call > div > span:nth-child(2) { color: #8A8A93; }
.eco-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.eco-chips i { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; color: #D4D4D8; background: #1F1F24; }
.eco-chips svg { width: 12px; height: 12px; color: #8A8A93; }
.eco-call-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-weight: 600; color: #FFFFFF; background: #22C55E; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3); white-space: nowrap; }
.eco-call-btn svg { width: 15px; height: 15px; }
.eco-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.eco-tile { display: grid; align-content: start; gap: 8px; padding: 14px; border-radius: 14px; background: #131316; border: 1px solid #1F1F23; }
.eco-tile-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: #8A8A93; }
.eco-tile > b { font-size: 14px; font-weight: 600; color: #FFFFFF; }
.eco-tile > small { font-size: 12px; color: #8A8A93; }
.eco-online { display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0; font-weight: 500; color: #4ADE80; }
.eco-online::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; }
.eco-coach { display: flex; align-items: center; gap: 10px; }
.eco-coach .acc-logo { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.eco-coach > span:last-child { display: grid; line-height: 1.3; }
.eco-coach b { font-weight: 600; color: #FFFFFF; }
.eco-coach small { font-size: 11.5px; color: #8A8A93; }
.eco-tile-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 2px; padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.eco-wa-btn { color: #4ADE80; border: 1px solid rgba(37, 211, 102, 0.4); background: rgba(37, 211, 102, 0.08); }
.eco-wa-btn svg { width: 14px; height: 14px; }
.eco-live { padding: 2px 7px; border-radius: 5px; letter-spacing: 0.06em; font-size: 10px; color: #FFFFFF; background: #EF4444; }
.eco-faces { display: flex; align-items: center; margin-top: 2px; }
.eco-faces i { width: 24px; height: 24px; margin-left: -7px; border-radius: 50%; background: #2A2A30 center / cover no-repeat; box-shadow: 0 0 0 2px #131316; }
.eco-faces i:first-child { margin-left: 0; }
.eco-faces em { margin-left: 8px; font-style: normal; font-size: 11.5px; color: #8A8A93; }
.eco-prog-in { display: flex; align-items: center; gap: 12px; }
.eco-ring { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#F1641E calc(var(--p) * 1%), #26262B 0); }
.eco-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #131316; }
.eco-ring b { position: relative; font-family: var(--display); font-size: 18px; font-weight: 600; color: #FFFFFF; }
.eco-ring small { font-size: 11px; color: #8A8A93; }
.eco-prog ul { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 12px; color: #6B6B75; }
.eco-prog li { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.eco-prog li svg { flex: none; width: 11px; height: 11px; }
.eco-prog li.done { color: #A1A1AA; }
.eco-prog li.done svg { color: #4ADE80; }
.eco-prog li.now { color: #FFFFFF; font-weight: 600; }
.eco-prog li.now svg { color: #F1641E; width: 9px; height: 9px; }
.eco-prog li:not(.done):not(.now)::before { content: ""; flex: none; width: 9px; height: 9px; margin-right: 1px; border-radius: 50%; border: 1.5px solid #3A3A42; }
#club .club-cta { margin-top: clamp(32px, 4vw, 44px); }
@media (max-width: 900px) {
  .eco-grid { grid-template-columns: 1fr; }
  .eco-app { grid-template-columns: 1fr; }
  .eco-side { display: none; }
  .eco-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .eco-visual { aspect-ratio: 16 / 10; }
  .eco-search { display: none; }
  .eco-call { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .eco-call-btn { grid-column: 1 / -1; justify-content: center; }
  .eco-body { padding: 20px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) { .eco-feature, .eco-spark { animation: none; } }

/* Carte « Ton coach en message privé » */
.acc-dm .acc-chat-top { flex-wrap: wrap; row-gap: 6px; }
.acc-dm-av { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; }
.acc-dm-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 2px #FFFFFF; }
.acc-dm-badge { margin-left: auto; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; color: #C2490E; background: rgba(241, 100, 30, 0.1); }
.acc-dm .acc-msgs { padding-top: 12px; }
/* Sélecteur des modules dans la carte Formation (section Inclus) */
.eco-v-formation .eco-mosaic-wrap { position: absolute; inset: 0; overflow: hidden; }
.eco-v-formation .eco-mosaic { opacity: 0.16; }
.eco-v-formation .vid-card { left: 6%; right: 6%; transform: translateY(-50%); }
.eco-v-formation .vid-player { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 18px 40px rgba(0, 0, 0, 0.55); }

/* Carte « Ton coach sur WhatsApp » : fenêtre de discussion fidèle à WhatsApp */
.wa-win { position: absolute; left: 50%; top: 16px; width: min(88%, 420px); transform: translateX(-50%); overflow: hidden; border-radius: 18px; background: #EFEAE2; box-shadow: 0 18px 40px rgba(19, 19, 22, 0.14), 0 0 0 1px rgba(19, 19, 22, 0.06); }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #FFFFFF; background: #131316; }
.wa-av { flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.wa-av-photo { background-color: #2A2A2E; background-size: cover; background-position: center 30%; }
.wa-who { display: grid; min-width: 0; line-height: 1.2; }
.wa-who strong { font-size: 13px; font-weight: 600; }
.wa-who span { font-size: 11px; opacity: 0.85; }
.wa-icons { display: flex; gap: 16px; margin-left: auto; }
.wa-icons svg { width: 17px; height: 17px; }
.wa-body { display: grid; gap: 6px; padding: 10px 10px 9px; background-color: #EFEAE2; background-image: radial-gradient(rgba(84, 101, 111, 0.09) 1px, transparent 1.5px); background-size: 14px 14px; }
.wa-b { position: relative; max-width: 84%; padding: 6px 8px 5px; border-radius: 8px; font-size: 11.5px; line-height: 1.35; color: #111B21; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.wa-out { justify-self: end; background: #D9FDD3; border-top-right-radius: 2px; }
.wa-in { justify-self: start; background: #FFFFFF; border-top-left-radius: 2px; }
.wa-b time { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 5px 0 -3px 10px; font-size: 9.5px; color: #667781; }
.wa-ticks { width: 15px; height: 10px; color: #53BDEB; }
.wa-voice { display: flex; align-items: center; gap: 6px; min-width: 210px; max-width: 100%; }
.wa-voice time { float: none; margin: 0 0 0 auto; align-self: flex-end; }
.wa-play { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: #54656F; }
.wa-play svg { width: 13px; height: 13px; }
.wa-wave { position: relative; flex: 1; display: flex; align-items: center; gap: 2px; height: 22px; }
.wa-wave i { flex: 1; min-width: 1px; max-width: 3px; border-radius: 2px; background: #B4BEC4; }
.wa-dot { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #00A884; }
.wa-wave i.on { background: #667781; }
.wa-ic-pause, .wa-voice.is-playing .wa-ic-play { display: none; }
.wa-voice.is-playing .wa-ic-pause { display: block; }
.wa-speed { flex: none; padding: 2px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 600; line-height: 1.3; color: #54656F; background: rgba(84, 101, 111, 0.14); }
.wa-len { font-size: 10.5px; color: #667781; font-variant-numeric: tabular-nums; }
.wa-input { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: #F0F2F5; }
.wa-field { flex: 1; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; color: #8696A0; background: #FFFFFF; }
.wa-mic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: #131316; }
.wa-mic svg { width: 15px; height: 15px; }
.acc-wa-dm .wa-chip { bottom: 16px; }

/* Les 4 cartes « Tu n'es jamais seul » : toutes les fenêtres sur la même grille (même haut, même largeur, même bas),
   et la pastille au même endroit en bas de chaque carte */
.acc-visual { height: 300px; }
.acc-calls .cl-call, .wa-win, .acc-chat-card, .lv-win { top: 16px; left: 50%; right: auto; width: min(88%, 440px); transform: translateX(-50%); }
.wa-win, .acc-chat-card, .lv-win { bottom: 68px; display: flex; flex-direction: column; }
.wa-body { flex: 1; min-height: 0; align-content: start; overflow: hidden; }
.acc-chat-card .acc-msgs { flex: 1; min-height: 0; overflow: hidden; }
.lv-stage { flex: 1; height: auto; min-height: 0; }
.acc-chat .acc-chip, .acc-calls .acc-chip { bottom: 16px; }
@media (max-width: 520px) {
  .acc-calls .cl-call, .wa-win, .acc-chat-card, .lv-win { width: 90%; }
  /* Sur mobile, les messages du groupe passent sur plus de lignes : la carte grandit un peu pour les montrer en entier */
  .acc-chat.acc-visual { height: 324px; }
}

/* Carte Unlens.io : un exemple à la fois, expliqué, qu'on fait défiler à la main */
.eco-v-unlens { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px; }
.ul-img { position: relative; height: 100%; max-height: 100%; min-height: 0; overflow: hidden; border-radius: 14px; background: #000000; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); touch-action: pan-y; cursor: grab; }
.ul-s { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; }
.ul-s.is-on { opacity: 1; z-index: 1; }
.ul-s img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ul-ba { cursor: ew-resize; touch-action: none; }
.ul-after { clip-path: inset(0 0 0 var(--pos)); }
.ul-bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); }
.ul-bar i { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; color: #131316; background: #FFFFFF; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.ul-bar svg { width: 15px; height: 15px; }
.ul-lab { position: absolute; top: 10px; padding: 4px 9px; border-radius: 7px; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #131316; background: rgba(255, 255, 255, 0.92); }
.ul-lab-l { left: 10px; }
.ul-lab-r { right: 10px; }
.ul-img .eco-tag { left: 10px; top: auto; bottom: 10px; z-index: 2; font-size: 11.5px; padding: 5px 10px; }
.ul-side { display: grid; align-content: center; gap: 12px; min-width: 0; }
.ul-logo { height: 16px; width: auto; justify-self: start; }
.ul-caps { display: grid; }
.ul-cap { grid-area: 1 / 1; display: grid; gap: 5px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.ul-cap.is-on { opacity: 1; transform: none; }
.ul-cap b { font-family: var(--display); font-size: 16px; font-weight: 500; color: #FFFFFF; }
.ul-cap span { font-size: 12.5px; line-height: 1.45; color: #A1A1AA; }
.ul-ctrl { display: flex; align-items: center; gap: 6px; }
.ul-nav { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: #131316; background: rgba(255, 255, 255, 0.92); border: 0; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ul-nav:hover { color: #FFFFFF; background: #F1641E; }
.ul-nav:focus-visible, .ul-dots button:focus-visible { outline: 2px solid #F5833F; outline-offset: 2px; }
.ul-nav svg { width: 13px; height: 13px; }
.ul-dots { display: flex; gap: 5px; margin-left: 6px; }
.ul-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: width 0.25s, background 0.25s; }
.ul-dots button.is-on { width: 18px; background: #F1641E; }
@media (max-width: 560px) {
  .eco-v-unlens { aspect-ratio: auto; grid-template-columns: 1fr; }
  .ul-img { height: 190px; }
}
@media (prefers-reduced-motion: reduce) { .ul-img img, .ul-cap { transition: none; } }

/* Carte Outils : un logo par outil, maquettes EverBee et eRank (exemples, sans chiffres inventés) */
.ul-cap .ul-logo { margin-bottom: 7px; }
.ul-logo-mark { height: 26px; margin-block: -4px 3px; filter: brightness(0) invert(1); }
.ul-mock { display: grid; align-content: center; gap: 9px; padding: 16px; color: #FFFFFF; background: radial-gradient(80% 70% at 80% 0%, rgba(241, 100, 30, 0.18), rgba(241, 100, 30, 0) 70%), #111114; }
.ulm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ulm-search { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 10px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); }
.ulm-head em { flex: none; font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #71717A; }
.ulm-th { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: #71717A; }
.ulm-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 56px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); }
.ulm-row i { width: 22px; height: 28px; border-radius: 3px; background: var(--c); box-shadow: inset 0 0 0 2.5px #FFFFFF; }
.ulm-row b { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ulm-bar { display: block; height: 6px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.ulm-bar s { display: block; width: var(--w); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F59E0B, #F1641E); }
.ulm-mid s { background: linear-gradient(90deg, #A1A1AA, #D4D4D8); }
.ulm-kv { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 11px; color: #A1A1AA; }
.ulm-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ulm-tags li { padding: 4px 8px; border-radius: 999px; font-size: 10.5px; white-space: nowrap; background: rgba(241, 100, 30, 0.12); border: 1px solid rgba(241, 100, 30, 0.35); }
@media (max-width: 760px) { .ul-mock { gap: 7px; padding: 12px; } .ulm-row { padding: 4px 8px; } .ulm-row i { height: 24px; } }
@media (max-width: 360px) { .ulm-tags li:nth-child(n + 4) { display: none; } }

/* Carte du globe : l'accès aux fournisseurs partenaires, réservés au Club, mis en avant */
.sp-private { width: min(92%, 400px); padding: 12px 14px; border-radius: 14px; background: rgba(241, 100, 30, 0.08); border: 1px solid rgba(241, 100, 30, 0.5); box-shadow: 0 0 34px rgba(241, 100, 30, 0.2); }
.sp-head { display: flex; align-items: center; gap: 10px; }
.sp-lock { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: #F1641E; }
.sp-lock svg { width: 14px; height: 14px; }
.sp-title { display: grid; min-width: 0; line-height: 1.25; }
.sp-title b { font-size: 13px; font-weight: 600; color: #FFFFFF; }
.sp-title small { font-size: 11px; color: #A1A1AA; }
.sp-head em { margin-left: auto; flex: none; padding: 4px 9px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; white-space: nowrap; color: #FFFFFF; background: #F1641E; }
@media (max-width: 560px) {
  .sp-head { flex-wrap: wrap; }
}

/* Espace membre : avatar photo, appels Google Meet, replays Fathom */
.eco-me-av { overflow: hidden; box-shadow: 0 0 0 2px #0C0C0E, 0 0 0 3.5px rgba(241, 100, 30, 0.7); }
.eco-me-av img { width: 100%; height: 100%; object-fit: cover; }
svg.meet { width: 15px; height: 15px; }
.eco-chips svg.meet { width: 13px; height: 13px; }
.eco-call { background: linear-gradient(90deg, rgba(38, 132, 252, 0.09), rgba(38, 132, 252, 0) 40%), #131316; }
.eco-call-btn { color: #131316; background: #FFFFFF; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
.eco-call-btn svg.meet { width: 17px; height: 17px; }
.cl-join { background: #FFFFFF; box-shadow: 0 6px 14px rgba(19, 19, 22, 0.14), 0 0 0 1px var(--light-line); }
.cl-join::before { border-color: rgba(38, 132, 252, 0.7); }
.cl-join svg.meet { width: 20px; height: 20px; }
.eco-rec { display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(0, 190, 255, 0.08), rgba(0, 190, 255, 0) 45%), #131316; border: 1px solid #1F1F23; }
.eco-rec-logo { flex: none; height: 14px; width: auto; }
.eco-rec-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.eco-rec-txt b { font-size: 13.5px; font-weight: 600; color: #FFFFFF; }
.eco-rec-txt span { font-size: 12px; color: #8A8A93; }
.eco-rec-item { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; background: #1B1B1F; border: 1px solid #26262B; }
.eco-rec-thumb { flex: none; width: 42px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #FFFFFF; background: linear-gradient(135deg, #00BEFF, #007299); }
.eco-rec-thumb svg { width: 11px; height: 11px; }
.eco-rec-item > span:nth-child(2) { display: grid; line-height: 1.25; }
.eco-rec-item b { font-size: 12.5px; font-weight: 600; color: #FFFFFF; }
.eco-rec-item small { font-size: 11px; color: #8A8A93; }
.eco-rec-item em { padding: 3px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #00BEFF; background: rgba(0, 190, 255, 0.12); white-space: nowrap; }
@media (max-width: 900px) { .eco-rec { flex-wrap: wrap; } .eco-rec-item { width: 100%; } .eco-rec-item em { margin-left: auto; } }

/* Espace membre : to-do list semaine par semaine */
.eco-todo { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: 14px; background: #131316; border: 1px solid #1F1F23; }
.eco-todo .eco-tile-k span { font-weight: 500; letter-spacing: 0; color: #6B6B75; }
.eco-weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.eco-wk { display: grid; justify-items: center; gap: 6px; padding: 6px 0 4px; border: 0; border-radius: 8px; background: transparent; color: #6B6B75; font: 600 11px/1 var(--sys); cursor: pointer; transition: background 0.2s, color 0.2s; }
.eco-wk i { width: 100%; height: 4px; border-radius: 4px; background: #26262B; }
.eco-wk.is-done { color: #A1A1AA; }
.eco-wk.is-done i { background: #F1641E; opacity: 0.55; }
.eco-wk.is-now { color: #F1641E; }
.eco-wk.is-now i { background: linear-gradient(90deg, #F1641E 50%, #3A2A22 50%); box-shadow: 0 0 10px rgba(241, 100, 30, 0.45); }
.eco-wk:hover { background: #1B1B1F; color: #FFFFFF; }
.eco-wk[aria-pressed="true"] { background: #1F1F23; color: #FFFFFF; }
.eco-wk:focus-visible { outline: 2px solid #F1641E; outline-offset: 1px; }
.eco-todo-w { display: grid; gap: 8px; }
.eco-todo-w[hidden] { display: none; }
.eco-todo-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eco-todo-t b { font-size: 14px; font-weight: 600; color: #FFFFFF; }
.eco-todo-t em { flex: none; padding: 3px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #8A8A93; background: #1F1F23; }
.eco-todo-t em.is-done { color: #4ADE80; background: rgba(74, 222, 128, 0.12); }
.eco-todo-t em.is-now { color: #FB8A4E; background: rgba(241, 100, 30, 0.14); }
.eco-todo ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.eco-todo li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 10px; background: #1B1B1F; border: 1px solid #26262B; font-size: 12.5px; color: #D4D4D8; }
.eco-task { flex: 1; min-width: 0; line-height: 1.3; }
.eco-chk { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #3A3A42; color: transparent; }
.eco-chk svg { width: 10px; height: 10px; }
.eco-todo li.done { color: #8A8A93; }
.eco-todo li.done .eco-task { text-decoration: line-through; text-decoration-color: #52525B; }
.eco-todo li.done .eco-chk { border-color: #F1641E; background: #F1641E; color: #FFFFFF; }
.eco-todo li svg.meet { flex: none; width: 14px; height: 14px; }
.eco-todo li small { flex: none; font-size: 11px; font-weight: 600; color: #FB8A4E; }
@media (max-width: 900px) { .eco-todo ul { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .eco-weeks { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 6px; } }

/* Bannière de l'espace membre : miniature du module 7 entière, à droite */
@media (max-width: 640px) {
}

/* Harmonisation : une seule échelle sur toute la page, du mobile au grand écran.
   Section 64 → 120 · surtitre → titre 20 · titre → texte 20 · texte → bouton 32 · en-tête → contenu 40 → 56
   · blocs d'une même section 24 · contenu → bouton 32 → 40 · titre de carte → texte 10 · titre moyen → texte 16 */
:root { --sp-sec: clamp(64px, 10vw, 120px); --sp-t: 20px; --sp-btn: 32px; --sp-head: clamp(40px, 5vw, 56px); --sp-block: 24px; --sp-cta: clamp(32px, 4vw, 40px); }

/* Titres et textes d'en-tête : même taille, même graisse partout */
.acc-head h2, .testi-head h2, .rm-intro h2, .eco-head .eco-title, .plans-head h2, .faq-grid .head h2, .final h2 { font-family: var(--display); font-size: clamp(34px, 4.8vw, 60px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.acc-head-row p, .testi-head-row p, .rm-intro p, .eco-head p, .faq-grid .head p, .final p { font-size: 17px; line-height: 1.55; }

/* Surtitre → titre → texte */
.acc-head, .testi-head, .rm-intro, .eco-head, .faq-grid .head { gap: var(--sp-t); }
.rm-tabs { margin-top: 12px; }
.final-card { gap: var(--sp-t); }
/* Carte finale plus compacte : titre un peu plus petit que ceux des sections */
.final h2 { font-size: clamp(30px, 4vw, 46px); }
.final .btn { margin-top: 12px; }

/* En-tête → contenu, blocs d'une même section, contenu → bouton */
.acc-head, .testi-head, .rm-intro, .plans-head { margin-bottom: var(--sp-head); }
.eco-grid { margin-top: var(--sp-head); }
.globe-block, .eco-app { margin-top: var(--sp-block); }
.disclaimer { margin-top: var(--sp-block); }
#club .club-cta { margin-top: var(--sp-cta); }

/* Grilles de cartes et titres de cartes */
.acc-cards { gap: 10px; padding: 10px; }
.plans { gap: 16px; }
.acc-card h3, .eco-body h3, .rm-panel-text h3 { font-size: 20px; }
.rm-panel-text h3 { margin-bottom: 10px; }

/* Haut de page : barre du haut → badge 40 → 56 (comme 8lab), badge → titre → texte 20, texte → vidéo 40 → 56, vidéo → bouton 32 → 40 */
.hero .wrap.hero-inner { padding-top: calc(74px + var(--sp-head)); }
.hero .wrap.hero-inner { gap: 0; }
.hero-badge { margin-bottom: var(--sp-t); }
.hero h1 { margin: 0 0 var(--sp-t); }
.hero .lead { margin: 0; }
.hero .lead + .vsl { margin-top: var(--sp-head); }
.hero .proof-cta { margin-top: var(--sp-cta); }

/* Espace membre : en-tête « Bienvenue Léa », puis la miniature HD du module 7 en grand */
@media (max-width: 560px) {
}

/* Espace membre : bloc Claude × API Etsy (même gabarit que Fathom) */
.eco-rec > .eco-rec-logo, .eco-ai-logo { flex: none; width: 96px; }
.eco-rec > .eco-rec-logo { object-fit: contain; object-position: left center; }
.eco-ai { background: linear-gradient(90deg, rgba(217, 119, 87, 0.1), rgba(217, 119, 87, 0) 45%), #131316; }
.eco-ai-logo { display: inline-flex; align-items: center; gap: 7px; }
.eco-ai-logo img { width: 18px; height: 18px; }
.eco-ai-logo b { font-family: ui-serif, Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: #FFFFFF; }
.eco-etsy-thumb { background: #F1641E; }
.eco-etsy-thumb img { width: 14px; height: 14px; }
.eco-rec-item em.eco-ok { color: #4ADE80; background: rgba(74, 222, 128, 0.12); }

/* Barre latérale : icônes Claude et lien Skool */
.eco-side nav img { width: 16px; height: 16px; flex: none; }
.eco-side-wa { margin-top: 0; }
.eco-side-sk img { height: 13px; width: auto; flex: none; }
.eco-side-sk b { font-size: 12.5px; }

/* Écosystème : carte large « Communauté Skool » */
.eco-card-wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
.eco-card-wide .eco-body { align-self: center; padding: 32px 44px; }
.eco-sk-stat { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 14px; color: var(--dark-ink); }
.eco-sk-stat b { font-weight: 600; }
.eco-v-skool { display: grid; place-items: center; background: radial-gradient(70% 80% at 50% 100%, rgba(107, 183, 238, 0.24), rgba(107, 183, 238, 0) 70%), radial-gradient(40% 50% at 15% 10%, rgba(224, 180, 103, 0.14), rgba(224, 180, 103, 0) 70%), #0B0B0D; }
.sk-win { width: 86%; max-width: 470px; overflow: hidden; border-radius: 14px; background: #FFFFFF; color: #131316; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); font-size: 12px; }
.sk-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; }
.sk-logo { flex: none; height: 15px; width: auto; }
.sk-sep { flex: none; width: 1px; height: 14px; background: #E4E4E7; }
.sk-top b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 600; }
.sk-members { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11.5px; font-weight: 600; }
.sk-top .sk-members { margin-left: auto; }
.sk-members i { flex: none; width: 20px; height: 20px; margin-left: -7px; border-radius: 50%; background: #E4E4E7 center / cover; box-shadow: 0 0 0 2px #FFFFFF; }
.sk-members i:first-child { margin-left: 0; }
.eco-sk-stat .sk-members i { width: 28px; height: 28px; margin-left: -9px; }
.eco-sk-stat .sk-members i:first-child { margin-left: 0; }
.sk-tabs { display: flex; gap: 16px; padding: 0 14px; overflow: hidden; white-space: nowrap; border-bottom: 1px solid #EDEDF0; }
.sk-tabs span { padding: 6px 0 8px; font-size: 11.5px; color: #8A8A93; }
.sk-tabs span.on { color: #131316; font-weight: 600; box-shadow: inset 0 -2px 0 #131316; }
.sk-posts { display: grid; gap: 8px; padding: 10px 12px 12px; background: #F7F7F8; }
.sk-post { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #FFFFFF; border: 1px solid #EDEDF0; }
.sk-post > i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #E4E4E7 center / cover; }
.sk-post > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sk-post small { font-size: 10.5px; color: #8A8A93; }
.sk-post b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
.sk-post em { flex: none; color: #A1A1AA; }
.sk-post em svg { display: block; width: 14px; height: 14px; }
@media (max-width: 900px) {
  .eco-card-wide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .eco-card-wide .eco-body { padding: 24px 28px 28px; }
}
@media (max-width: 560px) {
  .eco-card-wide .eco-body { padding: 20px 22px 24px; }
  .sk-win { width: 90%; font-size: 11px; }
  .sk-top { padding: 9px 10px 7px; gap: 8px; }
  .sk-top b, .sk-sep { display: none; }
  .sk-tabs { gap: 12px; padding: 0 10px; }
  .sk-tabs span { padding: 4px 0 6px; font-size: 10.5px; }
  .sk-posts { gap: 6px; padding: 7px 8px 8px; }
  .sk-post { padding: 6px 8px; gap: 8px; }
  .sk-post > i { width: 22px; height: 22px; }
  .sk-post + .sk-post { display: none; }
}

/* FAQ : groupes, questions en titres, en-tête qui reste visible pendant la lecture */
.faq-group { margin: 14px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-muted); }
.faq-group:first-child { margin-top: 0; }
.faq summary h3.faq-q { margin: 0; font-family: var(--sys); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--dark-ink); }
.faq details p { font-size: 15px; line-height: 1.6; }
@media (min-width: 861px) { .faq-grid .head { position: sticky; top: 104px; } }

/* Écosystème : communauté Skool */
.eco-v-commu { display: block; }
.eco-v-commu .sk-win { position: absolute; left: 7%; top: 10%; width: 76%; max-width: none; }

/* Écosystème : carte des outils */
.eco-panes { display: grid; }

/* Écosystème : événements physiques */
.eco-v-event { display: grid; place-items: center; background: radial-gradient(55% 75% at 50% 55%, rgba(241, 100, 30, 0.32), rgba(241, 100, 30, 0) 70%), #0B0B0D; }
/* Carte Événements : pass façon Apple Wallet (fond noir, date en grand, accès réservé, QR code) */
.ev-pass { width: min(372px, calc(100vw - 96px)); padding: 14px 18px 15px; border-radius: 20px; color: #FFFFFF; background: linear-gradient(160deg, #232327, #121214 60%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.ev-pass-top { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ev-pass-logo { flex: none; width: 27px; height: 27px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ev-pass-top b { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.ev-pass-top span { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #A1A1AA; }
.ev-pass-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 10px; }
.ev-pass-info { display: grid; gap: 2px; min-width: 0; }
.ev-pass small { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8A93; }
.ev-pass-info > b { font-family: var(--display); font-size: 35px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; }
.ev-pass-field { display: grid; gap: 2px; margin-top: 6px; }
.ev-pass-field em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 14px; font-weight: 500; white-space: nowrap; }
.ev-pass-field em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F1641E; }
/* Vrai QR code : il mène à l'offre Club Privé (entrepreneursclub.fr/club#club-prive, que vercel.json renvoie vers l'accueil) */
.ev-qr { flex: none; width: 92px; height: 92px; padding: 6px; border-radius: 10px; background: #FFFFFF; }
.ev-qr svg { display: block; width: 100%; height: 100%; }
@media (max-width: 560px) {
  .eco-v-commu .sk-win { left: 5%; top: 8%; width: 88%; }
  .ev-pass { padding: 12px 14px 14px; }
  .ev-pass-info > b { font-size: 28px; }
  .ev-qr { width: 70px; height: 70px; padding: 4px; }
}

/* Carte Communauté : fenêtre Skool sombre, comme le vrai Skool du Club */
.eco-v-commu .skd { position: absolute; left: 6%; top: 8%; width: 74%; }
.skd { overflow: hidden; border-radius: 12px; background: #1C1C1C; border: 1px solid #333333; color: #E6E6E6; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); font-size: 11px; }
.skd-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px 7px; }
.skd-logo { flex: none; width: 20px; height: 20px; border-radius: 6px; background-color: #000000; }
.skd-top b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: #FFFFFF; }
.skd-members { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 10.5px; font-weight: 600; color: #FFFFFF; }
.skd-members i { flex: none; width: 17px; height: 17px; margin-left: -6px; border-radius: 50%; background: #333333 center / cover; box-shadow: 0 0 0 1.5px #1C1C1C; }
.skd-members i:first-child { margin-left: 0; }
.skd-tabs { display: flex; gap: 13px; padding: 0 12px; overflow: hidden; white-space: nowrap; border-bottom: 1px solid #333333; }
.skd-tabs span { padding: 4px 0 6px; font-size: 10.5px; color: #9A9A9A; }
.skd-tabs span.on { color: #FFFFFF; font-weight: 600; box-shadow: inset 0 -2px 0 #FFFFFF; }
.skd-posts { display: grid; gap: 6px; padding: 8px; background: #141414; }
.skd-post { display: grid; gap: 4px; padding: 7px 10px; border-radius: 9px; background: #262626; border: 1px solid #333333; }
.skd-post.is-pin { border-color: rgba(234, 179, 8, 0.75); box-shadow: 0 0 12px rgba(234, 179, 8, 0.12); }
.skd-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 10px; color: #9A9A9A; }
.skd-meta > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.skd-meta em { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-weight: 600; color: #E6E6E6; white-space: nowrap; }
.skd-meta em svg { width: 10px; height: 10px; }
.skd-av { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 700; color: #FFFFFF; background: linear-gradient(135deg, #6BB7EE, #263397); }
.skd-av-coach { background: #333333 url(../media/club/bienvenue.jpg) -82px -9px / 135px auto no-repeat; }
.skd-post > b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 700; color: #FFFFFF; }
.skd-foot { margin-left: auto; flex: none; display: flex; gap: 10px; font-size: 10px; color: #9A9A9A; }
.skd-foot span { display: inline-flex; align-items: center; gap: 4px; }
.skd-foot svg { width: 11px; height: 11px; }
@media (max-width: 560px) {
  .eco-v-commu .skd { left: 5%; top: 7%; width: 90%; }
  .skd-top { padding: 7px 10px 5px; }
  .skd-tabs { gap: 11px; padding: 0 10px; }
  .skd-post + .skd-post { display: none; }
}

/* Skool : photo du coach dans les posts */
.skd-av-coach { background: #333333 url(../media/live/thomas.png) center / cover no-repeat; }

/* Skool : sur mobile, le nom de la communauté reste en entier */
@media (max-width: 560px) { .skd-members i { display: none; } }

/* Carte Événements : visages à la suite sous le pass */
.eco-v-event { display: grid; place-content: center; justify-items: center; gap: 12px; }
.ev-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; row-gap: 8px; padding-left: 10px; }
.ev-strip i { flex: none; width: 26px; height: 26px; margin-left: -10px; border-radius: 50%; background: #26262B center / cover; box-shadow: 0 0 0 2px #0B0B0D; }
.ev-strip em { margin-left: 12px; font-style: normal; font-size: 13px; font-weight: 600; color: #FFFFFF; white-space: nowrap; }
@media (max-width: 560px) {
  .eco-v-event { gap: 16px; }
  .ev-strip i { width: 22px; height: 22px; margin-left: -8px; }
  .ev-strip em { flex-basis: 100%; margin-left: 0; text-align: center; font-size: 12px; }
}

/* Fenêtre Skool : posts comme le vrai Skool ; centrée sur presque toute la largeur, elle file sous le bas du visuel */
.eco-v-commu .skd { left: 50%; top: 7%; width: 88%; transform: translateX(-50%); }
.skd-posts { gap: 8px; padding: 8px; }
.skp { display: grid; gap: 5px; padding: 9px 11px 10px; border-radius: 10px; background: #2B2B2B; border: 1px solid #3A3A3A; }
.skp.is-pin { border-color: rgba(212, 175, 55, 0.8); box-shadow: 0 0 14px rgba(212, 175, 55, 0.14); }
.skp-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.skp-av { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #3A3A3A center / cover; font-size: 11px; font-weight: 700; color: #FFFFFF; }
.skp-av-l { background: linear-gradient(135deg, #8FA3B8, #4B5D6E); }
.skp-av i { position: absolute; right: -4px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 8px; font-weight: 700; color: #FFFFFF; background: #3D5AFE; box-shadow: 0 0 0 1.5px #2B2B2B; }
.skp-who { min-width: 0; display: grid; line-height: 1.25; }
.skp-who b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; font-weight: 500; color: #FFFFFF; }
.skp-who small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9.5px; color: #9A9A9A; }
.skp-who em { font-style: normal; font-weight: 600; color: #B5B5B5; }
.skp-pin { margin-left: auto; align-self: start; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 10px; font-weight: 600; color: #FFFFFF; }
.skp-pin svg { width: 10px; height: 10px; }
.skp-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; font-size: 12px; font-weight: 700; letter-spacing: -0.005em; color: #FFFFFF; }
.skp-text { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 10.5px; line-height: 1.4; color: #D4D4D4; }
.skp-foot { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 10px; color: #9A9A9A; }
.skp-foot > span:not(.skp-faces) { display: inline-flex; align-items: center; gap: 4px; }
.skp-foot svg { width: 12px; height: 12px; }
.skp-faces { display: flex; padding-left: 4px; }
.skp-faces i { flex: none; width: 16px; height: 16px; margin-left: -4px; border-radius: 50%; background: #3A3A3A center / cover; box-shadow: 0 0 0 1.5px #2B2B2B; }
.skp-foot small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9.5px; }
@media (max-width: 560px) {
  .eco-v-commu { aspect-ratio: 16 / 11.5; }
  .eco-v-commu .skd { top: 7%; }
  .skp-text, .skp-foot small { display: none; }
}

/* Fenêtre Skool : miniature à droite du post (comme sur Skool), j'aime déjà donné */
.skp-body { display: flex; align-items: start; gap: 10px; min-width: 0; }
.skp-body > div { flex: 1; min-width: 0; display: grid; gap: 5px; }
.skp-thumb { flex: none; width: 64px; display: grid; gap: 1px; padding: 5px 5px 3px; border-radius: 7px; background: #F7F7F5; border: 1px solid #DADADA; color: #111111; }
.skp-thumb small { font-size: 5.5px; font-weight: 600; color: #6B6B6B; }
.skp-thumb b { font-family: Georgia, "Times New Roman", serif; font-size: 8.5px; font-weight: 400; }
.skp-thumb svg { width: 100%; height: auto; margin-top: 3px; }
.skp-foot .is-liked { color: #E8B500; }
@media (max-width: 560px) { .skp-thumb { display: none; } }

/* Preuve sociale : 5 étoiles orange au-dessus de « +300 membres » */
.proof-text .stars-orange, .proof-cta .proof-text .stars-orange, .plans-head .proof-text .stars-orange { display: flex; gap: 2px; color: #F1641E; }
.stars-orange svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 640px) { .stars-orange svg { width: 15px; height: 15px; } }

/* Étoiles en carrés, version orange */
.stars-square.stars-orange-sq i { background: #F1641E; }
.plans-head .proof-text .stars-orange-sq, .proof-cta .proof-text .stars-orange-sq { display: flex; gap: 2px; }

/* Passe responsive : téléphone → grand écran */
@media (max-width: 1000px) {
  .stat { gap: 12px; }
}
/* Tablette portrait : 2 colonnes pour l'accompagnement, cartes de l'écosystème en ligne (visuel à gauche, texte à droite) */
@media (min-width: 700px) and (max-width: 900px) {
  .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-card { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: none; }
  .eco-card > .eco-visual, .eco-card > .eco-panes, .eco-panes > .eco-visual { aspect-ratio: auto; height: 100%; min-height: 250px; }
  .eco-card > .eco-body { align-self: center; padding: 24px 28px; }
}
/* Téléphone */
@media (max-width: 560px) {
  .eco-rec > .eco-rec-logo, .eco-ai-logo { width: auto; }
  .eco-rec-txt { flex: 1 1 100%; }
  .eco-call-k { flex-wrap: wrap; row-gap: 4px; }
}
/* Le bouton WhatsApp flottant ne cache plus la dernière ligne du pied de page */
@media (max-width: 900px) { footer { padding-bottom: 76px; } }

/* Section « Tes coachs » (façon 8lab : cartes portrait fixes) */
.coach-sec { position: relative; background: #000000; color: #FFFFFF; }
#coach + #roadmap { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.coach-head { display: grid; justify-items: start; gap: var(--sp-t); margin-bottom: var(--sp-head); }
.coach-head h2 { margin: 0; max-width: none; font-family: var(--display); font-size: clamp(34px, 4.8vw, 60px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; color: #FFFFFF; }
.coach-head p { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: #A1A1AA; }
.coach-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.coach-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 22px; background: #0B0B0D; border: 1px solid #1F1F23; }
.coach-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #131316; }
.coach-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.coach-photo-wait { display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 40%, rgba(241, 100, 30, 0.3), rgba(241, 100, 30, 0) 70%), #131316; }
.coach-photo-wait span { font-family: var(--display); font-size: 96px; font-weight: 500; color: rgba(255, 255, 255, 0.85); }
.coach-info { display: grid; align-content: start; gap: 4px; padding: 26px 26px 24px; }
.coach-info h3 { margin: 0; font-family: var(--sys); font-size: 19px; font-weight: 500; color: #FFFFFF; }
.coach-info > span { font-size: 16px; color: #8A8A93; }
.coach-stat { margin-top: 20px; padding: 14px 16px; border-top: 0; border-radius: 999px; border: 1px solid #2A2A2E; font-style: normal; font-size: 15px; font-weight: 500; text-align: center; color: #FFFFFF; position: relative; }
.coach-stat::before { content: ""; position: absolute; left: 0; right: 0; top: -21px; height: 1px; background: #1F1F23; }
.coach-card-cta { grid-template-rows: none; align-content: end; justify-items: start; gap: 16px; padding: 32px 28px; background: radial-gradient(90% 60% at 50% 0%, rgba(241, 100, 30, 0.35), rgba(241, 100, 30, 0) 70%), #0B0B0D; }
.coach-card-cta h3 { margin: 0; font-family: var(--display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: #FFFFFF; }
.coach-card-cta p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #A1A1AA; }
.coach-card-cta .pill-cta { width: 100%; justify-content: center; margin-top: 8px; white-space: nowrap; font-size: 15px; }
.coach-stat { white-space: nowrap; font-size: 14px; padding-inline: 12px; }
#coach { scroll-margin-top: 72px; }
@media (max-width: 1000px) {
  .coach-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-card-cta { grid-column: 1 / -1; align-content: center; }
}
@media (max-width: 560px) {
  .coach-cards { grid-template-columns: 1fr; }
  .coach-info { padding: 22px; }
  .coach-card-cta { padding: 28px 22px; }
}

/* Pied de page : liens légaux */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; width: 100%; }
.footer-legal a { color: var(--mist); text-decoration: none; }
.footer-legal a:hover { color: #FFFFFF; text-decoration: underline; }
.footer-cookies { padding: 0; border: 0; background: none; color: var(--mist); font: inherit; cursor: pointer; }
.footer-cookies:hover { color: #FFFFFF; text-decoration: underline; }

/* Haut de page : « dans le Club Privé » en petit sous le chiffre */
.proof-text .proof-sub { display: block; margin-top: 2px; font-family: var(--sys); font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--mist); }

/* Coachs v2 : cartes plus larges comme 8lab, bouton qui tient dans la carte */
.coach-sec .wrap { max-width: 1200px; }
/* Même largeur pour toutes les sections de contenu (les titres s'alignent d'une section à l'autre) */
#club .wrap, #faq .wrap, .final .wrap, footer .wrap { max-width: 1200px; }
.coach-card-cta .pill-cta { width: 100%; justify-content: center; white-space: normal; text-align: center; font-size: 15px; padding-inline: 18px; }
.coach-card-cta { padding: 32px 24px; }
@media (max-width: 1100px) {
  .coach-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach-card-cta { grid-column: 1 / -1; align-content: center; }
  .coach-card-cta .pill-cta { width: auto; }
}
@media (max-width: 560px) {
  .coach-cards { grid-template-columns: 1fr; }
  .coach-card-cta { padding: 28px 20px; }
  .coach-card-cta .pill-cta { width: 100%; font-size: 14.5px; padding-inline: 12px; gap: 8px; }
}

/* Coachs : cadrage des portraits */
.coach-photo img { object-position: 50% 22%; }
/* Jennifer : photo d'origine zoomée, tête (cheveux compris) au centre et yeux à la même hauteur que ceux de Thomas */
.coach-photo-zoom img { transform: scale(1.6); transform-origin: 35% 27%; }
/* Cartes coachs au survol : la photo zoome doucement vers le visage, la carte se soulève, contour et chiffre clé prennent une touche d'orange */
.coach-card { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.45s, box-shadow 0.45s; }
.coach-photo img { transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.coach-photo:not(.coach-photo-zoom) img { transform-origin: 50% 30%; }
.coach-stat { transition: border-color 0.45s, background 0.45s; }
@media (hover: hover) {
  .coach-card:hover { transform: translateY(-4px); border-color: rgba(241, 100, 30, 0.35); box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.9), 0 0 40px -12px rgba(241, 100, 30, 0.25); }
  .coach-card:hover .coach-photo img { transform: scale(1.06); }
  .coach-card:hover .coach-photo-zoom img { transform: scale(1.7); }
  .coach-card:hover .coach-stat { border-color: rgba(241, 100, 30, 0.55); background: linear-gradient(180deg, rgba(241, 100, 30, 0.18), rgba(241, 100, 30, 0.06)); }
}
@media (prefers-reduced-motion: reduce) {
  .coach-card, .coach-photo img { transition: none; }
  .coach-card:hover { transform: none; }
  .coach-card:hover .coach-photo:not(.coach-photo-zoom) img { transform: none; }
  .coach-card:hover .coach-photo-zoom img { transform: scale(1.6); }
}

/* Coachs : 2 cartes seulement, même largeur qu'avant, alignées à gauche */
/* Coachs : titre à gauche ; les deux cartes en pleine largeur, en format horizontal (photo à gauche, infos à droite) */
.coach-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
@media (min-width: 900px) {
  .coach-card { grid-template-rows: none; grid-template-columns: 46% minmax(0, 1fr); }
  .coach-card .coach-photo { aspect-ratio: auto; min-height: 380px; }
  .coach-card .coach-info { align-content: center; padding: 32px 30px; }
}
@media (max-width: 560px) { .coach-cards { grid-template-columns: 1fr; max-width: none; } }
/* Coachs : nom plus présent et chiffre clé mis en avant (grand chiffre orange, légende grise) */
.coach-info { gap: 6px; padding: 24px 26px 26px; }
.coach-info h3 { font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.coach-info > span { font-size: 15px; }
.coach-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 18px 0 0; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(241, 100, 30, 0.3); background: linear-gradient(180deg, rgba(241, 100, 30, 0.13), rgba(241, 100, 30, 0.04)); text-align: left; white-space: normal; }
.coach-stat::before { display: none; }
.coach-stat b { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: #FFB27F; white-space: nowrap; }
.coach-stat span { font-size: 14.5px; font-weight: 400; color: #A1A1AA; }

/* FAQ : lien dans une réponse */
.faq details p a { color: var(--dark-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241, 100, 30, 0.6); }
.faq details p a:hover { text-decoration-color: #F1641E; }

/* FAQ : réponse en liste */
.faq details p.faq-lead { margin-bottom: 6px; }
.faq details ul { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; line-height: 1.55; color: var(--dark-muted); }
.faq details ul li::marker { color: #F1641E; }
.faq details b { font-weight: 600; color: var(--dark-ink); }

/* Haut de page : texte d'accroche sur 2 lignes sur ordinateur */
@media (min-width: 901px) {
  .hero .lead { max-width: none; text-wrap: wrap; }
  .hero .lead .lead-l1 { white-space: nowrap; }
}

/* Billet d'événement : badge « Édition n°1 » */
@media (max-width: 560px) {
  .eco-v-event { aspect-ratio: auto; padding: 26px 0 22px; }
}

/* En-tête au-dessus de la maquette de l'espace membre */
.eco-app-head { display: grid; justify-items: start; gap: var(--sp-t); margin-top: var(--sp-head); }
.eco-app-head h3 { margin: 0; font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--dark-ink); }
.eco-app-head p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--dark-muted); }
.eco-app-head + .eco-app { margin-top: var(--sp-block); }

/* FAQ plus agréable à lire */
.faq { gap: 10px; }
.faq details { padding: 0 24px; transition: border-color 0.2s, box-shadow 0.2s; }
.faq details:hover { border-color: rgba(19, 19, 22, 0.16); }
.faq details[open] { border-color: rgba(241, 100, 30, 0.35); box-shadow: 0 12px 30px rgba(19, 19, 22, 0.06); }
.faq summary { padding-block: 20px; }
.faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; line-height: 1; color: var(--dark-ink); background: #F2F2F4; transition: transform 0.25s, background 0.25s, color 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); color: #FFFFFF; background: #F1641E; }
.faq-a { max-width: 62ch; padding-bottom: 22px; }
.faq details[open] .faq-a { animation: faq-in 0.3s ease both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq .faq-a p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: var(--dark-muted); }
.faq .faq-a > :last-child { margin-bottom: 0; }
.faq .faq-a p.faq-lead { margin: 0 0 6px; }
.faq .faq-a ul, .faq .faq-a ol { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 7px; font-size: 15.5px; line-height: 1.6; color: var(--dark-muted); }
.faq .faq-a ul li::marker { color: #F1641E; }
.faq .faq-a ol.faq-steps { list-style: none; padding-left: 0; counter-reset: etape; }
.faq .faq-a ol.faq-steps li { counter-increment: etape; position: relative; padding-left: 36px; }
.faq .faq-a ol.faq-steps li::before { content: counter(etape); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #C2490E; background: rgba(241, 100, 30, 0.12); }
.faq .faq-a b { font-weight: 600; color: var(--dark-ink); }
.faq .faq-a a { display: inline-block; margin-top: 4px; white-space: normal; }
.faq-group { display: flex; align-items: center; gap: 8px; margin: 18px 0 4px; }
.faq-group::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #F1641E; }
.faq-group:first-child { margin-top: 0; }
@media (max-width: 560px) { .faq details { padding: 0 18px; } .faq .faq-a p, .faq .faq-a ul, .faq .faq-a ol { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .faq details[open] .faq-a { animation: none; } }

/* Bandeau façon 8lab : les 4 piliers en haut, les 3 chiffres clés en dessous, chacun sur une ligne même sur téléphone */
@media (max-width: 760px) {
  .stat { gap: 10px; padding: 24px 6px; }
  .band-strip li { flex-direction: column; gap: 6px; padding: 16px 4px; font-size: 12.5px; line-height: 1.25; text-align: center; }
  .band-strip svg { width: 18px; height: 18px; }
  .stat span { font-size: 12.5px; line-height: 1.35; }
  .stat strong { font-size: clamp(22px, 7vw, 30px); }
}

/* Aperçu Skool : le fil défile doucement pour montrer le post de Thomas puis celui de Lyam */
.skd-posts { overflow: hidden; }
.skd-posts > .skp { transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.skd-posts.is-next > .skp { transform: translateY(calc(-1 * var(--shift, 0px))); }
@media (prefers-reduced-motion: reduce) { .skd-posts > .skp { transition: none; } }

/* Aperçu de l’espace membre (reprend /espace-membre en démo) : menu par catégories, recherche et parrainage,
   bannière avec une grille de logos, appel confirmé, puis 3 cartes (coach, rendez-vous, progression) */
.eco-app.ma { grid-template-columns: 210px minmax(0, 1fr); font-size: 12px; line-height: 1.4; }
/* Aperçu de l’espace membre : léger rebond au survol (pas sur écran tactile, pas avec le mouvement réduit) */
.eco-app.ma { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; }
@media (hover: hover) {
  .eco-app.ma:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 52px 110px rgba(19, 19, 22, 0.28); }
}
@media (prefers-reduced-motion: reduce) {
  .eco-app.ma, .eco-app.ma:hover { transition: none; transform: none; }
}
.ma svg { width: 14px; height: 14px; flex: none; }
.ma-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px 12px; border-right: 1px solid #1C1C20; background: #0A0A0B; color: #D4D4D8; }
.ma-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px 12px; font-family: var(--display); font-size: 14px; font-weight: 500; color: #FFFFFF; }
.ma-brand .acc-logo { width: 24px; height: 24px; border-radius: 7px; }
.ma-g + .ma-g { margin-top: 5px; padding-top: 5px; border-top: 1px solid #141417; }
.ma-group { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 5px 8px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #71717A; }
.ma-group svg { width: 11px; height: 11px; color: #52525B; }
.ma-nav { display: grid; gap: 1px; margin: 0 0 0 10px; padding-left: 8px; border-left: 1px solid #1F1F23; }
.ma-nav span { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; white-space: nowrap; color: #8A8A93; }
.ma-nav span.on { font-weight: 500; color: #FFFFFF; background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ma-nav span.on::before { content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: #F1641E; }
.ma-nav span.on svg { color: #F5833F; }
.ma-nav img.ma-mark { width: 14px; height: 14px; object-fit: cover; object-position: 3% 50%; filter: brightness(0) invert(1); opacity: 0.85; }
.ma-ntag { margin-left: auto; padding: 1px 5px; border-radius: 5px; font-style: normal; font-size: 8.5px; font-weight: 600; color: #E4E4E7; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.ma-claude { flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: url(../media/partenaires/claude.svg) center / contain no-repeat; mask: url(../media/partenaires/claude.svg) center / contain no-repeat; }
.ma-foot { display: grid; gap: 7px; margin-top: auto; padding-top: 14px; }
.ma-btn, .ma-chat { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ma-skool { width: 36px; height: auto; flex: none; }
.ma-btn { color: #131316; background: #FFFFFF; }
.ma-chat { font-weight: 500; color: #E4E4E7; background: #111113; border: 1px solid #1F1F23; }
.ma-btn i, .ma-chat i { display: grid; margin-left: auto; }
.ma-btn i svg, .ma-chat i svg { width: 12px; height: 12px; }
.ma-ic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #1C1C20; }
.ma-me { display: flex; align-items: center; gap: 8px; margin-top: 3px; padding: 10px 6px 0; border-top: 1px solid #1C1C20; }
.ma-me img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ma-me b { display: block; font-size: 12px; font-weight: 500; color: #FFFFFF; }
.ma-me small { font-size: 10.5px; color: #71717A; }
.ma-me svg { margin-left: auto; width: 13px; height: 13px; color: #71717A; }

/* Les cartes du bas descendent jusqu'au pied du menu, plus haut que l'accueil depuis « Mes objectifs » : pas de bande vide dessous */
.ma-main { display: grid; grid-template-rows: auto auto auto 1fr; gap: 12px; min-width: 0; padding: 12px 16px 18px; background: #070708; }
.ma-top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #17171A; font-size: 11px; color: #71717A; }
.ma-top i { font-style: normal; }
.ma-top b { font-weight: 500; color: #FFFFFF; }
.ma-tog, .ma-bell { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: #A1A1AA; }
.ma-tog { display: none; border: 1px solid #1F1F23; }
.ma-search, .ma-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; white-space: nowrap; color: #A1A1AA; background: #0E0E10; border: 1px solid #1F1F23; }
.ma-search { margin-left: auto; }
.ma-search kbd { padding: 1px 4px; border-radius: 4px; font-family: inherit; font-size: 9px; color: #A1A1AA; background: #17171A; border: 1px solid #26262B; }
.ma-pill { font-weight: 500; color: #E4E4E7; }
.ma-pill b { font-weight: 700; color: #FFFFFF; }
.ma-search svg, .ma-pill svg { width: 12px; height: 12px; }

.ma-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; aspect-ratio: 3.4 / 1; min-height: 220px; padding: 18px 20px; overflow: hidden; border-radius: 14px; border: 1px solid #1F1F23; background: radial-gradient(65% 120% at 50% -20%, #3A3A3C, #101011 60%, #070708 85%); }
/* Bannière : le logo Entrepreneurs Club dessiné en carrés lumineux, éclairé par le haut (comme 8lab) */
/* Pas de ratio imposé : avec la hauteur minimale, il élargissait la bannière au-delà du tableau de bord */
.ma-hero { aspect-ratio: auto; }
.ma-hero-logo { position: absolute; left: 50%; top: 44%; z-index: 0; height: 195%; width: auto; max-width: none; transform: translate(-50%, -50%); pointer-events: none; }
.ma-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 5, 6, 0.96) 0%, rgba(5, 5, 6, 0.78) 30%, rgba(5, 5, 6, 0) 60%); }
.ma-hero-txt { position: relative; z-index: 1; display: grid; gap: 4px; max-width: 62%; }
.ma-hero-txt small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; color: #A1A1AA; }
.ma-hero-txt strong { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: #FFFFFF; }
.ma-hero-txt span { font-size: 11.5px; color: #A1A1AA; }
.ma-hero-cta { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #131316; background: #FFFFFF; }
.ma-hero-cta svg { width: 12px; height: 12px; }

.ma-call { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #0E0E10; border: 1px solid #1C1C20; }
.ma-call > .acc-logo { flex: none; width: 38px; height: 38px; border-radius: 50%; }
.ma-call-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ma-call-txt b { font-size: 14px; font-weight: 500; color: #FFFFFF; }
.ma-call-txt > span { font-size: 11.5px; color: #8A8A93; }
.ma-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.ma-chips i { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; font-style: normal; font-size: 11px; color: #E4E4E7; background: #151518; border: 1px solid #222226; }
.ma-chips svg { width: 11px; height: 11px; color: #A1A1AA; }
.ma-call-btn, .ma-card-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; font-size: 11.5px; font-weight: 500; color: #FFFFFF; background: #151518; border: 1px solid #26262B; }
.ma-card-btn { justify-self: start; padding: 6px 10px; font-size: 11px; }
.ma-card-btn svg { width: 12px; height: 12px; }

.ma-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ma-card { display: grid; align-content: start; gap: 8px; padding: 13px 14px; border-radius: 12px; font-size: 11.5px; color: #A1A1AA; background: #0E0E10; border: 1px solid #1C1C20; }
.ma-card-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; color: #71717A; }
.ma-card strong { font-weight: 600; color: #FFFFFF; }
.ma-week { font-size: 11px; font-weight: 400; letter-spacing: 0; color: #71717A; }
.ma-week b { font-weight: 600; color: #FFFFFF; }
.ma-note { font-size: 10.5px; color: #71717A; }
.ma-next { display: flex; justify-content: space-between; font-size: 11px; color: #71717A; }
.ma-next b { font-weight: 500; color: #FFFFFF; }
.ma-more { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: #FFFFFF; }
.ma-more svg { width: 11px; height: 11px; }
.ma-card-k em { font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: 0; color: #4ADE80; }
.ma-tag { padding: 2px 6px; border-radius: 5px; font-size: 9px; letter-spacing: 0.06em; color: #F5A26B; background: rgba(241, 100, 30, 0.12); border: 1px solid rgba(241, 100, 30, 0.35); }
.ma-k-ic { display: inline-flex; align-items: center; gap: 6px; }
.ma-k-ic svg { width: 12px; height: 12px; }
.ma-card > b { font-size: 13px; font-weight: 500; color: #FFFFFF; }
.ma-who { display: flex; align-items: center; gap: 10px; }
.ma-av { position: relative; flex: none; }
.ma-av img { display: block; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.ma-av::after { content: ""; position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 2px #0E0E10; }
/* Statut du coach dans l’aperçu : passe de « En ligne » (vert) à « Hors ligne » (rouge) toutes les 5 secondes (main.js) */
.ma-coach .ma-card-k em, .ma-coach .ma-av::after { transition: color 0.3s, background 0.3s; }
.ma-coach.is-off .ma-card-k em { color: #F87171; }
.ma-coach.is-off .ma-av::after { background: #EF4444; }
.ma-who b { display: block; font-size: 13px; font-weight: 500; color: #FFFFFF; }
.ma-who small { display: block; font-size: 10.5px; color: #8A8A93; }

@media (max-width: 900px) {
  .eco-app.ma { grid-template-columns: 1fr; }
  .ma-side { display: none; }
  .ma-tog { display: grid; }
  .ma-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ma-hero-logo { top: -38px; height: 210px; transform: translateX(-50%); }
  .ma-hero::after { background: linear-gradient(0deg, rgba(5, 5, 6, 0.97) 0%, rgba(5, 5, 6, 0.9) 52%, rgba(5, 5, 6, 0) 74%); }
  .ma-hero { aspect-ratio: auto; min-height: 330px; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .ma-hero-txt { max-width: none; }
  .ma-pill, .ma-search { display: none; }
  .ma-bell { margin-left: auto; }
  .ma-call { flex-wrap: wrap; }
  .ma-call > .acc-logo { display: none; }
  .ma-call-btn { width: 100%; justify-content: center; }
}

/* Espace membre : rendez-vous (live + co-working) et progression avec la to-do de la semaine,
   le tout dans une seule rangée pour garder le format large */
.ma-rdv-i { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; background: #131316; border: 1px solid #1F1F23; }
.ma-rdv-ic { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: #E4E4E7; background: #1A1A1D; border: 1px solid #26262B; }
.ma-rdv-ic svg { width: 13px; height: 13px; }
.ma-rdv-i > span:nth-child(2) { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ma-rdv-i b { font-size: 12px; font-weight: 500; color: #FFFFFF; }
.ma-rdv-i small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; color: #8A8A93; }
.ma-rdv-go { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF; background: #1C1C20; border: 1px solid #2A2A2F; }
.ma-rdv-go svg { width: 12px; height: 12px; }
.ma-weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.ma-weeks i { display: grid; gap: 4px; font-style: normal; }
.ma-weeks i::before { content: ""; height: 5px; border-radius: 3px; background: #222226; }
.ma-weeks i.now::before { background: linear-gradient(90deg, #F1641E 55%, #3A2A22 55%); box-shadow: 0 0 8px rgba(241, 100, 30, 0.45); }
.ma-weeks b { font-size: 8px; font-weight: 600; text-align: center; color: #52525B; }
.ma-weeks i.now b { color: #FFFFFF; }
.ma-weeks i.done::before { background: rgba(241, 100, 30, 0.55); }
.ma-weeks i.done b { color: #A1A1AA; }
.ma-todo { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ma-todo li { display: flex; align-items: flex-start; gap: 7px; padding: 5px 8px; border-radius: 8px; font-size: 11px; color: #D4D4D8; background: #131316; border: 1px solid #1F1F23; }
.ma-todo li.done { color: #71717A; text-decoration: line-through; text-decoration-color: #52525B; }
.ma-todo li svg { width: 12px; height: 12px; }
.ma-todo li.call > svg { margin-left: auto; color: #A1A1AA; }
.ma-chk { flex: none; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 4px; border: 1.5px solid #3F3F46; color: #FFFFFF; }
.ma-chk svg { width: 9px; height: 9px; }
.ma-todo li.done .ma-chk { border-color: #F1641E; background: #F1641E; }

/* FAQ façon 8lab : en-tête en haut, questions en cartes blanches dans un cadre pleine largeur */
.faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-head); }
.faq-grid .head { position: static; width: 100%; }
.faq-head-row { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; width: 100%; }
.light .faq-grid .head .faq-head-row p { max-width: 52ch; color: var(--dark-ink); }
.faq-soft { color: #8E8E96; }
.faq-head-row p a { color: inherit; text-decoration: none; transition: color 0.2s; }
.faq-head-row p a:hover { color: var(--dark-ink); text-decoration: underline; text-underline-offset: 3px; }
.faq-cta { flex: none; font-weight: 600; color: #FFFFFF; background: linear-gradient(180deg, #F57A3A, #F1641E 55%, #E3560F); box-shadow: 0 0 0 6px rgba(241, 100, 30, 0.12), 0 10px 24px -8px rgba(241, 100, 30, 0.6); }
.dot-wa { background: #FFFFFF; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }
.faq { gap: 8px; padding: 8px; border: 1px solid var(--light-line); border-radius: 24px; background: rgba(255, 255, 255, 0.5); }
.faq details { padding: 0 24px; border: 0; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(19, 19, 22, 0.04), 0 6px 16px rgba(19, 19, 22, 0.04); }
.faq details:hover { box-shadow: 0 1px 2px rgba(19, 19, 22, 0.05), 0 10px 24px rgba(19, 19, 22, 0.07); }
.faq details[open] { box-shadow: 0 1px 2px rgba(19, 19, 22, 0.05), 0 12px 30px rgba(19, 19, 22, 0.08); }
.faq summary { padding-block: 22px; }
.faq summary::after { width: 22px; height: 22px; font-size: 26px; font-weight: 300; color: var(--dark-ink); background: none; }
.faq details[open] summary::after { color: #F1641E; background: none; }
.faq-group { margin: 14px 12px 4px; }
.faq-group:first-child { margin-top: 8px; }
@media (max-width: 760px) {
  .faq-head-row { flex-direction: column; align-items: flex-start; }
  .faq { padding: 6px; gap: 6px; border-radius: 20px; }
  .faq details { padding: 0 18px; }
  .faq summary { padding-block: 18px; }
}

/* Étiquettes de titre des sections (et FAQ) : pastille dans un anneau clair, façon 8lab ; reflet orange sur la flèche de la FAQ */
.pill.pill-o { padding: 9px 18px; border-color: transparent; background: #17171B; color: #B5B5BD; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.04), 0 0 0 7px rgba(255, 255, 255, 0.1); }
.light .pill.pill-o { background: #FFFFFF; color: #6B6B73; box-shadow: 0 2px 6px rgba(19, 19, 22, 0.08), 0 0 0 6px #F0F0F1, 0 0 0 7px #E2E2E5; }
/* Le globe est une carte sombre dans l'écosystème (section claire) : son étiquette et son sous-titre gardent les couleurs des sections sombres */
.light .globe-block .pill.pill-o { background: #17171B; color: #B5B5BD; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.04), 0 0 0 7px rgba(255, 255, 255, 0.1); }
.light .globe-block h3 .soft { color: var(--mist); }
.faq-more-ic::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background:
    conic-gradient(from var(--beam), rgba(241, 100, 30, 0) 0deg, rgba(241, 100, 30, 0) 240deg, #F1641E 320deg, #FFC79E 345deg, rgba(241, 100, 30, 0) 360deg),
    rgba(241, 100, 30, 0.35);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-spin 4s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .faq-more-ic::before { animation: none; } }

/* FAQ : les 6 premières questions s'affichent, la flèche ouvre les autres */
.faq { display: block; padding: 0; background: #FBFBFC; overflow-anchor: none; }
.faq-list { display: grid; gap: 8px; padding: 8px; }
.faq.is-collapsed .faq-extra { display: none; }
.faq-extra { animation: faq-in 0.35s ease both; }
.faq-more { position: relative; display: grid; justify-items: center; gap: 8px; width: 100%; padding: 6px 8px 18px; border: 0; border-radius: 0 0 24px 24px; background: none; font: inherit; color: var(--dark-muted); cursor: pointer; }
.faq.is-collapsed .faq-more { margin-top: -58px; padding-top: 30px; background: linear-gradient(to bottom, rgba(251, 251, 252, 0), #FBFBFC 52%); }
.faq-more-ic { position: relative; isolation: isolate; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; color: #F1641E; box-shadow: 0 0 0 5px rgba(241, 100, 30, 0.07), 0 8px 22px -6px rgba(241, 100, 30, 0.45); transition: transform 0.2s; }
.faq-more-ic svg { width: 18px; height: 18px; transition: transform 0.3s; }
.faq-more[aria-expanded="true"] .faq-more-ic svg { transform: rotate(180deg); }
.faq.is-collapsed .faq-more-ic { animation: faq-bob 1.8s ease-in-out infinite; }
.faq-more:hover .faq-more-ic { animation: none; transform: translateY(2px); }
.faq-more-txt { font-size: 13.5px; font-weight: 500; }
.faq-more:hover .faq-more-txt { color: var(--dark-ink); }
@keyframes faq-bob { 50% { transform: translateY(4px); } }
@media (max-width: 760px) {
  .faq-list { gap: 6px; padding: 6px; }
  .faq-more { border-radius: 0 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) { .faq.is-collapsed .faq-more-ic { animation: none; } }

/* Accueil : même structure que la page Club Privé, textes « à remplir » et cadres « Visuel à venir » */
.home-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero .home-choices { margin-top: 18px; }
.home-alt { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04); }
.ph { display: grid; place-items: center; outline: 1px dashed rgba(255, 255, 255, 0.22); outline-offset: -12px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 10px, rgba(255, 255, 255, 0) 10px 20px), #0B0B0D; color: #8A8A93; }
.ph > span { font-family: var(--sys); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.light .ph { outline-color: rgba(19, 19, 22, 0.18); background: repeating-linear-gradient(135deg, rgba(19, 19, 22, 0.035) 0 10px, rgba(19, 19, 22, 0) 10px 20px), #F7F7F8; color: #71717A; }
.light .eco-visual.ph, .light .coach-photo.ph, .light .mh-story-img.ph, .light .xp-img.ph { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 10px, rgba(255, 255, 255, 0) 10px 20px), #0B0B0D; color: #8A8A93; outline-color: rgba(255, 255, 255, 0.22); }
.ph-avatars { width: 132px; height: 40px; border-radius: 9999px; outline-offset: -4px; }
.ph-avatars > span { font-size: 11px; }
.ph-testi { height: clamp(220px, 26vw, 340px); border-radius: 20px; }
.ph-rm { width: 100%; height: clamp(280px, 30vw, 400px); border-radius: 16px; }
.ph-app { margin-top: var(--sp-block); aspect-ratio: 16 / 10; border-radius: 20px; }
.globe-wrap.ph { border-radius: 50%; }
.ph-logo { display: inline-grid; place-items: center; flex: none; width: 112px; height: 34px; border-radius: 8px; border: 1px dashed rgba(255, 255, 255, 0.22); font-family: var(--sys); font-size: 12px; color: #8A8A93; }
@media (max-width: 480px) {
  .home-choices { flex-direction: column; align-self: stretch; }
  .home-choices .pill-cta { width: 100%; justify-content: center; }
  .ph-app { aspect-ratio: 3 / 4; }
}

/* Accueil : expériences à venir, inspirées de mohana.de (photo de fond, une grande carte puis trois cartes) */
.xp { position: relative; overflow: hidden; background: #050506; }
.xp-bg { position: absolute; inset: 0; outline: none; place-items: end; padding: 18px 22px; }
.xp-bg > span { font-size: 12px; }
.xp::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 30%, rgba(241, 100, 30, 0.12), rgba(241, 100, 30, 0) 70%), linear-gradient(180deg, rgba(5, 5, 6, 0.9), rgba(5, 5, 6, 0.35) 30%, rgba(5, 5, 6, 0.35) 75%, rgba(5, 5, 6, 0.9)); }
.xp .wrap { position: relative; z-index: 1; }
.xp-head { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: var(--sp-head); }
.xp-kicker { font-family: var(--sys); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.xp-head h2 { font-family: var(--display); font-size: clamp(34px, 4.8vw, 60px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; color: #FFFFFF; }
.xp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.xp-card { position: relative; isolation: isolate; display: grid; align-content: end; min-height: 290px; text-decoration: none; overflow: hidden; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.1); color: #FFFFFF; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); transition: transform 0.3s, border-color 0.3s; }
.xp-card:hover { transform: translateY(-3px); border-color: rgba(241, 100, 30, 0.45); }
.xp-feat { grid-column: 1 / -1; justify-self: center; width: min(100%, 860px); min-height: clamp(300px, 34vw, 420px); }
.xp-img { position: absolute; inset: 0; z-index: -2; place-items: end end; padding: 0 26px 24px 0; outline-offset: -14px; }
.xp-img > span { font-size: 11.5px; }
.xp-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.78)); }
.xp-cat { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 9999px; background: rgba(255, 255, 255, 0.94); color: #131316; font-family: var(--sys); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.xp-meta { position: absolute; top: 14px; right: 14px; display: grid; justify-items: end; gap: 6px; }
.xp-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9999px; background: rgba(255, 255, 255, 0.94); color: #131316; font-family: var(--sys); font-size: 12px; font-weight: 600; }
.xp-meta svg { width: 13px; height: 13px; }
.xp-body { display: grid; justify-items: start; gap: 6px; padding: 22px; }
.xp-body h3 { font-family: var(--display); font-size: clamp(20px, 2vw, 24px); font-weight: 600; letter-spacing: -0.01em; text-transform: uppercase; }
.xp-feat .xp-body { padding: 28px; }
.xp-feat .xp-body h3 { font-size: clamp(28px, 3.4vw, 42px); }
.xp-body p { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.xp-body p svg { width: 14px; height: 14px; }
.xp-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.xp-go svg { width: 14px; height: 14px; transition: transform 0.25s; }
.xp-card:hover .xp-go svg { transform: translateX(3px); }
.xp-cta { display: flex; justify-content: center; margin-top: var(--sp-cta); }
@media (max-width: 860px) {
  .xp-grid { grid-template-columns: 1fr; }
  .xp-card { min-height: 220px; }
}

/* Page événement : grande photo, puces date / horaire / lieu, carte de réservation qui reste visible au défilement */
.evt-hero { position: relative; display: grid; align-items: end; min-height: clamp(520px, 78vh, 760px); overflow: hidden; background: #000000; }
.evt-cover { position: absolute; inset: 0; place-items: start end; padding: 110px 30px 0; outline-offset: -16px; }
.evt-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 15% 100%, rgba(241, 100, 30, 0.2), rgba(241, 100, 30, 0) 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1) 35%, rgba(0, 0, 0, 0.88)); }
.evt-hero-in { position: relative; z-index: 1; display: grid; justify-items: start; gap: 18px; width: 100%; padding-block: 140px clamp(48px, 7vw, 80px); }
.evt-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s; }
.evt-back:hover { color: #FFFFFF; }
.evt-back svg { width: 16px; height: 16px; }
.evt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.evt-chips .xp-cat { position: static; }
.evt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #FFFFFF; font-family: var(--sys); font-size: 12.5px; font-weight: 500; }
.evt-chip svg { width: 13px; height: 13px; }
.evt-hero h1 { max-width: 16ch; margin: 0; font-family: var(--display); font-size: clamp(38px, 6vw, 72px); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; color: #FFFFFF; text-align: left; }
.evt-hero .lead { max-width: 52ch; margin: 0; text-align: left; color: rgba(255, 255, 255, 0.75); }
.evt-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
.evt-seats { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.evt-seats svg { width: 16px; height: 16px; }
.evt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.evt-content { display: grid; justify-items: start; gap: 16px; }
.evt-content h2 { font-family: var(--display); font-size: clamp(30px, 3.6vw, 44px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
.evt-content > p { max-width: 60ch; margin: 0; font-size: 17px; line-height: 1.6; color: var(--dark-muted); }
.evt-h3 { margin-top: 18px; font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.evt-prog { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--light-line); }
.evt-prog li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0 12px 20px; }
.evt-prog li::before { content: ""; position: absolute; left: -5px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: #F1641E; box-shadow: 0 0 0 4px rgba(241, 100, 30, 0.15); }
.evt-prog b { font-family: var(--display); font-weight: 500; color: var(--dark-ink); }
.evt-prog span { display: grid; gap: 2px; font-size: 15px; color: var(--dark-muted); }
.evt-prog strong { font-weight: 500; color: var(--dark-ink); }
.evt-for { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.evt-for li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--dark-ink); }
.evt-for svg { flex: none; width: 18px; height: 18px; color: #F1641E; }
.evt-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 18px; }
.evt-shot { aspect-ratio: 4 / 5; border-radius: 16px; outline-offset: -8px; }
.evt-book { position: sticky; top: 104px; }
.evt-book-card { display: grid; gap: 10px; padding: 26px; border-radius: 24px; border: 1px solid #1C1C20; background: #0B0B0D; color: #FFFFFF; box-shadow: 0 30px 60px rgba(19, 19, 22, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.evt-price { font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.evt-price-note { margin-top: -4px; font-size: 13px; color: #8A8A93; }
.evt-facts { display: grid; gap: 10px; margin: 10px 0 6px; padding: 14px 0 0; list-style: none; border-top: 1px solid #1F1F23; }
.evt-facts li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #D4D4D8; }
.evt-facts svg { flex: none; width: 16px; height: 16px; color: #F1641E; }
.evt-pay { justify-content: center; width: 100%; margin-top: 6px; }
.evt-book-note { margin: 0; font-size: 12.5px; text-align: center; color: #71717A; }
@media (max-width: 900px) {
  .evt-grid { grid-template-columns: 1fr; }
  .evt-book { position: static; }
}
@media (max-width: 560px) {
  .evt-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evt-gallery .evt-shot:last-child { display: none; }
}

/* Page Expériences : étapes « Comment ça marche » */
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.how-step { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: 20px; border: 1px solid var(--light-line); background: #FFFFFF; box-shadow: 0 1px 2px rgba(19, 19, 22, 0.04), 0 6px 16px rgba(19, 19, 22, 0.04); }
.how-n { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: #F1641E; }
.how-step h3 { font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.how-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dark-muted); }
@media (max-width: 900px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .how { grid-template-columns: 1fr; } }

/* Barre du haut : la page en cours est allumée en orange */
.nav-menu a[aria-current="page"], .nav-menu a[aria-current="page"]:hover { color: #F5833F; background: rgba(241, 100, 30, 0.12); box-shadow: inset 0 0 0 1px rgba(241, 100, 30, 0.55); }
.nav-drawer a[aria-current="page"] { color: #F5833F; background: rgba(241, 100, 30, 0.1); box-shadow: inset 0 0 0 1px rgba(241, 100, 30, 0.5); }
/* Ancres des pages du site : laisser la place de la barre du haut */
#communaute, #experiences, #run-club, #business, #retraites, #liste { scroll-margin-top: 72px; }

/* Accueil façon mohana.de, aux couleurs du site : grand titre, cartes qui défilent, Run Club, étapes, univers */
.mh-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #000000; text-align: center; }
.mh-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 40% at 50% 55%, rgba(241, 100, 30, 0.14), rgba(241, 100, 30, 0) 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55)); }
.mh-hero-in { position: relative; z-index: 2; width: 100%; min-width: 0; display: grid; justify-items: center; gap: 22px; padding-block: 120px 150px; }
.mh-kicker { font-family: var(--sys); font-size: 12.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #F5833F; }
.mh-word { max-width: none; margin: 0; font-family: var(--display); font-size: clamp(28px, 9.4vw, 132px); font-weight: 600; line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; color: #FFFFFF; }
.mh-sub { max-width: 34ch; margin: 0; font-family: var(--sys); font-size: clamp(17px, 2vw, 21px); line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.mh-hero .home-choices { margin-top: 10px; }
.mh-hero-tag { position: absolute; right: 24px; bottom: clamp(70px, 10vw, 130px); z-index: 2; padding: 6px 12px; border-radius: 9999px; border: 1px dashed rgba(255, 255, 255, 0.2); font-size: 12px; color: #71717A; }
.mh-curve { position: absolute; left: -10%; right: -10%; bottom: -1px; z-index: 2; height: clamp(50px, 8vw, 110px); border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--light); }
.mh-what { background: var(--light); }
.mh-rail { position: relative; }
.mh-track { display: flex; gap: 16px; margin: 0; padding: 6px 6px 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mh-track::-webkit-scrollbar { display: none; }
.mh-story { position: relative; isolation: isolate; flex: none; width: clamp(220px, 24vw, 270px); aspect-ratio: 9 / 15; overflow: hidden; scroll-snap-align: center; border-radius: 24px; background: #0B0B0D; box-shadow: 0 18px 40px rgba(19, 19, 22, 0.18); }
.mh-story-img { position: absolute; inset: 0; z-index: -2; place-items: end center; padding-bottom: 22px; outline-offset: -10px; }
.mh-story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 48%); }
.mh-story p { margin: 0; padding: 22px 20px; font-family: var(--sys); font-size: 15px; font-weight: 500; line-height: 1.4; text-align: center; color: #FFFFFF; }
.mh-arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--light-line); background: #FFFFFF; color: var(--dark-ink); box-shadow: 0 6px 18px rgba(19, 19, 22, 0.12); transform: translateY(-50%); cursor: pointer; transition: transform 0.2s; }
.mh-arrow:hover { transform: translateY(-50%) scale(1.06); }
.mh-arrow[data-dir="-1"] { left: -10px; }
.mh-arrow[data-dir="1"] { right: -10px; }
.mh-arrow svg { width: 18px; height: 18px; }
.mh-quote { display: flex; flex-direction: column; gap: 14px; flex: none; width: clamp(270px, 30vw, 360px); min-height: 270px; padding: 26px; scroll-snap-align: start; border-radius: 22px; border: 1px solid var(--light-line); background: #FFFFFF; box-shadow: 0 1px 2px rgba(19, 19, 22, 0.04), 0 10px 26px rgba(19, 19, 22, 0.06); }
.mh-quote-ic { color: #F1641E; }
.mh-quote-ic svg { width: 26px; height: 26px; }
.mh-quote p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--dark-ink); }
.mh-quote-who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--light-line); }
.mh-quote-av { flex: none; width: 40px; height: 40px; border-radius: 50%; outline-offset: -3px; }
.mh-quote-who b { display: block; font-size: 14px; font-weight: 600; color: var(--dark-ink); }
.mh-quote-who small { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8E8E96; }
.mh-run { background: #000000; }
.mh-run-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.mh-run-img { aspect-ratio: 4 / 5; border-radius: 28px; outline-offset: -14px; }
.mh-run-text { display: grid; justify-items: start; gap: 18px; }
.mh-run-text .xp-cat { position: static; }
.mh-run-text h2 { font-family: var(--display); font-size: clamp(34px, 4.8vw, 60px); font-weight: 500; line-height: 1.05; letter-spacing: -0.035em; color: #FFFFFF; }
.mh-run-text p { max-width: 46ch; margin: 0; font-size: 17px; line-height: 1.55; color: #A0A0A0; }
.mh-steps { display: grid; max-width: 820px; margin: 0 auto; padding: 0; list-style: none; border-left: 1px solid var(--light-line); }
.mh-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 26px 0 26px 34px; }
.mh-step + .mh-step { border-top: 1px solid var(--light-line); }
.mh-step-dot { position: absolute; left: -6px; top: 34px; width: 11px; height: 11px; border-radius: 50%; background: #F1641E; box-shadow: 0 0 0 5px rgba(241, 100, 30, 0.14); }
.mh-step h3 { font-family: var(--display); font-size: clamp(19px, 2.2vw, 25px); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dark-ink); }
.mh-step p { max-width: 52ch; margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--dark-muted); }
.mh-step-n { font-family: var(--display); font-size: clamp(44px, 6vw, 72px); font-weight: 600; line-height: 1; color: rgba(19, 19, 22, 0.08); }
.mh-note { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--dark-muted); }
.mh-note a { font-weight: 500; color: var(--dark-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241, 100, 30, 0.6); }
.mh-more { position: relative; overflow: hidden; background: #050506; }
.mh-more::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 6, 0.9), rgba(5, 5, 6, 0.4) 35%, rgba(5, 5, 6, 0.4) 75%, rgba(5, 5, 6, 0.9)); }
.mh-more .wrap { position: relative; z-index: 1; }
.mh-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mh-more-card { display: grid; overflow: hidden; border-radius: 22px; background: #FFFFFF; color: var(--dark-ink); text-decoration: none; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); transition: transform 0.3s; }
.mh-more-card:hover { transform: translateY(-3px); }
.mh-more-img { aspect-ratio: 16 / 10; outline-offset: -10px; }
.mh-more-body { display: grid; justify-items: start; gap: 6px; padding: 20px 22px 22px; }
.mh-more-body h3 { font-family: var(--display); font-size: 20px; font-weight: 500; }
.mh-more-body p { margin: 0; font-size: 14.5px; color: var(--dark-muted); }
@media (max-width: 860px) {
  .mh-run-grid, .mh-more-grid { grid-template-columns: 1fr; }
  .mh-run-img { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .mh-arrow { display: none; }
  .mh-step { grid-template-columns: 1fr; gap: 6px; padding-left: 26px; }
  .mh-step-n { display: none; }
  .mh-hero-tag { display: none; }
}

/* Page E-commerce : barre des sections de la page sous le menu du site */
.nav-sub { --nav-h: 126px; }
.subnav { display: flex; gap: 2px; width: fit-content; max-width: 100%; margin: 8px auto 0; padding: 5px; overflow-x: auto; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(12, 12, 14, 0.74); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 7px 14px; border-radius: 999px; font-family: var(--sys); font-size: 13px; font-weight: 500; white-space: nowrap; color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: color 0.2s, background 0.2s; }
.subnav a:hover, .subnav a.is-active { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
.avec-sous-menu .hero .wrap.hero-inner { padding-top: calc(126px + var(--sp-head)); }
.avec-sous-menu #accompagnement, .avec-sous-menu #roadmap, .avec-sous-menu #resultats, .avec-sous-menu #offres, .avec-sous-menu #faq, .avec-sous-menu #coach { scroll-margin-top: 124px; }
.avec-sous-menu #club-prive, .avec-sous-menu #etsy-print { scroll-margin-top: 148px; }
.nav-drawer-k { padding: 12px 16px 2px; font-family: var(--sys); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #71717A; }
.nav-drawer a.nav-drawer-sub { padding: 10px 16px 10px 28px; font-size: 15px; color: rgba(255, 255, 255, 0.85); }
@media (max-width: 900px) {
  .nav-sub { --nav-h: 120px; }
  .avec-sous-menu .hero .wrap.hero-inner { padding-top: calc(120px + var(--sp-head)); }
}

/* Accueil : le lien du menu cliqué s'allume en orange ; aperçu e-commerce */
.nav-clic .nav-menu a.is-active, .nav-clic .nav-menu a.is-active:hover { color: #F5833F; background: rgba(241, 100, 30, 0.12); box-shadow: inset 0 0 0 1px rgba(241, 100, 30, 0.55); }
.nav-clic .nav-drawer a.is-active { color: #F5833F; background: rgba(241, 100, 30, 0.1); box-shadow: inset 0 0 0 1px rgba(241, 100, 30, 0.5); }
#evenements, #e-commerce { scroll-margin-top: 72px; }
.mh-ecom-img { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 28px; border: 1px solid #222222; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.mh-ecom-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.mh-ecom-img:hover img { transform: scale(1.03); }
.mh-ecom-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mh-ecom-list li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: #D4D4D8; }
.mh-ecom-list svg { flex: none; width: 18px; height: 18px; color: #F1641E; }
.mh-ecom .home-choices { justify-content: flex-start; margin-top: 6px; }

/* Accueil : les 4 façons de faire partie de la communauté (groupe WhatsApp, Run Club, événements, expériences) */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pillar { display: grid; overflow: hidden; border-radius: 24px; border: 1px solid var(--light-line); background: #FFFFFF; color: var(--dark-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(19, 19, 22, 0.04), 0 10px 26px rgba(19, 19, 22, 0.06); transition: transform 0.3s, box-shadow 0.3s; }
.pillar:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(19, 19, 22, 0.05), 0 18px 40px rgba(19, 19, 22, 0.1); }
.pillar-img { aspect-ratio: 16 / 8; outline-offset: -10px; }
.pillar-body { display: grid; justify-items: start; gap: 10px; padding: 22px 24px 24px; }
.pillar-top { display: flex; align-items: center; gap: 10px; }
.pillar-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(241, 100, 30, 0.22); background: rgba(241, 100, 30, 0.1); color: #F1641E; }
.pillar-ic svg { width: 20px; height: 20px; }
.pillar-tag { padding: 4px 10px; border-radius: 9999px; background: #F2F2F4; font-family: var(--sys); font-size: 12px; font-weight: 600; color: var(--dark-ink); }
.pillar h3 { font-family: var(--display); font-size: clamp(22px, 2.4vw, 26px); font-weight: 500; letter-spacing: -0.02em; }
.pillar p { max-width: 46ch; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--dark-muted); }
.pillar .xp-go { color: var(--dark-ink); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }

/* Fenêtres par-dessus la page : vidéo de présentation et « Réserver un appel » */
html.modal-open { overflow: hidden; }
.vsl-modal, .rdv-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vsl-modal { background: rgba(0, 0, 0, 0.88); }
.rdv-modal { background: rgba(0, 0, 0, 0.72); }
.vsl-modal[hidden], .rdv-modal[hidden] { display: none; }
.vsl-frame { width: min(1000px, 100%); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #000000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.vsl-frame { position: relative; }
.vsl-frame video { display: block; width: 100%; height: 100%; }
/* Correction affichée par-dessus la vidéo au moment où elle est dite (ex. « *4 mois ») */
.vsl-note { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #FFFFFF; font: 600 clamp(13px, 1.6vw, 17px)/1.2 var(--sys); pointer-events: none; }
.vsl-note[hidden] { display: none; }
.lecteur .vsl-note { bottom: max(18%, 64px); }

/* Lecteur vidéo du site (main.js) : la vidéo sans les commandes du navigateur, et une seule barre en bas,
   la même partout, avec lecture, avancement, son et plein écran. Elle s'efface pendant la lecture quand rien ne bouge. */
.lecteur { position: relative; overflow: hidden; background: #000000; }
.lecteur video { cursor: pointer; }
.lecteur-barre { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 32px 12px 10px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72)); color: #FFFFFF; transition: opacity .25s ease; }
.lecteur.au-repos .lecteur-barre { opacity: 0; pointer-events: none; }
.lecteur.au-repos, .lecteur.au-repos video { cursor: none; }
.lecteur-barre button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.lecteur-barre button:hover { background: rgba(255, 255, 255, 0.14); }
.lecteur-barre button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 0; }
.lecteur-barre svg { width: 20px; height: 20px; fill: currentColor; }
.lecteur-barre .trait { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icone-pause, .icone-muet, .icone-reduire, .en-lecture .icone-lire, .sans-son .icone-son, .en-grand .icone-grand { display: none; }
.en-lecture .icone-pause, .sans-son .icone-muet, .en-grand .icone-reduire { display: block; }
.lecteur-temps { flex: none; font: 500 13px/1 var(--sys); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lecteur-avance { flex: 1; min-width: 40px; height: 16px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.lecteur-avance::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, #FFFFFF var(--avance, 0%), rgba(255, 255, 255, 0.3) var(--avance, 0%)); }
.lecteur-avance::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: #FFFFFF; }
.lecteur-avance::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.3); }
.lecteur-avance::-moz-range-progress { height: 4px; border-radius: 4px; background: #FFFFFF; }
.lecteur-avance::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #FFFFFF; }
.lecteur-avance:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; border-radius: 4px; }
/* Plein écran : tout le cadre ; sur iPhone, qui ne le permet pas, le cadre couvre la page */
.lecteur:fullscreen { width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; }
.lecteur:-webkit-full-screen { width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; }
html.lecteur-plein .lecteur.plein-page { position: fixed; inset: 0; z-index: 2000; width: auto; max-width: none; height: auto; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; }
html.lecteur-plein .hero .wrap.hero-inner { z-index: 2000; }   /* le haut de page passe devant l'en-tête et les boutons flottants */
.lecteur.en-grand video { object-fit: contain; }
html.lecteur-plein { overflow: hidden; }
@media (max-width: 560px) {
  .lecteur-barre { gap: 4px; padding: 24px 6px 6px; }
  .lecteur-temps { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lecteur-barre { transition: none; }
}
.vsl-close, .rdv-close { position: absolute; top: 16px; right: 16px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; cursor: pointer; }
.vsl-close svg, .rdv-close svg { width: 20px; height: 20px; }
.rdv-card { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 32px 28px 26px; border-radius: 24px; border: 1px solid #1F1F23; background: #0B0B0D; color: #FFFFFF; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.rdv-step, .rdv-done { display: grid; gap: 18px; }
.rdv-step[hidden], .rdv-done[hidden] { display: none; }
.rdv-card .pill { justify-self: start; }
.rdv-card h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 36px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
.rdv-intro { margin: 0; font-size: 15px; line-height: 1.55; color: #A0A0A8; }
.rdv-field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.rdv-field small { margin-left: 4px; font-size: 12.5px; font-weight: 400; color: #71717A; }
.rdv-field input { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid #2A2A2F; background: #131316; color: #FFFFFF; font-family: var(--sys); font-size: 16px; font-weight: 400; }
.rdv-field input:focus { outline: none; border-color: #F1641E; box-shadow: 0 0 0 3px rgba(241, 100, 30, 0.2); }
.rdv-q { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rdv-q legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.rdv-opt { position: relative; display: block; cursor: pointer; }
.rdv-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rdv-opt span { display: block; padding: 12px 14px; border-radius: 12px; border: 1px solid #2A2A2F; background: #131316; font-size: 14.5px; line-height: 1.4; color: #D4D4D8; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.rdv-opt:hover span { border-color: #3A3A40; }
.rdv-opt input:checked + span { border-color: #F1641E; background: rgba(241, 100, 30, 0.12); color: #FFFFFF; }
.rdv-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(241, 100, 30, 0.3); }
.rdv-q.is-missing legend { color: #F5833F; }
.rdv-field input.is-missing { border-color: #F1641E; }
.rdv-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(241, 100, 30, 0.12); font-size: 14px; color: #F5833F; }
.rdv-send { justify-content: center; width: 100%; border: 0; cursor: pointer; }
.rdv-wa { display: grid; color: #25D366; }
.rdv-wa svg { width: 18px; height: 18px; }
.rdv-note { margin: 0; text-align: center; font-size: 12.5px; color: #71717A; }
.rdv-note a { color: #FFFFFF; }
.rdv-done { justify-items: center; padding: 24px 0 6px; text-align: center; }
.rdv-done-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #25D366; color: #FFFFFF; }
.rdv-done-ic svg { width: 32px; height: 32px; }
.rdv-done p { max-width: 36ch; margin: 0; color: #A0A0A8; }
@media (max-width: 560px) { .rdv-card { padding: 28px 18px 22px; } }

/* Mobile : bouton « Réserver un appel » fixé en bas de l'écran (le bouton WhatsApp reste à droite) */
.cta-fixe { display: none; }
@media (max-width: 760px) {
  .cta-fixe { position: fixed; left: 16px; right: 80px; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 890; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border-radius: 9999px; background: #FFFFFF; color: #131316; font-family: var(--sys); font-size: 16px; font-weight: 600; text-decoration: none; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(140%); transition: transform 0.35s, opacity 0.35s; }
  .cta-fixe.is-on { opacity: 1; transform: none; }
  .cta-fixe svg { width: 15px; height: 15px; }
}

/* Sections noires qui se suivent (Coachs → Roadmap → Résultats) : espace divisé par deux, sinon on dirait un trou */
#coach .wrap, #roadmap .wrap { padding-bottom: calc(var(--sp-sec) / 2); }
#resultats .wrap, #roadmap .wrap { padding-top: calc(var(--sp-sec) / 2); }

/* Résultats membres : carrousel plus premium (cadre, halo orange, légende nom + résultat, flèches orange) */
.testi { position: relative; }
.testi::before { content: ""; position: absolute; left: 50%; top: 42%; z-index: 0; width: min(900px, 90%); height: 70%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(241, 100, 30, 0.16), rgba(241, 100, 30, 0)); filter: blur(30px); pointer-events: none; }
.testi-stage, .testi-nav { position: relative; z-index: 1; }
.testi-stage { grid-template-columns: 150px minmax(0, 760px) 150px; }
.testi-slide { padding: 12px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, #161619, #0C0C0E); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.testi-slide.is-prev, .testi-slide.is-next { opacity: 0.35; transform: scale(0.92); filter: grayscale(0.4) blur(1px); }
.testi-slide.is-prev .testi-cap, .testi-slide.is-next .testi-cap { display: none; }
.testi-row { gap: 12px; }
.testi-shot { border-radius: 18px; border-color: rgba(255, 255, 255, 0.06); }
.testi-video { border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.14); }
.testi-cap { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; height: 100px; padding: 14px 8px 4px; }
.testi-who { display: flex; align-items: baseline; gap: 10px; max-width: 100%; min-width: 0; white-space: nowrap; }
.testi-who b { overflow: hidden; text-overflow: ellipsis; }
.testi-who b { font-family: var(--display); font-size: 17px; font-weight: 500; color: #FFFFFF; }
.testi-who small { font-size: 12.5px; color: #8A8A93; }
.testi-res { max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9999px; border: 1px solid rgba(241, 100, 30, 0.45); background: rgba(241, 100, 30, 0.16); font-size: 14.5px; font-weight: 600; color: #FFB27F; }
.testi-res::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #F1641E; box-shadow: 0 0 8px rgba(241, 100, 30, 0.9); }
.testi-nav { align-items: center; gap: 18px; margin-top: 28px; }
/* Flèches des avis : boutons noirs comme les pastilles de titres (double liseré), flèche orange épaisse.
   Au survol, le liseré passe en orange et la flèche avance dans son sens ; au clic, le bouton s'enfonce légèrement */
.testi-btn { width: 48px; height: 48px; border: 0; background: #17171B; color: #F5833F; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04), 0 0 0 7px rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 0.2s, box-shadow 0.25s, background 0.25s, color 0.2s; }
.testi-btn svg { width: 22px; height: 22px; stroke-width: 2.75; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.testi-btn:hover { transform: translateY(-1px); background: #221812; color: #FF8F4D; box-shadow: 0 0 0 6px rgba(241, 100, 30, 0.06), 0 0 0 7px rgba(241, 100, 30, 0.6), 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.testi-btn[data-dir="-1"]:hover svg { transform: translateX(-2px); }
.testi-btn[data-dir="1"]:hover svg { transform: translateX(2px); }
.testi-btn:active { transform: translateY(0) scale(0.95); }
.testi-btn:focus-visible { outline: 2px solid rgba(241, 100, 30, 0.6); outline-offset: 3px; }
#resultats .disclaimer { color: #71717A; }
@media (max-width: 1023px) { .testi-stage { grid-template-columns: minmax(0, 760px); } }
@media (max-width: 560px) {
  .testi-slide { padding: 8px; border-radius: 22px; }
  .testi-row { gap: 8px; }
  .testi-shot, .testi-video { border-radius: 14px; }
  .testi-cap { gap: 8px; height: 94px; padding: 10px 4px 2px; }
  .testi-who b { font-size: 15px; }
  .testi-res { max-width: 100%; white-space: normal; font-size: 12px; line-height: 1.35; padding: 5px 10px; }
}

/* Roadmap, jour 1 : la liste « Personnalise ta boutique » d'Etsy (mêmes étapes que sur Etsy, coches vertes) */
.rm-etsy { gap: 16px; }
.rm-etsy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rm-etsy-head b { display: block; font-size: 15px; font-weight: 600; color: #FFFFFF; }
.rm-etsy-head small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: #A1A1AA; }
.rm-etsy-prog { display: flex; align-items: center; gap: 8px; flex: none; padding-top: 3px; font-size: 12.5px; color: #D4D4D8; }
.rm-etsy-prog i { position: relative; width: 56px; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.rm-etsy-prog i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #FFFFFF; }
.rm-etsy-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); }
.rm-etsy-list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: #FFFFFF; }
.rm-etsy-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.rm-etsy-list li > svg { width: 14px; height: 14px; color: #D4D4D8; }
.rm-ok { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #F6823F, #E2551A); color: #FFFFFF; box-shadow: 0 0 0 3px rgba(241, 100, 30, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.rm-ok svg { width: 12px; height: 12px; }

/* Texte lu seulement par les lecteurs d'écran */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }