/* ═══════════════════════════════════════════════════════════════════════
   EP Coaching, couche « expérience » : visuels produit, profondeur, motion
   ═══════════════════════════════════════════════════════════════════════
   Maquettes de téléphone avec de vraies captures de l'appli, hero en
   parallaxe, bandeau de logos, visite produit qui défile, cartes lumineuses
   qui suivent la souris, bento, capture de leads. Toujours dans les 7
   couleurs de la marque (jamais de ton froid : les logos d'outils sont
   affichés en blanc cassé, pas dans leurs couleurs d'origine). Tout le
   mouvement s'arrête avec prefers-reduced-motion. */

/* ── Apparition au défilement (activée seulement si le JS tourne) ─────── */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1), filter 0.8s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ── Maquette de téléphone ────────────────────────────────────────────── */
.phone {
  --w: 270px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * 0.035);
  border-radius: calc(var(--w) * 0.14);
  background: linear-gradient(160deg, #2a0606 0%, #0d0000 45%, #1a0303 100%);
  border: 1px solid rgba(245,237,237,0.10);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 50px 100px -20px rgba(0,0,0,0.85),
    0 0 90px rgba(224,30,30,0.22);
  flex-shrink: 0;
}
.phone::before {
  /* Île dynamique */
  content: "";
  position: absolute;
  top: calc(var(--w) * 0.055);
  left: 50%;
  width: 30%;
  height: calc(var(--w) * 0.085);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  z-index: 2;
}
.phone img {
  width: 100%;
  height: auto;
  /* Même format que les captures (780 x 1328) : l'écran entier est
     visible, plus rien n'est rogné sur les côtés. */
  aspect-ratio: 780 / 1328;
  object-fit: contain;
  object-position: center;
  background: #000;
  border-radius: calc(var(--w) * 0.125);
  display: block;
}
.phone::after {
  /* Reflet de verre */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0.10) 0%, transparent 28%, transparent 70%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
}
.phone--sm { --w: 200px; }
.phone--xs { --w: 150px; }

/* ── Hero principal ───────────────────────────────────────────────────── */
.hx {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--space-md) clamp(3rem, 7vw, 6rem);
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 1024px) { .hx { grid-template-columns: 1.05fr 1fr; } }
.hx-copy { display: flex; flex-direction: column; gap: var(--space-md); position: relative; z-index: 2; }
.hx h1 { font-size: clamp(2.6rem, 5.6vw, 4.7rem); line-height: 0.98; }
.hx .page-lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.hx-proof { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.85rem; color: color-mix(in srgb, var(--blanc-casse) 72%, transparent); }
.hx-proof span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hx-proof .icon { width: 1rem; height: 1rem; }
.pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 35%, transparent);
  background: color-mix(in srgb, var(--rouge-tres-fonce) 70%, transparent);
  font-size: 0.8rem; font-weight: 600;
}
.pill b { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--rouge-principal); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.pill:hover { border-color: var(--rouge-principal); }

