/* ============================================================
   Facil'InfoLorraine — Studio créatif lumineux
   Refonte visuelle complète. Identité signature : fuchsia + violet clair sur crème.
   ============================================================ */

:root {
  /* Palette */
  --cream-50: #FCFAF6;
  --cream: #FAF6F0;
  --cream-200: #F4ECE0;
  --cream-300: #EBE0CD;

  --ink-50: #F2EFF7;
  --ink-100: #D9D2E5;
  --ink-200: #9087A8;
  --ink-300: #5A4B7A;
  --ink-400: #3A2D5C;
  --ink: #1F1735;
  --ink-600: #140D24;

  --fuchsia-50: #FCE4F0;
  --fuchsia-100: #F9C9E0;
  --fuchsia-200: #F47DB6;
  --fuchsia-300: #E84099;
  --fuchsia: #D61C82;
  --fuchsia-600: #B5126A;

  --lavender-50: #F4EFFF;
  --lavender-100: #EDE6FF;
  --lavender-200: #D9C8FF;
  --lavender: #C9B3FF;
  --lavender-400: #A484D7;
  --lavender-500: #7B39FC;

  --ease-fluid: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  color-scheme: light;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "ss01", "cv11";
  line-height: 1.5;
}
main, section, footer, header, nav { max-width: 100%; }
h1, h2, h3, h4, .font-serif-i {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

::selection { background: var(--fuchsia); color: var(--cream); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--fuchsia);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   TYPOGRAPHIE — utilitaires
   ============================================================ */
.font-manrope, .font-cabin, .font-ui { font-family: 'Manrope', 'Inter', system-ui, sans-serif; }
.font-inter { font-family: 'Inter', system-ui, sans-serif; }
.font-serif-i { font-family: 'Fraunces', Georgia, serif; }

/* Italique fuchsia signature dans les titres : mots clés en <em> */
.headline em,
.font-serif-i em,
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--fuchsia);
  position: relative;
  padding: 0 0.05em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* Highlight tracé manuel sous les mots clés (signature originale) */
.headline em::after,
.font-serif-i em::after,
h1 em::after, h2 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0.04em;
  height: 0.18em;
  background: linear-gradient(90deg, transparent 0%, rgba(214,28,130,0.18) 8%, rgba(214,28,130,0.32) 50%, rgba(214,28,130,0.18) 92%, transparent 100%);
  border-radius: 999px;
  z-index: -1;
  transform: skewX(-3deg) scaleY(0.8);
  pointer-events: none;
}

.kicker-accent {
  background: linear-gradient(90deg, var(--lavender-500) 0%, var(--fuchsia) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ============================================================
   OVERRIDE TAILWIND text-white & co. → fonces dans contexte clair
   On garde les noms pour ne pas réécrire pages.js
   ============================================================ */
.text-white { color: var(--ink) !important; }
.text-white\/95 { color: var(--ink) !important; }
.text-white\/90 { color: var(--ink-400) !important; }
.text-white\/85 { color: var(--ink-400) !important; }
.text-white\/80 { color: var(--ink-300) !important; }
.text-white\/75 { color: var(--ink-300) !important; }
.text-white\/70 { color: var(--ink-300) !important; }
.text-white\/65 { color: var(--ink-200) !important; }
.text-white\/60 { color: var(--ink-200) !important; }
.text-white\/55 { color: var(--ink-200) !important; }
.text-white\/50 { color: var(--ink-200) !important; }
.text-white\/45 { color: var(--ink-200) !important; }
.text-white\/40 { color: var(--ink-200) !important; }

/* La couleur d'accent générique utilisée partout dans pages.js */
.text-\[\#c9b3ff\] { color: var(--fuchsia) !important; }

/* ============================================================
   FOND DÉCORATIF — blobs organiques (signature)
   ============================================================ */
.site-bg-video { display: none !important; }
.site-bg-veil { display: none !important; }

body::before, body::after, .home-aurora { pointer-events: none; }

/* Blob 1 — fuchsia saturé, top right */
body::before {
  content: "";
  position: fixed;
  top: -8vw; right: -12vw;
  width: 75vw; height: 75vw;
  background: radial-gradient(closest-side,
    rgba(214,28,130,0.40) 0%,
    rgba(244,125,182,0.24) 28%,
    rgba(214,28,130,0.08) 55%,
    transparent 78%);
  filter: blur(28px);
  z-index: -2;
  animation: floatY 18s ease-in-out infinite;
}

/* Blob 2 — violet profond, bottom left */
body::after {
  content: "";
  position: fixed;
  bottom: -12vw; left: -10vw;
  width: 70vw; height: 70vw;
  background: radial-gradient(closest-side,
    rgba(123,57,252,0.42) 0%,
    rgba(164,132,215,0.28) 30%,
    rgba(123,57,252,0.10) 58%,
    transparent 78%);
  filter: blur(28px);
  z-index: -2;
  animation: floatX 24s ease-in-out infinite;
}

/* Couche aurora — multiples taches colorées */
.home-aurora,
body > .home-aurora {
  position: fixed !important; inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(38vw 38vh at 20% 18%, rgba(244,125,182,0.22) 0%, transparent 62%),
    radial-gradient(34vw 34vh at 82% 62%, rgba(201,179,255,0.28) 0%, transparent 62%),
    radial-gradient(28vw 28vh at 50% 90%, rgba(214,28,130,0.16) 0%, transparent 60%) !important;
}

/* Aurora globale par défaut sur TOUTES les pages (pas que home) */
body::before { z-index: -3; }
body::after { z-index: -3; }
body {
  background:
    radial-gradient(48vw 48vh at 90% 8%, rgba(244,125,182,0.30) 0%, rgba(214,28,130,0.10) 35%, transparent 60%),
    radial-gradient(50vw 50vh at 5% 75%, rgba(164,132,215,0.42) 0%, rgba(123,57,252,0.18) 35%, transparent 62%),
    radial-gradient(40vw 40vh at 65% 55%, rgba(214,28,130,0.16) 0%, transparent 60%),
    radial-gradient(35vw 35vh at 25% 30%, rgba(123,57,252,0.20) 0%, transparent 58%),
    var(--cream);
  background-attachment: fixed;
}

/* Petites taches lumineuses additionnelles, animées */
body > .home-aurora::before,
main::before {
  content: "";
  position: fixed;
  top: 35%; left: 60%;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244,125,182,0.32) 0%, transparent 70%);
  filter: blur(20px);
  z-index: -2;
  pointer-events: none;
  animation: floatY 20s ease-in-out infinite reverse;
}
main::after {
  content: "";
  position: fixed;
  top: 62%; left: 12%;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201,179,255,0.42) 0%, transparent 70%);
  filter: blur(18px);
  z-index: -2;
  pointer-events: none;
  animation: floatX 26s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14px, -22px) scale(1.04); }
}
@keyframes floatX {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-22px, 14px) scale(1.06); }
}

