/* ═══════════════════════════════════════════════════════════════
   PREMIUM LAYER — Robin des Airs
   Élévation visuelle : texture, profondeur, animations, polish
   Valeur cible : identique à un budget designer ≥ 10 000 €
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables additionnelles ─────────────────────────────── */
:root {
  --shimmer:    linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  --glow-neon:  0 0 40px rgba(0,229,160,0.20), 0 0 80px rgba(0,229,160,0.08);
  --shadow-card-hover: 0 24px 64px rgba(0,200,122,0.12), 0 4px 16px rgba(11,31,58,0.06);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════ 1. HERO — enrichissement du côté blanc ═══════ */

/* Grille de points subtile côté gauche */
#hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(11,31,58,0.042) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.08) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.08) 100%);
}

/* Glow vert diffus en arrière-plan du hero */
#hero::before {
  background-image:
    radial-gradient(ellipse at 18% 25%, rgba(0,200,122,0.055) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 70%, rgba(0,200,122,0.04)  0%, transparent 45%);
}

/* ── Hero badge — dot pulsant plus visible ── */
.hero-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--neon-b);
  box-shadow: 0 0 0 0 rgba(0,229,160,0.5);
  animation: hero-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes hero-dot-pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(0,229,160,0.45); }
  55%      { box-shadow: 0 0 0 8px rgba(0,229,160,0); }
}

/* ═══════ 2. BOUTONS — shimmer + profondeur ═══════ */

/* CTA primaire hero — gradient et lueur */
.hero-entry-btn.primary {
  background: linear-gradient(135deg, #00E5A0 0%, #00C87A 100%);
  box-shadow: 0 4px 22px rgba(0,200,122,0.35),
              inset 0 1px 0 rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 14px 22px;
  font-size: 12px;
  letter-spacing: 0.7px;
  position: relative;
  overflow: hidden;
  border: none;
}
.hero-entry-btn.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shimmer);
  background-size: 220% 100%;
  background-position: -110% 0;
  transition: background-position 0.6s var(--ease-out-expo);
}
.hero-entry-btn.primary:hover {
  box-shadow: 0 8px 36px rgba(0,200,122,0.48),
              inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-2px);
}
.hero-entry-btn.primary:hover::after {
  background-position: 200% 0;
}

/* CTA secondaire hero — verre dépoli */
.hero-entry-btn.secondary {
  background: rgba(0,200,122,0.08);
  border: 1.5px solid rgba(0,200,122,0.3);
  border-radius: 10px;
  padding: 14px 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  letter-spacing: 0.6px;
}
.hero-entry-btn.secondary:hover {
  background: rgba(0,200,122,0.14);
  border-color: rgba(0,200,122,0.6);
  box-shadow: 0 4px 20px rgba(0,200,122,0.14);
  transform: translateY(-1px);
}

/* btn-primary partagé (sections) */
.btn-primary {
  background: linear-gradient(135deg, #00E5A0 0%, #00C87A 100%);
  box-shadow: 0 4px 22px rgba(0,200,122,0.30);
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shimmer);
  background-size: 220% 100%;
  background-position: -110% 0;
  transition: background-position 0.6s var(--ease-out-expo);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #00E5A0 0%, #009960 100%);
  box-shadow: 0 8px 36px rgba(0,200,122,0.45);
  transform: translateY(-2px);
  color: white;
}
.btn-primary:hover::after { background-position: 200% 0; }

