/* ================================================
   CLARA MARTINEZ — DESIGN SYSTEM 2026
   Dark-first · Glassmorphism · Bento Grid · Aurora
   ================================================ */

/* ================================================
   VARIABLES CSS (DESIGN TOKENS)
   Définit toutes les valeurs réutilisables du système
   de design : couleurs, typographies, espacements,
   ombres, transitions et breakpoints.
   ================================================ */
:root {
  --bg:         #08080F;
  --bg-2:       #0D0D1A;
  --surface:    rgba(255,255,255,0.04);
  --border:     rgba(255,255,255,0.08);
  --gold:       #C9A84C;
  --gold-lt:    #E8D49A;
  --gold-dk:    #A8863A;
  --gold-glow:  rgba(201,168,76,0.25);
  --white:      #F5F0E8;
  --muted:      rgba(245,240,232,0.5);
  --dim:        rgba(245,240,232,0.25);
  --error:      #F87171;
  --success:    #4ADE80;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;
  --radius-sm:  8px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --shadow-glow: 0 0 60px rgba(201,168,76,0.12);
  --shadow-card: 0 24px 64px rgba(0,0,0,0.4);
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --max-w:      1160px;
}

/* ================================================
   RESET
   Normalise les marges, paddings et box-sizing.
   Configure le scroll fluide, la police de base,
   le fond sombre et masque le curseur natif.
   ================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
  overscroll-behavior-y: smooth;
}
@media (pointer: coarse) { body { cursor: auto; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1,h2,h3,h4 { font-family: var(--font-serif); line-height: 1.1; }

/* ================================================
   CANVAS AURORA (FOND ANIMÉ)
   Le canvas #water-canvas occupe tout l'écran en
   position fixe derrière tout le contenu. Il est
   animé par la classe AuroraBorealis dans main.js.
   ================================================ */
#water-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* ================================================
   OVERLAY BRUIT (NOISE)
   Texture grain SVG en position fixe superposée
   à tout le contenu (z-index élevé) pour simuler
   un bruit de film analogique. Opacité très basse
   pour ne pas masquer le contenu.
   ================================================ */
.noise {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ================================================
   CURSEUR PERSONNALISÉ
   Double-calque : un point doré centré sur la souris
   et un anneau suiveur avec inertie. Le curseur change
   de taille et de style au survol des éléments
   interactifs et des zones de texte.
   Masqué sur les écrans tactiles (pointer: coarse).
   ================================================ */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, width 0.3s, height 0.3s, opacity 0.3s;
  mix-blend-mode: difference;
}
.cursor-follower {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, width 0.4s, height 0.4s, opacity 0.4s;
}
.cursor.hovered { width: 20px; height: 20px; }
.cursor-follower.hovered { width: 60px; height: 60px; opacity: 0.5; }
.cursor.text-hovered {
  width: 44px; height: 44px;
  background: #fff;
  transition: width 0.25s cubic-bezier(0.25,0.46,0.45,0.94),
              height 0.25s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity 0.2s;
}
.cursor-follower.text-hovered { opacity: 0; }
@media (pointer: coarse) { .cursor, .cursor-follower { display: none; } }

/* ================================================
   AURORA CSS (DÉCORATION HERO & CONTACT)
   Orbes flous animés (.aurora .a1/.a2/.a3/.a4)
   positionnés en absolu dans les sections hero
   et contact pour créer un halo coloré en arrière-plan.
   Animés avec keyframe drift en boucle alternée.
   ================================================ */
