/* =====================================================================
   AURORA GLASS — Design System « Liquid Glass » pour index.html
   Surcharge non destructive : tout est scopé sous body.lg-on
   Optimisé fond sombre, adaptatif clair/sombre, allégé sur mobile.
   ===================================================================== */

body.lg-on {
  /* — Tokens Verre —
     Fond volontairement semi-OPAQUE (et non quasi transparent) : la carte
     reste « pleine » même si le backdrop-filter décroche pendant un scroll
     rapide. Le flou ne fait qu'ajouter la profondeur, il ne porte plus la carte. */
  --glass-bg:         rgba(20, 24, 33, 0.62);
  --glass-bg-strong:  rgba(26, 31, 42, 0.74);
  --glass-border:     rgba(255, 255, 255, 0.14);
  --glass-highlight:  rgba(255, 255, 255, 0.55);
  --glass-blur:       18px;
  --glass-saturate:   170%;

  /* — Aurora / accents — */
  --aurora-1: #37EFBA;   /* vert signature */
  --aurora-2: #00d4ff;   /* cyan tech */
  --aurora-3: #7b5cff;   /* violet IA */

  /* --accent-text / --warn-text / --bad-text (thème-aware) → CSS/tokens.css */

  --glow-accent:  0 0 38px rgba(55, 239, 186, 0.32);
  --glass-shadow: 0 14px 42px rgba(0, 0, 0, 0.35),
                  inset 0 1px 0 var(--glass-highlight),
                  inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  --radius-glass: 22px;

  /* Fond profond de base (mode héros, légèrement teinté) */
  --lg-deep: #0b0e14;
}

/* MODE CLAIR — Liquid Glass lumineux :
   verre blanc translucide (laisse transparaître l'aurora pastel),
   bordure-reflet vive et OMBRE DOUCE COLORÉE qui fait flotter la carte. */
body.lg-on:not(.dark-mode) {
  --glass-bg:        rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border:    rgba(255, 255, 255, 0.9);
  --glass-highlight: rgba(255, 255, 255, 0.95);
  --glass-saturate:  190%;
  /* --accent-text / --warn-text / --bad-text (mode clair) → CSS/tokens.css */
  --glow-accent:     0 0 40px rgba(55, 200, 160, 0.35);
  /* Ombre teintée (bleu/violet doux) plutôt que noire → effet premium flottant */
  --glass-shadow: 0 18px 50px rgba(70, 100, 160, 0.18),
                  0 4px 14px rgba(120, 90, 200, 0.10),
                  inset 0 1px 0 rgba(255, 255, 255, 0.95),
                  inset 0 -1px 0 rgba(120, 140, 180, 0.12);
}
/* Base : dégradé clair multi-teintes (bleuté → lavande) au lieu d'un gris plat */
body.lg-on:not(.dark-mode) {
  background: linear-gradient(155deg, #eef4f9 0%, #e9eef7 45%, #f1ebf8 100%);
}

/* ---------------------------------------------------------------------
   1. FOND AURORA VIVANT
   --------------------------------------------------------------------- */
body.lg-on {
  background: var(--lg-deep);
}

.lg-aurora {
  position: fixed;
  inset: -20% -10% -10% -10%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Pas de filter: blur() ici (coût GPU continu) : les dégradés radiaux
     sont déjà doux. La douceur vient des stops "transparent". */
}
.lg-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
/* Light : nuages pastel colorés (blend normal = couleurs pures, pas grisées) */
body.lg-on:not(.dark-mode) .lg-aurora span { opacity: 0.5; mix-blend-mode: normal; }
/* Grille « circuit » : lignes sombres subtiles sur fond clair */
body.lg-on:not(.dark-mode) .lg-aurora::after {
  background-image:
    linear-gradient(rgba(40,70,110,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,70,110,0.06) 1px, transparent 1px);
}

.lg-aurora .blob-1 {
  width: 46vw; height: 46vw; left: -6vw; top: -8vw;
  background: radial-gradient(circle at 30% 30%, var(--aurora-1), transparent 65%);
  animation: lgFloat1 26s ease-in-out infinite;
}
.lg-aurora .blob-2 {
  width: 40vw; height: 40vw; right: -8vw; top: 6vw;
  background: radial-gradient(circle at 60% 40%, var(--aurora-2), transparent 65%);
  animation: lgFloat2 32s ease-in-out infinite;
}
.lg-aurora .blob-3 {
  width: 44vw; height: 44vw; left: 22vw; bottom: -16vw;
  background: radial-gradient(circle at 50% 50%, var(--aurora-3), transparent 66%);
  animation: lgFloat3 30s ease-in-out infinite;
}

@keyframes lgFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(8vw, 6vw) scale(1.15); }
  66%     { transform: translate(-4vw, 10vw) scale(0.95); }
}
@keyframes lgFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-10vw, 8vw) scale(1.2); }
}
@keyframes lgFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(6vw, -8vw) scale(1.1); }
  75%     { transform: translate(-8vw, -4vw) scale(0.9); }
}

/* Grille « circuit » subtile par-dessus l'aurora */
.lg-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
}

/* Le contenu passe au-dessus du fond, fonds opaques neutralisés */
body.lg-on .body-content { background: transparent; position: relative; z-index: 1; }
body.lg-on section,
body.lg-on .section-alt { background: transparent !important; }

/* ---------------------------------------------------------------------
   2. CURSEUR-HALO IA
   --------------------------------------------------------------------- */
.lg-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle, rgba(55,239,186,0.10), transparent 60%);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
body.lg-on.lg-cursor-active .lg-cursor { opacity: 1; }

