/* ========================
   POLICES (auto-hébergées)
   Mêmes fichiers que Google Fonts, servis depuis /fonts : plus de requête
   vers un domaine tiers avant le premier rendu. Les pages préchargent
   Inter et Fraunces (latin), les deux visibles au-dessus de la ligne de
   flottaison.
======================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/fraunces-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('fonts/fraunces-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600 700; font-display: swap; src: url('fonts/fraunces-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 600 700; font-display: swap; src: url('fonts/fraunces-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/jetbrains-mono-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/jetbrains-mono-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ========================
   RESET & BASE
======================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #2A2733;
  --bg-card:      #363141;
  --bg-alt:       #201D28;
  --bg-elevated:  #443E52;
  --accent:       #A681F2;
  --accent-light: #BCA0F7;
  --accent-deep:  #8B5FE6;
  --accent-dim:   rgba(166, 129, 242, 0.12);
  --accent-faint: rgba(166, 129, 242, 0.08);
  --accent-glow:  rgba(188, 160, 247, 0.22);
  --text:         #F2EFF8;
  --text-sub:     #ABA4BE;
  --text-muted:   #9A93B0;
  --border:       rgba(75, 69, 91, 0.35);
  --border-card:  rgba(75, 69, 91, 0.55);
  --border-accent:rgba(166, 129, 242, 0.35);
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    18px;
  --radius-xl:    24px;
  --ease:         cubic-bezier(.4,0,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
}

@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes glow     { 0%,100%{opacity:.12} 50%{opacity:.28} }
@keyframes shimmer  { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes countUp  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
/* Ambiance "encre violette" — mêmes keyframes que le journal (aurora, glow) */
@keyframes aurora1  { from{transform:translate(0,0) scale(1)} to{transform:translate(40px,-30px) scale(1.15)} }
@keyframes aurora2  { from{transform:translate(0,0) scale(1)} to{transform:translate(-50px,40px) scale(1.2)} }
@keyframes glowBreath { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.18) drop-shadow(0 0 18px currentColor)} }

/* Blobs d'ambiance derrière le hero, identiques au journal */
.aurora-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* Dans le hero (1 200 px max), le champ coupait les blobs en deux bords nets :
   on l'étend à toute la largeur de l'écran et on fond son bas dans la section
   suivante. body a déjà overflow-x: hidden, pas de défilement horizontal. */
.hero .aurora-field {
  left: 50%; right: auto; width: 100vw;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
}
.aurora-blob.a1 {
  width: 480px; height: 480px; top: -160px; left: -120px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  animation: aurora1 14s ease-in-out infinite alternate;
}
.aurora-blob.a2 {
  width: 420px; height: 420px; bottom: -140px; right: -100px;
  background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
  animation: aurora2 16s ease-in-out infinite alternate;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(166, 129, 242,.14) 0%, transparent 70%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--bg-alt); }
::-webkit-scrollbar-thumb  { background: var(--accent); border-radius: 3px; }
::selection                { background: rgba(188, 160, 247,.3); color: #fff; }

h1, h2, h3, h4 { font-family: 'Fraunces', serif; line-height: 1.12; }

em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  background: linear-gradient(120deg, #BCA0F7 0%, #BCA0F7 40%, #D5CFE6 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}

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

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ========================
   BUTTONS
======================== */
.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn-login {
  display: inline-block;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-card);
  padding: 9px 20px;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  transition: all .2s var(--ease);
  cursor: pointer;
}
.btn-login:hover { border-color: var(--accent-light); color: var(--accent-light); background: rgba(188, 160, 247,.04); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #A681F2, #BCA0F7);
  /* Texte foncé : le blanc sur #A681F2 plafonnait à 2,98:1, sous le minimum
     de lisibilité (4,5:1). Le fond du site donne 4,90:1 au plus clair. */
  color: var(--bg);
  padding: 13px 28px;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(166, 129, 242,.4), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: box-shadow .25s var(--ease), transform .2s var(--ease);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 100%);
  border-radius: inherit;
  pointer-events: none;
}
.btn-primary:hover {
  box-shadow: 0 8px 36px rgba(166, 129, 242,.6), 0 0 0 1px rgba(255,255,255,.1) inset;
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-sub);
  padding: 13px 28px;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border-accent);
  transition: all .25s var(--ease);
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--accent-light); color: var(--accent-light); background: rgba(188, 160, 247,.06); box-shadow: 0 0 24px rgba(188, 160, 247,.1); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  transition: color .2s;
}
.btn-ghost:hover { color: var(--accent-light); }

.btn-full { width: 100%; text-align: center; font-size: 16px; padding: 16px; justify-content: center; }