/* Halo animé derrière le hero */
.hx-aura { position: absolute; inset: -10% -5% 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hx-aura i {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55;
  background: radial-gradient(circle, rgba(224,30,30,0.55) 0%, transparent 65%);
  animation: aura 18s ease-in-out infinite alternate;
}
.hx-aura i:nth-child(1) { width: 520px; height: 520px; right: 5%; top: 5%; }
.hx-aura i:nth-child(2) { width: 380px; height: 380px; right: 30%; top: 45%; animation-duration: 23s; background: radial-gradient(circle, rgba(137,4,4,0.7) 0%, transparent 65%); }
.hx-aura i:nth-child(3) { width: 300px; height: 300px; left: -5%; top: 10%; animation-duration: 27s; opacity: 0.35; }
@keyframes aura { from { transform: translate(0,0) scale(1); } to { transform: translate(-40px, 30px) scale(1.15); } }
.hx-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(245,237,237,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(245,237,237,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
}

/* Trois téléphones en éventail, flottement + parallaxe souris/défilement */
.phones {
  --px: 0; --py: 0; --sy: 0;
  position: relative; z-index: 1;
  height: clamp(420px, 60vw, 640px);
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
}
.phones .phone { position: absolute; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.phones .p-center { --w: clamp(210px, 22vw, 290px); z-index: 3; transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 10px + var(--sy) * -40px), 60px); animation: float 7s ease-in-out infinite; }
.phones .p-left { --w: clamp(170px, 18vw, 240px); z-index: 2; transform: translate3d(calc(-62% + var(--px) * 26px), calc(40px + var(--py) * 18px + var(--sy) * -10px), 0) rotateY(18deg) rotateZ(-6deg); opacity: 0.9; animation: float 8s ease-in-out infinite 1s; }
.phones .p-right { --w: clamp(170px, 18vw, 240px); z-index: 2; transform: translate3d(calc(62% + var(--px) * 26px), calc(60px + var(--py) * 18px + var(--sy) * -70px), 0) rotateY(-18deg) rotateZ(6deg); opacity: 0.9; animation: float 9s ease-in-out infinite 2s; }
@keyframes float { 0%,100% { margin-top: 0; } 50% { margin-top: -26px; } }
@media (max-width: 640px) {
  .phones { height: 480px; }
  .phones .p-left { transform: translate3d(-58%, 50px, 0) rotateZ(-7deg); }
  .phones .p-right { transform: translate3d(58%, 70px, 0) rotateZ(7deg); }
}

/* Étiquettes flottantes autour des téléphones */
.float-chip {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--rouge-tres-fonce) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 30%, transparent);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  font-size: 0.78rem; line-height: 1.3;
  animation: float 6s ease-in-out infinite;
}
.float-chip strong { display: block; font-size: 0.95rem; color: var(--blanc-casse); }
.float-chip .icon { width: 1.5rem; height: 1.5rem; }
.float-chip.c1 { left: 2%; top: 18%; animation-delay: 0.5s; }
.float-chip.c2 { right: 0; top: 58%; animation-delay: 1.5s; }
.float-chip.c3 { left: 8%; bottom: 6%; animation-delay: 2.5s; }
@media (max-width: 640px) { .float-chip.c3 { display: none; } .float-chip { font-size: 0.7rem; } }

/* ── Bandeau de logos ─────────────────────────────────────────────────── */
.logos { padding: var(--space-lg) 0; }
.logos-title { text-align: center; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--blanc-casse) 60%, transparent); margin: 0 auto var(--space-md); }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: clamp(2rem, 5vw, 4.5rem); width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.logo-item { display: inline-flex; align-items: center; gap: 0.6rem; color: color-mix(in srgb, var(--blanc-casse) 62%, transparent); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; transition: color 0.25s ease; }
.logo-item svg { width: 26px; height: 26px; fill: currentColor; }
.logo-item:hover { color: var(--blanc-casse); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Compteurs ────────────────────────────────────────────────────────── */
.counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); max-width: 1100px; margin: 0 auto; padding: 0 var(--space-md); }
@media (min-width: 800px) { .counters { grid-template-columns: repeat(4, 1fr); } }
.counter { text-align: center; padding: var(--space-md) var(--space-sm); border-radius: 18px; background: color-mix(in srgb, var(--rouge-tres-fonce) 45%, transparent); border: 1px solid color-mix(in srgb, var(--rouge-principal) 14%, transparent); }
.counter strong { display: block; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(180deg, var(--blanc-casse) 30%, var(--rose-clair)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.counter span { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: color-mix(in srgb, var(--blanc-casse) 68%, transparent); }

/* ── Cartes lumineuses (halo qui suit la souris) + inclinaison ────────── */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(224,30,30,0.20), transparent 45%);
  opacity: 0; transition: opacity 0.3s ease;
}
.spot:hover::after { opacity: 1; }
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform 0.25s ease; }