/* ---------------------------------------------------------------------
   3. BRIQUE GLASS UNIVERSELLE
   Appliquée aux cartes existantes sans toucher au HTML structurel
   --------------------------------------------------------------------- */
body.lg-on .advantage-card,
body.lg-on .service-card,
body.lg-on .testimonial-card,
body.lg-on .ia-point,
body.lg-on .contact-form,
body.lg-on .contact-info,
body.lg-on .project-content,
body.lg-on .stat-item {
  position: relative;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-glass) !important;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1),
              box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Reflet spéculaire qui suit la souris (piloté en JS via --mx/--my) */
body.lg-on .advantage-card::before,
body.lg-on .service-card::before,
body.lg-on .testimonial-card::before,
body.lg-on .ia-point::before,
body.lg-on .project-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
      320px circle at var(--mx, 50%) var(--my, 0%),
      rgba(255,255,255,0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
body.lg-on .advantage-card:hover::before,
body.lg-on .service-card:hover::before,
body.lg-on .testimonial-card:hover::before,
body.lg-on .ia-point:hover::before,
body.lg-on .project-content:hover::before { opacity: 1; }

/* Liseré-reflet supérieur (épaisseur du verre) */
body.lg-on .advantage-card::after,
body.lg-on .service-card::after,
body.lg-on .testimonial-card::after {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
  z-index: 2;
}

body.lg-on .advantage-card:hover,
body.lg-on .service-card:hover,
body.lg-on .testimonial-card:hover,
body.lg-on .ia-point:hover,
body.lg-on .project-content:hover {
  transform: translateY(-8px);
  border-color: rgba(55,239,186,0.55) !important;
  box-shadow: var(--glass-shadow), var(--glow-accent);
}

/* Le contenu des cartes reste net au-dessus des reflets */
body.lg-on .service-card > *,
body.lg-on .advantage-card > *,
body.lg-on .testimonial-card > *,
body.lg-on .ia-point > *,
body.lg-on .project-content > * { position: relative; z-index: 3; }

/* Carte service mise en avant : verre teinté accent */
body.lg-on .service-card.featured {
  background: linear-gradient(160deg, rgba(55,239,186,0.16), var(--glass-bg)) !important;
  border-color: rgba(55,239,186,0.45) !important;
}

/* La règle « > * » ci-dessous neutralise le position:absolute du badge :
   on le restaure (sinon il s'étire et chevauche l'icône). */
body.lg-on .service-card .service-badge {
  position: absolute;
  width: auto;
  z-index: 4;
}

/* Icônes de service : pastille de verre lumineuse */
body.lg-on .service-icon,
body.lg-on .ia-point-ic {
  background: linear-gradient(140deg, rgba(55,239,186,0.22), rgba(0,212,255,0.12)) !important;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 6px 18px rgba(0,0,0,0.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------------
   4. HEADER « DYNAMIC ISLAND »
   --------------------------------------------------------------------- */
body.lg-on header {
  background: transparent !important;
  border: none;
  padding: 0.7rem 0;
  transition: padding 0.4s ease;
  /* Force le header fixe sur sa propre couche GPU : évite le bug Chromium où un
     élément fixed à backdrop-filter « décroche » en scrollant au-dessus d'autres
     backdrop-filter (les cartes glass). Le header reste positionné au viewport. */
  transform: translateZ(0);
  will-change: transform;
}
/* La pilule elle-même (qui porte le backdrop-filter) sur sa couche également. */
body.lg-on .header-container { will-change: transform; }
body.lg-on .header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.55rem 1.4rem;
  background: rgba(16,19,27,0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.12);
  width: calc(100% - 2.4rem);
  transition: all 0.45s cubic-bezier(.2,.7,.3,1);
}
/* Le header reste sombre dans les deux thèmes (les liens du menu sont clairs) */
/* Densification au scroll (classe ajoutée en JS) :
   on garde la largeur — le menu est trop riche pour une vraie contraction —
   on densifie le verre, on resserre le padding et on ajoute le glow. */
body.lg-on.lg-scrolled .header-container {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  background: rgba(16,19,27,0.78);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.14),
              var(--glow-accent);
}
/* Neutralise le fond opaque hérité de la <ul> (créait un rectangle gris) */
body.lg-on header nav ul,
body.lg-on header nav ul li {
  background: transparent !important;
}
body.lg-on header nav a { transition: color .3s ease; }

/* Footer en verre */
body.lg-on footer {
  background: rgba(16,19,27,0.6) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-border);
}

/* Header & footer : « chrome flottant » SOMBRE dans les deux thèmes.
   Ils sont en position:fixed et passent au-dessus du hero sombre — un verre
   clair y deviendrait gris boueux. Le verre sombre reste net partout
   (sur le hero sombre comme sur les sections claires). */

/* ---------------------------------------------------------------------
   5. HERO AUGMENTÉ
   --------------------------------------------------------------------- */
