/* =============================================================
   OXXY Landing — Style v6 (vraies pièces puzzle, fade+reveal,
   palette NS Gestion patterns, signature partout, plus d'amour)
   ============================================================= */

:root {
  --oxxy-yellow: #FCD000;
  --oxxy-yellow-soft: #FDE68A;
  --oxxy-magenta: #EC1E5F;
  --oxxy-magenta-soft: #FBCFE8;
  --oxxy-cyan: #1FC6E5;
  --oxxy-cyan-soft: #BAE6FD;
  --oxxy-black: #000000;
  --oxxy-grey-950: #050505;
  --oxxy-grey-900: #0a0a0c;
  --oxxy-grey-880: #111114;
  --oxxy-grey-850: #16161a;
  --oxxy-grey-800: #1c1c22;
  --oxxy-grey-750: #24242c;
  --oxxy-grey-700: #2c2c36;
  --oxxy-grey-500: #6e6e7a;
  --oxxy-grey-400: #86868b;
  --oxxy-grey-300: #a1a1a6;
  --oxxy-grey-200: #d2d2d7;
  --oxxy-grey-100: #f5f5f7;
  --oxxy-white: #f5f5f7;

  --font-sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
               system-ui, "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --max-w: 1200px;
  --pad-x: clamp(1.5rem, 5vw, 5rem);

  --radius-card: 28px;
  --radius-pill: 999px;

  --grad-oxxy: linear-gradient(95deg, var(--oxxy-yellow) 0%, var(--oxxy-magenta) 60%, #FF6BB5 100%);
  --grad-oxxy-anim: linear-gradient(95deg, #FCD000, #EC1E5F, #FF6BB5, #1FC6E5, #FCD000);

  --chess-light: #f5f5f7;
  --chess-dark: #1c1c1e;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-sans);
  background: var(--oxxy-black);
  color: var(--oxxy-white);
  line-height: 1.47059;
  font-weight: 600;
  letter-spacing: -0.022em;
  font-feature-settings: "kern" 1, "ss01" 1, "ss02" 1, "cv01" 1, "cv11" 1;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, button { font-family: inherit; }
ul, ol { list-style: none; }
em { font-style: normal; }
strong { font-weight: 800; }
sup { font-size: 0.55em; vertical-align: super; line-height: 0; }
::selection { background: var(--oxxy-yellow); color: var(--oxxy-black); }

main { position: relative; z-index: 1; }

/* ===================== TEXT GRADIENT — signature ===================== */
.text-gradient {
  background: var(--grad-oxxy);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: gradShift 8s ease-in-out infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===================== BACKGROUND — sober glow seulement ===================== */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.10;
}
.glow-1 { width: 50vw; height: 50vw; background: var(--oxxy-yellow); top: -25vw; left: -10vw; }
.glow-2 { width: 45vw; height: 45vw; background: var(--oxxy-cyan); bottom: -20vw; right: -10vw; }
.glow-3 { width: 35vw; height: 35vw; background: var(--oxxy-magenta); top: 50%; left: 35%; transform: translate(-50%, -50%); }

/* ===================== HEADER (logo signature) ===================== */
.site-header {
  position: fixed;
  top: 1.4rem;
  left: 1.6rem;
  z-index: 90;
}
.brand-mark img {
  width: 84px;
  height: auto;
  opacity: 0.95;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.brand-mark:hover img { opacity: 1; transform: scale(1.05); }
@media (max-width: 640px) {
  .brand-mark img { width: 64px; }
  .site-header { top: 1rem; left: 1rem; }
}

/* ===================== STICKY OVERSUBSCRIBED ===================== */
.oversubscribed {
  position: fixed;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 90;
  pointer-events: none;
}
.oversubscribed-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--oxxy-magenta);
  color: var(--oxxy-white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 28px rgba(236, 30, 95, 0.45),
              0 0 0 1px rgba(255,255,255,0.06);
  white-space: nowrap;
}
.oversubscribed-badge .dot {
  width: 7px; height: 7px;
  background: var(--oxxy-yellow);
  border-radius: 50%;
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.6; }
}

.screen {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem var(--pad-x);
  position: relative;
}

/* ============================== HERO PUZZLE ============================== */
.hero {
  height: 250svh;
  position: relative;
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem var(--pad-x) 3rem;
  overflow: hidden;
}

.hero-puzzle-stage {
  position: relative;
  width: min(82vw, 640px);
  aspect-ratio: 6 / 4;
  margin-bottom: 2.5rem;
}

.puzzle-svg-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.puzzle-svg-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Pièces puzzle */
.puzzle-piece {
  transform-origin: center;
  will-change: transform, opacity;
  transition: filter 0.5s ease;
}
.puzzle-piece path {
  fill: var(--oxxy-grey-880);
  stroke: var(--oxxy-grey-700);
  stroke-width: 1.3;
  transition: fill 1s ease, stroke 1s ease, filter 0.5s ease;
}
.puzzle-piece.energized path {
  fill: var(--oxxy-grey-850);
  stroke: rgba(252, 208, 0, 0.45);
  filter: drop-shadow(0 0 8px rgba(252, 208, 0, 0.25));
  animation: tileGlow 3s ease-in-out infinite;
}
@keyframes tileGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(252, 208, 0, 0.2)); }
  50% { filter: drop-shadow(0 0 14px rgba(252, 208, 0, 0.5)); }
}

/* Pièce centrale OXXY = carré jaune simple, jamais assombri */
.puzzle-piece.oxxy .oxxy-square {
  fill: var(--oxxy-yellow);
  stroke: none;
  filter: drop-shadow(0 0 28px rgba(252, 208, 0, 0.8));
}
.puzzle-piece.oxxy .oxxy-logo-svg {
  filter: brightness(0); /* logo en silhouette noire sur fond jaune */
}
.hero-puzzle-stage.complete .puzzle-piece.oxxy .oxxy-square {
  filter: drop-shadow(0 0 40px rgba(252, 208, 0, 1));
  animation: oxxyTilePulse 2.8s ease-in-out infinite;
}
@keyframes oxxyTilePulse {
  0%, 100% { filter: drop-shadow(0 0 32px rgba(252, 208, 0, 0.8)); }
  50% { filter: drop-shadow(0 0 56px rgba(252, 208, 0, 1)); }
}

.hero-text {
  text-align: center;
  max-width: 900px;
}
.hero-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--oxxy-grey-400);
  margin-bottom: 1rem;
  text-transform: none;
}
.hero-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--oxxy-white);
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxxy-grey-300);
  margin-top: 0.5rem;
}

.scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--oxxy-grey-500);
  animation: scrollFade 2.4s ease-in-out infinite;
}
@keyframes scrollFade {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(6px); }
}

/* ===================== MODULE GENERIC ===================== */
.module {
  background: transparent;
  padding: 6rem var(--pad-x);
}
.module-card {
  max-width: var(--max-w);
  margin: 0 auto;
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--oxxy-grey-800);
  border-radius: var(--radius-card);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.module-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.module-card-cyan::before { background: var(--oxxy-cyan); }
.module-card-magenta::before { background: var(--oxxy-magenta); }
.module-card-yellow::before { background: var(--oxxy-yellow); }

.module-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.module-inner.reverse .module-visual { order: 2; }
@media (max-width: 900px) {
  .module-inner, .module-inner.reverse { grid-template-columns: 1fr; }
  .module-inner.reverse .module-visual { order: 0; }
}

.module-visual {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  max-width: 540px;
}
.module-eyebrow,
.section-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxxy-grey-400);
}
.section-eyebrow { margin-bottom: 1.5rem; }

.module-title {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--oxxy-white);
  margin-bottom: 0.25rem;
}
.module-tagline {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--oxxy-grey-100);
  margin-top: 0.5rem;
}
.module-desc {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.6;
  letter-spacing: -0.005em;
  max-width: 50ch;
}
.module-desc strong { color: var(--oxxy-white); font-weight: 700; }
.module-desc em { color: var(--oxxy-yellow); font-weight: 700; }

/* Stat pills */
.module-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.25rem;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  background: var(--oxxy-grey-880);
  border: 1px solid var(--oxxy-grey-800);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--oxxy-grey-200);
}
.stat-pill b { color: var(--oxxy-yellow); font-weight: 800; margin-right: 4px; }
.stat-pill-yellow { background: var(--oxxy-yellow); color: var(--oxxy-black); border-color: var(--oxxy-yellow); }
.stat-pill-yellow b { color: var(--oxxy-black); }
.stat-pill-magenta { background: var(--oxxy-magenta); color: var(--oxxy-white); border-color: var(--oxxy-magenta); }
.stat-pill-magenta b { color: var(--oxxy-white); }

/* Platform tags */
.module-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.platform-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  background: rgba(31, 198, 229, 0.08);
  border: 1px solid rgba(31, 198, 229, 0.3);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--oxxy-cyan);
}

.module-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  background: rgba(236, 30, 95, 0.12);
  border: 1px solid rgba(236, 30, 95, 0.4);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--oxxy-magenta);
  letter-spacing: -0.005em;
}
.module-meta .meta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--oxxy-magenta);
  animation: pulseDot 1.6s ease-in-out infinite;
}

/* ===================== BOUTON JAUNE GLOW — signature OXXY ===================== */
.btn-yellow-glow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.6rem;
  background: var(--oxxy-yellow);
  color: var(--oxxy-black);
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  box-shadow: 0 0 0 0 rgba(252, 208, 0, 0),
              0 12px 30px rgba(252, 208, 0, 0.3);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease, background 0.3s ease;
  margin-top: 0.5rem;
}
.btn-yellow-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px 4px rgba(252, 208, 0, 0.35),
              0 16px 40px rgba(252, 208, 0, 0.45);
  background: #FFE066;
}
.btn-yellow-glow span:last-child {
  transition: transform 0.3s ease;
  display: inline-block;
}
.btn-yellow-glow:hover span:last-child { transform: translateX(4px); }