/* ============================================================
   SECTIONS — alternance de fonds tintés
   On utilise le z-index pour que les blobs body restent visibles à travers
   ============================================================ */
main { position: relative; z-index: 1; }

/* Hero (toujours transparent) — wrapper div autour du <section> du hero */
main > div.relative.w-full.overflow-hidden:first-child { background: transparent; }

/* Pas de bandeau de couleur sur les sections — fond unifié via body + blobs */
main > section { background: transparent; }

/* Espace réduit avant le footer sur toutes les pages (cap le pb de la dernière section) */
main > section:last-of-type,
main > div.relative:last-child > section:last-of-type {
  padding-bottom: 4rem !important;
}
@media (min-width: 768px) {
  main > section:last-of-type,
  main > div.relative:last-child > section:last-of-type {
    padding-bottom: 5rem !important;
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero-veil { display: none; }
.headline { color: var(--ink); }
.hero-lead { color: var(--ink-300); }

.pill {
  background: rgba(214, 28, 130, 0.08);
  border: 1px solid rgba(214, 28, 130, 0.22);
  color: var(--fuchsia-600) !important;
  backdrop-filter: none;
}
.pill .text-white { color: var(--fuchsia-600) !important; }
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--fuchsia);
  display: inline-block;
  margin-right: 2px;
  box-shadow: 0 0 0 4px rgba(214,28,130,0.12);
}

.hero-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--cream-300);
  box-shadow:
    0 32px 80px -28px rgba(31, 23, 53, 0.32),
    0 12px 30px -12px rgba(214, 28, 130, 0.18);
  background: var(--cream-200);
}
.hero-img-wrap::before {
  content: "";
  position: absolute;
  top: -14px; left: -14px;
  width: 90px; height: 90px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(244,125,182,0.55) 0%, rgba(244,125,182,0) 70%);
  z-index: 2;
  pointer-events: none;
}
.hero-img-wrap::after {
  content: "";
  position: absolute;
  bottom: -16px; right: -16px;
  width: 110px; height: 110px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(201,179,255,0.65) 0%, rgba(201,179,255,0) 70%);
  z-index: 2;
  pointer-events: none;
}
.hero-img-wrap img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) { .hero-img-wrap img { max-height: 580px; object-fit: cover; object-position: center 30%; } }
@media (max-width: 767px) { .hero-img-wrap img { max-height: 380px; object-fit: cover; object-position: center 30%; } }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn-primary,
button.btn-primary,
a.btn-primary {
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 78% 25%, rgba(214,28,130,0.32) 0%, transparent 65%),
    radial-gradient(circle at 18% 80%, rgba(123,57,252,0.30) 0%, transparent 65%);
  color: var(--cream) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 28px -10px rgba(31,23,53,0.45);
  transition: background 220ms var(--ease-fluid), box-shadow 220ms var(--ease-fluid), transform 220ms var(--ease-fluid);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary.text-white { color: var(--cream) !important; }
/* SVG hérite de currentColor pour suivre la couleur du texte du bouton */
.btn-primary svg { color: inherit; stroke: currentColor; }
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--fuchsia) 0%, var(--lavender-500) 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 220ms var(--ease-fluid);
  border-radius: inherit;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -12px rgba(214,28,130,0.45); }
.btn-primary:hover::before { opacity: 1; }

.btn-dark {
  background: transparent;
  border: 1px solid var(--ink-100);
  color: var(--ink) !important;
  transition: all 220ms var(--ease-fluid);
}
.btn-dark:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream) !important;
}
.btn-dark[style*="color:#f6f7f9"],
.btn-dark[style*="color: #f6f7f9"] {
  color: var(--ink) !important;
}

.btn-signin {
  background: transparent;
  border: 1px solid var(--ink-100);
  color: var(--ink);
  transition: all 200ms var(--ease-fluid);
}
.btn-signin:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.btn-getstarted,
a.btn-getstarted {
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 78% 25%, rgba(214,28,130,0.36) 0%, transparent 65%),
    radial-gradient(circle at 18% 80%, rgba(123,57,252,0.34) 0%, transparent 65%);
  color: var(--cream) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 200ms var(--ease-fluid), box-shadow 200ms var(--ease-fluid);
  box-shadow: 0 8px 22px -8px rgba(31,23,53,0.4);
}
.btn-getstarted svg { color: inherit; stroke: currentColor; }
.btn-getstarted::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--fuchsia) 0%, var(--lavender-500) 100%);
  opacity: 0;
  z-index: -1;
  border-radius: inherit;
  transition: opacity 200ms var(--ease-fluid);
}
.btn-getstarted:hover::before { opacity: 1; }
.btn-getstarted:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(214,28,130,0.5); }

/* ============================================================
   NAV — fond ink + gradient violet/fuchsia (= case CTA), toujours sombre
   ============================================================ */