/* Icônes (jeu Lucide, tracés copiés en SVG dans le HTML) */
.ico {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.ico-sm { width: 14px; height: 14px; }

/* ========================
   NAVBAR
======================== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 60px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(42, 39, 51,.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: background .3s;
}

.nav-logo { display: flex; align-items: center; gap: 10px; }

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 29px;
  flex-shrink: 0;
}
.logo-box .logo-mark { width: 100%; height: 100%; display: block; object-fit: contain; }
.logo-box--sm { width: 24px; height: 22px; }
.logo-name { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.2px; }

.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { color: var(--text-muted); font-size: 14px; font-weight: 500; transition: color .2s; padding-bottom: 2px; letter-spacing: .1px; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); border-bottom: 2px solid var(--accent-light); }
/* Le bleu Discord (#5865F2) tirait l'œil plus que le bouton d'achat : le
   lien reprend le gris des autres entrées de menu. */
.nav-only-mobile { display: none; }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 201;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========================
   HERO
======================== */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: center;
  gap: 64px;
  padding: 104px 60px 80px;
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeUp .9s var(--ease) both;
}

.hero-left { position: relative; }

/* Ambient glow spots */
.hero::before {
  content: '';
  position: fixed;
  top: -100px; right: -150px;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(166, 129, 242,.13) 0%, transparent 65%);
  pointer-events: none;
  animation: glow 6s ease-in-out infinite;
  z-index: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(166, 129, 242,.18), rgba(188, 160, 247,.1));
  border: 1px solid rgba(188, 160, 247,.25);
  border-radius: 100px;
  padding: 5px 14px 5px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 28px;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 8px var(--accent-light);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.hero-title {
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -1.5px;
  line-height: 1.08;
}

.hero-subtitle {
  font-size: 17px;
  color: var(--text-sub);
  max-width: 520px;
  line-height: 1.8;
  margin-bottom: 40px;
}

.hero-ctas { display: flex; align-items: flex-start; gap: 12px 28px; flex-wrap: wrap; margin-bottom: 40px; }
/* Prix et absence d'engagement collés au bouton : c'est la question que se
   pose le visiteur au moment de cliquer. */
.hero-cta-main { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-microcopy { font-size: 13px; color: var(--text-sub); letter-spacing: .1px; }
/* Même hauteur de ligne que le bouton voisin : les deux libellés s'alignent. */
.hero-ctas .btn-ghost { padding: 13px 0; }

/* Social proof row */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 14px;
}
.social-avatars {
  display: flex;
  margin-right: 4px;
}
.social-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(166, 129, 242,.4), rgba(188, 160, 247,.2));
  border: 2px solid var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--accent-light);
  margin-left: -8px;
  flex-shrink: 0;
}
.social-avatar:first-child { margin-left: 0; }
.hero-social-proof span { font-size: 13px; color: var(--text-muted); }
.hero-social-proof strong { color: var(--text-sub); }

.hero-risk-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 420px;
}
.hero-risk-note .ico { margin-top: 1px; }

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

.hero-card {
  background: linear-gradient(145deg, rgba(54, 49, 65,.98), rgba(42, 39, 51,.95));
  border: 1px solid rgba(166, 129, 242,.22);
  border-radius: var(--radius-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 32px 64px rgba(0,0,0,.5),
    0 0 100px rgba(166, 129, 242,.1);
  animation: float 6s ease-in-out infinite;
}
.hero-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(188, 160, 247,.7), transparent);
}
.hero-card::after {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(166, 129, 242,.15) 0%, transparent 70%);
  pointer-events: none;
}

.card-label { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.card-title { font-size: 21px; font-weight: 700; margin-bottom: 20px; letter-spacing: -.3px; }
.card-divider { height: 1px; background: var(--border); margin-bottom: 4px; }
.card-features { list-style: none; }

.card-features li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  transition: transform .2s var(--ease);
}
.card-features li:last-child { border-bottom: none; }
.card-features li:hover { transform: translateX(5px); }

.feature-text { display: flex; flex-direction: column; gap: 2px; }
.card-features strong { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; }
.card-features span { font-size: 12px; color: var(--text-muted); }

.feature-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(166, 129, 242,.22), rgba(188, 160, 247,.1));
  border: 1px solid rgba(188, 160, 247,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--accent-light);
  flex-shrink: 0;
}
.feature-icon .ico { width: 16px; height: 16px; }

/* ========================
   STATS BAR
======================== */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0 60px 60px;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 60px;
  flex: 1;
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute; left: 0; top: 25%; height: 50%;
  width: 1px; background: var(--border);
}