.hero-aurora, .contact-aurora {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  pointer-events: none;
}
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: drift 12s ease-in-out infinite alternate;
}
.a1 { width: 600px; height: 600px; top: -200px; left: -150px; background: radial-gradient(circle, #C9A84C 0%, transparent 70%); animation-duration: 14s; }
.a2 { width: 500px; height: 500px; top: 100px; right: -100px; background: radial-gradient(circle, #6B3FA0 0%, transparent 70%); opacity: 0.2; animation-duration: 10s; animation-delay: -3s; }
.a3 { width: 400px; height: 400px; bottom: -100px; left: 40%; background: radial-gradient(circle, #1A6B8A 0%, transparent 70%); opacity: 0.18; animation-duration: 16s; animation-delay: -6s; }
.a4 { width: 700px; height: 700px; top: -200px; right: -200px; background: radial-gradient(circle, #C9A84C 0%, transparent 70%); opacity: 0.25; }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.1); }
}

/* ================================================
   GLASSMORPHISM
   Classe utilitaire appliquée aux cartes pour
   créer l'effet verre dépoli : fond semi-transparent,
   bordure subtile et flou de l'arrière-plan.
   ================================================ */
.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ================================================
   LAYOUT
   Conteneur centré à largeur maximale et sections
   avec padding vertical uniforme.
   ================================================ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 7rem 0; }

/* ================================================
   TYPOGRAPHIE — COMPOSANTS SECTION
   Styles pour les éléments de titre de section :
   label (étiquette dorée en majuscules), titre
   principal, sous-titre et conteneur section-header.
   ================================================ */
.section-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.section-title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin-bottom: 1.25rem;
  color: var(--white);
}
.section-title em { font-style: normal; color: var(--gold); }
.section-sub { font-size: 1.05rem; color: var(--muted); max-width: 560px; }
.section-header { margin-bottom: 4rem; }
.section-header.center { text-align: center; }
.section-header.center .section-sub { margin: 0 auto; }

/* ================================================
   BOUTONS
   Trois variantes de boutons : primary (doré plein),
   ghost (contour transparent), nav (doré discret).
   Tous incluent un effet de survol et un pseudo-élément
   pour le flash de lumière. Classe .full pour largeur 100%.
   Classe .magnetic gérée par JS pour l'effet d'attraction.
   ================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: none;
  transition: all var(--transition);
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
@media (pointer: coarse) { .btn { cursor: pointer; } }
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.06);
  opacity: 0;
  transition: opacity var(--transition);
}
.btn:hover::before { opacity: 1; }

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dk));
  color: #0D0D1A;
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(201,168,76,0.3);
}
.btn-primary:hover { box-shadow: 0 12px 48px rgba(201,168,76,0.5); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.15);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-nav {
  background: rgba(201,168,76,0.1);
  color: var(--gold);
  border-color: rgba(201,168,76,0.3);
  padding: 0.65rem 1.25rem;
  font-size: 0.85rem;
}
.btn-nav:hover { background: var(--gold); color: #0D0D1A; }

.btn.full { width: 100%; justify-content: center; }

/* Effet magnétique géré par le JS */
.magnetic { transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow var(--transition); }

/* ================================================
   ANIMATIONS AU SCROLL
   Classe de base .animate (opacité 0, décalé vers
   le bas) et .visible (état final visible).
   Les classes .delay-N ajoutent un délai de transition
   pour créer un effet de cascade entre éléments.
   ================================================ */
.animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.animate.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.35s; }
.delay-4 { transition-delay: 0.5s; }

/* ================================================
   HEADER / NAVIGATION
   Header fixe en haut de page qui devient opaque
   (effet blur + fond sombre) après 60px de scroll.
   Navigation horizontale avec liens soulignés au survol,
   logo serif et bouton CTA à droite.
   ================================================ */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.5rem 0;
  transition: all var(--transition);
}
#header.scrolled {
  background: rgba(8,8,15,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 1rem 0;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.02em;
}
.logo-dot { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 2rem; }
.nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  transition: color var(--transition);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* Burger menu (non utilisé — masqué par CSS) */
.burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none; border: none;
  cursor: pointer; padding: 0.5rem; z-index: 1100;
}
.burger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--white); border-radius: 2px;
  transition: all 0.35s ease;
}
.burger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.active span:nth-child(2) { transform: translateY(-7.5px) rotate(-45deg); }