header[class*="fixed"],
header[class*="absolute"] {
  background-color: var(--ink);
  background-image:
    radial-gradient(60vw 100% at 82% 50%, rgba(214,28,130,0.32) 0%, transparent 60%),
    radial-gradient(50vw 100% at 12% 50%, rgba(123,57,252,0.34) 0%, transparent 60%);
  border-bottom: 1px solid rgba(252, 250, 246, 0.06);
  transition: transform 360ms var(--ease-fluid), border-color 320ms ease, box-shadow 320ms ease;
  will-change: transform;
}
/* Trait gradient fuchsia → violet sous la nav (= séparateur footer/main) */
header[class*="fixed"]::after,
header[class*="absolute"]::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--fuchsia) 30%, var(--lavender-500) 70%, transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}
header[class*="fixed"] .text-white,
header[class*="absolute"] .text-white { color: var(--cream) !important; }
header[class*="fixed"] .text-white\/60,
header[class*="absolute"] .text-white\/60 { color: rgba(252, 250, 246, 0.65) !important; }
.nav-link { color: var(--cream) !important; transition: color 200ms ease; }
.nav-link:hover { color: var(--fuchsia-200) !important; }

/* Nav scrolled : juste ombre + border accent */
header.nav-scrolled {
  border-bottom-color: rgba(252, 250, 246, 0.10);
  box-shadow: 0 10px 30px -16px rgba(31, 23, 53, 0.45), 0 4px 12px -8px rgba(214, 28, 130, 0.16);
}

/* Bouton "Nous trouver" dans la nav (adapté fond sombre) */
header .btn-signin {
  background: transparent;
  border-color: rgba(252, 250, 246, 0.28);
  color: var(--cream) !important;
}
header .btn-signin:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink) !important;
}

header.nav-hidden {
  transform: translateY(-100%);
}

.brand-logo {
  width: 36px; height: 36px; object-fit: contain; flex: none;
  filter: drop-shadow(0 1px 4px rgba(214,28,130,0.25));
}

/* Mobile menu — slide depuis la droite avec fade */
.mobile-menu {
  background: var(--cream) !important;
  color: var(--ink);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    transform 380ms var(--ease-fluid),
    opacity 260ms ease,
    visibility 0s linear 380ms;
}
.mobile-menu.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    transform 380ms var(--ease-fluid),
    opacity 260ms ease,
    visibility 0s linear 0s;
}
.mobile-menu .text-white { color: var(--ink) !important; }
.mobile-menu .text-white\/60,
.mobile-menu .text-white\/80 { color: var(--ink-300) !important; }
.mobile-menu .border-white\/10 { border-color: rgba(31,23,53,0.1) !important; }