.stat-number {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(145deg, #F5F1E9 30%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -2px;
}
.stat-plus { font-size: 30px; letter-spacing: 0; }
.stat-accent { color: var(--accent-light); }
.stat-label { font-size: 13px; color: var(--text-muted); margin-top: 8px; letter-spacing: .3px; text-transform: uppercase; font-size: 11px; font-weight: 600; }

/* ========================
   HERO PAGE (sous-pages)
======================== */
.page-hero {
  text-align: center;
  padding: 104px 60px 80px;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  animation: fadeUp .8s var(--ease) both;
}
.page-hero::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse at top, rgba(166, 129, 242,.16) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-title { font-size: clamp(38px, 5vw, 62px); margin-bottom: 20px; letter-spacing: -1.5px; position: relative; }
.page-hero-subtitle { font-size: 17px; color: var(--text-muted); line-height: 1.8; max-width: 580px; margin: 0 auto; position: relative; }

/* ========================
   SECTIONS
======================== */
.section { padding: 96px 60px; max-width: 1200px; margin: 0 auto; }

/* La colonne de 1080 px vient du padding, comme pour .section. Avant, chaque
   enfant était centré séparément (max-width + marges auto) : le badge, inline,
   restait collé à gauche, le titre partait à 1080 px et le sous-titre, limité
   à 560 px, se centrait seul. Trois départs de ligne différents par section. */
.section-alt {
  background: var(--bg-alt);
  max-width: 100%;
  padding: 96px max(60px, calc((100% - 1080px) / 2));
  position: relative;
  overflow: hidden;
}
.section-alt::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 15% 60%, rgba(139, 95, 230,.08) 0%, transparent 55%);
  pointer-events: none;
}
.section-alt > * { position: relative; }

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 18px;
}
.section-badge::before {
  content: '';
  display: inline-block;
  width: 20px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
  flex-shrink: 0;
}

.section-title { font-size: clamp(30px, 3.5vw, 48px); font-weight: 700; margin-bottom: 16px; letter-spacing: -1px; }
.section-subtitle { font-size: 17px; color: var(--text-muted); max-width: 560px; line-height: 1.8; margin-bottom: 56px; }
.section-subtitle a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }

/* ========================
   MÉTHODE — Timeline
======================== */
.method-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
}

.method-timeline::before {
  content: '';
  position: absolute;
  top: 36px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-accent), var(--border-accent), transparent);
  z-index: 0;
}

.method-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  cursor: default;
}

.method-step-num {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(54, 49, 65,1), rgba(68, 62, 82,1));
  border: 1px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  position: relative;
  transition: all .3s var(--ease);
  box-shadow: 0 0 0 6px rgba(166, 129, 242,.06);
}
.method-step-num span {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.method-step:hover .method-step-num {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 8px rgba(166, 129, 242,.1), 0 0 30px rgba(166, 129, 242,.2);
  transform: scale(1.06);
}

.method-step h3, .method-step h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.method-step p { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ========================
   PROGRAMME
======================== */
.programme-list { display: flex; flex-direction: column; }

.programme-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all .2s var(--ease);
  margin: 0 -16px;
}
.programme-item:last-child { border-bottom: none; }
.programme-item:hover { background: rgba(166, 129, 242,.05); }

.programme-num {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(166, 129, 242,.15), rgba(188, 160, 247,.08));
  border: 1px solid rgba(188, 160, 247,.2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 15px;
  flex-shrink: 0;
}

.programme-item h3, .programme-item h4 { font-size: 16px; margin-bottom: 3px; }

/* La Formation n'est pas en vente : le programme reste détaillé, mais son
   statut se lit avant la liste, pour qu'on n'en déduise pas qu'Elite l'inclut. */
.programme-statut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  background: var(--accent-faint);
  border: 1px solid var(--border-card);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 20px;
}
.programme-item p { font-size: 13px; color: var(--text-muted); }

.programme-tag {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
}

/* ========================
   PAIEMENT
======================== */
.pricing-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 940px;
  margin: 0 auto;
}

.pricing-wrapper--single {
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 620px;
}

.pricing-card {
  background: linear-gradient(145deg, rgba(54, 49, 65,.98), rgba(32, 29, 40,.98));
  border-radius: var(--radius-xl);
  padding: 44px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(166, 129, 242,.18), 0 40px 80px rgba(0,0,0,.4);
}

/* Gradient border via pseudo-element */
.pricing-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(145deg, rgba(188, 160, 247,.65), rgba(139, 95, 230,.2) 50%, rgba(188, 160, 247,.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.pricing-card::after {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(166, 129, 242,.18) 0%, transparent 65%);
  pointer-events: none;
}

.pricing-header { margin-bottom: 28px; position: relative; z-index: 1; }

.pricing-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(166, 129, 242,.2), rgba(188, 160, 247,.12));
  border: 1px solid rgba(188, 160, 247,.3);
  color: var(--accent-light);
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.pricing-header h3 { font-size: 26px; margin-bottom: 18px; }

.pricing-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }

.price-amount {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 52px; font-weight: 700; line-height: 1;
  color: var(--text);
  letter-spacing: -2px;
}
/* Symbole plus petit, séparé par une espace fine insécable : le chiffre porte
   le prix, le symbole ne fait que l'unité. */
.price-currency { font-size: .55em; letter-spacing: 0; color: var(--text-sub); margin-left: .08em; }

.price-note { font-size: 13px; color: var(--text-muted); }

.pricing-features {
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 32px;
  position: relative; z-index: 1;
}

/* Alignées en haut : sur deux ou trois lignes, la coche reste face à la
   première ligne au lieu de flotter au milieu du paragraphe. */
.pricing-features li {
  font-size: 15px;
  display: flex; align-items: flex-start; gap: 12px;
}

.check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(166, 129, 242,.25), rgba(188, 160, 247,.15));
  border: 1px solid rgba(188, 160, 247,.3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--accent-light);
  flex-shrink: 0;
  margin-top: 2px;
}
.check .ico { width: 12px; height: 12px; stroke-width: 3; }

.pricing-secure { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 14px; position: relative; z-index: 1; }

/* Teaser Formation "bientôt disponible" */
.pricing-teaser {
  background: rgba(54, 49, 65,.5);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.pricing-teaser-badge {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--accent-dim);
  border: 1px solid var(--border-card);
  border-radius: 100px;
  padding: 5px 12px;
  margin-bottom: 10px;
}

.pricing-teaser h3, .pricing-teaser h4 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 19px;
  margin: 0 0 6px;
  color: var(--text-sub);
}

.pricing-teaser p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  max-width: 420px;
  line-height: 1.5;
}

/* Un vrai lien : l'ancien faux bouton grisé « Bientôt disponible » répétait le
   badge et ne menait nulle part. */
.pricing-teaser-btn {
  background: var(--bg-alt);
  border: 1px solid var(--border-card);
  color: var(--text-sub);
  font-weight: 600;
  font-size: 13.5px;
  padding: 13px 22px;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.pricing-teaser-btn:hover { color: var(--accent-light); border-color: var(--border-accent); }

/* Reassurance */
.pricing-reassurance { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }

.pricing-reassurance-row {
  flex-direction: row;
  max-width: 940px;
  margin: 40px auto 0;
}
.pricing-reassurance-row .reassurance-item { flex: 1; }
@media (max-width: 860px) {
  .pricing-reassurance-row { flex-direction: column; }
}

.reassurance-item {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 22px;
  background: rgba(42, 39, 51,.7);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  transition: all .25s var(--ease);
}
.reassurance-item:hover { border-color: var(--border-accent); background: rgba(166, 129, 242,.06); transform: translateX(6px); }

.reassurance-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, rgba(166, 129, 242,.22), rgba(188, 160, 247,.1));
  border: 1px solid rgba(188, 160, 247,.2);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--accent-light);
  flex-shrink: 0;
}
.reassurance-icon .ico { width: 20px; height: 20px; }

.reassurance-item strong { display: block; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.reassurance-item p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }

/* Badge de rareté dans la nav (offre premium) */
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-radius: 20px;
  vertical-align: middle;
}

/* ========================
   COACHING FONDATEUR (upsell)
======================== */
.coaching-upsell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 40px;
  background: linear-gradient(135deg, rgba(166, 129, 242,.1), rgba(42, 39, 51,.4));
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
  max-width: 1080px;
  margin: 0 auto;
}
.coaching-upsell-text strong { display: block; font-family: 'Fraunces', serif; font-size: 22px; margin-bottom: 6px; }
.coaching-upsell-text p { font-size: 14px; color: var(--text-muted); max-width: 480px; line-height: 1.7; }
.coaching-upsell-cta { flex-shrink: 0; text-align: right; }
.coaching-upsell-cta .btn-outline { white-space: nowrap; }
.coaching-upsell-note { display: block; margin-top: 8px; font-size: 12px; color: var(--accent-light); }

@media (max-width: 720px) {
  .coaching-upsell { flex-direction: column; align-items: flex-start; text-align: left; padding: 28px 24px; }
  .coaching-upsell-cta { text-align: left; }
}

/* ========================
   CGV
======================== */
.cgv-content { display: flex; flex-direction: column; gap: 0; max-width: 780px; }
.cgv-block { padding: 22px 0; border-bottom: 1px solid var(--border); }
.cgv-block:last-child { border-bottom: none; }
.cgv-block h4 { font-size: 15px; font-weight: 600; font-family: 'Inter', sans-serif; margin-bottom: 8px; }
.cgv-block p { font-size: 14px; color: var(--text-muted); line-height: 1.8; }
.cgv-block a { color: var(--accent-light); text-decoration: underline; }