/* ── Douleur (Hormozi : nommer le problème avant la solution) ─────────── */
.pains { display: grid; gap: var(--space-md); }
@media (min-width: 900px) { .pains { grid-template-columns: repeat(3, 1fr); } }
.pain { padding: var(--space-lg) var(--space-md); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--rouge-tres-fonce) 70%, transparent), color-mix(in srgb, var(--noir-profond) 80%, transparent)); border: 1px solid color-mix(in srgb, var(--rouge-principal) 16%, transparent); }
.pain-num { font-size: 3.5rem; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--rouge-principal) 70%, transparent); }
.pain h3 { margin: var(--space-sm) 0 0.5rem; font-size: 1.3rem; }
.pain p { font-size: 0.97rem; }
.pain-verdict { max-width: 760px; margin: var(--space-lg) auto 0; text-align: center; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; color: var(--blanc-casse); }
.pain-verdict .accent { font-weight: 900; }

/* ── Équation de valeur ───────────────────────────────────────────────── */
.equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1rem; margin: 0 auto var(--space-lg); font-weight: 900; font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: -0.02em; }
.equation .frac { display: inline-flex; flex-direction: column; align-items: center; }
.equation .frac span:first-child { padding-bottom: 0.3rem; border-bottom: 2px solid var(--rouge-principal); }
.equation .frac span:last-child { padding-top: 0.3rem; }
.levers { display: grid; gap: var(--space-md); }
@media (min-width: 700px) { .levers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .levers { grid-template-columns: repeat(4, 1fr); } }
.lever { padding: var(--space-md); border-radius: 18px; background: color-mix(in srgb, var(--rouge-tres-fonce) 55%, transparent); border: 1px solid color-mix(in srgb, var(--rouge-principal) 16%, transparent); display: flex; flex-direction: column; gap: 0.5rem; }
.lever-dir { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--rouge-principal); }
.lever-dir.down { background: transparent; border: 1px solid var(--rouge-principal); }
.lever h3 { font-size: 1.15rem; }
.lever p { font-size: 0.92rem; line-height: 1.6; }

/* ── Visite produit (téléphone collant qui change d'écran) ────────────── */
.tour { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); display: grid; gap: var(--space-xl); }
@media (min-width: 960px) { .tour { grid-template-columns: 1fr 1fr; } }
.tour-steps { display: flex; flex-direction: column; gap: var(--space-2xl); }
.tour-step { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (min-width: 960px) { .tour-step { min-height: 62vh; justify-content: center; } }
.tour-step .step-index { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; color: var(--rose-clair); }
.tour-step h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.tour-step ul { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.25rem; }
.tour-step li { position: relative; padding-left: 1.3rem; color: color-mix(in srgb, var(--blanc-casse) 75%, transparent); line-height: 1.55; }
.tour-step li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; background: var(--rouge-principal); transform: rotate(45deg); }
.tour-step .phone { margin: var(--space-md) auto 0; --w: 240px; }
@media (min-width: 960px) { .tour-step .phone { display: none; } }
.tour-stage { display: none; }
@media (min-width: 960px) {
  .tour-stage { display: flex; position: sticky; top: 12vh; height: 76vh; align-items: center; justify-content: center; }
  .tour-stage .phone { --w: min(300px, 32vh); }
  .tour-stage .phone { display: grid; }
  .tour-stage .phone img { grid-area: 1 / 1; opacity: 0; transform: scale(1.03); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(.2,.7,.2,1); }
  .tour-stage .phone img.is-active { opacity: 1; transform: none; }
  .tour-stage::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(224,30,30,0.28), transparent 65%); filter: blur(30px); }
}
.tour-dots { position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.5rem; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(245,237,237,0.25); transition: background 0.3s ease, height 0.3s ease; }
.tour-dots i.is-active { background: var(--rouge-principal); height: 22px; border-radius: 3px; }

