/* ============================================================
   Lagriffe Studio — polish.css
   DESIGN SYSTEM SOMBRE PREMIUM
   Encre profonde + accents indigo/violet/rose
   Inclure APRÈS style.css.
   ============================================================ */

/* ─── Design tokens ─── */
:root {
  /* Fond global : encre profonde nuit */
  --c-bg:         #0A0B1E;
  --c-bg-alt:     #0F1226;
  --c-bg-section: #0D0F22;
  --c-surface:    #14172E;
  --c-surface-2:  #1A1D3A;
  --c-surface-3:  #20254A;
  --c-border:     rgba(99, 102, 241, 0.15);
  --c-border-2:   rgba(248, 250, 252, 0.08);
  --c-border-3:   rgba(248, 250, 252, 0.12);

  /* Textes : du blanc au gris bleuté */
  --c-text:       #F8FAFC;
  --c-text-soft:  #CBD5E1;
  --c-text-mute:  #94A3B8;
  --c-text-dim:   #64748B;

  /* Accents : palette indigo / violet / rose / orange */
  --c-indigo:     #818CF8;
  --c-indigo-d:   #6366F1;
  --c-indigo-dd:  #4F46E5;
  --c-indigo-ll:  rgba(99, 102, 241, 0.12);
  --c-violet:     #A78BFA;
  --c-violet-d:   #8B5CF6;
  --c-pink:       #F472B6;
  --c-orange:     #FB923C;
  --c-emerald:    #34D399;
  --c-gold:       #FCD34D;

  --grad-brand: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
  --grad-brand-2: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --grad-text:  linear-gradient(90deg, #818CF8 0%, #A78BFA 50%, #F472B6 100%);
  --grad-surface: linear-gradient(180deg, rgba(99,102,241,.04), rgba(99,102,241,0));
  --grad-section: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-alt) 100%);

  /* Spacing scale */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Radius */
  --rd-sm: 6px; --rd-md: 10px; --rd-lg: 14px; --rd-xl: 20px;
  --rd-2xl: 28px; --rd-full: 999px;

  /* Shadows (sur fond sombre : ombres rares + glow subtil) */
  --sh-soft: 0 4px 24px rgba(0,0,0,.4);
  --sh-card: 0 8px 32px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset;
  --sh-card-hover: 0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.3), 0 1px 0 rgba(255,255,255,.06) inset;
  --sh-brand: 0 12px 40px rgba(99,102,241,.45), 0 4px 12px rgba(139,92,246,.30);
  --sh-glow-indigo: 0 0 40px rgba(99,102,241,.25);

  /* Transitions */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 150ms;
  --t-mid: 300ms;
  --t-slow: 500ms;
}
html body [class*=" med-"], html body [class*=" medieval"], html body [class*=" future-bg"], html body [class*=" future-"], html body [class*=" retro-bg"], html body [class*=" retro-"], html body [class*=" zombie"], html body [class*=" usa-"], html body .moth, html body .bee, html body .insect, html body .ornament, html body .sparkle, html body [class*="dragon"], html body [class*="butterfly"], html body [class*="firefly"], html body [class*="moth"], html body [class*="bee"], html body [class*="ornament"], html body .hero__cards, html body .hero__theme-row, html body .hero__orb, html body [class^="hpc"], html body [class*=" hpc"], html body #heroThemeRow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(100%) !important;
}

/* ─── Base : tout en mode dark ─── */
html { scroll-behavior: smooth; }
html, body {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
::selection { background: var(--c-indigo-dd); color: #FFFFFF; }
img, svg { display: block; max-width: 100%; }

/* ─── Typo polish : titres en blanc, em en gradient ─── */
h1, h2, h3, h4, h5, h6,
.hero__h1, .sim-title__big,
.section__title, .plan-card__name,
.eco-card__title, .step-card h3, .faq__q,
.cmd-hero h1, .cmd-step-head h2,
.guarantee__card h3, .reward-card__title,
.gallery-card__sector, .sector-card h3 {
  font-family: 'Syne', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
  color: var(--c-text) !important;
  text-wrap: balance;
}
h3, .step-card h3, .eco-card__title, .plan-card__name,
.guarantee__card h3, .faq__q, .sector-card h3 {
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
}

/* Em italic : gradient indigo→violet→rose, lisible sur fond sombre */
.section__title em, .hero__h1 em, .cmd-hero h1 em,
.sim-title__big em, .hero__gradient {
  font-style: italic !important;
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* Em à l'intérieur de boutons / strong / liens : pas de gradient (sinon illisible) */
.btn em, button em, a em, strong em,
.nav__cta em, .hero__cta-perso em,
.eco-card em, .plan-card em {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: inherit !important;
  font-style: italic;
}

/* ─── Eyebrow / section labels ─── */
.section__label, .eyebrow, .nav__link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
}
.section__label {
  display: inline-block;
  padding: 6px 14px;
  background: var(--c-indigo-ll);
  color: var(--c-indigo) !important;
  border: 1px solid rgba(99,102,241,.25);
  border-radius: var(--rd-full);
  margin-bottom: var(--sp-4);
}

/* ─── Paragraphes ─── */
p, .lead, .section__sub, .hero__sub,
.step-card p, .eco-card__lead, .faq__a, .faq__a p,
.reward-card__desc, .guarantee__card p {
  color: var(--c-text-soft) !important;
  line-height: 1.7 !important;
}
.section__sub, .hero__sub, .lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  max-width: 640px;
  margin-inline: auto;
  text-wrap: balance;
}
strong { color: var(--c-text) !important; font-weight: 700; }
em { color: var(--c-text); }

/* ─── Sections : padding généreux + fond unifié ─── */
section, .section {
  background: transparent !important;
  padding-block: clamp(72px, 10vw, 128px) !important;
  position: relative;
}
.section__header {
  margin-bottom: clamp(48px, 6vw, 72px) !important;
  text-align: center;
}
.section__header h2, .section__title {
  margin-bottom: var(--sp-4) !important;
  font-size: clamp(2rem, 4.8vw, 3.2rem) !important;
}

/* Sections alternées : une sur deux a un fond légèrement différent */
section:nth-of-type(2n),
.section:nth-of-type(2n),
[data-theme="light"] section:nth-of-type(2n) {
  background: var(--c-bg-alt) !important;
}

/* ─── Container ─── */
.container, [data-theme="light"] .container {
  max-width: 1200px !important;
  padding-inline: clamp(20px, 4vw, 32px) !important;
}

/* ─── Nav header ─── */
.nav, [data-theme="light"] .nav {
  background: rgba(10, 11, 30, 0.7) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--c-border-2) !important;
}
.nav__inner { padding-block: var(--sp-4) !important; }
.nav__logo, .nav__logo .logo-word,
[data-theme="light"] .nav__logo, [data-theme="light"] .nav__logo .logo-word {
  color: var(--c-text) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
/* logo-dot ("STUDIO") : couleur adaptee au theme pour rester lisible.
   En sombre (defaut) -> blanc, en clair -> or sourd profond,
   en intermediaire -> or doux. Plus de #000 force qui rendait
   illisible sur fond bleu nuit. */
.nav__logo .logo-dot {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #FFFFFF !important;
}
[data-theme="light"] .nav__logo .logo-dot {
  color: #8B6F2A !important;
}
[data-theme="dim"] .nav__logo .logo-dot {
  color: #E8D9B0 !important;
}
.nav__link, [data-theme="light"] .nav__link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 0.92rem !important;
  color: var(--c-text-soft) !important;
  position: relative;
}
.nav__link::after, [data-theme="light"] .nav__link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--grad-brand);
  border-radius: var(--rd-full);
  transition: all var(--t-fast) var(--ease-out);
  transform: translateX(-50%);
}
.nav__link:hover, [data-theme="light"] .nav__link:hover { color: var(--c-text) !important; }
.nav__link:hover::after, [data-theme="light"] .nav__link:hover::after { width: 100%; }

