/* =============================================================
   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); }

/* =============================================================
   FIX menu cliquable au scroll (v1.5.7)
   ============================================================= */
.oxxy-nav {
  z-index: 9999 !important;
}
.nav-pill,
.oxxy-nav-progress,
.bg-glow,
.bg-glow * {
  pointer-events: none !important;
}
.oxxy-nav-links a,
.oxxy-nav-cta,
.oxxy-nav-toggle,
.oxxy-nav-brand {
  position: relative;
  z-index: 2;
}

/* Progress bar nav */
.oxxy-nav-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--oxxy-yellow), var(--oxxy-magenta));
  border-radius: 999px;
  transition: width 0.15s ease-out;
  pointer-events: none;
}

/* =============================================================
   STUDIO OXXY — Page complète (v1.6.0)
   ============================================================= */

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

/* Hero Studio */
.studio-hero {
  flex-direction: column;
  text-align: center;
  background: var(--oxxy-black);
}
.studio-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.studio-hero-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--oxxy-white);
}
.studio-hero-sub {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 600;
  color: var(--oxxy-grey-200);
  letter-spacing: -0.015em;
}
.studio-hero-cta {
  margin-top: 1rem;
  font-size: 1rem;
  padding: 1.1rem 1.85rem;
}
.studio-hero-promo {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--oxxy-grey-300);
  margin-top: 0.5rem;
  letter-spacing: -0.005em;
}
.studio-hero-promo strong { color: var(--oxxy-yellow); font-weight: 700; }
.studio-hero-promo .strike { text-decoration: line-through; color: var(--oxxy-grey-500); margin: 0 0.25rem; }
.studio-hero-promo em { color: var(--oxxy-magenta); font-weight: 700; }

/* Le piège — stats */
.studio-trap {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.studio-trap-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.studio-trap-body {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin-bottom: 3rem;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.studio-trap-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.trap-stat {
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(16px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.trap-stat-num {
  display: block;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--oxxy-yellow);
  margin-bottom: 0.5rem;
}
.trap-stat-cyan { color: var(--oxxy-cyan); }
.trap-stat-magenta { color: var(--oxxy-magenta); }
.trap-stat-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--oxxy-grey-300);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.trap-stat-label strong { color: var(--oxxy-white); }

/* Studio features grid */
.studio-features {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.studio-features-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.studio-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  text-align: left;
}
@media (max-width: 900px) {
  .studio-features-grid { grid-template-columns: 1fr; }
}
.studio-feat-card {
  background: rgba(20, 20, 24, 0.6);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 24px;
  padding: 2rem 1.85rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.studio-feat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.studio-feat-cyan::before { background: var(--oxxy-cyan); }
.studio-feat-yellow::before { background: var(--oxxy-yellow); }
.studio-feat-magenta::before { background: var(--oxxy-magenta); }
.studio-feat-card:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(0,0,0,0.45); }
.studio-feat-icon {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  line-height: 1;
}
.studio-feat-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--oxxy-white);
  margin-bottom: 0.5rem;
}
.studio-feat-card p {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* Multiplication — grid 2 colonnes */
.studio-multi {
  padding: 6rem var(--pad-x);
}
.studio-multi-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .studio-multi-grid { grid-template-columns: 1fr; }
}
.studio-multi-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.studio-multi-platforms {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}
.platform-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--oxxy-grey-900);
  border: 1.5px solid var(--oxxy-grey-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--oxxy-grey-300);
  animation: platformPulse 6s ease-in-out infinite;
}
.platform-badge.platform-fb { animation-delay: 0s; }
.platform-badge.platform-ig { animation-delay: 1s; }
.platform-badge.platform-tt { animation-delay: 2s; }
.platform-badge.platform-yt { animation-delay: 3s; }
@keyframes platformPulse {
  0%, 80%, 100% { color: var(--oxxy-grey-400); border-color: var(--oxxy-grey-700); transform: scale(1); }
  10%, 30% { color: var(--oxxy-yellow); border-color: var(--oxxy-yellow); transform: scale(1.1); box-shadow: 0 0 20px rgba(252,208,0,0.3); }
}
.studio-multi-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.studio-multi-body {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.6;
  letter-spacing: -0.005em;
  max-width: 50ch;
}
.studio-multi-body strong { color: var(--oxxy-white); font-weight: 700; }
.studio-multi-body em { color: var(--oxxy-yellow); font-weight: 600; }
.studio-multi-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.multi-stat-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: rgba(20, 20, 24, 0.55);
  border: 1px solid var(--oxxy-grey-800);
  border-radius: 12px;
}
.multi-stat-num {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--oxxy-yellow);
}
.multi-stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--oxxy-grey-300);
}

/* Process steps Studio (réutilise .step) */
.studio-process {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.studio-process-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.studio-process-inner .steps {
  display: grid;
  gap: 1.25rem;
  text-align: left;
  margin-top: 2.5rem;
}
.studio-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;
}
.studio-process-inner .step:hover {
  transform: translateX(6px);
  border-color: var(--oxxy-grey-700);
}
.studio-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;
  flex-shrink: 0;
  color: var(--oxxy-black);
}
.studio-process-inner .step-num-yellow { background: var(--oxxy-yellow); }
.studio-process-inner .step-num-cyan { background: var(--oxxy-cyan); }
.studio-process-inner .step-num-magenta { background: var(--oxxy-magenta); color: var(--oxxy-white); }
.studio-process-inner .step h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oxxy-white);
  margin-bottom: 0.4rem;
}
.studio-process-inner .step p {
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
}

/* Pricing Studio */
.studio-pricing {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.studio-pricing-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.studio-pricing-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
  text-align: left;
}
@media (max-width: 900px) {
  .studio-pricing-grid { grid-template-columns: 1fr; }
}
.studio-pkg {
  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;
}
.studio-pkg::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.studio-pkg-yellow::before { background: var(--oxxy-yellow); }
.studio-pkg-cyan::before { background: var(--oxxy-cyan); }
.studio-pkg:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.studio-pkg-label {
  display: inline-block;
  align-self: flex-start;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.studio-pkg-yellow .studio-pkg-label { background: var(--oxxy-yellow); color: var(--oxxy-black); }
.studio-pkg-cyan .studio-pkg-label { background: var(--oxxy-cyan); color: var(--oxxy-black); }
.studio-pkg-title {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--oxxy-white);
  line-height: 1.1;
}
.studio-pkg-price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.studio-pkg-price-num {
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.studio-pkg-yellow .studio-pkg-price-num { color: var(--oxxy-yellow); }
.studio-pkg-cyan .studio-pkg-price-num { color: var(--oxxy-cyan); }
.studio-pkg-price-old {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--oxxy-grey-500);
  text-decoration: line-through;
}
.studio-pkg-meta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--oxxy-grey-300);
  letter-spacing: -0.005em;
}
.studio-pkg-desc {
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
}
.studio-pricing-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: rgba(236, 30, 95, 0.1);
  border: 1px solid rgba(236, 30, 95, 0.3);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--oxxy-magenta);
  margin-top: 2rem;
}
.studio-pricing-note .meta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--oxxy-magenta);
  animation: pulseDot 1.6s ease-in-out infinite;
}

/* Authenticité section */
.studio-auth {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.studio-auth-inner {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}
.studio-auth-body {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.6;
  letter-spacing: -0.01em;
  max-width: 56ch;
  margin: 1.5rem auto 0;
}
.studio-auth-body strong { color: var(--oxxy-white); font-weight: 700; }
.studio-auth-body em { color: var(--oxxy-yellow); font-weight: 600; }

/* =============================================================
   TAKTIK PAGE — Page complète (v1.8.0)
   ============================================================= */

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

/* Hero */
.taktik-hero {
  flex-direction: column;
  text-align: center;
  background: var(--oxxy-black);
}
.taktik-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.taktik-hero-title {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--oxxy-white);
}
.taktik-hero-sub {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 600;
  color: var(--oxxy-grey-200);
  letter-spacing: -0.015em;
  max-width: 56ch;
}
.taktik-hero-sub strong { color: var(--oxxy-white); font-weight: 700; }
.taktik-hero-cta { margin-top: 1rem; font-size: 1rem; padding: 1.1rem 1.85rem; }
.taktik-hero-promo {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--oxxy-grey-300);
  margin-top: 0.5rem;
}
.taktik-hero-promo strong { color: var(--oxxy-yellow); font-weight: 700; }
.taktik-hero-promo .strike { text-decoration: line-through; color: var(--oxxy-grey-500); margin: 0 0.25rem; }
.taktik-hero-promo em { color: var(--oxxy-magenta); font-weight: 700; }

/* Trap (chaos cloud) */
.taktik-trap {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.taktik-trap-inner {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.taktik-trap-body {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin-bottom: 2.5rem;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.taktik-tools-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 2rem auto;
  max-width: 760px;
}
.tool-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.05rem;
  background: rgba(20, 20, 24, 0.7);
  border: 1.5px solid var(--oxxy-grey-700);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--oxxy-grey-300);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.3s ease;
}
.tool-tag:hover {
  transform: rotate(0deg) scale(1.06);
  border-color: var(--oxxy-magenta);
}
.taktik-trap-stat {
  margin-top: 2rem;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  color: var(--oxxy-white);
  letter-spacing: -0.01em;
}
.taktik-trap-stat strong {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 0.25rem;
}
.taktik-trap-stat-sub {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--oxxy-grey-400);
  margin-top: 0.25rem;
}

/* What — funnel grid */
.taktik-what {
  padding: 6rem var(--pad-x);
}
.taktik-what-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) { .taktik-what-grid { grid-template-columns: 1fr; } }
.taktik-what-visual {
  display: flex;
  justify-content: center;
}
.taktik-what-visual .funnel-stage {
  width: clamp(280px, 38vw, 460px);
  height: clamp(440px, 56vw, 620px);
}
/* Force animation on this page */
.oxxy-taktik-page .falling-doc {
  animation: fallStraight 3.5s ease-in infinite;
  animation-delay: calc(var(--i, 0) * 0.45s);
}
.oxxy-taktik-page .chaos-piece {
  animation: chaosToFunnel 5s cubic-bezier(0.5, 0, 0.7, 1) infinite;
  animation-delay: var(--d, 0s);
}
.oxxy-taktik-page .db-row {
  animation: dbRowAppear 5s ease-out infinite;
  animation-delay: var(--d, 0s);
}
.oxxy-taktik-page .db-row .db-bar::after {
  animation: dbBarFill 5s ease-out infinite;
  animation-delay: calc(var(--d, 0s) + 0.2s);
}
.taktik-what-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.taktik-what-body {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.6;
  letter-spacing: -0.005em;
  max-width: 50ch;
}
.taktik-what-body strong { color: var(--oxxy-white); font-weight: 700; }

/* Modules grid */
.taktik-modules {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.taktik-modules-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.taktik-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  text-align: left;
}
.taktik-mod {
  background: rgba(20, 20, 24, 0.6);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 22px;
  padding: 1.85rem 1.65rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.taktik-mod::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.taktik-mod-yellow::before { background: var(--oxxy-yellow); }
.taktik-mod-cyan::before { background: var(--oxxy-cyan); }
.taktik-mod-magenta::before { background: var(--oxxy-magenta); }
.taktik-mod:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.45);
  border-color: var(--oxxy-grey-700);
}
.taktik-mod-icon {
  font-size: 2rem;
  margin-bottom: 0.85rem;
  line-height: 1;
}
.taktik-mod h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oxxy-white);
  margin-bottom: 0.5rem;
}
.taktik-mod p {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* Time (steps) */
.taktik-time {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.taktik-time-inner {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.taktik-time-inner .steps {
  display: grid;
  gap: 1.25rem;
  text-align: left;
  margin-top: 2.5rem;
}
.taktik-time-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;
}
.taktik-time-inner .step:hover {
  transform: translateX(6px);
  border-color: var(--oxxy-grey-700);
}
.taktik-time-inner .step-num {
  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;
  flex-shrink: 0;
  color: var(--oxxy-black);
}
.taktik-time-inner .step-num-yellow { background: var(--oxxy-yellow); }
.taktik-time-inner .step-num-cyan { background: var(--oxxy-cyan); }
.taktik-time-inner .step-num-magenta { background: var(--oxxy-magenta); color: var(--oxxy-white); }
.taktik-time-inner .step h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oxxy-white);
  margin-bottom: 0.4rem;
}
.taktik-time-inner .step p {
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
}
.taktik-time-inner .step strong { color: var(--oxxy-white); }
.taktik-time-inner .step em { color: var(--oxxy-yellow); font-weight: 600; }

/* Pricing — 3 packages */
.taktik-pricing {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.taktik-pricing-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.taktik-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
  text-align: left;
}
@media (max-width: 1000px) { .taktik-pricing-grid { grid-template-columns: 1fr; } }
.taktik-pkg {
  background: rgba(20, 20, 24, 0.6);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 24px;
  padding: 2rem 1.85rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.taktik-pkg::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.taktik-pkg-yellow::before { background: var(--oxxy-yellow); }
.taktik-pkg-cyan::before { background: var(--oxxy-cyan); }
.taktik-pkg-magenta::before { background: var(--oxxy-magenta); }
.taktik-pkg:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.taktik-pkg-featured {
  border-color: var(--oxxy-yellow);
  box-shadow: 0 0 0 1px var(--oxxy-yellow), 0 16px 48px rgba(252, 208, 0, 0.15);
  transform: scale(1.03);
}
@media (max-width: 1000px) { .taktik-pkg-featured { transform: none; } }
.taktik-pkg-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--oxxy-yellow);
}
.taktik-pkg-cyan .taktik-pkg-label { color: var(--oxxy-cyan); }
.taktik-pkg-magenta .taktik-pkg-label { color: var(--oxxy-magenta); }
.taktik-pkg-popular {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--oxxy-yellow);
  color: var(--oxxy-black);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.taktik-pkg-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--oxxy-grey-400);
}
.taktik-pkg-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
}
.taktik-pkg-price-num {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.taktik-pkg-yellow .taktik-pkg-price-num { color: var(--oxxy-yellow); }
.taktik-pkg-cyan .taktik-pkg-price-num { color: var(--oxxy-cyan); }
.taktik-pkg-magenta .taktik-pkg-price-num { color: var(--oxxy-magenta); }
.taktik-pkg-price-old {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--oxxy-grey-500);
  text-decoration: line-through;
}
.taktik-pkg-for {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--oxxy-white);
  letter-spacing: -0.005em;
  padding: 0.4rem 0.7rem;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  align-self: flex-start;
}
.taktik-pkg-inc {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
  letter-spacing: -0.005em;
  flex: 1;
}
.taktik-pricing-bonus {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(252, 208, 0, 0.06);
  border: 1px solid rgba(252, 208, 0, 0.25);
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.55;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Cerveau Collectif */
.taktik-cc {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.taktik-cc-inner {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.taktik-cc-card {
  background: linear-gradient(135deg, rgba(252, 208, 0, 0.08), rgba(236, 30, 95, 0.04));
  border: 1.5px solid var(--oxxy-yellow);
  border-radius: 24px;
  padding: 3rem 2rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  box-shadow: 0 24px 60px rgba(252, 208, 0, 0.15);
}
.taktik-cc-price-num {
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--oxxy-yellow);
}
.taktik-cc-meta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--oxxy-grey-200);
  letter-spacing: -0.005em;
}
.taktik-cc-desc {
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.6;
  letter-spacing: -0.005em;
  max-width: 56ch;
}
.taktik-cc-desc strong { color: var(--oxxy-yellow); font-weight: 700; }