/* ── Trois chemins ───────────────────────────────────────────────────── */
.paths { display: grid; gap: var(--space-md); }
@media (min-width: 900px) { .paths { grid-template-columns: repeat(3, 1fr); } }
.path {
  position: relative; display: flex; flex-direction: column; gap: 0.75rem;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: 22px; overflow: hidden;
  background: linear-gradient(170deg, color-mix(in srgb, var(--rouge-tres-fonce) 90%, transparent), var(--noir-profond));
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 22%, transparent);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.path:hover { transform: translateY(-6px); border-color: var(--rouge-principal); box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 60px rgba(224,30,30,0.18); }
.path-tag { align-self: flex-start; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--rouge-principal) 22%, transparent); color: var(--rose-clair); }
.path h3 { font-size: 1.5rem; }
.path ul { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.25rem 0 var(--space-sm); }
.path li { display: flex; gap: 0.5rem; font-size: 0.95rem; color: color-mix(in srgb, var(--blanc-casse) 78%, transparent); }
.path li::before { content: "✓"; color: var(--rouge-principal); font-weight: 900; }
.path .btn-cta-primary, .path .btn-ghost { margin-top: auto; text-align: center; }
.path--hot { border-color: var(--rouge-principal); box-shadow: 0 0 0 1px var(--rouge-principal), 0 30px 80px rgba(224,30,30,0.18); }
.path-shot { margin: 0 calc(var(--space-md) * -1) calc(var(--space-md) * -1); height: 180px; overflow: hidden; mask-image: linear-gradient(180deg, #000 40%, transparent); display: flex; justify-content: center; }
.path-shot .phone { --w: 210px; transform: rotate(-4deg) translateY(10px); }

/* ── Avant / après (Matis Clouet : un seul système) ───────────────────── */
.compare { display: grid; gap: var(--space-md); max-width: 1000px; margin: 0 auto; }
@media (min-width: 800px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { padding: var(--space-lg) var(--space-md); border-radius: 20px; border: 1px solid color-mix(in srgb, var(--blanc-casse) 10%, transparent); }
.compare-col h3 { font-size: 1.2rem; margin-bottom: var(--space-sm); }
.compare-col li { display: flex; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px dashed rgba(245,237,237,0.08); font-size: 0.95rem; }
.compare-col.before { background: rgba(245,237,237,0.02); }
.compare-col.before li { color: color-mix(in srgb, var(--blanc-casse) 50%, transparent); text-decoration: line-through; text-decoration-color: rgba(224,30,30,0.6); }
.compare-col.before li::before { content: "✕"; color: color-mix(in srgb, var(--blanc-casse) 40%, transparent); text-decoration: none; }
.compare-col.after { background: linear-gradient(170deg, color-mix(in srgb, var(--rouge-tres-fonce) 90%, transparent), var(--noir-profond)); border-color: var(--rouge-principal); box-shadow: 0 0 60px rgba(224,30,30,0.15); }
.compare-col.after li::before { content: "✓"; color: var(--rouge-principal); font-weight: 900; }

/* ── Bento d'écrans ───────────────────────────────────────────────────── */
.bento { display: grid; gap: var(--space-md); }
@media (min-width: 800px) { .bento { grid-template-columns: repeat(6, 1fr); } .bento > :nth-child(1) { grid-column: span 4; } .bento > :nth-child(2) { grid-column: span 2; } .bento > :nth-child(3), .bento > :nth-child(4), .bento > :nth-child(5) { grid-column: span 2; } .bento > :nth-child(6) { grid-column: span 3; } .bento > :nth-child(7) { grid-column: span 3; } }
.bento-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.4rem;
  min-height: 320px; padding: var(--space-md);
  border-radius: 22px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--rouge-tres-fonce) 85%, transparent), var(--noir-profond));
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 18%, transparent);
}
.bento-card h3 { font-size: 1.25rem; position: relative; z-index: 2; }
.bento-card p { font-size: 0.92rem; position: relative; z-index: 2; max-width: 36ch; }
.bento-card { min-height: 400px; }
.bento-card .phone { --w: 190px; position: absolute; left: 50%; bottom: -58%; transform: translateX(-50%) rotate(-5deg); transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.bento-card:hover .phone { transform: translateX(-50%) rotate(-2deg) translateY(-18px); }
@media (min-width: 800px) {
  .bento > :nth-child(1) .phone, .bento > :nth-child(6) .phone, .bento > :nth-child(7) .phone { left: auto; right: 8%; bottom: -40%; transform: rotate(-6deg); }
  .bento > :nth-child(1):hover .phone, .bento > :nth-child(6):hover .phone, .bento > :nth-child(7):hover .phone { transform: rotate(-2deg) translateY(-18px); }
}
.bento-card .bento-link { margin-top: auto; position: relative; z-index: 2; }
@media (max-width: 799px) { .bento-card { min-height: 440px; } .bento-card .phone { bottom: -45%; } }

/* ── Capture de leads (choisis ton guide) ─────────────────────────────── */
.quiz {
  max-width: 880px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 26px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(224,30,30,0.20), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--rouge-tres-fonce) 92%, transparent), var(--noir-profond));
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 35%, transparent);
  box-shadow: 0 40px 100px rgba(0,0,0,0.55);
}
.quiz-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: var(--space-lg); }
.quiz-head h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.quiz-options { display: grid; gap: 0.75rem; }
@media (min-width: 700px) { .quiz-options { grid-template-columns: 1fr 1fr; } }
.quiz-option {
  display: flex; align-items: center; gap: 0.8rem; text-align: left;
  padding: 1rem 1.1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--noir-profond) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 22%, transparent);
  font-weight: 700; font-size: 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.quiz-option:hover { border-color: var(--rouge-principal); transform: translateY(-2px); }