/* ─── Buttons ─── */
.btn, button[type="submit"], #submit-btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  border-radius: var(--rd-lg) !important;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) !important;
  border: none;
  cursor: pointer;
}
.btn--primary, .nav__cta, a.btn--primary,
[data-theme="light"] .btn--primary, [data-theme="light"] .nav__cta, [data-theme="light"] a.btn--primary {
  background: var(--grad-brand-2) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 14px 28px !important;
  box-shadow: var(--sh-brand);
}
.btn--primary:hover, .nav__cta:hover, a.btn--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 50px rgba(99,102,241,.55), 0 6px 16px rgba(139,92,246,.4) !important;
}
.btn--primary *, a.btn--primary * { color: #FFFFFF !important; }
.btn--lg { padding: 16px 36px !important; font-size: 1.05rem !important; }
.btn--ghost, [data-theme="light"] .btn--ghost {
  background: rgba(99,102,241,.08) !important;
  border: 1.5px solid rgba(99,102,241,.3) !important;
  color: var(--c-text) !important;
  padding: 14px 28px !important;
  backdrop-filter: blur(8px);
}
.btn--ghost:hover, [data-theme="light"] .btn--ghost:hover {
  border-color: var(--c-indigo) !important;
  background: rgba(99,102,241,.18) !important;
  color: #FFFFFF !important;
}
.btn--outline, [data-theme="light"] .btn--outline {
  background: transparent !important;
  border: 1.5px solid var(--c-border-3) !important;
  color: var(--c-text) !important;
}
.btn--outline:hover {
  border-color: var(--c-indigo) !important;
  background: var(--c-indigo-ll) !important;
}
.btn--full { width: 100% !important; }

/* ─── Hero ─── */
.hero, [data-theme="light"] .hero {
  background: var(--c-bg) !important;
  /* Padding tres compact : la nav fait deja ~70px, on a besoin que le
     titre + sous-titre + CTA + trust passent au-dessus du pli. */
  padding-block: clamp(20px, 3vw, 36px) clamp(32px, 4vw, 56px) !important;
  min-height: auto !important;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.hero__layout {
  display: block !important;
  max-width: 880px;
  margin-inline: auto !important;
  text-align: center;
}
.hero__copy {
  max-width: 720px;
  margin-inline: auto !important;
  text-align: center;
}
.hero__copy .hero__badge,
.hero__copy .hero__actions,
.hero__copy .hero__trust {
  justify-content: center !important;
  display: inline-flex;
}
.hero__copy .hero__actions {
  display: flex !important;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-block: var(--sp-8);
}
.hero__copy .hero__trust,
.hero .hero__trust,
ul.hero__trust {
  display: flex !important;
  flex-direction: row !important;      /* contre 'column' impose par style.css */
  flex-wrap: nowrap !important;        /* tous les items sur une seule ligne */
  white-space: nowrap;
  gap: clamp(14px, 2vw, 28px);
  font-size: 0.88rem;
  margin: var(--sp-6) auto 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  justify-content: center !important;
  align-items: center;
}
.hero__trust li {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  gap: var(--sp-2);
  margin: 0 !important;
  padding: 0 !important;
}
.hero__copy .hero__sub {
  margin-inline: auto !important;
  text-align: center;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(99,102,241,.22), transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(236,72,153,.18), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(139,92,246,.15), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero__bg-grid {
  background-image:
    linear-gradient(rgba(248,250,252,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,250,252,.04) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 30%, transparent 80%);
}
.hero__orb { display: none !important; }

.hero__h1, .hero__h1 span,
[data-theme="light"] .hero__h1, [data-theme="light"] .hero__h1 span {
  color: var(--c-text) !important;
  font-size: clamp(2.6rem, 7vw, 5.2rem) !important;
  line-height: 1.02 !important;
  margin-bottom: var(--sp-6) !important;
}
.hero__h1 .hero__gradient,
[data-theme="light"] .hero__h1 .hero__gradient {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: 'Fraunces', serif !important;
  font-style: italic;
  font-weight: 700 !important;
}
.hero__sub, [data-theme="light"] .hero__sub {
  font-size: clamp(1.08rem, 1.6vw, 1.3rem) !important;
  line-height: 1.65 !important;
  color: var(--c-text-soft) !important;
  max-width: 600px;
}
.hero__sub strong { color: #FFFFFF !important; }
.hero__sub em {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-style: italic;
  font-weight: 600;
}
.hero__badge, [data-theme="light"] .hero__badge {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--c-border-3) !important;
  color: var(--c-text-soft) !important;
  box-shadow: none !important;
  padding: 8px 18px !important;
  border-radius: var(--rd-full);
  backdrop-filter: blur(12px);
  font-size: 0.88rem;
}
.hero__badge-dot {
  background: var(--c-emerald) !important;
  box-shadow: 0 0 12px rgba(52,211,153,.6), 0 0 0 4px rgba(52,211,153,.18);
}
.hero__trust li {
  color: var(--c-text-soft) !important;
  font-size: 0.92rem;
}
.hero__trust li svg { color: var(--c-emerald) !important; }
.hero__scroll svg { color: var(--c-text-mute); }

/* ─── Marquee ─── */
.marquee-strip, [data-theme="light"] .marquee-strip {
  background: linear-gradient(90deg, var(--c-bg-alt), var(--c-surface), var(--c-bg-alt)) !important;
  color: var(--c-text) !important;
  padding-block: 16px !important;
  border-block: 1px solid var(--c-border) !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
}
.marquee__inner .mx {
  color: var(--c-indigo) !important;
  opacity: 0.5;
}

/* ─── Method steps (4 cartes) ─── */
.steps__grid { gap: var(--sp-5) !important; }
.step-card, [data-theme="light"] .step-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--rd-xl) !important;
  padding: var(--sp-8) var(--sp-6) !important;
  box-shadow: var(--sh-card);
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-mid) !important;
  position: relative;
  overflow: hidden;
}
.step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-surface);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-mid);
}
.step-card:hover, [data-theme="light"] .step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.4) !important;
  box-shadow: var(--sh-card-hover);
}
.step-card:hover::before { opacity: 1; }
.step-card__num, [data-theme="light"] .step-card__num {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 3.6rem !important;
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  opacity: 0.35 !important;
  line-height: 1 !important;
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
}
.step-card__icon, [data-theme="light"] .step-card__icon {
  display: inline-flex;
  width: 52px; height: 52px;
  align-items: center;
  justify-content: center;
  background: var(--grad-brand-2);
  border-radius: var(--rd-lg);
  margin-bottom: var(--sp-4);
  color: #FFFFFF;
  box-shadow: var(--sh-glow-indigo);
  position: relative;
  z-index: 1;
}
.step-card__icon svg { width: 24px; height: 24px; color: #FFFFFF; }
.step-card h3, [data-theme="light"] .step-card h3 {
  font-size: 1.2rem !important;
  margin-bottom: var(--sp-3) !important;
  color: var(--c-text) !important;
  position: relative;
  z-index: 1;
}
.step-card p, [data-theme="light"] .step-card p {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: var(--c-text-soft) !important;
  position: relative;
  z-index: 1;
}
.step-card p strong { color: #FFFFFF !important; }
.step-card__arrow, [data-theme="light"] .step-card__arrow {
  color: var(--c-text-mute) !important;
  font-size: 1.6rem;
  align-self: center;
  opacity: 0.5;
}

/* ─── Pricing : plan unique ─── */
.pricing__plans--single {
  display: flex !important;
  justify-content: center !important;
  grid-template-columns: none !important;
}
.plan-card--single { max-width: 600px; width: 100%; }
.plan-card, .plan-card--single, .plan-card--featured,
[data-theme="light"] .plan-card--single, [data-theme="light"] .plan-card--featured {
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface)) !important;
  border: 1px solid rgba(99,102,241,.4) !important;
  border-radius: var(--rd-2xl) !important;
  box-shadow: var(--sh-card), 0 0 60px rgba(99,102,241,.15);
  padding: var(--sp-12) var(--sp-10) !important;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.plan-card--single::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(139,92,246,.20), transparent 60%);
  pointer-events: none;
}
.plan-card__badge, [data-theme="light"] .plan-card__badge {
  display: inline-flex !important;
  align-items: center;
  background: var(--grad-brand-2) !important;
  color: #FFFFFF !important;
  padding: 8px 20px !important;
  border-radius: var(--rd-full) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  box-shadow: var(--sh-brand);
  /* Reset des éventuels position:absolute hérités du style.css principal */
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto var(--sp-6) !important;
  width: max-content;
  max-width: 100%;
}
.plan-card__name, [data-theme="light"] .plan-card__name {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  color: var(--c-text) !important;
}
.plan-card__desc { color: var(--c-text-soft) !important; }
.plan-card__price {
  display: inline-flex !important;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-2);
  margin-inline: auto !important;
}
.plan-card__amount, [data-theme="light"] .plan-card__amount {
  font-family: 'Syne', sans-serif !important;
  font-size: 5.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  line-height: 1 !important;
}
.plan-card__right {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 12px;
}
.plan-card__currency, .plan-card__period,
[data-theme="light"] .plan-card__currency, [data-theme="light"] .plan-card__period {
  color: var(--c-text-soft) !important;
}
.plan-card__launch, [data-theme="light"] .plan-card__launch {
  color: var(--c-text-mute) !important;
  font-size: 0.88rem;
}
.plan-card__features li, [data-theme="light"] .plan-card__features li {
  padding: var(--sp-2) 0 !important;
  font-size: 0.97rem !important;
  color: var(--c-text-soft) !important;
}
.plan-card__features strong, [data-theme="light"] .plan-card__features strong {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.plan-card__features svg.ci, [data-theme="light"] .plan-card__features svg.ci {
  color: var(--c-emerald) !important;
}
.plan-card__mention { color: var(--c-text-mute) !important; }

/* ─── Options grid (12 fonctionnalités) ─── */
.options-block { margin-top: var(--sp-16) !important; }
.options-block__header { text-align: center; margin-bottom: var(--sp-10); }
.options-block__header h3, [data-theme="light"] .options-block__header h3 {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.6rem !important;
  margin-bottom: var(--sp-3) !important;
  color: var(--c-text) !important;
}
.options-block__header .options-price,
[data-theme="light"] .options-block__header .options-price {
  background: var(--grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.options-block__header p {
  color: var(--c-text-soft) !important;
}
.options-grid, [data-theme="light"] .options-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  grid-auto-flow: dense !important;
  gap: var(--sp-3) !important;
  max-width: 1100px;
  margin-inline: auto;
}
.options-grid li, [data-theme="light"] .options-grid li {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
  padding: var(--sp-5) var(--sp-5) !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: var(--rd-lg) !important;
  color: var(--c-text-soft) !important;
  font-size: 0.93rem !important;
  min-height: 64px;
  transition: transform var(--t-fast) var(--ease-out),
              border-color var(--t-fast),
              background var(--t-fast) !important;
}
.options-grid li:hover {
  transform: translateY(-3px);
  background: var(--c-surface-2) !important;
  border-color: rgba(99,102,241,.4) !important;
}
.options-grid li > span[aria-hidden="true"]:first-child {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 1.5rem;
  line-height: 1;
  background: rgba(99,102,241,.1);
  border-radius: var(--rd-md);
}
.options-grid li > span:not([aria-hidden="true"]) {
  font-weight: 700 !important;
  color: var(--c-text) !important;
  line-height: 1.35 !important;
}
.options-promo { color: var(--c-text-soft) !important; }
.options-promo strong { color: var(--c-text) !important; }
/* pastille verte : force le fond et la bordure malgré les overrides .options-grid li */
.options-grid li.options-promo--inline,
[data-theme="light"] .options-grid li.options-promo--inline,
html[data-theme="light"] .options-grid li.options-promo--inline {
  grid-column: span 2 !important;
  justify-self: stretch !important;
  width: 100% !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #047857 0%, #059669 60%, #10B981 100%) !important;
  border: 1.5px solid #10B981 !important;
  border-color: #10B981 !important;
  box-shadow:
    0 0 0 1px rgba(5,150,105,.25),
    0 10px 28px -6px rgba(5,150,105,.55),
    0 0 32px rgba(5,150,105,.30) !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .options-grid li.options-promo--inline,
html[data-theme="dark"] .options-grid li.options-promo--inline,
.options-grid li.options-promo--inline:not([data-theme]) {
  background: linear-gradient(135deg, #059669 0%, #10B981 60%, #34D399 100%) !important;
  border: 1.5px solid #34D399 !important;
  border-color: #34D399 !important;
  box-shadow:
    0 0 0 1px rgba(16,185,129,.30),
    0 10px 28px -6px rgba(16,185,129,.60),
    0 0 36px rgba(16,185,129,.40) !important;
}
.options-grid li.options-promo--inline strong { color: #FFFFFF !important; font-weight: 800 !important; }
.options-grid li.options-promo--inline:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
}
@media (max-width: 480px) {
  .options-grid li.options-promo--inline { grid-column: span 1 !important; }
}

/* ─── FAQ ─── */
.faq__list, [data-theme="light"] .faq__list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.faq__item, [data-theme="light"] .faq__item {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: var(--rd-lg) !important;
  overflow: hidden;
  transition: all var(--t-fast);
}
.faq__item:hover { border-color: rgba(99,102,241,.3) !important; }
.faq__item[open], [data-theme="light"] .faq__item[open] {
  border-color: rgba(99,102,241,.5) !important;
  background: var(--c-surface-2) !important;
  box-shadow: var(--sh-glow-indigo);
}
.faq__q, [data-theme="light"] .faq__q {
  padding: var(--sp-5) var(--sp-6) !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  font-size: 1rem !important;
  cursor: pointer;
  font-family: 'Inter', sans-serif !important;
}
.faq__chev, [data-theme="light"] .faq__chev {
  color: var(--c-indigo) !important;
  transition: transform var(--t-mid) var(--ease-out);
}
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a, .faq__a p, [data-theme="light"] .faq__a, [data-theme="light"] .faq__a p {
  padding: 0 var(--sp-6) var(--sp-5) !important;
  color: var(--c-text-soft) !important;
  line-height: 1.75 !important;
}
.faq__a strong, .faq__a p strong { color: #FFFFFF !important; }
.faq__a a { color: var(--c-indigo) !important; text-decoration: underline; }

/* ─── Cfg section (Commander) ─── */
.cfg-section, [data-theme="light"] .cfg-section {
  background: linear-gradient(135deg, var(--c-bg) 0%, var(--c-surface) 60%, var(--c-bg-alt) 100%) !important;
  position: relative;
  overflow: hidden;
}
.cfg-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(99,102,241,.20), transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(236,72,153,.15), transparent 50%);
  pointer-events: none;
}
.cfg-section > .container { position: relative; z-index: 1; }

/* ─── Sectors / Gallery cards ─── */
.gallery-card, [data-theme="light"] .gallery-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: var(--rd-xl) !important;
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: all var(--t-mid) var(--ease-out) !important;
}
.gallery-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--sh-card-hover);
  border-color: rgba(99,102,241,.4) !important;
}
.gallery-card__sector { color: var(--c-text) !important; }
.gallery-card__metier { color: var(--c-text-soft) !important; }