/* Add-ons */
.taktik-addons {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.taktik-addons-inner {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.taktik-addons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  text-align: left;
}
@media (max-width: 800px) { .taktik-addons-grid { grid-template-columns: 1fr; } }
.taktik-addons-col {
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(16px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 18px;
  padding: 1.85rem 1.65rem;
}
.taktik-addons-col h3 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--oxxy-white);
  margin-bottom: 1rem;
}
.taktik-addons-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.taktik-addons-list li {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  letter-spacing: -0.005em;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--oxxy-grey-800);
}
.taktik-addons-list li:last-child { border-bottom: none; }

/* =============================================================
   v1.9.0 — Témoignages + FAQ + Sticky mobile + Number counters
   + Cursor magnetic + Light burst
   ============================================================= */

/* ===== TÉMOIGNAGES ===== */
.testimonials-section {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.testimonials-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  text-align: left;
}
.testimonial-card {
  position: relative;
  background: rgba(20, 20, 24, 0.6);
  backdrop-filter: blur(20px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 22px;
  padding: 2rem 1.85rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  overflow: hidden;
}
.testimonial-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.testimonial-yellow::before { background: var(--oxxy-yellow); }
.testimonial-cyan::before { background: var(--oxxy-cyan); }
.testimonial-magenta::before { background: var(--oxxy-magenta); }
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
  border-color: var(--oxxy-grey-700);
}
.testimonial-quote-mark {
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 0.5;
  font-weight: 700;
  color: var(--oxxy-grey-700);
  margin-bottom: -0.5rem;
}
.testimonial-quote {
  font-size: 1rem;
  font-weight: 500;
  color: var(--oxxy-grey-100);
  line-height: 1.55;
  letter-spacing: -0.005em;
  flex: 1;
}
.testimonial-quote strong { color: var(--oxxy-yellow); font-weight: 700; }
.testimonial-quote em { color: var(--oxxy-magenta); font-weight: 600; }
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--oxxy-grey-800);
}
.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.testimonial-avatar-yellow { background: var(--oxxy-yellow); color: var(--oxxy-black); }
.testimonial-avatar-cyan { background: var(--oxxy-cyan); color: var(--oxxy-black); }
.testimonial-avatar-magenta { background: var(--oxxy-magenta); color: var(--oxxy-white); }
.testimonial-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.testimonial-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--oxxy-white);
  letter-spacing: -0.01em;
}
.testimonial-role {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--oxxy-grey-400);
  letter-spacing: -0.005em;
}

/* ===== FAQ ACCORDÉON ===== */
.faq-section {
  padding: 6rem var(--pad-x);
  flex-direction: column;
  text-align: center;
}
.faq-inner {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 2.5rem;
  text-align: left;
}
.faq-item {
  background: rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(16px);
  border: 1.5px solid var(--oxxy-grey-800);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.faq-item:hover { border-color: var(--oxxy-grey-700); }
.faq-item[open] { border-color: var(--oxxy-yellow); }
.faq-question {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--oxxy-white);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--oxxy-yellow);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(252, 208, 0, 0.08);
}
.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
  background: var(--oxxy-yellow);
  color: var(--oxxy-black);
}
.faq-answer {
  padding: 0 1.5rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--oxxy-grey-200);
  line-height: 1.6;
  letter-spacing: -0.005em;
}
.faq-answer strong { color: var(--oxxy-white); font-weight: 700; }
.faq-answer em { color: var(--oxxy-yellow); font-weight: 600; }

/* ===== STICKY MOBILE CTA ===== */
.sticky-mobile-cta {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 95;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--oxxy-yellow);
  color: var(--oxxy-black);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(252, 208, 0, 0.45),
              0 0 0 1px rgba(0,0,0,0.05);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  animation: stickyPulse 2.4s ease-in-out infinite;
}
.sticky-mobile-cta:hover, .sticky-mobile-cta:active {
  transform: scale(1.1);
  box-shadow: 0 20px 44px rgba(252, 208, 0, 0.6);
}
@keyframes stickyPulse {
  0%, 100% { box-shadow: 0 16px 36px rgba(252, 208, 0, 0.4), 0 0 0 0 rgba(252, 208, 0, 0.4); }
  50% { box-shadow: 0 16px 36px rgba(252, 208, 0, 0.4), 0 0 0 12px rgba(252, 208, 0, 0); }
}
@media (max-width: 700px) {
  .sticky-mobile-cta { display: flex; }
}

/* ===== NUMBER COUNTER ===== */
.counter-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ===== CURSOR MAGNETIC (CTA primary) ===== */
.btn-yellow-glow,
.btn-messenger-big {
  will-change: transform;
}