.quiz-option[aria-pressed="true"] { border-color: var(--rouge-principal); background: color-mix(in srgb, var(--rouge-principal) 18%, transparent); }
.quiz-option .icon { width: 1.6rem; height: 1.6rem; }
.quiz-result { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.quiz-guide { padding: var(--space-md); border-radius: 16px; background: color-mix(in srgb, var(--noir-profond) 60%, transparent); border: 1px dashed color-mix(in srgb, var(--rouge-principal) 45%, transparent); }
.quiz-guide small { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-clair); }
.quiz-guide h3 { font-size: 1.2rem; margin: 0.35rem 0; }
.quiz-guide p { font-size: 0.92rem; }
.quiz-form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.quiz-form input[type="email"] { flex: 1 1 240px; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--rouge-principal) 35%, transparent); background: color-mix(in srgb, var(--noir-profond) 80%, transparent); color: var(--blanc-casse); font: inherit; }
.quiz-form input[type="email"]:focus { outline: 2px solid var(--rouge-principal); outline-offset: 2px; }
.quiz-form button { flex: 0 0 auto; }
.quiz-fine { font-size: 0.8rem; color: color-mix(in srgb, var(--blanc-casse) 58%, transparent); }
.quiz-feedback { font-size: 0.9rem; }

/* ── Fondateur ───────────────────────────────────────────────────────── */
.founder { max-width: 1100px; margin: 0 auto; display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 900px) { .founder { grid-template-columns: 0.85fr 1.15fr; } }
.founder-photo { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rouge-principal) 25%, transparent); box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 80px rgba(224,30,30,0.15); max-width: 440px; margin-inline: auto; }
.founder-photo img { width: 100%; height: auto; display: block; }
.founder-photo figcaption { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; padding: 0.75rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--noir-profond) 75%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 0.85rem; }
.founder-photo figcaption strong { display: block; font-size: 1rem; }
.founder blockquote { font-size: clamp(1.25rem, 2.6vw, 1.8rem); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--blanc-casse); margin: var(--space-sm) 0; }
.founder blockquote::before { content: "« "; color: var(--rouge-principal); }
.founder blockquote::after { content: " »"; color: var(--rouge-principal); }
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm); }