/* ===================== MODULE 1 — STUDIO (explosion 9:16) ===================== */
.explosion-stage {
  position: relative;
  width: clamp(260px, 36vw, 430px);
  height: clamp(260px, 36vw, 430px);
}
.vertical-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  aspect-ratio: 9/16;
  background: linear-gradient(180deg, var(--oxxy-grey-850), var(--oxxy-grey-900));
  border: 1.5px solid var(--oxxy-grey-700);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oxxy-grey-300);
  transform: translate(-50%, -50%);
}
.vertical-card.source {
  width: 84px;
  border-color: var(--oxxy-yellow);
  color: var(--oxxy-yellow);
  box-shadow: 0 12px 36px rgba(252, 208, 0, 0.32);
  z-index: 5;
  animation: sourcePulse 3s ease-in-out infinite;
}
@keyframes sourcePulse {
  0%, 100% { box-shadow: 0 12px 36px rgba(252, 208, 0, 0.28); transform: translate(-50%, -50%) scale(1); }
  50% { box-shadow: 0 16px 50px rgba(252, 208, 0, 0.55); transform: translate(-50%, -50%) scale(1.05); }
}
.card-tag {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--oxxy-yellow);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.stick-fig { width: 60%; height: 60%; color: inherit; }
.vertical-card.sat {
  animation: explodeOut 5s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
  opacity: 0;
}
.vertical-card[data-pos="tl"] { animation-delay: 0.1s; --x: -120px; --y: -140px; }
.vertical-card[data-pos="t"]  { animation-delay: 0.2s; --x:    0px; --y: -170px; }
.vertical-card[data-pos="tr"] { animation-delay: 0.3s; --x:  120px; --y: -140px; }
.vertical-card[data-pos="l"]  { animation-delay: 0.4s; --x: -170px; --y:    0px; }
.vertical-card[data-pos="r"]  { animation-delay: 0.5s; --x:  170px; --y:    0px; }
.vertical-card[data-pos="bl"] { animation-delay: 0.6s; --x: -120px; --y:  140px; }
.vertical-card[data-pos="b"]  { animation-delay: 0.7s; --x:    0px; --y:  170px; }
.vertical-card[data-pos="br"] { animation-delay: 0.8s; --x:  120px; --y:  140px; }
@keyframes explodeOut {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  20% { opacity: 1; border-color: var(--oxxy-yellow); }
  60% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); opacity: 1; border-color: var(--oxxy-grey-700); }
  90% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); opacity: 0.85; }
  100% { transform: translate(calc(-50% + var(--x) * 1.1), calc(-50% + var(--y) * 1.1)) scale(0.95); opacity: 0; }
}
.speech-bubble {
  animation: bubblePulse 2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes bubblePulse {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}
.arm-l, .arm-r {
  transform-origin: 30px 42px;
  animation: armWave 1.6s ease-in-out infinite;
}
.arm-r { animation-delay: 0.8s; }
@keyframes armWave {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(15deg); }
}

/* ===================== MODULE 2 — TAKTIK (cerveau scroll-driven) ===================== */
.module-taktik {
  height: 250svh;
  position: relative;
  padding: 0;
}
.taktik-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: 6rem var(--pad-x);
  overflow: hidden;
}
.taktik-sticky .module-card { width: 100%; }

.brain-svg {
  width: clamp(220px, 36vw, 510px);
  height: auto;
  overflow: visible;
  transform: scale(0.4);
  transform-origin: center;
  transition: transform 0.05s linear;
  will-change: transform;
}
.brain-outline {
  fill: none;
  stroke: var(--oxxy-cyan);
  stroke-width: 1.8;
  opacity: 0;
  stroke-linecap: round;
  transition: opacity 0.4s ease;
}
.module-taktik.in-view .brain-outline {
  opacity: 0.45;
  animation: brainGlow 5s ease-in-out infinite;
}
@keyframes brainGlow {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.6; }
}
.db-blocks rect {
  fill: var(--oxxy-grey-800);
  stroke: var(--oxxy-grey-700);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.module-taktik.in-view .db-blocks rect {
  opacity: 1;
  animation: blockFlicker 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
}
@keyframes blockFlicker {
  0%, 80%, 100% { fill: var(--oxxy-grey-800); stroke: var(--oxxy-grey-700); }
  10%, 50% { fill: rgba(252, 208, 0, 0.22); stroke: var(--oxxy-yellow); }
}
.brain-connections path {
  fill: none;
  stroke: var(--oxxy-yellow);
  stroke-width: 1.5;
  opacity: 0;
  stroke-dasharray: 4 4;
  transition: opacity 0.5s ease;
}
.module-taktik.in-view .brain-connections path {
  opacity: 0.5;
  animation: connFlow 8s linear infinite;
}
@keyframes connFlow {
  to { stroke-dashoffset: -200; }
}
.brain-nodes circle {
  fill: var(--oxxy-yellow);
  filter: drop-shadow(0 0 6px var(--oxxy-yellow));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.module-taktik.in-view .brain-nodes circle {
  opacity: 1;
  animation: nodePulse 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.4s);
}
@keyframes nodePulse {
  0%, 100% { r: 5; opacity: 0.85; }
  50% { r: 9; opacity: 1; }
}

/* ===================== MODULE 3 — COACHING ===================== */
.chess-svg {
  width: clamp(240px, 34vw, 400px);
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.5));
  border-radius: 12px;
  overflow: visible;
}
.chess-board .square {
  transition: fill 0.8s cubic-bezier(0.45, 0, 0.55, 1);
}
.chess-board .square.light { fill: var(--chess-light); }
.chess-board .square.dark { fill: var(--chess-dark); }
.module-coaching.impacted .chess-board .square.light { fill: var(--oxxy-yellow); }
.module-coaching.impacted .chess-board .square.dark { fill: var(--oxxy-black); }
.impact-wave {
  fill: none;
  stroke: var(--oxxy-yellow);
  stroke-width: 3;
  opacity: 0;
}
.module-coaching.impacted .impact-wave {
  animation: impactRipple 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes impactRipple {
  0% { r: 0; opacity: 0.8; stroke-width: 5; }
  100% { r: 280; opacity: 0; stroke-width: 0.5; }
}
.queen-piece {
  font-family: "Apple Symbols", "Segoe UI Symbol", sans-serif;
  font-size: 110px;
  text-anchor: middle;
  fill: var(--oxxy-magenta);
  filter: drop-shadow(0 0 20px rgba(236, 30, 95, 0.6));
}
.queen-wrapper {
  transform: translateY(-300px) rotate(0deg);
  transform-origin: center;
  opacity: 0;
}
.module-coaching.in-view .queen-wrapper {
  animation: queenDescent 2.4s cubic-bezier(0.5, 0, 0.55, 1) forwards;
}
@keyframes queenDescent {
  0% { transform: translateY(-340px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  85% { transform: translateY(0) rotate(1080deg); opacity: 1; }
  100% { transform: translateY(0) rotate(1080deg); opacity: 1; }
}
.module-coaching.impacted .queen-piece {
  animation: queenIdle 3s ease-in-out 0.2s infinite;
  fill: var(--oxxy-black);
  filter: drop-shadow(0 0 14px rgba(252, 208, 0, 0.5));
}
@keyframes queenIdle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.04); }
}