/* ========================
   TÉMOIGNAGES
======================== */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.testimonial-card {
  background: linear-gradient(145deg, rgba(54, 49, 65,.9), rgba(32, 29, 40,.9));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
  transition: all .3s var(--ease);
}
.testimonial-card::before {
  content: '"';
  position: absolute; top: -20px; right: 20px;
  font-family: 'Fraunces', serif;
  font-size: 140px; color: var(--accent-light);
  opacity: .05; line-height: 1;
  pointer-events: none;
  transition: opacity .3s;
}
.testimonial-card:hover { border-color: rgba(188, 160, 247,.22); transform: translateY(-5px); box-shadow: 0 24px 48px rgba(0,0,0,.3), 0 0 48px rgba(166, 129, 242,.07); }
.testimonial-card:hover::before { opacity: .1; }

.testimonial-stars { color: #f5c842; font-size: 13px; letter-spacing: 2px; }
.testimonial-text { font-size: 14px; color: var(--text-muted); line-height: 1.8; font-style: italic; flex: 1; }

.testimonial-author {
  display: flex; align-items: center; gap: 14px;
  padding-top: 16px; border-top: 1px solid var(--border);
}

.author-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(166, 129, 242,.3), rgba(188, 160, 247,.15));
  border: 1px solid rgba(188, 160, 247,.25);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700;
  color: var(--accent-light); flex-shrink: 0;
}

.testimonial-author strong { display: block; font-size: 14px; font-family: 'Inter', sans-serif; }
.testimonial-author span { font-size: 12px; color: var(--text-muted); }

/* ========================
   ÉQUIPE — le générique
   Pas de cartes ni d'avatars : les noms en très grand, comme un générique,
   et une fiche en mono, comme un ticket d'ordre. Monochrome au repos ;
   l'accent ne désigne que la ligne survolée. Accueil et equipe.html.
======================== */
.equipe-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 48px; align-items: end; margin-bottom: 48px;
}
.equipe-tete .section-title { margin-bottom: 0; }
.equipe-intro { font-size: 17px; color: var(--text-muted); line-height: 1.8; }

.generique { list-style: none; margin: 56px 0 0; padding: 0; }
.generique-ligne {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 300px);
  grid-template-areas: "num nom fiche" "num texte fiche";
  column-gap: 32px;
  padding: 40px 0 48px;
  border-top: 1px solid var(--border-card);
  transition: opacity .4s var(--ease);
}
.generique-ligne:last-child { border-bottom: 1px solid var(--border-card); }

.generique-num {
  grid-area: num; padding-top: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500;
  letter-spacing: .04em; color: var(--text-muted);
  transition: color .4s var(--ease);
}
.generique-nom { grid-area: nom; }
.generique-nom h3 {
  font-size: clamp(64px, 9vw, 128px); font-weight: 700;
  line-height: .86; letter-spacing: -.045em;
  transition: transform .5s var(--ease);
}
.generique-point { color: var(--text-muted); transition: color .4s var(--ease); }
.generique-poste {
  margin-top: 18px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--text-sub);
}
.generique-texte {
  grid-area: texte; margin-top: 20px; max-width: 46ch;
  font-size: 16px; line-height: 1.75; color: var(--text-muted);
}

.generique-fiche { grid-area: fiche; align-self: start; margin: 6px 0 0; }
.generique-fiche div {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.generique-fiche div:first-child { border-top: 1px solid var(--border); }
.generique-fiche dt {
  padding-top: 3px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted);
}
.generique-fiche dd { margin: 0; font-size: 15px; color: var(--text); }

/* Un seul moment orchestré : la ligne survolée ressort, les autres s'effacent. */
@media (hover: hover) and (pointer: fine) {
  .generique:hover .generique-ligne:not(:hover) { opacity: .3; }
  .generique-ligne:hover .generique-num,
  .generique-ligne:hover .generique-point { color: var(--accent-light); }
  .generique-ligne:hover .generique-nom h3 { transform: translateX(12px); }
}

.generique-suite { display: inline-flex; margin-top: 32px; color: var(--accent-light); font-weight: 600; font-size: 15px; }
.generique-suite:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ========================
   VALEURS
======================== */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.value-card {
  background: rgba(54, 49, 65,.8);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 36px;
  transition: all .3s var(--ease);
  position: relative; overflow: hidden;
}
.value-card::after { content: ''; position: absolute; bottom: -50px; right: -50px; width: 130px; height: 130px; background: radial-gradient(circle, rgba(166, 129, 242,.12) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity .3s; }
.value-card:hover { border-color: rgba(188, 160, 247,.2); transform: translateY(-5px); box-shadow: 0 24px 48px rgba(0,0,0,.25); }
.value-card:hover::after { opacity: 1; }
.value-icon { font-size: 26px; color: var(--accent-light); margin-bottom: 18px; display: block; }
.value-card h4 { font-size: 19px; margin-bottom: 10px; }
.value-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* ========================
   COMMUNAUTÉ
======================== */
.community-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.community-card {
  background: rgba(54, 49, 65,.8);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 36px;
  transition: all .3s var(--ease);
}
.community-card:hover { border-color: rgba(188, 160, 247,.2); transform: translateY(-5px); box-shadow: 0 24px 48px rgba(0,0,0,.25); }
.community-icon { font-size: 30px; margin-bottom: 16px; display: block; }
.community-card h4 { font-size: 19px; margin-bottom: 10px; }
.community-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }

/* ========================
   STATS BIG
======================== */
.stats-big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }

.stat-big {
  display: flex; flex-direction: column;
  background: rgba(54, 49, 65,.8);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 30px 26px;
  transition: all .3s var(--ease);
  position: relative; overflow: hidden;
}
.stat-big::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); opacity: 0; transition: opacity .3s; }
.stat-big:hover { border-color: rgba(188, 160, 247,.2); }
.stat-big:hover::before { opacity: 1; }

.stat-big-num { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 42px; font-weight: 700; line-height: 1; margin-bottom: 8px; background: linear-gradient(135deg, #fff 40%, var(--accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; }
.stat-big-label { font-size: 13px; color: var(--text-muted); }

/* ========================
   FAQ
======================== */
.faq-category { margin-bottom: 52px; }

.faq-category-title { font-size: 22px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-accent); }

.faq-item { border-bottom: 1px solid var(--border); }

.faq-question {
  width: 100%; background: none; border: none;
  color: var(--text); font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 500; text-align: left;
  padding: 22px 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  transition: color .2s;
}
.faq-question:hover { color: var(--accent-light); }

.faq-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(188, 160, 247,.08); border: 1px solid rgba(188, 160, 247,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--accent-light); flex-shrink: 0;
  transition: transform .3s var(--ease), background .2s;
  line-height: 1;
}
.faq-icon .ico { width: 14px; height: 14px; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-answer p { font-size: 15px; color: var(--text-muted); line-height: 1.8; padding-bottom: 22px; }
.faq-answer a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: rgba(188, 160, 247,.16); }
.faq-item.open .faq-question { color: var(--accent-light); }

/* ========================
   CONTACT
======================== */
.contact-options { display: flex; gap: 20px; flex-wrap: wrap; }

.contact-card {
  display: flex; align-items: center; gap: 18px;
  background: rgba(54, 49, 65,.8); border: 1px solid var(--border-card);
  border-radius: var(--radius-xl); padding: 26px 30px;
  flex: 1; min-width: 220px;
  transition: all .25s var(--ease);
}
.contact-card:hover { border-color: var(--border-accent); background: rgba(166, 129, 242,.06); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.2); }
.contact-icon { width: 46px; height: 46px; background: linear-gradient(135deg, rgba(166, 129, 242,.2), rgba(188, 160, 247,.1)); border: 1px solid rgba(188, 160, 247,.2); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.contact-card strong { display: block; font-size: 15px; margin-bottom: 3px; }
.contact-card span { font-size: 13px; color: var(--text-muted); }

/* ========================
   CTA SECTION
======================== */
.cta-section {
  text-align: center; padding: 100px 60px;
  border-top: 1px solid var(--border);
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--bg-alt) 0%, rgba(30,18,60,.4) 50%, var(--bg-alt) 100%);
}
.cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(166, 129, 242,.2) 0%, transparent 60%); pointer-events: none; }
.cta-section::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; }
.cta-section h2 { font-size: 42px; margin-bottom: 14px; position: relative; z-index: 1; letter-spacing: -1px; }
.cta-section p { font-size: 17px; color: var(--text-muted); margin-bottom: 36px; position: relative; z-index: 1; }
.cta-section .btn-primary, .cta-section .btn-outline { position: relative; z-index: 1; }