/* Items du menu mobile : fade-in décalé quand le menu s'ouvre */
.mobile-menu > div > ul > li,
.mobile-menu > div > .flex.flex-col.gap-3 > a {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease, transform 380ms var(--ease-fluid);
}
.mobile-menu.is-open > div > ul > li,
.mobile-menu.is-open > div > .flex.flex-col.gap-3 > a {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu.is-open > div > ul > li:nth-child(1) { transition-delay: 100ms; }
.mobile-menu.is-open > div > ul > li:nth-child(2) { transition-delay: 160ms; }
.mobile-menu.is-open > div > ul > li:nth-child(3) { transition-delay: 220ms; }
.mobile-menu.is-open > div > ul > li:nth-child(4) { transition-delay: 280ms; }
.mobile-menu.is-open > div > .flex.flex-col.gap-3 > a:nth-child(1) { transition-delay: 320ms; }
.mobile-menu.is-open > div > .flex.flex-col.gap-3 > a:nth-child(2) { transition-delay: 380ms; }

/* Mobile sub-menus — même feel que le menu principal (380ms ease-fluid + fade + slide) */
.mobile-submenu {
  display: flex !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(24px);
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
  transition:
    max-height 380ms var(--ease-fluid),
    transform 380ms var(--ease-fluid),
    opacity 260ms ease,
    margin-top 320ms var(--ease-fluid),
    padding 320ms var(--ease-fluid);
}
.mobile-submenu.is-open {
  max-height: 480px;
  opacity: 1;
  transform: translateX(0);
  margin-top: 12px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  pointer-events: auto;
}

/* Items du sous-menu : fade-in décalé en cascade (comme le menu principal) */
.mobile-submenu > li {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity 260ms ease, transform 380ms var(--ease-fluid);
}
.mobile-submenu.is-open > li {
  opacity: 1;
  transform: translateX(0);
}
.mobile-submenu.is-open > li:nth-child(1) { transition-delay: 80ms; }
.mobile-submenu.is-open > li:nth-child(2) { transition-delay: 140ms; }
.mobile-submenu.is-open > li:nth-child(3) { transition-delay: 200ms; }
.mobile-submenu.is-open > li:nth-child(4) { transition-delay: 260ms; }
.mobile-submenu.is-open > li:nth-child(5) { transition-delay: 320ms; }

.mobile-menu [data-mobile-dropdown] .chevron {
  transition: transform 380ms var(--ease-fluid);
}
.mobile-menu [data-mobile-dropdown] {
  transition: color 200ms ease;
}

/* Dropdowns — fond ink + gradient violet/fuchsia (= case CTA) */
.dropdown-wrapper { padding-bottom: 14px; margin-bottom: -14px; }
.dropdown-panel {
  position: absolute; top: calc(100% + 2px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 82% 22%, rgba(214,28,130,0.30) 0%, transparent 65%),
    radial-gradient(circle at 18% 80%, rgba(123,57,252,0.32) 0%, transparent 65%);
  border: 1px solid rgba(252, 250, 246, 0.10);
  border-radius: 16px;
  padding: 10px;
  min-width: 320px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  box-shadow: 0 32px 64px -24px rgba(31, 23, 53, 0.55), 0 8px 22px -10px rgba(214, 28, 130, 0.18);
  z-index: 40;
  backdrop-filter: none;
}
.dropdown-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.dropdown-wrapper:hover .dropdown-panel,
.dropdown-wrapper:focus-within .dropdown-panel,
.dropdown-panel.open {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  transition: background 180ms ease;
  color: var(--cream);
}
.dropdown-item:hover { background: rgba(252, 250, 246, 0.08); }
.dropdown-item .d-title { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14px; color: var(--cream); }
.dropdown-item .d-sub { font-family: 'Inter', sans-serif; font-size: 12px; color: rgba(252, 250, 246, 0.55); margin-top: 2px; }
.dropdown-icon {
  width: 32px; height: 32px; border-radius: 10px; flex: none; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(252, 250, 246, 0.08);
  color: var(--fuchsia-200);
  border: 1px solid rgba(244, 125, 182, 0.28);
  transition: filter 200ms ease, background 200ms ease;
}
.dropdown-item:hover .dropdown-icon { background: rgba(252, 250, 246, 0.14); filter: brightness(1.1); }

/* ============================================================
   CARDS — topic, formation, stat, certif
   Fond ink + gradient violet/fuchsia (= case CTA) sur tous les éléments cliquables
   ============================================================ */
.topic-card {
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 78% 22%, rgba(214,28,130,0.28) 0%, transparent 60%),
    radial-gradient(circle at 18% 82%, rgba(123,57,252,0.30) 0%, transparent 60%);
  border: 1px solid rgba(252, 250, 246, 0.10);
  color: var(--cream);
  transition: border-color 220ms var(--ease-fluid), box-shadow 220ms var(--ease-fluid), transform 220ms var(--ease-fluid);
  position: relative;
  z-index: 1;
  backdrop-filter: none;
}
.topic-card h3,
.topic-card .font-serif-i { color: var(--cream) !important; }
.topic-card p { color: rgba(252, 250, 246, 0.72) !important; }
.topic-card p[style*="color"] { color: rgba(252, 250, 246, 0.72) !important; }
.topic-card span[style*="color"],
.topic-card a[style*="color"] { color: var(--fuchsia-200) !important; }
.topic-card .text-\[\#c9b3ff\] { color: var(--fuchsia-200) !important; }
.topic-card strong { color: var(--cream) !important; }
.topic-card ul li,
.topic-card .font-inter { color: rgba(252, 250, 246, 0.85) !important; }
.topic-card:hover {
  border-color: rgba(244, 125, 182, 0.40);
  box-shadow: 0 24px 48px -16px rgba(214, 28, 130, 0.32), 0 8px 22px -10px rgba(31, 23, 53, 0.50);
  transform: translateY(-3px);
  z-index: 2;
}
.topic-card:hover .text-\[\#c9b3ff\] { color: var(--fuchsia) !important; }
/* ============================================================
   CARDS NON-CLIQUABLES — lavender prononcé (plus foncé que l'initial)
   article.topic-card et .topic-card.static = info/contenu
   ============================================================ */
article.topic-card,
.topic-card.static {
  background-color: var(--lavender-100) !important;
  background-image: linear-gradient(165deg,
    rgba(217, 200, 255, 0.85) 0%,
    rgba(237, 230, 255, 0.92) 50%,
    rgba(249, 201, 224, 0.55) 100%) !important;
  border: 1px solid rgba(164, 132, 215, 0.40) !important;
  color: var(--ink) !important;
  transition: border-color 240ms var(--ease-fluid), box-shadow 240ms var(--ease-fluid), transform 240ms var(--ease-fluid);
}
article.topic-card:hover,
.topic-card.static:hover {
  border-color: rgba(214, 28, 130, 0.45) !important;
  box-shadow: 0 20px 40px -16px rgba(123, 57, 252, 0.32), 0 6px 16px -8px rgba(214, 28, 130, 0.18) !important;
  transform: translateY(-2px);
}

/* Texte des cards non-cliquables — couleurs ink (fond clair) */
article.topic-card h3,
article.topic-card .font-serif-i,
.topic-card.static h3,
.topic-card.static .font-serif-i { color: var(--ink) !important; }

article.topic-card p,
.topic-card.static p { color: var(--ink-300) !important; }

article.topic-card .text-white,
.topic-card.static .text-white { color: var(--ink) !important; }
article.topic-card .text-white\/95,
article.topic-card .text-white\/90,
.topic-card.static .text-white\/95,
.topic-card.static .text-white\/90 { color: var(--ink) !important; }
article.topic-card .text-white\/85,
article.topic-card .text-white\/80,
article.topic-card .text-white\/75,
article.topic-card .text-white\/70,
.topic-card.static .text-white\/85,
.topic-card.static .text-white\/80,
.topic-card.static .text-white\/70 { color: var(--ink-400) !important; }
article.topic-card .text-white\/65,
article.topic-card .text-white\/60,
article.topic-card .text-white\/55,
article.topic-card .text-white\/50,
.topic-card.static .text-white\/60 { color: var(--ink-300) !important; }
article.topic-card strong,
.topic-card.static strong { color: var(--ink) !important; }

/* Boutons sombres à l'intérieur des cards lavender — texte cream forcé */
article.topic-card .btn-primary,
article.topic-card a.btn-primary,
article.topic-card button.btn-primary,
article.topic-card .btn-primary.text-white,
.topic-card.static .btn-primary,
.topic-card.static a.btn-primary,
.certif-card .btn-primary,
.certif-card a.btn-primary { color: var(--cream) !important; }
article.topic-card .btn-primary svg,
.topic-card.static .btn-primary svg,
.certif-card .btn-primary svg { color: var(--cream) !important; stroke: currentColor; }
/* Idem pour certif-btn (PDF) */
article.topic-card .certif-btn,
.topic-card.static .certif-btn,
.certif-card .certif-btn,
.certif-card a.certif-btn { color: var(--cream) !important; }
article.topic-card .certif-btn svg,
.certif-card .certif-btn svg { color: var(--cream) !important; stroke: currentColor; }

/* Icônes des cards non-cliquables — pastel sur lavender */
article.topic-card .topic-icon,
.topic-card.static .topic-icon,
article.topic-card > .w-10.h-10[style*="linear-gradient"],
article.topic-card > .w-11.h-11 {
  background: linear-gradient(135deg, var(--fuchsia-50) 0%, #FFFFFF 100%) !important;
  color: var(--fuchsia) !important;
  box-shadow: 0 0 0 1px rgba(214,28,130,0.20) inset !important;
}

/* Lien "Découvrir" / accent — rester fuchsia */
article.topic-card span[style*="color"],
.topic-card.static span[style*="color"],
article.topic-card .text-\[\#c9b3ff\],
.topic-card.static .text-\[\#c9b3ff\] { color: var(--fuchsia) !important; }

/* Listes (dot items) dans cards non-cliquables */
article.topic-card .font-inter,
.topic-card.static .font-inter { color: var(--ink-400) !important; }
article.topic-card ul li,
.topic-card.static ul li { color: var(--ink) !important; }

/* Icônes des topic-cards — adapté fond sombre */
.topic-card > .w-10.h-10[style*="linear-gradient"],
.topic-card > .w-11.h-11 {
  background: rgba(252, 250, 246, 0.10) !important;
  color: var(--fuchsia-200) !important;
  box-shadow: 0 0 0 1px rgba(244, 125, 182, 0.30) inset !important;
}
.topic-icon {
  background: rgba(252, 250, 246, 0.10) !important;
  color: var(--fuchsia-200) !important;
  box-shadow: 0 0 0 1px rgba(244, 125, 182, 0.30) inset !important;
}

.formation-chip {
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 78% 22%, rgba(214,28,130,0.28) 0%, transparent 60%),
    radial-gradient(circle at 18% 82%, rgba(123,57,252,0.30) 0%, transparent 60%);
  border: 1px solid rgba(252, 250, 246, 0.10);
  color: var(--cream);
  transition: border-color 200ms var(--ease-fluid), transform 200ms var(--ease-fluid), box-shadow 200ms var(--ease-fluid);
}
.formation-chip > div:first-child,
.formation-chip .font-serif-i { color: var(--cream) !important; }
.formation-chip > div[style*="color"]:not(:last-child) { color: rgba(252, 250, 246, 0.65) !important; }
.formation-chip > div:last-child,
.formation-chip > div:last-child[style*="color"] { color: var(--fuchsia-200) !important; }
.formation-chip .text-\[\#c9b3ff\] { color: var(--fuchsia-200) !important; }
.formation-chip:hover {
  border-color: rgba(244, 125, 182, 0.42);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -14px rgba(214, 28, 130, 0.36);
}
.formation-chip:hover > div:last-child { color: var(--fuchsia) !important; }

/* Override des classes text-white à l'intérieur des cards sombres */
.topic-card .text-white,
.formation-chip .text-white,
.certif-card .text-white,
.review-card .text-white { color: var(--cream) !important; }
.topic-card .text-white\/95,
.topic-card .text-white\/90,
.topic-card .text-white\/85,
.formation-chip .text-white\/95,
.formation-chip .text-white\/90,
.formation-chip .text-white\/85 { color: rgba(252, 250, 246, 0.92) !important; }
.topic-card .text-white\/80,
.topic-card .text-white\/75,
.topic-card .text-white\/70,
.formation-chip .text-white\/80,
.certif-card .text-white\/80 { color: rgba(252, 250, 246, 0.78) !important; }
.topic-card .text-white\/65,
.topic-card .text-white\/60,
.topic-card .text-white\/55,
.topic-card .text-white\/50,
.formation-chip .text-white\/60 { color: rgba(252, 250, 246, 0.58) !important; }
.topic-card strong,
.certif-card strong { color: var(--cream) !important; }

.stat-card {
  background: linear-gradient(165deg, var(--lavender-50) 0%, var(--cream-50) 60%, var(--fuchsia-50) 100%);
  border: 1px solid var(--lavender-100);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  contain: paint;
  backdrop-filter: none;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 100px; height: 100px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(214,28,130,0.22) 0%, transparent 70%);
  transform: translate(35%, -35%);
  pointer-events: none;
}
.stat-card .text-white { color: var(--ink) !important; }

/* Card certif (Qualiopi, programme détaillé) — non cliquable, lavender prononcé */
.certif-card {
  background-color: var(--lavender-100);
  background-image: linear-gradient(165deg,
    rgba(217, 200, 255, 0.90) 0%,
    rgba(237, 230, 255, 0.95) 50%,
    rgba(249, 201, 224, 0.60) 100%);
  border: 1px solid rgba(164, 132, 215, 0.40);
  color: var(--ink);
}
.certif-card h2,
.certif-card .font-serif-i { color: var(--ink) !important; }
.certif-card .text-white { color: var(--ink) !important; }
.certif-card .text-white\/85,
.certif-card .text-white\/80 { color: var(--ink-400) !important; }

.certif-card .w-14.h-14,
.certif-card .w-12.h-12 {
  background: linear-gradient(135deg, var(--fuchsia-50) 0%, #FFFFFF 100%) !important;
  border: 1px solid rgba(214, 28, 130, 0.22) !important;
}
.certif-card .w-14.h-14 .text-white,
.certif-card .w-12.h-12 .text-white { color: var(--fuchsia) !important; }

.certif-logo-wrap {
  background: #fff;
  border-radius: 18px;
  padding: 18px 24px;
  box-shadow: 0 12px 32px -10px rgba(31,23,53,0.18);
  border: 1px solid var(--cream-300);
}
.certif-logo { width: 180px; height: auto; display: block; }
@media (max-width: 768px) { .certif-logo { width: 160px; } }

.certif-btn,
a.certif-btn {
  background-color: var(--ink);
  background-image:
    radial-gradient(circle at 78% 25%, rgba(214,28,130,0.32) 0%, transparent 65%),
    radial-gradient(circle at 18% 80%, rgba(123,57,252,0.30) 0%, transparent 65%);
  color: var(--cream) !important;
  border: 1px solid var(--ink);
  box-shadow: 0 12px 26px -10px rgba(31,23,53,0.4);
  transition: transform 180ms var(--ease-fluid), box-shadow 180ms var(--ease-fluid), background 180ms var(--ease-fluid);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.certif-btn svg { color: inherit; stroke: currentColor; }
.certif-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--fuchsia) 0%, var(--lavender-500) 100%);
  opacity: 0;
  z-index: -1;
  border-radius: inherit;
  transition: opacity 180ms var(--ease-fluid);
}
.certif-btn:hover { transform: translateY(-1px); box-shadow: 0 18px 32px -10px rgba(214,28,130,0.42); }
.certif-btn:hover::before { opacity: 1; }

/* ============================================================
   LIST DOTS, DIVIDERS, ICÔNES INLINE
   ============================================================ */
.dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fuchsia) 0%, var(--lavender-500) 100%);
  display: inline-block;
  flex: none;
  box-shadow: 0 0 0 3px rgba(214,28,130,0.10);
}
.divider-thin { border-top: 1px solid rgba(31,23,53,0.08); }

