/* ============================================================
   Formation IA — formation.css
   Thème « dark-violet » : sombre violet profond + accents pastel
   (violet lavande + or doux, clin d'œil aux étoiles européennes).
   Chargé APRÈS eokin.css (bibliothèque de composants, inchangée)
   et AVANT site.css. Typo : Space Grotesk (titres) + Inter (texte).
   ============================================================ */

[data-theme="dark-violet"] {
  --color-scheme: dark;

  /* --- Surfaces --- */
  --bg-primary: #17122A;   /* canvas + cartes            */
  --bg-soft:    #110D20;   /* sections en retrait        */
  --bg-cream:   #140F24;   /* sections alternées         */
  --bg-deep:    #0C0918;   /* footer / sections sombres  */

  /* --- Violet pastel (couleur principale) --- */
  --primary: #C4B5FD;
  --primary-hover: #DCD2FF;
  --primary-soft: rgba(196, 181, 253, 0.14);
  --primary-deep: #8B7CF0;

  /* --- Or pastel (accent secondaire) --- */
  --secondary: #C66240;
  --secondary-hover: #D97B5A;
  --secondary-soft: rgba(198, 98, 64, 0.16);
  --secondary-deep: #A34E33;
  /* Or réservé au clin d'œil « étoiles UE » du hero */
  --gold: #F5C97B;
  --gold-soft: rgba(245, 201, 123, 0.14);

  /* --- Surface accent (ex-bleu nuit) : violet nuit --- */
  --accent-blue: #221A40;
  --accent-blue-hover: #2C2254;
  --accent-blue-soft: rgba(139, 124, 240, 0.20);

  /* --- Textes --- */
  --text-primary: #F1EEFA;
  --text-secondary: #ABA3C6;
  --text-muted: #6F678E;
  --text-on-dark: #F1EEFA;
  --text-on-dark-mute: #B4ACCC;

  /* --- Bordures --- */
  --border-fine: rgba(226, 218, 255, 0.10);
  --border-soft: rgba(226, 218, 255, 0.05);
  --border-strong: rgba(226, 218, 255, 0.20);

  /* --- Surfaces adaptatives --- */
  --surface-glass: rgba(17, 13, 32, 0.82);
  --surface-overlay: rgba(26, 20, 44, 0.96);
  --glass-border: rgba(226, 218, 255, 0.07);
  --halo-blend: screen;
  --grain-opacity: 0.035;

  /* --- Ombres --- */
  --shadow-sm: 0 1px 2px rgba(4, 2, 12, 0.5);
  --shadow-md: 0 6px 20px rgba(4, 2, 12, 0.5);
  --shadow-lg: 0 18px 44px -14px rgba(4, 2, 12, 0.65);
  --shadow-xl: 0 30px 60px -20px rgba(4, 2, 12, 0.78);

  /* --- Typographie du thème --- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-title: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-ui: 'Inter', -apple-system, system-ui, sans-serif;

  color-scheme: dark;
  accent-color: var(--primary);
}

/* ------------------------------------------------------------
   Typographie : la maquette d'origine emploie un serif italique
   pour les titres. Space Grotesk n'a pas d'italique : on repasse
   les displays en droit, plus dense, plus « produit ».
   ------------------------------------------------------------ */
[data-theme="dark-violet"] :is(
  h1, .h1, h2, .h2, .h-display,
  .subtitle, .page-hero__sub,
  .big-quote, .brand__name, .nav__mobile-link,
  .galaxy__core strong, .galaxy__planet h3,
  .journey__step h4, .layers__title,
  .pillar h3, .pillar__num, .value h3,
  .convictions li, .hero-split__media[data-placeholder]::after
) {
  font-style: normal;
}

[data-theme="dark-violet"] h1,
[data-theme="dark-violet"] .h1,
[data-theme="dark-violet"] .h-display {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

[data-theme="dark-violet"] h2,
[data-theme="dark-violet"] .h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

[data-theme="dark-violet"] h3,
[data-theme="dark-violet"] .h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-theme="dark-violet"] .subtitle,
[data-theme="dark-violet"] .page-hero__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.55;
}

[data-theme="dark-violet"] body {
  font-size: 16.5px;
  letter-spacing: 0;
}

/* Mise en avant <em> dans les titres : violet pastel, sans italique */
[data-theme="dark-violet"] h1 em,
[data-theme="dark-violet"] .h1 em,
[data-theme="dark-violet"] .h-display em,
[data-theme="dark-violet"] .page-hero__title em {
  font-style: normal;
  color: var(--primary);
}