/* ═══════ 3. STATS HERO ═══════ */
.hero-stats {
  border-top: 1px solid rgba(11,31,58,0.07);
  gap: 28px;
}
.stat-num {
  font-size: 28px;
  letter-spacing: -1.5px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a62 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat:hover .stat-num {
  background: linear-gradient(135deg, var(--neon-dark) 0%, var(--neon) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: background 0.3s;
}

/* ═══════ 4. NAV — glassmorphisme au scroll ═══════ */
.site-header {
  transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}
.site-header.prem-scrolled {
  background: rgba(11, 31, 58, 0.88) !important;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 40px rgba(0,0,0,0.28);
}

/* ═══════ 5. SECTION TAGS — ligne de couleur premium ═══════ */
.section-tag::before {
  width: 28px;
  height: 2.5px;
  background: linear-gradient(90deg, var(--neon-b), var(--neon-dark));
  border-radius: 3px;
}
.section-tag {
  letter-spacing: 2.8px;
}

/* ═══════ 6. CARDS — glow au hover ═══════ */

/* LOI CARDS */
.loi-card {
  transition: box-shadow 0.35s var(--ease-out-expo),
              border-color 0.35s ease,
              transform 0.30s var(--ease-out-expo);
}
.loi-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(0,200,122,0.35);
  transform: translateY(-4px);
}
.loi-card.featured {
  box-shadow: 0 24px 72px rgba(11,31,58,0.3),
              0 0 0 1px rgba(0,229,160,0.18),
              0 0 40px rgba(0,229,160,0.06);
}
.loi-card.featured:hover {
  box-shadow: 0 32px 80px rgba(11,31,58,0.38),
              0 0 0 1px rgba(0,229,160,0.28),
              0 0 60px rgba(0,229,160,0.10);
  transform: translateY(-6px);
}

/* STEP CARDS */
.step-num {
  font-size: 76px;
  background: linear-gradient(135deg, rgba(0,229,160,0.7) 0%, rgba(0,200,122,0.15) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  line-height: 1;
}
.step-icon-wrap {
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.step-card:hover .step-icon-wrap {
  background: rgba(0,200,122,0.13);
  border-color: rgba(0,200,122,0.35);
  box-shadow: 0 0 0 6px rgba(0,200,122,0.06);
  transform: scale(1.05);
}
.step-title {
  transition: color 0.25s;
}
.step-card:hover .step-title { color: var(--neon-dark); }

/* TESTIMONIAL CARDS */
.testi-card {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.35s var(--ease-out-expo),
              border-color 0.35s ease,
              transform 0.30s var(--ease-out-expo);
}
/* Grand guillemet décoratif */
.testi-card::before {
  content: '\201C';
  position: absolute;
  top: 12px; right: 18px;
  font-size: 96px;
  line-height: 1;
  color: rgba(0,200,122,0.07);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
  user-select: none;
}
.testi-card:hover {
  box-shadow: 0 16px 52px rgba(0,200,122,0.10), 0 2px 8px rgba(11,31,58,0.05);
  border-color: rgba(0,200,122,0.28);
  transform: translateY(-4px);
}
/* Trait coloré en haut de la card hover */
.testi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-b), var(--neon-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
  border-radius: 2px 2px 0 0;
}
.testi-card:hover::after { transform: scaleX(1); }

/* Stars plus dorées */
.testi-stars { color: #F5A623; font-size: 14px; letter-spacing: 2px; }

/* ═══════ 7. SECTION CTA FINAL — dark + magnétique ═══════ */
#cta-final {
  background: linear-gradient(145deg, #0B1F3A 0%, #061220 55%, #0B1F3A 100%);
  color: white;
  border-top: none;
  position: relative;
  overflow: hidden;
}
/* Halo vert centré */
#cta-final::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,229,160,0.08) 0%, transparent 65%);
  pointer-events: none;
}
/* Ligne gradient en haut */
#cta-final::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,229,160,0.5) 50%, transparent 100%);
}
#cta-final .section-title { color: white; }
#cta-final .section-tag   { color: var(--neon-b); }
#cta-final .section-tag::before {
  background: linear-gradient(90deg, var(--neon-b), var(--neon));
}
/* Texte sous-titres */
#cta-final p { color: rgba(255,255,255,0.60); }

/* ═══════ 8. FOOTER — ligne accent + grain ═══════ */
footer {
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,160,0.45), transparent);
}
.footer-col ul li a {
  transition: color 0.2s, padding-left 0.2s;
}
.footer-col ul li a:hover {
  color: var(--neon-b);
  padding-left: 4px;
}