/* ===================== INTERLUDES ===================== */
.interlude {
  flex-direction: column;
  text-align: center;
  position: relative;
  padding: 0 var(--pad-x);
}
.interlude-yellow { background: var(--oxxy-yellow); color: var(--oxxy-black); }
.interlude-magenta { background: var(--oxxy-magenta); color: var(--oxxy-white); }
.interlude-marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.16;
}
.interlude-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  font-size: clamp(8rem, 18vw, 18rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  animation: marqueeBg 32s linear infinite;
  line-height: 1;
}
.interlude-marquee-track .sep { font-size: 0.5em; vertical-align: middle; }
@keyframes marqueeBg {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.interlude-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.interlude-title {
  font-size: clamp(3.5rem, 12vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.btn-punchy {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.3rem 2.2rem;
  background: var(--oxxy-black);
  color: var(--oxxy-white);
  border-radius: 14px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  box-shadow: 0 16px 36px rgba(0,0,0,0.45);
}
.btn-punchy em { color: var(--oxxy-yellow); font-weight: 800; }
.btn-punchy-dark em { color: var(--oxxy-magenta); }
.btn-punchy:hover { transform: translateY(-3px); box-shadow: 0 24px 48px rgba(0,0,0,0.6); }

/* ===================== PRÉAMBULE PROBLÈME — TÊTE + ICÔNES ===================== */
.head-preamble {
  height: 220svh;
  position: relative;
}
.head-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem var(--pad-x);
  overflow: hidden;
}
.head-stage {
  position: relative;
  width: min(90vw, 760px);
  height: 100%;
  max-height: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 4rem;
}

.head-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ent-icon {
  position: absolute;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  opacity: 0;
  transform: scale(0.4);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  will-change: opacity, transform;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Positions des 16 icônes au-dessus de la tête (en arc + nuage) */
.ent-icon[data-i="0"]  { top: 5%;  left: 8%; }
.ent-icon[data-i="1"]  { top: 12%; left: 22%; }
.ent-icon[data-i="2"]  { top: 4%;  left: 40%; }
.ent-icon[data-i="3"]  { top: 10%; left: 56%; }
.ent-icon[data-i="4"]  { top: 7%;  left: 72%; }
.ent-icon[data-i="5"]  { top: 14%; left: 88%; }
.ent-icon[data-i="6"]  { top: 22%; left: 4%; }
.ent-icon[data-i="7"]  { top: 28%; left: 18%; }
.ent-icon[data-i="8"]  { top: 24%; left: 36%; }
.ent-icon[data-i="9"]  { top: 30%; left: 52%; }
.ent-icon[data-i="10"] { top: 26%; left: 68%; }
.ent-icon[data-i="11"] { top: 22%; left: 84%; }
.ent-icon[data-i="12"] { top: 38%; left: 12%; }
.ent-icon[data-i="13"] { top: 42%; left: 30%; }
.ent-icon[data-i="14"] { top: 40%; left: 64%; }
.ent-icon[data-i="15"] { top: 38%; left: 80%; }

.ent-icon.shown {
  opacity: 1;
  transform: scale(1);
}
.ent-icon.shown.intense {
  animation: iconShake 0.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)) drop-shadow(0 0 8px rgba(252,208,0,0.3));
}
@keyframes iconShake {
  0%, 100% { transform: scale(1) translate(0, 0); }
  20% { transform: scale(1.08) translate(-3px, 2px) rotate(-3deg); }
  50% { transform: scale(1.12) translate(2px, -2px) rotate(2deg); }
  80% { transform: scale(1.08) translate(3px, 1px) rotate(-2deg); }
}
/* Wave effect : icônes apparaissent avec léger delay et effet wow */
.ent-icon.shown {
  animation: iconArrive 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes iconArrive {
  0% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  60% { opacity: 1; transform: scale(1.2) rotate(5deg); filter: drop-shadow(0 0 16px rgba(252,208,0,0.4)); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
}

.head-svg {
  width: clamp(180px, 28vw, 300px);
  height: auto;
}
.head-aura {
  transition: stroke 1s ease;
}
.head-preamble.saturated .head-aura {
  stroke: rgba(252,208,0,0.35);
  animation: headPulse 1.4s ease-in-out infinite;
}
@keyframes headPulse {
  0%, 100% { stroke: rgba(252,208,0,0.25); r: 70; }
  50% { stroke: rgba(252,208,0,0.5); r: 78; }
}

.head-pretext {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
  color: var(--oxxy-grey-300);
  text-align: center;
  line-height: 1.5;
  letter-spacing: -0.015em;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.head-preamble.saturated .head-pretext { opacity: 1; }

/* ===================== TAKTIK FUNNEL + DATABASE (animation continue) ===================== */
.funnel-stage {
  position: relative;
  width: clamp(280px, 38vw, 460px);
  height: clamp(420px, 54vw, 600px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}

/* Zone d'entrée (chaos qui tombe) */
.funnel-input {
  position: relative;
  width: 100%;
  height: 38%;
  overflow: hidden;
}
.falling-doc {
  position: absolute;
  top: 0;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  will-change: transform, opacity;
  opacity: 0;
  animation: fallStraight 3.5s ease-in infinite;
  animation-delay: calc(var(--i, 0) * 0.45s);
}
.falling-doc[data-i="0"] { --i: 0; left: 6%; }
.falling-doc[data-i="1"] { --i: 1; left: 19%; }
.falling-doc[data-i="2"] { --i: 2; left: 32%; }
.falling-doc[data-i="3"] { --i: 3; left: 45%; }
.falling-doc[data-i="4"] { --i: 4; left: 58%; }
.falling-doc[data-i="5"] { --i: 5; left: 71%; }
.falling-doc[data-i="6"] { --i: 6; left: 84%; }
.falling-doc[data-i="7"] { --i: 7; left: 12%; }
@keyframes fallStraight {
  0% {
    transform: translateY(-50%) rotate(0deg) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    transform: translateY(180%) rotate(180deg) scale(0.7);
    opacity: 0.7;
  }
  100% {
    transform: translateY(260%) rotate(360deg) scale(0.3);
    opacity: 0;
  }
}

/* Entonnoir au centre */
.funnel-svg {
  width: 70%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(252,208,0,0.3));
  z-index: 2;
  position: relative;
}

/* Zone de sortie (database organisée qui se remplit) */
.funnel-output {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 0.5rem 0;
  flex: 1;
  position: relative;
}
.db-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0.7rem;
  align-items: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.module-taktik.in-view .db-row {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 0.18s + 0.8s);
}
.db-row[data-i="0"] { --i: 0; }
.db-row[data-i="1"] { --i: 1; }
.db-row[data-i="2"] { --i: 2; }
.db-row[data-i="3"] { --i: 3; }
.db-row[data-i="4"] { --i: 4; }
.db-row[data-i="5"] { --i: 5; }

.db-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  text-align: center;
  color: var(--oxxy-black);
}
.db-tag-yellow { background: var(--oxxy-yellow); }
.db-tag-cyan { background: var(--oxxy-cyan); }
.db-tag-magenta { background: var(--oxxy-magenta); color: var(--oxxy-white); }

.db-bar {
  height: 20px;
  background: var(--oxxy-grey-800);
  border: 1px solid var(--oxxy-grey-700);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.db-bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--oxxy-cyan), var(--oxxy-yellow));
  border-radius: 4px;
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.module-taktik.in-view .db-bar::after {
  width: var(--w);
  transition-delay: calc(var(--i, 0) * 0.18s + 1s);
}

/* ===================== CHAOS PREAMBLE (avant TakTik) ===================== */
.chaos-preamble {
  height: 220svh;
  position: relative;
}
.chaos-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem var(--pad-x);
  overflow: hidden;
}
.chaos-stage {
  position: relative;
  width: min(90vw, 800px);
  height: 100%;
  max-height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.chaos-cards {
  position: relative;
  width: 100%;
  height: 70%;
}
.chaos-card {
  position: absolute;
  width: 180px;
  padding: 0.85rem 1rem;
  background: linear-gradient(180deg, var(--oxxy-grey-850), var(--oxxy-grey-900));
  border: 1px solid var(--oxxy-grey-700);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  will-change: transform, opacity;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Position aléatoire des chaos-cards */
.chaos-card[data-i="0"]  { left: 10%; top: 20%; }
.chaos-card[data-i="1"]  { left: 60%; top: 15%; }
.chaos-card[data-i="2"]  { left: 30%; top: 40%; }
.chaos-card[data-i="3"]  { left: 75%; top: 38%; }
.chaos-card[data-i="4"]  { left: 5%;  top: 55%; }
.chaos-card[data-i="5"]  { left: 45%; top: 60%; }
.chaos-card[data-i="6"]  { left: 80%; top: 65%; }
.chaos-card[data-i="7"]  { left: 18%; top: 78%; }
.chaos-card[data-i="8"]  { left: 50%; top: 25%; }
.chaos-card[data-i="9"]  { left: 65%; top: 80%; }
.chaos-card[data-i="10"] { left: 35%; top: 8%; }
.chaos-card[data-i="11"] { left: 90%; top: 50%; }

.chaos-card.shown {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(var(--rot, 0deg));
}
.chaos-card.intense {
  animation: chaosShake 0.7s ease-in-out infinite;
}
@keyframes chaosShake {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(var(--rot)); }
  25% { transform: translate(calc(-50% - 3px), calc(-50% + 1px)) scale(1.02) rotate(var(--rot)); }
  75% { transform: translate(calc(-50% + 3px), calc(-50% - 1px)) scale(1.02) rotate(var(--rot)); }
}
.chaos-app {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--oxxy-white);
  letter-spacing: -0.005em;
}
.chaos-meta {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--oxxy-grey-400);
  font-family: var(--font-mono);
}
.chaos-pretext {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  color: var(--oxxy-grey-200);
  text-align: center;
  line-height: 1.5;
  letter-spacing: -0.015em;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 5;
}
.chaos-pretext strong {
  color: var(--oxxy-magenta);
  font-weight: 800;
}
.chaos-preamble.saturated .chaos-pretext { opacity: 1; }

/* ===================== PRÉAMBULE COACHING — LABYRINTHE ===================== */
.maze-preamble {
  height: 250svh;
  position: relative;
}
.maze-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: 4rem var(--pad-x);
  overflow: hidden;
}
.maze-stage {
  flex-shrink: 0;
  width: clamp(280px, 40vw, 540px);
}
.maze-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(252, 208, 0, 0.15));
}
.maze-rings path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 0.8s ease;
}
.maze-preamble.revealed .maze-rings path {
  stroke: rgba(252, 208, 0, 0.22);
}
#maze-trail {
  filter: drop-shadow(0 0 6px rgba(252, 208, 0, 0.6));
  transition: filter 0.5s ease;
}
.maze-preamble.revealed #maze-trail {
  filter: drop-shadow(0 0 12px rgba(252, 208, 0, 0.9));
}
.maze-target {
  fill: var(--oxxy-yellow);
  opacity: 0;
  transition: opacity 0.4s ease, r 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.maze-target-glow {
  fill: var(--oxxy-yellow);
  opacity: 0;
  transition: opacity 0.6s ease, r 0.8s ease;
}
.maze-preamble.revealed .maze-target {
  r: 12;
  opacity: 1;
  animation: targetPulse 1.6s ease-in-out infinite;
}
.maze-preamble.revealed .maze-target-glow {
  r: 40;
  opacity: 0.4;
  animation: targetGlow 2s ease-in-out infinite;
}
@keyframes targetPulse {
  0%, 100% { r: 12; }
  50% { r: 16; }
}
@keyframes targetGlow {
  0%, 100% { r: 40; opacity: 0.3; }
  50% { r: 60; opacity: 0.5; }
}

.maze-text {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
.maze-pretext {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 600;
  color: var(--oxxy-grey-300);
  line-height: 1.5;
  letter-spacing: -0.015em;
}
.maze-cta {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.maze-preamble.revealed .maze-cta {
  opacity: 1;
  transform: translateY(0);
}
.maze-text .btn-yellow-glow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s, box-shadow 0.4s ease, background 0.3s ease;
}
.maze-preamble.revealed .maze-text .btn-yellow-glow {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .maze-sticky {
    flex-direction: column;
    gap: 2rem;
  }
  .maze-stage { width: clamp(240px, 60vw, 400px); }
  .maze-text { text-align: center; align-items: center; }
}

/* ===================== 3 FAÇONS DE NOUS JOINDRE ===================== */
.contact-options {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.contact-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--oxxy-white);
  margin-bottom: 3rem;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "icon name arrow"
    "icon meta arrow"
    "icon handle arrow";
  align-items: center;
  gap: 0.2rem 1.25rem;
  padding: 1.75rem 1.85rem;
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 20px;
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.35s ease,
              box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.contact-card-yellow::before { background: var(--oxxy-yellow); }
.contact-card-cyan::before { background: var(--oxxy-cyan); }
.contact-card-magenta::before { background: var(--oxxy-magenta); }

.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--oxxy-grey-700);
}
.contact-card-yellow:hover {
  border-color: var(--oxxy-yellow);
  box-shadow: 0 16px 40px rgba(252, 208, 0, 0.2);
}
.contact-card-cyan:hover {
  border-color: var(--oxxy-cyan);
  box-shadow: 0 16px 40px rgba(31, 198, 229, 0.2);
}
.contact-card-magenta:hover {
  border-color: var(--oxxy-magenta);
  box-shadow: 0 16px 40px rgba(236, 30, 95, 0.2);
}