.sector-card, [data-theme="light"] .sector-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: var(--rd-lg) !important;
  padding: var(--sp-6) var(--sp-5) !important;
  transition: all var(--t-mid) var(--ease-out);
  text-align: center;
  color: var(--c-text-soft);
}
.sector-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,.4) !important;
  background: var(--c-surface-2) !important;
}
.sector-card h3 { color: var(--c-text) !important; }

/* ─── Eco cards ─── */
.eco-card, [data-theme="light"] .eco-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: var(--rd-xl) !important;
  padding: var(--sp-8) !important;
  box-shadow: var(--sh-card);
  transition: all var(--t-mid) var(--ease-out) !important;
}
.eco-card:hover {
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: var(--sh-card-hover);
}
.eco-card__title { font-family: 'Syne', sans-serif !important; font-size: 1.35rem !important; color: var(--c-text) !important; }
.eco-card__lead, .eco-card__features li, .eco-card__hint {
  color: var(--c-text-soft) !important;
  line-height: 1.7 !important;
}
.eco-card__brand, .eco-card__badge, .eco-card__price {
  color: var(--c-text) !important;
}
.eco-card__badge {
  background: var(--c-indigo-ll) !important;
  color: var(--c-indigo) !important;
  border: 1px solid rgba(99,102,241,.25);
}

