/* ==========================================================================
   liquid-glass.css — v3 (carte blanche)
   Overlay d'évolutions graphiques : glass profond + effets signature 2025.
   Charge après shared.css pour surcharger les propriétés visuelles.
   ========================================================================== */

/* ============================================================
   1. TYPOGRAPHIE — smoothing + ligatures moUve
   ============================================================ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body {
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
  -webkit-font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
}
h1, h2, h3, h4, .hero-title, .section-title {
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1, 'cv11' 1;
  -webkit-font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1, 'cv11' 1;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   2. NOISE GRAIN OVERLAY — texture papier luxe subtile
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('img/noise.svg');
  background-size: 180px;
  background-repeat: repeat;
  opacity: .02;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: soft-light;
}

/* ============================================================
   3. SCROLL PROGRESS BAR — ligne verticale gauche, accentuée
   ============================================================ */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 3px;
  height: 100vh;
  background: linear-gradient(180deg,
              rgba(var(--page-accent-rgb, 52, 86, 162), .2) 0%,
              rgba(var(--page-accent-rgb, 52, 86, 162), .8) 100%);
  transform-origin: top;
  transform: scaleY(var(--scroll-progress, 0));
  transition: transform .1s linear;
  z-index: 9998;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(var(--page-accent-rgb, 52, 86, 162), .4);
}

/* ============================================================
   4. NAV — glass plus profond
   ============================================================ */
nav {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(52, 86, 162, .08) !important;
  box-shadow: 0 2px 24px rgba(24, 40, 74, .06),
              inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}
nav.scrolled {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(32px) saturate(2.0) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2.0) !important;
  box-shadow: 0 4px 28px rgba(24, 40, 74, .08),
              inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

/* ============================================================
   5. BOUTONS — halos tri-color + specular highlight sweep
   ============================================================ */
.btn-p, .btn-t {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  letter-spacing: .3px !important;
  font-weight: 800 !important;
}

/* Sweep : traîne lumineuse qui balaie au hover */
.btn-p::before, .btn-t::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg,
              transparent 0%,
              rgba(255, 255, 255, .4) 50%,
              transparent 100%);
  transform: skewX(-20deg);
  transition: left .6s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 1;
}
.btn-p:hover::before, .btn-t:hover::before {
  left: 130%;
}

.btn-p {
  background: linear-gradient(135deg, #3456A2 0%, #4D80F0 60%, #5B91FF 100%) !important;
  box-shadow: 0 10px 32px rgba(52, 86, 162, .42),
              0 4px 14px rgba(77, 128, 240, .22),
              inset 0 1px 0 rgba(255, 255, 255, .35),
              inset 0 -2px 4px rgba(0, 0, 0, .08) !important;
}
.btn-p:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 44px rgba(77, 128, 240, .52),
              0 6px 18px rgba(52, 86, 162, .28),
              inset 0 1px 0 rgba(255, 255, 255, .45),
              inset 0 -2px 4px rgba(0, 0, 0, .1) !important;
}

.btn-t {
  background: linear-gradient(135deg, #EC686B 0%, #F09496 55%, #FC9B2B 100%) !important;
  box-shadow: 0 10px 32px rgba(236, 104, 107, .42),
              0 4px 14px rgba(252, 155, 43, .22),
              inset 0 1px 0 rgba(255, 255, 255, .35),
              inset 0 -2px 4px rgba(0, 0, 0, .08) !important;
}
.btn-t:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 44px rgba(252, 155, 43, .48),
              0 6px 18px rgba(236, 104, 107, .3),
              inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}

.btn-g {
  background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .55)) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  box-shadow: 0 4px 20px rgba(var(--glow-rgb, 52, 86, 162), .12),
              inset 0 1px 0 rgba(255, 255, 255, .6),
              inset 0 -1px 0 rgba(0, 0, 0, .04) !important;
  letter-spacing: .2px !important;
}

.nav-cta {
  background: linear-gradient(135deg, #3456A2, #4D80F0) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(52, 86, 162, .28),
              inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  letter-spacing: .2px !important;
}
.nav-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(77, 128, 240, .38),
              inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}