/* ============================================================
   RÉFÉRENCES — accordéon clients (lavender, couleur initiale)
   ============================================================ */
details.ref-group {
  background-color: var(--lavender-100);
  background-image: linear-gradient(165deg,
    rgba(217, 200, 255, 0.85) 0%,
    rgba(237, 230, 255, 0.92) 50%,
    rgba(249, 201, 224, 0.55) 100%);
  border: 1px solid rgba(164, 132, 215, 0.40);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 240ms var(--ease-fluid), box-shadow 240ms var(--ease-fluid);
}
details.ref-group[open] {
  border-color: rgba(214, 28, 130, 0.45);
  box-shadow: 0 20px 40px -16px rgba(123, 57, 252, 0.32), 0 6px 16px -8px rgba(214, 28, 130, 0.18);
}
details.ref-group > summary {
  cursor: pointer; list-style: none;
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  color: var(--ink);
}
details.ref-group > summary::-webkit-details-marker { display: none; }
details.ref-group > summary > div:first-child .text-white { color: var(--ink) !important; }
details.ref-group .chev {
  transition: transform 220ms var(--ease-fluid);
  color: var(--fuchsia) !important;
}
details.ref-group[open] .chev { transform: rotate(90deg); }
details.ref-group .ref-body { padding: 4px 22px 22px; }