/* Menu mobile (non utilisé — masqué par CSS) */
.mobile-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(8,8,15,0.97);
  backdrop-filter: blur(30px);
  z-index: 999;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem;
}
.mobile-menu.open { display: flex; }
.mobile-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none; color: var(--white);
  cursor: pointer; padding: 0.5rem;
  transition: color var(--transition);
}
.mobile-close:hover { color: var(--gold); }
.mobile-link {
  font-family: var(--font-serif);
  font-size: 2rem; font-weight: 700;
  color: var(--white);
  transition: color var(--transition);
}
.mobile-link:hover { color: var(--gold); }

/* ================================================
   HERO SECTION
   Section plein écran avec grille 2 colonnes :
   texte à gauche, bento grid à droite.
   Inclut les orbes aurora en arrière-plan, le badge,
   le titre principal, sous-titre, CTA et indicateur scroll.
   ================================================ */
#hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 6rem; overflow: hidden;
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 50px;
  padding: 0.5rem 1.1rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}
.badge-dot {
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.4); }
}
.hero-title {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.0;
  margin-bottom: 1.75rem;
  color: var(--white);
}
.hero-title em { font-style: normal; color: var(--gold); }
.hero-sub {
  font-size: 1.1rem; color: var(--muted);
  max-width: 480px; margin-bottom: 2.5rem; line-height: 1.8;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hero-note {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--dim);
}
.hero-note i { color: var(--gold); }

/* ================================================
   BENTO GRID (HERO)
   Grille 2×3 dans le hero avec :
   - Carte principale (avatar + nom + étoiles)
   - 2 cartes statistiques (nombre + label)
   - Barre de progression satisfaction
   ================================================ */
.hero-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 1rem;
}
.bento-card {
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.bento-main {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 1.5rem;
}
.bento-avatar { width: 90px; height: 90px; flex-shrink: 0; }
.bento-avatar svg { width: 100%; height: 100%; }
.bento-name { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--white); }
.bento-title-tag { font-size: 0.78rem; color: var(--muted); margin: 0.2rem 0 0.4rem; }
.bento-stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.1em; }

.bento-stat {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.bento-stat-num {
  font-family: var(--font-serif); font-size: 2rem;
  font-weight: 900; color: var(--white); line-height: 1;
}
.bento-stat-lbl { font-size: 0.75rem; color: var(--muted); }

.bento-wide { grid-column: 1 / -1; }
.bento-wide-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.6rem; letter-spacing: 0.05em; }
.bento-progress-bar {
  height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 4px; margin-bottom: 0.6rem; overflow: hidden;
}
.bento-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt));
  border-radius: 4px;
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.bento-wide-stat { font-size: 0.82rem; font-weight: 600; color: var(--white); }

/* Indicateur de scroll (ligne animée + texte "Défiler") */
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; z-index: 1;
}
.scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.5); opacity: 0.3; }
}
.hero-scroll span { font-size: 0.7rem; color: var(--dim); letter-spacing: 0.15em; text-transform: uppercase; }

/* ================================================
   MARQUEE (DÉFILEMENT PRESSE)
   Bandeau de défilement horizontal infini affichant
   les noms des médias où Clara a été citée.
   Animation CSS pure, pausée au survol via JS.
   ================================================ */
#social-proof {
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  background: rgba(255,255,255,0.015);
}
.marquee-wrap { overflow: hidden; }
.marquee-track {
  display: flex; gap: 0; white-space: nowrap;
  animation: marquee 28s linear infinite;
}
.marquee-item {
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 700;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.08em;
  padding: 0 2rem;
  transition: color var(--transition);
}
.marquee-item:hover { color: rgba(255,255,255,0.45); }
.marquee-sep { color: var(--gold); opacity: 0.35; align-self: center; font-size: 0.6rem; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================
   STATS BENTO
   Grille de 4 cartes chiffres clés (entrepreneurs,
   satisfaction, croissance, années). Chaque carte a
   une ligne dorée en haut et un effet hover de levée.
   ================================================ */
#stats { padding: 5rem 0; }
.stats-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.stats-card {
  border-radius: var(--radius-lg); padding: 2rem 1.75rem;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem;
  flex-direction: row;
  position: relative; overflow: hidden;
  transition: transform var(--transition);
}
.stats-card:hover { transform: translateY(-4px); }
.stats-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
}
.stats-num {
  font-family: var(--font-serif); font-size: 3rem;
  font-weight: 900; color: var(--gold); line-height: 1;
  width: 100%;
}
.stats-plus { font-family: var(--font-serif); font-size: 2rem; color: var(--gold); font-weight: 700; }
.stats-label { font-size: 0.8rem; color: var(--muted); width: 100%; margin-top: 0.3rem; }