/* ===== LIGHT BURST (puzzle home) ===== */
.puzzle-light-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(252, 208, 0, 0.6), transparent 60%);
  opacity: 0;
}
.puzzle-mass.energized + .puzzle-light-burst,
.hero-puzzle-stage.complete + .puzzle-light-burst {
  animation: lightBurstOut 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes lightBurstOut {
  0% { width: 0; height: 0; opacity: 0; }
  20% { opacity: 1; }
  100% { width: 800px; height: 800px; opacity: 0; }
}

/* ===== STAGGER REVEALS améliorés ===== */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
}
.stagger.in-view > * {
  animation: staggerIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.stagger.in-view > *:nth-child(1) { animation-delay: 0.05s; }
.stagger.in-view > *:nth-child(2) { animation-delay: 0.15s; }
.stagger.in-view > *:nth-child(3) { animation-delay: 0.25s; }
.stagger.in-view > *:nth-child(4) { animation-delay: 0.35s; }
.stagger.in-view > *:nth-child(5) { animation-delay: 0.45s; }
.stagger.in-view > *:nth-child(6) { animation-delay: 0.55s; }
@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== reduced-motion respect ===== */
@media (prefers-reduced-motion: reduce) {
  .sticky-mobile-cta { animation: none; }
  .testimonial-card, .faq-item { transition: none; }
  .stagger > * { opacity: 1; transform: none; animation: none; }
  .puzzle-light-burst { display: none; }
}

/* ===================================================================
   v2.0.0 — OXXY REBOOT v7 (DEC-2026-05-09)
   Toile qualification · Founders banner · Écosystème · Pricing · Allié Intro
   =================================================================== */

/* === FOUNDERS BANNER (top of page, sous nav) === */
.founders-banner {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(90deg, rgba(252, 208, 0, 0.12), rgba(236, 30, 95, 0.12));
  border-bottom: 1px solid rgba(252, 208, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  letter-spacing: 0.01em;
  flex-wrap: wrap;
  text-align: center;
}
.founders-banner .founders-spark {
  font-size: 16px;
  filter: drop-shadow(0 0 8px rgba(252, 208, 0, 0.6));
  animation: founders-pulse 2.5s ease-in-out infinite;
}
@keyframes founders-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}
.founders-banner .founders-text { color: var(--oxxy-white, #f5f5f7); }
.founders-banner .founders-text strong { color: var(--oxxy-yellow, #FCD000); font-weight: 700; }
.founders-banner .founders-link {
  color: var(--oxxy-yellow, #FCD000);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.founders-banner .founders-link:hover { color: #fff; }
/* Décale le main d'autant que le banner Founders */
body:has(.founders-banner) main { padding-top: 36px; }
@media (max-width: 640px) {
  .founders-banner { font-size: 11.5px; padding: 8px 12px; }
  body:has(.founders-banner) main { padding-top: 48px; }
}

/* === TOILE QUALIFICATION === */
.toile-section {
  padding: 120px 24px 100px;
  position: relative;
}
.toile-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.toile-section .section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oxxy-grey-400, #888);
  margin-bottom: 12px;
}
.toile-section .section-title {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 64px;
}
.toile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 72px;
}
@media (max-width: 1024px) { .toile-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
.toile-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 28px 32px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.toile-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.toile-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent, #fff);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--accent, transparent);
}
.toile-card:hover::before { opacity: 0.15; }
.toile-card-employe      { --accent: rgba(31, 198, 229, 0.6); }
.toile-card-dirigeant    { --accent: rgba(168, 85, 247, 0.6); }
.toile-card-entrepreneur { --accent: rgba(236, 30, 95, 0.6); }
.toile-card .toile-icon {
  font-size: 36px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.toile-card .toile-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxxy-grey-500, #999);
  font-weight: 600;
}
.toile-card .toile-title {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.toile-card .toile-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--oxxy-grey-300, #bbb);
}
.toile-card .toile-products {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--oxxy-yellow, #FCD000);
  font-weight: 600;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.toile-card .toile-cta {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-top: auto;
  padding-top: 8px;
}

/* === ALLIÉ INTRO HIGHLIGHT (sous toile, sur home) === */
.intro-highlight {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px 44px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(252, 208, 0, 0.08), rgba(236, 30, 95, 0.05));
  border: 1px solid rgba(252, 208, 0, 0.18);
  text-align: center;
}
.intro-highlight .section-eyebrow {
  color: var(--oxxy-yellow, #FCD000);
  font-weight: 700;
  margin-bottom: 16px;
}
.intro-highlight .intro-title {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
}
.intro-highlight .intro-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--oxxy-grey-300, #bbb);
  margin-bottom: 28px;
}
.intro-highlight .intro-cta {
  display: inline-block;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
}

/* === ÉCOSYSTÈME (TUVUCA · Le Martien · Le Décodeur) === */
.eco-section {
  padding: 100px 24px 120px;
  position: relative;
}
.eco-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.eco-section .section-title {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.eco-section .eco-subtitle {
  font-size: 17px;
  color: var(--oxxy-grey-300, #bbb);
  max-width: 680px;
  margin: 0 auto 56px;
}
.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .eco-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
.eco-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 26px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.eco-card:hover { transform: translateY(-4px); border-color: var(--accent, #fff); }
.eco-card-tuvuca   { --accent: rgba(252, 208, 0, 0.5); }
.eco-card-martien  { --accent: rgba(31, 198, 229, 0.5); }
.eco-card-decodeur { --accent: rgba(168, 85, 247, 0.5); }
.eco-card .eco-icon { font-size: 32px; }
.eco-card .eco-card-title { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.eco-card .eco-meta { font-size: 12.5px; letter-spacing: 0.06em; color: var(--oxxy-grey-500, #999); text-transform: uppercase; }
.eco-card .eco-desc { font-size: 14.5px; line-height: 1.55; color: var(--oxxy-grey-300, #bbb); }
.eco-card .eco-cta { font-size: 14px; font-weight: 600; color: var(--oxxy-yellow, #FCD000); margin-top: 8px; }

/* === PRICING SECTION (Plus · Pro · Allié) === */
.pricing-section {
  padding: 100px 24px 80px;
  position: relative;
}
.pricing-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.pricing-section .section-title {
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.pricing-founders-note {
  font-size: 14px;
  color: var(--oxxy-yellow, #FCD000);
  margin: 0 0 40px;
}
.pricing-founders-note strong { font-weight: 700; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 56px auto 0;
}
.pricing-card {
  position: relative;
  padding: 36px 28px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.pricing-card:hover { transform: translateY(-4px); border-color: rgba(252, 208, 0, 0.4); }
.pricing-card-featured {
  background: linear-gradient(155deg, rgba(252, 208, 0, 0.08), rgba(236, 30, 95, 0.06));
  border-color: rgba(252, 208, 0, 0.5);
  box-shadow: 0 0 0 1px rgba(252, 208, 0, 0.2), 0 24px 48px rgba(0, 0, 0, 0.4);
  transform: translateY(-8px);
}
.pricing-card-featured:hover { transform: translateY(-12px); }
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--oxxy-yellow, #FCD000);
  color: #0a0a0c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-card .pricing-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.pricing-card .pricing-price {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--oxxy-yellow, #FCD000);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.pricing-card .pricing-founders {
  font-size: 13px;
  color: var(--oxxy-yellow, #FCD000);
  opacity: 0.85;
  font-weight: 600;
  margin: 0;
}
.pricing-card .pricing-meta {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--oxxy-grey-400, #888);
  text-transform: uppercase;
  margin: 4px 0 8px;
}
.pricing-card .pricing-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--oxxy-grey-300, #bbb);
  flex-grow: 1;
}
.pricing-card .pricing-cta {
  margin-top: 18px;
  display: inline-block;
  text-align: center;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 600;
}

/* === META PILLS (hero meta tags) === */
.coach-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--oxxy-grey-200, #ddd);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* === FEATURES GRID 4-up (pour OXXY Pro) === */
.features-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) { .features-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .features-grid-4 { grid-template-columns: 1fr; } }

.feature-card-purple {
  border-left: 4px solid #a855f7;
}
.feature-card-purple .feature-icon { filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.4)); }

/* === Reduced motion ajustements === */
@media (prefers-reduced-motion: reduce) {
  .toile-card, .eco-card, .pricing-card, .founders-banner .founders-spark {
    transition: none;
    animation: none;
    transform: none;
  }
}

/* ===================================================================
   v2.1.0 — REBOOT MINIMALISTE (2026-05-13)
   1 question · 3 options · c'est tout
   =================================================================== */

body.home-reboot {
  background: #0a0a0c;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  font-feature-settings: "kern" 1, "ss01" 1, "ss02" 1, "cv01" 1, "cv09" 1, "cv11" 1;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
body.home-reboot::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(252, 208, 0, 0.06), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(236, 30, 95, 0.05), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(31, 198, 229, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* === REBOOT NAV (ultra-minimal) === */
.reboot-nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
}
.reboot-brand img {
  height: 32px;
  width: auto;
  display: block;
}
.reboot-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #0a0a0c;
  background: #FCD000;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  letter-spacing: -0.005em;
}
.reboot-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(252, 208, 0, 0.3);
}
.reboot-nav-cta-icon { font-size: 14px; }
@media (max-width: 640px) {
  .reboot-nav { padding: 16px 18px; }
  .reboot-nav-cta-label { display: none; }
  .reboot-nav-cta-icon { font-size: 18px; }
  .reboot-nav-cta { padding: 10px 12px; }
}

/* === REBOOT MAIN === */
.reboot-main {
  flex: 1;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 80px;
}
.reboot-hero {
  width: 100%;
}
.reboot-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.reboot-eyebrow {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.5);
  margin: 0 0 24px;
  font-weight: 600;
}
.reboot-question {
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0 0 80px;
  color: #fff;
}
.reboot-question em.text-gradient {
  font-style: normal;
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@media (max-width: 640px) {
  .reboot-question { margin-bottom: 56px; }
}

/* === LES 3 OPTIONS === */
.reboot-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .reboot-options { grid-template-columns: 1fr; max-width: 480px; }
}

.reboot-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 44px 32px 36px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease, background 0.35s ease;
  overflow: hidden;
  min-height: 280px;
}
.reboot-option::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.reboot-option:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}
.reboot-option:hover::before { opacity: 0.18; }
.reboot-option-entrepreneur { --accent: rgba(236, 30, 95, 0.5); }
.reboot-option-dirigeant    { --accent: rgba(168, 85, 247, 0.5); }
.reboot-option-employe      { --accent: rgba(31, 198, 229, 0.5); }

.reboot-option-num {
  font-size: 13px;
  letter-spacing: 0.2em;
  font-weight: 600;
  color: rgba(245, 245, 247, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, "SF Mono", monospace;
}
.reboot-option-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: #fff;
}
.reboot-option-sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 245, 247, 0.65);
  margin: 0;
  letter-spacing: -0.005em;
}
.reboot-option-arrow {
  margin-top: auto;
  padding-top: 24px;
  font-size: 28px;
  font-weight: 300;
  color: #FCD000;
  transition: transform 0.3s ease;
}
.reboot-option:hover .reboot-option-arrow {
  transform: translateX(8px);
}

/* === FOOTER === */
.reboot-footer {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 24px;
  font-size: 12px;
  color: rgba(245, 245, 247, 0.35);
  letter-spacing: 0.01em;
}
.reboot-footer p { margin: 0; }
.reboot-footer strong { color: rgba(245, 245, 247, 0.6); font-weight: 600; }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .reboot-option, .reboot-option-arrow { transition: none; }
  .reboot-option:hover { transform: none; }
  .reboot-option:hover .reboot-option-arrow { transform: none; }
}


/* ===================================================================
   LANG TOGGLE FR / EN — bouton dans la nav, sobre, OXXY-style
   =================================================================== */

.reboot-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(245, 245, 247, 0.65);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lang-toggle:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(252, 208, 0, 0.4);
  color: #fff;
}
.lang-toggle:active { transform: scale(0.97); }

.lang-toggle-icon {
  font-size: 14px;
  margin-right: 2px;
}
.lang-toggle-fr,
.lang-toggle-en {
  color: rgba(245, 245, 247, 0.4);
  transition: color 0.25s ease;
  letter-spacing: 0.04em;
}
.lang-toggle-fr.active,
.lang-toggle-en.active {
  color: #FCD000;
}
.lang-toggle-sep {
  color: rgba(245, 245, 247, 0.25);
  margin: 0 2px;
}

@media (max-width: 640px) {
  .reboot-nav-right { gap: 8px; }
  .lang-toggle { padding: 7px 10px; font-size: 11px; }
  .lang-toggle-icon { font-size: 12px; }
}

/* Body lang state hook (in case we want to swap fonts per language later) */
body[data-lang="en"] {
  /* placeholder for English-specific tweaks */
}

/* ===================================================================
   V10 — HOME MODULE EMBOÎTÉ (2026-05-14)
   1 module central. 3 personas. 4 produits par persona, emboîtés dans
   l'animation persona (satellites · dents · tampons).
   =================================================================== */

body.home-v10 {
  margin: 0;
  background: #0a0a0c;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  font-feature-settings: "kern" 1, "ss01" 1, "cv01" 1, "cv11" 1;
  min-height: 100vh;
  overflow-x: hidden;
}
body.home-v10::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(252, 208, 0, 0.05), transparent 50%),
    radial-gradient(circle at 82% 80%, rgba(236, 30, 95, 0.04), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ===== Nav V10 (legacy — supplanté par V11.4 nav v2 plus bas) ===== */
.v10-brand img { height: 30px; display: block; }
.v10-nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ===== Main + module ===== */
.v10-main {
  position: relative;
  z-index: 5;
  padding: 0 24px 80px;
}
.v10-module {
  position: relative;
  max-width: 1280px;
  margin: 32px auto 0;
  border-radius: 32px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 78vh;
  padding: 56px 48px 48px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
@media (max-width: 720px) {
  .v10-module { padding: 36px 22px 30px; min-height: 80vh; }
}

/* Stat watermark (12,7 % filigrane) */
.v10-watermark {
  position: absolute;
  top: 28px;
  right: 32px;
  text-align: right;
  pointer-events: none;
  opacity: 0.55;
  z-index: 1;
}
.v10-watermark-num {
  display: block;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: rgba(252, 208, 0, 0.35);
  font-variant-numeric: tabular-nums;
}
.v10-watermark-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.35);
  max-width: 220px;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .v10-watermark { top: 14px; right: 16px; }
  .v10-watermark-num { font-size: 36px; }
  .v10-watermark-label { font-size: 9px; max-width: 140px; }
}

/* ===== Stages (transitions) ===== */
.v10-stage {
  position: relative;
  z-index: 2;
  display: none;
  animation: v10-fade 0.6s ease both;
}
.v10-stage[aria-hidden="false"] { display: block; }
@keyframes v10-fade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.v10-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.55);
  font-weight: 600;
  margin: 0 0 18px;
}
.text-gradient {
  font-style: normal;
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}

/* ===== ÉTAT A : SÉLECTION ===== */
.v10-stage-select { text-align: center; padding: 40px 0 0; }
.v10-question {
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 60px;
  color: #fff;
}
.v10-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .v10-picker { grid-template-columns: 1fr; max-width: 440px; }
}
.v10-picker-card {
  position: relative;
  padding: 40px 28px 32px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.2, 1), border-color 0.35s ease, background 0.35s ease;
  overflow: hidden;
}
.v10-picker-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.v10-picker-card:nth-child(1) { --accent: rgba(236, 30, 95, 0.45); }
.v10-picker-card:nth-child(2) { --accent: rgba(168, 85, 247, 0.45); }
.v10-picker-card:nth-child(3) { --accent: rgba(31, 198, 229, 0.45); }
.v10-picker-card:hover {
  transform: translateY(-6px);
  border-color: rgba(252, 208, 0, 0.4);
  background: rgba(255, 255, 255, 0.04);
}
.v10-picker-card:hover::before { opacity: 0.18; }
.v10-picker-card:active { transform: translateY(-2px) scale(0.98); }
.v10-picker-icon { font-size: 30px; margin-bottom: 4px; }
.v10-picker-num {
  font-family: -apple-system, "SF Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(245, 245, 247, 0.4);
  font-weight: 600;
}
.v10-picker-title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.05;
}
.v10-picker-sub {
  font-size: 14.5px;
  color: rgba(245, 245, 247, 0.65);
  line-height: 1.45;
  margin-top: auto;
}

/* ===== ÉTAT B : PERSONA STAGES (common) ===== */
.v10-stage-persona { padding: 0; }
.v10-back {
  position: absolute;
  top: -12px;
  left: 0;
  background: transparent;
  border: none;
  color: rgba(245, 245, 247, 0.5);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.2s ease;
}
.v10-back:hover { color: #FCD000; }

.v10-persona-header {
  text-align: center;
  margin-bottom: 32px;
}
.v10-persona-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 8px 0 0;
  color: #fff;
}
.v10-hint {
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: rgba(245, 245, 247, 0.45);
  margin: 28px 0 0;
  text-transform: uppercase;
}

/* ===== ENTREPRENEUR : Solar System ===== */
.v10-solar {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  max-height: 60vh;
}
.v10-stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 67% 18%, rgba(255,255,255,0.8) 50%, transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 65%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 32% 70%, rgba(255,255,255,0.7) 50%, transparent 60%),
    radial-gradient(2px 2px at 88% 30%, #fff 50%, transparent 60%),
    radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,0.5) 50%, transparent 60%);
  opacity: 0.6;
  border-radius: 50%;
}
.v10-orbit {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.v10-orbit-1 { width: 35%; height: 35%; }
.v10-orbit-2 { width: 55%; height: 55%; }
.v10-orbit-3 { width: 75%; height: 75%; }
.v10-orbit-4 { width: 95%; height: 95%; }

.v10-planet {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FCD000, #EC1E5F);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 60px rgba(252, 208, 0, 0.4), 0 0 100px rgba(236, 30, 95, 0.25);
  z-index: 3;
}
.v10-planet-label {
  color: #0a0a0c;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.05em;
}
/* === ORBIT MECHANICS (fixed) ===
   - .v10-satellite-track : zero-size pivot at solar center, rotates → carries satellite around
   - .v10-satellite : positioned at fixed radius from pivot, counter-rotates so icon stays upright
   - Each orbit has its own keyframes (distinct radius + direction) */
.v10-satellite-track {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.v10-satellite-track-1 { animation: v10-orbit-1 22s linear infinite; }
.v10-satellite-track-2 { animation: v10-orbit-2 32s linear infinite; animation-delay: -8s; }
.v10-satellite-track-3 { animation: v10-orbit-3 44s linear infinite; animation-delay: -16s; }
.v10-satellite-track-4 { animation: v10-orbit-4 58s linear infinite; animation-delay: -32s; }
@keyframes v10-orbit-1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes v10-orbit-2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes v10-orbit-3 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes v10-orbit-4 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

.v10-satellite {
  position: absolute;
  top: 0; left: 0;
  width: 90px; height: 90px;
  margin: -45px 0 0 -45px;     /* center on pivot */
  border-radius: 50%;
  background: rgba(20, 20, 24, 0.95);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  pointer-events: auto;
  transition: filter 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Counter-rotations : keep icon upright, while offset (translateY) is included in the same transform */
.v10-satellite-track-1 .v10-satellite { animation: v10-sat-1 22s linear infinite; }
.v10-satellite-track-2 .v10-satellite { animation: v10-sat-2 32s linear infinite; animation-delay: -8s; }
.v10-satellite-track-3 .v10-satellite { animation: v10-sat-3 44s linear infinite; animation-delay: -16s; }
.v10-satellite-track-4 .v10-satellite { animation: v10-sat-4 58s linear infinite; animation-delay: -32s; }
@keyframes v10-sat-1 { from { transform: translateY(-130px) rotate(0deg); } to { transform: translateY(-130px) rotate(-360deg); } }
@keyframes v10-sat-2 { from { transform: translateY(-185px) rotate(0deg); } to { transform: translateY(-185px) rotate(360deg); } }
@keyframes v10-sat-3 { from { transform: translateY(-240px) rotate(0deg); } to { transform: translateY(-240px) rotate(-360deg); } }
@keyframes v10-sat-4 { from { transform: translateY(-295px) rotate(0deg); } to { transform: translateY(-295px) rotate(360deg); } }

.v10-satellite:hover {
  filter: drop-shadow(0 0 18px rgba(252, 208, 0, 0.7));
  border-color: #FCD000;
}
.v10-solar:hover .v10-satellite-track,
.v10-solar:hover .v10-satellite { animation-play-state: paused; }
.v10-satellite-icon { font-size: 24px; line-height: 1; }
.v10-satellite-name { font-size: 11px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }

@media (max-width: 720px) {
  .v10-satellite { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .v10-satellite-icon { font-size: 20px; }
  .v10-satellite-name { font-size: 9.5px; }
  .v10-planet { width: 78px; height: 78px; }
  .v10-planet-label { font-size: 13px; }
  /* tighter orbits on mobile */
  @keyframes v10-sat-1 { from { transform: translateY(-85px) rotate(0deg); } to { transform: translateY(-85px) rotate(-360deg); } }
  @keyframes v10-sat-2 { from { transform: translateY(-125px) rotate(0deg); } to { transform: translateY(-125px) rotate(360deg); } }
  @keyframes v10-sat-3 { from { transform: translateY(-160px) rotate(0deg); } to { transform: translateY(-160px) rotate(-360deg); } }
  @keyframes v10-sat-4 { from { transform: translateY(-195px) rotate(0deg); } to { transform: translateY(-195px) rotate(360deg); } }
}

/* ===== DIRIGEANT : Engrenage ===== */
.v10-gear {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  max-height: 60vh;
}
.v10-gear-svg { width: 100%; height: 100%; }
.v10-gear-rotor {
  transform-origin: 0 0;
  animation: v10-gear-spin 48s linear infinite;
}
@keyframes v10-gear-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.v10-gear-people .v10-gear-person {
  animation: v10-pulse 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(252, 208, 0, 0.5));
}
@keyframes v10-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

.v10-gear-product {
  position: absolute;
  width: 100px;
  padding: 12px 8px;
  background: rgba(20, 20, 24, 0.95);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  z-index: 3;
}
.v10-gear-product:hover {
  transform: scale(1.1);
  border-color: #FCD000;
  box-shadow: 0 0 30px rgba(252, 208, 0, 0.5);
}
.v10-gear-product-allie  { top: 4%;  left: 4%; }
.v10-gear-product-taktik { top: 4%;  right: 4%; }
.v10-gear-product-studio { bottom: 4%; left: 4%; }
.v10-gear-product-pro    { bottom: 4%; right: 4%; }
.v10-gear-product-icon { font-size: 22px; line-height: 1; }
.v10-gear-product-name { font-size: 11px; font-weight: 600; color: #fff; }

@media (max-width: 720px) {
  .v10-gear-product { width: 72px; padding: 8px 6px; }
  .v10-gear-product-icon { font-size: 18px; }
  .v10-gear-product-name { font-size: 9.5px; }
}

/* ===== EMPLOYÉ : Passeport ===== */
.v10-passport {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 2 / 1.3;
  max-height: 60vh;
  background: linear-gradient(155deg, #1a1a1f, #0a0a0c);
  border-radius: 14px;
  border: 1px solid rgba(252, 208, 0, 0.18);
  display: flex;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.v10-passport-spine {
  width: 4px;
  background: linear-gradient(180deg, rgba(252, 208, 0, 0.3), rgba(252, 208, 0, 0.1));
}
.v10-passport-page {
  flex: 1;
  padding: 32px 36px;
  position: relative;
}
.v10-passport-page-left {
  background: linear-gradient(135deg, rgba(252, 208, 0, 0.06), transparent);
  border-right: 1px dashed rgba(252, 208, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.v10-passport-arms { font-size: 28px; }
.v10-passport-title {
  font-family: -apple-system, "SF Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.4em;
  font-weight: 700;
  color: #FCD000;
}
.v10-passport-subtitle {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #fff;
}
.v10-passport-photo {
  margin-top: 18px;
  width: 80px; height: 80px;
  border: 2px solid rgba(252, 208, 0, 0.4);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  background: rgba(255, 255, 255, 0.05);
}
.v10-passport-name {
  margin-top: 12px;
  font-family: -apple-system, "SF Mono", monospace;
  font-size: 16px;
  letter-spacing: 0.25em;
  font-weight: 700;
  color: #fff;
}
.v10-passport-meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(252, 208, 0, 0.7);
  text-transform: uppercase;
}

.v10-passport-page-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.v10-passport-pagenum {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: -apple-system, "SF Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(245, 245, 247, 0.3);
}

.v10-stamp {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.025);
  border: 2px dashed rgba(252, 208, 0, 0.35);
  border-radius: 10px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  text-align: left;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.v10-stamp::after {
  content: "TAMPONNÉ";
  position: absolute;
  top: 8px; right: 12px;
  font-family: -apple-system, "SF Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(252, 208, 0, 0.5);
  font-weight: 700;
  transform: rotate(-12deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.v10-stamp:hover {
  transform: scale(1.02);
  border-color: #FCD000;
  border-style: solid;
  background: rgba(252, 208, 0, 0.06);
}
.v10-stamp:hover::after { opacity: 1; }
.v10-stamp-icon {
  grid-row: 1 / 3;
  font-size: 32px;
  text-align: center;
}
.v10-stamp-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
}
.v10-stamp-meta {
  font-size: 12.5px;
  color: rgba(245, 245, 247, 0.65);
}
.v10-passport-footer {
  position: absolute;
  bottom: 12px; left: 36px; right: 36px;
  text-align: center;
  font-family: -apple-system, "SF Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(252, 208, 0, 0.5);
}

@media (max-width: 720px) {
  .v10-passport { aspect-ratio: 1 / 1.2; flex-direction: column; }
  .v10-passport-spine { width: 100%; height: 4px; }
  .v10-passport-page-left { padding: 18px; gap: 4px; }
  .v10-passport-page-left .v10-passport-photo { width: 50px; height: 50px; font-size: 24px; margin-top: 6px; }
  .v10-passport-page-right { padding: 18px; }
  .v10-stamp { padding: 12px 14px; grid-template-columns: 36px 1fr; }
  .v10-stamp-icon { font-size: 24px; }
}

/* ===== Detail overlay ===== */
.v10-detail {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.v10-detail[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}
.v10-detail-close {
  position: absolute;
  top: 24px; right: 24px;
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
}
.v10-detail-close:hover { background: rgba(252, 208, 0, 0.2); transform: scale(1.05); }
.v10-detail-inner {
  background: linear-gradient(155deg, #18181d, #0e0e12);
  border: 1px solid rgba(252, 208, 0, 0.25);
  border-radius: 24px;
  padding: 36px 36px 32px;
  max-width: 620px;
  width: 100%;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  animation: v10-pop 0.4s cubic-bezier(0.2, 0.85, 0.2, 1) both;
}
@keyframes v10-pop {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.v10-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.v10-detail-icon {
  font-size: 36px;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(252, 208, 0, 0.1);
  border: 1px solid rgba(252, 208, 0, 0.25);
  border-radius: 14px;
}
.v10-detail-anim-title {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(252, 208, 0, 0.85);
  font-weight: 700;
  margin-bottom: 2px;
}
.v10-detail-product {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.v10-detail-just {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(245, 245, 247, 0.85);
  margin: 0 0 22px;
  letter-spacing: -0.005em;
}
.v10-detail-oneliner {
  font-size: 18px;
  font-weight: 600;
  color: #FCD000;
  font-style: italic;
  letter-spacing: -0.01em;
  padding: 16px 20px;
  background: rgba(252, 208, 0, 0.06);
  border-left: 3px solid #FCD000;
  border-radius: 4px;
  margin: 0 0 22px;
  line-height: 1.4;
}
.v10-detail-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin: 0 0 22px;
}
.v10-detail-price-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(245, 245, 247, 0.5);
  text-transform: uppercase;
  font-weight: 600;
}
.v10-detail-price-value {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.v10-detail-cta {
  display: block;
  text-align: center;
  padding: 14px 22px;
  background: #FCD000;
  color: #0a0a0c;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14.5px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v10-detail-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(252, 208, 0, 0.4);
}

/* ===== Section C — Crédibilité ===== */
.v10-cred {
  max-width: 1280px;
  margin: 48px auto 0;
  padding: 32px 24px;
}
.v10-cred-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.5);
  font-weight: 600;
  text-align: center;
  margin: 0 0 28px;
}
.v10-cred-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 800px) { .v10-cred-grid { grid-template-columns: 1fr; } }
.v10-cred-item {
  padding: 24px 26px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
}
.v10-cred-stat {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #FCD000;
  margin-bottom: 8px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.v10-cred-text {
  font-size: 14px;
  color: rgba(245, 245, 247, 0.85);
  line-height: 1.5;
  margin: 0 0 8px;
}
.v10-cred-source {
  font-size: 11px;
  color: rgba(245, 245, 247, 0.45);
  letter-spacing: 0.02em;
  margin: 0;
  font-style: italic;
}

/* ===== Footer manifeste ===== */
.v10-footer {
  max-width: 760px;
  margin: 56px auto 0;
  padding: 0 24px 24px;
  text-align: center;
}
.v10-footer-manifesto {
  margin-bottom: 24px;
}
.v10-footer-line-1, .v10-footer-line-2, .v10-footer-line-3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.v10-footer-line-1 { color: #FCD000; }
.v10-footer-line-2 { color: rgba(245, 245, 247, 0.65); }
.v10-footer-line-3 { color: #fff; margin-top: 8px; font-weight: 500; font-size: 16px; }
.v10-footer-line-3 em { color: #FCD000; font-style: italic; }
.v10-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 14px 28px;
  background: #FCD000;
  color: #0a0a0c;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v10-footer-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(252, 208, 0, 0.4); }
.v10-footer-meta {
  margin: 28px 0 0;
  font-size: 11px;
  color: rgba(245, 245, 247, 0.35);
  letter-spacing: 0.02em;
}

/* ===== reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .v10-satellite-track, .v10-satellite, .v10-gear-rotor, .v10-gear-person { animation: none; }
}

/* ===================================================================
   V11 — FLOW PROBLÈMES → SOLUTIONS → PRIX+TEMPS
   =================================================================== */

/* === Header persona avec mini-anim à gauche, texte à droite === */
.v11-stage-persona {
  position: relative;
}
.v11-persona-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  margin: 12px 0 40px;
}
@media (max-width: 760px) {
  .v11-persona-header { grid-template-columns: 1fr; text-align: center; gap: 20px; }
}
.v11-persona-anim {
  width: 200px; height: 200px;
  position: relative;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 760px) {
  .v11-persona-anim { width: 160px; height: 160px; }
}
.v11-persona-text { min-width: 0; }
.v11-persona-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 6px 0 10px;
  color: #fff;
}
.v11-persona-subline {
  font-size: 15.5px;
  color: rgba(245, 245, 247, 0.7);
  line-height: 1.5;
  margin: 0;
}

/* === Mini Solar (Entrepreneur header) === */
.v11-anim-solar {
  position: relative;
  width: 100%; height: 100%;
}
.v11-solar-planet {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18%; height: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FCD000, #EC1E5F);
  box-shadow: 0 0 18% rgba(252, 208, 0, 0.5);
  z-index: 2;
}
.v11-solar-orbit {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}
.v11-solar-orbit-1 { width: 35%; height: 35%; }
.v11-solar-orbit-2 { width: 55%; height: 55%; }
.v11-solar-orbit-3 { width: 75%; height: 75%; }
.v11-solar-orbit-4 { width: 95%; height: 95%; }
.v11-solar-dot {
  position: absolute;
  top: -4%; left: 50%;
  width: 8%; aspect-ratio: 1;
  margin-left: -4%;
  border-radius: 50%;
  background: #FCD000;
  box-shadow: 0 0 8px rgba(252, 208, 0, 0.7);
}
.v11-solar-orbit-1 { animation: v11-orbit 12s linear infinite; }
.v11-solar-orbit-2 { animation: v11-orbit 18s linear infinite reverse; }
.v11-solar-orbit-3 { animation: v11-orbit 26s linear infinite; }
.v11-solar-orbit-4 { animation: v11-orbit 36s linear infinite reverse; }
@keyframes v11-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* === Mini Gear (Dirigeant header) === */
.v11-anim-gear { width: 100%; height: 100%; }
.v11-gear-rotor { transform-origin: 0 0; animation: v11-gear-spin 30s linear infinite; }
@keyframes v11-gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* === Ladder (Employé — REMPLACE le passeport) === */
.v11-anim-ladder {
  position: relative;
  width: 100%; height: 100%;
}
.v11-ladder-rail {
  position: absolute;
  top: 8%; bottom: 8%;
  width: 4px;
  background: linear-gradient(180deg, rgba(252, 208, 0, 0.6), rgba(252, 208, 0, 0.15));
  border-radius: 2px;
}
.v11-ladder-rail-l { left: 22%; }
.v11-ladder-rail-r { right: 22%; }
.v11-ladder-rung {
  position: absolute;
  left: 22%; right: 22%;
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(252, 208, 0, 0.35);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: v11-rung-in 0.5s ease forwards;
  /* rung 1 = bas, rung 5 = haut */
  bottom: calc(10% + (var(--rung) - 1) * 16%);
  animation-delay: calc(var(--rung) * 0.4s);
}
.v11-ladder-rung span { font-size: 16px; }
@keyframes v11-rung-in {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.v11-ladder-climber {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  font-size: 24px;
  animation: v11-climb 8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(252, 208, 0, 0.5));
}
@keyframes v11-climb {
  0%   { bottom: 4%;  }
  25%  { bottom: 24%; }
  50%  { bottom: 44%; }
  75%  { bottom: 64%; }
  100% { bottom: 4%;  }
}

/* === Grid de problèmes === */
.v11-problems {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 720px) { .v11-problems { grid-template-columns: 1fr; } }

.v11-problem {
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.v11-problem:hover {
  background: rgba(252, 208, 0, 0.05);
  border-color: rgba(252, 208, 0, 0.45);
  transform: translateY(-2px);
}
.v11-problem:active { transform: translateY(0) scale(0.99); }
.v11-problem-icon {
  font-size: 24px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.v11-problem-text {
  font-size: 15px;
  color: #fff;
  line-height: 1.45;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.v11-problem-arrow {
  font-size: 18px;
  color: rgba(252, 208, 0, 0.6);
  transition: transform 0.25s ease, color 0.25s ease;
}
.v11-problem:hover .v11-problem-arrow {
  transform: translateX(4px);
  color: #FCD000;
}

/* === Stage Solutions === */
.v11-stage-solutions { padding: 0; position: relative; }
.v11-solutions-header {
  text-align: center;
  margin: 12px 0 32px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.v11-solutions-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  font-style: italic;
  color: rgba(245, 245, 247, 0.85);
  line-height: 1.3;
  margin: 8px 0 0;
  letter-spacing: -0.01em;
}
.v11-solutions-title::before { content: '« '; color: rgba(252, 208, 0, 0.5); }
.v11-solutions-title::after { content: ' »'; color: rgba(252, 208, 0, 0.5); }

.v11-solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.v11-solution {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 22px;
  background: linear-gradient(155deg, rgba(252, 208, 0, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(252, 208, 0, 0.25);
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.2, 1), border-color 0.3s ease, background 0.3s ease;
  min-height: 220px;
}
.v11-solution:hover {
  transform: translateY(-5px);
  border-color: #FCD000;
  background: linear-gradient(155deg, rgba(252, 208, 0, 0.12), rgba(255, 255, 255, 0.03));
}
.v11-solution-icon {
  font-size: 38px;
  line-height: 1;
}
.v11-solution-text {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  letter-spacing: -0.01em;
  flex-grow: 1;
}
.v11-solution-cta {
  font-size: 13px;
  font-weight: 700;
  color: #FCD000;
  letter-spacing: 0.02em;
  margin-top: auto;
}

.v11-solutions-hint {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.45);
  margin: 28px 0 0;
}

/* === Bloc Prix + Temps dans le detail overlay === */
.v11-pricetime {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0;
}
@media (max-width: 540px) { .v11-pricetime { grid-template-columns: 1fr; } }

.v11-pricetime-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: rgba(252, 208, 0, 0.06);
  border: 1px solid rgba(252, 208, 0, 0.2);
  border-radius: 12px;
}
.v11-pricetime-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(252, 208, 0, 0.85);
}
.v11-pricetime-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

/* === Cache l'ancien stage layout V10 (satellites cliquables) === */
body.home-v11 .v10-stage-entrepreneur,
body.home-v11 .v10-stage-dirigeant,
body.home-v11 .v10-stage-employe { display: none !important; }

/* ===================================================================
   V11 — ANIMATIONS PERSISTANTES (icône picker + header solutions)
   =================================================================== */

/* Réinitialise l'icône picker pour contenir une vraie anim au lieu d'un emoji */
.v10-picker-card .v10-picker-icon {
  width: 96px; height: 96px;
  margin: 0 auto 8px;
  position: relative;
  font-size: 0; /* kill the emoji rendering fallback */
}

/* === Modifier .v11-anim-mini (compact size for picker + solutions header) === */
.v11-anim-mini {
  width: 100%; height: 100%;
  display: block;
}

/* Mini solar : déjà responsif % */

/* Mini ladder : ajuste taille emojis et rungs au container compact */
.v11-anim-mini.v11-anim-ladder .v11-ladder-rung {
  height: 18%;
  border-radius: 3px;
}
.v11-anim-mini.v11-anim-ladder .v11-ladder-rung span {
  font-size: 11px;
}
.v11-anim-mini.v11-anim-ladder .v11-ladder-climber {
  font-size: 16px;
}
/* Mini gear : SVG scale auto via viewBox */

/* Empêche les clicks pass-through dans le picker (anim ne bloque pas le clic) */
.v10-picker-icon * { pointer-events: none; }

/* === Animation persistante en haut du stage solutions === */
.v11-solutions-anim {
  width: 120px; height: 120px;
  margin: 0 auto 12px;
  position: relative;
}
.v11-solutions-anim [data-persona-anim] {
  width: 100%; height: 100%;
}
@media (max-width: 720px) {
  .v11-solutions-anim { width: 90px; height: 90px; }
}

/* Quand on est dans solutions, on cache les anims des autres personas par défaut.
   Le JS révèle seulement la bonne (showPersonaAnimOnSolutions). */
.v11-solutions-anim [data-persona-anim] { display: none; }

/* ===================================================================
   V11 — DETAIL ACTIONS : Voir détails + Contacter Pat (Messenger/Tel/Email)
   =================================================================== */

.v10-detail-actions {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.v10-detail-actions .v10-detail-cta {
  margin: 0;
}
.v10-detail-contact-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  text-decoration: none;
  font-size: 14.5px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.v10-detail-contact-trigger:hover {
  border-color: #FCD000;
  background: rgba(252, 208, 0, 0.06);
  transform: translateY(-1px);
}

/* Panel contact */
.v10-detail-contact-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: v11-detail-fade 0.35s ease both;
}
@keyframes v11-detail-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.v10-detail-contact-intro {
  margin: 0 0 6px;
  font-size: 13px;
  color: rgba(245, 245, 247, 0.6);
  letter-spacing: 0.02em;
  text-align: center;
}

.v10-contact-channel {
  display: grid;
  grid-template-columns: 36px 1fr 18px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.v10-contact-channel:hover {
  background: rgba(252, 208, 0, 0.07);
  border-color: rgba(252, 208, 0, 0.45);
  transform: translateX(3px);
}
.v10-contact-icon {
  font-size: 22px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.v10-contact-label {
  font-size: 13.5px;
  color: rgba(245, 245, 247, 0.8);
  line-height: 1.35;
}
.v10-contact-label strong {
  color: #fff;
  font-weight: 700;
}
.v10-contact-arrow {
  color: rgba(252, 208, 0, 0.65);
  font-size: 16px;
  transition: transform 0.2s ease;
}
.v10-contact-channel:hover .v10-contact-arrow { transform: translateX(3px); color: #FCD000; }

.v10-detail-contact-back {
  margin-top: 4px;
  background: transparent;
  border: none;
  color: rgba(245, 245, 247, 0.5);
  font-size: 12.5px;
  cursor: pointer;
  padding: 8px;
  font-family: inherit;
  align-self: center;
  transition: color 0.2s ease;
}
.v10-detail-contact-back:hover { color: #FCD000; }

/* ===================================================================
   V11 — TEMPLATE PRODUIT UNIFIÉ (melting pot Allié/Taktik/Studio/Plus/Pro/Intro)
   =================================================================== */

body.oxxy-product-v11 {
  margin: 0;
  background: #0a0a0c;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  font-feature-settings: "kern" 1, "ss01" 1, "cv01" 1, "cv11" 1;
  min-height: 100vh;
  overflow-x: hidden;
}
body.oxxy-product-v11::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(252, 208, 0, 0.05), transparent 50%),
    radial-gradient(circle at 82% 80%, rgba(236, 30, 95, 0.04), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.v11-product-back {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
  background: transparent;
  border: none;
  color: rgba(245, 245, 247, 0.55);
  font-size: 13px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.v11-product-back:hover {
  color: #FCD000;
  background: rgba(255, 255, 255, 0.04);
}

/* === Hero produit === */
.v11-product-module {
  padding: 48px 48px 40px;
}
.v11-product-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 800px) {
  .v11-product-hero { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .v11-product-module { padding: 32px 22px 28px; }
}
.v11-product-anim {
  width: 220px; height: 220px;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 800px) {
  .v11-product-anim { width: 160px; height: 160px; }
}
.v11-product-name {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 8px 0 16px;
  color: #fff;
}
.v11-product-lead {
  font-size: 16.5px;
  line-height: 1.55;
  color: rgba(245, 245, 247, 0.8);
  margin: 0 0 24px;
  letter-spacing: -0.005em;
}

/* === Sections produit === */
.v11-product-section {
  max-width: 1280px;
  margin: 56px auto 0;
  padding: 0 24px;
}
.v11-product-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.v11-product-section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.5);
  font-weight: 600;
  margin: 0 0 12px;
}
.v11-product-section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 32px;
  color: #fff;
}

/* === Features === */
.v11-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.v11-feature-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  border-left: 3px solid #FCD000;
}
.v11-feature-icon {
  font-size: 26px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(252, 208, 0, 0.08);
  border-radius: 10px;
}
.v11-feature-text {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  color: rgba(245, 245, 247, 0.92);
  letter-spacing: -0.005em;
}

/* === Témoignages === */
.v11-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.v11-testimonial {
  position: relative;
  padding: 28px 26px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  border-left: 4px solid var(--testi-accent, #FCD000);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v11-testimonial-yellow  { --testi-accent: #FCD000; }
.v11-testimonial-cyan    { --testi-accent: #1FC6E5; }
.v11-testimonial-magenta { --testi-accent: #EC1E5F; }
.v11-testimonial-mark {
  font-size: 40px;
  font-family: Georgia, serif;
  font-weight: 700;
  color: rgba(252, 208, 0, 0.4);
  line-height: 0.5;
  height: 14px;
}
.v11-testimonial-quote {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  color: rgba(245, 245, 247, 0.9);
}
.v11-testimonial-quote strong { color: #FCD000; font-weight: 700; }
.v11-testimonial-quote em { font-style: italic; color: #fff; }
.v11-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.v11-testimonial-avatar {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--testi-accent, #FCD000);
  color: #0a0a0c;
  font-weight: 800;
  font-size: 14px;
}
.v11-testimonial-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.v11-testimonial-role {
  font-size: 12px;
  color: rgba(245, 245, 247, 0.6);
}

/* === Polarisation === */
.v11-polar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .v11-polar-grid { grid-template-columns: 1fr; } }
.v11-polar-block {
  padding: 26px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.v11-polar-yes { border-left: 4px solid #2ecc71; }
.v11-polar-no  { border-left: 4px solid #EC1E5F; }
.v11-polar-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.v11-polar-block p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 245, 247, 0.85);
  margin: 0;
}
.v11-polar-block strong { color: #FCD000; font-weight: 700; }

/* === FAQ === */
.v11-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v11-faq-item {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.v11-faq-item:hover { border-color: rgba(252, 208, 0, 0.25); }
.v11-faq-item[open] { border-color: rgba(252, 208, 0, 0.45); }
.v11-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  list-style: none;
  letter-spacing: -0.005em;
}
.v11-faq-question::-webkit-details-marker { display: none; }
.v11-faq-toggle {
  font-size: 22px;
  color: #FCD000;
  font-weight: 300;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.v11-faq-item[open] .v11-faq-toggle { transform: rotate(45deg); }
.v11-faq-answer {
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(245, 245, 247, 0.8);
}
.v11-faq-answer strong { color: #FCD000; font-weight: 700; }

/* === CTA final produit === */
.v11-product-cta { margin-top: 64px; }
.v11-cta-inner {
  text-align: center;
  padding: 48px 32px;
  background: linear-gradient(155deg, rgba(252, 208, 0, 0.06), rgba(236, 30, 95, 0.04));
  border: 1px solid rgba(252, 208, 0, 0.2);
  border-radius: 24px;
}
.v11-cta-title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 12px;
  color: #fff;
}
.v11-cta-sub {
  font-size: 15.5px;
  color: rgba(245, 245, 247, 0.75);
  margin: 0 0 28px;
  max-width: 560px;
  margin-left: auto; margin-right: auto;
}
.v11-cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.v11-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: #FCD000;
  color: #0a0a0c;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v11-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(252, 208, 0, 0.35); }
.v11-cta-contact-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.v11-cta-contact-trigger:hover {
  border-color: #FCD000;
  background: rgba(252, 208, 0, 0.06);
  transform: translateY(-2px);
}

.v11-cta-contact-panel {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  animation: v11-detail-fade 0.4s ease both;
}
.v11-contact-channels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===================================================================
   V11 — PERKS (bénéfices positifs en prime de la solution technique)
   =================================================================== */

.v11-perks {
  margin: 22px 0;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(46, 204, 113, 0.08), rgba(252, 208, 0, 0.04));
  border: 1px solid rgba(46, 204, 113, 0.2);
  border-radius: 14px;
}
.v11-perks-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #2ecc71;
  margin: 0 0 14px;
}
.v11-perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v11-perks-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(245, 245, 247, 0.92);
  letter-spacing: -0.005em;
}
.v11-perks-bullet {
  color: #FCD000;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
}
.v11-perks-list li strong {
  color: #FCD000;
  font-weight: 700;
}

/* ===================================================================
   V11 — BADGE "BIENTÔT" (coming soon · liste d'attente)
   =================================================================== */

.v11-coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0c;
  background: #FCD000;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.v11-coming-badge-big {
  display: inline-flex;
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #FCD000, #EC1E5F);
  color: #0a0a0c;
  margin: 0 0 14px 0;
  font-weight: 800;
}

/* Solution card "Bientôt" (home V11 grid) */
.v11-solution-coming {
  position: relative;
  background: linear-gradient(155deg, rgba(252, 208, 0, 0.04), rgba(255, 255, 255, 0.01)) !important;
  border: 1px dashed rgba(252, 208, 0, 0.45) !important;
}
.v11-solution-coming-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  background: #FCD000;
  color: #0a0a0c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  z-index: 2;
}

/* ===================================================================
   V11 — WAITLIST FORM (inline dans overlay détail + CTA produit)
   =================================================================== */

.v11-waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: rgba(252, 208, 0, 0.05);
  border: 1px solid rgba(252, 208, 0, 0.25);
  border-radius: 14px;
}
.v11-waitlist-intro {
  font-size: 13px;
  color: rgba(245, 245, 247, 0.85);
  margin: 0 0 4px;
  line-height: 1.45;
}
.v11-waitlist-fields {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}
@media (max-width: 540px) { .v11-waitlist-fields { grid-template-columns: 1fr; } }
.v11-waitlist-fields input {
  padding: 11px 14px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.v11-waitlist-fields input::placeholder { color: rgba(245, 245, 247, 0.4); }
.v11-waitlist-fields input:focus {
  border-color: #FCD000;
  background: rgba(255, 255, 255, 0.08);
}
.v11-waitlist-honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
}
.v11-waitlist-submit {
  margin: 0;
  width: 100%;
}
.v11-waitlist-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.v11-waitlist-feedback {
  font-size: 13px;
  margin: 6px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  letter-spacing: -0.005em;
}
.v11-waitlist-feedback[data-type="success"] {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(46, 204, 113, 0.2);
}
.v11-waitlist-feedback[data-type="error"] {
  color: #EC1E5F;
  background: rgba(236, 30, 95, 0.08);
  border: 1px solid rgba(236, 30, 95, 0.2);
}
.v11-waitlist-feedback[data-type="info"] {
  color: rgba(245, 245, 247, 0.75);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.v10-detail-cta-ghost {
  background: transparent !important;
  color: rgba(245, 245, 247, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 500;
  font-size: 13px !important;
  padding: 10px 16px !important;
}
.v10-detail-cta-ghost:hover {
  color: #FCD000 !important;
  border-color: rgba(252, 208, 0, 0.4);
  box-shadow: none;
}

/* ===================================================================
   V11.1 — HERO BLEND (87% stat + urgence 2027 + qualif picker)
   =================================================================== */

.v11-headline-blend {
  font-size: clamp(34px, 5.5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: #fff;
  text-wrap: balance;
}
.v11-headline-stat {
  display: inline-block;
  font-size: 1.15em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
  letter-spacing: -0.04em;
  padding-right: 4px;
}

.v11-headline-sub {
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 500;
  color: rgba(245, 245, 247, 0.7);
  margin: 0 0 36px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.v11-headline-sub em {
  font-style: italic;
  color: rgba(252, 208, 0, 0.9);
  font-weight: 600;
}

.v11-headline-qualifier {
  display: inline-block;
  margin: 0 auto 36px;
  padding: 10px 22px;
  background: rgba(252, 208, 0, 0.08);
  border: 1px solid rgba(252, 208, 0, 0.22);
  border-radius: 999px;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  color: rgba(245, 245, 247, 0.95);
  letter-spacing: -0.005em;
}

/* === Picker meta (tag persona size/scope sous la question) === */
.v10-picker-meta {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.4);
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}

/* === Footer manifeste Deadpool poli — refresh === */
.v10-footer-line-1, .v10-footer-line-2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.v10-footer-line-1 { color: rgba(245, 245, 247, 0.75); }
.v10-footer-line-1 em { font-style: italic; color: rgba(245, 245, 247, 0.55); }
.v10-footer-line-2 { color: rgba(245, 245, 247, 0.75); margin-bottom: 6px; }
.v10-footer-line-2 em { font-style: italic; color: rgba(236, 30, 95, 0.9); font-weight: 700; }
.v10-footer-line-3 {
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  color: #fff;
  margin: 14px 0 0;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.v10-footer-line-3 em.text-gradient {
  font-style: normal;
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}

.v10-footer-tagline {
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(245, 245, 247, 0.55);
  letter-spacing: -0.005em;
}
.v10-footer-tagline em {
  color: #FCD000;
  font-style: italic;
}

/* ===================================================================
   V11.2 — OPTIMISATION : a11y + perf + mobile audit
   =================================================================== */

/* === Skip link === */
.oxxy-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 99999;
  padding: 12px 18px;
  background: #FCD000;
  color: #0a0a0c;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: top 0.2s ease;
}
.oxxy-skip-link:focus {
  top: 12px;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* === Focus visible global (clavier-friendly) === */
button:focus-visible, a:focus-visible, input:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #FCD000;
  outline-offset: 3px;
  border-radius: 4px;
}
.v10-picker-card:focus-visible {
  outline: 3px solid #FCD000;
  outline-offset: 4px;
}

/* === Touch targets ≥ 44×44 px === */
@media (pointer: coarse) {
  .v10-back, .v11-back, .lang-toggle,
  .v10-detail-contact-back, .chat-restart {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
  .v11-faq-question { min-height: 44px; }
}

/* === Mobile audit ultra-petits écrans (<360px) === */
@media (max-width: 360px) {
  .v10-module { padding: 24px 14px 22px; border-radius: 20px; }
  .v10-nav { padding: 12px; }
  .v10-nav-cta { padding: 8px 12px; font-size: 11.5px; }
  .lang-toggle { padding: 6px 8px; font-size: 10.5px; }
  .v11-headline-blend { font-size: 30px; }
  .v11-headline-stat { font-size: 1.1em; }
  .v10-picker-card { padding: 26px 18px 22px; }
  .v10-picker-title { font-size: 22px; }
  .v11-persona-anim { width: 130px; height: 130px; }
  .v11-problem { grid-template-columns: 32px 1fr 16px; padding: 14px 16px; gap: 10px; }
  .v11-problem-icon { width: 32px; height: 32px; font-size: 20px; }
  .v11-problem-text { font-size: 13.5px; }
  .v11-solution { padding: 22px 20px 18px; min-height: 180px; }
  .v10-detail-inner { padding: 22px 22px 24px; max-height: 95vh; overflow-y: auto; }
}

/* === Performance hints === */
.v11-anim-solar, .v11-anim-gear, .v11-anim-ladder,
.v10-solar, .v10-gear, .v10-passport {
  will-change: transform;
  contain: layout style paint;
}
.v10-detail-inner {
  contain: layout style;
}
img { content-visibility: auto; }

/* === Empêcher le repaint pour les pages produit (anim header) === */
.v11-product-anim { contain: layout style paint; will-change: transform; }

/* === Print-friendly (basique) === */
@media print {
  body { background: #fff; color: #000; }
  .v10-nav, .v10-detail, .sticky-mobile-cta, .v10-footer-cta, .oxxy-skip-link,
  .v11-picker-icon, .v11-product-anim { display: none !important; }
  .v10-module { box-shadow: none; border: 1px solid #000; }
  a { color: #000; text-decoration: underline; }
}

/* === Hide scrollbars dans modal mais reste navigable === */
.v10-detail-inner::-webkit-scrollbar { width: 6px; }
.v10-detail-inner::-webkit-scrollbar-thumb { background: rgba(252, 208, 0, 0.3); border-radius: 3px; }
.v10-detail-inner::-webkit-scrollbar-track { background: transparent; }

/* ===================================================================
   V11.3 — SECTION FOUNDERS (remplace les testimonials mock)
   =================================================================== */

.v11-product-founders { }
.v11-founders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .v11-founders-grid { grid-template-columns: 1fr; } }

.v11-founders-card {
  padding: 28px 26px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v11-founders-card-honest { border-left: 4px solid #1FC6E5; }
.v11-founders-card-offer  {
  border-left: 4px solid #FCD000;
  background: linear-gradient(155deg, rgba(252, 208, 0, 0.06), rgba(255, 255, 255, 0.02));
}
.v11-founders-card-cta    {
  border-left: 4px solid #EC1E5F;
  background: linear-gradient(155deg, rgba(236, 30, 95, 0.04), rgba(255, 255, 255, 0.02));
}
.v11-founders-icon {
  font-size: 32px;
  line-height: 1;
}
.v11-founders-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.v11-founders-card-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(245, 245, 247, 0.85);
  margin: 0;
  flex-grow: 1;
}
.v11-founders-card-text strong { color: #FCD000; font-weight: 700; }
.v11-founders-card-text em { color: rgba(252, 208, 0, 0.9); font-style: italic; }

.v11-founders-cta {
  display: inline-block;
  margin-top: 6px;
  padding: 12px 20px;
  background: #FCD000;
  color: #0a0a0c;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  letter-spacing: -0.005em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v11-founders-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(252, 208, 0, 0.35);
}

/* ===================================================================
   V11.4 — NAV v2 (dropdown produits + wordmark + burger mobile)
   =================================================================== */

/* === Nav container override (force au-dessus du module) === */
.v10-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 9000;
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 12px 24px;
  isolation: isolate;
}
/* Force le module sous la nav même quand il a un stacking context */
.v10-main, .v10-module { position: relative; z-index: 1; }
.v10-stage { z-index: 2; }
.v10-detail { z-index: 9500; }  /* overlay détail au-dessus de la nav */

/* === Brand : logo + wordmark texte === */
.v10-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.v10-brand img { display: block; }
.v10-brand-wordmark {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* === Nav v3 : 2 rangées (top : brand + right · pills : navigation toujours visible) === */
.v10-nav { flex-direction: column; gap: 0; padding: 0; }
.v10-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  width: 100%;
}
.v10-nav-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  scroll-snap-type: x proximity;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  box-sizing: border-box;
}
.v10-nav-pills::-webkit-scrollbar { display: none; }
.v10-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(245, 245, 247, 0.78);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.v10-pill:hover {
  background: rgba(252, 208, 0, 0.1);
  color: #fff;
  border-color: rgba(252, 208, 0, 0.35);
}
.v10-pill-current {
  background: rgba(252, 208, 0, 0.15);
  color: #FCD000;
  border-color: rgba(252, 208, 0, 0.45);
}
.v10-pill-icon { font-size: 15px; line-height: 1; }
.v10-pill-soon {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0c;
  background: #FCD000;
  border-radius: 4px;
}
/* Hint scroll sur mobile : fade à droite */
@media (max-width: 960px) {
  .v10-nav-pills {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
}

/* === Badge "Bientôt" inline dans nav === */
.v10-nav-soon {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0a0a0c;
  background: #FCD000;
  border-radius: 4px;
  vertical-align: middle;
}

/* === Dropdown desktop === */
.v10-nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  padding: 8px;
  background: rgba(18, 18, 22, 0.97);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: v10-nav-dropdown-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  z-index: 9100;
}
@keyframes v10-nav-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.v10-nav-dropdown[hidden] { display: none; }

.v10-nav-dropdown-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.v10-nav-dropdown-item:hover {
  background: rgba(252, 208, 0, 0.06);
}
.v10-nav-dropdown-item-current {
  background: rgba(252, 208, 0, 0.1);
  outline: 1px solid rgba(252, 208, 0, 0.25);
}
.v10-nav-dropdown-icon {
  font-size: 20px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
.v10-nav-dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v10-nav-dropdown-text strong {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.v10-nav-dropdown-text em {
  font-style: normal;
  font-size: 12.5px;
  color: rgba(245, 245, 247, 0.55);
  line-height: 1.35;
}

/* === Right side (toggle + CTA + burger) === */
.v10-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.v10-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #FCD000;
  color: #0a0a0c;
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v10-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(252, 208, 0, 0.35);
}
.v10-nav-cta-icon { font-size: 14px; }

/* === Responsive : <960px brand wordmark + CTA label compactés === */
@media (max-width: 960px) {
  .v10-nav-top { padding: 10px 16px; }
  .v10-nav-pills { padding: 4px 12px 8px; }
  .v10-brand-wordmark { display: none; }
  .v10-nav-cta-label { display: none; }
  .v10-nav-cta { padding: 10px 14px; }
  .v10-nav-cta-icon { font-size: 16px; }
  .v10-pill { padding: 8px 12px; font-size: 13px; }
}

/* ===================================================================
   V11.5 — FOOTER v3 (style Pat direct : chiffres + question + offre)
   =================================================================== */

.v10-footer-punch {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  color: rgba(245, 245, 247, 0.85);
  margin: 0 0 4px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.v10-footer-punch em {
  font-style: italic;
  color: rgba(245, 245, 247, 0.6);
}

.v10-footer-punch-q {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 24px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.v10-footer-punch-q em.text-gradient {
  font-style: normal;
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.v10-footer-offer {
  font-size: clamp(16px, 1.8vw, 19px);
  color: rgba(245, 245, 247, 0.75);
  margin: 22px 0 0;
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.v10-footer-offer em {
  font-style: italic;
  color: #FCD000;
  font-weight: 700;
}

/* ===================================================================
   V11.6 — TOAST notification + Coming-soon links
   =================================================================== */

.v10-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  z-index: 99500;
  padding: 14px 22px;
  background: rgba(20, 20, 24, 0.97);
  border: 1px solid rgba(252, 208, 0, 0.45);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  max-width: calc(100vw - 48px);
  text-align: center;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.25s ease;
  pointer-events: none;
}
.v10-toast[hidden] { display: none; }
.v10-toast.v10-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.v10-coming-soon-link {
  cursor: pointer;
  position: relative;
}
.v10-coming-soon-link:hover {
  color: #FCD000;
}

/* ===================================================================
   V11.7 — SOLUTIONS RICH (hero stat + perks teaser) + FRICTIONS dynamisées
   =================================================================== */

/* === Solutions cards : nouveau layout rich === */
.v11-solution-rich {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 22px;
  background: linear-gradient(155deg, rgba(252, 208, 0, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(252, 208, 0, 0.18);
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  min-height: 320px;
  overflow: hidden;
  opacity: 0;
  animation: v11-solution-reveal 0.55s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}
@keyframes v11-solution-reveal {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.v11-solution-rich::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(252, 208, 0, 0.18), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.v11-solution-rich:hover {
  transform: translateY(-8px);
  border-color: #FCD000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(252, 208, 0, 0.35);
}
.v11-solution-rich:hover::before { opacity: 1; }
.v11-solution-rich:active { transform: translateY(-2px) scale(0.99); }

.v11-solution-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.v11-solution-hero .v11-solution-icon {
  font-size: 32px;
  width: 52px;
  height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(252, 208, 0, 0.1);
  border: 1px solid rgba(252, 208, 0, 0.3);
  border-radius: 14px;
  flex-shrink: 0;
}
.v11-solution-hero-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.v11-solution-hero-stat {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.v11-solution-hero-label {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.55);
  font-weight: 600;
  line-height: 1.3;
}

.v11-solution-what {
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0;
  position: relative;
  z-index: 1;
}

.v11-solution-perks-quick {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
  position: relative;
  z-index: 1;
}
.v11-solution-perks-quick li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(245, 245, 247, 0.78);
  letter-spacing: -0.005em;
}
.v11-solution-perks-bullet {
  color: rgba(46, 204, 113, 0.85);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
}

.v11-solution-rich .v11-solution-cta {
  font-size: 13.5px;
  font-weight: 700;
  color: #FCD000;
  letter-spacing: 0.02em;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(252, 208, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}
.v11-solution-rich .v11-solution-cta::after {
  content: "→";
  font-size: 16px;
  transition: transform 0.3s ease;
}
.v11-solution-rich:hover .v11-solution-cta::after {
  transform: translateX(6px);
}
/* Hide the literal arrow inside text since we use ::after */
.v11-solution-rich .v11-solution-cta { gap: 8px; }

/* Override pour coming soon : variante visuelle */
.v11-solution-rich.v11-solution-coming {
  background: linear-gradient(155deg, rgba(31, 198, 229, 0.05), rgba(255, 255, 255, 0.01));
  border: 1px dashed rgba(252, 208, 0, 0.45);
}
.v11-solution-rich.v11-solution-coming::before {
  background: radial-gradient(circle at 50% 0%, rgba(31, 198, 229, 0.2), transparent 65%);
}

/* === Frictions : hover plus dynamique === */
.v11-problem {
  position: relative;
}
.v11-problem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(252, 208, 0, 0.08), transparent 50%);
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.v11-problem:hover::before { opacity: 1; }
.v11-problem:hover .v11-problem-icon {
  transform: scale(1.1) rotate(-4deg);
  background: rgba(252, 208, 0, 0.1);
}
.v11-problem-icon {
  transition: transform 0.3s ease, background 0.3s ease;
}
.v11-problem:hover .v11-problem-arrow {
  transform: translateX(8px) scale(1.2);
}

/* Stagger reveal pour les problèmes */
.v11-problems .v11-problem {
  opacity: 0;
  animation: v11-friction-reveal 0.5s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
}
.v11-problems .v11-problem:nth-child(1) { animation-delay: 0.05s; }
.v11-problems .v11-problem:nth-child(2) { animation-delay: 0.12s; }
.v11-problems .v11-problem:nth-child(3) { animation-delay: 0.19s; }
.v11-problems .v11-problem:nth-child(4) { animation-delay: 0.26s; }
.v11-problems .v11-problem:nth-child(5) { animation-delay: 0.33s; }
.v11-problems .v11-problem:nth-child(6) { animation-delay: 0.40s; }
@keyframes v11-friction-reveal {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .v11-solution-rich, .v11-problems .v11-problem { animation: none; opacity: 1; }
  .v11-problem-icon { transition: none; }
}

/* ===================================================================
   V11.8 — DETAIL OVERLAY anti-redondance (stat seul + perks restants)
   =================================================================== */

.v11-detail-stat {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}
.v11-detail-stat-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.6);
  font-weight: 600;
  vertical-align: middle;
}

/* Le `.v10-detail-product` n'est plus le `what` mais un combo stat + label */
.v10-detail-product {
  font-size: inherit;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 4px;
}

/* ===================================================================
   V12 — WOW EFFECTS (counter + marquee + cursor blob + spotlight pills
   + reveal scroll + CTA pulse). Tout désactivé si prefers-reduced-motion.
   =================================================================== */

/* === 1. Animated counter — léger glow pulse pour signaler l'animation === */
.oxxy-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums; /* nombres alignés */
  transition: text-shadow 0.3s ease;
}
.oxxy-counter[data-animated="true"] {
  text-shadow: 0 0 24px rgba(252, 208, 0, 0.4);
}

/* === 2. Marquee ticker (sous nav, scroll infini horizontal) === */
.oxxy-marquee {
  position: relative;
  z-index: 100;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(252, 208, 0, 0.06) 0%, rgba(236, 30, 95, 0.06) 50%, rgba(252, 208, 0, 0.06) 100%);
  border-top: 1px solid rgba(252, 208, 0, 0.12);
  border-bottom: 1px solid rgba(252, 208, 0, 0.12);
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.oxxy-marquee-track {
  display: inline-flex;
  gap: 48px;
  white-space: nowrap;
  animation: oxxy-marquee-scroll 40s linear infinite;
  will-change: transform;
}
.oxxy-marquee-item {
  font-size: 13px;
  font-weight: 600;
  color: rgba(245, 245, 247, 0.85);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@keyframes oxxy-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.oxxy-marquee:hover .oxxy-marquee-track {
  animation-play-state: paused;
}

/* === 3. Cursor glow blob (desktop seulement) === */
.oxxy-cursor-blob {
  position: fixed;
  top: 0; left: 0;
  width: 400px; height: 400px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle, rgba(252, 208, 0, 0.18) 0%, rgba(236, 30, 95, 0.08) 30%, transparent 60%);
  filter: blur(40px);
  transition: opacity 0.6s ease;
  will-change: transform;
  mix-blend-mode: screen;
}
.oxxy-cursor-blob-active {
  opacity: 1;
}
@media (max-width: 960px) {
  .oxxy-cursor-blob { display: none; }
}

/* === 4. Spotlight hover sur les pills (cursor-aware) === */
.v10-pill {
  position: relative;
  overflow: hidden;
}
.v10-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 80px at var(--spot-x, 50%) var(--spot-y, 50%), rgba(252, 208, 0, 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}
.v10-pill:hover::before {
  opacity: 1;
}

/* === 5. Reveal au scroll === */
.v10-stage,
.v10-picker-card,
.v11-friction-card,
.v11-solution-rich {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.v10-stage.oxxy-in-view,
.v10-picker-card.oxxy-in-view,
.v11-friction-card.oxxy-in-view,
.v11-solution-rich.oxxy-in-view {
  opacity: 1;
  transform: translateY(0);
}
/* État select default visible immédiatement (au-dessus du fold) */
.v10-stage[data-stage="select"] {
  opacity: 1;
  transform: none;
}

/* === 6. Pulse glow sur le CTA Allié Intro principal === */
.v10-nav-cta {
  position: relative;
  animation: oxxy-cta-pulse 3s ease-in-out infinite;
}
@keyframes oxxy-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252, 208, 0, 0.4), 0 4px 12px rgba(252, 208, 0, 0.25); }
  50%      { box-shadow: 0 0 0 12px rgba(252, 208, 0, 0), 0 6px 20px rgba(252, 208, 0, 0.4); }
}
.v10-nav-cta:hover {
  animation: none; /* pause pulse au hover */
}

/* === Respect prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  .oxxy-marquee-track,
  .v10-nav-cta,
  .v10-stage,
  .v10-picker-card,
  .v11-friction-card,
  .v11-solution-rich {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .oxxy-cursor-blob { display: none; }
}

/* === Mobile : désactive cursor blob + réduit certaines animations === */
@media (max-width: 960px) {
  .v10-nav-cta { animation: none; } /* pas de pulse sur mobile, prend du CPU */
  .oxxy-marquee-track { animation-duration: 30s; } /* plus rapide sur petit écran */
}

/* ===================================================================
   V13 — WOW PACK COMPLET « on ne déconne pas »
   30+ effets premium. Tout respect prefers-reduced-motion.
   =================================================================== */

/* === Smooth scroll global === */
html { scroll-behavior: smooth; }

/* === Page progress bar (top fine line) === */
.oxxy-progress {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 3px;
  background: linear-gradient(90deg, #FCD000, #EC1E5F);
  z-index: 9999;
  pointer-events: none;
  transition: width 0.05s linear;
  box-shadow: 0 0 12px rgba(252, 208, 0, 0.6);
}

/* === Cursor custom (jaune sur cliquables) === */
@media (hover: hover) {
  a, button, [role="button"], .v10-picker-card, .v10-pill {
    cursor: pointer;
  }
}

/* === Underline animé sur liens (slide right) === */
a:not(.v10-pill):not(.v10-nav-cta):not(.v10-brand):not(.v10-nav-mobile-link):not(.v10-nav-mobile-cta) {
  position: relative;
  text-decoration: none;
}
a:not(.v10-pill):not(.v10-nav-cta):not(.v10-brand):not(.v10-nav-mobile-link):not(.v10-nav-mobile-cta):after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.2, 1);
}
a:not(.v10-pill):not(.v10-nav-cta):not(.v10-brand):not(.v10-nav-mobile-link):not(.v10-nav-mobile-cta):hover:after {
  transform: scaleX(1);
}

/* === Form fields focus glow === */
input[type="email"], input[type="text"], textarea {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input[type="email"]:focus, input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: rgba(252, 208, 0, 0.6);
  box-shadow: 0 0 0 4px rgba(252, 208, 0, 0.12), 0 0 24px rgba(252, 208, 0, 0.15);
}

/* === Skeleton loaders (placeholder shimmer) === */
.oxxy-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: oxxy-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes oxxy-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Magnetic buttons + Click ripple === */
.oxxy-magnetic {
  transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.2, 1);
  will-change: transform;
}
.oxxy-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(252, 208, 0, 0.5);
  transform: scale(0);
  animation: oxxy-ripple-anim 0.7s ease-out;
  pointer-events: none;
}
@keyframes oxxy-ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* === Tilt 3D cards === */
.v10-picker-card,
.v11-friction-card,
.v11-solution-rich {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.2, 1);
}

/* === Background gradient mesh animé === */
body.home-v10::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(at 20% 20%, rgba(252, 208, 0, 0.06) 0%, transparent 50%),
    radial-gradient(at 80% 80%, rgba(236, 30, 95, 0.05) 0%, transparent 50%),
    radial-gradient(at 50% 50%, rgba(31, 198, 229, 0.03) 0%, transparent 50%);
  animation: oxxy-mesh-shift 25s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes oxxy-mesh-shift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
  50%  { background-position: 100% 0%, 0% 100%, 50% 50%; }
  100% { background-position: 0% 100%, 100% 0%, 50% 50%; }
}

/* === Tooltips OXXY === */
.oxxy-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(20, 20, 24, 0.95);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border: 1px solid rgba(252, 208, 0, 0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 100;
}
.oxxy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(20, 20, 24, 0.95);
}
.v10-pill:hover .oxxy-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === Cursor tail trail === */
.oxxy-cursor-trail {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(252, 208, 0, 0.6);
  pointer-events: none;
  z-index: 9998;
  filter: blur(2px);
  transform: translate(-50%, -50%);
  transition: opacity 0.6s ease;
}

/* === Logo bar marquee (placeholder text-based "As seen at") === */
.oxxy-logo-bar {
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  margin: 64px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.oxxy-logo-bar-label {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.4);
  margin-bottom: 18px;
}
.oxxy-logo-bar-track {
  display: inline-flex;
  gap: 64px;
  white-space: nowrap;
  animation: oxxy-marquee-scroll 35s linear infinite;
  will-change: transform;
}
.oxxy-logo-bar-item {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(245,245,247,0.55);
  transition: color 0.3s ease;
  flex-shrink: 0;
}
.oxxy-logo-bar-item:hover { color: rgba(252, 208, 0, 0.9); }

/* === Activity ticker (bottom-left, fake-live ou réel) === */
.oxxy-activity {
  position: fixed;
  bottom: 24px; left: 24px;
  background: rgba(20, 20, 24, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(252, 208, 0, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: rgba(245,245,247,0.9);
  max-width: 280px;
  z-index: 9000;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2,0.85,0.2,1), opacity 0.4s ease;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.oxxy-activity.oxxy-activity-show {
  transform: translateY(0);
  opacity: 1;
}
.oxxy-activity-icon {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  margin-right: 8px;
  vertical-align: middle;
  animation: oxxy-pulse-dot 2s ease-in-out infinite;
}
@keyframes oxxy-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
}
.oxxy-activity-close {
  position: absolute;
  top: 4px; right: 8px;
  background: none; border: none;
  color: rgba(245,245,247,0.4);
  cursor: pointer;
  font-size: 14px;
}
@media (max-width: 600px) {
  .oxxy-activity { bottom: 12px; left: 12px; right: 12px; max-width: none; }
}

/* === Words shuffle (rotating) === */
.oxxy-shuffle-word {
  display: inline-block;
  position: relative;
  min-width: 120px;
  text-align: left;
}
.oxxy-shuffle-word > span {
  display: inline-block;
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2,0.85,0.2,1);
}
.oxxy-shuffle-word > span.oxxy-shuffle-exit {
  opacity: 0;
  transform: translateY(-8px);
}
.oxxy-shuffle-word > span.oxxy-shuffle-enter {
  opacity: 0;
  transform: translateY(8px);
}

/* === Mini Audit IA Quiz Modal === */
.oxxy-quiz-trigger {
  position: fixed;
  bottom: 24px; right: 24px;
  background: linear-gradient(135deg, #FCD000, #EC1E5F);
  color: #0a0a0c;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(252, 208, 0, 0.35);
  z-index: 9000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: oxxy-cta-pulse 4s ease-in-out infinite;
}
.oxxy-quiz-trigger:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(252, 208, 0, 0.5);
}
@media (max-width: 600px) {
  .oxxy-quiz-trigger { right: 12px; bottom: 12px; padding: 12px 16px; font-size: 12px; }
}

.oxxy-quiz-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 10, 0.88);
  backdrop-filter: blur(20px);
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.oxxy-quiz-modal.oxxy-quiz-modal-open { display: flex; }
.oxxy-quiz-box {
  background: rgba(18, 18, 22, 0.98);
  border: 1px solid rgba(252, 208, 0, 0.2);
  border-radius: 20px;
  max-width: 540px;
  width: 100%;
  padding: 36px 32px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.oxxy-quiz-box h3 {
  font-size: 24px;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.oxxy-quiz-box p { margin: 0 0 24px; color: rgba(245,245,247,0.65); }
.oxxy-quiz-options { display: grid; gap: 8px; }
.oxxy-quiz-option {
  display: block;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
}
.oxxy-quiz-option:hover {
  background: rgba(252, 208, 0, 0.08);
  border-color: rgba(252, 208, 0, 0.3);
}
.oxxy-quiz-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.oxxy-quiz-result {
  background: rgba(252, 208, 0, 0.1);
  border: 1px solid rgba(252, 208, 0, 0.35);
  border-radius: 12px;
  padding: 20px;
  margin-top: 12px;
}
.oxxy-quiz-result strong {
  display: block;
  margin-bottom: 8px;
  color: #FCD000;
  font-size: 18px;
}

/* === Time of day adaptive === */
body.oxxy-time-morning::before { filter: brightness(1.08); }
body.oxxy-time-evening::before { filter: brightness(0.92) hue-rotate(-10deg); }
body.oxxy-time-night::before { filter: brightness(0.85); }

/* === 404 / error page styles === */
.oxxy-404 {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}
.oxxy-404-glitch {
  font-size: clamp(80px, 15vw, 180px);
  font-weight: 900;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #FCD000, #EC1E5F);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: oxxy-glitch-shake 0.5s ease-in-out infinite;
}
@keyframes oxxy-glitch-shake {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

/* === Logo reveal animation === */
@keyframes oxxy-logo-reveal {
  0%   { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.v10-brand img {
  animation: oxxy-logo-reveal 0.9s cubic-bezier(0.2, 0.85, 0.2, 1.2) both;
}

/* === Easter egg konami code === */
body.oxxy-arcade-mode {
  animation: oxxy-arcade-bg 4s linear infinite;
}
@keyframes oxxy-arcade-bg {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(60deg); }
}
body.oxxy-arcade-mode .v10-brand img {
  animation: oxxy-arcade-bounce 0.5s ease-in-out infinite;
}
@keyframes oxxy-arcade-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-12px) rotate(-15deg); }
  75%      { transform: translateY(-12px) rotate(15deg); }
}

/* === Section scroll horizontal (à utiliser sur des sections spécifiques) === */
.oxxy-horizontal-scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 24px;
  padding: 0 24px;
  scroll-padding-left: 24px;
}
.oxxy-horizontal-scroll::-webkit-scrollbar { display: none; }
.oxxy-horizontal-scroll > * {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

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

/* ===================================================================
   V14 — Wow Pack 2 (canvas particles, status badge, words shuffle,
   page transitions, cursor IA-aware par section)
   =================================================================== */

/* === Canvas particles fullscreen fixed === */
.oxxy-canvas-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

/* === Live Pat status badge (header right) === */
.oxxy-pat-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(245, 245, 247, 0.7);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.oxxy-pat-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.oxxy-pat-status[data-state="available"] .oxxy-pat-status-dot {
  background: #2ecc71;
  animation: oxxy-pulse-dot 2s infinite;
}
.oxxy-pat-status[data-state="busy"] .oxxy-pat-status-dot { background: #f39c12; }
.oxxy-pat-status[data-state="offline"] .oxxy-pat-status-dot { background: #95a5a6; }

@media (max-width: 600px) {
  .oxxy-pat-status { display: none; }
}

/* === Live visitors counter === */
.oxxy-visitors {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(252, 208, 0, 0.08);
  border: 1px solid rgba(252, 208, 0, 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(245, 245, 247, 0.85);
}
.oxxy-visitors-eyes {
  display: inline-block;
  animation: oxxy-blink 4s infinite;
}
@keyframes oxxy-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%, 98%      { transform: scaleY(0.1); }
}

/* === Words shuffle rotating === */
.oxxy-rotator {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  text-align: left;
  min-width: 200px;
  height: 1.1em;
  overflow: hidden;
}
.oxxy-rotator-word {
  position: absolute;
  left: 0;
  white-space: nowrap;
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2,0.85,0.2,1);
}
.oxxy-rotator-word.oxxy-rotator-visible {
  opacity: 1;
  transform: translateY(0);
}
.oxxy-rotator-word.oxxy-rotator-exit {
  opacity: 0;
  transform: translateY(-20px);
}

/* === Page transition fade overlay === */
.oxxy-page-transition {
  position: fixed;
  inset: 0;
  background: #0a0a0c;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.oxxy-page-transition.oxxy-page-transition-active {
  opacity: 1;
  pointer-events: auto;
}

/* === Cursor IA-aware (différent par hover de section) === */
@media (hover: hover) and (min-width: 961px) {
  body.oxxy-cursor-coaching, body.oxxy-cursor-coaching * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23FCD000' opacity='0.3'/%3E%3Ctext x='16' y='22' font-size='18' text-anchor='middle'%3E🎯%3C/text%3E%3C/svg%3E") 16 16, auto; }
  body.oxxy-cursor-systeme, body.oxxy-cursor-systeme * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23EC1E5F' opacity='0.3'/%3E%3Ctext x='16' y='22' font-size='18' text-anchor='middle'%3E⚙%ef%b8%8f%3C/text%3E%3C/svg%3E") 16 16, auto; }
  body.oxxy-cursor-contenu, body.oxxy-cursor-contenu * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%231FC6E5' opacity='0.3'/%3E%3Ctext x='16' y='22' font-size='18' text-anchor='middle'%3E🎬%3C/text%3E%3C/svg%3E") 16 16, auto; }
}

/* === Sticky scroll narrative section === */
.oxxy-sticky-narrative {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding: 120px 0;
  max-width: 1280px;
  margin: 0 auto;
}
.oxxy-sticky-narrative-visual {
  position: sticky;
  top: 120px;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oxxy-sticky-narrative-text {
  display: flex;
  flex-direction: column;
  gap: 100vh;
}
@media (max-width: 960px) {
  .oxxy-sticky-narrative { grid-template-columns: 1fr; gap: 32px; }
  .oxxy-sticky-narrative-visual { position: relative; top: 0; height: 30vh; }
  .oxxy-sticky-narrative-text { gap: 60vh; }
}

/* === 404 page === */
.oxxy-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
}
.oxxy-404 h1 {
  font-size: clamp(80px, 18vw, 240px);
  margin: 0;
  line-height: 0.9;
  letter-spacing: -0.06em;
  background: linear-gradient(135deg, #FCD000, #EC1E5F);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.oxxy-404 p {
  font-size: clamp(18px, 2vw, 24px);
  color: rgba(245, 245, 247, 0.8);
  max-width: 540px;
  margin: 16px auto 32px;
}
.oxxy-404-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #FCD000;
  color: #0a0a0c;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.oxxy-404-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(252, 208, 0, 0.4);
}

/* ===================================================================
   V15 — DYNAMISM PACK (mouvement constant partout)
   =================================================================== */

/* === Aurora blobs (3 blobs qui bougent en boucle behind hero) === */
.oxxy-aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  overflow: hidden;
}
.oxxy-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  mix-blend-mode: screen;
}
.oxxy-aurora-blob-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #FCD000 0%, transparent 70%);
  top: -200px; left: -200px;
  animation: oxxy-aurora-1 20s ease-in-out infinite alternate;
}
.oxxy-aurora-blob-2 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, #EC1E5F 0%, transparent 70%);
  bottom: -300px; right: -200px;
  animation: oxxy-aurora-2 25s ease-in-out infinite alternate;
}
.oxxy-aurora-blob-3 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #1FC6E5 0%, transparent 70%);
  top: 40%; left: 50%;
  animation: oxxy-aurora-3 30s ease-in-out infinite alternate;
}
@keyframes oxxy-aurora-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(400px, 300px) scale(1.3); }
}
@keyframes oxxy-aurora-2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-300px, -200px) scale(1.2); }
}
@keyframes oxxy-aurora-3 {
  0%   { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-30%, -70%) scale(1.4); }
}

/* === Floating cards (lévitation continue) === */
@keyframes oxxy-float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}
.v10-picker-card {
  animation: oxxy-float 6s ease-in-out infinite;
}
.v10-picker-card:nth-child(2) { animation-delay: 1.5s; }
.v10-picker-card:nth-child(3) { animation-delay: 3s; }
.v10-picker-card:hover {
  animation-play-state: paused;
}

/* === Animated gradient text (couleurs qui bougent) === */
.text-gradient, .v11-headline-stat, em.text-gradient {
  background: linear-gradient(135deg, #FCD000 0%, #EC1E5F 50%, #FCD000 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: oxxy-gradient-shift 5s ease-in-out infinite;
}
@keyframes oxxy-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* === Bouncing scroll cue === */
.oxxy-scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  opacity: 0.6;
  pointer-events: none;
  animation: oxxy-bounce-cue 2.5s ease-in-out infinite;
  z-index: 10;
  color: #FCD000;
}
@keyframes oxxy-bounce-cue {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50%      { transform: translate(-50%, 12px); opacity: 1; }
}

/* === Sticky scroll dot indicator (sur le côté) === */
.oxxy-scroll-dot {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.oxxy-scroll-dot-item {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}
.oxxy-scroll-dot-item.oxxy-scroll-dot-active {
  background: #FCD000;
  transform: scale(1.5);
  box-shadow: 0 0 16px rgba(252, 208, 0, 0.6);
}
@media (max-width: 960px) {
  .oxxy-scroll-dot { display: none; }
}

/* === Live ticker stats === */
.oxxy-ticker-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: rgba(252, 208, 0, 0.08);
  border: 1px solid rgba(252, 208, 0, 0.25);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(245, 245, 247, 0.95);
  margin: 24px auto;
  max-width: fit-content;
}
.oxxy-ticker-stat strong {
  display: inline-block;
  background: linear-gradient(135deg, #FCD000, #EC1E5F);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 18px;
  font-weight: 800;
  min-width: 36px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.5, 1.5, 0.5, 1);
}
.oxxy-ticker-stat strong.oxxy-ticker-changed {
  animation: oxxy-ticker-flip 0.6s ease;
}
@keyframes oxxy-ticker-flip {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}

/* === Confetti burst === */
.oxxy-confetti {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  width: 8px;
  height: 14px;
  opacity: 0;
}
@keyframes oxxy-confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--cx), var(--cy), 0) rotate(720deg); opacity: 0; }
}