/* ─── Guarantee ─── */
.guarantee__card, [data-theme="light"] .guarantee__card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
  border-radius: var(--rd-xl) !important;
  padding: var(--sp-8) var(--sp-6) !important;
  box-shadow: var(--sh-card);
  transition: all var(--t-mid);
}
.guarantee__card:hover {
  transform: translateY(-4px);
  border-color: rgba(99,102,241,.3) !important;
}
.guarantee__card h3 { color: var(--c-text) !important; }
.guarantee__card p { color: var(--c-text-soft) !important; }
.guarantee__card p strong { color: #FFFFFF !important; }

/* ─── Partners ─── */
.partners__logo {
  color: var(--c-text-mute) !important;
  opacity: .7;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.partners__logo:hover { opacity: 1; color: var(--c-text) !important; }

/* ─── Market ─── */
.market-table {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
}
.market-row { border-bottom-color: var(--c-border-2) !important; }
.market-cell { color: var(--c-text-soft) !important; }
.market-cell strong { color: var(--c-text) !important; }

/* ─── Footer ─── */
.footer, [data-theme="light"] .footer {
  background: #050616 !important;
  color: var(--c-text-mute) !important;
  padding-block: var(--sp-16) var(--sp-8) !important;
  border-top: 1px solid var(--c-border-2);
}
.footer h4, [data-theme="light"] .footer h4 {
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: var(--sp-4) !important;
}
.footer a, .footer p, [data-theme="light"] .footer a, [data-theme="light"] .footer p {
  color: var(--c-text-mute) !important;
  font-size: 0.92rem;
  line-height: 1.8;
}
.footer a:hover, [data-theme="light"] .footer a:hover {
  color: var(--c-indigo) !important;
}
.footer__bottom {
  border-top: 1px solid var(--c-border-2);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  color: var(--c-text-dim) !important;
  font-size: 0.85rem;
}

/* ─── Social rail (icônes flottantes Facebook/Insta/X) ─── */
.social-rail__link, [data-theme="light"] .social-rail__link {
  background: var(--c-surface) !important;
  color: var(--c-text-soft) !important;
  border: 1px solid var(--c-border-2) !important;
  box-shadow: var(--sh-soft);
  transition: all var(--t-fast) var(--ease-out);
}
.social-rail__link:hover, [data-theme="light"] .social-rail__link:hover {
  background: var(--grad-brand-2) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  transform: translateX(4px);
}

/* ─── Reveal animations ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.reveal.is-visible, .reveal[data-revealed="true"] {
  opacity: 1;
  transform: none;
}
html.no-js .reveal, .reveal:not([data-revealed]) {
  opacity: 1;
  transform: none;
}

/* ─── Reward / Perk cards (si présentes) ─── */
.reward-card {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-2) !important;
  color: var(--c-text-soft) !important;
}
.reward-card__title { color: var(--c-text) !important; }

/* ─── Theme toggle (ampoule) : visible pour basculer clair / sombre ─── */
#themeToggle, .theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: var(--rd-full);
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  color: var(--c-text) !important;
  cursor: pointer;
  z-index: 50;
  box-shadow: var(--sh-card);
  transition: all var(--t-fast) var(--ease-out);
}
#themeToggle:hover, .theme-toggle:hover {
  transform: translateY(-2px);
  border-color: var(--c-indigo) !important;
  box-shadow: var(--sh-card-hover);
}
.lang-sw, #langSwitcher { display: none !important; }