.contact-icon {
  grid-area: icon;
  font-size: 2.4rem;
  line-height: 1;
}
.contact-name {
  grid-area: name;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oxxy-white);
}
.contact-meta {
  grid-area: meta;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--oxxy-grey-400);
}
.contact-handle {
  grid-area: handle;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--oxxy-grey-300);
  margin-top: 0.25rem;
}
.contact-arrow {
  grid-area: arrow;
  font-size: 1.5rem;
  color: var(--oxxy-grey-500);
  transition: transform 0.3s ease, color 0.3s ease;
}
.contact-card:hover .contact-arrow {
  transform: translateX(4px);
  color: var(--oxxy-white);
}
.contact-card-yellow:hover .contact-arrow { color: var(--oxxy-yellow); }
.contact-card-cyan:hover .contact-arrow { color: var(--oxxy-cyan); }
.contact-card-magenta:hover .contact-arrow { color: var(--oxxy-magenta); }

/* ===================== PREUVE ===================== */
.preuve {
  padding: 6rem var(--pad-x);
}
.preuve-block {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 3rem 0;
}
.preuve-block + .preuve-block {
  border-top: 1px solid var(--oxxy-grey-850);
}
.marquee-subtle {
  overflow: hidden;
  position: relative;
  margin: 0 calc(-1 * var(--pad-x));
  padding: 0.5rem 0;
}
.marquee-subtle::before, .marquee-subtle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}
.marquee-subtle::before { left: 0; background: linear-gradient(to right, var(--oxxy-black), transparent); }
.marquee-subtle::after { right: 0; background: linear-gradient(to left, var(--oxxy-black), transparent); }
.marquee-subtle-track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  animation: marqueeScroll 38s linear infinite;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  color: var(--oxxy-grey-200);
  letter-spacing: -0.005em;
}
.marquee-subtle-track .sep { color: var(--oxxy-grey-700); font-weight: 400; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.94rem;
  letter-spacing: -0.01em;
}
.ticker li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed var(--oxxy-grey-850);
  transition: padding-left 0.3s ease, border-color 0.3s ease;
}
.ticker li:hover {
  padding-left: 0.75rem;
  border-bottom-color: var(--oxxy-cyan);
}
.ticker time { color: var(--oxxy-cyan); font-weight: 700; }
.ticker span { color: var(--oxxy-grey-200); font-weight: 500; }
.preuve-caption {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--oxxy-grey-400);
  font-style: italic;
}
@media (max-width: 640px) {
  .ticker li { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ===================== CTA FINAL ===================== */
.cta-final {
  flex-direction: column;
  text-align: center;
}
.cta-final-inner {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.cta-final-title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: var(--oxxy-white);
}

.btn-messenger-big {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--oxxy-yellow);
  color: var(--oxxy-black);
  padding: 1.4rem 2.2rem;
  border-radius: 16px;
  font-weight: 800;
  width: 100%;
  max-width: 480px;
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 0 24px 4px rgba(252, 208, 0, 0.25),
              0 16px 40px rgba(252, 208, 0, 0.3);
  position: relative;
  overflow: hidden;
}
.btn-messenger-big::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
}
.btn-messenger-big:hover {
  background: var(--oxxy-magenta);
  color: var(--oxxy-white);
  transform: translateY(-3px);
  box-shadow: 0 0 24px 4px rgba(236, 30, 95, 0.35),
              0 24px 56px rgba(236, 30, 95, 0.45);
}
.btn-messenger-big:hover::before { transform: translateX(100%); }
.btn-messenger-big .btn-icon { font-size: 1.6rem; line-height: 1; }
.btn-messenger-big .btn-stack { display: flex; flex-direction: column; flex: 1; gap: 0.15rem; }
.btn-messenger-big .btn-stack strong { font-size: 1.1rem; font-weight: 800; }
.btn-messenger-big .btn-stack small { font-size: 0.78rem; font-weight: 600; opacity: 0.7; }
.btn-messenger-big .btn-arrow {
  font-size: 1.4rem;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-messenger-big:hover .btn-arrow { transform: translateX(6px); }

.cta-or {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--oxxy-grey-500);
}

.form-contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 480px;
  text-align: left;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.form-contact input,
.form-contact textarea {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--oxxy-grey-800);
  padding: 1rem 1.15rem;
  border-radius: 12px;
  color: var(--oxxy-white);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: border-color 0.25s ease;
  resize: none;
}
.form-contact input::placeholder, .form-contact textarea::placeholder {
  color: var(--oxxy-grey-500);
  font-weight: 500;
}
.form-contact input:focus, .form-contact textarea:focus {
  outline: none;
  border-color: var(--oxxy-yellow);
}
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--oxxy-white);
  color: var(--oxxy-black);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn-submit:hover {
  background: var(--oxxy-cyan);
  transform: translateY(-1px);
}
.form-feedback {
  font-size: 0.85rem;
  color: var(--oxxy-cyan);
  font-weight: 600;
  text-align: center;
  min-height: 1.2em;
}
.form-feedback.error { color: var(--oxxy-magenta); }

/* ===================== FOOTER ===================== */
.footer {
  padding: 3rem var(--pad-x) 4rem;
  border-top: 1px solid var(--oxxy-grey-900);
  text-align: center;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-meta {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--oxxy-grey-400);
  letter-spacing: -0.005em;
}