/* Le hero reste « héros » sombre dans les deux thèmes : texte clair garanti */
body.lg-on .hero { background: transparent; }
body.lg-on .hero-overlay {
  background:
    radial-gradient(ellipse 80% 62% at 50% 30%, rgba(55,239,186,0.26), transparent 66%),
    radial-gradient(ellipse 55% 48% at 80% 78%, rgba(0,200,255,0.18), transparent 70%),
    radial-gradient(ellipse 50% 45% at 15% 82%, rgba(123,92,255,0.14), transparent 72%),
    linear-gradient(165deg, rgba(9,22,28,0.82) 0%, rgba(11,28,36,0.7) 52%, rgba(8,17,23,0.9) 100%);
}
body.lg-on .hero-content,
body.lg-on .hero-title-line { color: #f4fbff; }

/* Titre : dégradé liquide animé sur tout le titre */
body.lg-on .hero-title-accent {
  /* Couleurs à haute luminance + violet éclairci (#a99bff) : le tri-ton d'origine
     (dont #7b5cff) descendait trop bas en clarté et se lisait mal sur le hero sombre. */
  background: linear-gradient(110deg, #5ff5ce, #35e3ff 44%, #a99bff 76%, #5ff5ce);
  background-size: 250% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lgTitleFlow 8s linear infinite;
  /* Halo sombre + glow vert : détache les glyphes du fond pour la lisibilité. */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)) drop-shadow(0 2px 22px rgba(55,239,186,0.28));
}
@keyframes lgTitleFlow {
  to { background-position: 250% center; }
}

/* ===== Titres de héros des OUTILS en dégradé liquide (cohérence globale) =====
   Les guides (.g-hero), fiches (.fiche-hero b) et parcours (.iv-hero b) ont déjà
   leur dégradé via leur CSS dédié. Ici on couvre tous les héros « bespoke » des
   autres outils, dont les <h1> n'avaient qu'une couleur blanche héritée. */
body.lg-on .solid-hero h1, body.lg-on .atelier-hero h1, body.lg-on .bug-hero h1,
body.lg-on .spec-hero h1, body.lg-on .pat-hero h1, body.lg-on .el-hero h1,
body.lg-on .lp-hero h1, body.lg-on .col-hero h1, body.lg-on .cc-hero h1,
body.lg-on .sg-hero h1, body.lg-on .arch-hero h1, body.lg-on .aa-hero h1,
body.lg-on .fw-hero h1, body.lg-on .us-hero h1, body.lg-on .wsjf-hero h1,
body.lg-on .calc-hero h1, body.lg-on .cy-hero h1, body.lg-on .scam-hero h1,
body.lg-on .pw-hero h1, body.lg-on .sp-hero h1, body.lg-on .ux-hero h1 {
  font-weight: 800;
  background: linear-gradient(110deg, #37EFBA, #00d4ff 50%, #7b5cff 80%, #37EFBA);
  background-size: 250% auto;
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: lgTitleFlow 8s linear infinite;
}

/* Curseur de frappe pour l'effet « génération IA » (titre principal) */
body.lg-on .hero-title-line.lg-typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--aurora-1);
  box-shadow: 0 0 10px var(--aurora-1);
  animation: lgCaret 0.9s steps(1) infinite;
}
@keyframes lgCaret { 50% { opacity: 0; } }

/* Le slogan garde son dégradé d'origine (texte transparent → pas de badge) */

/* ---------------------------------------------------------------------
   6. BOUTONS « LIQUID »
   --------------------------------------------------------------------- */
body.lg-on .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.lg-on .btn-primary {
  background: linear-gradient(135deg, var(--aurora-1), var(--aurora-2));
  box-shadow: 0 6px 22px rgba(55,239,186,0.42), inset 0 1px 0 rgba(255,255,255,0.5);
}
body.lg-on .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Épouse l'arrondi du bouton : sans ça, sur les boutons d'outils (qui n'ont
     pas la classe .btn et donc pas d'overflow:hidden), les coins de l'overlay
     dépassaient en carré au survol. */
  border-radius: inherit;
  background: linear-gradient(135deg, var(--aurora-2), var(--aurora-3));
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: -1;
}
body.lg-on .btn-primary:hover::after { opacity: 1; }
body.lg-on .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(55,239,186,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Boutons d'OUTILS (.btn-primary SANS .btn) : pas d'overlay aurora animé (réservé
   aux CTA du site), et hover SANS déplacement vertical — juste un éclat de couleur
   + un halo vert doux. Évite le « halo bleu » et le bouton qui « saute ». */
body.lg-on .btn-primary:not(.btn)::after { content: none; }
body.lg-on .btn-primary:not(.btn) { transition: filter 0.2s ease, box-shadow 0.2s ease; }
body.lg-on .btn-primary:not(.btn):hover {
  transform: none;
  filter: brightness(1.08) saturate(1.06);
  box-shadow: 0 8px 26px rgba(55, 239, 186, 0.45);
}
/* Bouton secondaire : verre teinté VERT (et non gris) pour s'accorder au primaire */
body.lg-on .btn-secondary {
  background: rgba(55,239,186,0.10);
  border: 1px solid rgba(55,239,186,0.5);
  color: #37EFBA;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
body.lg-on .btn-secondary:hover {
  background: rgba(55,239,186,0.18);
  border-color: rgba(55,239,186,0.85);
  box-shadow: var(--glow-accent);
  transform: translateY(-3px);
}
/* En mode clair (hors hero sombre), texte vert foncé pour le contraste */
body.lg-on:not(.dark-mode) .btn-secondary { color: #0a7d5a; }
body.lg-on:not(.dark-mode) .hero .btn-secondary { color: #5cf3c6; }

/* Ripple lumineux au clic (élément injecté en JS) */
.lg-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 60%);
  animation: lgRipple 0.65s ease-out forwards;
  pointer-events: none;
  z-index: 4;
}
@keyframes lgRipple { to { transform: scale(2.6); opacity: 0; } }

/* ---------------------------------------------------------------------
   7. SECTION IA — « cerveau » réactif
   --------------------------------------------------------------------- */
body.lg-on #ia .ia-point-ic { position: relative; }
body.lg-on #ia .ia-point-ic::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(55,239,186,0.4);
  animation: lgPulseRing 2.6s ease-out infinite;
}
@keyframes lgPulseRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* Décalage des anneaux pour un effet « activité neuronale » */
body.lg-on #ia .ia-point:nth-child(2) .ia-point-ic::after { animation-delay: 0.6s; }
body.lg-on #ia .ia-point:nth-child(3) .ia-point-ic::after { animation-delay: 1.2s; }
body.lg-on #ia .ia-point:nth-child(4) .ia-point-ic::after { animation-delay: 1.8s; }

/* ---------------------------------------------------------------------
   8. TITRES DE SECTION — soulignement aurora
   --------------------------------------------------------------------- */
body.lg-on .section-title span::after {
  background: linear-gradient(90deg, var(--aurora-1), var(--aurora-2)) !important;
  box-shadow: 0 0 14px rgba(55,239,186,0.5);
}

/* Section Contact : bande CTA sombre dans les deux thèmes (texte blanc d'origine).
   En mode clair, on lui rend un fond sombre + des cartes de verre sombres,
   ce qui préserve toute sa lisibilité sans toucher au reste. */
body.lg-on:not(.dark-mode) #contact {
  background: linear-gradient(180deg, rgba(13,17,24,0.94), rgba(13,17,24,0.97)) !important;
  --glass-bg:        rgba(20, 24, 33, 0.62);
  --glass-bg-strong: rgba(26, 31, 42, 0.74);
  --glass-border:    rgba(255, 255, 255, 0.14);
}