/* Pills (clients dans references) — adapté fond lavender */
details.ref-group .ref-body span[style*="background"] {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(164, 132, 215, 0.45) !important;
  color: var(--ink) !important;
}

/* ============================================================
   AVIS / REVIEW CARDS
   ============================================================ */
.review-card {
  background: linear-gradient(180deg, var(--cream-50) 0%, var(--lavender-50) 100%);
  border: 1px solid var(--lavender-100);
  color: var(--ink);
  position: relative;
}
.review-card::before {
  content: "";
  position: absolute; top: 18px; right: 22px;
  font-family: 'Fraunces', serif;
  font-size: 64px;
  line-height: 1;
  color: var(--fuchsia-100);
  font-weight: 900;
}
.review-card .text-white { color: var(--ink) !important; }
.review-card .text-white\/55 { color: var(--ink-200) !important; }
.review-card [style*="border-top"] {
  border-top: 1px solid var(--lavender-100) !important;
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.field {
  background: #fff;
  border: 1px solid var(--cream-300);
  color: var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.field::placeholder { color: var(--ink-200); opacity: 0.7; }
.field:focus {
  outline: none;
  border-color: var(--fuchsia);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(214,28,130,0.12);
}
.field-select { font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: 15px; letter-spacing: 0; }
.field-select option { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; background: #fff; color: var(--ink); padding: 8px 12px; }
select.field {
  color-scheme: light;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23D61C82' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
input[type="checkbox"] { accent-color: var(--fuchsia); }

/* Form error / success boxes */
[data-form-error][style*="background"] {
  background: rgba(255, 90, 90, 0.08) !important;
  border: 1px solid rgba(255, 90, 90, 0.3) !important;
  color: #b03030 !important;
}
[data-form-success] .w-14.h-14[style*="background"] {
  background: linear-gradient(135deg, var(--fuchsia) 0%, var(--lavender-500) 100%) !important;
}

/* ============================================================
   BANDEAU CTA (cta-dark) — section sombre signature
   ============================================================ */
.cta-dark {
  background: var(--ink);
  border: 1px solid var(--ink-400);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  contain: paint;
}
.cta-dark::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 180%;
  background: radial-gradient(closest-side, rgba(214,28,130,0.42) 0%, transparent 70%);
  transform: translate(33%, -22%);
  pointer-events: none;
}
.cta-dark::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 55%; height: 180%;
  background: radial-gradient(closest-side, rgba(123,57,252,0.32) 0%, transparent 70%);
  transform: translate(-18%, 28%);
  pointer-events: none;
}
.cta-dark > * { position: relative; z-index: 1; }
.cta-dark h2,
.cta-dark .font-serif-i,
.cta-dark .text-white { color: var(--cream) !important; }
.cta-dark h2 em { color: var(--fuchsia-200) !important; }
.cta-dark h2 em::after {
  background: linear-gradient(90deg, transparent 0%, rgba(244,125,182,0.35) 50%, transparent 100%) !important;
}
.cta-dark p { color: rgba(252,250,246,0.82) !important; }
.cta-dark .btn-primary {
  background: var(--cream);
  color: var(--ink) !important;
  border: none;
}
.cta-dark .btn-primary::before {
  background: linear-gradient(135deg, var(--fuchsia) 0%, var(--lavender-500) 100%);
}
.cta-dark .btn-primary:hover { color: var(--cream) !important; }
.cta-dark .btn-dark {
  background: transparent;
  border: 1px solid rgba(252,250,246,0.32);
  color: var(--cream) !important;
}
.cta-dark .btn-dark:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink) !important;
}