/* ========================
   FOOTER
======================== */
.footer {
  border-top: 1px solid var(--border); padding: 48px 60px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  background: var(--bg-alt); position: relative;
}
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(188, 160, 247,.35), transparent); }
.footer-left { display: flex; flex-direction: column; gap: 6px; }
.footer-logo { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.footer-tagline { font-size: 13px; color: var(--text-muted); }
.footer-nav { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.footer-nav a { font-size: 14px; color: var(--text-muted); transition: color .2s; }
.footer-nav a:hover { color: var(--text); }
.footer-legal { font-size: 12px; color: var(--text-muted); text-align: right; line-height: 1.7; }

/* ========================
   LEAD FORM (checklist ICT)
======================== */
.lead-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 480px;
}
.lead-form input[type="email"] {
  flex: 1 1 240px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 13px 16px;
}
.lead-form input[type="email"]:focus { border-color: var(--accent); outline: none; }
.lead-form input[type="email"]::placeholder { color: var(--text-muted); }
.lead-form-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.lead-form-error { font-size: 13px; color: #E88; margin-top: 10px; display: none; }
.lead-form-error.visible { display: block; }

.checklist-locked, .checklist-unlocked { margin-top: 40px; }
.checklist-unlocked { display: none; }
.checklist-items { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.checklist-item {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.checklist-item-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  color: var(--accent-light);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.checklist-item h4 { font-size: 15px; margin-bottom: 4px; }
.checklist-item p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ========================
   PILIER ÉDITORIAL (méthode ICT / glossaire)
======================== */
.pillar-content { max-width: 720px; margin: 0 auto; }
.pillar-content h2 { font-size: 26px; margin: 48px 0 16px; }
.pillar-content h2:first-child { margin-top: 0; }
.pillar-content p { font-size: 15px; line-height: 1.75; color: var(--text-sub); margin-bottom: 16px; }
.pillar-content strong { color: var(--text); }
.pillar-cta {
  margin-top: 56px;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  text-align: center;
}
.pillar-cta p { color: var(--text-muted); margin-bottom: 16px; }

.glossary-list { display: flex; flex-direction: column; gap: 4px; max-width: 720px; margin: 0 auto; }
.glossary-item { padding: 24px 0; border-bottom: 1px solid var(--border); }
.glossary-item:last-child { border-bottom: none; }
.glossary-item dt { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--accent-light); margin-bottom: 8px; }
.glossary-item dd { font-size: 15px; line-height: 1.7; color: var(--text-sub); }
.glossary-item dd a { color: var(--accent-light); }

/* Le glossaire est passé de 11 à 37 termes : sans sommaire ni regroupement,
   la page devient un mur illisible. Les familles reprennent l'ordre des
   modules de la Formation, pour qu'un élève retrouve un terme là où il
   l'a appris. La navbar est sticky sur 90px : sans scroll-margin-top,
   un lien d'ancre amène le terme visé sous la barre. */
.glossary-index { max-width: 720px; margin: 0 auto 56px; display: flex; flex-wrap: wrap; gap: 8px; }
.glossary-index a {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  color: var(--text-sub); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px;
  transition: color .2s, border-color .2s;
}
.glossary-index a:hover { color: var(--accent-light); border-color: var(--accent); }
.glossary-cat { max-width: 720px; margin: 64px auto 20px; scroll-margin-top: 90px; }
.glossary-cat:first-of-type { margin-top: 0; }
.glossary-cat h2 { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.glossary-cat p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.glossary-item { scroll-margin-top: 90px; }

/* ========================
   ACCUEIL — blocs ajoutés le 09/10/2026
======================== */
/* Checklist gratuite : un vrai bloc au lieu d'une ligne de liens sous la frise. */
.checklist-bloc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 64px;
  padding: 32px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
}
.checklist-bloc-texte { display: flex; gap: 20px; align-items: flex-start; }
.checklist-bloc-icone {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-light);
  flex-shrink: 0;
}
.checklist-bloc-icone .ico { width: 22px; height: 22px; }
.checklist-bloc h3 { font-size: 22px; margin-bottom: 6px; }
.checklist-bloc p { font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 520px; }
.checklist-bloc-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.checklist-liens { font-size: 13px; color: var(--text-muted); }
.checklist-liens a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }

/* Photo des fondateurs : déplacée du haut de page (elle repoussait l'offre
   sous la ligne de flottaison) vers la section équipe. */
.equipe-photo {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-card);
  background: var(--bg-card);
}
/* Photo déjà recadrée en 2:1 sur les trois (founders-equipe-*) : aucun
   recadrage CSS, elle s'affiche entière à toutes les largeurs. */
.equipe-photo img { display: block; width: 100%; height: auto; }

/* Pour qui / pas pour qui */
.pour-qui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pour-qui-col {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 32px;
}
.pour-qui-oui { border-color: var(--border-accent); }
.pour-qui-col h3 { font-size: 21px; margin-bottom: 18px; }
.pour-qui-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.pour-qui-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: var(--text-sub); }
.pour-qui-col li .ico { margin-top: 3px; }
.pour-qui-oui li .ico { color: var(--accent-light); }
.pour-qui-non li .ico { color: var(--text-muted); }

/* Extrait de FAQ : les cinq questions qui bloquent un achat. */
.faq-accueil .faq-liste { max-width: 760px; }
.faq-tout { display: inline-flex; margin-top: 28px; color: var(--accent-light); font-weight: 600; font-size: 15px; }
.faq-tout:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Bouton d'inscription fixe sur mobile : visible une fois le hero passé,
   masqué sur la section prix, l'appel final et le pied de page (accueil.js). */
.cta-mobile { display: none; }

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

