/* ===================================================
       DESIGN SYSTEM — Cinematic Luxury Dark
       =================================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Palette — Mauve/Violet + Rose gradient */
      --ink: #0d0a1a;
      --surface: #150f28;
      --surface-2: #1e1535;
      --surface-3: #2a1f45;
      --accent: #e84393;
      --accent-2: #a855f7;
      --accent-glow: rgba(232, 67, 147, 0.35);
      --accent-soft: rgba(168, 85, 247, 0.08);
      --accent-border: rgba(168, 85, 247, 0.18);
      --gradient-accent: linear-gradient(135deg, #a855f7 0%, #e84393 50%, #fd288d 100%);
      --gradient-hero: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(232, 67, 147, 0.12) 50%, rgba(253, 40, 141, 0.08) 100%);
      --gold: #e8c46c;
      --text: #e8e6f0;
      --text-dim: #9896b0;
      --text-faint: #7a7890;
      --white: #ffffff;

      /* Typography */
      --font-display: 'Cormorant Garamond', 'Georgia', serif;
      --font-body: 'DM Sans', 'Segoe UI', sans-serif;

      /* Spacing */
      --space-xs: 8px;
      --space-sm: 16px;
      --space-md: 24px;
      --space-lg: 48px;
      --space-xl: 80px;
      --space-2xl: 120px;

      /* Layout */
      --max-w: 1180px;
      --radius: 16px;
      --radius-sm: 10px;
      --radius-pill: 100px;

      /* Transitions */
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --duration: 0.5s;
    }

    html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-font-smoothing: antialiased; }

    /* Isolate long sections during scroll to prevent repaints */
    .presentiel, .why-me, .pricing, .testimonials, .bio, .contact {
      contain: layout style paint;
    }

    body {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.7;
      color: var(--text);
      background: var(--ink);
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
      /* Barriere anti-telechargement grand public (drag, long-press iOS, selection) */
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      pointer-events: auto;
    }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    .wrap {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--space-md);
    }

    /* ===================================================
       GLOBAL TYPOGRAPHY
       =================================================== */
    h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; }

    .section-eyebrow {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: var(--space-sm);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .section-eyebrow::before {
      content: '';
      width: 32px;
      height: 1px;
      background: var(--accent);
    }

    .section-heading {
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      color: var(--white);
      margin-bottom: var(--space-md);
    }

    .section-sub {
      font-size: 1.05rem;
      color: var(--text-dim);
      max-width: 600px;
    }

    /* ===================================================
       BUTTONS
       =================================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.875rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: var(--radius-pill);
      padding: 14px 36px;
      transition: all var(--duration) var(--ease);
      position: relative;
      overflow: hidden;
    }

    .btn-primary {
      background: var(--gradient-accent);
      color: var(--white);
      box-shadow: 0 4px 24px var(--accent-glow);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 40px var(--accent-glow), 0 0 60px rgba(168, 85, 247, 0.15);
    }

    .btn-outline {
      border: 1.5px solid var(--accent-border);
      color: var(--text);
      background: transparent;
    }

    .btn-outline:hover {
      border-color: var(--accent);
      color: var(--white);
      background: var(--accent-soft);
    }

    .btn-ghost {
      color: var(--accent);
      padding: 8px 0;
      gap: 6px;
    }

    .btn-ghost svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s var(--ease);
    }

    .btn-ghost:hover svg { transform: translateX(4px); }

    /* ===================================================
       NAVBAR
       =================================================== */
    .nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 900;
      background: rgba(11, 11, 26, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      transition: background 0.3s;
      transform: translateZ(0);
      will-change: background;
    }

    .nav.scrolled { background: rgba(11, 11, 26, 0.96); }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
    }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
      font-size: 1.45rem;
      font-weight: 700;
      color: var(--white);
      letter-spacing: -0.01em;
    }

    .nav-logo-text em {
      font-style: italic;
      color: var(--accent);
      font-weight: 400;
    }

    .nav-logo-badge {
      position: relative;
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      border-radius: 50%;
      padding: 2px;
      background:
        conic-gradient(from var(--footer-logo-angle),
          var(--accent) 0deg,
          var(--accent-2) 90deg,
          var(--gold) 180deg,
          var(--accent-2) 270deg,
          var(--accent) 360deg);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 4px 14px rgba(232, 67, 147, 0.2),
        0 0 20px rgba(232, 67, 147, 0.1);
      animation:
        footer-logo-rotate 8s linear infinite,
        footer-logo-float 4.5s ease-in-out infinite;
      transition: transform 0.4s var(--ease);
    }

    .nav-logo:hover .nav-logo-badge {
      transform: scale(1.1) rotate(-4deg);
    }

    .nav-logo-badge img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      background: var(--ink);
    }

    @media (prefers-reduced-motion: reduce) {
      .nav-logo-badge {
        animation: none;
      }
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
    }

    .nav-links a {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-dim);
      transition: color 0.3s;
      position: relative;
    }

    .nav-links a:hover { color: var(--white); }

    .nav-links .dropdown { position: relative; }

    .nav-links .dropdown-trigger::after {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid currentColor;
      margin-left: 6px;
      vertical-align: middle;
    }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 12px);
      left: -16px;
      background: var(--surface-2);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius-sm);
      padding: 8px 0;
      min-width: 210px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: all 0.25s var(--ease);
    }

    /* Pont invisible entre le trigger et le menu : evite que le menu se ferme
       quand la souris traverse le gap de 12px (top: calc(100% + 12px)). */
    .dropdown-menu::before {
      content: '';
      position: absolute;
      top: -12px;
      left: 0;
      right: 0;
      height: 12px;
    }

    .dropdown:hover .dropdown-menu,
    .dropdown:focus-within .dropdown-menu {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .dropdown-menu a {
      display: block;
      padding: 10px 20px;
      font-size: 0.82rem;
    }

    .dropdown-menu a:hover {
      background: var(--accent-soft);
      color: var(--accent);
    }

    .nav-cta {
      background: var(--gradient-accent);
      color: var(--white) !important;
      padding: 8px 22px;
      border-radius: var(--radius-pill);
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 0.03em;
      transition: all 0.3s var(--ease);
    }

    .nav-cta:hover {
      box-shadow: 0 4px 20px var(--accent-glow), 0 0 40px rgba(168, 85, 247, 0.15);
      transform: translateY(-1px);
    }

    /* Burger */
    .burger {
      display: none;
      width: 28px;
      height: 20px;
      position: relative;
      z-index: 901;
      cursor: pointer;
    }

    .burger span {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--white);
      position: absolute;
      left: 0;
      transition: all 0.3s var(--ease);
    }

    .burger span:nth-child(1) { top: 0; }
    .burger span:nth-child(2) { top: 9px; }
    .burger span:nth-child(3) { top: 18px; }

    .burger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
    .burger.open span:nth-child(2) { opacity: 0; }
    .burger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

    /* ===================================================
       HERO — Cinematic stage curtain feel
       =================================================== */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      padding-top: 68px;
    }

    /* Slideshow background */
    .hero-slideshow {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background: var(--ink);
    }

    .hero-slideshow img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      opacity: 0;
      animation: heroSlide 30s infinite;
      filter: brightness(0.5);
      transform: scale(1.05) translateZ(0);
      will-change: opacity, transform;
      backface-visibility: hidden;
    }

    .hero-slideshow img:nth-child(1) { animation-delay: 0s; }
    .hero-slideshow img:nth-child(2) { animation-delay: 5s; }
    .hero-slideshow img:nth-child(3) { animation-delay: 10s; }
    .hero-slideshow img:nth-child(4) { animation-delay: 15s; }
    .hero-slideshow img:nth-child(5) { animation-delay: 20s; }
    .hero-slideshow img:nth-child(6) { animation-delay: 25s; }

    @keyframes heroSlide {
      0% { opacity: 0; transform: scale(1.08); }
      3% { opacity: 1; }
      16% { opacity: 1; transform: scale(1); }
      20% { opacity: 0; transform: scale(1.02); }
      100% { opacity: 0; }
    }

    /* Dark overlay on video — mauve/rose tint */
    .hero-video-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg,
          rgba(13, 10, 26, 0.7) 0%,
          rgba(30, 21, 53, 0.5) 40%,
          rgba(168, 85, 247, 0.08) 60%,
          rgba(13, 10, 26, 0.85) 100%
        );
    }

    /* Dramatic radial light */
    .hero-glow {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(168, 85, 247, 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 40% 50%, rgba(232, 67, 147, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 70% 30%, rgba(168, 85, 247, 0.08) 0%, transparent 60%);
      z-index: 2;
    }

    /* Sound wave lines */
    .hero-waves {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 200px;
      z-index: 3;
      opacity: 0.15;
      overflow: hidden;
    }

    .wave-line {
      position: absolute;
      bottom: 0;
      left: -10%;
      width: 120%;
      height: 100%;
      border: none;
      border-top: 1px solid var(--accent-2);
      border-radius: 50%;
      animation: wave-drift 6s ease-in-out infinite alternate;
    }

    .wave-line:nth-child(2) { bottom: 20px; opacity: 0.6; animation-delay: -1s; animation-duration: 7s; }
    .wave-line:nth-child(3) { bottom: 40px; opacity: 0.4; animation-delay: -2s; animation-duration: 8s; }
    .wave-line:nth-child(4) { bottom: 60px; opacity: 0.25; animation-delay: -3s; animation-duration: 9s; }

    @keyframes wave-drift {
      0% { transform: translateX(-2%) scaleY(1); }
      100% { transform: translateX(2%) scaleY(1.3); }
    }

    /* Floating orbs */
    .hero-orbs {
      position: absolute;
      inset: 0;
      z-index: 3;
    }

    .orb {
      position: absolute;
      border-radius: 50%;
      background: var(--accent);
      filter: blur(1px);
      opacity: 0;
      animation: orb-float 10s infinite ease-in-out;
    }

    @keyframes orb-float {
      0% { opacity: 0; transform: translateY(0) scale(0.8); }
      20% { opacity: 0.5; }
      50% { opacity: 0.3; transform: translateY(-100px) scale(1.1); }
      80% { opacity: 0.5; }
      100% { opacity: 0; transform: translateY(-200px) scale(0.8); }
    }

    .hero-content {
      position: relative;
      z-index: 5;
      padding: 0 var(--space-md);
      max-width: 800px;
    }

    .hero h1 {
      font-size: clamp(2.4rem, 5.2vw, 4.4rem);
      color: var(--white);
      margin-bottom: var(--space-md);
      letter-spacing: -0.02em;
      line-height: 1.05;
    }

    .hero h1 .em {
      color: var(--em-color, var(--accent-2));
      font-style: italic;
      font-weight: 400;
      transition: color 0.6s var(--ease);
    }

    /* Stack des 6 titres : superposes en grid, animes en relais avec le slideshow */
    .hero-titles {
      display: grid;
      margin-bottom: var(--space-md);
    }

    .hero-titles .hero-title {
      grid-area: 1 / 1;
      margin-bottom: 0;
      opacity: 0;
      animation: heroTitle 30s infinite;
      will-change: opacity, transform;
    }

    .hero-titles .hero-title:nth-child(1) { animation-delay: 0s; }
    .hero-titles .hero-title:nth-child(2) { animation-delay: 5s; }
    .hero-titles .hero-title:nth-child(3) { animation-delay: 10s; }
    .hero-titles .hero-title:nth-child(4) { animation-delay: 15s; }
    .hero-titles .hero-title:nth-child(5) { animation-delay: 20s; }
    .hero-titles .hero-title:nth-child(6) { animation-delay: 25s; }

    @keyframes heroTitle {
      0%   { opacity: 0; transform: translateY(12px); }
      4%   { opacity: 1; transform: translateY(0); }
      16%  { opacity: 1; transform: translateY(0); }
      20%  { opacity: 0; transform: translateY(-12px); }
      100% { opacity: 0; transform: translateY(-12px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-titles .hero-title { animation: none; opacity: 1; }
      .hero-titles .hero-title:not(:first-child) { display: none; }
    }

    .hero-sub {
      font-size: clamp(1.15rem, 2.2vw, 1.55rem);
      color: var(--white);
      margin: 0 auto;
      max-width: 640px;
      font-family: var(--font-display);
      font-weight: 400;
      font-style: italic;
      letter-spacing: 0.01em;
      line-height: 1.45;
      text-shadow: 0 2px 20px rgba(13, 10, 26, 0.6);
    }

    .hero-sub strong {
      font-style: normal;
      font-weight: 600;
      background: var(--gradient-accent);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-size: 0.82em;
      display: inline-block;
      margin-top: 6px;
    }

    /* Divider shape */
    .shape-divider {
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      z-index: 6;
    }

    .shape-divider svg { display: block; width: 100%; height: 70px; }
    .shape-divider .fill { fill: var(--surface); }

    /* ===================================================
       SECTION — PRESENTIEL
       =================================================== */
    .presentiel {
      background:
        linear-gradient(180deg, transparent 80%, var(--ink) 100%),
        var(--surface);
      padding: var(--space-2xl) 0;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    /* Garder le contenu au-dessus des faisceaux de lumiere */
    .presentiel .wrap { position: relative; z-index: 1; }

    /* Dust particles — ambiance poussiere dans projecteur de theatre */
    .presentiel .wrap::before,
    .presentiel .wrap::after {
      content: "";
      position: absolute;
      top: 40px;
      width: 3px;
      height: 3px;
      background: rgba(255, 255, 255, 0.75);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      filter: blur(0.5px);
    }

    /* Layer 1 — 5 dots cote gauche (zone faisceau rose), mouvement lent */
    .presentiel .wrap::before {
      left: 8%;
      box-shadow:
        40px 160px 0 rgba(255, 255, 255, 0.55),
        95px 320px 0 rgba(255, 215, 180, 0.50),
        20px 480px 0 rgba(255, 200, 200, 0.55),
        110px 640px 0 rgba(255, 255, 255, 0.50),
        55px 820px 0 rgba(255, 220, 200, 0.55);
      animation: dustFloatSlow 14s ease-in-out infinite;
    }

    /* Layer 2 — 3 dots cote droit (zone faisceau dore), plus rapide */
    .presentiel .wrap::after {
      right: 10%;
      box-shadow:
        -60px 220px 0 rgba(255, 220, 160, 0.55),
        -20px 460px 0 rgba(255, 255, 255, 0.50),
        -95px 720px 0 rgba(255, 200, 140, 0.55);
      animation: dustFloatFast 10s ease-in-out infinite;
      animation-delay: -2s;
    }

    @keyframes dustFloatSlow {
      0%, 100% { transform: translateY(0); opacity: 0.55; }
      50%      { transform: translateY(-36px); opacity: 0.95; }
    }

    @keyframes dustFloatFast {
      0%, 100% { transform: translateY(0); opacity: 0.45; }
      50%      { transform: translateY(-52px); opacity: 0.85; }
    }

    /* Faisceaux de lumiere type projecteurs — pseudo-elements, anime via transform/opacity (GPU) */
    .presentiel::before,
    .presentiel::after {
      content: "";
      position: absolute;
      top: -20%;
      width: 60%;
      height: 140%;
      pointer-events: none;
      z-index: 0;
      mix-blend-mode: screen;
      filter: blur(44px);
      will-change: transform, opacity;
      transform-origin: 50% 0%;
    }

    /* Faisceau gauche — accent mauve/rose (couleur de marque) */
    .presentiel::before {
      left: -12%;
      background: radial-gradient(
        ellipse 42% 50% at 50% 0%,
        rgba(253, 40, 141, 0.55) 0%,
        rgba(253, 40, 141, 0.22) 32%,
        rgba(253, 40, 141, 0.08) 58%,
        transparent 78%
      );
      animation: spotlightSweepLeft 14s ease-in-out infinite;
    }

    /* Faisceau droit — accent dore, leger decalage de phase pour le naturel */
    .presentiel::after {
      right: -12%;
      background: radial-gradient(
        ellipse 42% 50% at 50% 0%,
        rgba(255, 215, 140, 0.48) 0%,
        rgba(255, 190, 110, 0.20) 32%,
        rgba(255, 160, 80, 0.08) 58%,
        transparent 78%
      );
      animation: spotlightSweepRight 18s ease-in-out infinite;
      animation-delay: -3s;
    }

    @keyframes spotlightSweepLeft {
      0%, 100% { transform: rotate(-18deg) translateX(-4%); opacity: 0.45; }
      50%      { transform: rotate(8deg)   translateX(6%);  opacity: 0.70; }
    }

    @keyframes spotlightSweepRight {
      0%, 100% { transform: rotate(18deg)  translateX(4%);  opacity: 0.40; }
      50%      { transform: rotate(-6deg)  translateX(-6%); opacity: 0.65; }
    }

    /* Benefit-items — hover feedback (glide + icon glow) */
    .presentiel .benefit-item {
      padding: 6px 10px 6px 0;
      border-radius: var(--radius-sm);
      transition: transform 0.35s var(--ease), background-color 0.35s var(--ease);
    }

    .presentiel .benefit-item:hover {
      transform: translateX(4px);
      background: linear-gradient(90deg, rgba(253, 40, 141, 0.06), transparent 70%);
    }

    .presentiel .benefit-item:hover .benefit-icon {
      background: var(--accent-soft);
      border-color: var(--accent);
      box-shadow: 0 0 18px rgba(253, 40, 141, 0.35);
    }

    .presentiel .benefit-icon {
      transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease);
    }

    /* Stagger reveal des benefit-items (sans toucher au HTML) */
    .presentiel .reveal.from-left .benefit-item {
      opacity: 0;
      transform: translateX(-16px);
      transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), background-color 0.35s var(--ease);
    }

    .presentiel .reveal.from-left.visible .benefit-item { opacity: 1; transform: translateX(0); }
    .presentiel .reveal.from-left.visible .benefit-item:nth-child(1) { transition-delay: 0.15s; }
    .presentiel .reveal.from-left.visible .benefit-item:nth-child(2) { transition-delay: 0.28s; }
    .presentiel .reveal.from-left.visible .benefit-item:nth-child(3) { transition-delay: 0.41s; }
    .presentiel .reveal.from-left.visible .benefit-item:nth-child(4) { transition-delay: 0.54s; }

    /* Image frame — hover glow bi-couleur + zoom subtil (Liquid Glass) */
    .presentiel .img-frame {
      transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
    }

    .presentiel .img-frame img {
      transition: transform 0.8s var(--ease);
      display: block;
    }

    .presentiel .img-frame:hover {
      transform: translateY(-4px);
      box-shadow:
        0 20px 60px -20px rgba(253, 40, 141, 0.45),
        0 20px 80px -30px rgba(255, 200, 120, 0.35);
    }

    .presentiel .img-frame:hover img { transform: scale(1.03); }

    /* Barre de lumiere qui traverse l'image au hover (shimmer) */
    .presentiel .img-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        115deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 215, 140, 0.18) 50%,
        transparent 60%,
        transparent 100%
      );
      transform: translateX(-100%);
      transition: transform 0.9s var(--ease);
      pointer-events: none;
      z-index: 2;
      border-radius: inherit;
    }

    .presentiel .img-frame:hover::before { transform: translateX(100%); }

    /* CTA "J'ai envie d'essayer" — breathing glow, attire l'oeil sans agressivite */
    .presentiel .btn-primary {
      animation: ctaBreath 3.2s ease-in-out infinite;
    }

    @keyframes ctaBreath {
      0%, 100% { box-shadow: 0 4px 24px var(--accent-glow); }
      50%      { box-shadow: 0 4px 24px var(--accent-glow), 0 0 36px rgba(253, 40, 141, 0.35); }
    }

    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      align-items: center;
    }

    .benefit-list {
      margin: var(--space-md) 0 var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .benefit-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .benefit-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }

    .benefit-icon svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

    .benefit-text {
      font-size: 0.95rem;
      color: var(--text);
      line-height: 1.5;
    }

    .benefit-text strong { color: var(--white); }

    .info-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius-sm);
      padding: 14px 20px;
      margin-top: var(--space-md);
      font-size: 0.9rem;
      color: var(--text);
    }

    .info-badge strong { color: var(--gold); }

    /* Placeholder image card */
    .img-frame {
      border-radius: var(--radius);
      overflow: hidden;
      position: relative;
      border: 1px solid var(--accent-border);
    }

    .img-placeholder {
      width: 100%;
      aspect-ratio: 4 / 5;
      background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 50%, rgba(253, 40, 141, 0.06) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-dim);
      font-size: 0.85rem;
      font-style: italic;
      text-align: center;
      padding: var(--space-md);
    }

    .img-placeholder.landscape { aspect-ratio: 16 / 10; }
    .img-placeholder.square { aspect-ratio: 1; }

    .img-frame::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.3);
      pointer-events: none;
    }

    /* Watermark discret — survit aux captures d'ecran, marque propriete Coralie */
    .img-watermark {
      position: absolute;
      bottom: 12px;
      right: 14px;
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      color: rgba(255, 255, 255, 0.6);
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
      pointer-events: none;
      z-index: 2;
      user-select: none;
      -webkit-user-select: none;
    }

    /* ===================================================
       SECTION — POURQUOI ME CHOISIR (WHY ME — handoff 2026-04-21)
       =================================================== */
    .why-me {
      padding: var(--space-2xl) 0;
      position: relative;
      overflow: hidden;
    }
    .why-me-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
    .why-me-bg img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 30%;
      opacity: 0.42; filter: saturate(0.85) brightness(1.08);
    }
    .why-me-bg::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg,
        var(--ink) 0%,
        rgba(13,10,26,0.45) 25%,
        rgba(13,10,26,0.45) 75%,
        var(--ink) 100%);
    }
    .why-me .wrap { position: relative; z-index: 1; }
    .why-me-header { text-align: center; margin-bottom: var(--space-xl); }
    .why-me-header .section-eyebrow { justify-content: center; }
    .why-me-header .section-sub { margin: 0 auto; }
    .why-me-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .why-me-col {
      padding: 32px 22px;
      background: linear-gradient(180deg, rgba(30,21,53,0.7), rgba(21,15,40,0.5));
      border: 1px solid rgba(168,85,247,0.18);
      border-radius: var(--radius);
      transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.5s;
    }
    .why-me-col:hover {
      transform: translateY(-4px);
      border-color: rgba(232,67,147,0.3);
      box-shadow: 0 20px 40px -20px rgba(168,85,247,0.3);
    }
    .why-me-icon {
      width: 52px; height: 52px;
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      color: var(--accent);
      margin-bottom: 20px;
    }
    .why-me-icon svg {
      width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .why-me-col h3 {
      font-family: var(--font-display);
      font-size: 24px; color: var(--white);
      font-weight: 600; margin-bottom: 8px;
      letter-spacing: -0.01em;
    }
    .why-me-col .kicker {
      font-size: 13px; color: var(--accent);
      font-weight: 500; margin-bottom: 14px;
      text-transform: uppercase; letter-spacing: 0.1em;
    }
    .why-me-col p { font-size: 14px; color: var(--text-dim); line-height: 1.65; }

    /* ===================================================
       PRICING — Glass morphism cards
       =================================================== */
    .pricing {
      background: var(--surface);
      padding: var(--space-2xl) 0;
      position: relative;
    }

    /* Ambient glow behind cards */
    .pricing-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(168, 85, 247, 0.25) 0%, rgba(232, 67, 147, 0.1) 40%, transparent 70%);
      filter: blur(80px);
      opacity: 0.3;
      pointer-events: none;
    }

    .pricing-header {
      text-align: center;
      margin-bottom: var(--space-xl);
      position: relative;
      z-index: 1;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-md);
      position: relative;
      z-index: 1;
    }

    .price-card {
      background: rgba(22, 22, 58, 0.6);
      backdrop-filter: blur(16px);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius);
      padding: var(--space-lg) var(--space-md);
      display: flex;
      flex-direction: column;
      transition: all var(--duration) var(--ease);
      position: relative;
      overflow: hidden;
    }

    .price-card:hover {
      transform: translateY(-6px);
      border-color: rgba(253, 40, 141, 0.3);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(253, 40, 141, 0.1);
    }

    .price-card:active { transform: translateY(-2px); }

    .price-card.featured {
      border-color: var(--accent-2);
      background: rgba(168, 85, 247, 0.05);
    }

    .price-card.featured::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gradient-accent);
    }

    .price-badge {
      position: absolute;
      top: 16px;
      right: 16px;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 4px 12px;
      border-radius: var(--radius-pill);
    }

    .price-badge.popular {
      background: var(--gradient-accent);
      color: var(--white);
    }

    .price-badge.unavailable {
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-dim);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .price-name {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 4px;
    }

    .price-tagline {
      font-size: 0.85rem;
      color: var(--text-dim);
      margin-bottom: var(--space-md);
      font-style: italic;
    }

    .price-amount {
      font-family: var(--font-display);
      font-size: 2.8rem;
      font-weight: 700;
      color: var(--white);
      line-height: 1;
      margin-bottom: 4px;
    }

    .price-amount .currency { font-size: 1.4rem; vertical-align: super; margin-right: 2px; color: var(--accent-2); }
    .price-amount .period { font-size: 0.85rem; font-weight: 400; color: var(--text-dim); }

    .price-detail {
      font-size: 0.8rem;
      color: var(--text-dim);
      margin-bottom: var(--space-md);
      padding-bottom: var(--space-md);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .price-features {
      flex: 1;
      margin-bottom: var(--space-md);
    }

    .price-features li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 0;
      font-size: 0.88rem;
      color: var(--text-dim);
    }

    .price-features li::before {
      content: '';
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      margin-top: 2px;
      border-radius: 50%;
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fd288d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 10px;
    }

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

    .price-card .btn.disabled {
      opacity: 0.4;
      pointer-events: none;
      background: rgba(255, 255, 255, 0.06);
      box-shadow: none;
      color: var(--text-dim);
    }

    /* ===================================================
       TESTIMONIALS
       =================================================== */
    .testimonials {
      background: var(--ink);
      padding: var(--space-2xl) 0;
    }

    .testimonials-header {
      text-align: center;
      margin-bottom: var(--space-xl);
    }

    .testi-slider {
      position: relative;
      overflow: hidden;
      /* Fade edges so cards appear/disappear smoothly */
      mask-image: linear-gradient(to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%);
      -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%);
    }

    .testi-track {
      display: flex;
      gap: var(--space-md);
      width: fit-content;
      animation: marqueeScroll 60s linear infinite;
      will-change: transform;
    }

    .testi-track:hover { animation-play-state: paused; }

    .testi-card {
      flex: 0 0 340px;
      padding: 0;
    }

    @keyframes marqueeScroll {
      from { transform: translateX(0); }
      to { transform: translateX(calc(-50% - var(--space-md) / 2)); }
    }

    .testi-inner {
      background: var(--surface);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius);
      padding: var(--space-md) var(--space-md) var(--space-md);
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .testi-stars {
      color: var(--gold);
      font-size: 0.9rem;
      letter-spacing: 2px;
      margin-bottom: var(--space-sm);
    }

    .testi-quote {
      font-family: var(--font-display);
      font-size: 1rem;
      font-style: italic;
      color: var(--text);
      line-height: 1.6;
      flex: 1;
      margin-bottom: var(--space-md);
    }

    .testi-author {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: var(--space-sm);
      border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .testi-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--gradient-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      color: var(--white);
    }

    .testi-name {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--white);
    }

    /* ===================================================
       ACCESSIBILITY & REDUCED MOTION
       =================================================== */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
      .orb { display: none; }
      .wave-line { animation: none; }
      .testi-track { transition: none; }
    }

    /* Focus states for keyboard navigation */
    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .btn:focus-visible { outline-offset: 4px; }

    /* Cursor pointer on all interactive elements */
    .reason-card,
    .price-card,
    .testi-inner,
    .hero-tab,
    .social-icon,
    .img-frame { cursor: pointer; }

    /* Skip to content link for accessibility */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 16px;
      background: var(--accent);
      color: var(--white);
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      z-index: 9999;
      font-size: 0.85rem;
      font-weight: 600;
    }

    .skip-link:focus { top: 8px; }

    /* ===================================================
       BIO COACH (handoff 2026-04-21)
       =================================================== */
    .bio {
      padding: var(--space-2xl) 0;
      background: linear-gradient(180deg, var(--ink), var(--surface));
    }
    .bio-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: var(--space-2xl);
      align-items: center;
    }
    .credential-list {
      margin: var(--space-md) 0 var(--space-lg);
      display: flex; flex-direction: column; gap: 10px;
    }
    .credential {
      display: flex; align-items: center; gap: 12px;
      font-size: 14px; color: var(--text-dim);
    }
    .credential-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--accent); flex-shrink: 0;
    }
    .stat-row {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 16px; padding: 24px;
      border-top: 1px solid rgba(168,85,247,0.18);
      border-bottom: 1px solid rgba(168,85,247,0.18);
    }
    .stat { text-align: center; }
    .stat-number {
      font-family: var(--font-display);
      font-size: 34px; font-weight: 500;
      color: var(--white); line-height: 1;
      background: var(--gradient-accent);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .stat-label {
      font-size: 10px; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--text-faint);
      margin-top: 6px;
    }

    /* ===================================================
       FOOTER
       =================================================== */
    .footer {
      background: var(--ink);
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      padding: var(--space-lg) 0 var(--space-md);
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--space-md);
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    @property --footer-logo-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    .footer-logo-badge {
      position: relative;
      width: 84px;
      height: 84px;
      flex-shrink: 0;
      border-radius: 50%;
      padding: 3px;
      background:
        conic-gradient(from var(--footer-logo-angle),
          var(--accent) 0deg,
          var(--accent-2) 90deg,
          var(--gold) 180deg,
          var(--accent-2) 270deg,
          var(--accent) 360deg);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 8px 24px rgba(232, 67, 147, 0.25),
        0 0 40px rgba(232, 67, 147, 0.12);
      animation:
        footer-logo-rotate 8s linear infinite,
        footer-logo-float 4.5s ease-in-out infinite;
      transition: transform 0.4s var(--ease);
    }

    .footer-logo-badge::after {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 67, 147, 0.35), transparent 70%);
      opacity: 0;
      z-index: -1;
      transition: opacity 0.5s var(--ease);
      animation: footer-logo-pulse 3.5s ease-in-out infinite;
    }

    .footer-logo-badge:hover {
      transform: scale(1.08) rotate(-3deg);
    }

    .footer-logo-badge:hover::after {
      opacity: 1;
    }

    .footer-logo-img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      background: var(--ink);
    }

    @keyframes footer-logo-rotate {
      to { --footer-logo-angle: 360deg; }
    }

    @keyframes footer-logo-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -6px; }
    }

    @keyframes footer-logo-pulse {
      0%, 100% { opacity: 0.15; transform: scale(0.95); }
      50% { opacity: 0.4; transform: scale(1.05); }
    }

    @media (prefers-reduced-motion: reduce) {
      .footer-logo-badge,
      .footer-logo-badge::after {
        animation: none;
      }
    }

    .footer-brand-text {
      display: flex;
      flex-direction: column;
    }

    .footer-logo {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--white);
    }

    .footer-logo em { font-style: italic; color: var(--accent); font-weight: 400; }

    .footer-tagline {
      font-size: 0.75rem;
      color: var(--text-dim);
      margin-top: 4px;
    }

    .footer-links {
      display: flex;
      gap: var(--space-md);
    }

    .footer-links a {
      font-size: 0.8rem;
      color: var(--text-dim);
      transition: color 0.3s;
    }

    .footer-links a:hover { color: var(--accent); }

    .footer-social {
      display: flex;
      gap: 12px;
    }

    .social-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-dim);
      transition: all 0.3s var(--ease);
      position: relative;
      overflow: hidden;
    }

    .social-icon svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
      position: relative;
      z-index: 1;
      transition: transform 0.3s var(--ease), color 0.3s;
    }

    .social-icon::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--gradient-accent);
      opacity: 0;
      transform: scale(0);
      transition: all 0.35s var(--ease);
    }

    .social-icon:hover {
      border-color: transparent;
      color: var(--white);
      box-shadow: 0 4px 20px var(--accent-glow);
      transform: translateY(-3px);
    }

    .social-icon:hover::before {
      opacity: 1;
      transform: scale(1);
    }

    .social-icon:hover svg { transform: scale(1.15); }

    .social-icon:active {
      transform: translateY(-1px) scale(0.95);
    }

    /* Brand colors on hover */
    .social-icon--ig:hover { box-shadow: 0 4px 20px rgba(228, 64, 95, 0.4); }
    .social-icon--ig:hover::before { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
    .social-icon--yt:hover { box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3); }
    .social-icon--yt:hover::before { background: #FF0000; }
    .social-icon--tk:hover { box-shadow: 0 4px 20px rgba(0, 242, 234, 0.3); }
    .social-icon--tk:hover::before { background: linear-gradient(135deg, #00f2ea, #ff0050); }
    .social-icon--fb:hover { box-shadow: 0 4px 20px rgba(24, 119, 242, 0.3); }
    .social-icon--fb:hover::before { background: #1877F2; }

    /* ===================================================
       SECTION — CONTACT
       =================================================== */
    .contact {
      background:
        linear-gradient(180deg, transparent 85%, var(--ink) 100%),
        var(--surface);
      padding: var(--space-2xl) 0;
      position: relative;
      overflow: hidden;
    }

    .contact::before {
      content: '';
      position: absolute;
      bottom: -150px;
      left: -150px;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 67, 147, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
      align-items: start;
    }

    .contact-left { position: relative; z-index: 1; }

    .contact-photo {
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--accent-border);
      margin-bottom: var(--space-lg);
      position: relative;
      transition: all 0.5s var(--ease);
      cursor: pointer;
    }

    .contact-photo img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: center 25%;
      transition: transform 1.2s var(--ease), filter 0.5s;
      will-change: transform;
      display: block;
    }

    /* Animated gradient border — pulsing glow */
    .contact-photo-glow {
      position: absolute;
      inset: -2px;
      border-radius: var(--radius);
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--accent-2) 60deg,
        var(--accent) 120deg,
        transparent 180deg,
        transparent 360deg
      );
      opacity: 0;
      animation: photoGlowRotate 8s linear infinite;
      z-index: 0;
      filter: blur(8px);
      transition: opacity 0.5s;
    }

    @keyframes photoGlowRotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Gradient overlay that appears on hover */
    .contact-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(168, 85, 247, 0.0) 0%, rgba(232, 67, 147, 0.25) 100%);
      opacity: 0;
      transition: opacity 0.5s var(--ease);
      pointer-events: none;
    }

    .contact-photo:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 60px rgba(232, 67, 147, 0.25);
      border-color: var(--accent);
    }

    .contact-photo:hover img {
      transform: scale(1.06);
    }

    .contact-photo:hover .contact-photo-glow { opacity: 0.6; }
    .contact-photo:hover .contact-photo-overlay { opacity: 1; }

    /* Floating orbs around contact section */
    .contact-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(40px);
      opacity: 0.4;
      animation: contactFloat 12s ease-in-out infinite;
      will-change: transform;
    }

    .contact-orb-1 {
      width: 200px;
      height: 200px;
      background: var(--accent);
      top: 10%;
      right: -80px;
      animation-delay: 0s;
    }

    .contact-orb-2 {
      width: 280px;
      height: 280px;
      background: var(--accent-2);
      bottom: 5%;
      left: -100px;
      animation-delay: -6s;
      opacity: 0.3;
    }

    @keyframes contactFloat {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, -40px) scale(1.1); }
      66% { transform: translate(-20px, 30px) scale(0.95); }
    }

    .contact-info-card {
      background: var(--surface-2);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius-sm);
      padding: var(--space-md);
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
      transition: all 0.3s var(--ease);
      cursor: pointer;
    }

    .contact-info-card:hover {
      border-color: var(--accent);
      background: var(--accent-soft);
      transform: translateX(4px);
    }

    .contact-info-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .contact-info-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--accent);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .contact-info-label {
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-faint);
      margin-bottom: 2px;
    }

    .contact-info-value {
      font-size: 0.95rem;
      color: var(--white);
    }

    .contact-socials {
      display: flex;
      gap: 12px;
      margin-top: var(--space-md);
    }

    /* Form */
    .contact-form {
      background: rgba(22, 22, 58, 0.5);
      backdrop-filter: blur(16px);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius);
      padding: var(--space-lg);
      position: relative;
      z-index: 1;
    }

    .contact-form h3 {
      font-family: var(--font-display);
      font-size: 1.6rem;
      color: var(--white);
      margin-bottom: 4px;
    }

    .contact-form .form-sub {
      font-size: 0.85rem;
      color: var(--text-dim);
      margin-bottom: var(--space-lg);
    }

    .form-group {
      margin-bottom: var(--space-sm);
    }

    .form-group label {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin-bottom: 6px;
    }

    .form-group label .req { color: var(--accent); }

    .form-group input,
    .form-group textarea {
      width: 100%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: var(--white);
      transition: all 0.3s var(--ease);
      outline: none;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: var(--text-faint);
    }

    .form-group input:focus,
    .form-group textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(232, 67, 147, 0.1);
      background: rgba(255, 255, 255, 0.06);
    }

    .form-group textarea {
      min-height: 100px;
      resize: vertical;
    }

    .contact-form .btn { width: 100%; margin-top: var(--space-sm); }

    .contact-form .btn[disabled] {
      opacity: 0.6;
      cursor: wait;
      pointer-events: none;
    }

    /* Honeypot anti-spam — invisible pour les humains, les bots le remplissent */
    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .form-message {
      margin-top: var(--space-sm);
      padding: 12px 16px;
      border-radius: 10px;
      font-size: 0.875rem;
      line-height: 1.5;
      display: none;
    }

    .form-message.is-visible { display: block; }

    .form-message.is-success {
      background: rgba(34, 197, 94, 0.12);
      border: 1px solid rgba(34, 197, 94, 0.35);
      color: #86efac;
    }

    .form-message.is-error {
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.35);
      color: #fca5a5;
    }

    .footer-bottom {
      text-align: center;
      margin-top: var(--space-md);
      padding-top: var(--space-md);
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      font-size: 0.75rem;
      color: var(--text-dim);
    }

    /* ===================================================
       ANIMATIONS — Scroll reveal
       =================================================== */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    }

    .reveal.from-left { transform: translateX(-50px) translateY(0); }
    .reveal.from-right { transform: translateX(50px) translateY(0); }

    .reveal.visible {
      opacity: 1;
      transform: translate(0);
    }

    /* Stagger children */
    .stagger > * { transition-delay: calc(var(--i, 0) * 0.1s); }

    /* ===================================================
       RESPONSIVE
       =================================================== */
    @media (max-width: 1024px) {
      .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
      .why-me-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; gap: var(--space-md); }
    }

    @media (max-width: 768px) {
      .nav-links {
        position: fixed;
        inset: 0;
        height: 100dvh;
        background: var(--ink);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 96px var(--space-lg) var(--space-2xl);
        gap: 0;
        border-left: none;
        transform: translateX(100%);
        transition: transform 0.4s var(--ease);
        z-index: 899;
        overflow-y: auto;
      }

      .nav-links.open { transform: translateX(0); }

      .nav-links > li > a {
        display: block;
        padding: 18px 4px;
        font-size: 18px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
      }

      .nav-links > li.dropdown > .dropdown-trigger {
        color: var(--text-dim);
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1.8px;
        font-weight: 600;
        padding: 22px 4px 8px;
        border-bottom: none;
        cursor: default;
      }

      .nav-links .dropdown-menu {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 12px var(--space-md);
        margin: 0;
        display: block;
      }

      .nav-links .dropdown-menu li a {
        display: block;
        padding: 14px 0;
        font-size: 17px;
        border-bottom: 1px solid rgba(255,255,255,0.04);
      }

      .nav-links .nav-cta {
        margin: var(--space-md) auto 0;
        align-self: center;
        text-align: center;
        border-bottom: none !important;
        min-width: 200px;
      }

      .burger { display: block; }

      .split, .bio-grid, .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
      }

      /* Faisceaux presentiel — compacts sur mobile (evite chevauchement) */
      .presentiel::before,
      .presentiel::after {
        width: 80%;
        top: -10%;
        height: 120%;
        filter: blur(32px);
      }

      .presentiel::before { left: -25%; }
      .presentiel::after  { right: -25%; }

      /* CTA breath reduit sur mobile (eviter distraction) */
      .presentiel .btn-primary { animation-duration: 4.5s; }

      /* Hero tab breath ralenti sur mobile */
      .hero-tab.active { animation-duration: 5s; }

      /* Dust particles simplifies sur mobile : 3 dots centres, layer 2 masque */
      .presentiel .wrap::before {
        left: 50%;
        margin-left: -1.5px;
        box-shadow:
          -40px 200px 0 rgba(255, 255, 255, 0.55),
          25px 420px 0 rgba(255, 220, 180, 0.55),
          -30px 640px 0 rgba(255, 255, 255, 0.50);
      }

      .presentiel .wrap::after { display: none; }

      .contact-form { padding: var(--space-md); }

      .hero h1 { font-size: clamp(2rem, 8vw, 3rem); }

      .hero-slideshow img {
        object-position: center 10%;
      }

      /* Why-me mobile compact */
      .why-me { padding: var(--space-xl) 0; }
      .why-me-bg img {
        object-position: 32% 45%;
        filter: grayscale(0.1) brightness(0.6);
      }
      .why-me-bg::after {
        background:
          linear-gradient(180deg,
            rgba(13, 10, 26, 0.72) 0%,
            rgba(13, 10, 26, 0.38) 50%,
            rgba(13, 10, 26, 0.72) 100%
          );
      }
      .why-me-header { margin-bottom: var(--space-lg); }
      .why-me-header .section-heading { font-size: 1.8rem; }
      .why-me-grid { gap: 12px; max-width: 100%; }
      .why-me-col {
        display: grid;
        grid-template-columns: 52px 1fr;
        grid-template-rows: auto auto;
        column-gap: 14px;
        row-gap: 2px;
        text-align: left;
        padding: 16px 18px;
      }
      .why-me-icon {
        grid-row: 1 / 3;
        width: 44px;
        height: 44px;
        margin: 0;
        align-self: center;
      }
      .why-me-icon svg { width: 20px; height: 20px; }
      .why-me-col h3 { font-size: 0.7rem; margin-bottom: 0; align-self: end; }
      .why-me-col .kicker { font-size: 0.95rem; margin-bottom: 0; align-self: start; }
      .why-me-col p {
        grid-column: 1 / -1;
        font-size: 0.85rem;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255,255,255,0.06);
        line-height: 1.6;
      }

      /* Bio : padding compacté + listing aéré */
      .bio { padding: var(--space-xl) 0; }
      .bio-grid { gap: var(--space-md); }
      .credential-list { margin-top: var(--space-md); gap: 10px; }
      .credential { font-size: 0.85rem; }

      /* Stats : 3 colonnes compactes sur mobile (handoff 3 stats) */
      .stat-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 20px 12px;
      }
      .stat-number { font-size: 28px; }
      .stat-label { font-size: 0.7rem; }

      /* Contact : icônes sociales centrées sur mobile */
      .contact-socials {
        justify-content: center;
        margin-top: var(--space-lg);
        gap: 14px;
      }

      /* Contact-info-card : plein-largeur cohérent */
      .contact-info-card { width: 100%; }

      .footer-inner { flex-direction: column; text-align: center; }
    }

    /* ===================================================
       SECTION — METHODE (handoff 2026-04-21)
       =================================================== */
    .methode {
      padding: var(--space-2xl) 0;
      background: var(--ink);
      position: relative;
      overflow: hidden;
    }
    .methode::before {
      content: ''; position: absolute; top: 20%; left: -10%;
      width: 40%; height: 60%;
      background: radial-gradient(circle, rgba(168,85,247,0.1), transparent 60%);
      filter: blur(80px); pointer-events: none;
      z-index: 1;
    }
    .methode-bg {
      position: absolute; inset: 0; z-index: 0;
      overflow: hidden;
    }
    .methode-bg img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center 30%;
      opacity: 0.42; filter: saturate(0.85) brightness(1.08);
    }
    .methode-bg::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg,
        var(--ink) 0%,
        rgba(13,10,26,0.45) 25%,
        rgba(13,10,26,0.45) 75%,
        var(--ink) 100%);
    }
    .methode .wrap { position: relative; z-index: 2; }
    .methode-header { text-align: center; margin-bottom: var(--space-xl); }
    .methode-header .section-eyebrow { justify-content: center; }
    .methode-header .section-sub { margin: 0 auto; }

    .methode-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      counter-reset: step;
      position: relative;
      z-index: 1;
    }
    .methode-step {
      position: relative;
      padding: 32px 24px 28px;
      background: linear-gradient(180deg, rgba(30,21,53,0.6), rgba(21,15,40,0.3));
      border: 1px solid rgba(168,85,247,0.15);
      border-radius: var(--radius);
      transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.5s;
      overflow: hidden;
    }
    .methode-step::before {
      counter-increment: step;
      content: "0" counter(step);
      position: absolute; top: 18px; right: 22px;
      font-family: var(--font-display); font-style: italic;
      font-size: 46px; font-weight: 500;
      color: transparent;
      -webkit-text-stroke: 1px rgba(168,85,247,0.3);
      line-height: 1;
      transition: color 0.3s, -webkit-text-stroke 0.3s;
    }
    .methode-step:hover {
      transform: translateY(-4px);
      border-color: rgba(232,67,147,0.4);
      box-shadow: 0 20px 40px -20px rgba(232,67,147,0.25);
    }
    .methode-step:hover::before {
      color: var(--accent); -webkit-text-stroke: 0;
    }
    .methode-step h3 {
      font-family: var(--font-display);
      font-size: 24px; font-weight: 600;
      color: var(--white); margin-top: 60px; margin-bottom: 12px;
      letter-spacing: -0.01em;
    }
    .methode-step p { font-size: 14px; color: var(--text-dim); line-height: 1.65; }

    /* ===================================================
       CONTACT — enrichissements handoff (Ken Burns, form-card, fine-print)
       =================================================== */
    .contact.contact-page { padding: 100px 0 60px; min-height: auto; }

    .contact-bg {
      position: absolute; inset: 0; z-index: 0;
      overflow: hidden;
    }
    .contact-bg img {
      width: 100%; height: 100%; object-fit: cover;
      object-position: center 30%;
      animation: contactKenBurns 30s ease-in-out infinite alternate;
    }
    @keyframes contactKenBurns {
      0%   { transform: scale(1.05); }
      100% { transform: scale(1.15) translate(-2%, -1%); }
    }
    .contact-bg::after {
      content: ''; position: absolute; inset: 0;
      background:
        linear-gradient(to right, rgba(13,10,26,0.85) 0%, rgba(13,10,26,0.55) 45%, rgba(13,10,26,0.25) 100%),
        linear-gradient(to bottom, rgba(13,10,26,0.4), rgba(13,10,26,0.7));
    }
    .contact-bg-glow {
      position: absolute; top: 10%; right: -10%;
      width: 60%; height: 80%;
      background: radial-gradient(circle, rgba(168,85,247,0.35), transparent 60%);
      filter: blur(100px); mix-blend-mode: screen;
      z-index: 1; pointer-events: none;
    }
    .contact-orb-float {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232,67,147,0.2), transparent 70%);
      filter: blur(40px);
      z-index: 1;
      animation: orbFloat 14s ease-in-out infinite;
    }
    .contact-orb-float.o1 { width: 280px; height: 280px; top: 15%; left: 5%; }
    .contact-orb-float.o2 { width: 360px; height: 360px; bottom: 10%; right: 10%; animation-delay: -5s; animation-duration: 18s; }
    @keyframes orbFloat {
      0%, 100% { transform: translate(0, 0); }
      33% { transform: translate(30px, -40px); }
      66% { transform: translate(-20px, 30px); }
    }

    /* Form card flottante (nouveau) */
    .contact-form-card {
      position: relative;
      padding: 40px 36px;
      background: rgba(21,15,40,0.82);
      backdrop-filter: blur(24px);
      border: 1px solid rgba(168,85,247,0.25);
      border-radius: 24px;
      box-shadow:
        0 40px 80px -20px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.03) inset;
    }
    .contact-form-card::before {
      content: ''; position: absolute;
      top: -1px; left: 20%; right: 20%; height: 1px;
      background: linear-gradient(to right, transparent, rgba(232,67,147,0.6), transparent);
    }
    .form-label-top {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 6px 14px; margin-bottom: 16px;
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius-pill);
      font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--accent);
    }
    .form-label-top::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent); animation: pulse 1.8s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.3); }
    }
    .contact-form-card h3 {
      font-family: var(--font-display);
      font-size: 32px; font-weight: 600;
      color: var(--white); margin-bottom: 6px;
      letter-spacing: -0.01em;
    }
    .contact-fine-print {
      margin-top: 20px;
      font-size: 12px; color: var(--text-faint);
      text-align: center;
      line-height: 1.5;
    }
    .contact-fine-print a { color: var(--accent); }

    /* ===================================================
       RESPONSIVE — methode + contact-page
       =================================================== */
    @media (max-width: 1024px) {
      .methode-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .methode-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .contact.contact-page { padding: 80px 0 40px; }
      .contact-form-card { padding: 28px 22px; }
      .contact-form-card h3 { font-size: 26px; }
    }

    /* ===================================================
       BOUTIQUE TEASER (remplace PRICING — 2026-04-21)
       =================================================== */
    .boutique-teaser {
      padding: var(--space-2xl) 0;
      background: linear-gradient(180deg, var(--ink) 0%, var(--surface) 20%, var(--surface) 80%, var(--ink) 100%);
      position: relative;
      overflow: hidden;
    }
    .boutique-teaser-glow {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 720px; height: 420px;
      background: radial-gradient(ellipse, rgba(168, 85, 247, 0.22) 0%, rgba(232, 67, 147, 0.12) 40%, transparent 70%);
      filter: blur(90px);
      opacity: 0.5;
      pointer-events: none;
      z-index: 0;
    }
    .boutique-teaser .wrap { position: relative; z-index: 1; }
    .boutique-teaser-inner {
      max-width: 780px;
      margin: 0 auto;
      text-align: center;
    }
    .boutique-chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 18px 44px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--white);
      background: var(--gradient-accent);
      border-radius: var(--radius-pill);
      box-shadow:
        0 8px 32px var(--accent-glow),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
      transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
      position: relative;
      overflow: hidden;
    }
    .boutique-chip::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25), transparent 70%);
      transform: translateX(-100%);
      transition: transform 0.9s var(--ease);
    }
    .boutique-chip:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow:
        0 16px 48px var(--accent-glow),
        0 0 80px rgba(168, 85, 247, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    }
    .boutique-chip:hover::before {
      transform: translateX(100%);
    }
    .boutique-chip:active { transform: translateY(-1px) scale(1); }
    .boutique-chip svg { transition: transform 0.3s var(--ease); }
    .boutique-chip:hover svg { transform: translateX(4px); }

    @media (max-width: 640px) {
      .boutique-teaser { padding: var(--space-xl) 0; }
      .boutique-chip { padding: 16px 32px; font-size: 0.85rem; }
    }

    /* ===================================================
       HOME PACKS GRID — apercu des packs sous le CTA
       Limite a 3 cartes max (logique HTML pour l'instant).
       Reutilise les styles .product-card de boutique.css
       (charge sur index.html via <link>).
       =================================================== */
    .home-shop-packs {
      margin-top: var(--space-lg);
    }
    .home-shop-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      max-width: 720px;
      margin: 0 auto;
    }
    /* Active des que >= 2 cartes (a poser sur .home-shop-grid quand on
       ajoutera un 2e pack — pas d'auto-detection sans JS) */
    .home-shop-grid.has-multiple {
      max-width: none;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    /* Bouton "Voir tous les packs" — a afficher quand >= 4 packs en boutique */
    .home-shop-more {
      margin-top: var(--space-lg);
      text-align: center;
    }

/* ======== FAQ (Sprint 3.5 — cible Google AI Overviews) ======== */
.faq {
  padding: var(--space-2xl) 0;
  background: var(--ink);
  position: relative;
  contain: layout style paint;
}
.faq-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(30, 21, 53, 0.7), rgba(21, 15, 40, 0.55));
  overflow: hidden;
  transition: border-color var(--duration) var(--ease);
}
.faq-item[open] {
  border-color: rgba(232, 67, 147, 0.4);
}
.faq-question {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  color: var(--white);
  padding: 22px 56px 22px 24px;
  cursor: pointer;
  position: relative;
  list-style: none;
  font-weight: 500;
  transition: color var(--duration) var(--ease);
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::after {
  content: '+';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  color: var(--accent-2);
  transition: transform var(--duration) var(--ease);
  font-weight: 300;
  line-height: 1;
}
.faq-item[open] .faq-question::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-question:hover,
.faq-question:focus-visible {
  color: var(--accent-2);
  outline: none;
}
.faq-answer {
  padding: 0 24px 24px;
  color: var(--text-dim);
  line-height: 1.7;
  font-size: 15px;
}
.faq-answer p {
  margin: 0;
}
/* Defensive: some browser/CSS combinations leave .faq-answer visible when
   <details> is closed. Force the standard hide-when-closed behavior. */
.faq-item:not([open]) .faq-answer {
  display: none;
}
@media (max-width: 768px) {
  .faq {
    padding: var(--space-xl) 0;
  }
  .faq-question {
    padding: 18px 48px 18px 18px;
    font-size: 1.05rem;
  }
  .faq-question::after {
    right: 18px;
    font-size: 24px;
  }
  .faq-answer {
    padding: 0 18px 20px;
    font-size: 14px;
  }
}

/* ======== Sprint 9 — Liens inline avec indice non-coloré (a11y) ========
   Lighthouse audit "link-in-text-block" : un lien dans un paragraphe ne doit
   pas etre distingue uniquement par la couleur (probleme pour daltoniens).
   .bonus-promo-note a est gere directement dans boutique.css (underline dotted dore). */
.footer-bottom a {
  text-decoration: underline;
  text-underline-offset: 2px;
}