/* ================================================
   PAIN POINTS BENTO
   Grille de 3 cartes présentant les blocages des
   freelances (sous-facturation, pas de système,
   solitude). Chaque carte a un numéro en filigrane,
   une icône, un titre, texte et citation stylisée.
   ================================================ */
.pain-bento {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.pain-card {
  border-radius: var(--radius-lg); padding: 2.5rem 2rem;
  position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pain-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.pain-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.pain-card:hover::after { opacity: 1; }
.pain-num {
  font-family: var(--font-serif); font-size: 5rem; font-weight: 900;
  color: rgba(255,255,255,0.04); line-height: 1;
  position: absolute; top: 1rem; right: 1.5rem;
  user-select: none;
}
.pain-icon-wrap {
  width: 52px; height: 52px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); margin-bottom: 1.5rem;
}
.pain-title { font-size: 1.2rem; margin-bottom: 0.85rem; color: var(--white); }
.pain-text { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.25rem; line-height: 1.7; }
.pain-quote {
  padding: 1rem 1.25rem;
  background: rgba(201,168,76,0.05);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem; font-style: italic; color: var(--gold-lt);
  line-height: 1.6;
}

/* ================================================
   METHOD GRID
   Grille de 3 cartes pour les piliers de la méthode
   Clarity (Positionnement, Pricing, Acquisition).
   Chaque carte a un numéro, icône, description,
   liste de livrables et barre de progression animée.
   ================================================ */
.method-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.method-card {
  border-radius: var(--radius-lg); padding: 2.5rem 2rem;
  position: relative;
  transition: transform var(--transition);
}
.method-card:hover { transform: translateY(-6px); }
.method-step {
  font-family: var(--font-serif); font-size: 4rem; font-weight: 900;
  color: rgba(201,168,76,0.08); line-height: 1;
  position: absolute; top: 1.5rem; right: 1.5rem; user-select: none;
}
.method-icon {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05));
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); margin-bottom: 1.5rem;
}
.method-name { font-size: 1.4rem; margin-bottom: 0.75rem; color: var(--white); }
.method-desc { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.7; }
.method-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.75rem; }
.method-list li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.85rem; color: var(--muted);
}
.method-list li::before { content: '✦'; color: var(--gold); font-size: 0.6rem; margin-top: 0.35rem; flex-shrink: 0; }
.method-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.method-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt));
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================================================
   PRICING GRID
   Grille de 3 cartes tarifs (Session, Programme 3 Mois,
   VIP). La carte centrale est mise en avant (badge,
   bordure or, fond légèrement teinté). Chaque carte
   contient tag, titre, prix, features et CTA.
   ================================================ */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; align-items: stretch;
}
.pricing-card {
  border-radius: var(--radius-lg); padding: 2.5rem 2rem;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pricing-card:hover { transform: translateY(-6px); }

.pricing-featured {
  border-color: rgba(201,168,76,0.35) !important;
  background: rgba(201,168,76,0.05) !important;
  box-shadow: 0 0 0 1px rgba(201,168,76,0.2), var(--shadow-card) !important;
}
.featured-badge {
  position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt));
  color: #0D0D1A; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 1.25rem; border-radius: 50px;
  white-space: nowrap;
}
.pricing-tag {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--gold); padding: 0.3rem 0.85rem;
  border-radius: 50px; margin-bottom: 1.25rem;
  width: fit-content;
}
.pricing-name { font-size: 1.4rem; margin-bottom: 0.6rem; color: var(--white); }
.pricing-desc { font-size: 0.88rem; color: var(--muted); margin-bottom: 1.75rem; line-height: 1.6; }
.pricing-price-wrap { display: flex; align-items: flex-start; gap: 0.15rem; margin-bottom: 0.35rem; }
.pricing-price-wrap sup { font-size: 1.2rem; color: var(--gold); margin-top: 0.5rem; font-weight: 600; }
.pricing-price { font-family: var(--font-serif); font-size: 3.2rem; font-weight: 900; color: var(--white); line-height: 1; }
.pricing-cycle { font-size: 0.8rem; color: var(--dim); margin-bottom: 2rem; }
.pricing-features { flex: 1; display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; }
.pricing-features li {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.88rem; color: var(--muted);
}
.pricing-features li i { color: var(--gold); flex-shrink: 0; width: 16px; height: 16px; }