/* La section #contact est centrée → on rétablit l'alignement à GAUCHE
   des labels et champs du formulaire (label au-dessus, calé à gauche). */
body.lg-on .contact-form .form-group { text-align: left; }
body.lg-on .contact-form .form-group label { display: block; text-align: left; }

/* Champs de formulaire en verre */
body.lg-on .contact-form input,
body.lg-on .contact-form select,
body.lg-on .contact-form textarea {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px !important;
  transition: border-color .3s ease, box-shadow .3s ease;
}
body.lg-on .contact-form input:focus,
body.lg-on .contact-form select:focus,
body.lg-on .contact-form textarea:focus {
  border-color: rgba(55,239,186,0.6) !important;
  box-shadow: var(--glow-accent);
  outline: none;
}

/* Points IA : padding interne (cartes de verre sans espacement d'origine) */
body.lg-on .ia-point {
  padding: 1.5rem 1.6rem;
}

/* Blocs projets : padding interne (carte de verre sans espacement d'origine) */
body.lg-on .project-content {
  padding: 2.2rem 2.4rem;
}

/* La section Projets exploite quasi toute la largeur de l'écran.
   La contrainte réelle est .projects-stack (max-width 1080px), pas .container. */
body.lg-on #projets .container {
  max-width: none;
  width: 100%;
  padding-left: clamp(1rem, 4vw, 4rem);
  padding-right: clamp(1rem, 4vw, 4rem);
}
body.lg-on #projets .projects-stack {
  max-width: 1700px;   /* plafond confortable pour rester lisible sur écran géant */
  width: 100%;
}

/* On donne la grande colonne au TEXTE (l'illustration se contente du reste),
   et on resserre le gap pour récupérer de l'espace.
   En « reverse » le contenu est en 1re colonne → on inverse les fr. */
body.lg-on .project-block {
  grid-template-columns: 0.72fr 1.28fr;
  gap: 2.5rem;
}
body.lg-on .project-block--reverse {
  grid-template-columns: 1.28fr 0.72fr;
}
/* L'illustration n'a plus besoin d'une telle hauteur dans une colonne réduite */
body.lg-on .project-visual { min-height: 320px; }

@media (max-width: 860px) {
  body.lg-on .project-block,
  body.lg-on .project-block--reverse { grid-template-columns: 1fr; }
}

/* Contact en BANDEAU : coordonnées en ligne au-dessus, formulaire pleine largeur.
   On empile la grille (1 colonne) et on met la carte infos à l'horizontale. */
body.lg-on .contact-wrapper {
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1000px;
}
body.lg-on .contact-info {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 1.25rem 2.5rem;
  padding: 1.6rem 2.2rem;
}
/* Chaque coordonnée garde son icône à gauche. On aligne par le HAUT (et non au
   centre) : si une valeur passe sur 2 lignes (ex. « Toulouse / Remote » qui se
   coupe à l'espace, ou la version FR plus longue), l'item devient plus haut et
   un centrage décalerait les autres items. flex-start garde icônes + libellés
   au même niveau quelle que soit la hauteur de la valeur. */
body.lg-on .contact-info .contact-info-item {
  align-items: flex-start;
  gap: 0.95rem;
}
/* Icônes de contact : pastilles de verre dimensionnées (au lieu de minuscules) */
body.lg-on .contact-info-item i {
  width: 48px;
  height: 48px;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(55,239,186,0.22), rgba(0,212,255,0.12));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 6px 16px rgba(0,0,0,0.22);
}

/* Stats : on retire la grande carte englobante, on garde 4 cards de verre aérées */
body.lg-on .stats-container {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  max-width: 980px;
}
body.lg-on .stat-item {
  padding: 1.8rem 1.2rem;
}

/* MODE CLAIR — lisibilité des accents :
   le vert SIGNATURE (#37EFBA) est trop clair sur les cartes claires.
   On bascule au vert foncé (#0c8a65) pour les éléments TEXTE concernés.
   (Le header reste sombre, donc son vert clair y est lisible — non touché.) */