/* === Animated dotted grid background === */
body.home-v10::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(252, 208, 0, 0.08) 1px, transparent 1px),
    radial-gradient(circle, rgba(236, 30, 95, 0.06) 1px, transparent 1px);
  background-size: 40px 40px, 60px 60px;
  background-position: 0 0, 20px 20px;
  animation: oxxy-grid-drift 30s linear infinite;
  opacity: 0.5;
}
@keyframes oxxy-grid-drift {
  0%   { background-position: 0 0, 20px 20px; }
  100% { background-position: 40px 40px, 60px 60px; }
}

/* === Hero letter-by-letter reveal === */
.oxxy-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotate(-2deg);
  animation: oxxy-letter-in 0.5s forwards cubic-bezier(0.2, 0.85, 0.2, 1);
}
@keyframes oxxy-letter-in {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* === Parallax scroll layers (via CSS scroll-driven, modern browsers) === */
@supports (animation-timeline: scroll()) {
  body.home-v10::before {
    animation: oxxy-mesh-shift 25s ease-in-out infinite alternate,
               oxxy-parallax-bg linear;
    animation-timeline: auto, scroll();
    animation-range: auto, 0% 200%;
  }
  @keyframes oxxy-parallax-bg {
    to { transform: translateY(30%); }
  }
}

/* === Pulsing rings autour du CTA Allié Intro === */
.v10-nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(252, 208, 0, 0.5);
  animation: oxxy-ring-pulse 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes oxxy-ring-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* === Glitch effect subtle sur les chiffres au hover === */
.v11-headline-stat:hover {
  animation: oxxy-glitch-subtle 0.4s ease;
}
@keyframes oxxy-glitch-subtle {
  0%, 100% { transform: translate(0); text-shadow: 0 0 24px rgba(252, 208, 0, 0.4); }
  20%      { transform: translate(-2px, 1px); text-shadow: 2px 0 #EC1E5F, -2px 0 #1FC6E5; }
  40%      { transform: translate(2px, -1px); text-shadow: -2px 0 #EC1E5F, 2px 0 #1FC6E5; }
  60%      { transform: translate(-1px, 1px); text-shadow: 0 0 24px rgba(252, 208, 0, 0.6); }
}

/* === Reduce motion respect === */
@media (prefers-reduced-motion: reduce) {
  .oxxy-aurora-blob,
  .v10-picker-card,
  .text-gradient,
  .oxxy-scroll-cue,
  .v10-nav-cta::after,
  body.home-v10::after,
  body.home-v10::before {
    animation: none !important;
  }
}

/* ===================================================================
   V16 — DYNAMISM PACK 2 (sparkles, click burst, magnetic field,
   constellation, wave dividers, animated icons)
   =================================================================== */

/* === Sparkles random (étoiles qui apparaissent partout) === */
.oxxy-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  width: 12px;
  height: 12px;
  opacity: 0;
  animation: oxxy-sparkle-pop 1.5s ease-out forwards;
}
.oxxy-sparkle::before, .oxxy-sparkle::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #FCD000;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.oxxy-sparkle::after {
  transform: rotate(45deg) scale(0.6);
  background: #EC1E5F;
}
@keyframes oxxy-sparkle-pop {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  40%  { opacity: 1; transform: scale(1.2) rotate(180deg); }
  100% { opacity: 0; transform: scale(0.3) rotate(360deg); }
}

/* === Click burst particles === */
.oxxy-burst {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99997;
}
@keyframes oxxy-burst-fly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--bx), var(--by)) scale(0); opacity: 0; }
}