/* ═══════ 9. FAQ — accordion premium ═══════ */
.faq-item {
  border-radius: 12px;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.faq-item:hover {
  box-shadow: 0 4px 24px rgba(11,31,58,0.07);
  border-color: rgba(0,200,122,0.2);
}
.faq-toggle {
  background: rgba(0,200,122,0.05);
  transition: background 0.2s, border-color 0.2s, transform 0.35s var(--ease-out-expo);
}
.faq-question.open .faq-toggle {
  background: rgba(0,200,122,0.12);
  border-color: rgba(0,200,122,0.4);
}

/* ═══════ 10. SOCIAL PROOF STRIP — plus présent ═══════ */
.social-proof-strip {
  background: linear-gradient(90deg,
    rgba(0,200,122,0.04) 0%,
    rgba(11,31,58,0.02) 50%,
    rgba(0,200,122,0.04) 100%);
  border-top-color: rgba(0,200,122,0.2);
  border-bottom-color: rgba(0,200,122,0.14);
}

/* ═══════ 11. SCROLL REVEAL ═══════ */
.prem-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.70s var(--ease-out-expo),
              transform 0.70s var(--ease-out-expo);
  will-change: opacity, transform;
}
.prem-reveal.prem-visible {
  opacity: 1;
  transform: translateY(0);
}

.prem-reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.60s var(--ease-out-expo),
              transform 0.60s var(--ease-out-expo);
  will-change: opacity, transform;
}
.prem-reveal-scale.prem-visible {
  opacity: 1;
  transform: scale(1);
}

/* Délais de cascade pour les grilles */
.prem-stagger > *:nth-child(1) { transition-delay: 0s;    }
.prem-stagger > *:nth-child(2) { transition-delay: 0.10s; }
.prem-stagger > *:nth-child(3) { transition-delay: 0.20s; }
.prem-stagger > *:nth-child(4) { transition-delay: 0.30s; }
.prem-stagger > *:nth-child(5) { transition-delay: 0.38s; }
.prem-stagger > *:nth-child(6) { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .prem-reveal,
  .prem-reveal-scale,
  .prem-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════ 12. SECTION comparatif — legère surface colorée sur highlights ═══════ */
.comp-cell.hl { background: rgba(0,200,122,0.055); }
.comp-head-cell.hl { background: rgba(0,229,160,0.12); color: var(--neon-ink); }

/* ═══════ 13. CURSOR POINTER — tous les éléments interactifs ═══════ */
.loi-card,
.step-card,
.testi-card,
.faq-item,
.dest-card,
button.vol-ticker-chip,
.btn-calc,
.btn-wa-hero,
.testi-arrow,
.testi-dot,
.back-btn {
  cursor: pointer;
}

/* ═══════ 14. HERO RIGHT — profondeur amplifiée ═══════ */
.hero-right {
  box-shadow:
    0 32px 80px -12px rgba(11,31,58,0.32),
    0 0 0 1px rgba(255,255,255,0.055),
    0 0 60px rgba(0,229,160,0.04);
}

/* ═══════ 15. SECTION TITLES — underline gradient sur .neon ═══════ */
.section-title .neon {
  position: relative;
}
.section-title .neon::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon-b), var(--neon-dark));
  border-radius: 3px;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   CALM PREMIUM — refonte « haut de gamme & calme » (hero + en-tête)
   Direction validée : luxe discret (Apple / Stripe / banque privée).
   Principe : RETIRER les effets tape-à-l'œil (texte en dégradé,
   shimmer, halos verts, trame « tech ») ; le premium est porté par
   l'espace, la typo et UN vert profond utilisé avec parcimonie.
   Bloc placé en fin de fichier → il gagne la cascade. Réversible :
   supprimer ce bloc rétablit l'ancien rendu.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --emerald:      #0B7A53;            /* vert profond « banque privée » — fonds d'action */
  --emerald-deep: #075E40;            /* état survol */
  --hairline:     rgba(11,31,58,0.10);
  --ease-lux:     cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 1. Fond du hero : on enlève la trame de points et on apaise le halo ── */
#hero::after { display: none !important; }          /* trame de points = trop « tech » */
#hero::before {
  background-image:
    radial-gradient(ellipse 60% 50% at 82% 38%, rgba(11,31,58,0.035) 0%, transparent 60%);
}

/* ── 2. Titre : tracking moins serré (raffiné, pas « crié ») + plus d'air ── */
.hero-title { letter-spacing: -0.012em; }