/* ========================
   RESPONSIVE
======================== */
@media (max-width: 1024px) {
  .generique-ligne { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 250px); column-gap: 24px; }
  .hero { grid-template-columns: 1fr; padding: 64px 32px; gap: 48px; }
  .method-timeline { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .method-timeline::before { display: none; }
  .pricing-wrapper { grid-template-columns: 1fr; max-width: 520px; }
  .stats-big { grid-template-columns: repeat(2, 1fr); }
  .navbar { padding: 16px 32px; }
  .section { padding: 72px 32px; }
  .section-alt { padding: 72px 32px; }
  .stats-bar { gap: 0; }
  .stat { padding: 32px 32px; }
  .hero-right { max-width: 520px; }
  .pour-qui-grid { grid-template-columns: 1fr; }
}

/* Entre 769 et 1280 px, pastille, connexion et menu ne tenaient plus sur
   une ligne : le bouton d'inscription sortait de l'écran. */
@media (max-width: 1280px) {
  .nav-actions .market-status { display: none; }
  .nav-links { gap: 24px; }
  .nav-links a { white-space: nowrap; }
}
@media (max-width: 960px) and (min-width: 769px) {
  .logo-name { display: none; }
  .nav-links { gap: 18px; }
}

@media (max-width: 768px) {
  .navbar { padding: 14px 20px; }
  .nav-burger { display: flex; }
  .nav-actions .market-status, .nav-actions .btn-login { display: none; }
  .nav-actions .btn-primary { padding: 8px 14px; font-size: 13px; gap: 5px; }

  /* backdrop-filter sur .navbar force les descendants position:fixed à se
     caler sur SA boîte (la fine barre de nav) au lieu du viewport entier —
     on le désactive donc pendant que le menu est ouvert (cf. nav.js). */
  body.nav-open .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: var(--bg-alt);
    padding: 100px 32px 40px;
    gap: 8px;
    z-index: 199;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  .nav-links.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
  .nav-links li { border-bottom: 1px solid var(--border); }
  .nav-links a {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 22px;
    padding: 18px 0;
    color: var(--text-sub);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-links a.active { border-bottom: none; color: var(--accent-light); }
  .nav-only-mobile { display: block; }
  .hero { padding: 52px 20px; }
  .hero-title { letter-spacing: -.8px; }
  .stats-bar { flex-wrap: wrap; padding: 0 20px 40px; }
  .stat { padding: 24px 20px; flex: 1 1 40%; }
  .stat + .stat::before { display: none; }
  .section { padding: 60px 20px; }
  .section-alt { padding: 60px 20px; }
  .page-hero { padding: 64px 20px 48px; }
  .method-timeline { grid-template-columns: 1fr; gap: 24px; }
  .values-grid, .community-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .stats-big { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .equipe-tete { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .generique { margin-top: 40px; }
  .generique-ligne { grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "nom" "texte" "fiche"; padding: 28px 0 36px; }
  .generique-num { padding-top: 0; margin-bottom: 14px; }
  .generique-nom h3 { font-size: clamp(56px, 19vw, 88px); }
  .generique-fiche { margin-top: 24px; }
  .footer { grid-template-columns: 1fr; text-align: center; padding: 36px 20px; gap: 24px; }
  .footer-legal { text-align: center; }
  .footer-nav { justify-content: center; }
  .cta-section { padding: 64px 20px; }
  .pricing-card { padding: 28px 22px; }
  .programme-item { grid-template-columns: 40px 1fr; }
  .programme-tag { display: none; }

  /* Hero : bouton pleine largeur, prix dessous, lien secondaire en dernier. */
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 4px; }
  .hero-cta-main { align-items: stretch; }
  .hero-cta-main .btn-primary { justify-content: center; }
  .hero-microcopy { text-align: center; }
  .hero-ctas .btn-ghost { justify-content: center; }
  .hero-card { padding: 28px 24px; }

  .checklist-bloc { flex-direction: column; align-items: flex-start; padding: 26px 22px; margin-top: 48px; }
  .checklist-bloc-actions { align-items: flex-start; }
  .pour-qui-col { padding: 26px 22px; }

  .cta-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 150;
    padding: 10px 10px 10px 18px;
    background: rgba(32, 29, 40, .92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-accent);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  .cta-mobile.visible {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  body.nav-open .cta-mobile { visibility: hidden; opacity: 0; }
  .cta-mobile-texte { display: flex; flex-direction: column; line-height: 1.25; }
  .cta-mobile-texte strong { font-size: 15px; }
  .cta-mobile-texte span { font-size: 12px; color: var(--text-sub); }
  .cta-mobile .btn-primary { padding: 11px 18px; font-size: 14px; }
}

/* Animations décoratives coupées pour qui a demandé moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}