/* === Wave divider entre sections (SVG path animé) === */
.oxxy-wave-divider {
  width: 100%;
  height: 80px;
  margin: 32px 0;
  overflow: hidden;
  position: relative;
}
.oxxy-wave-divider svg {
  width: 200%;
  height: 100%;
  position: absolute;
  left: 0;
  animation: oxxy-wave-slide 18s linear infinite;
}
@keyframes oxxy-wave-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* === Number ticker style stock market (chiffres qui défilent rapide) === */
.oxxy-stock-ticker {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  height: 1em;
  min-width: 1.5em;
}
.oxxy-stock-ticker-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.8s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.oxxy-stock-ticker-digit {
  line-height: 1;
  height: 1em;
}

/* === Magnetic field cards (cards qui bougent légèrement avec curseur global) === */
.oxxy-magnetic-card {
  transition: transform 0.6s cubic-bezier(0.2, 0.85, 0.2, 1);
  will-change: transform;
}

/* === Constellation lines au scroll === */
.oxxy-constellation {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.25;
}

/* === Sparkle on hover sur les éléments importants === */
.v10-nav-cta, .v10-footer-cta, .oxxy-quiz-trigger {
  position: relative;
  overflow: visible !important;
}
.v10-nav-cta::before, .v10-footer-cta::before, .oxxy-quiz-trigger::before {
  content: '✦';
  position: absolute;
  top: -8px; right: -8px;
  font-size: 14px;
  color: #FCD000;
  opacity: 0;
  animation: oxxy-corner-sparkle 4s ease-in-out infinite;
}
@keyframes oxxy-corner-sparkle {
  0%, 90%, 100% { opacity: 0; transform: scale(0) rotate(0); }
  92%, 96%      { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* === Reduce motion === */
@media (prefers-reduced-motion: reduce) {
  .oxxy-sparkle, .oxxy-burst, .oxxy-wave-divider svg,
  .v10-nav-cta::before, .v10-footer-cta::before, .oxxy-quiz-trigger::before {
    animation: none !important;
  }
}

/* ===================================================================
   V17 — PRO POLISH (override des effets cheap, ajout raffinement B2B)
   =================================================================== */

/* === KILL effets cheap (overrides) === */
.oxxy-sparkle { display: none !important; }
.oxxy-burst { display: none !important; }
.oxxy-cursor-trail { display: none !important; }
.v10-nav-cta::before,
.v10-footer-cta::before,
.oxxy-quiz-trigger::before { display: none !important; }
.v11-headline-stat:hover { animation: none !important; text-shadow: 0 0 24px rgba(252, 208, 0, 0.4) !important; }

/* Plus de mouvement watermark (trop distrayant) */
.v10-watermark-num { animation: none !important; transform: none !important; }

/* Plus de magnetic field cards trop disruptif */
.oxxy-magnetic-card {
  transform: none !important;
  transition: transform 0.3s ease !important;
}

/* Réduire l'amplitude floating cards (subtle) */
@keyframes oxxy-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* === Copy-to-clipboard buttons (email, phone, etc) === */
.oxxy-copyable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.oxxy-copyable:hover {
  background: rgba(252, 208, 0, 0.08);
}
.oxxy-copyable::after {
  content: '📋';
  font-size: 12px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.oxxy-copyable:hover::after { opacity: 1; }

/* === Sticky CTA bottom (discret, apparaît après scroll) === */
.oxxy-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: rgba(18, 18, 22, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(252, 208, 0, 0.3);
  border-radius: 16px 16px 0 0;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 8500;
  transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.2, 1);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  max-width: calc(100vw - 32px);
}
.oxxy-sticky-cta.oxxy-sticky-cta-show {
  transform: translateX(-50%) translateY(0);
}
.oxxy-sticky-cta-text {
  font-size: 14px;
  color: rgba(245, 245, 247, 0.9);
  font-weight: 500;
}
.oxxy-sticky-cta-text strong { color: #FCD000; }
.oxxy-sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FCD000;
  color: #0a0a0c;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease;
}
.oxxy-sticky-cta-btn:hover { transform: translateY(-1px); }
.oxxy-sticky-cta-close {
  background: none; border: none; color: rgba(245,245,247,0.4);
  cursor: pointer; font-size: 14px; padding: 4px;
}
@media (max-width: 600px) {
  .oxxy-sticky-cta { left: 8px; right: 8px; transform: translateY(120%); padding: 10px 16px; }
  .oxxy-sticky-cta.oxxy-sticky-cta-show { transform: translateY(0); }
  .oxxy-sticky-cta-text { font-size: 13px; }
}

/* === Process timeline (3 étapes claires post-booking) === */
.oxxy-process-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
}
.oxxy-process-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.oxxy-process-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -12px;
  top: 4px;
  color: rgba(252, 208, 0, 0.5);
  font-weight: 700;
}
.oxxy-process-step-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FCD000;
}
.oxxy-process-step-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.oxxy-process-step-desc {
  font-size: 13px;
  color: rgba(245, 245, 247, 0.65);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .oxxy-process-timeline { grid-template-columns: 1fr; }
  .oxxy-process-step:not(:last-child)::after { display: none; }
}