/* Eyebrow : reste en capitales, teinte violette */
[data-theme="dark-violet"] .eyebrow {
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* ------------------------------------------------------------
   Composants — ajustements au thème violet
   ------------------------------------------------------------ */

/* Boutons : texte sombre sur pastels pour un contraste AA */
[data-theme="dark-violet"] .btn--primary {
  color: #1B1433;
  font-weight: 600;
}
[data-theme="dark-violet"] .btn--primary:hover {
  color: #14102A;
}
[data-theme="dark-violet"] .skip-link {
  color: #1B1433;
}

/* Marque : léger halo violet sur le nom du site */
[data-theme="dark-violet"] .brand__name {
  text-shadow: 0 0 22px rgba(196, 181, 253, 0.30);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Carte « premium » (cartes tarifs mises en avant) */
[data-theme="dark-violet"] .space--premium {
  background: linear-gradient(165deg, #2A2050, #1B1438);
  border-color: rgba(196, 181, 253, 0.30);
}

/* Avatars témoignages */
[data-theme="dark-violet"] .testimonial__avatar {
  color: var(--primary);
  background: linear-gradient(135deg, var(--primary-soft), var(--secondary-soft));
}

/* Placeholder photo : lisible sur fond sombre */
[data-theme="dark-violet"] .founder__photo::after {
  color: rgba(241, 238, 250, 0.4);
}

/* Halos : dégradés violets / dorés doux */
[data-theme="dark-violet"] .halo--primary {
  background: radial-gradient(circle, rgba(139, 124, 240, 0.34) 0%, rgba(139, 124, 240, 0) 65%);
}
[data-theme="dark-violet"] .halo--secondary { background: radial-gradient(circle, rgba(198, 98, 64, 0.2) 0%, transparent 70%); }

/* Sélection de texte + focus clavier */
[data-theme="dark-violet"] ::selection {
  background: rgba(196, 181, 253, 0.32);
  color: #FFFFFF;
}
[data-theme="dark-violet"] :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Champs de formulaire */
[data-theme="dark-violet"] .contact-form input:focus,
[data-theme="dark-violet"] .contact-form textarea:focus,
[data-theme="dark-violet"] .nl-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.18);
}

/* Barre de défilement discrète */
[data-theme="dark-violet"] ::-webkit-scrollbar { width: 10px; }
[data-theme="dark-violet"] ::-webkit-scrollbar-track { background: var(--bg-deep); }
[data-theme="dark-violet"] ::-webkit-scrollbar-thumb {
  background: #332A55;
  border-radius: 8px;
  border: 2px solid var(--bg-deep);
}
[data-theme="dark-violet"] ::-webkit-scrollbar-thumb:hover { background: #473C74; }


/* ============================================================
   Header — transitions & dégradés
   ============================================================ */
[data-theme="dark-violet"] .site-header {
  background: linear-gradient(180deg, rgba(20, 15, 36, 0.94) 0%, rgba(20, 15, 36, 0.72) 100%);
  border-bottom: none;
  transition: background 0.4s var(--ease);
}
[data-theme="dark-violet"] .site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196, 181, 253, 0.55) 30%,
    rgba(198, 98, 64, 0.55) 70%,
    transparent 100%);
  background-size: 220% 100%;
  animation: fia-header-line 9s linear infinite;
  pointer-events: none;
}
@keyframes fia-header-line {
  from { background-position: 0% 0; }
  to { background-position: -220% 0; }
}

/* Liens de nav : soulignement dégradé qui se déploie */
[data-theme="dark-violet"] .nav__link::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
[data-theme="dark-violet"] .nav__link:hover { color: var(--primary); }
[data-theme="dark-violet"] .nav__link:hover::before,
[data-theme="dark-violet"] .nav__link.is-active::before { transform: scaleX(1); }

/* Logo : halo au survol */
[data-theme="dark-violet"] .brand__logo { transition: filter 0.35s var(--ease), transform 0.35s var(--ease); }
[data-theme="dark-violet"] .brand:hover .brand__logo {
  filter: drop-shadow(0 0 14px rgba(196, 181, 253, 0.55));
  transform: translateY(-1px);
}

/* ============================================================
   Boutons — dégradé violet animé (primaire), pervenche (secondaire)
   ============================================================ */
[data-theme="dark-violet"] .btn--primary {
  background: linear-gradient(120deg, var(--primary) 0%, #A78BFA 55%, var(--secondary) 115%);
  background-size: 200% 100%;
  background-position: 0% 0;
  transition: background-position 0.45s var(--ease), transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
[data-theme="dark-violet"] .btn--primary:hover {
  background-position: 95% 0;
  box-shadow: 0 12px 32px rgba(139, 124, 240, 0.4);
}
[data-theme="dark-violet"] .btn--secondary {
  background: var(--secondary);
  color: #FFF4EE;
}
[data-theme="dark-violet"] .btn--secondary:hover {
  background: var(--secondary-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(198, 98, 64, 0.4);
}

/* ============================================================
   Titres des CTA — tailles contenues
   ============================================================ */
[data-theme="dark-violet"] .nl-title {
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  letter-spacing: -0.015em;
}
[data-theme="dark-violet"] .nl-text { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="dark-violet"] .site-header::after { animation: none; }
  [data-theme="dark-violet"] .nav__link::before { transition: none; }
}

/* ============================================================
   Footer — newsletter intégrée + liens légaux
   ============================================================ */
[data-theme="dark-violet"] .site-footer__grid {
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1.2fr;
}
.fnl__text {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}
.fnl__row { display: flex; gap: 0.5rem; }
.fnl__input {
  flex: 1;
  min-width: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--text-primary);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.fnl__input::placeholder { color: var(--text-muted); }
.fnl__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.fnl__btn { padding: 0.65rem 1rem; font-size: 0.88rem; white-space: nowrap; }
.fnl__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.fnl__consent input { margin-top: 0.2rem; accent-color: var(--primary); }
.fnl__msg { margin-top: 0.5rem; font-size: 0.82rem; min-height: 0; }
.fnl__msg:empty { display: none; }

.site-footer__legal { display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.site-footer__legal-sep { color: var(--text-muted); opacity: 0.6; }
.site-footer__legal a {
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
}
.site-footer__legal a:hover { color: var(--primary); }

@media (max-width: 1060px) {
  [data-theme="dark-violet"] .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  [data-theme="dark-violet"] .site-footer__grid { grid-template-columns: 1fr; }
  .fnl__row { flex-direction: column; }
}