.nav-cta-alt {
  background: rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(16px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
              0 4px 16px rgba(0, 0, 0, .2) !important;
}

/* ============================================================
   6. CARTES — glass adapté selon fond clair ou sombre
   ============================================================ */

/* Par défaut (fond clair) : glass blanc translucide */
.if, .ef, .rp, .card, .panel, .glass {
  position: relative;
  background: linear-gradient(135deg,
              rgba(255, 255, 255, .8) 0%,
              rgba(255, 255, 255, .55) 100%) !important;
  backdrop-filter: blur(32px) saturate(2.0) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2.0) !important;
  border: 1px solid rgba(var(--page-accent-rgb, 52, 86, 162), .14) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08),
              0 6px 18px rgba(0, 0, 0, .04),
              inset 0 1px 0 rgba(255, 255, 255, .7),
              inset 0 -1px 0 rgba(0, 0, 0, .03) !important;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
              box-shadow .5s cubic-bezier(.22, 1, .36, 1),
              border-color .3s ease !important;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Sur pages à fond sombre (pro, reeduc, patient, partenaire, index) :
   glass sombre avec accent coloré subtil */
body.dark-hero .if,
body.dark-hero .ef,
body.dark-hero .rp,
body.dark-hero .card,
body.dark-hero .panel,
body.dark-hero .glass,
body[data-glow-cursor] .if,
body[data-glow-cursor] .ef,
body[data-glow-cursor] .rp,
body[data-glow-cursor] .card,
body[data-glow-cursor] .panel {
  background: linear-gradient(135deg,
              rgba(24, 32, 58, .55) 0%,
              rgba(18, 24, 44, .35) 100%) !important;
  border: 1px solid rgba(var(--page-accent-rgb, 52, 86, 162), .28) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35),
              0 6px 18px rgba(0, 0, 0, .2),
              inset 0 1px 0 rgba(255, 255, 255, .15),
              inset 0 -1px 0 rgba(0, 0, 0, .1) !important;
  color: #ffffff !important;
}
body.dark-hero .if *,
body.dark-hero .ef *,
body.dark-hero .rp *,
body[data-glow-cursor] .if *,
body[data-glow-cursor] .ef *,
body[data-glow-cursor] .rp * {
  color: inherit;
}

.if:hover, .ef:hover, .rp:hover, .card:hover, .panel:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 30px 80px rgba(var(--page-accent-rgb, 52, 86, 162), .18),
              0 10px 28px rgba(0, 0, 0, .06),
              inset 0 1px 0 rgba(255, 255, 255, .85) !important;
  border-color: rgba(var(--page-accent-rgb, 52, 86, 162), .32) !important;
}
body.dark-hero .if:hover,
body.dark-hero .ef:hover,
body.dark-hero .rp:hover,
body[data-glow-cursor] .if:hover,
body[data-glow-cursor] .ef:hover,
body[data-glow-cursor] .rp:hover {
  transform: translateY(-6px) scale(1.015);
  background: linear-gradient(135deg,
              rgba(30, 40, 70, .65) 0%,
              rgba(24, 32, 58, .45) 100%) !important;
  box-shadow: 0 30px 80px rgba(var(--page-accent-rgb, 52, 86, 162), .35),
              0 10px 28px rgba(0, 0, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  border-color: rgba(var(--page-accent-rgb, 52, 86, 162), .5) !important;
}

/* ============================================================
   6a. CARDS INLINE-STYLE FOND BLANC (équipe, manifeste) sur pages sombres
   Cible les cartes avec inline style `background:rgba(255,255,255,.65)`
   ============================================================ */
body.dark-hero [style*="rgba(255,255,255,.65)"],
body.dark-hero [style*="rgba(255,255,255,.7)"],
body.dark-hero [style*="rgba(255,255,255,.75)"],
body.dark-hero [style*="rgba(255,255,255,.8)"],
body.dark-hero [style*="rgba(255,255,255,.85)"],
body.dark-hero [style*="background:#fff"],
body.dark-hero [style*="background:#ffffff"],
body.dark-hero [style*="background: #fff"],
body[data-glow-cursor] [style*="rgba(255,255,255,.65)"],
body[data-glow-cursor] [style*="rgba(255,255,255,.7)"],
body[data-glow-cursor] [style*="background:#fff"] {
  background: linear-gradient(135deg,
              rgba(24, 32, 58, .55) 0%,
              rgba(18, 24, 44, .35) 100%) !important;
  border: 1px solid rgba(var(--page-accent-rgb, 52, 86, 162), .3) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3),
              0 6px 16px rgba(0, 0, 0, .15),
              inset 0 1px 0 rgba(255, 255, 255, .15),
              inset 0 -1px 0 rgba(0, 0, 0, .1) !important;
  color: #ffffff !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
}