/* === Anchor link # visible au hover sur H2/H3 === */
h2, h3 {
  position: relative;
}
.oxxy-anchor-link {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(252, 208, 0, 0.6);
  font-size: 18px;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
h2:hover .oxxy-anchor-link,
h3:hover .oxxy-anchor-link {
  opacity: 1;
}
@media (max-width: 960px) {
  .oxxy-anchor-link { display: none; }
}

/* === Footer pro additions (NEQ, adresse, mentions) === */
.oxxy-footer-pro {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 64px;
  padding: 48px 24px 32px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.oxxy-footer-pro-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.5);
  margin: 0 0 16px;
}
.oxxy-footer-pro-col p,
.oxxy-footer-pro-col a {
  font-size: 14px;
  color: rgba(245, 245, 247, 0.75);
  margin: 0 0 8px;
  line-height: 1.6;
  text-decoration: none;
  display: block;
}
.oxxy-footer-pro-col a:hover { color: #FCD000; }
.oxxy-footer-pro-mention {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 32px;
  padding-top: 24px;
  font-size: 12px;
  color: rgba(245, 245, 247, 0.4);
  text-align: center;
}
@media (max-width: 960px) {
  .oxxy-footer-pro {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 540px) {
  .oxxy-footer-pro {
    grid-template-columns: 1fr;
  }
}

/* === Réponse moyenne badge === */
.oxxy-response-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(46, 204, 113, 0.9);
  margin-top: 4px;
}
.oxxy-response-time::before {
  content: '⚡';
  font-size: 11px;
}

/* === Print-friendly CSS === */
@media print {
  body { background: white !important; color: black !important; }
  .oxxy-aurora, .oxxy-canvas-particles, .oxxy-cursor-blob,
  .oxxy-marquee, .oxxy-progress, .oxxy-scroll-dot,
  .oxxy-activity, .oxxy-quiz-trigger, .oxxy-quiz-modal,
  .oxxy-page-transition, .oxxy-sticky-cta,
  .v10-nav-cta::after, .v10-pill-soon, body.home-v10::before, body.home-v10::after {
    display: none !important;
  }
  body::before, body::after { display: none !important; }
  .v10-nav, .v10-footer { box-shadow: none !important; }
  .v11-headline-stat, .text-gradient, em.text-gradient {
    color: #000 !important;
    background: none !important;
    -webkit-text-fill-color: #000 !important;
  }
  a { color: #0066cc !important; text-decoration: underline !important; }
}

/* === Currency mention === */
.oxxy-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.oxxy-price-currency {
  font-size: 0.6em;
  color: rgba(245, 245, 247, 0.5);
  font-weight: 500;
}

/* ===================================================================
   V18 — GAMIFICATION PACK « OXXY Path »
   Système de progression B2B sobre style Linear/Notion
   =================================================================== */

/* === Bouton flottant trigger === */
.oxxy-game-trigger {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: rgba(20, 20, 24, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(252, 208, 0, 0.3);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  z-index: 8800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-family: inherit;
}
.oxxy-game-trigger:hover {
  transform: translateY(-2px);
  border-color: rgba(252, 208, 0, 0.55);
  box-shadow: 0 12px 32px rgba(252, 208, 0, 0.25);
}
.oxxy-game-trigger-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCD000, #EC1E5F);
  font-size: 14px;
  color: #0a0a0c;
}
.oxxy-game-trigger-level {
  font-size: 11px;
  color: rgba(245, 245, 247, 0.55);
  letter-spacing: 0.05em;
}
.oxxy-game-trigger-xp {
  font-weight: 700;
  color: #FCD000;
}
.oxxy-game-trigger.oxxy-game-trigger-pulse {
  animation: oxxy-game-pulse 1.2s ease-in-out;
}
@keyframes oxxy-game-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); box-shadow: 0 0 32px rgba(252, 208, 0, 0.6); }
}
@media (max-width: 600px) {
  .oxxy-game-trigger { bottom: 12px; left: 12px; padding: 8px 12px; font-size: 12px; }
}