/* ── Garanties (inversion du risque) ─────────────────────────────────── */
.guarantees { display: grid; gap: 0.75rem; max-width: 1100px; margin: 0 auto; }
@media (min-width: 700px) { .guarantees { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .guarantees { grid-template-columns: repeat(5, 1fr); } }
.guarantee { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-md); border-radius: 16px; background: color-mix(in srgb, var(--rouge-tres-fonce) 45%, transparent); border: 1px solid color-mix(in srgb, var(--rouge-principal) 14%, transparent); }
.guarantee strong { font-size: 1rem; }
.guarantee span { font-size: 0.85rem; color: color-mix(in srgb, var(--blanc-casse) 66%, transparent); line-height: 1.5; }

/* ── Héro des pages fonctionnalités (texte + téléphone) ───────────────── */
.fx-hero { max-width: 1200px; margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-lg); display: grid; gap: var(--space-lg); align-items: center; position: relative; }
@media (min-width: 960px) { .fx-hero { grid-template-columns: 1.15fr 0.85fr; } }
.fx-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
.fx-hero .hx-copy { gap: var(--space-sm); }
.fx-hero-visual { position: relative; display: flex; justify-content: center; }
.fx-hero-visual::before { content: ""; position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(224,30,30,0.3), transparent 65%); filter: blur(40px); top: 10%; }
.fx-hero-visual .phone { --w: clamp(220px, 24vw, 290px); animation: float 7s ease-in-out infinite; }