/* Tous les enfants texte deviennent lisibles en blanc */
body.dark-hero [style*="rgba(255,255,255,.65)"] *,
body.dark-hero [style*="rgba(255,255,255,.7)"] *,
body[data-glow-cursor] [style*="rgba(255,255,255,.65)"] * {
  color: inherit;
}

/* ============================================================
   6b. SCREEN-FRAME (mockups app) — device bezel sombre
   Transforme la frame blanche autour des screenshots en browser
   window sombre pour un look premium sur fond noir.
   ============================================================ */
body.dark-hero .screen-frame,
body[data-glow-cursor] .screen-frame {
  position: relative;
  background: linear-gradient(180deg,
              #1f2a45 0%,
              #141b2f 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(var(--page-accent-rgb, 52, 86, 162), .3) !important;
  border-radius: 16px !important;
  padding: 36px 14px 14px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5),
              0 12px 32px rgba(0, 0, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}
/* Petite barre type "browser bar" en haut */
body.dark-hero .screen-frame::before,
body[data-glow-cursor] .screen-frame::before {
  content: '';
  position: absolute;
  top: 14px; left: 18px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}
body.dark-hero .screen-frame img,
body[data-glow-cursor] .screen-frame img {
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4),
              0 2px 8px rgba(0, 0, 0, .2) !important;
}

/* Tous les textes dans les cards blanches converties en sombre :
   noms/titres en blanc, paragraphes en blanc 75-85% */
body.dark-hero [style*="rgba(255,255,255,.65)"] *,
body.dark-hero [style*="rgba(255,255,255,.7)"] *,
body[data-glow-cursor] [style*="rgba(255,255,255,.65)"] * {
  color: inherit;
}

/* Forcer tout texte hérité de --texte (navy sombre) en blanc pur */
body.dark-hero [style*="color:#1E2A42"],
body.dark-hero [style*="color:#1e2a42"],
body.dark-hero [style*="color:var(--texte)"],
body.dark-hero [style*="color:#18284A"],
body.dark-hero [style*="color:#18284a"],
body.dark-hero [style*="color:var(--b-noir)"],
body[data-glow-cursor] [style*="color:#1E2A42"],
body[data-glow-cursor] [style*="color:#1e2a42"],
body[data-glow-cursor] [style*="color:var(--texte)"] {
  color: #ffffff !important;
}

/* Texte secondaire gris navy → blanc 75% */
body.dark-hero [style*="color:#5A627A"],
body.dark-hero [style*="color:#5a627a"],
body.dark-hero [style*="color:var(--texte-soft)"],
body[data-glow-cursor] [style*="color:#5A627A"],
body[data-glow-cursor] [style*="color:#5a627a"],
body[data-glow-cursor] [style*="color:var(--texte-soft)"] {
  color: rgba(255, 255, 255, .78) !important;
}

/* Les noms/titres à l'intérieur des cards équipe (couleur navy texte par défaut) */
body.dark-hero #equipe div > div,
body.dark-hero #equipe a,
body.dark-hero section[id*="equipe"] a,
body[data-glow-cursor] #equipe div > div,
body[data-glow-cursor] #equipe a {
  color: #ffffff !important;
}
body.dark-hero #equipe p,
body.dark-hero section[id*="equipe"] p,
body[data-glow-cursor] #equipe p {
  color: rgba(255, 255, 255, .82) !important;
}
/* Les labels "VISION & IDÉE", "DESIGN & IDENTITÉ", "DÉVELOPPEMENT" :
   garder leur couleur brand mais relever opacité */
body.dark-hero #equipe [style*="letter-spacing"][style*="uppercase"] {
  opacity: 1 !important;
}

/* Photos d'avatar en haut des cards équipe : garder leur aspect
   mais ajouter un liseré glass */
body.dark-hero #equipe img,
body.dark-hero #equipe [style*="border-radius:16px"],
body.dark-hero #equipe [style*="border-radius:20px"] {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4),
              inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

/* Navigation : sur pages sombres, un glass sombre plutôt que blanc */
body.dark-hero nav,
body[data-glow-cursor] nav {
  background: rgba(18, 24, 44, .6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .3),
              inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}