/* ── 3. Puces « promesses » : neutres (le vert devient rare) ── */
.hero-promises li {
  background: #fff;
  border: 1px solid var(--hairline);
  color: var(--navy);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(11,31,58,0.05);
}

/* ── 4. CTA principal : vert VIF « Wave » (repère diaspora) mais PROPRE ──
   Verdict du concile (14/06) : garder le nettoyage MAIS réinjecter la
   chaleur sur l'action. Donc vert vif familier + texte navy lisible,
   sans shimmer ni effet clinquant. L'émeraude reste pour le décor. */
.hero-entry-btn.primary {
  background: var(--neon);            /* vert Wave vif = familier, « vivant » */
  background-image: none;
  color: var(--navy);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,150,96,0.30), 0 10px 28px -10px rgba(0,150,96,0.55);
  transition: transform .28s var(--ease-lux),
              box-shadow .28s var(--ease-lux),
              background-color .28s var(--ease-lux);
}
.hero-entry-btn.primary::after { content: none; }   /* coupe le balayage shimmer */
.hero-entry-btn.primary:hover {
  background: var(--neon-b);          /* un cran plus lumineux au survol */
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,150,96,0.32), 0 18px 40px -12px rgba(0,150,96,0.55);
}

/* ── 5. Stats : chiffres en aplat navy (on tue le texte-dégradé) ── */
.hero-stats {
  border-top: 1px solid var(--hairline);
  gap: 30px;
}
.stat-num,
.stat:hover .stat-num {
  background: none;
  -webkit-text-fill-color: var(--navy);
  background-clip: initial;
  -webkit-background-clip: initial;
  color: var(--navy);
  letter-spacing: -0.5px;
  transition: none;
}

/* ── 6. Carte simulateur (mobile/tablette) : ombre profonde, sans lueur verte ── */
.hero-right {
  box-shadow:
    0 30px 70px -20px rgba(11,31,58,0.30),
    0 0 0 1px rgba(255,255,255,0.05);
}

/* ── 7. En-tête / bandeau diaspora : navy profond, filets discrets ── */
.diaspora-bar {
  background: linear-gradient(180deg, #0a1c34 0%, #0b1f3a 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.diaspora-bar-inner--stack { border-bottom: none; }
.diaspora-bar-track {
  background: rgba(0,0,0,0.20);
  border-color: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.diaspora-bar-flags-pill {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.09);
}
.diaspora-bar-title .vol-ticker-label {
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.10em;
}
.diaspora-bar-flags-more { color: rgba(255,255,255,0.66); }

/* ── 8. Réglages desktop (≥1081px) : respiration + photo fondue ── */
@media (min-width: 1081px) {
  #hero { padding-top: 150px; }                     /* air au-dessus du titre */
  #hero .hero-title { line-height: 1.1; margin-bottom: 18px; }
  #hero .hero-subhead {
    font-size: 15px;
    line-height: 1.5;
    color: var(--navy);
    opacity: 0.9;
    margin: 0 0 26px 0;
  }
  #hero .hero-stats { margin-top: 16px; padding-top: 16px; }

  /* La famille reste BIEN VISIBLE (verdict concile : un vrai visage = signal
     de confiance n°1). On garde juste un fondu LÉGER du bord gauche pour
     effacer la couture dure — sans « noyer » la photo dans le fond. */
  .hero-bg-visual {
    clip-path: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 100%);
  }
}

/* ── 9. Entrée scénographiée du hero (calme, courte, accessible) ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-left .hero-title,
  .hero-left .hero-subhead,
  .hero-left .hero-promises,
  .hero-left .hero-entry,
  .hero-left .wa-typedemo,
  .hero-left .hero-stats {
    opacity: 0;
    animation: heroRise 0.7s var(--ease-lux) forwards;
  }
  .hero-left .hero-title    { animation-delay: 0.05s; }
  .hero-left .hero-subhead  { animation-delay: 0.14s; }
  .hero-left .hero-promises { animation-delay: 0.22s; }
  .hero-left .hero-entry    { animation-delay: 0.30s; }
  .hero-left .wa-typedemo   { animation-delay: 0.38s; }
  .hero-left .hero-stats    { animation-delay: 0.46s; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── 10. Mobile : dompter le « mur » de titre + couper la césure moche ── */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(25px, 6.6vw, 34px);   /* moins « crié » : le titre respire (mur 7 lignes -> ~5) */
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }
  /* jamais de « jus-qu'à » : on coupe sur l'espace/le tiret, pas au milieu d'un mot */
  .hero-entry-btn,
  .hero-entry-btn--xl {
    hyphens: manual;
    -webkit-hyphens: manual;
    word-break: normal;
    overflow-wrap: normal;
    font-size: 13px;
    letter-spacing: 0.2px;
    line-height: 1.35;
  }
  .hero-promises { gap: 7px; }
}