/* ===================== REVEALS ===================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

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

/* ===================== MODULE 1 — STUDIO (logos sociaux v2) ===================== */
.module-studio .module-visual {
  background: radial-gradient(circle at center, rgba(31, 198, 229, 0.05), transparent 70%);
}
.social-stage {
  position: relative;
  width: clamp(280px, 38vw, 420px);
  height: clamp(280px, 38vw, 420px);
}
.social-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.conn-line {
  stroke: var(--oxxy-cyan);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.5;
  animation: dashFlow 8s linear infinite;
}
@keyframes dashFlow { to { stroke-dashoffset: -200; } }
.social-card {
  position: absolute;
  width: clamp(78px, 13vw, 104px);
  height: clamp(78px, 13vw, 104px);
  background: linear-gradient(180deg, var(--oxxy-grey-850), var(--oxxy-grey-900));
  border: 1.5px solid var(--oxxy-grey-700);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: var(--oxxy-grey-300);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.social-card .social-icon { width: 50%; height: 50%; }
.social-source {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--oxxy-yellow);
  border-color: var(--oxxy-yellow);
  color: var(--oxxy-black);
  box-shadow: 0 12px 36px rgba(252, 208, 0, 0.45);
  animation: sourcePulseV2 3s ease-in-out infinite;
  z-index: 5;
}
.social-source .social-icon { width: 45%; height: 45%; }
.social-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--oxxy-black);
}
@keyframes sourcePulseV2 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 12px 36px rgba(252, 208, 0, 0.4); }
  50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 16px 50px rgba(252, 208, 0, 0.65); }
}
.social-fb { top: 0; left: 0; --c: #1877F2; }
.social-ig { top: 0; right: 0; --c: #E4405F; }
.social-tt { bottom: 0; left: 0; --c: #FFFFFF; }
.social-yt { bottom: 0; right: 0; --c: #FF0000; }
.social-fb, .social-ig, .social-tt, .social-yt {
  animation: socialLight 4s ease-in-out infinite;
}
.social-fb { animation-delay: 0.4s; }
.social-ig { animation-delay: 0.8s; }
.social-tt { animation-delay: 1.2s; }
.social-yt { animation-delay: 1.6s; }
@keyframes socialLight {
  0%, 75%, 100% {
    color: var(--oxxy-grey-400);
    border-color: var(--oxxy-grey-700);
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  25%, 50% {
    color: var(--c);
    border-color: var(--c);
    transform: scale(1.08);
    box-shadow: 0 12px 36px rgba(255,255,255,0.15), 0 0 0 1.5px var(--c);
  }
}
@media (max-width: 640px) {
  .social-stage { width: clamp(260px, 70vw, 360px); height: clamp(260px, 70vw, 360px); }
}

/* =============================================================
   POLISH v12+ — Hover, transitions sections, mobile responsive
   ============================================================= */

/* Loading initial : fade-in subtil du body */
body {
  animation: bodyFadeIn 0.8s ease-out;
}
@keyframes bodyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Smooth scroll natif (sans Lenis qui peut être lourd sur mobile) */
html {
  scroll-behavior: smooth;
}

/* === Hover micro-interactions sur les cards modules === */
.module-card {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.4s ease,
              box-shadow 0.5s ease;
}
.module-card:hover {
  border-color: var(--oxxy-grey-700);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6),
              0 0 0 1px rgba(255,255,255,0.04);
}
.module-card-cyan:hover { border-color: rgba(31, 198, 229, 0.4); box-shadow: 0 24px 60px rgba(31, 198, 229, 0.12); }
.module-card-magenta:hover { border-color: rgba(236, 30, 95, 0.4); box-shadow: 0 24px 60px rgba(236, 30, 95, 0.12); }
.module-card-yellow:hover { border-color: rgba(252, 208, 0, 0.4); box-shadow: 0 24px 60px rgba(252, 208, 0, 0.12); }

/* === Transitions douces entre sections === */
/* Fade subtil en haut/bas des interludes pour adoucir les coupures */
.interlude::before,
.interlude::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 1;
}
.interlude::before { top: 0; }
.interlude::after { bottom: 0; }
.interlude-yellow::before { background: linear-gradient(to bottom, var(--oxxy-black) 0%, transparent 100%); }
.interlude-yellow::after { background: linear-gradient(to top, var(--oxxy-black) 0%, transparent 100%); }
.interlude-magenta::before { background: linear-gradient(to bottom, var(--oxxy-black) 0%, transparent 100%); }
.interlude-magenta::after { background: linear-gradient(to top, var(--oxxy-black) 0%, transparent 100%); }

/* === Stat pills hover === */
.stat-pill {
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.stat-pill:hover {
  background: var(--oxxy-grey-850);
  border-color: var(--oxxy-grey-700);
  transform: translateY(-1px);
}

/* === Hero text reveal at load === */
.hero-text {
  animation: heroTextRise 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}
@keyframes heroTextRise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow { animation: heroTextRise 1s ease-out 0.2s both; }
.scroll-hint { animation: heroTextRise 1s ease-out 1.2s both; }

/* === Brand mark hover effect plus marqué === */
.brand-mark {
  display: inline-block;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand-mark:hover { transform: rotate(-3deg) scale(1.08); }

/* === Oversubscribed pill — micro hover === */
.oversubscribed-badge {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.oversubscribed:hover .oversubscribed-badge {
  transform: scale(1.04);
  box-shadow: 0 12px 36px rgba(236, 30, 95, 0.55);
}

/* === Button text gradient bonus === */
.cta-final-title em.text-gradient,
.maze-cta em.text-gradient {
  display: inline-block;
  filter: drop-shadow(0 0 24px rgba(252, 208, 0, 0.15));
}

/* === Mobile responsive — corrections finales === */
@media (max-width: 900px) {
  .hero-puzzle-stage {
    width: 90vw;
  }
  .hero-text { padding: 0 1rem; }
  .module-card { padding: 2rem 1.5rem; }
  .module-title { font-size: clamp(2.4rem, 9vw, 3.5rem); }
  .module-tagline { font-size: clamp(1.2rem, 4vw, 1.4rem); }
  .interlude-title { font-size: clamp(2.8rem, 14vw, 5rem); }
  .cta-final-title { font-size: clamp(2.4rem, 10vw, 3.8rem); }
}

@media (max-width: 640px) {
  .site-header {
    top: 0.85rem;
    left: 1rem;
  }
  .brand-mark img {
    width: 56px;
  }
  .oversubscribed {
    top: 0.85rem;
    right: 1rem;
  }
  .oversubscribed-badge {
    font-size: 0.65rem;
    padding: 0.45rem 0.8rem;
  }
  .module {
    padding: 4rem 1.25rem;
  }
  .module-card {
    padding: 1.5rem 1.25rem;
  }
  .head-stage,
  .chaos-stage,
  .maze-stage {
    padding: 0;
  }
  .head-icons .ent-icon { font-size: 1.6rem; }
  .funnel-stage {
    width: 90vw;
  }
  .contact-card {
    padding: 1.25rem 1.4rem;
    gap: 0.15rem 1rem;
  }
  .contact-icon { font-size: 1.8rem; }
  .contact-name { font-size: 1.1rem; }
  .scroll-hint { font-size: 0.6rem; }
}

@media (max-width: 480px) {
  .head-stage { max-height: 600px; }
  .chaos-stage { max-height: 600px; }
  /* Réduire le nombre d'icônes visibles sur mobile (les positions absolues peuvent overflow) */
  .ent-icon[data-i="13"],
  .ent-icon[data-i="14"],
  .ent-icon[data-i="15"] { display: none; }
}

/* === Preuve marquee : ralentir un peu sur mobile === */
@media (max-width: 640px) {
  .marquee-subtle-track { animation-duration: 28s; }
}

/* === Accessibility focus visible === */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--oxxy-yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

/* === Selection plus stylée === */
::selection {
  background: var(--oxxy-yellow);
  color: var(--oxxy-black);
  text-shadow: none;
}

/* =============================================================
   TAKTIK FUNNEL v3 — vrai chaos qui se classe parfaitement
   Boucle continue : flottent chaotiquement → aspirés → DB parfaite
   ============================================================= */

/* Override : zone d'entrée plus haute pour le chaos */
.funnel-stage {
  position: relative;
  width: clamp(280px, 38vw, 460px);
  height: clamp(440px, 56vw, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}
.funnel-input {
  position: relative;
  width: 100%;
  height: 42%;
  overflow: hidden;
}
.funnel-svg {
  width: 70%;
  height: auto;
  filter: drop-shadow(0 8px 28px rgba(252,208,0,0.35));
  z-index: 2;
  position: relative;
  flex-shrink: 0;
}

/* === PIÈCES CHAOS qui flottent puis sont aspirées === */
.chaos-piece {
  position: absolute;
  top: var(--y, 20%);
  left: var(--x, 50%);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  opacity: 0;
  will-change: transform, opacity, top, left;
  animation: chaosToFunnel 5s cubic-bezier(0.5, 0, 0.7, 1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes chaosToFunnel {
  /* PHASE 1 : apparaît à sa position chaotique avec un wobble */
  0% {
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.4);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot)) scale(1);
  }
  /* PHASE 2 : flotte chaotiquement quelques secondes */
  35% {
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%) rotate(calc(var(--rot) + 8deg)) scale(1);
    opacity: 1;
  }
  /* PHASE 3 : aspiré vers le centre haut de l'entonnoir */
  60% {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.7);
    opacity: 0.85;
  }
  /* PHASE 4 : disparait dans l'entonnoir */
  80% {
    top: 105%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.2);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* === DATABASE OUTPUT en cascade qui boucle === */
.funnel-output {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 0.5rem 0;
  flex: 1;
  position: relative;
}
.db-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0.7rem;
  align-items: center;
  opacity: 0;
  transform: translateX(-20px);
  animation: dbRowAppear 5s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes dbRowAppear {
  0%, 8% {
    opacity: 0;
    transform: translateX(-20px);
  }
  18% {
    opacity: 1;
    transform: translateX(0);
  }
  85% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* Bar fill animée par row */
.db-row .db-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--oxxy-cyan), var(--oxxy-yellow));
  border-radius: 4px;
  animation: dbBarFill 5s ease-out infinite;
  animation-delay: calc(var(--d, 0s) + 0.2s);
}
@keyframes dbBarFill {
  0%, 18% { width: 0; }
  35% { width: var(--w, 60%); }
  85% { width: var(--w, 60%); }
  100% { width: var(--w, 60%); opacity: 0; }
}

/* =============================================================
   COACHING PAGE — v1.3
   ============================================================= */

.oxxy-coaching-page .site-header { z-index: 90; }

/* Hero coaching */
.coach-hero {
  flex-direction: column;
  text-align: center;
  background: var(--oxxy-black);
}
.coach-hero-inner {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.coach-hero-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--oxxy-white);
}
.coach-hero-sub {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 600;
  color: var(--oxxy-grey-200);
  letter-spacing: -0.015em;
}
.coach-hero-cta {
  margin-top: 1rem;
  font-size: 1rem;
  padding: 1.1rem 1.85rem;
}

/* Offres coaching — 2 cards */
.coach-offers {
  padding: 6rem var(--pad-x);
  flex-direction: column;
}
.coach-offers-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.coach-offers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  text-align: left;
}
@media (max-width: 900px) {
  .coach-offers-grid { grid-template-columns: 1fr; }
}

.coach-offer-card {
  background: rgba(20, 20, 24, 0.6);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.coach-offer-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.coach-offer-yellow::before { background: var(--oxxy-yellow); }
.coach-offer-cyan::before { background: var(--oxxy-cyan); }
.coach-offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.coach-offer-badge {
  display: inline-block;
  background: var(--oxxy-grey-800);
  color: var(--oxxy-grey-200);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-self: flex-start;
}
.coach-offer-yellow .coach-offer-badge { background: var(--oxxy-yellow); color: var(--oxxy-black); }
.coach-offer-cyan .coach-offer-badge { background: var(--oxxy-cyan); color: var(--oxxy-black); }

.coach-offer-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxxy-grey-400);
}
.coach-offer-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--oxxy-white);
  line-height: 1.1;
}
.coach-offer-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.coach-offer-price-num {
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.coach-offer-yellow .coach-offer-price-num { color: var(--oxxy-yellow); }
.coach-offer-cyan .coach-offer-price-num { color: var(--oxxy-cyan); }
.coach-offer-meta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--oxxy-grey-300);
  letter-spacing: -0.005em;
}
.coach-offer-desc {
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.coach-offer-card .btn-yellow-glow,
.coach-offer-card .btn-cyan-outline {
  margin-top: 0.5rem;
}

/* Bouton cyan outline */
.btn-cyan-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: transparent;
  color: var(--oxxy-cyan);
  border: 1.5px solid var(--oxxy-cyan);
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  align-self: flex-start;
}
.btn-cyan-outline:hover {
  background: var(--oxxy-cyan);
  color: var(--oxxy-black);
  transform: translateY(-2px);
}
.btn-cyan-outline span:last-child { transition: transform 0.3s ease; }
.btn-cyan-outline:hover span:last-child { transform: translateX(4px); }