/* ============================================================
   ICÔNES DES CARTES (topic-icon) — pastel fuchsia/lavender
   ============================================================ */
.topic-icon {
  background: linear-gradient(135deg, var(--fuchsia-50) 0%, var(--lavender-100) 100%);
  color: var(--fuchsia);
  box-shadow: 0 0 0 1px rgba(214,28,130,0.16) inset;
  transition: transform 220ms var(--ease-fluid), box-shadow 220ms var(--ease-fluid);
}
a.topic-card:hover .topic-icon,
.topic-card:hover .topic-icon {
  transform: rotate(-4deg) scale(1.05);
  box-shadow: 0 0 0 1px rgba(214,28,130,0.32) inset, 0 8px 18px -8px rgba(214,28,130,0.4);
}

/* ============================================================
   OVERRIDES — inline styles violet hardcodés dans pages.js
   ============================================================ */
/* Cercles d'icones (certif-card, reglement, mentions, 404) */
[style*="rgba(123,57,252,0.22)"] {
  background: linear-gradient(135deg, var(--fuchsia-50) 0%, var(--lavender-100) 100%) !important;
  border: 1px solid var(--lavender-100) !important;
}
[style*="rgba(123,57,252,0.22)"] .text-white,
[style*="rgba(123,57,252,0.22)"] svg { color: var(--fuchsia) !important; }

/* Photo Sandy Herry — border violet */
[style*="rgba(164,132,215,0.35)"] {
  border: 1px solid var(--cream-300) !important;
  box-shadow: 0 24px 48px -16px rgba(31,23,53,0.18), 0 8px 22px -10px rgba(214,28,130,0.18) !important;
}

/* Callout (Format) dans gestion-du-temps */
.topic-card [style*="rgba(123,57,252,0.1)"] {
  background: var(--lavender-50) !important;
  border: 1px solid var(--lavender-100) !important;
}
.topic-card [style*="rgba(123,57,252,0.1)"] .text-white { color: var(--ink) !important; }
.topic-card [style*="rgba(123,57,252,0.1)"] .text-white\/90 { color: var(--ink-300) !important; }

/* Pills clients dans references (rgba(123,57,252,0.12)) */
[style*="rgba(123,57,252,0.12)"] {
  background: rgba(214,28,130,0.07) !important;
  border: 1px solid rgba(214,28,130,0.22) !important;
  color: var(--ink) !important;
}

/* Border-top dans review-card */
[style*="border-top: 1px solid rgba(255,255,255,0.08)"] {
  border-top: 1px solid var(--lavender-100) !important;
}

/* Form success icon */
[data-form-success] [style*="background: #7b39fc"] {
  background: linear-gradient(135deg, var(--fuchsia) 0%, var(--lavender-500) 100%) !important;
}

/* ============================================================
   FOOTER — fond ink + gradient violet/fuchsia (= case CTA)
   ============================================================ */
footer {
  background-color: var(--ink);
  background-image:
    radial-gradient(60vw 100% at 82% 50%, rgba(214,28,130,0.32) 0%, transparent 60%),
    radial-gradient(50vw 100% at 12% 50%, rgba(123,57,252,0.34) 0%, transparent 60%);
  color: rgba(252, 250, 246, 0.72) !important;
  position: relative;
  z-index: 5;
  margin-top: 0;
  border-top: 1px solid rgba(252, 250, 246, 0.08);
}
footer .text-white { color: var(--cream) !important; }
footer .text-white\/50 { color: rgba(252, 250, 246, 0.50) !important; }
footer .text-white\/60 { color: rgba(252, 250, 246, 0.62) !important; }
footer .text-white\/70 { color: rgba(252, 250, 246, 0.72) !important; }
footer .font-ui.font-semibold,
footer .font-manrope.font-semibold { color: var(--cream) !important; }
footer .footer-link {
  color: rgba(252, 250, 246, 0.68);
  transition: color 150ms ease;
}
footer .footer-link:hover { color: var(--fuchsia-200); }
footer .divider-thin { border-top: 1px solid rgba(252, 250, 246, 0.10); }
footer .brand-logo { filter: drop-shadow(0 2px 8px rgba(214,28,130,0.45)); }
footer .kicker-accent {
  background: linear-gradient(90deg, var(--lavender-200) 0%, var(--fuchsia-200) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Trait coloré au-dessus du footer */
footer::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--fuchsia) 30%, var(--lavender-500) 70%, transparent 100%);
  opacity: 0.55;
}