/* ═══════════════════════════════════════════════════════════════
   CALM PREMIUM — extension à TOUTE la page d'accueil
   Mêmes règles que le hero : pas de texte en dégradé, pas de
   shimmer, pas de halo vert fluo. Survols apaisés (ombres navy),
   intertitres transformés en kickers discrets, vert rare et profond.
   ═══════════════════════════════════════════════════════════════ */

/* ── Intertitres (eyebrows) : kicker sobre au lieu de l'étiquette verte ── */
.section-tag {
  color: #5C6B82;                 /* slate discret, AA (≈5.4:1) — au lieu du vert criard */
  font-weight: 700;
  letter-spacing: 2px;
}
.section-tag::before {
  width: 18px;
  height: 2px;
  background: var(--emerald);     /* petit trait émeraude = touche de marque, pas un dégradé */
  border-radius: 2px;
}

/* ── Titres de section : tracking un cran plus ouvert + soulignement uni ── */
.section-title { letter-spacing: -0.01em; }
.section-title .neon::after {
  background: var(--emerald);
  height: 2px;
  opacity: 0.30;
}

/* ── Numéros d'étape : chiffre « fantôme » net (plus de dégradé 76px) ── */
.step-num {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: rgba(11,31,58,0.13) !important;
  color: rgba(11,31,58,0.13) !important;
}

/* ── Boutons de section : même vert vif « Wave » que le CTA, mais propre ── */
.btn-primary {
  background: var(--neon);
  background-image: none;
  color: var(--navy);
  box-shadow: 0 1px 2px rgba(0,150,96,0.28), 0 10px 26px -10px rgba(0,150,96,0.50);
}
.btn-primary::after { content: none; }
.btn-primary:hover {
  background: var(--neon-b);
  background-image: none;
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,150,96,0.30), 0 16px 36px -12px rgba(0,150,96,0.55);
}

/* ── Survols de cartes : ombres navy douces, on retire la lueur verte ── */
.loi-card:hover,
.testi-card:hover,
.faq-item:hover {
  border-color: rgba(11,31,58,0.16);
  box-shadow: 0 18px 48px -20px rgba(11,31,58,0.22);
}
.loi-card.featured {
  box-shadow: 0 24px 64px -26px rgba(11,31,58,0.30), 0 0 0 1px rgba(11,31,58,0.07);
}
.loi-card.featured:hover {
  box-shadow: 0 30px 72px -26px rgba(11,31,58,0.36), 0 0 0 1px rgba(11,31,58,0.11);
}
.testi-card::after { display: none; }      /* trait dégradé au survol → retiré */
.step-card:hover .step-icon-wrap {
  background: rgba(11,31,58,0.05);
  border-color: rgba(11,31,58,0.14);
  box-shadow: 0 0 0 6px rgba(11,31,58,0.03);
}
.step-card:hover .step-title { color: var(--navy); }

/* ── FAQ : accordéon neutre (le vert ne ressort qu'à l'ouverture) ── */
.faq-toggle { background: rgba(11,31,58,0.04); }
.faq-question.open .faq-toggle {
  background: rgba(11,122,83,0.10);
  border-color: rgba(11,122,83,0.35);
}

/* ── Bande preuve sociale : sobre ── */
.social-proof-strip {
  background: rgba(11,31,58,0.02);
  border-top-color: rgba(11,31,58,0.08);
  border-bottom-color: rgba(11,31,58,0.06);
}

/* ── CTA final (section sombre) : on garde le navy, halo vert apaisé ── */
#cta-final::before {
  background: radial-gradient(circle, rgba(0,229,160,0.05) 0%, transparent 65%);
}