/* ================================================
   SECTION À PROPOS
   Grille 2 colonnes : visuel (illustration + badge
   "8 ans") à gauche, contenu textuel à droite.
   Valeurs affichées en grille 2×2 avec icônes.
   ================================================ */
.about-grid {
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 5rem; align-items: center;
}
.about-visual { position: relative; }
.about-frame {
  border-radius: 30px 30px 80px 30px; overflow: hidden;
  aspect-ratio: 3/4; display: flex; align-items: flex-end; justify-content: center;
}
.about-frame svg { width: 80%; }
.about-badge {
  position: absolute; top: 2.5rem; right: -2rem;
  border-radius: var(--radius); padding: 1.25rem 1.5rem; text-align: center;
}
.about-badge-num { font-family: var(--font-serif); font-size: 2rem; color: var(--gold); font-weight: 900; line-height: 1; }
.about-badge-lbl { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.4; }
.about-deco {
  position: absolute; bottom: -2rem; left: -2rem;
  width: 140px; height: 140px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  opacity: 0.06; z-index: -1;
}
.about-text { font-size: 1rem; color: var(--muted); margin-bottom: 1.1rem; line-height: 1.8; }
.about-text strong { color: var(--white); font-weight: 600; }
.about-values { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.5rem; }
.about-value { display: flex; align-items: flex-start; gap: 0.75rem; }
.av-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.about-value strong { display: block; font-size: 0.88rem; color: var(--white); font-weight: 600; margin-bottom: 0.2rem; }
.about-value span { font-size: 0.8rem; color: var(--muted); }

/* ================================================
   TÉMOIGNAGES
   Grille 2×2 de cartes témoignages avec :
   badge résultat, citation, auteur (avatar initiales
   + nom + rôle + étoiles). Effet hover de levée.
   ================================================ */
.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.testi-card {
  border-radius: var(--radius-lg); padding: 2.5rem;
  position: relative; overflow: hidden;
  transition: transform var(--transition);
}
.testi-card:hover { transform: translateY(-4px); }
.testi-result {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  color: var(--gold); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 0.3rem 0.85rem;
  border-radius: 50px; margin-bottom: 1.25rem;
}
.testi-text {
  font-size: 0.95rem; line-height: 1.8;
  color: var(--muted); font-style: italic;
  margin-bottom: 1.75rem;
}
.testi-author { display: flex; align-items: center; gap: 1rem; }
.testi-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dk), var(--gold-lt));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1rem; font-weight: 700;
  color: #0D0D1A; flex-shrink: 0;
}
.testi-name { font-weight: 600; font-size: 0.9rem; color: var(--white); }
.testi-role { font-size: 0.78rem; color: var(--dim); }
.testi-stars { color: var(--gold); font-size: 0.8rem; margin-top: 0.15rem; letter-spacing: 0.05em; }

/* ================================================
   FAQ (ACCORDÉON)
   Liste de questions/réponses en accordéon.
   Chaque item a un bouton avec icône + qui tourne
   lors de l'ouverture. Le corps se révèle par
   transition max-height CSS.
   ================================================ */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.06); }