/* Compact padding du footer (force, indépendant de Tailwind purge) */
footer { padding-top: 22px; padding-bottom: 18px; font-size: 13px; }
@media (min-width: 768px) {
  footer { padding-top: 26px; padding-bottom: 20px; }
}
footer .text-\[16px\],
footer .text-\[15px\] { font-size: 14.5px !important; }
footer .text-\[11px\],
footer .text-\[10px\] { font-size: 10.5px !important; }
footer .text-\[13px\],
footer .text-\[12px\] { font-size: 11px !important; }
footer p,
footer ul li,
footer .footer-link { font-size: 13px !important; line-height: 1.5; }
/* Compact gap entre les colonnes et avant la ligne du copyright */
footer .grid.grid-cols-2 { gap: 22px 28px !important; margin-bottom: 18px !important; }
@media (min-width: 768px) {
  footer .grid.md\:grid-cols-4 { gap: 22px 32px !important; margin-bottom: 22px !important; }
}
footer .divider-thin.pt-6 { padding-top: 14px !important; }
footer .col-span-2 p { margin-top: 12px !important; }
footer ul.space-y-2\.5 > li { margin-top: 0 !important; }
footer ul.space-y-2\.5 > li + li { margin-top: 8px !important; }

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */
.page-stage { position: relative; overflow-x: clip; }
.page-slide {
  animation: page-slide-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes page-slide-in {
  0% { opacity: 0; transform: translate3d(20px, 8px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.page-slide > section,
.page-slide > div > section {
  animation: page-section-rise 660ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-slide > section:nth-child(1),
.page-slide > div > section:nth-child(1) { animation-delay: 60ms; }
.page-slide > section:nth-child(2),
.page-slide > div > section:nth-child(2) { animation-delay: 140ms; }
.page-slide > section:nth-child(3),
.page-slide > div > section:nth-child(3) { animation-delay: 220ms; }
.page-slide > section:nth-child(4),
.page-slide > div > section:nth-child(4) { animation-delay: 300ms; }
.page-slide > section:nth-child(n+5),
.page-slide > div > section:nth-child(n+5) { animation-delay: 360ms; }
@keyframes page-section-rise {
  0% { opacity: 0; transform: translate3d(0, 24px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-slide, .page-slide > section, .page-slide > div > section { animation: none !important; }
  body::before, body::after { animation: none !important; }
}

/* ============================================================
   SECTIONS — alternance de fonds (signature)
   On utilise un sélecteur d'attribut sur les sections : pas besoin de modifier pages.js
   La section "interventions" (icones), la section "approche" (3 cards)…
   se placent dans le rythme via leur position naturelle.
   ============================================================ */
/* On évite l'alternance sur certaines sections via la classe .no-tint */
.no-tint { background: transparent !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  section { padding-left: 22px !important; padding-right: 22px !important; }
  h2.font-serif-i { font-size: clamp(34px, 8.5vw, 44px) !important; line-height: 1.08 !important; max-width: 100% !important; }
  .headline { font-size: clamp(40px, 11vw, 56px) !important; line-height: 1.05 !important; }
  details.ref-group > summary { padding: 16px 18px !important; gap: 12px !important; }
  details.ref-group > summary > div:first-child { flex: 1 1 auto !important; min-width: 0 !important; font-size: 15px !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
  details.ref-group > summary > div:last-child { flex: 0 0 auto !important; }
  details.ref-group .ref-body { padding: 4px 18px 18px !important; }
  .review-card { padding: 22px !important; }
  .review-card p { font-size: 15px !important; line-height: 1.55 !important; }
  h3.font-serif-i { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.15 !important; }
  footer { padding: 36px 22px 26px !important; }
  footer .grid.grid-cols-2 { grid-template-columns: 1fr 1fr !important; gap: 22px 22px !important; margin-bottom: 22px !important; }
  footer .grid.grid-cols-2 > .col-span-2 { grid-column: 1 / -1 !important; }
  footer .col-span-2 p { max-width: 100% !important; font-size: 14px !important; line-height: 1.55 !important; }
  footer ul.space-y-2\.5 > li { font-size: 14px !important; line-height: 1.35 !important; }
  footer ul.space-y-2\.5 > li + li { margin-top: 12px !important; }
  footer .flex.flex-col.md\:flex-row { gap: 14px !important; }
  footer .flex.gap-5 { flex-wrap: wrap !important; gap: 14px !important; }
  .dropdown-panel { display: none !important; }

  /* Stat cards : taille texte adaptée mobile pour éviter overflow */
  .stat-card { padding: 18px 20px !important; contain: layout paint; }
  .stat-card::before { display: none !important; }
  .stat-card .font-serif-i { font-size: clamp(28px, 9vw, 40px) !important; line-height: 1 !important; }
  .stat-card .font-inter { font-size: 13px !important; }

  /* CTA dark : padding plus serré, pseudo-elements entièrement à l'intérieur */
  .cta-dark { padding: 32px 22px !important; border-radius: 20px !important; contain: layout paint; }
  .cta-dark::before,
  .cta-dark::after {
    width: 160px !important; height: 160px !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    transform: none !important;
  }
  .cta-dark::before { top: 0 !important; right: 0 !important; }
  .cta-dark::after { bottom: 0 !important; left: 0 !important; }
  .cta-dark h2 { font-size: clamp(28px, 7.8vw, 40px) !important; line-height: 1.1 !important; word-break: break-word; }
  .cta-dark p { font-size: 15px !important; }
  .cta-dark .flex.flex-col { gap: 10px !important; }
  .cta-dark .btn-primary,
  .cta-dark .btn-dark { width: 100% !important; min-width: 0 !important; }

  /* Hero — pill kicker peut wrapper proprement */
  .pill { padding: 6px 12px !important; min-height: 32px !important; }
  .pill span { font-size: 10px !important; line-height: 1.3 !important; }

  /* Topic cards */
  .topic-card { padding: 22px !important; }
  .topic-card h3 { font-size: 22px !important; line-height: 1.2 !important; }

  /* Formation chips */
  .formation-chip { padding: 18px !important; }
  .formation-chip .text-\[24px\] { font-size: 20px !important; }

  /* Hero buttons full-width sur mobile */
  .btn-primary, .btn-dark, .btn-getstarted, .btn-signin { min-width: 0 !important; }

  /* Forms */
  .field { font-size: 15px !important; padding: 11px 13px !important; }

  /* Photo Sandy Herry — recentrage */
  figure img.aspect-\[3\/4\] { width: 220px !important; height: auto !important; }

  /* Mobile menu - éviter overflow */
  .mobile-menu .pl-4 { padding-left: 14px !important; }

  /* Iframe carte */
  iframe[title*="Carte"] { min-height: 280px; }
}

/* Tablette */
@media (min-width: 768px) and (max-width: 1023px) {
  section { padding-left: 32px !important; padding-right: 32px !important; }
  .cta-dark { padding: 48px 36px !important; }
  .cta-dark h2 { font-size: clamp(36px, 5.5vw, 52px) !important; }
}

/* Sécurité globale : empêcher tout scroll horizontal */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
img, video, iframe { max-width: 100%; height: auto; }
*, *::before, *::after { min-width: 0; }