/* Process section */
.coach-process {
  padding: 6rem var(--pad-x);
  flex-direction: column;
}
.coach-process-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.coach-process-inner .steps {
  display: grid;
  gap: 1.25rem;
  text-align: left;
  margin-top: 2.5rem;
}
.coach-process-inner .step {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem 1.75rem;
  background: rgba(20, 20, 24, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid var(--oxxy-grey-800);
  border-radius: 18px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.coach-process-inner .step:hover {
  transform: translateX(6px);
  border-color: var(--oxxy-grey-700);
}
.coach-process-inner .step-num {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oxxy-black);
  flex-shrink: 0;
}
.coach-process-inner .step-num-yellow { background: var(--oxxy-yellow); }
.coach-process-inner .step-num-cyan { background: var(--oxxy-cyan); }
.coach-process-inner .step-num-magenta { background: var(--oxxy-magenta); color: var(--oxxy-white); }
.coach-process-inner .step h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oxxy-white);
  margin-bottom: 0.4rem;
}
.coach-process-inner .step p {
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
}

.section-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--oxxy-white);
  margin-bottom: 1rem;
}

/* =============================================================
   MAZE RIPPLE — onde qui se propage vers l'extérieur (v1.3.1)
   ============================================================= */
.maze-ripple {
  fill: none;
  stroke: var(--oxxy-yellow);
  stroke-width: 2.5;
  opacity: 0;
}
.maze-preamble.revealed .maze-ripple-1 {
  animation: mazeRippleOut 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.maze-preamble.revealed .maze-ripple-2 {
  animation: mazeRippleOut 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: 0.8s;
}
.maze-preamble.revealed .maze-ripple-3 {
  animation: mazeRippleOut 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  animation-delay: 1.6s;
}
@keyframes mazeRippleOut {
  0% {
    r: 12;
    opacity: 0.8;
    stroke-width: 3;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    r: 280;
    opacity: 0;
    stroke-width: 0.3;
  }
}

/* =============================================================
   COACHING v1.4 — Coach IA business focus
   ============================================================= */

/* What section */
.coach-what {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.coach-what-inner {
  max-width: 820px;
  margin: 0 auto;
}
.coach-what-body {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--oxxy-grey-200);
  letter-spacing: -0.015em;
  max-width: 60ch;
  margin: 1.5rem auto 0;
}
.coach-what-body strong { color: var(--oxxy-white); font-weight: 700; }
.coach-what-body em { color: var(--oxxy-yellow); font-weight: 600; }

/* 4 topics grid */
.coach-topics {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.coach-topics-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.coach-topics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  text-align: left;
}
@media (max-width: 800px) { .coach-topics-grid { grid-template-columns: 1fr; } }

.coach-topic-card {
  padding: 2rem 1.85rem;
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(18px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}
.coach-topic-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.coach-topic-cyan::before { background: var(--oxxy-cyan); }
.coach-topic-magenta::before { background: var(--oxxy-magenta); }
.coach-topic-yellow::before { background: var(--oxxy-yellow); }
.coach-topic-card:hover { transform: translateY(-4px); }
.coach-topic-cyan:hover { border-color: rgba(31, 198, 229, 0.4); box-shadow: 0 16px 40px rgba(31, 198, 229, 0.15); }
.coach-topic-magenta:hover { border-color: rgba(236, 30, 95, 0.4); box-shadow: 0 16px 40px rgba(236, 30, 95, 0.15); }
.coach-topic-yellow:hover { border-color: rgba(252, 208, 0, 0.4); box-shadow: 0 16px 40px rgba(252, 208, 0, 0.15); }
.coach-topic-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--oxxy-grey-500);
  margin-bottom: 1rem;
}
.coach-topic-card h3 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oxxy-white);
  margin-bottom: 0.5rem;
  line-height: 1.15;
}
.coach-topic-card p {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
}

/* Process 2 cards */
.coach-process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  text-align: left;
}
@media (max-width: 800px) { .coach-process-grid { grid-template-columns: 1fr; } }

.coach-process-card {
  padding: 2.5rem 2rem;
  background: rgba(20, 20, 24, 0.6);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}
.coach-process-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.coach-process-yellow::before { background: var(--oxxy-yellow); }
.coach-process-cyan::before { background: var(--oxxy-cyan); }
.coach-process-card:hover { transform: translateY(-4px); }
.coach-process-yellow:hover { border-color: var(--oxxy-yellow); }
.coach-process-cyan:hover { border-color: var(--oxxy-cyan); }

.coach-process-badge {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  align-self: flex-start;
}
.coach-process-yellow .coach-process-badge { background: var(--oxxy-yellow); color: var(--oxxy-black); }
.coach-process-cyan .coach-process-badge { background: var(--oxxy-cyan); color: var(--oxxy-black); }

.coach-process-card h3 {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--oxxy-white);
  line-height: 1.1;
}
.coach-process-price {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.coach-process-yellow .coach-process-price { color: var(--oxxy-yellow); }
.coach-process-cyan .coach-process-price { color: var(--oxxy-cyan); }
.coach-process-desc {
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
}
.coach-process-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--oxxy-grey-400);
  font-style: italic;
}

/* Why Pat */
.coach-why {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.coach-why-inner {
  max-width: 820px;
  margin: 0 auto;
}
.coach-why-body {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--oxxy-grey-200);
  letter-spacing: -0.015em;
  max-width: 60ch;
  margin: 1.5rem auto;
}
.coach-why-body strong { color: var(--oxxy-white); font-weight: 700; }
.coach-why-creds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.coach-why-cred {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  background: var(--oxxy-grey-880);
  border: 1px solid var(--oxxy-grey-700);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--oxxy-grey-200);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.coach-why-cred:hover {
  border-color: var(--oxxy-yellow);
  color: var(--oxxy-yellow);
}
.coach-why-fact {
  margin-top: 2.5rem;
  padding: 1rem 1.5rem;
  background: rgba(252, 208, 0, 0.06);
  border-left: 3px solid var(--oxxy-yellow);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--oxxy-grey-200);
  text-align: left;
  display: inline-block;
}
.coach-why-fact em { font-weight: 800; }

/* Polarisation */
.coach-polar {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.coach-polar-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.coach-polar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  text-align: left;
}
@media (max-width: 800px) { .coach-polar-grid { grid-template-columns: 1fr; } }
.coach-polar-block {
  padding: 2rem 1.85rem;
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(18px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 18px;
}
.coach-polar-not { border-color: rgba(236, 30, 95, 0.25); }
.coach-polar-yes { border-color: rgba(252, 208, 0, 0.3); }
.coach-polar-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.coach-polar-not .coach-polar-label { color: var(--oxxy-magenta); }
.coach-polar-yes .coach-polar-label { color: var(--oxxy-yellow); }
.coach-polar-block p {
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.6;
}
.coach-polar-block strong { color: var(--oxxy-white); font-weight: 700; }

/* =============================================================
   NAV MENU — v1.4.1
   ============================================================= */

.oxxy-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: padding 0.3s ease, background 0.3s ease;
}
@media (max-width: 640px) {
  .oxxy-nav { padding: 0.85rem 1rem; }
}

.oxxy-nav-brand {
  display: inline-flex;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.oxxy-nav-brand img {
  width: 64px;
  height: auto;
}
@media (max-width: 640px) {
  .oxxy-nav-brand img { width: 52px; }
}
.oxxy-nav-brand:hover { transform: rotate(-3deg) scale(1.06); }

.oxxy-nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.oxxy-nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--oxxy-grey-200);
  transition: background 0.3s ease, color 0.3s ease;
}
.oxxy-nav-links a:hover {
  background: var(--oxxy-grey-850);
  color: var(--oxxy-white);
}
.oxxy-nav-links a.active {
  background: var(--oxxy-yellow);
  color: var(--oxxy-black);
}

/* Burger toggle (mobile) */
.oxxy-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
}
.oxxy-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--oxxy-white);
  margin: 4px auto;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}
.oxxy-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.oxxy-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.oxxy-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 700px) {
  .oxxy-nav-toggle { display: block; }
  .oxxy-nav-links {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1rem 1.25rem 2rem;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
  }
  .oxxy-nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .oxxy-nav-links li { width: 100%; }
  .oxxy-nav-links a {
    display: block;
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 1.05rem;
  }
}

/* Décaler les anciens overlays existants pour éviter conflit avec la nav */
.oversubscribed { top: 4.5rem; }
@media (max-width: 700px) { .oversubscribed { top: 4.5rem; right: 0.85rem; } }

/* On retire l'ancien .site-header s'il existait encore */
.site-header { display: none !important; }

/* =============================================================
   NEURAL ANIMATION — Coaching Module 1 (v1.5.1)
   2 points (blanc + jaune) qui se rencontrent → réseau de neurones
   ============================================================= */

.coach-what-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 900px) {
  .coach-what-grid { grid-template-columns: 1fr; }
}