.faq-btn {
  width: 100%; background: none; border: none;
  text-align: left; padding: 1.75rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-serif); font-size: 1.05rem;
  color: var(--white); cursor: pointer;
  transition: color var(--transition);
}
.faq-btn:hover { color: var(--gold); }
.faq-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  transition: all var(--transition);
}
.faq-item.open .faq-icon { background: var(--gold); color: #0D0D1A; transform: rotate(45deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
.faq-item.open .faq-body { max-height: 400px; }
.faq-body-inner { padding-bottom: 1.75rem; font-size: 0.95rem; color: var(--muted); line-height: 1.8; }

/* ================================================
   SECTION CONTACT
   Grille 2 colonnes : informations contact à gauche,
   formulaire à droite. L'aurora décorative en fond.
   ================================================ */
#contact { position: relative; overflow: hidden; }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
  position: relative; z-index: 1;
}
.contact-sub { font-size: 1rem; color: var(--muted); line-height: 1.7; margin-bottom: 0; }
.contact-feats { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-feat { display: flex; align-items: flex-start; gap: 1rem; }
.cf-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
}
.contact-feat strong { display: block; font-size: 0.9rem; color: var(--white); font-weight: 600; margin-bottom: 0.15rem; }
.contact-feat span { font-size: 0.82rem; color: var(--dim); }

/* ================================================
   FORMULAIRE DE CONTACT
   Formulaire glassmorphisme avec labels, inputs,
   textarea et select stylisés. États focus (or),
   error (rouge) et valid (vert). Message de succès
   superposé en position absolue après soumission.
   ================================================ */
.contact-form-wrap { position: relative; }
.contact-form {
  border-radius: var(--radius-lg); padding: 2.5rem;
  display: flex; flex-direction: column; gap: 0;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; font-size: 0.78rem; font-weight: 600;
  color: var(--muted); margin-bottom: 0.5rem; letter-spacing: 0.05em;
}
.form-group label span { color: var(--gold); }
.form-control {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-family: var(--font-sans); font-size: 0.9rem;
  color: var(--white); outline: none;
  transition: all var(--transition);
}
.form-control::placeholder { color: rgba(245,240,232,0.2); }
.form-control:focus { border-color: var(--gold); background: rgba(201,168,76,0.04); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); }
.form-control.error { border-color: var(--error); }
.form-control.valid { border-color: rgba(74,222,128,0.4); }
textarea.form-control { resize: vertical; min-height: 130px; }
.form-err { display: none; font-size: 0.76rem; color: var(--error); margin-top: 0.4rem; }
.form-err.show { display: block; }

.form-success {
  display: none; position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3rem; gap: 1rem;
}
.form-success.show { display: flex; }
.success-icon { color: var(--success); }
.form-success h3 { font-family: var(--font-serif); font-size: 1.6rem; color: var(--white); }
.form-success p { color: var(--muted); font-size: 0.95rem; }

/* ================================================
   FOOTER
   Bande de bas de page avec logo, liens et copyright.
   Fond légèrement assombri, séparé par une bordure.
   ================================================ */
footer {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 2.5rem 0;
  background: rgba(0,0,0,0.3);
}
.footer-inner {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.footer-logo { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 900; color: var(--white); }
.footer-logo span { color: var(--gold); }
.footer-links { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.footer-links a { font-size: 0.82rem; color: var(--dim); transition: color var(--transition); }
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 0.78rem; color: var(--dim); }

/* ================================================
   BURGER / MENU MOBILE — DÉSACTIVÉS
   Ces éléments sont masqués globalement car la
   navigation mobile est remplacée par la bottom nav.
   ================================================ */
.burger      { display: none !important; }
.mobile-menu { display: none !important; }

/* ================================================
   BOTTOM NAVIGATION (MOBILE)
   Barre de navigation fixe en bas d'écran, visible
   uniquement en dessous de 768px. 5 liens avec icône
   et libellé. Le lien "Appel" a un style CTA doré.
   ================================================ */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(8,8,15,0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bnav-inner {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
}
.bnav-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 0.65rem 0.5rem;
  flex: 1; min-width: 0;
  font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
  transition: color var(--transition);
  position: relative;
  text-align: center;
}
.bnav-link::after {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--gold); border-radius: 0 0 3px 3px;
  transition: width 0.3s ease;
}
.bnav-link:hover, .bnav-link.active { color: var(--gold); }
.bnav-link.active::after, .bnav-link:hover::after { width: 28px; }
.bnav-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-dk));
  color: #0D0D1A !important;
  border-radius: 12px;
  margin: 0.3rem 0.35rem;
  padding: 0.5rem 0.75rem;
  flex: 0 0 auto;
}
.bnav-cta::after { display: none; }
.bnav-cta:hover { opacity: 0.88; }