/* === Panel slide-in droite === */
.oxxy-game-panel {
  position: fixed;
  top: 0;
  right: -440px;
  width: 420px;
  max-width: 90vw;
  height: 100vh;
  background: rgba(14, 14, 18, 0.98);
  backdrop-filter: blur(24px);
  border-left: 1px solid rgba(252, 208, 0, 0.2);
  z-index: 9600;
  padding: 32px 28px;
  overflow-y: auto;
  transition: right 0.4s cubic-bezier(0.2, 0.85, 0.2, 1);
  box-shadow: -16px 0 64px rgba(0, 0, 0, 0.5);
}
.oxxy-game-panel.oxxy-game-panel-open {
  right: 0;
}
.oxxy-game-panel-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}
.oxxy-game-panel h3 {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.5);
  margin: 24px 0 12px;
}

.oxxy-game-hero {
  text-align: center;
  padding: 16px 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.oxxy-game-avatar-big {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCD000, #EC1E5F);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #0a0a0c;
  margin: 0 auto 16px;
  position: relative;
  box-shadow: 0 12px 40px rgba(252, 208, 0, 0.3);
}
.oxxy-game-avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(252, 208, 0, 0.4);
  animation: oxxy-game-ring-spin 4s linear infinite;
}
@keyframes oxxy-game-ring-spin { to { transform: rotate(360deg); } }
.oxxy-game-level-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.oxxy-game-level-meta {
  font-size: 13px;
  color: rgba(245, 245, 247, 0.55);
}