.coach-what-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.coach-what-text .section-title { margin-bottom: 0.5rem; }

.neural-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
}
.neural-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* === LES 2 POINTS INITIAUX === */
.point-white, .point-yellow {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}
.point-white {
  fill: #ffffff;
  animation: pointConverge 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.point-yellow {
  fill: var(--oxxy-yellow);
  filter: drop-shadow(0 0 16px rgba(252, 208, 0, 0.55));
  animation: pointConvergeReverse 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes pointConverge {
  0%, 12% { transform: translate(0, 0); opacity: 1; }
  35% { transform: translate(200px, 0); opacity: 1; }   /* arrive au centre */
  40% { opacity: 0.4; }                                  /* flash de fusion */
  45%, 100% { transform: translate(200px, 0); opacity: 0; }
}
@keyframes pointConvergeReverse {
  0%, 12% { transform: translate(0, 0); opacity: 1; }
  35% { transform: translate(-200px, 0); opacity: 1; }
  40% { opacity: 0.4; }
  45%, 100% { transform: translate(-200px, 0); opacity: 0; }
}

.point-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
}
.point-label-white { fill: var(--oxxy-grey-300); }
.point-label-yellow { fill: var(--oxxy-yellow); }
.point-label {
  animation: labelFade 7s ease-in-out infinite;
}
@keyframes labelFade {
  0%, 30% { opacity: 1; }
  40%, 100% { opacity: 0; }
}

/* === BURST À LA RENCONTRE === */
.neural-burst {
  fill: none;
  stroke: var(--oxxy-yellow);
  stroke-width: 3;
  opacity: 0;
  animation: burstOut 7s ease-out infinite;
}
@keyframes burstOut {
  0%, 35% { r: 14; opacity: 0; stroke-width: 3; }
  40% { r: 14; opacity: 1; stroke-width: 5; }
  55% { r: 80; opacity: 0.4; stroke-width: 1; }
  60%, 100% { r: 100; opacity: 0; stroke-width: 0.3; }
}

/* === GLOW HALO QUAND CONNECTÉ === */
.neural-glow {
  fill: var(--oxxy-yellow);
  opacity: 0;
  filter: blur(40px);
  animation: glowOn 7s ease-in-out infinite;
}
@keyframes glowOn {
  0%, 38% { r: 0; opacity: 0; }
  50% { r: 100; opacity: 0.25; }
  85% { r: 120; opacity: 0.2; }
  100% { r: 0; opacity: 0; }
}

/* === RÉSEAU DE NEURONES (lignes + nodes) === */
.neural-link {
  stroke: var(--oxxy-yellow);
  stroke-width: 1;
  opacity: 0;
  animation: linkAppear 7s ease-out infinite;
}
.neural-link-peripheral {
  stroke-width: 0.7;
  stroke-dasharray: 2 3;
}
@keyframes linkAppear {
  0%, 38% { opacity: 0; stroke-dashoffset: 200; }
  50% { opacity: 0.6; stroke-dashoffset: 0; }
  85% { opacity: 0.4; }
  100% { opacity: 0; }
}

.neural-node {
  fill: var(--oxxy-yellow);
  filter: drop-shadow(0 0 6px var(--oxxy-yellow));
  opacity: 0;
  animation: nodeAppear 7s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.neural-nodes circle:nth-child(1) { animation-delay: 0s; }
.neural-nodes circle:nth-child(2) { animation-delay: 0.08s; }
.neural-nodes circle:nth-child(3) { animation-delay: 0.16s; }
.neural-nodes circle:nth-child(4) { animation-delay: 0.24s; }
.neural-nodes circle:nth-child(5) { animation-delay: 0.32s; }
.neural-nodes circle:nth-child(6) { animation-delay: 0.4s; }
.neural-nodes circle:nth-child(7) { animation-delay: 0.48s; }
.neural-nodes circle:nth-child(8) { animation-delay: 0.56s; }
@keyframes nodeAppear {
  0%, 41% { opacity: 0; }
  50% { opacity: 1; }
  85% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* === PARTICULES QUI VOYAGENT === */
.particle {
  fill: var(--oxxy-yellow);
  filter: drop-shadow(0 0 8px var(--oxxy-yellow));
  opacity: 0;
  animation: particleVisible 7s ease-in-out infinite;
}
@keyframes particleVisible {
  0%, 45% { opacity: 0; }
  55% { opacity: 1; }
  85% { opacity: 0.8; }
  100% { opacity: 0; }
}

@media (max-width: 640px) {
  .neural-stage { max-width: 380px; margin: 0 auto; }
}

/* =============================================================
   NAV DYNAMIQUE v2 — Floating pill + magnetic indicator (v1.5.2)
   ============================================================= */

/* Override de la nav : floating pill centrée */
.oxxy-nav {
  position: fixed;
  top: 1rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100% - 2rem);
  background: rgba(8, 8, 10, 0.7);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.55rem 0.55rem 0.55rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              padding 0.4s ease,
              background 0.4s ease,
              top 0.4s ease,
              box-shadow 0.4s ease;
  animation: navDropIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
}
@keyframes navDropIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-100%); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* État scrolled : plus compact, plus opaque */
.oxxy-nav.is-scrolled {
  top: 0.6rem;
  padding: 0.4rem 0.4rem 0.4rem 0.7rem;
  background: rgba(0, 0, 0, 0.88);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(252, 208, 0, 0.06) inset;
}

.oxxy-nav-brand img {
  width: 38px;
  height: auto;
  transition: width 0.4s ease;
}
.oxxy-nav.is-scrolled .oxxy-nav-brand img { width: 32px; }
@media (max-width: 640px) {
  .oxxy-nav-brand img { width: 32px; }
  .oxxy-nav { gap: 0.4rem; }
}

/* Liens conteneur — devient relatif pour la pill animée */
.oxxy-nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* La pill jaune qui suit le curseur (insérée par JS) */
.nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--oxxy-yellow);
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 4px 18px rgba(252, 208, 0, 0.4);
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1),
              width 0.45s cubic-bezier(0.34, 1.3, 0.64, 1),
              opacity 0.3s ease;
  will-change: transform, width;
}

/* Liens nav réécrits pour la pill */
.oxxy-nav-links li { position: relative; z-index: 1; }
.oxxy-nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--oxxy-grey-200);
  background: transparent;
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}
.oxxy-nav-links a:hover,
.oxxy-nav-links a.active,
.oxxy-nav-links a.is-pill-target {
  background: transparent;
  color: var(--oxxy-black);
}

/* Burger toggle ajusté */
.oxxy-nav-toggle {
  width: 36px;
  height: 36px;
  padding: 6px;
  border-radius: 50%;
  display: none;
}

@media (max-width: 700px) {
  .oxxy-nav {
    padding: 0.4rem 0.4rem 0.4rem 0.7rem;
    gap: 0.3rem;
  }
  .oxxy-nav-toggle { display: block; }
  .nav-pill { display: none; }

  /* Mobile menu : panel flottant qui descend en dessous */
  .oxxy-nav-links {
    position: fixed;
    top: 4.5rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-15px);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.85rem;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    width: calc(100vw - 2rem);
    max-width: 320px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
  }
  .oxxy-nav-links.is-open {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .oxxy-nav-links a {
    padding: 0.85rem 1rem;
    font-size: 1rem;
    text-align: left;
    background: transparent;
  }
  .oxxy-nav-links a.active {
    background: var(--oxxy-yellow);
    color: var(--oxxy-black);
  }
}

/* Décaler les widgets pour la nouvelle nav centrée */
.oversubscribed { top: 1rem; right: 1rem; }
@media (max-width: 700px) { .oversubscribed { top: 4.5rem; right: 0.75rem; } }

/* =============================================================
   NAV v3 — CTA intégré + hide on scroll + progress bar (v1.5.3)
   ============================================================= */

/* Bouton CTA dans la nav */
.oxxy-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.05rem 0.55rem 0.85rem;
  background: var(--oxxy-yellow);
  color: var(--oxxy-black);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-left: 0.4rem;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(252, 208, 0, 0.35),
              0 0 0 1px rgba(0, 0, 0, 0.05) inset;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.3s ease,
              color 0.3s ease,
              box-shadow 0.3s ease;
}
.oxxy-nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.oxxy-nav-cta:hover {
  background: var(--oxxy-magenta);
  color: var(--oxxy-white);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 10px 24px rgba(236, 30, 95, 0.5);
}
.oxxy-nav-cta:hover::before { transform: translateX(100%); }
.oxxy-nav-cta-icon { font-size: 1rem; line-height: 1; }
.oxxy-nav-cta-label { font-weight: 700; letter-spacing: -0.005em; }

/* État scrolled : CTA un peu plus compact */
.oxxy-nav.is-scrolled .oxxy-nav-cta {
  padding: 0.45rem 0.95rem 0.45rem 0.75rem;
  font-size: 0.82rem;
}

/* Hide on scroll down */
.oxxy-nav {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              padding 0.4s ease,
              background 0.4s ease,
              top 0.4s ease,
              box-shadow 0.4s ease,
              opacity 0.4s ease;
}
.oxxy-nav.is-hidden {
  transform: translateX(-50%) translateY(calc(-100% - 1.5rem));
  opacity: 0;
  pointer-events: none;
}

/* Scroll progress bar — fine ligne jaune en bas du nav */
.oxxy-nav-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--oxxy-yellow), var(--oxxy-magenta));
  border-radius: 999px;
  transition: width 0.15s linear;
  pointer-events: none;
  opacity: 0.85;
}