/* ================================================
   MEDIA QUERIES RESPONSIVE
   Breakpoints principaux : 1024px (tablette large),
   900px (tablette), 768px (mobile — active bottom nav),
   480px (petits mobiles), 375px (très petits écrans).
   ================================================ */
@media (max-width: 1024px) {
  .stats-bento    { grid-template-columns: repeat(2, 1fr); }
  .testi-grid     { grid-template-columns: 1fr; }
  .pricing-grid   { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pricing-featured { order: -1; }
  .about-grid     { grid-template-columns: 1fr; gap: 3rem; }
  .about-visual   { max-width: 360px; margin: 0 auto; }
  .about-badge    { right: -0.5rem; }
  .about-values   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-links { gap: 1.2rem; }
  .nav-link  { font-size: 0.82rem; }
}

@media (max-width: 768px) {
  body { padding-bottom: 72px; }
  .bottom-nav { display: block; }

  .nav-links, .nav > a.btn-nav { display: none; }
  .section  { padding: 4.5rem 0; }
  .container { padding: 0 1.25rem; }
  .section-header { margin-bottom: 2.5rem; }

  /* Hero */
  .hero-scroll  { display: none; }
  .hero-inner   { grid-template-columns: 1fr; text-align: center; gap: 2.5rem; }
  .hero-sub, .hero-note { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 320px; justify-content: center; }
  .hero-badge   { margin-left: auto; margin-right: auto; }
  .hero-bento   { max-width: 400px; margin: 0 auto; }
  .hero-title   { font-size: clamp(2.4rem, 8vw, 3.2rem); }

  /* Grilles */
  .pain-bento   { grid-template-columns: 1fr; }
  .method-grid  { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-info, .contact-form-wrap { min-width: 0; max-width: 100%; }
  .contact-form { overflow: hidden; }
  .contact-feats { gap: 1.1rem; }
  .form-row     { grid-template-columns: 1fr; }
  .stats-bento  { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }

  /* Cartes */
  .pain-card, .method-card, .testi-card { padding: 1.75rem 1.5rem; }
  .pricing-card  { padding: 2rem 1.5rem; }
  .contact-form  { padding: 1.75rem 1.5rem; }
}

@media (max-width: 480px) {
  body { padding-bottom: 68px; }
  .container { padding: 0 1rem; }

  .section   { padding: 3.5rem 0; }
  .hero-title    { font-size: clamp(2rem, 9vw, 2.6rem); }
  .section-title { font-size: clamp(1.75rem, 6vw, 2.2rem); }

  .bento-main   { flex-direction: column; text-align: center; }
  .stats-bento  { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .stats-card   { padding: 1.5rem 1rem; }
  .stats-num    { font-size: 2.2rem; }
  .hero-bento   { max-width: 100%; }
  .pricing-grid { max-width: 100%; }
  .about-values { grid-template-columns: 1fr; }
  .nav-logo     { font-size: 1.35rem; }
  .pain-card, .method-card { padding: 1.5rem 1.25rem; }
}

@media (max-width: 375px) {
  .bnav-link  { font-size: 0.52rem; padding: 0.6rem 0.3rem; }
  .container  { padding: 0 0.875rem; }
}

/* ================================================
   SCROLLBAR WEBKIT
   Personnalisation de la scrollbar dans les
   navigateurs Chromium/Safari : fine, dorée.
   ================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ================================================
   FOCUS (ACCESSIBILITÉ)
   Outline doré visible sur tous les éléments
   focusables au clavier pour respecter les standards
   WCAG d'accessibilité.
   ================================================ */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}