/* ─── Contact section ─── */
.contact, .contact__box {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border-radius: var(--rd-2xl);
}
.contact a { color: var(--c-indigo) !important; }

/* ─── Hero CTAs override (s'assurer que les boutons sont visibles) ─── */
.hero__actions .btn--primary,
.hero__actions a.btn--primary {
  background: var(--grad-brand-2) !important;
  color: #FFFFFF !important;
}
.hero__actions .btn--ghost {
  background: rgba(99,102,241,.08) !important;
  border: 1.5px solid rgba(99,102,241,.35) !important;
  color: var(--c-text) !important;
}
.hero__actions a.btn--primary em,
.hero__actions a.btn--primary i,
a.btn--primary em, a.btn--primary i,
.btn em, .btn i, .nav__cta em, .nav__cta i {
  color: #FFFFFF !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-style: italic;
  opacity: 0.9;
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-weight: 500;
}

/* ─── Mobile responsive ─── */
@media (max-width: 880px) {
  .step-card__arrow { display: none; }
  .steps__grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   MODE CLAIR — override quand <html data-theme="light">
   Inverse les surfaces : fond clair, surfaces blanches, texte sombre.
   ============================================================ */
html[data-theme="light"] {
  --c-bg:         #FBF8F2;
  --c-bg-alt:     #F5F1E8;
  --c-bg-section: #FBF8F2;
  --c-surface:    #FFFFFF;
  --c-surface-2:  #FAFAFA;
  --c-surface-3:  #F1F5F9;
  --c-border:     rgba(15, 23, 42, 0.1);
  --c-border-2:   rgba(15, 23, 42, 0.08);
  --c-border-3:   rgba(15, 23, 42, 0.12);
  --c-text:       #0F172A;
  --c-text-soft:  #334155;
  --c-text-mute:  #64748B;
  --c-text-dim:   #94A3B8;
  --c-indigo-ll:  rgba(99, 102, 241, 0.08);
  --grad-surface: linear-gradient(180deg, rgba(99,102,241,.02), rgba(99,102,241,0));
  --sh-soft:      0 4px 16px rgba(15,23,42,.06);
  --sh-card:      0 4px 20px rgba(15,23,42,.06), 0 1px 0 rgba(255,255,255,.6) inset;
  --sh-card-hover:0 12px 36px rgba(15,23,42,.10), 0 0 0 1px rgba(99,102,241,.2) inset;
  --sh-glow-indigo: 0 0 30px rgba(99,102,241,.15);
}
html[data-theme="light"] body {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
}
html[data-theme="light"] .hero {
  background: var(--c-bg) !important;
}
html[data-theme="light"] .hero__h1 {
  color: var(--c-text) !important;
}
html[data-theme="light"] .hero__sub {
  color: var(--c-text-soft) !important;
}
html[data-theme="light"] .hero__sub strong { color: var(--c-text) !important; }
html[data-theme="light"] .hero__badge {
  background: #FFFFFF !important;
  border-color: var(--c-border) !important;
  color: var(--c-text-soft) !important;
  box-shadow: var(--sh-soft) !important;
}
html[data-theme="light"] .hero__trust li { color: var(--c-text-soft) !important; }
html[data-theme="light"] .hero__bg-grid {
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px) !important;
}

html[data-theme="light"] section:nth-of-type(2n) {
  background: var(--c-bg-alt) !important;
}

html[data-theme="light"] .nav {
  background: rgba(251, 248, 242, 0.85) !important;
  border-bottom: 1px solid var(--c-border) !important;
}
html[data-theme="light"] .nav__logo, html[data-theme="light"] .nav__logo .logo-word { color: var(--c-text) !important; }
html[data-theme="light"] .nav__link { color: var(--c-text-soft) !important; }
html[data-theme="light"] .nav__link:hover { color: var(--c-text) !important; }