/* ── Barre d'action collante sur mobile ──────────────────────────────── */
.sticky-cta {
  position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 70; display: flex; gap: 0.5rem; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.6rem 0.6rem 1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--noir-profond) 88%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--rouge-principal) 30%, transparent);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  transform: translateY(160%); transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
  font-size: 0.85rem; font-weight: 600;
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn-cta-primary { padding: 0.7rem 1rem; font-size: 0.85rem; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* ── Titres de section plus impactants ───────────────────────────────── */
.section-head h2 .accent, .hx h1 .accent, .fx-hero h1 .accent {
  background: linear-gradient(90deg, var(--rouge-principal), var(--rose-clair), var(--rouge-principal));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .phones .phone, .float-chip, .fx-hero-visual .phone, .hx-aura i, .marquee-track,
  .section-head h2 .accent, .hx h1 .accent, .fx-hero h1 .accent { animation: none; }
}

/* Halo derrière les héros simples (aide, FAQ, légal...) */
.page-hero { position: relative; }
.page-hero > :not(.hx-aura) { position: relative; z-index: 1; }
.page-hero .hx-aura { inset: -20% 0 0; }
.page-hero .hx-aura i:nth-child(1) { width: 420px; height: 420px; right: 30%; top: -10%; opacity: 0.35; }
.page-hero .hx-aura i:nth-child(2) { width: 300px; height: 300px; right: 10%; top: 20%; opacity: 0.3; }

/* ── VSL (section cinéma sous le hero) ───────────────────────────────── */
.vx { position: relative; padding: clamp(56px, 9vw, 120px) 20px clamp(40px, 6vw, 80px); max-width: 1180px; margin: 0 auto; text-align: center; }
.vx-head h2 { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.05; margin: 10px 0 12px; }
.vx-head .section-intro { max-width: 620px; margin: 0 auto; }
.vx-frame { position: relative; margin: clamp(28px, 4vw, 48px) auto 0; perspective: 1600px; }
.vx-glow { position: absolute; inset: -8% -4%; background: radial-gradient(ellipse at 50% 55%, rgba(224,30,30,0.38), transparent 62%); filter: blur(30px); pointer-events: none; animation: vxBreathe 6s ease-in-out infinite; }
@keyframes vxBreathe { 0%, 100% { opacity: 0.7; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.02); } }
.vx-player { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: clamp(14px, 2vw, 26px); background-size: cover; background-position: center; border: 1px solid rgba(224,30,30,0.45); box-shadow: 0 40px 120px -20px rgba(0,0,0,0.9), 0 0 0 1px rgba(245,237,237,0.06) inset; overflow: hidden; display: grid; place-items: center; cursor: pointer; transform: rotateX(6deg) scale(0.97); transition: transform 0.9s cubic-bezier(.2,.7,.2,1), box-shadow 0.6s; }
.vx-frame:hover .vx-player, .vx-frame.is-in .vx-player { transform: none; }
.vx-player::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,0,0,0.75)); pointer-events: none; }
.vx-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vx-play { position: relative; z-index: 1; width: clamp(70px, 9vw, 104px); height: clamp(70px, 9vw, 104px); border-radius: 999px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #E01E1E, #890404); box-shadow: 0 0 0 10px rgba(224,30,30,0.18), 0 0 60px rgba(224,30,30,0.6); animation: vxPulse 2.4s ease-in-out infinite; }
@keyframes vxPulse { 0%, 100% { box-shadow: 0 0 0 10px rgba(224,30,30,0.18), 0 0 60px rgba(224,30,30,0.55); } 50% { box-shadow: 0 0 0 22px rgba(224,30,30,0.06), 0 0 90px rgba(224,30,30,0.75); } }
.vx-duration { position: absolute; z-index: 1; right: 18px; bottom: 16px; font-weight: 800; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,237,237,0.85); }
.vx-player--soon { cursor: default; }
/* VSL auto-hébergée : la vidéo remplit le cadre, un gros bouton lecture tant qu'elle n'a pas démarré. */
.vx-player--video { cursor: default; background: #0D0000; }
.vx-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0D0000; display: block; }
.vx-player--video.is-playing::after { opacity: 0; }
.vx-player--video::after { transition: opacity 0.4s; }
.vx-start { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; color: inherit; font: inherit; }
.vx-start:focus-visible { outline: 3px solid #E01E1E; outline-offset: -6px; }
.vx-player--video.is-playing .vx-start { display: none; }
.vx-video::cue { font-family: Montserrat, system-ui, sans-serif; font-weight: 700; background: rgba(13,0,0,0.78); color: #F5EDED; line-height: 1.35; }
.vx-soon { position: absolute; z-index: 1; bottom: 18px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(13,0,0,0.75); border: 1px solid rgba(224,30,30,0.4); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: rgba(245,237,237,0.85); white-space: nowrap; }
.vx-choice { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 22px); margin-top: clamp(24px, 3.5vw, 40px); text-align: left; }
.vx-card { display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2.4vw, 28px); border-radius: 20px; text-decoration: none; color: var(--blanc-casse); background: rgba(23,1,1,0.75); border: 1px solid rgba(224,30,30,0.28); transition: transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.3s, box-shadow 0.3s; }
.vx-card:hover { transform: translateY(-4px); border-color: rgba(224,30,30,0.7); box-shadow: 0 0 60px rgba(224,30,30,0.25); }
.vx-card--hot { background: linear-gradient(160deg, rgba(224,30,30,0.22), rgba(23,1,1,0.9) 65%); border-color: rgba(224,30,30,0.6); }
.vx-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; color: #E01E1E; }
.vx-card strong { font-weight: 900; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.15; letter-spacing: -0.01em; }
.vx-card span:not(.vx-kicker) { font-size: 14px; color: rgba(245,237,237,0.6); }
.vx-card em { margin-top: 8px; font-style: normal; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: #E01E1E; display: inline-flex; align-items: center; gap: 6px; }
.vx-proof { margin: 18px auto 0; max-width: none; font-size: 13px; color: rgba(245,237,237,0.55); text-align: center; }
@media (max-width: 680px) { .vx-choice { grid-template-columns: 1fr; } .vx-player { transform: none; } }