body.lg-on .stat-number,
body.lg-on .stat-suffix,
body.lg-on .testimonial-avatar {
  color: var(--accent-text);
}

/* Side-nav déjà en verre : on l'aligne sur les tokens */
body.lg-on .side-nav-pill {
  background: rgba(16,19,27,0.5);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* ---------------------------------------------------------------------
   9. PERFORMANCE / ACCESSIBILITÉ
   --------------------------------------------------------------------- */
/* Le background-attachment: fixed du hero provoque du jank au scroll → off */
body.lg-on .hero { background-attachment: scroll !important; }

/* Pendant un scroll ACTIF, on coupe tous les backdrop-filter (le coût GPU
   majeur). Les cartes ont déjà un fond semi-opaque → elles restent pleines,
   juste un poil moins « frosted » le temps du défilement. La classe
   lg-scrolling est ajoutée/retirée en JS. */
body.lg-scrolling .advantage-card,
body.lg-scrolling .service-card,
body.lg-scrolling .testimonial-card,
body.lg-scrolling .ia-point,
body.lg-scrolling .contact-form,
body.lg-scrolling .contact-info,
body.lg-scrolling .project-content,
body.lg-scrolling .stat-item,
body.lg-scrolling .header-container,
body.lg-scrolling footer,
body.lg-scrolling .side-nav-pill,
body.lg-scrolling .contact-form input,
body.lg-scrolling .contact-form select,
body.lg-scrolling .contact-form textarea,
body.lg-scrolling .service-icon,
body.lg-scrolling .ia-point-ic {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Mobile : on allège le flou et on coupe les blobs animés gourmands */
@media (max-width: 768px) {
  body.lg-on { --glass-blur: 12px; }
  .lg-aurora span { animation: none !important; }
  .lg-aurora::after { display: none; }
  .lg-cursor { display: none; }
  body.lg-on .header-container { border-radius: 22px; width: calc(100% - 1.4rem); }

  /* Hero RESPONSIVE : titre fluide (clamp) — bat `.hero h1` (3rem) en
     spécificité (2 classes), donc ne déborde plus sur petit écran. */
  body.lg-on .hero-title {
    font-size: clamp(1.7rem, 8vw, 2.6rem) !important;
    line-height: 1.15;
    word-break: break-word;
  }
  body.lg-on .hero-title-accent { display: block; margin-top: 0.4rem; }
  body.lg-on .hero .slogan { font-size: clamp(0.95rem, 4vw, 1.25rem); }
  body.lg-on .hero-content { padding-left: 0.6rem; padding-right: 0.6rem; }

  /* Footer mobile : liens qui s'enroulent proprement, séparateurs masqués */
  body.lg-on .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.1rem;
    font-size: 0.88rem;
    line-height: 1.3;
  }
  body.lg-on .footer-separator { display: none; }
  body.lg-on .footer-content { padding: 0.4rem 1rem; gap: 0.45rem; }
  body.lg-on footer { font-size: 0.8rem; }

  /* Contact (bandeau) sur mobile : infos empilées, icônes alignées à gauche.
     En desktop c'est une rangée centrée ; en colonne, space-around décalait
     chaque item → on force une colonne pleine largeur, alignée à gauche. */
  body.lg-on .contact-info {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.3rem;
  }
  body.lg-on .contact-info .contact-info-item {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
}

/* ---------------------------------------------------------------------
   MENU MOBILE — overlay plein écran « Liquid Glass »
   (le nav ul d'origine n'avait plus de fond → menu cassé/transparent)
   --------------------------------------------------------------------- */
@media (max-width: 1200px) {
  /* Le header passe au-dessus du footer pour que l'overlay couvre tout.
     On retire le backdrop-filter du conteneur : sinon il devient le bloc
     englobant du position:fixed et l'overlay ne ferait que la taille du pill. */
  body.lg-on header { z-index: 1200; }
  body.lg-on .header-container {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* L'overlay du menu (position:fixed; inset:0) doit se caler sur le VIEWPORT.
     Or `transform: translateZ(0)` (header) et `will-change: transform` (header +
     pill) créent chacun un bloc englobant qui confinait l'overlay à la taille et
     à la position du pill → décalage en haut-gauche + débordement. On neutralise
     ces propriétés UNIQUEMENT menu ouvert (`:has(nav ul.open)`), pour conserver la
     couche GPU du header le reste du temps (fix anti-décrochage de scroll Chromium). */
  body.lg-on header:has(nav ul.open),
  body.lg-on .header-container:has(nav ul.open) {
    transform: none !important;
    will-change: auto !important;
  }

  body.lg-on header nav ul {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 4.5rem 1.3rem 2.5rem;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    /* flex-start = jamais de contenu coupé/inatteignable quand ça déborde
       (le centrage est rétabli plus bas sur les écrans assez hauts) */
    justify-content: flex-start;
    gap: 0.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Overlay TRANSLUCIDE + accents AURORA colorés (vert / cyan / violet) :
       on ne se contente pas de l'aurora derrière, on en pose dans le verre. */
    background:
      radial-gradient(55% 40% at 14% 8%, rgba(55,239,186,0.22), transparent 60%),
      radial-gradient(50% 40% at 92% 26%, rgba(0,212,255,0.18), transparent 60%),
      radial-gradient(70% 45% at 50% 104%, rgba(123,92,255,0.24), transparent 62%),
      linear-gradient(160deg, rgba(13,16,23,0.46), rgba(9,12,18,0.58)) !important;
    -webkit-backdrop-filter: blur(36px) saturate(200%);
    backdrop-filter: blur(36px) saturate(200%);
    border: none !important;
    border-radius: 0 !important;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.04);
    transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.3,1), visibility .4s;
  }
  body.lg-on header nav ul.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
  }

  /* Logo 5M Innov en haut de l'overlay (chemin relatif au fichier CSS) */
  body.lg-on header nav ul::before {
    content: '';
    flex: 0 0 auto;
    width: 128px;
    height: 40px;
    margin-bottom: 0.9rem;
    background: url(../img/5M_logo_horizontal_dark.png) center / contain no-repeat;
    filter: drop-shadow(0 4px 16px rgba(55, 239, 186, 0.3));
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .45s ease .1s, transform .45s ease .1s;
  }
  body.lg-on header nav ul.open::before { opacity: 1; transform: translateY(0); }

  /* Liens : grands, centrés, entrée échelonnée */
  body.lg-on header nav li {
    width: 100%;
    max-width: 360px;
    margin: 0;
    opacity: 0;
    transform: translateY(14px);
  }
  body.lg-on header nav ul.open li {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .4s ease, transform .4s ease;
  }
  body.lg-on header nav ul.open li:nth-child(1) { transition-delay: .06s; }
  body.lg-on header nav ul.open li:nth-child(2) { transition-delay: .10s; }
  body.lg-on header nav ul.open li:nth-child(3) { transition-delay: .14s; }
  body.lg-on header nav ul.open li:nth-child(4) { transition-delay: .18s; }
  body.lg-on header nav ul.open li:nth-child(5) { transition-delay: .22s; }
  body.lg-on header nav ul.open li:nth-child(6) { transition-delay: .26s; }
  body.lg-on header nav ul.open li:nth-child(7) { transition-delay: .30s; }
  body.lg-on header nav ul.open li:nth-child(8) { transition-delay: .34s; }
  body.lg-on header nav ul.open li:nth-child(9) { transition-delay: .38s; }
  body.lg-on header nav ul.open li:nth-child(10) { transition-delay: .42s; }
  body.lg-on header nav ul.open li:nth-child(11) { transition-delay: .46s; }

  /* Chaque lien = une TUILE DE VERRE */
  body.lg-on header nav li a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4fbff;
    font-size: 1.08rem;
    font-weight: 600;
    padding: 0.8rem 1.4rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(55, 239, 186, 0.06) 60%, rgba(0, 212, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2,.8,.3,1), background .3s ease,
                border-color .3s ease, box-shadow .3s ease, color .3s ease;
  }
  /* liseré-reflet (épaisseur du verre) */
  body.lg-on header nav li a::before {
    content: '';
    position: absolute;
    top: 0; left: 16%; right: 16%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  }
  /* chevron — Font Awesome (plus net et régulier que le caractère « › ») */
  body.lg-on header nav li a::after {
    content: '\f105'; /* fa-angle-right */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: 1.3rem;
    font-size: 0.95rem; line-height: 1; opacity: 0.4;
    transition: transform .3s ease, opacity .3s ease, color .3s ease;
  }
  body.lg-on header nav li a:hover,
  body.lg-on header nav li a:active {
    background: linear-gradient(135deg, rgba(55, 239, 186, 0.24), rgba(0, 212, 255, 0.10));
    border-color: rgba(55, 239, 186, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 32px rgba(55, 239, 186, 0.28);
    color: #aef7df;
    transform: translateY(-2px) scale(1.02);
  }
  body.lg-on header nav li a:hover::after,
  body.lg-on header nav li a:active::after {
    opacity: 0.95; transform: translateX(4px); color: #37EFBA;
  }

  /* « Outils » : destination secondaire (espace Outils, nouvel onglet).
     Lien DISCRET et plus petit que les items du menu — surtout pas une tuile. */
  body.lg-on header nav li.nav-item-tools {
    width: auto;            /* pas pleine largeur : se réduit à son contenu */
    max-width: none;
    margin: 1.1rem auto 0;  /* détaché du menu, centré */
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12); /* fin séparateur */
  }
  body.lg-on header nav li.nav-item-tools a {
    /* on annule entièrement le style « tuile de verre » */
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0.25rem 0.5rem;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(244, 251, 255, 0.62);   /* atténué */
  }
  /* pas d'icône à gauche (supprime le liseré-reflet et l'ancienne icône) */
  body.lg-on header nav li.nav-item-tools a::before { content: none; }
  /* petit indicateur « nouvel onglet » en ligne, juste après le texte */
  body.lg-on header nav li.nav-item-tools a::after {
    content: '\f35d'; /* fa-up-right-from-square */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: static; right: auto;
    font-size: 0.62rem; opacity: 0.6; color: inherit;
  }
  body.lg-on header nav li.nav-item-tools a:hover,
  body.lg-on header nav li.nav-item-tools a:active {
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
    color: #37EFBA;   /* simple éclaircissement au survol */
  }
  body.lg-on header nav li.nav-item-tools a:hover::after,
  body.lg-on header nav li.nav-item-tools a:active::after {
    opacity: 0.95; transform: none; color: #37EFBA;
  }
  /* langue + thème = pastilles de verre, centrées dans l'overlay */
  body.lg-on header nav .lang-selector,
  body.lg-on header nav .theme-toggle-container { margin: 0.5rem auto 0; }
  body.lg-on header nav .lang-current,
  body.lg-on header nav .theme-toggle {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 999px !important;
    padding: 0.6rem 1.2rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  body.lg-on header nav .theme-toggle { width: 48px; height: 48px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
  /* Espace Outils : langue + thème sont dans la rangée .nav-controls → mêmes
     pastilles que « Recherche »/« Mes données » (38px, anneau vert, hover homogène),
     marges neutralisées pour un alignement propre. */
  body.lg-on header nav .nav-controls .lang-selector,
  body.lg-on header nav .nav-controls .theme-toggle-container { margin: 0; }
  body.lg-on header nav .nav-controls .lang-current,
  body.lg-on header nav .nav-controls .theme-toggle {
    background: rgba(55, 239, 186, 0.06) !important;
    border: 1px solid rgba(55, 239, 186, 0.35) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    height: 38px;
  }
  body.lg-on header nav .nav-controls .lang-current { padding: 0 0.9rem !important; }
  body.lg-on header nav .nav-controls .theme-toggle { width: 38px; height: 38px; padding: 0 !important; }
  body.lg-on header nav .nav-controls .lang-current:hover,
  body.lg-on header nav .nav-controls .theme-toggle:hover {
    background: rgba(55, 239, 186, 0.14) !important;
    border-color: rgba(55, 239, 186, 0.6) !important;
    transform: none;
  }
  /* Dropdown langue : centré et ouvert VERS LE HAUT (évite d'être coupé) */
  body.lg-on header nav .lang-dropdown {
    top: auto;
    bottom: calc(100% + 10px);
    left: 50%;
    right: auto;
    margin-left: -95px;
    min-width: 190px;
  }

  /* Hamburger → croix animée, au-dessus de l'overlay */
  body.lg-on .hamburger { position: relative; z-index: 30; }
  body.lg-on .hamburger span {
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
  }
  body.lg-on .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.lg-on .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  body.lg-on .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Écran mobile assez HAUT : on recentre verticalement le menu (sur petit
   écran type iPhone SE, il reste ancré en haut + scroll, rien n'est coupé). */
@media (max-width: 1200px) and (min-height: 780px) {
  body.lg-on header nav ul { justify-content: center; }
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lg-aurora span,
  body.lg-on .hero-title-accent,
  body.lg-on #ia .ia-point-ic::after { animation: none !important; }
  body.lg-on .hero-title-line.lg-typing::after { display: none; }
}

/* =====================================================================
   10. MULTI-PAGE — application du design system aux autres pages
   ===================================================================== */

/* --- Cartes spécifiques de chaque page : même verre que l'index --- */
body.lg-on .msh-feature-card,
body.lg-on .mm-feature-card,
body.lg-on .mm-level-card,
body.lg-on .mm-not-item,
body.lg-on .mm-for-item,
body.lg-on .mm-step,
body.lg-on .mm-france,
body.lg-on .msh-integration,
body.lg-on .merlin-chat-demo,
body.lg-on .app-card,
body.lg-on .person-box,
body.lg-on .result-card,
body.lg-on .tool-card,
body.lg-on .simulator-wrapper .section {
  position: relative;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-glass) !important;
  box-shadow: var(--glass-shadow);
  transition: transform 0.4s cubic-bezier(.2,.7,.3,1),
              box-shadow 0.4s ease, border-color 0.4s ease;
}
body.lg-on .msh-feature-card:hover,
body.lg-on .mm-feature-card:hover,
body.lg-on .mm-level-card:hover,
body.lg-on .mm-not-item:hover,
body.lg-on .mm-for-item:hover,
body.lg-on .mm-step:hover,
body.lg-on .msh-integration:hover,
body.lg-on .app-card:hover,
body.lg-on .person-box:hover,
body.lg-on .tool-card:hover {
  transform: translateY(-6px);
  border-color: rgba(55,239,186,0.5) !important;
  box-shadow: var(--glass-shadow), var(--glow-accent);
}

/* --- Héros (msh/mm) : on conserve leur dégradé d'origine (sinon le strip
       `section { transparent }` les viderait et casserait le contraste). --- */
body.lg-on .msh-hero {
  background: linear-gradient(135deg, #1a1d22, #25282f, #2a3a35) !important;
}
body.lg-on .mm-hero {
  background: linear-gradient(135deg, #3D6B4F, #5A8A6A, #7EC8D9) !important;
}

/* mon-moment : l'étape n'avait pas de padding interne */
body.lg-on .mm-step { padding: 1.5rem 1.6rem; }

/* MODE CLAIR — icônes des cartes msh/mm illisibles sur verre clair */
body.lg-on .msh-feature-icon,
body.lg-on .msh-feature-list li i,
body.lg-on .merlin-chat-bubble.user .bubble-icon {
  color: var(--accent-text) !important;
}
body[data-page="mm"].lg-on:not(.dark-mode) .mm-feature-icon,
body[data-page="mm"].lg-on:not(.dark-mode) .advantage-icon {
  color: #b8860b !important;   /* jaune pâle → or soutenu */
}

/* Sections CTA (msh/mm) : conçues sombres/colorées avec TEXTE BLANC.
   La règle `section { transparent }` effaçait leur fond inline → texte blanc
   illisible sur l'aurora claire. On restaure leur dégradé d'origine. */
body[data-page="msh"].lg-on #cta {
  background: linear-gradient(135deg, #1E242C, #37EFBA) !important;
}
body[data-page="mm"].lg-on #cta {
  background: linear-gradient(135deg, #3D6B4F, #8BC4A0) !important;
}

/* msh mode clair : icônes vertes restantes sur sections CLAIRES → vert foncé.
   (On garde le vert sur le hero sombre `.msh-platform i` et l'avatar Merlin.) */
body[data-page="msh"].lg-on .msh-tech-item i,
body[data-page="msh"].lg-on .merlin-capability i {
  color: var(--accent-text) !important;
}

/* Boutons secondaires sur les héros/CTA COLORÉS : traitement BLANC.
   Le verre teinté vert se fondrait dans le fond vert/sombre (vert sur vert). */
body.lg-on .msh-hero .btn-secondary,
body.lg-on .mm-hero .btn-secondary,
body.lg-on #cta .btn-secondary {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  color: #fff !important;
}
body.lg-on .msh-hero .btn-secondary:hover,
body.lg-on .mm-hero .btn-secondary:hover,
body.lg-on #cta .btn-secondary:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: #fff !important;
  box-shadow: 0 0 28px rgba(255,255,255,0.22) !important;
}

/* --- Pages légales : le contenu .container devient un panneau de verre --- */
body[data-page="legal"].lg-on .body-content .container,
body[data-page="policy"].lg-on .body-content .container {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  box-shadow: var(--glass-shadow);
  padding: 2.5rem clamp(1.4rem, 4vw, 3rem);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* --- Simulateur d'impôts : panneaux en verre, on préserve les cartes
       résultat à fond spécial (vert/sombre, déjà en inline-style). --- */
body.lg-on .detail-table {
  border-radius: var(--radius-glass) !important;
  overflow: hidden;
}
/* Le wrapper extérieur reste un simple conteneur (pas de boîte géante) :
   ce sont les panneaux .section qui portent le verre. */
body.lg-on .simulator-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

/* En-tête : héros sombre en VERRE (au lieu du bandeau noir plat),
   halo aurora + accent « 2025 » en dégradé liquide animé. */
body.lg-on .simulator-header {
  margin-bottom: 2rem;
  padding: 3rem 2rem !important;
  border-radius: var(--radius-glass) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    radial-gradient(ellipse 75% 120% at 50% -10%, rgba(55,239,186,0.18), transparent 60%),
    linear-gradient(160deg, rgba(24,29,40,0.94), rgba(11,14,20,0.97)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--glass-shadow), 0 0 60px rgba(55,239,186,0.10) !important;
}
body.lg-on .simulator-header::before { display: none; }
body.lg-on .simulator-header h1 span {
  background: linear-gradient(110deg, var(--aurora-1), var(--aurora-2) 50%, var(--aurora-3) 80%, var(--aurora-1)) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: lgTitleFlow 8s linear infinite;
  filter: drop-shadow(0 2px 18px rgba(55,239,186,0.25));
}
body.lg-on .simulator-wrapper .section {
  padding: 1.8rem clamp(1rem, 3vw, 2rem);
}
/* Mode clair — approche DESIGN-SYSTEM (pas du cas-par-cas) : on redéfinit le
   TOKEN --primary-color du simulateur en vert foncé pour toute la zone de
   contenu claire. Un seul point de vérité → tous les textes/bordures verts
   (titres de section, « Personne 1 », libellés radio, parts, valeurs, totaux)
   deviennent lisibles d'un coup. Le bandeau d'en-tête sombre garde le vert vif. */
body.lg-on .simulator-content { --primary-color: var(--accent-text); }

/* ---------------------------------------------------------------------
   11. my-profile (CV) — glass en mode CLASSIQUE uniquement
   Les 6 modes alternatifs ont leurs propres fonds plein écran : on masque
   l'aurora/curseur dès qu'un mode alternatif (ou synthèse) est actif.
   --------------------------------------------------------------------- */
body.lg-on.alt-mode-active .lg-aurora,
body.lg-on.synthesis-mode-active .lg-aurora,
body.lg-on.alt-mode-active .lg-cursor,
body.lg-on.synthesis-mode-active .lg-cursor {
  display: none !important;
}
/* En mode classique, chaque section du CV devient un panneau de verre flottant */
body[data-page="cv"].lg-on:not(.alt-mode-active):not(.synthesis-mode-active) .container > section {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
/* Évite l'effet « boîte dans une boîte » : les sous-blocs s'intègrent au panneau */
body[data-page="cv"].lg-on:not(.alt-mode-active):not(.synthesis-mode-active) .timeline-content,
body[data-page="cv"].lg-on:not(.alt-mode-active):not(.synthesis-mode-active) .company-header {
  background: transparent !important;
}
/* La barre de modes (sticky) doit rester au-dessus de l'aurora */
body.lg-on .mode-switcher { position: sticky; z-index: 200; }

/* ============================================================
   Outils — réutilisable sur toutes les pages d'outils
   ============================================================ */

/* Reset de l'apparence native des boutons custom : corrige le survol
   « carré » (perte des coins arrondis) des <button> sous Windows. */
.btn-primary, .btn-ghost, .filter-btn, .pattern-tab, .el-tab, .aa-tab,
.bug-opt, .pat-toggle button, .lp-toggle button,
.pat-quiz-opts button, .col-quiz-opts button, .fw-quiz-opts button,
.wsjf-del {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Réserve la gouttière de la barre de défilement : évite que la mise en page
   (et le menu centré) se décale selon que la page a un scroll ou non. */
html { scrollbar-gutter: stable; }

/* Logo « 5M Innov / Tools » : marque l'espace Outils ; le clic renvoie au hub. */
.logo-tools a { display: inline-flex; flex-direction: column; align-items: center; gap: 0.12rem; line-height: 1; text-decoration: none; }
.logo-tools .logo-tools-tag {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
  color: #37EFBA; padding-left: 0.3em;
}

/* Lien « 5M Innov » dans le copyright du footer (vers le site principal). */
.footer-brand { color: #37EFBA; text-decoration: none; font-weight: 600; }
.footer-brand:hover { text-decoration: underline; }