body.dark-hero nav.scrolled,
body[data-glow-cursor] nav.scrolled {
  background: rgba(18, 24, 44, .78) !important;
  box-shadow: 0 4px 28px rgba(0, 0, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
body.dark-hero nav .nav-links a,
body[data-glow-cursor] nav .nav-links a {
  color: rgba(255, 255, 255, .82) !important;
}
body.dark-hero nav .nav-links a:hover,
body[data-glow-cursor] nav .nav-links a:hover {
  color: #ffffff !important;
}

/* Tilt pilotée en JS via custom properties */
.tilt {
  transform:
    perspective(1000px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(-6px) scale(1.015) !important;
  transition: transform .15s ease-out !important;
}

/* ============================================================
   7. PILLS (eyebrows) — halo brand plus opaque et contrasté
   ============================================================ */
.eyebrow, .pill, .badge, .tag, .chip {
  background: linear-gradient(135deg,
              rgba(var(--page-accent-rgb, 52, 86, 162), .32),
              rgba(var(--page-accent-rgb, 52, 86, 162), .18)) !important;
  backdrop-filter: blur(16px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
  border: 1.5px solid rgba(var(--page-accent-rgb, 52, 86, 162), .55) !important;
  box-shadow: 0 6px 22px rgba(var(--page-accent-rgb, 52, 86, 162), .28),
              0 2px 8px rgba(var(--page-accent-rgb, 52, 86, 162), .14),
              inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  color: #ffffff !important;
  letter-spacing: .8px !important;
  padding: .55rem 1.2rem !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* ============================================================
   8. GRADIENT TEXT ANIMÉ — mots clés
   Cible les classes natives du site (acc-b, acc-r, acc-o) + data-gradient
   ============================================================ */
h1 .acc-b,
h1 .acc-r,
h1 .acc-o,
.hero-title .accent,
.hero-title strong,
.hero-title em,
h1 .gradient,
.gradient-text {
  background: linear-gradient(120deg,
              #3456A2 0%,
              #4D80F0 25%,
              #EC686B 50%,
              #FC9B2B 75%,
              #3456A2 100%) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: gradientShift 8s ease-in-out infinite;
  font-style: normal;
}
/* Chaque accent part avec un offset différent pour un effet organique */
h1 .acc-b { animation-delay: 0s; }
h1 .acc-r { animation-delay: -2s; }
h1 .acc-o { animation-delay: -4s; }

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================================
   9. HERO — orbes ambiants avec parallax JS
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 15%, rgba(var(--page-accent-rgb, 52, 86, 162), .16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(252, 155, 43, .1) 0%, transparent 50%);
  transform: translateY(calc(var(--scroll-y, 0px) * .3));
  pointer-events: none;
  z-index: 0;
  transition: transform .1s linear;
}
.hero > * { position: relative; z-index: 1; }

/* ============================================================
   10. SCROLL REVEAL — désactivé au profit du safety-net
   (l'animation-timeline: view() créait des éléments invisibles
    en cas de viewport grand ou de preview sans scroll)
   ============================================================ */
/* Plus d'animation native, le safety-net @guaranteedReveal prend le relais */
/* Fallback IntersectionObserver */
.reveal-ready {
  opacity: 0;
  transform: translateY(40px) scale(.97);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
              transform .8s cubic-bezier(.22, 1, .36, 1);
}
.reveal-ready.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================
   11. CURSOR GLOW (opt-in via .has-glow-cursor sur body)
   ============================================================ */
.glow-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle,
              rgba(var(--page-accent-rgb, 77, 128, 240), .22) 0%,
              rgba(var(--page-accent-rgb, 77, 128, 240), .08) 35%,
              transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9997;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .4s ease;
  filter: blur(40px);
  will-change: transform;
}
.has-glow-cursor .glow-cursor { opacity: 1; }

/* ============================================================
   12. LOGOS — drop-shadow coloré
   ============================================================ */
nav img,
.footer-logo,
.hero-logo {
  filter: drop-shadow(0 2px 8px rgba(var(--page-accent-rgb, 52, 86, 162), .18))
          drop-shadow(0 1px 3px rgba(0, 0, 0, .08));
  transition: filter .35s ease, transform .35s ease;
}
nav img:hover {
  filter: drop-shadow(0 4px 14px rgba(var(--page-accent-rgb, 52, 86, 162), .3))
          drop-shadow(0 2px 6px rgba(0, 0, 0, .1));
  transform: scale(1.04);
}

/* ============================================================
   13. KPI COUNTER — style du chiffre quand animé
   ============================================================ */
.kpi-num[data-target] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: left;
}

/* ============================================================
   14. FOCUS accessibility
   ============================================================ */
a:focus-visible, button:focus-visible,
.btn-p:focus-visible, .btn-g:focus-visible, .btn-t:focus-visible {
  outline: 2px solid rgba(var(--page-accent-rgb, 52, 86, 162), .7);
  outline-offset: 3px;
  border-radius: 50px;
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .btn-p, .btn-t, .btn-g {
    padding: .9rem 2rem !important;
    font-size: .95rem !important;
  }
  .if:hover, .ef:hover, .rp:hover {
    transform: translateY(-3px) scale(1) !important;
  }
  body::after { display: none; }
  .glow-cursor { display: none; }
}
@media (max-width: 480px) {
  .btn-p, .btn-t, .btn-g {
    padding: .85rem 1.6rem !important;
    font-size: .88rem !important;
    letter-spacing: .1px !important;
  }
  .eyebrow, .pill, .badge {
    letter-spacing: .5px !important;
    padding: .4rem .85rem !important;
    font-size: .72rem !important;
  }
  body::before { opacity: .025; }
}

/* ============================================================
   7a. EYEBROWS SPÉCIFIQUES DU SITE (why-eyebrow, hero-eyebrow, etc.)
   Overrides des classes custom du site avec valeurs opaques brand.
   ============================================================ */
.hero .hero-eyebrow,
.hero .why-eyebrow,
.why-eyebrow,
.hero-eyebrow {
  background: linear-gradient(135deg,
              rgba(var(--page-accent-rgb, 52, 86, 162), .48),
              rgba(var(--page-accent-rgb, 52, 86, 162), .28)) !important;
  backdrop-filter: blur(14px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.8) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(var(--page-accent-rgb, 52, 86, 162), .7) !important;
  box-shadow: 0 6px 22px rgba(var(--page-accent-rgb, 52, 86, 162), .32),
              inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45) !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  padding: .55rem 1.3rem !important;
}

/* ============================================================
   7aa. PILLS SUR HERO SOMBRE — encore plus opaques
   ============================================================ */
body.dark-hero .hero .eyebrow,
body.dark-hero .hero .pill,
body.dark-hero .hero .badge,
body.dark-hero .hero .tag,
body.dark-hero .hero .chip,
body.dark-hero section.hero .eyebrow,
body[data-glow-cursor] .hero .eyebrow,
body[data-glow-cursor] .hero .pill,
body[data-glow-cursor] .hero .badge {
  background: linear-gradient(135deg,
              rgba(var(--page-accent-rgb, 52, 86, 162), .55),
              rgba(var(--page-accent-rgb, 52, 86, 162), .32)) !important;
  border: 1.5px solid rgba(var(--page-accent-rgb, 52, 86, 162), .75) !important;
  box-shadow: 0 8px 28px rgba(var(--page-accent-rgb, 52, 86, 162), .4),
              0 2px 10px rgba(var(--page-accent-rgb, 52, 86, 162), .24),
              inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5) !important;
}

/* ============================================================
   7b. BANDEAUX SECTIONS — ancres colorées avec fond soutenu
   Pour toute section banner qui utilise class="banner" ou wrappers sombres
   ============================================================ */
.banner, .banner-wrap, [data-banner] {
  background: linear-gradient(135deg,
              rgba(var(--page-accent-rgb, 52, 86, 162), .22),
              rgba(var(--page-accent-rgb, 52, 86, 162), .1)) !important;
  border: 1px solid rgba(var(--page-accent-rgb, 52, 86, 162), .35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

/* ============================================================
   16b. LISIBILITÉ — supprimer les gris neutres hors charte
   Remplace #5A627A (texte-soft gris) par une version brand-aware
   (dérivée du bleu principal), et renforce les opacités des
   textes sur fond sombre des pages pro / reeduc.
   ============================================================ */
:root {
  /* Override de shared.css : on passe d'un gris froid à un navy brand */
  --texte-soft: #3D4E75 !important;
}

/* Tous les textes "secondaires" sur fond clair : navy brand, pas gris */
nav .nav-links a { color: #3D4E75 !important; }
nav .nav-links a:hover { color: #3456A2 !important; }

/* Hero h1 : le texte de base reste blanc pur, sans risque d'être grisé */
.hero h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .3), 0 1px 0 rgba(0, 0, 0, .12);
}

/* ============================================================
   SAFETY NET — Garantir la visibilité permanente
   Tous les .fade-* / .word / stagger deviennent visibles
   immédiatement. L'animation shared.js originale joue en douceur
   si elle se déclenche, sinon le fallback est invisible (déjà visible).
   ============================================================ */

.fade-up, .fade-left, .fade-right, .fade-scale,
.stagger > *,
.hero-title-anim .word,
.s-title .word,
.word {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .6s ease, transform .6s ease !important;
}

/* ============================================================
   LISIBILITÉ GLOBALE — remontée des opacités des textes pâles
   ============================================================ */

/* Bleu lavé `rgba(228,236,255, X)` → blanc plus contrasté
   (présent partout dans pro.css, reeduc.css pour textes secondaires) */
[class*="word"],
.hero-sub,
.cc-label,
.tap-hint,
p, span, div,
section p, section div {
  /* Rien : on override ci-dessous précisément */
}

/* Remplace les teintes bleues lavées par du blanc plus dense */
.hero-sub { color: rgba(255, 255, 255, .88) !important; font-weight: 500; }
.hero-sub strong { color: #ffffff !important; font-weight: 700; }

.cc-label { color: rgba(255, 255, 255, .78) !important; font-weight: 500 !important; }
.cc-card-src, .hero-kpis .kpi-src { color: rgba(255, 255, 255, .62) !important; }
.tap-hint { color: rgba(255, 255, 255, .72) !important; font-weight: 500; }

/* Tous les textes `rgba(228,236,255, X)` hardcodés deviennent blanc adaptés */
[style*="color:rgba(228,236,255"],
[style*="color: rgba(228, 236, 255"] {
  color: rgba(255, 255, 255, .82) !important;
}
[style*="color:rgba(228,236,255,.5)"],
[style*="color:rgba(228,236,255,0.5)"],
[style*="color: rgba(228, 236, 255, 0.5)"] {
  color: rgba(255, 255, 255, .72) !important;
}

/* `.word` dans les hero (non-accent) : blanc pur */
.hero h1 .word:not(.acc-b):not(.acc-r):not(.acc-o):not(.acc-t):not(.acc-ret):not(.acc-reset) {
  color: #ffffff !important;
}
/* `.word` dans les section titles : blanc adapté */
section .s-title .word,
section h2 .word {
  color: #ffffff !important;
}
/* `.word` qui utilisent rgba(228,236,255,0.52) dans les paragraphes : remontée */
section p .word, section div .word {
  color: rgba(255, 255, 255, .82) !important;
}

/* Pages pro / reeduc — sous-textes blanc-bleuté : opacité remontée
   (avant : 0.58 → trop faible sur backdrop) */
[style*="rgba(228,236,255,.58)"],
[style*="rgba(228,236,255,0.58)"] { color: rgba(228, 236, 255, .82) !important; }
[style*="rgba(228,236,255,.5)"],
[style*="rgba(228,236,255,0.5)"]  { color: rgba(228, 236, 255, .78) !important; }
[style*="rgba(228,236,255,.4)"],
[style*="rgba(228,236,255,0.4)"]  { color: rgba(228, 236, 255, .7) !important; }

/* Reeduc : version rose / saumon pour les secondaires (au lieu de bleu grisé) */
body[data-page="reeduc"] [style*="rgba(228,236,255"] {
  color: rgba(255, 236, 236, .82) !important;
}

/* Élimine la teinte bleu pâle lavée (#9DBBFD) sur pro — bump vers d-blue */
[style*="rgba(157,187,253"] { color: rgba(91, 145, 255, 1) !important; }

/* Titres de sections sombres : blanc pur, pas grisé */
section .section-title,
section > h2,
section > h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .2);
}

/* KPI labels sur fond sombre — renforcer contraste */
.hero-kpis .kpi-label {
  color: rgba(228, 236, 255, .8) !important;
  font-weight: 500 !important;
}
.hero-kpis .kpi-src {
  color: rgba(228, 236, 255, .55) !important;
  font-weight: 400 !important;
}

/* Footer et micro-copy — navy brand plutôt que gris neutre */
footer, footer * {
  color: #3D4E75;
}
footer a { color: #3456A2 !important; }

/* ============================================================
   17. MOTION REDUCE — respect prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .glow-cursor { display: none; }
  .hero-title .accent,
  .hero-title strong,
  .gradient-text {
    animation: none;
    background-position: 0% 50%;
  }
  .reveal-ready {
    opacity: 1;
    transform: none;
  }
}