html[data-theme="light"] .step-card,
html[data-theme="light"] .plan-card,
html[data-theme="light"] .plan-card--single,
html[data-theme="light"] .plan-card--featured,
html[data-theme="light"] .options-grid li,
html[data-theme="light"] .faq__item,
html[data-theme="light"] .eco-card,
html[data-theme="light"] .guarantee__card,
html[data-theme="light"] .gallery-card,
html[data-theme="light"] .sector-card {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  box-shadow: var(--sh-card);
}
html[data-theme="light"] .plan-card,
html[data-theme="light"] .plan-card--single,
html[data-theme="light"] .plan-card--featured {
  background: linear-gradient(180deg, #FFFFFF, #FAFAFA) !important;
  border: 2px solid rgba(99,102,241,.3) !important;
}
html[data-theme="light"] .step-card h3,
html[data-theme="light"] .options-grid li > span:not([aria-hidden="true"]),
html[data-theme="light"] .faq__q,
html[data-theme="light"] .plan-card__name,
html[data-theme="light"] .plan-card__features strong,
html[data-theme="light"] .step-card p strong,
html[data-theme="light"] .faq__a strong,
html[data-theme="light"] .hero__sub strong,
html[data-theme="light"] strong {
  color: var(--c-text) !important;
}
html[data-theme="light"] .step-card p,
html[data-theme="light"] .faq__a, html[data-theme="light"] .faq__a p,
html[data-theme="light"] .plan-card__features li,
html[data-theme="light"] .eco-card__lead,
html[data-theme="light"] .guarantee__card p,
html[data-theme="light"] .section__sub,
html[data-theme="light"] p, html[data-theme="light"] .lead {
  color: var(--c-text-soft) !important;
}
html[data-theme="light"] .marquee-strip {
  background: linear-gradient(90deg, #0F172A, #1E1B4B, #0F172A) !important;
  color: #F8FAFC !important;
}
html[data-theme="light"] .cfg-section {
  background: linear-gradient(135deg, #0F172A, #1E1B4B) !important;
}
html[data-theme="light"] .cfg-section .section__title,
html[data-theme="light"] .cfg-section h1, html[data-theme="light"] .cfg-section h2 {
  color: #FFFFFF !important;
}
html[data-theme="light"] .cfg-section .section__sub,
html[data-theme="light"] .cfg-section p { color: rgba(248,250,252,.85) !important; }
html[data-theme="light"] .footer { background: #0F172A !important; color: var(--c-text-dim) !important; }
html[data-theme="light"] .footer h4 { color: #FFFFFF !important; }
html[data-theme="light"] .footer a { color: var(--c-text-dim) !important; }
html[data-theme="light"] .footer a:hover { color: var(--c-indigo) !important; }
html[data-theme="light"] #themeToggle {
  background: #FFFFFF !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}
html[data-theme="light"] .social-rail__link {
  background: #FFFFFF !important;
  color: var(--c-text-soft) !important;
  border-color: var(--c-border) !important;
}
html[data-theme="light"] .options-grid li > span[aria-hidden="true"]:first-child {
  background: var(--c-indigo-ll) !important;
}

/* ════════════════════════════════════════════════════════════════
   FIXES LISIBILITE & RESTYLING — 2026-05-17
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. Configurateur : panel accordé au CTA primary, plus de blanc qui détonne ─── */
.cta-block {
  position: relative !important;
  max-width: 720px !important;
  margin: 32px auto 0 !important;
  padding: 44px 36px !important;
  border-radius: 22px !important;
  text-align: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(139, 92, 246, .22) 0%, rgba(99, 102, 241, .14) 30%, transparent 60%),
    linear-gradient(160deg, rgba(99, 102, 241, .10) 0%, rgba(139, 92, 246, .06) 50%, rgba(15, 15, 28, .55) 100%),
    rgba(15, 15, 28, .55) !important;
  border: 1px solid rgba(139, 92, 246, .28) !important;
  box-shadow:
    0 24px 60px -12px rgba(99, 102, 241, .35),
    0 4px 16px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.cta-block::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, .45), rgba(99, 102, 241, .15) 50%, rgba(139, 92, 246, .35)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  pointer-events: none !important;
  opacity: .9 !important;
}
.cta-block__lead,
.cta-block__lead strong {
  color: #F1F5F9 !important;
}
.cta-block__hint { color: rgba(203, 213, 225, .75) !important; }
.cta-block__hint strong { color: #F1F5F9 !important; }

/* Thème intermédiaire (dim) : on garde l'esprit, contraste un peu plus doux */
html[data-theme="dim"] .cta-block {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(139, 92, 246, .16) 0%, rgba(99, 102, 241, .10) 30%, transparent 60%),
    linear-gradient(160deg, rgba(99, 102, 241, .07) 0%, rgba(139, 92, 246, .04) 50%, rgba(30, 30, 48, .70) 100%),
    rgba(30, 30, 48, .70) !important;
  border-color: rgba(139, 92, 246, .22) !important;
}

/* Thème clair : panel blanc cassé avec halo violet doux, texte sombre */
html[data-theme="light"] .cta-block {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(139, 92, 246, .10) 0%, rgba(99, 102, 241, .05) 35%, transparent 60%),
    #FFFFFF !important;
  border: 1px solid rgba(99, 102, 241, .22) !important;
  box-shadow:
    0 24px 60px -12px rgba(99, 102, 241, .22),
    0 4px 16px rgba(15, 23, 42, .06),
    inset 0 1px 0 rgba(255, 255, 255, .8) !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .cta-block__lead,
html[data-theme="light"] .cta-block__lead strong,
html[data-theme="light"] .cfg-section .cta-block,
html[data-theme="light"] .cfg-section .cta-block p,
html[data-theme="light"] .cfg-section .cta-block strong,
html[data-theme="light"] .cfg-section .cta-block__lead,
html[data-theme="light"] .cfg-section .cta-block__lead strong {
  color: #0F172A !important;
}
html[data-theme="light"] .cfg-section .cta-block__hint,
html[data-theme="light"] .cta-block__hint { color: #475569 !important; }
html[data-theme="light"] .cfg-section .cta-block__hint strong,
html[data-theme="light"] .cta-block__hint strong { color: #0F172A !important; }

/* ─── 2. Footer : remonter le contraste + logo lisible sur fond sombre ─── */
.footer,
html[data-theme="light"] .footer {
  background: linear-gradient(180deg, #0A0B1E 0%, #050616 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.footer .footer__copy,
html[data-theme="light"] .footer .footer__copy {
  color: rgba(226, 232, 240, 0.72) !important;
  font-size: 0.9rem !important;
  line-height: 1.75 !important;
}
.footer .footer__copy strong,
html[data-theme="light"] .footer .footer__copy strong {
  color: #F8FAFC !important;
  font-weight: 600 !important;
}
.footer .footer__tagline,
html[data-theme="light"] .footer .footer__tagline {
  color: #F8FAFC !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  margin-bottom: 14px !important;
}
.footer .footer__bottom p,
html[data-theme="light"] .footer .footer__bottom p {
  color: rgba(148, 163, 184, 0.7) !important;
}
.footer a, html[data-theme="light"] .footer a {
  color: rgba(203, 213, 225, 0.85) !important;
  transition: color .2s ease;
}
.footer a:hover, html[data-theme="light"] .footer a:hover {
  color: #FFFFFF !important;
}
/* Logo dans le footer : toujours clair, peu importe le theme */
.footer .nav__logo,
.footer .nav__logo .logo-word,
html[data-theme="light"] .footer .nav__logo,
html[data-theme="light"] .footer .nav__logo .logo-word {
  color: #F8FAFC !important;
}
.footer .nav__logo .logo-dot,
html[data-theme="light"] .footer .nav__logo .logo-dot,
[data-theme="dim"] .footer .nav__logo .logo-dot {
  color: #E8D9B0 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
.footer .footer__social-link,
html[data-theme="light"] .footer .footer__social-link {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(226, 232, 240, 0.85) !important;
  width: 38px; height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all .25s ease;
}
.footer .footer__social-link:hover,
html[data-theme="light"] .footer .footer__social-link:hover {
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
}

/* ─── 3. Carte Eliks : restyling chic (moins bricolage) ─── */
.eco-card--eliks,
[data-theme="light"] .eco-card--eliks,
html[data-theme="light"] .eco-card--eliks {
  background:
    linear-gradient(155deg, rgba(99, 102, 241, 0.04) 0%, transparent 45%),
    var(--c-surface) !important;
  border: 1px solid rgba(99, 102, 241, 0.18) !important;
  border-radius: 22px !important;
  padding: 36px 32px !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  position: relative;
  overflow: hidden;
}
.eco-card--eliks::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.eco-card--eliks > * { position: relative; z-index: 1; }
.eco-card--eliks:hover {
  transform: translateY(-6px);
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 30px 70px rgba(99, 102, 241, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
.eco-card--eliks .eco-card__head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
}
.eco-card--eliks .eco-card__brand {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
}
.eco-card--eliks .eco-card__logo {
  width: 48px !important; height: 48px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.28), 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}
.eco-card--eliks .eco-card__badge,
[data-theme="light"] .eco-card--eliks .eco-card__badge,
html[data-theme="light"] .eco-card--eliks .eco-card__badge {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.14)) !important;
  color: #6366F1 !important;
  border: 1px solid rgba(99, 102, 241, 0.32) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
}
.eco-card--eliks .eco-card__price,
html[data-theme="light"] .eco-card--eliks .eco-card__price {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.12), rgba(99, 102, 241, 0.10)) !important;
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #047857 !important;
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.eco-card--eliks .eco-card__price strong,
html[data-theme="light"] .eco-card--eliks .eco-card__price strong {
  color: #047857 !important;
  font-weight: 700 !important;
}
.eco-card--eliks .eco-card__price::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  flex-shrink: 0;
}
.eco-card--eliks .eco-card__title,
html[data-theme="light"] .eco-card--eliks .eco-card__title {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 14px !important;
}
.eco-card--eliks .eco-card__lead,
html[data-theme="light"] .eco-card--eliks .eco-card__lead {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}
.eco-card--eliks .eco-card__features {
  margin: 0 0 28px !important;
  gap: 12px !important;
}
.eco-card--eliks .eco-card__features li {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.93rem !important;
  line-height: 1.55 !important;
  color: var(--c-text-soft) !important;
}
.eco-card--eliks .eco-card__features li > svg {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 4px;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  color: #6366F1 !important;
  box-sizing: border-box;
}
.eco-card--eliks .eco-card__cta,
html[data-theme="light"] .eco-card--eliks .eco-card__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 13px 26px !important;
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.32), 0 2px 4px rgba(99, 102, 241, 0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.eco-card--eliks .eco-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(99, 102, 241, 0.42), 0 2px 6px rgba(99, 102, 241, 0.22);
}
.eco-card--eliks .eco-card__cta svg {
  width: 14px; height: 14px;
  color: #FFFFFF !important;
}
.eco-card--eliks .eco-card__hint,
html[data-theme="light"] .eco-card--eliks .eco-card__hint {
  display: block !important;
  margin-top: 14px !important;
  font-size: 0.78rem !important;
  color: var(--c-text-mute) !important;
}

/* ─── RankUs Studio : déclinaison émeraude ─── */
.eco-card--rankus,
[data-theme="light"] .eco-card--rankus,
html[data-theme="light"] .eco-card--rankus {
  background:
    linear-gradient(155deg, rgba(46, 173, 111, 0.06) 0%, transparent 45%),
    var(--c-surface) !important;
  border: 1px solid rgba(46, 173, 111, 0.22) !important;
  border-radius: 22px !important;
  padding: 36px 32px !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  position: relative;
  overflow: hidden;
}
.eco-card--rankus::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at top right, rgba(46, 173, 111, 0.14), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.eco-card--rankus > * { position: relative; z-index: 1; }
.eco-card--rankus:hover {
  transform: translateY(-6px);
  border-color: rgba(46, 173, 111, 0.45) !important;
  box-shadow: 0 30px 70px rgba(46, 173, 111, 0.20), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
.eco-card--rankus .eco-card__head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.eco-card--rankus .eco-card__brand {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
}
.eco-card--rankus .eco-card__logo {
  width: 48px !important; height: 48px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(46, 173, 111, 0.32), 0 1px 3px rgba(15, 23, 42, 0.1) !important;
}
.eco-card--rankus .eco-card__badge,
[data-theme="light"] .eco-card--rankus .eco-card__badge,
html[data-theme="light"] .eco-card--rankus .eco-card__badge {
  background: linear-gradient(90deg, rgba(46, 173, 111, 0.16), rgba(91, 212, 154, 0.14)) !important;
  color: #2EAD6F !important;
  border: 1px solid rgba(46, 173, 111, 0.38) !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
}
html[data-theme="dark"] .eco-card--rankus .eco-card__badge,
.eco-card--rankus .eco-card__badge {
  color: #5BD49A !important;
}
.eco-card--rankus .eco-card__price,
html[data-theme="light"] .eco-card--rankus .eco-card__price {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  background: linear-gradient(90deg, rgba(46, 173, 111, 0.14), rgba(201, 161, 74, 0.10)) !important;
  border: 1px solid rgba(46, 173, 111, 0.32);
  color: #1B7849 !important;
  font-size: 0.78rem !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.eco-card--rankus .eco-card__price strong,
html[data-theme="light"] .eco-card--rankus .eco-card__price strong {
  color: #1B7849 !important;
  font-weight: 700 !important;
}
.eco-card--rankus .eco-card__price::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2EAD6F;
  box-shadow: 0 0 0 3px rgba(46, 173, 111, 0.20);
  flex-shrink: 0;
}
.eco-card--rankus .eco-card__title,
html[data-theme="light"] .eco-card--rankus .eco-card__title {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 14px !important;
}
.eco-card--rankus .eco-card__lead,
html[data-theme="light"] .eco-card--rankus .eco-card__lead {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}
.eco-card--rankus .eco-card__features {
  margin: 0 0 28px !important;
  gap: 12px !important;
}
.eco-card--rankus .eco-card__features li {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.93rem !important;
  line-height: 1.55 !important;
  color: var(--c-text-soft) !important;
}
.eco-card--rankus .eco-card__features li > svg {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 4px;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  background: rgba(46, 173, 111, 0.14);
  color: #2EAD6F !important;
  box-sizing: border-box;
}
.eco-card--rankus .eco-card__cta,
html[data-theme="light"] .eco-card--rankus .eco-card__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 13px 26px !important;
  background: linear-gradient(135deg, #1B7849 0%, #2EAD6F 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 10px 24px rgba(46, 173, 111, 0.36), 0 2px 4px rgba(46, 173, 111, 0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.eco-card--rankus .eco-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(46, 173, 111, 0.46), 0 2px 6px rgba(46, 173, 111, 0.22);
}
.eco-card--rankus .eco-card__cta svg {
  width: 14px; height: 14px;
  color: #FFFFFF !important;
}
.eco-card--rankus .eco-card__hint,
html[data-theme="light"] .eco-card--rankus .eco-card__hint {
  display: block !important;
  margin-top: 14px !important;
  font-size: 0.78rem !important;
  color: var(--c-text-mute) !important;
}

/* ════════════════════════════════════════════════════════════════
   COMPACT FAQ + SOCIAL RAIL HALO + SECTORS POP — 2026-05-17 v2
   ════════════════════════════════════════════════════════════════ */

/* ─── FAQ compacte : 2 colonnes sur desktop, items plus serres ─── */
.faq__list,
[data-theme="light"] .faq__list,
html[data-theme="light"] .faq__list {
  max-width: 1100px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: start !important;
}
.faq__item,
[data-theme="light"] .faq__item,
html[data-theme="light"] .faq__item {
  background: rgba(15, 23, 42, 0.02) !important;
  border: 1px solid rgba(99, 102, 241, 0.12) !important;
  border-radius: 12px !important;
  align-self: start;
}
.faq__item:hover {
  border-color: rgba(99, 102, 241, 0.32) !important;
  background: rgba(99, 102, 241, 0.04) !important;
}
.faq__item[open],
html[data-theme="light"] .faq__item[open] {
  border-color: rgba(99, 102, 241, 0.45) !important;
  background: rgba(99, 102, 241, 0.06) !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08) !important;
}
.faq__q,
html[data-theme="light"] .faq__q {
  padding: 14px 18px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  gap: 12px;
}
.faq__chev { width: 16px; height: 16px; flex-shrink: 0; }
.faq__a,
.faq__a p,
html[data-theme="light"] .faq__a,
html[data-theme="light"] .faq__a p {
  padding: 0 18px 14px !important;
  font-size: 0.86rem !important;
  line-height: 1.6 !important;
}
@media (max-width: 768px) {
  .faq__list, html[data-theme="light"] .faq__list {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Social rail : halo lumineux derriere chaque bouton ─── */
.social-rail__link,
html[data-theme="light"] .social-rail__link {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.18),
    0 0 24px rgba(99, 102, 241, 0.28),
    0 0 50px rgba(139, 92, 246, 0.18) !important;
}
.social-rail__link::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.18) 40%, transparent 70%);
  z-index: -1;
  opacity: 0.65;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.social-rail__link--fb::before { background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.18) 45%, transparent 75%); }
