/* ============================================================================
   ELI TECH — theme-dark.css — REMASTER 2026-05-07
   Holographic premium dark theme. Consolidated from V1/V2/V3 patches.
   Loaded LAST on every public page. Overrides all prior stylesheets.
   ============================================================================ */

/* ============================================================================
   1. PALETTE — Design tokens
   ============================================================================ */
:root {
  /* Surfaces — deep indigo-blue, NOT pure black */
  --bg:           #0C1233;
  --bg-alt:       #111840;
  --bg-soft:      #151E4A;
  --bg-dark:      #0C1233;
  --bg-dark-2:    #182150;
  --surface:      #182150;
  --surface2:     #1F2A5E;
  --surface-soft: #182150;
  --bg-section:   #111840;
  --bg-section-2: #182150;

  /* Cards — translucent glass */
  --surface-card:        rgba(28, 40, 88, 0.78);
  --surface-card-strong: rgba(36, 50, 105, 0.90);

  /* Text — high contrast, warm whites */
  --ink:    #F5F7FF;
  --ink-2:  #D8E0F8;
  --ink-3:  #B0BBD8;
  --ink-4:  #94A0C4;
  --ink-5:  #7C89B0;
  --ink-soft: #B0BBD8;

  /* Accent — blue-violet spectrum */
  --accent:        #5D8CFF;
  --accent-2:      #B26CFF;
  --accent-hover:  #8AA8FF;
  --accent-soft:   rgba(93, 140, 255, 0.14);
  --accent-inv:    #FFFFFF;

  --blue-main:    #2F6BFF;
  --blue-light:   #5D8CFF;
  --blue-glow:    #4A7DFF;
  --purple-main:  #8B5CFF;
  --purple-light: #B26CFF;
  --purple-glow:  #C06CFF;

  /* Borders */
  --border:        rgba(255, 255, 255, 0.13);
  --border-2:      rgba(130, 160, 255, 0.38);
  --border-soft:   rgba(255, 255, 255, 0.08);
  --border-strong: rgba(130, 160, 255, 0.48);

  /* Semantic */
  --success:    #34D399;
  --success-bg: rgba(52, 211, 153, 0.10);
  --warning:    #FBBF24;
  --warning-bg: rgba(251, 191, 36, 0.10);
  --error:      #FB7185;
  --error-bg:   rgba(251, 113, 133, 0.10);

  /* Gradients */
  --gradient-main:   linear-gradient(135deg, #2472FF 0%, #7C5CFF 52%, #C05CFF 100%);
  --gradient-soft:   linear-gradient(135deg, rgba(47,107,255,0.18), rgba(162,89,255,0.18));
  --gradient-text:   linear-gradient(135deg, #5D8CFF 0%, #B26CFF 100%);
  --gradient-border: linear-gradient(135deg, rgba(93,140,255,0.5), rgba(178,108,255,0.5));

  /* Halos */
  --glow-blue:   0 0 50px rgba(74, 125, 255, 0.32);
  --glow-purple: 0 0 50px rgba(162, 89, 255, 0.26);
  --glow-mix:    0 0 50px rgba(74,125,255,0.32), 0 0 90px rgba(162,89,255,0.20);

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:   0 6px 16px rgba(0,0,0,0.38), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:   0 14px 30px rgba(0,0,0,0.42), 0 4px 8px rgba(0,0,0,0.25);
  --shadow-xl:   0 24px 60px rgba(0,0,0,0.48), 0 8px 16px rgba(0,0,0,0.30);
  --shadow-2xl:  0 30px 80px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(93,140,255,0.28), 0 14px 40px -10px rgba(93,140,255,0.35);

  /* Nav */
  --nav-glass-bg:        rgba(18, 26, 60, 0.60);
  --nav-glass-bg-strong: rgba(18, 26, 60, 0.85);
  --nav-glass-border:    rgba(255, 255, 255, 0.12);
  --nav-shadow:          0 12px 28px rgba(0,0,0,0.40), 0 1px 0 rgba(255,255,255,0.06) inset;

  /* Nav height */
  --nav-h-desktop: 76px;
  --nav-h-mobile:  64px;
}


/* ============================================================================
   2. BODY — Rich indigo with holographic halos
   ============================================================================ */
html {
  background: #0C1233;
}

body {
  background:
    radial-gradient(ellipse at 22% 8%, rgba(65, 110, 230, 0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 78% 85%, rgba(155, 95, 240, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 42%, rgba(50, 90, 200, 0.10) 0%, transparent 50%),
    #0C1233;
  background-attachment: fixed;
  color: var(--ink);
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: -18vh;
  right: -18vw;
  width: 65vw;
  height: 65vw;
  max-width: 1000px;
  max-height: 1000px;
  background: radial-gradient(circle at center, rgba(72, 130, 255, 0.28) 0%, rgba(72, 130, 255, 0) 60%);
  pointer-events: none;
  z-index: 0;
  filter: blur(16px);
}

body::after {
  content: "";
  position: fixed;
  bottom: -22vh;
  left: -18vw;
  width: 70vw;
  height: 70vw;
  max-width: 1100px;
  max-height: 1100px;
  background: radial-gradient(circle at center, rgba(175, 110, 255, 0.22) 0%, rgba(175, 110, 255, 0) 65%);
  pointer-events: none;
  z-index: 0;
  filter: blur(16px);
}

@media (max-width: 768px) {
  body::before,
  body::after {
    filter: blur(10px);
    opacity: 0.55;
  }
}

/* ============================================================================
   29. SURGICAL RESCUE — compact dark coherence
   ============================================================================ */
.section,
.ai-section,
.formules-section,
.formules-included,
.formules-compare,
.formules-faq,
.formules-cta-final,
.legal-hero,
.legal-cards {
  padding-top: clamp(54px, 7vw, 86px);
  padding-bottom: clamp(54px, 7vw, 86px);
}

.hero {
  min-height: auto;
  padding: clamp(112px, 12vw, 154px) 0 clamp(66px, 8vw, 96px);
}

.section-head {
  margin-bottom: clamp(28px, 4vw, 46px);
}

.reveal,
.stagger > * {
  opacity: 1 !important;
  transform: none !important;
}

.hero .lead {
  margin-bottom: 30px;
}

.ai-page {
  background: var(--bg);
  color: var(--ink);
}

.ai-hero,
.ai-section-alt {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(47,107,255,.22), transparent 42%),
    radial-gradient(ellipse at 82% 22%, rgba(139,92,255,.18), transparent 44%),
    linear-gradient(180deg, rgba(12,18,51,.98) 0%, rgba(17,24,64,.94) 100%);
}

.ai-kicker,
.ai-bullets li,
.ai-card,
.ai-agent,
.ai-step,
.ai-price,
.ai-case,
.ai-faq-item,
.ai-proof-item,
.ai-note,
.ai-mockup,
.ai-step-mini,
.ai-price-illu,
.ai-case-chart {
  background: linear-gradient(180deg, rgba(44,60,120,.78), rgba(26,36,82,.90));
  border-color: rgba(255,255,255,.12);
  color: var(--ink-2);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.ai-kicker,
.ai-agent h3 span,
.ai-agent p,
.ai-card p,
.ai-list li,
.ai-step p,
.ai-price li,
.ai-case p,
.ai-faq-a p,
.ai-head p,
.ai-muted,
.ai-proof-copy,
.ai-price-sub,
.ai-legal {
  color: var(--ink-2);
}

.ai-h1,
.ai-h2,
.ai-card h3,
.ai-agent h3,
.ai-step h3,
.ai-price h3,
.ai-price-value,
.ai-case h3,
.ai-faq-q,
.ai-proof-label,
.ai-list strong {
  color: var(--ink);
}

.ai-bullets li {
  font-size: 14px;
}

.ai-hero-phone {
  align-self: center;
}

.sm5-h1,
.ai-h1 {
  font-size: clamp(2.35rem, 7.8vw, 4.9rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.sm5-ide-band {
  padding: clamp(34px, 5vw, 56px) 0;
}

.sm5-v14-scene,
.sm5-ide-frame {
  min-height: 0;
}

@media (max-width: 768px) {
  .section,
  .ai-section,
  .formules-section,
  .formules-included,
  .formules-compare,
  .formules-faq,
  .formules-cta-final,
  .legal-hero,
  .legal-cards {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .hero {
    padding: 104px 0 58px;
  }

  .ai-hero {
    padding: 96px 0 52px;
  }

  .ai-h1,
  .sm5-h1 {
    font-size: clamp(2.15rem, 11vw, 3.25rem);
    line-height: 1.04;
  }

  .ai-hero-grid,
  .sm5-hero-grid {
    gap: 30px;
  }

  .sm5-ide-band {
    display: none;
  }

  .site-footer,
  footer.site-footer {
    margin-top: 48px;
  }
}

main,
.navbar,
.site-footer,
section {
  position: relative;
  z-index: 1;
}

::selection {
  background: rgba(130, 105, 255, 0.42);
  color: #fff;
}


/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  color: var(--ink);
}

.lead, p {
  color: var(--ink-2);
}

strong {
  color: var(--ink);
}

.h1 em, .h2 em, .h3 em,
h1 em, h2 em, h3 em,
em.serif {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  background: rgba(130, 160, 255, 0.16);
  color: #D5DDFA;
  border: 1px solid rgba(130, 160, 255, 0.35);
  text-shadow: 0 0 12px rgba(93, 140, 255, 0.30);
}

.eyebrow::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.eyebrow-light {
  background: rgba(130, 160, 255, 0.14);
  color: #E0E8FF;
}

a {
  color: inherit;
}

main a:not(.btn):not(.brand):not(.sector):not(.pf-tab):not([class*="footer"]):not([class*="sector"]):not([class*="card"]):hover {
  color: var(--accent-hover);
}

hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

blockquote {
  border-left: 3px solid var(--accent);
  background: rgba(24, 33, 80, 0.55);
  color: var(--ink-2);
}

code, pre {
  background: rgba(24, 33, 80, 0.80);
  color: #C8D1F0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}


/* ============================================================================
   4. NAVBAR — Fixed glass
   ============================================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(16, 24, 56, 0.60);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

.navbar.scrolled {
  background: rgba(14, 20, 50, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.40), 0 0 30px rgba(72, 130, 255, 0.10);
}

.brand,
.brand-word span {
  color: var(--ink);
}

.brand-word strong {
  color: var(--ink-3);
}

.brand-word em {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.brand-logo {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 22px rgba(47, 107, 255, 0.22);
}

.nav-links {
  background: rgba(32, 46, 100, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.nav-links a {
  color: var(--ink-2);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: #fff;
  background: rgba(130, 160, 255, 0.14);
  box-shadow: 0 1px 2px rgba(0,0,0,0.20);
}

.nav-links .nav-link-demo::after {
  background: var(--accent-soft);
  color: #B6C8FF;
}

.nav-burger {
  background: rgba(28, 38, 80, 0.65);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

.nav-burger:hover {
  background: rgba(38, 50, 100, 0.85);
  border-color: rgba(130, 160, 255, 0.50);
}

.nav-burger-icon i,
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  background: var(--ink);
}

.mobile-menu {
  background: rgba(12, 18, 48, 0.96);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.mobile-menu a {
  color: var(--ink);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.mobile-menu a:hover {
  background: rgba(93, 140, 255, 0.12);
  color: #fff;
}

/* Page padding for fixed navbar */
.legal-page,
.faq-page,
.affiliation-page,
.surmesure-page,
.paiement-page {
  padding-top: var(--nav-h-desktop);
}

@media (max-width: 768px) {
  .legal-page,
  .faq-page,
  .affiliation-page,
  .surmesure-page,
  .paiement-page {
    padding-top: var(--nav-h-mobile);
  }
  .navbar {
    padding: 10px 0;
  }
  .navbar.scrolled {
    padding: 6px 0;
  }
}

/* Keep modals above navbar */
.pf-overlay,
.pf-overlay.active,
.reel-lightbox,
.reel-lightbox.active {
  z-index: 3500;
}


/* ============================================================================
   5. BUTTONS
   ============================================================================ */
.btn-primary,
.btn--primary {
  background: var(--gradient-main);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 32px rgba(47, 107, 255, 0.35),
    0 4px 12px rgba(162, 89, 255, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.20);
  position: relative;
}

.btn-primary:hover,
.btn--primary:hover {
  background: linear-gradient(135deg, #3D85FF 0%, #8E6CFF 52%, #CD6CFF 100%);
  transform: translateY(-1px);
  box-shadow:
    0 18px 44px rgba(47, 107, 255, 0.45),
    0 6px 16px rgba(162, 89, 255, 0.35),
    0 0 30px rgba(93, 140, 255, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.20) inset;
}

.btn-primary:active,
.btn--primary:active {
  transform: translateY(0);
}

.btn-ghost,
.btn--ghost {
  background: rgba(24, 33, 80, 0.65);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-ghost:hover,
.btn--ghost:hover {
  background: rgba(32, 44, 96, 0.85);
  border-color: rgba(130, 160, 255, 0.45);
  color: #fff;
  box-shadow: 0 8px 22px rgba(47, 107, 255, 0.20);
}

.footer-cta .btn-primary {
  background: var(--gradient-main);
  color: #fff;
}

.footer-cta .btn-primary:hover {
  background: linear-gradient(135deg, #3D85FF 0%, #8E6CFF 52%, #CD6CFF 100%);
  color: #fff;
}


/* ============================================================================
   6. HERO
   ============================================================================ */
.hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(72, 130, 255, 0.24) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(175, 110, 255, 0.20) 0%, transparent 55%);
}

.hero-bg video {
  opacity: 0.25;
  filter: saturate(1.15) contrast(1.05) hue-rotate(200deg);
  mix-blend-mode: screen;
}

.hero-bg::before {
  background: linear-gradient(180deg, rgba(12, 18, 51, 0.58) 0%, rgba(12, 18, 51, 0.88) 100%);
}

.hero-bg::after {
  background-image:
    linear-gradient(rgba(93, 140, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 140, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  opacity: 0.50;
}

.hero h1 {
  color: var(--ink);
}

.hero h1 em {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero .lead,
.hero-demo-line {
  color: var(--ink-2);
}

.hero-demo-line strong {
  color: #fff;
}

.hero-eyebrow {
  background: rgba(24, 33, 80, 0.65);
  border: 1px solid rgba(93, 140, 255, 0.30);
  color: var(--ink-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(47, 107, 255, 0.18);
}

.hero-eyebrow .dot {
  background: #34D399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18), 0 0 12px rgba(52, 211, 153, 0.45);
}

.hero-logos {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.hero-logos-label {
  color: var(--ink-4);
}

.hero-logos span {
  color: var(--ink-3);
}

.hero-logos span:hover {
  color: var(--ink);
}


/* ============================================================================
   7. SECTIONS
   ============================================================================ */
.section {
  background: transparent;
}

.section-alt {
  background: linear-gradient(180deg, rgba(32, 46, 100, 0.48) 0%, rgba(26, 36, 82, 0.36) 100%);
  position: relative;
}

.section-alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(46, 64, 130, 0.24) 50%, transparent 100%);
  pointer-events: none;
}

.section-alt > * {
  position: relative;
  z-index: 1;
}

.section-dark {
  background: linear-gradient(135deg, rgba(44, 62, 120, 0.78), rgba(32, 44, 96, 0.86));
  border: 1px solid rgba(130, 160, 255, 0.24);
  border-radius: 28px;
  margin: 60px auto;
  max-width: calc(100% - 48px);
  color: var(--ink);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.35),
    0 0 90px rgba(72, 130, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (max-width: 768px) {
  .section-dark {
    margin: 40px auto;
    border-radius: 20px;
  }
}

.section-dark .h2,
.section-dark .h3,
.section-dark h2,
.section-dark h3 {
  color: #fff;
}

.section-dark .lead {
  color: var(--ink-2);
}

.section-dark .eyebrow {
  background: rgba(130, 160, 255, 0.14);
  color: #E0E8FF;
}


/* ============================================================================
   8. CARDS — Glass premium
   ============================================================================ */
.sector {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.75), rgba(22, 32, 72, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.sector:hover {
  border-color: rgba(150, 180, 255, 0.55);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.42),
    0 0 38px rgba(80, 130, 255, 0.28);
}

.sector::after {
  background: linear-gradient(180deg, rgba(12, 18, 51, 0.05) 0%, rgba(12, 18, 51, 0.75) 100%);
}

.sector-body h3 {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.50);
}

.sector-arrow {
  color: rgba(255, 255, 255, 0.92);
}

.sectors-extra-link {
  color: var(--ink-3);
}

.sectors-extra-link a {
  color: var(--accent);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
  border-bottom: 1px solid rgba(93, 140, 255, 0.35);
}

.card,
.proof-card,
.commit-card,
.service-card,
.method-card,
.faq-item,
.contact-card,
.trust-card {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.78), rgba(26, 36, 82, 0.90));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255,255,255,0.05) inset;
  color: var(--ink-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.card--soft {
  background: rgba(32, 46, 100, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
}

.card--hover:hover,
.card--hover:focus-within,
.proof-card:hover,
.commit-card:hover,
.service-card:hover,
.method-card:hover {
  transform: translateY(-4px);
  border-color: rgba(150, 180, 255, 0.50);
  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.40),
    0 0 36px rgba(80, 130, 255, 0.24);
}

.proof-card::before,
.commit-card::before {
  background: var(--gradient-main);
}

.proof-value,
.commit-value {
  color: #fff;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.proof-card p,
.commit-card p,
.method-card p,
.service-card p {
  color: var(--ink-2);
}

.proof-icon,
.commit-icon {
  background: linear-gradient(135deg, rgba(47, 107, 255, 0.22), rgba(162, 89, 255, 0.22));
  border: 1px solid rgba(93, 140, 255, 0.35);
  color: #B6C8FF;
}

.proof-note {
  color: var(--ink-3);
}

.service-card h3 {
  color: #fff;
}

.service-icon {
  background: var(--gradient-main);
  box-shadow: 0 8px 24px rgba(47, 107, 255, 0.30), 0 0 0 1px rgba(255,255,255,0.08);
}

.service-features {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.service-features li {
  color: var(--ink-3);
}

.service-features li svg,
.service-features li::before {
  color: var(--accent);
}

.services-more {
  background: linear-gradient(135deg, rgba(47, 107, 255, 0.08), rgba(162, 89, 255, 0.08));
  border: 1px solid rgba(93, 140, 255, 0.20);
}

.services-more p,
.services-more p strong {
  color: var(--ink);
}

.method-card h3 {
  color: #fff;
}

.method-num {
  background: var(--gradient-main);
  border: none;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(93, 140, 255, 0.15), 0 8px 20px rgba(47, 107, 255, 0.30);
}

.method-card .meta {
  background: var(--accent-soft);
  color: #B6C8FF;
}

.method-grid::before {
  background: linear-gradient(90deg, transparent 0%, rgba(93, 140, 255, 0.30) 20%, rgba(178, 108, 255, 0.30) 80%, transparent 100%);
}


/* ============================================================================
   9. TRUST CARD
   ============================================================================ */
.trust-card {
  display: flex;
  gap: 24px;
  padding: 40px;
  background: linear-gradient(135deg, rgba(44, 60, 120, 0.82), rgba(26, 36, 82, 0.92));
  border: 1px solid rgba(150, 180, 255, 0.28);
  border-radius: 28px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .trust-card {
    flex-direction: column;
    padding: 28px;
  }
}

.trust-card-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-main);
  color: #fff;
  box-shadow: 0 8px 22px rgba(47, 107, 255, 0.30);
}

.trust-card-content h3 {
  color: #fff;
  margin-bottom: 12px;
}

.trust-card-content p {
  color: var(--ink-2);
  margin-bottom: 20px;
}


/* ============================================================================
   10. FAQ ACCORDION
   ============================================================================ */
.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.76), rgba(26, 36, 82, 0.88));
}

.faq-item:hover {
  border-color: rgba(130, 160, 255, 0.30);
}

.faq-item.open {
  border-color: rgba(130, 160, 255, 0.50);
  box-shadow: 0 0 0 1px rgba(93, 140, 255, 0.18), 0 12px 30px rgba(0, 0, 0, 0.35);
}

.faq-q {
  color: var(--ink);
}

.faq-q:hover {
  color: var(--accent);
}

.faq-icon {
  background: rgba(93, 140, 255, 0.12);
  border: 1px solid rgba(93, 140, 255, 0.22);
  color: #B6C8FF;
}

.faq-item.open .faq-icon {
  background: var(--gradient-main);
  border-color: transparent;
  color: #fff;
}

.faq-q::after {
  color: var(--ink-2);
}

.faq-a-inner,
.faq-a {
  color: var(--ink-2);
}


/* ============================================================================
   11. FORMS
   ============================================================================ */
.input,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
.form-control {
  background: rgba(24, 33, 80, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.input:focus,
textarea:focus,
input:focus,
select:focus,
.form-control:focus {
  background: rgba(36, 50, 110, 0.88);
  border-color: rgba(150, 180, 255, 0.65);
  box-shadow:
    0 0 0 4px rgba(130, 160, 255, 0.20),
    0 14px 32px rgba(80, 130, 255, 0.18);
  outline: none;
}

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

.form-group label {
  color: var(--ink-2);
}

.form-group.has-value input,
.form-group.has-value textarea,
.form-group.has-value select,
.form-group input:not(:placeholder-shown),
.form-group textarea:not(:placeholder-shown),
.form-group select:valid {
  border-color: rgba(130, 160, 255, 0.40);
  background: rgba(28, 40, 88, 0.85);
}

select option {
  background: #182150;
  color: var(--ink);
}

.form-consent,
.form-consent a {
  color: var(--ink-3);
}

.form-consent a {
  color: #B6C8FF;
}

.form-consent a:hover {
  color: #fff;
}

.form-consent input[type="checkbox"] {
  accent-color: var(--accent);
}

.form-hint {
  color: var(--ink-3);
}

.form-trust {
  background: rgba(52, 211, 153, 0.10);
  color: #6EE7B7;
  border: 1px solid rgba(52, 211, 153, 0.20);
}

.form-error {
  background: var(--error-bg);
  border-color: rgba(251, 113, 133, 0.40);
  color: #FB7185;
}

.contact-progress {
  background: linear-gradient(180deg, rgba(24, 33, 80, 0.6) 0%, rgba(18, 24, 60, 0.8) 100%);
  border-color: rgba(255, 255, 255, 0.10);
}

.contact-progress-label {
  color: var(--ink-3);
}

.progress-step {
  background: rgba(24, 33, 80, 0.80);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--ink-3);
}

.progress-step.is-active,
.progress-step.is-complete {
  background: var(--gradient-main);
  color: #fff;
  box-shadow: 0 8px 22px rgba(47, 107, 255, 0.35);
}

.contact-progress-track {
  background: rgba(255, 255, 255, 0.06);
}

.contact-progress-fill {
  background: var(--gradient-main);
}

.contact-progress-note {
  color: var(--ink-3);
}

.form-radio {
  background: rgba(24, 33, 80, 0.60);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--ink-2);
}

.form-radio input[type="radio"] {
  accent-color: var(--accent);
}

.form-reassure,
.contact-mini {
  color: var(--ink-3);
}

.contact-kicker {
  color: #B6C8FF;
  text-shadow: 0 0 12px rgba(93, 140, 255, 0.30);
}

.contact-card h3,
.contact-card h3 em {
  color: #fff;
}

.contact-card h3 em {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-card > p {
  color: var(--ink-2);
}

.contact-card [class*="price"],
.contact-card [data-price] {
  color: var(--ink);
}

.brief-cta,
.contact-form .btn-primary {
  background: var(--gradient-main) !important;
  box-shadow:
    0 16px 40px rgba(47, 107, 255, 0.40),
    0 0 0 1px rgba(93, 140, 255, 0.35);
}

.brief-cta::before {
  background: linear-gradient(120deg, transparent 12%, rgba(255, 255, 255, 0.30) 32%, transparent 56%);
}

.brief-cta:hover {
  box-shadow:
    0 22px 56px rgba(47, 107, 255, 0.50),
    0 0 36px rgba(162, 89, 255, 0.35);
}

.submit-state.ok {
  color: #34D399;
}

.submit-state.error {
  color: #FB7185;
}

/* Contact selection summary — ensure hidden when empty */
.contact-selection-summary[hidden] {
  display: none !important;
}

.contact-selection-summary--visible,
.contact-selection-summary[data-visible="true"] {
  background: linear-gradient(135deg, rgba(93,140,255,0.10), rgba(162,89,255,0.06));
  border: 1px solid rgba(130,160,255,0.28);
  border-radius: 14px;
  padding: 14px 16px;
}

.contact-selection-summary-label {
  color: var(--ink-3);
}

.contact-selection-summary-value {
  color: var(--ink);
  font-weight: 600;
}

.contact-selection-summary-hint {
  color: var(--ink-3);
}

.contact-selection-summary-row--sector .contact-selection-summary-value {
  color: var(--ink-2);
}


/* ============================================================================
   12. FOOTER
   ============================================================================ */
.site-footer,
footer.site-footer {
  background: linear-gradient(180deg, rgba(12, 18, 51, 0.0) 0%, rgba(14, 22, 56, 0.92) 100%);
  color: var(--ink-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 80px;
}

.site-footer::before {
  background: linear-gradient(90deg, transparent, rgba(93, 140, 255, 0.50), rgba(178, 108, 255, 0.50), transparent);
}

.site-footer .h2,
.site-footer h2,
.footer-cta h2 {
  color: #fff;
}

.footer-cta h2 em {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.footer-cta p {
  color: var(--ink-2);
}

.footer-grid {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  border-top-color: rgba(255, 255, 255, 0.06);
}

.footer-col h3,
.footer-col h4 {
  color: #fff;
}

.footer-col a,
.footer-col p,
.footer-legal-links a,
.site-footer p,
.site-footer li,
.site-footer a {
  color: var(--ink-2);
}

.footer-col a:hover,
.footer-legal-links a:hover {
  color: #fff;
}

.footer-brand .brand,
.footer-brand .brand-word span {
  color: #fff;
}

.footer-brand .brand-word strong {
  color: var(--ink-4);
}

.footer-brand .brand-word em {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.footer-legal,
.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: var(--ink-3);
}

.footer-legal-links span {
  opacity: .35;
  color: var(--ink-4);
}

.footer-social a {
  background: rgba(24, 33, 80, 0.60);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ink-3);
}

.footer-social a:hover {
  background: var(--gradient-main);
  border-color: transparent;
  color: #fff;
}


/* ============================================================================
   13. CUSTOM BAND (sur-mesure on home)
   ============================================================================ */
.custom-band {
  background: linear-gradient(135deg, rgba(28, 40, 88, 0.70), rgba(36, 50, 110, 0.85));
}

.custom-band-content .lead {
  color: var(--ink-2);
}

.custom-tag {
  background: rgba(93, 140, 255, 0.10);
  border: 1px solid rgba(93, 140, 255, 0.30);
  color: #C8D1F0;
}

.custom-meta,
.custom-meta-sep {
  color: var(--ink-3);
}


/* ============================================================================
   14. PORTFOLIO MODAL
   ============================================================================ */
.pf-overlay {
  background: rgba(6, 10, 28, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pf-modal {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.96), rgba(24, 36, 80, 0.98));
  border: 1px solid rgba(150, 180, 255, 0.30);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48), 0 0 70px rgba(80, 130, 255, 0.20);
}

.pf-header,
.pf-tabs,
.pf-body,
.pf-cta {
  color: var(--ink-2);
}

.pf-title,
.pf-modal h2,
.pf-modal h3,
.pf-modal h4 {
  color: #fff;
}

.pf-sub {
  color: var(--ink-3);
}

.pf-close {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pf-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.pf-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pf-tab,
.pf-tab-btn {
  color: var(--ink-3);
}

.pf-tab.active,
.pf-tab-btn.active,
.pf-tab[aria-selected="true"] {
  color: #fff;
  border-bottom: 2px solid var(--accent);
}

.pf-cta {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pf-cta p,
#pfCtaText {
  color: var(--ink-2);
}

.pf-custom-panel,
.pf-custom-box {
  background: rgba(24, 33, 80, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
}

.pf-custom-title {
  color: #fff;
}

.pf-custom-subtitle,
.pf-custom-box p,
.pf-tab-intro,
.pf-empty-state {
  color: var(--ink-3);
}

.pf-custom-highlight {
  background: var(--gradient-main);
  color: #fff;
}


/* ============================================================================
   15. PRICING / FORMULES
   ============================================================================ */
.plan-card,
.formule-card,
.pricing-card,
.tier-card,
.formula-card,
.formule,
.formules-card {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.78), rgba(26, 36, 82, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--ink-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.plan-card:hover,
.formule-card:hover,
.pricing-card:hover,
.tier-card:hover,
.formula-card:hover {
  border-color: rgba(130, 160, 255, 0.40);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42), 0 0 30px rgba(80, 130, 255, 0.22);
}

.plan-card.featured,
.formule-card.featured,
.formule-card.is-featured,
.formule-card--featured,
.pricing-card.featured,
.tier-card.featured,
.formula-card.featured,
.plan-card[data-featured],
.formule-card[data-featured] {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(30, 42, 96, 0.94), rgba(18, 26, 60, 0.98)) padding-box,
    linear-gradient(135deg, #2472FF 0%, #7C5CFF 50%, #C05CFF 100%) border-box;
  box-shadow:
    0 24px 60px rgba(47, 107, 255, 0.28),
    0 0 50px rgba(162, 89, 255, 0.16);
  position: relative;
}

.formule-badge {
  background: var(--gradient-main) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(47, 107, 255, 0.40);
}

.plan-price,
.formule-price,
.pricing-price,
.tier-price,
.formula-price,
.formule-price-amount {
  color: #fff;
}

.plan-card h2,
.plan-card h3,
.formule-card h2,
.formule-card h3,
.formule-name,
.pricing-card h2,
.pricing-card h3 {
  color: #fff;
}

.formule-name {
  color: var(--accent);
}

.plan-card ul li,
.formule-card ul li,
.pricing-card ul li,
.formule-features li {
  color: var(--ink-2);
}

.formule-features li strong {
  color: var(--ink);
}

.formule-tagline {
  color: var(--ink-2);
}

.formule-price-tva {
  color: var(--ink-3);
}

.formule-meta {
  color: var(--ink-3);
}

.formule-meta-grid {
  background: rgba(20, 30, 70, 0.60);
  border-color: rgba(255, 255, 255, 0.08);
}

.formule-meta-grid dt {
  color: var(--ink-3);
}

.formule-meta-grid dd {
  color: var(--ink-2);
}

/* Trust pills */
.trust-pill {
  background: rgba(32, 46, 100, 0.70);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink-2);
}

/* Compare table */
table {
  color: var(--ink-2);
  border-color: rgba(255, 255, 255, 0.08);
}

th, td {
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ink-2);
}

th {
  color: var(--ink);
  background: rgba(24, 33, 80, 0.50);
}

tr:nth-child(even) td {
  background: rgba(24, 33, 80, 0.25);
}

.compare-table,
.comparison-table {
  background: linear-gradient(180deg, rgba(28, 40, 88, 0.60), rgba(18, 24, 60, 0.80));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  overflow: hidden;
}

.compare-table .compare-featured {
  background: linear-gradient(180deg, rgba(93,140,255,0.14), rgba(93,140,255,0.06));
  color: var(--ink);
}

.compare-table thead .compare-featured {
  background: rgba(93,140,255,0.18);
  color: #D5DDFA;
  border-bottom: 3px solid var(--accent);
}

.compare-table thead .compare-featured .compare-price {
  color: var(--accent);
}

.compare-price {
  color: var(--ink);
}

.compare-note {
  color: var(--ink-3);
}

.compare-table .compare-feature-col {
  color: var(--ink-2);
}

.compare-table tbody td:first-child {
  color: var(--ink-2);
}

/* Sticky column backgrounds */
.compare-table thead th:first-child {
  background: rgba(24, 33, 80, 0.95);
}

.compare-table tbody td:first-child {
  background: rgba(22, 30, 72, 0.95);
}

/* Clickable cells */
.compare-table .compare-cell--clickable:hover,
.compare-table .compare-cell--clickable:focus-visible {
  background: rgba(93, 140, 255, 0.18);
}

.compare-table thead .compare-cell--clickable:hover,
.compare-table thead .compare-cell--clickable:focus-visible {
  background: rgba(93, 140, 255, 0.28);
}

/* CTA final card */
.cta-final-card {
  background: var(--gradient-main) !important;
  color: #fff;
  box-shadow: 0 24px 60px rgba(47, 107, 255, 0.35), 0 0 60px rgba(162, 89, 255, 0.20);
}

.cta-final-card h2 {
  color: #fff !important;
}

.cta-final-card .lead {
  color: rgba(255, 255, 255, 0.88) !important;
}

.cta-final-card .btn-primary {
  background: #fff !important;
  color: #1B2554 !important;
  border-color: #fff !important;
}

.cta-final-card .btn-primary:hover {
  background: rgba(255,255,255,0.92) !important;
}

.cta-final-card .btn-ghost {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
}

.cta-final-card .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* Included section */
.formules-included {
  background: rgba(20, 30, 70, 0.50);
  border-color: rgba(255, 255, 255, 0.08);
}

.included-item {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.72), rgba(26, 36, 82, 0.88));
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.included-icon {
  background: linear-gradient(135deg, rgba(47, 107, 255, 0.22), rgba(162, 89, 255, 0.22));
  color: #B6C8FF;
}

.included-item h3 {
  color: var(--ink);
}

.included-item p {
  color: var(--ink-2);
}

/* Formules hero */
.formules-hero {
  background: transparent;
}

/* Formules FAQ section */
.formules-faq {
  background: rgba(20, 30, 70, 0.40);
}

/* Mobile scroll indicator for compare table */
@media (max-width: 768px) {
  .compare-table-wrap::before {
    background: linear-gradient(to left, rgba(22, 30, 72, 0.95), transparent);
  }
  .compare-table-wrap::after {
    color: var(--ink-4);
  }
}


/* ============================================================================
   16. GARAGE PAGE
   ============================================================================ */
.garage-hero,
.hero-garage {
  background: radial-gradient(ellipse at 30% 0%, rgba(47, 107, 255, 0.20) 0%, transparent 55%),
              radial-gradient(ellipse at 80% 100%, rgba(162, 89, 255, 0.18) 0%, transparent 55%);
}

.garage-card,
.diagnostic-card,
.problem-card,
.solution-card,
.before-after-card,
.gbp-card,
.offer-card {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.78), rgba(26, 36, 82, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--ink-2);
}

.sticky-cta,
.cta-sticky,
.mobile-sticky-cta {
  background: rgba(12, 18, 51, 0.90);
  border-top: 1px solid rgba(93, 140, 255, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* ============================================================================
   17. ATELIER IA PAGE
   ============================================================================ */
.atelier-card,
.workshop-card,
.use-case-card,
.iatpe-card,
.tier-iatpe {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.78), rgba(26, 36, 82, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--ink-2);
}

.tier-iatpe.is-recommended,
.atelier-card.featured,
.workshop-card.featured {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(30, 42, 96, 0.94), rgba(18, 26, 60, 0.98)) padding-box,
    linear-gradient(135deg, #2472FF 0%, #7C5CFF 50%, #C05CFF 100%) border-box;
  box-shadow: 0 20px 50px rgba(47, 107, 255, 0.28);
}


/* ============================================================================
   18. OUTILS / AFFILIATION
   ============================================================================ */
.affiliate-card,
.tool-card,
.outil-card,
.outils-card {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.78), rgba(26, 36, 82, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--ink-2);
}

.tool-card h3,
.outil-card h3 {
  color: #fff;
}


/* ============================================================================
   19. LEGAL PAGES
   ============================================================================ */
.legal-page,
.legal-content,
.legal,
main.legal,
.cgv,
.confidentialite,
.mentions {
  color: var(--ink-2);
}

.legal-page h1,
.legal-page h2,
.legal-page h3,
.legal-content h1,
.legal h1,
.legal h2,
.legal h3 {
  color: var(--ink);
}

.legal-page a,
.legal a {
  color: #B5C8FF;
}

.legal-page a:hover,
.legal a:hover {
  color: #fff;
}

.legal-page p,
.legal-page li {
  color: var(--ink-2);
}

.legal-page .legal-card,
.legal-page article.legal,
.legal-page section.legal {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.72), rgba(26, 36, 82, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--ink-2);
}

.legal-layout .aside {
  background: rgba(32, 46, 100, 0.72);
  border-color: rgba(255, 255, 255, 0.13);
}

.legal-layout .toc a {
  background: rgba(24, 33, 80, 0.60);
  color: var(--ink-2);
}

.legal-layout .toc a:hover {
  border-color: rgba(130, 160, 255, 0.35);
  background: rgba(36, 50, 110, 0.70);
}

.legal-cards .pill,
.legal-layout .pill {
  background: rgba(93, 140, 255, 0.16);
  color: #B6C8FF;
}

.legal-cards .notice,
.legal-layout .notice {
  background: rgba(24, 33, 80, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ink-3);
}

.legal-hero h1 em {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-meta {
  color: var(--ink-3);
}


/* ============================================================================
   20. SUR-MESURE PAGE
   ============================================================================ */
.sm-hero,
.sm-section {
  color: var(--ink-2);
}

.sm-card,
.sur-mesure-card {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.78), rgba(26, 36, 82, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--ink-2);
}

/* Sur-mesure & paiement — surfaces */
.surmesure-page .surmesure-card,
.affiliation-page .tool-card,
.affiliation-page .ai-card,
.atelier-ia-page .ai-card,
.paiement-page .pay-card {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.78), rgba(26, 36, 82, 0.90));
  border: 1px solid rgba(255, 255, 255, 0.11);
}


/* ============================================================================
   21. FAQ DETAIL PAGE
   ============================================================================ */
.faq-detail-grid .faq-card,
.faq-card {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.76), rgba(26, 36, 82, 0.88));
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: var(--ink-2);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.faq-card:hover {
  border-color: rgba(150, 180, 255, 0.40);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 0 24px rgba(80, 130, 255, 0.18);
}

.faq-card h3 {
  color: var(--ink);
}

.faq-card p {
  color: var(--ink-2);
}


/* ============================================================================
   22. SECTEURS PREMIUM
   ============================================================================ */
.sector--premium {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(47, 107, 255, 0.30) 0%, rgba(24, 33, 80, 0) 55%),
    radial-gradient(110% 90% at 0% 100%, rgba(162, 89, 255, 0.24) 0%, rgba(24, 33, 80, 0) 55%),
    linear-gradient(160deg, #182150 0%, #1F2A5E 55%, #2A2060 100%);
  border-color: rgba(93, 140, 255, 0.20);
}

.sector--premium:hover {
  border-color: rgba(178, 108, 255, 0.50);
}


/* ============================================================================
   23. REELS PRESENTATION
   ============================================================================ */
.reel-wrapper {
  align-items: stretch;
  gap: 28px;
}

.reel-info {
  color: var(--ink-2);
}

.reel-info h4 {
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.reel-info p {
  color: var(--ink-3);
}

.reel-info .stat-badge,
.reel-production-note {
  background: rgba(28, 38, 80, 0.65);
  border: 1px solid rgba(130, 160, 255, 0.28);
  color: var(--ink-2);
}

.vid-phone {
  background: linear-gradient(155deg, #243068 0%, #141E48 100%);
  border-radius: 32px;
  padding: 6px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(150, 180, 255, 0.20),
    0 0 36px rgba(80, 130, 255, 0.24);
  width: 232px;
}

.vid-phone:hover {
  box-shadow:
    0 32px 70px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(150, 180, 255, 0.35),
    0 0 50px rgba(80, 130, 255, 0.32);
}

.vid-phone-inner {
  border-radius: 26px;
  background: #0E1432;
}

.vid-phone-grad {
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.20) 35%,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.30) 100%);
}

.vid-phone-play {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 24px rgba(130, 160, 255, 0.30);
}

.vid-phone-badge,
.pf-reel-label {
  background: linear-gradient(135deg, #2472FF 0%, #7C5CFF 50%, #C05CFF 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 14px rgba(72, 130, 255, 0.45);
}

.vid-phone-hook {
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.vid-phone-handle {
  color: rgba(220, 227, 250, 0.78);
}


/* ============================================================================
   24. PAIEMENT PAGE
   ============================================================================ */
.paiement-page .pay-summary,
.paiement-page .step-content {
  background: linear-gradient(180deg, rgba(44, 60, 120, 0.75), rgba(26, 36, 82, 0.90));
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--ink-2);
}

.paiement-page .bank-card,
.paiement-page .rib-card {
  background: rgba(32, 46, 100, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--ink-2);
}


/* ============================================================================
   25. ANIMATIONS
   ============================================================================ */
@keyframes glowPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}


/* ============================================================================
   26. ACCESSIBILITY & FOCUS
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  background: var(--gradient-main);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.20);
}

.sector video,
.sector img {
  filter: saturate(1.05) brightness(0.95);
}


/* ============================================================================
   27. SCROLLBAR
   ============================================================================ */
@supports selector(::-webkit-scrollbar) {
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  *::-webkit-scrollbar-track {
    background: #0C1233;
  }
  *::-webkit-scrollbar-thumb {
    background: rgba(93, 140, 255, 0.35);
    border-radius: 5px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: rgba(93, 140, 255, 0.55);
  }
}


/* ============================================================================
   28. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

/* Mobile perf */
@media (max-width: 768px) {
  body::before,
  body::after {
    filter: blur(10px);
    opacity: 0.55;
  }
}