/* Mobile : on cache le label CTA, on garde l'icône */
@media (max-width: 700px) {
  .oxxy-nav-cta {
    padding: 0.5rem 0.7rem;
    margin-left: 0.2rem;
  }
  .oxxy-nav-cta-label { display: none; }
  .oxxy-nav-cta-icon { font-size: 1.15rem; }
}
@media (max-width: 480px) {
  .oxxy-nav-cta { padding: 0.45rem 0.6rem; }
}

/* =============================================================
   NAV v3.1 — Highlight permanent du link actif (v1.5.4)
   ============================================================= */

/* Override : le link actif a son propre fond jaune (pas juste la pill JS) */
.oxxy-nav-links a.active {
  background: var(--oxxy-yellow) !important;
  color: var(--oxxy-black) !important;
  box-shadow: 0 4px 14px rgba(252, 208, 0, 0.35);
  font-weight: 700;
}

/* Et le link actif n'est pas affecté par hover (déjà highlighté) */
.oxxy-nav-links a.active:hover {
  background: var(--oxxy-yellow) !important;
  color: var(--oxxy-black) !important;
  transform: scale(1.03);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* =============================================================
   CHATGPT TRAP — Le piège visuel "moyenne d'internet" (v1.5.5)
   ============================================================= */

.chatgpt-trap {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.trap-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.trap-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 3rem auto 2.5rem;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--oxxy-grey-800);
  border-radius: 24px;
  overflow: hidden;
}

/* Phase 1 : Cloud web chaotique */
.trap-cloud {
  position: relative;
  height: 80px;
  margin-bottom: 0.5rem;
}
.cloud-item {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--oxxy-grey-400);
  white-space: nowrap;
  opacity: 0.7;
  animation: cloudFall 4s ease-in infinite;
  animation-delay: calc(var(--i, 0) * 0.35s);
}
.cloud-item-text { letter-spacing: 0.02em; }
.cloud-item:nth-child(1)  { top: 5%;  left: 5%; }
.cloud-item:nth-child(2)  { top: 25%; left: 15%; font-size: 1.4rem; }
.cloud-item:nth-child(3)  { top: 8%;  left: 28%; }
.cloud-item:nth-child(4)  { top: 30%; left: 38%; font-size: 1.4rem; }
.cloud-item:nth-child(5)  { top: 12%; left: 50%; }
.cloud-item:nth-child(6)  { top: 28%; left: 60%; font-size: 1.4rem; }
.cloud-item:nth-child(7)  { top: 4%;  left: 70%; }
.cloud-item:nth-child(8)  { top: 32%; left: 82%; font-size: 1.4rem; }
.cloud-item:nth-child(9)  { top: 6%;  left: 92%; }
.cloud-item:nth-child(10) { top: 50%; left: 8%;  font-size: 1.4rem; }
.cloud-item:nth-child(11) { top: 55%; left: 75%; }
.cloud-item:nth-child(12) { top: 48%; left: 92%; font-size: 1.4rem; }
@keyframes cloudFall {
  0% { transform: translateY(-20px); opacity: 0; }
  20% { opacity: 0.7; }
  70% { transform: translateY(60px); opacity: 0.7; }
  100% { transform: translateY(120px); opacity: 0; }
}

/* Phase 2 : Robot au centre */
.trap-robot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem auto 1rem;
  z-index: 5;
}
.robot-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(180deg, var(--oxxy-grey-700), var(--oxxy-grey-900));
  border: 2px solid var(--oxxy-grey-700);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  animation: robotIngest 4s ease-in-out infinite;
}
@keyframes robotIngest {
  0%, 100% { transform: scale(1); border-color: var(--oxxy-grey-700); }
  50% { transform: scale(1.05); border-color: var(--oxxy-grey-500); }
}
.robot-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--oxxy-grey-500);
}

/* Phase 3 : Bouillie générique qui sort */
.trap-output {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}
.generic-msg {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--oxxy-grey-500);
  background: var(--oxxy-grey-880);
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  border: 1px dashed var(--oxxy-grey-700);
  font-style: italic;
  max-width: 480px;
  width: 100%;
  text-align: left;
  opacity: 0;
  animation: msgAppear 4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.18s + 1s);
}
@keyframes msgAppear {
  0%, 25% { opacity: 0; transform: translateY(-8px); }
  35% { opacity: 1; transform: translateY(0); }
  85% { opacity: 0.65; }
  100% { opacity: 0; }
}

/* Phase 4 : 5 silhouettes recevant la même bouillie */
.trap-recipients {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
}
.silhouette {
  font-size: 1.8rem;
  filter: grayscale(100%) brightness(0.6);
  opacity: 0;
  animation: silhouetteShow 4s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.12s + 1.6s);
}
@keyframes silhouetteShow {
  0%, 35% { opacity: 0; transform: translateY(8px); }
  50% { opacity: 0.7; transform: translateY(0); }
  90% { opacity: 0.55; }
  100% { opacity: 0; }
}

.trap-conclusion {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 600;
  color: var(--oxxy-grey-200);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.trap-conclusion strong {
  color: var(--oxxy-magenta);
  font-weight: 800;
}

/* =============================================================
   CALENDLY EMBED
   ============================================================= */
.coach-calendly {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.calendly-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.calendly-pretext {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 500;
  color: var(--oxxy-grey-300);
  margin-bottom: 2rem;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.calendly-embed {
  position: relative;
  width: 100%;
  height: 720px;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--oxxy-grey-800);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45),
              0 0 0 1px rgba(252, 208, 0, 0.08) inset;
  background: var(--oxxy-grey-900);
}
.calendly-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.calendly-fallback {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--oxxy-grey-400);
}
.calendly-fallback a {
  color: var(--oxxy-yellow);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.calendly-fallback a:hover { border-color: var(--oxxy-yellow); }

@media (max-width: 640px) {
  .calendly-embed { height: 620px; }
  .trap-stage { padding: 1.5rem 0.85rem; }
  .robot-icon { width: 64px; height: 64px; font-size: 2rem; }
  .silhouette { font-size: 1.4rem; }
  .generic-msg { font-size: 0.7rem; padding: 0.4rem 0.7rem; }
}

/* =============================================================
   LE MIROIR — Page de questionnaire interactif (v1.5.6)
   ============================================================= */

.oxxy-mirror-page main { padding-top: 0; }

/* HERO Miroir */
.mirror-hero {
  flex-direction: column;
  text-align: center;
}
.mirror-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.mirror-hero-title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--oxxy-white);
}
.mirror-hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  color: var(--oxxy-grey-200);
  letter-spacing: -0.015em;
  max-width: 50ch;
}
.mirror-hero-sub strong { color: var(--oxxy-white); font-weight: 700; }

/* QUIZ */
.mirror-quiz {
  padding: 4rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.mirror-quiz-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* Progress bar */
.mirror-progress-bar {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 3rem;
  height: 6px;
  background: var(--oxxy-grey-880);
  border-radius: 999px;
  overflow: visible;
}
.mirror-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--oxxy-yellow), var(--oxxy-magenta));
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mirror-progress-text {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--oxxy-grey-400);
  white-space: nowrap;
}

/* Question card */
.mirror-q {
  display: none;
  text-align: left;
  margin-top: 2.5rem;
  animation: mirrorQAppear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mirror-q.is-active { display: block; }
@keyframes mirrorQAppear {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.mirror-q-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--oxxy-yellow);
  margin-bottom: 0.75rem;
  text-align: center;
}
.mirror-q-text {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--oxxy-white);
  margin-bottom: 2.5rem;
  text-align: center;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* Options */
.mirror-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
  max-width: 720px;
  margin: 0 auto;
}
.mirror-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.4rem 1.5rem;
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(16px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: inherit;
  color: var(--oxxy-white);
}
.mirror-option:hover {
  border-color: var(--oxxy-yellow);
  background: rgba(252, 208, 0, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(252, 208, 0, 0.12);
}
.mirror-option:active,
.mirror-option.is-selected {
  background: var(--oxxy-yellow);
  border-color: var(--oxxy-yellow);
  color: var(--oxxy-black);
  transform: scale(0.98);
}
.opt-emoji {
  font-size: 1.6rem;
  line-height: 1;
}
.opt-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.opt-meta {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--oxxy-grey-400);
}
.mirror-option:hover .opt-meta { color: var(--oxxy-grey-200); }
.mirror-option.is-selected .opt-meta { color: rgba(0,0,0,0.6); }

/* Bouton retour */
.mirror-back {
  margin-top: 2rem;
  background: transparent;
  border: 1px solid var(--oxxy-grey-700);
  color: var(--oxxy-grey-300);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.mirror-back:hover {
  border-color: var(--oxxy-grey-500);
  color: var(--oxxy-white);
}

/* RÉSULTAT */
.mirror-result-section {
  flex-direction: column;
  text-align: center;
}
.mirror-result-inner {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}
.mirror-result-card {
  margin: 2rem 0 2.5rem;
  padding: 2.5rem 2rem;
  background: rgba(20, 20, 24, 0.6);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.mirror-result-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--oxxy-yellow);
}
.result-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.result-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--oxxy-white);
  margin-bottom: 0.5rem;
}
.result-tagline {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 600;
  color: var(--oxxy-grey-200);
  margin-bottom: 1.5rem;
  letter-spacing: -0.015em;
}
.result-product-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--oxxy-yellow);
  color: var(--oxxy-black);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}
.result-desc {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.6;
  letter-spacing: -0.005em;
  max-width: 56ch;
  margin: 0 auto;
}

.mirror-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.mirror-result-actions .btn-cyan-outline {
  align-self: center;
}

.mirror-result-footer {
  font-size: 0.95rem;
  color: var(--oxxy-grey-400);
}
.mirror-result-footer a {
  color: var(--oxxy-yellow);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.mirror-result-footer a:hover { border-color: var(--oxxy-yellow); }