.social-rail__link--ig::before { background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, rgba(168, 85, 247, 0.18) 45%, transparent 75%); }
.social-rail__link--tw::before { background: radial-gradient(circle, rgba(148, 163, 184, 0.35) 0%, rgba(99, 102, 241, 0.18) 45%, transparent 75%); }
.social-rail__link:hover::before {
  opacity: 1;
  transform: scale(1.15);
}
.social-rail__link--fb { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25), 0 0 24px rgba(59, 130, 246, 0.32), 0 0 50px rgba(59, 130, 246, 0.18) !important; }
.social-rail__link--ig { box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.25), 0 0 24px rgba(236, 72, 153, 0.32), 0 0 50px rgba(168, 85, 247, 0.2) !important; }
.social-rail__link--tw { box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25), 0 0 24px rgba(148, 163, 184, 0.28), 0 0 50px rgba(99, 102, 241, 0.18) !important; }

/* ─── Sectors : les boutons doivent ressortir plus ─── */
.sector-item,
[data-theme="light"] .sector-item,
html[data-theme="light"] .sector-item {
  background: linear-gradient(155deg, rgba(99, 102, 241, 0.06) 0%, rgba(15, 23, 42, 0.4) 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  color: #E2E8F0 !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all .25s ease !important;
}
.sector-item:hover,
html[data-theme="light"] .sector-item:hover {
  border-color: rgba(99, 102, 241, 0.55) !important;
  background: linear-gradient(155deg, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0.04) 100%) !important;
  color: #FFFFFF !important;
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(99, 102, 241, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sector-item .sector-icon,
html[data-theme="light"] .sector-item .sector-icon {
  width: 20px !important;
  height: 20px !important;
  color: #818CF8 !important;
}
.sector-item:hover .sector-icon,
html[data-theme="light"] .sector-item:hover .sector-icon {
  color: #A78BFA !important;
}