/* XP bar */
.oxxy-game-xpbar {
  margin: 20px 0;
}
.oxxy-game-xpbar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
}
.oxxy-game-xpbar-meta strong { color: #FCD000; }
.oxxy-game-xpbar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.oxxy-game-xpbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FCD000, #EC1E5F);
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.2, 0.85, 0.2, 1);
  box-shadow: 0 0 12px rgba(252, 208, 0, 0.5);
}

/* Badges */
.oxxy-game-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.oxxy-game-badge {
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  filter: grayscale(1);
  opacity: 0.3;
  transition: all 0.3s ease;
  cursor: default;
  position: relative;
}
.oxxy-game-badge.oxxy-game-badge-earned {
  filter: none;
  opacity: 1;
  background: rgba(252, 208, 0, 0.1);
  border-color: rgba(252, 208, 0, 0.4);
  box-shadow: 0 4px 16px rgba(252, 208, 0, 0.15);
}
.oxxy-game-badge-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1f;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.oxxy-game-badge:hover .oxxy-game-badge-tooltip { opacity: 1; }

/* Quests list */
.oxxy-game-quests {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oxxy-game-quest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 0.2s ease;
}
.oxxy-game-quest.oxxy-game-quest-done {
  background: rgba(46, 204, 113, 0.06);
  border-color: rgba(46, 204, 113, 0.25);
}
.oxxy-game-quest-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.oxxy-game-quest-text {
  flex: 1;
  font-size: 13px;
  color: rgba(245, 245, 247, 0.85);
  line-height: 1.35;
}
.oxxy-game-quest-text strong { color: #fff; font-weight: 600; }
.oxxy-game-quest-done .oxxy-game-quest-text {
  text-decoration: line-through;
  color: rgba(245, 245, 247, 0.45);
}
.oxxy-game-quest-xp {
  font-size: 11px;
  font-weight: 700;
  color: #FCD000;
  padding: 2px 8px;
  background: rgba(252, 208, 0, 0.12);
  border-radius: 999px;
  flex-shrink: 0;
}
.oxxy-game-quest-done .oxxy-game-quest-xp {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

/* Rewards */
.oxxy-game-rewards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.oxxy-game-reward {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(252, 208, 0, 0.06), rgba(236, 30, 95, 0.04));
  border: 1px solid rgba(252, 208, 0, 0.18);
  border-radius: 10px;
}
.oxxy-game-reward.oxxy-game-reward-locked {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  opacity: 0.55;
}
.oxxy-game-reward-icon { font-size: 22px; }
.oxxy-game-reward-meta { flex: 1; }
.oxxy-game-reward-title { font-size: 13px; font-weight: 700; color: #fff; }
.oxxy-game-reward-desc { font-size: 11px; color: rgba(245, 245, 247, 0.55); margin-top: 2px; }
.oxxy-game-reward-cta {
  background: #FCD000;
  color: #0a0a0c;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.oxxy-game-reward-locked .oxxy-game-reward-cta {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 245, 247, 0.4);
  pointer-events: none;
}

/* Achievement toast (en bas pop-up quand quête complete) */
.oxxy-game-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: linear-gradient(135deg, #FCD000, #EC1E5F);
  color: #0a0a0c;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  z-index: 99996;
  box-shadow: 0 12px 40px rgba(252, 208, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.5, 1.4, 0.5, 1), opacity 0.4s ease;
}
.oxxy-game-toast.oxxy-game-toast-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.oxxy-game-toast-icon { font-size: 22px; }