/* MAN Digital — PROTOTYPE thème « dominante claire » (branche proto-theme-clair, home seulement).
   Activé par <html class="theme-light">. Le site est construit sur des variables de couleur :
   les redéfinir suffit pour la plupart des composants. Les zones signature restent sombres
   (intro vidéo, hero, barre du haut, menu, pastille d'avis, cookies, footer) et l'ancienne
   section blanche passe en bleu nuit. Palette : charte MaN Digital (blanc, crème, bleu nuit). */

html.theme-light {
  --ink: #ffffff;                 /* fond principal : blanc */
  --ink-2: #f4f4f0;               /* sections alternées : crème de la charte, éclaircie */
  --panel: #f6f6f2;               /* cartes */
  --panel-2: #ededE8;             /* crème charte */
  --panel-3: #e3e3dc;
  --text: #0a1a2b;                /* bleu nuit (déjà utilisé par les sections claires) */
  --text-2: #3a516e;
  --muted: #5b6f88;
  --line: rgba(7, 24, 43, 0.09);
  --line-2: rgba(7, 24, 43, 0.16);
  --line-3: rgba(31, 127, 206, 0.45);
  --accent-soft: rgba(201, 138, 29, 0.12);
}

/* ---- Zones qui gardent l'ambiance sombre : variables d'origine ---- */
html.theme-light .scrollfilm,
html.theme-light .hero,
html.theme-light .section--white,
html.theme-light .footer,
html.theme-light .topbar,
html.theme-light .tnav,
html.theme-light .rpill,
html.theme-light .cookie {
  --ink: #060b16; --ink-2: #08101f;
  --panel: #0d1626; --panel-2: #122036; --panel-3: #16263f;
  --text: #eaf2fc; --text-2: #b3c6e0; --muted: #8aa0bd;
  --line: rgba(146, 186, 234, 0.12); --line-2: rgba(146, 186, 234, 0.22); --line-3: rgba(155, 210, 255, 0.4);
  --accent-soft: rgba(244, 196, 78, 0.14);
}
html.theme-light .scrollfilm,
html.theme-light .hero { background-color: var(--ink); color: var(--text); }

/* ---- Ancienne section blanche -> bleu nuit ---- */
html.theme-light .section--white { background: var(--ink-2); color: var(--text); }
html.theme-light .section--white h2,
html.theme-light .section--white .h-lg,
html.theme-light .section--white .shead h2 { color: var(--text); }
html.theme-light .section--white .lead,
html.theme-light .section--white .shead p { color: var(--text-2); }
html.theme-light .section--white .link { color: var(--brand-300); }

/* ---- Barre du haut : verre bleu nuit une fois qu'on défile (logo clair lisible sur le blanc) ---- */
html.theme-light .topbar.is-scrolled::before {
  opacity: 1;
  background: rgba(8, 17, 29, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ---- Bleu de marque en texte : version foncée pour le contraste sur fond clair ---- */
html.theme-light .hl,
html.theme-light .em-brand { color: var(--brand-700); }
html.theme-light .hly { color: var(--accent-700); }
html.theme-light .hero .hl,
html.theme-light .hero .em-brand,
html.theme-light .section--white .hl { color: var(--brand); }

/* ---- Citation « L'ambition n'a pas de limites » : fond bleu nuit en fondu progressif ----
   L'ancien masque restait opaque jusqu'aux bords de la boîte : sur fond blanc, un rectangle net.
   Ici le cœur reste opaque sous le texte et tout s'éteint avant les bords. */
html.theme-light .lamp__beams {
  /* zone élargie au-delà de la boîte : le fondu a la place de s'éteindre en douceur */
  inset: -70px -12%;
  background: radial-gradient(50% 50% at 50% 57%, #07131f 0%, #050e18 62%, #04101b 100%);
  -webkit-mask-image: radial-gradient(50% 50% at 50% 57%, #000 0%, #000 60%, rgba(0, 0, 0, 0.5) 78%, rgba(0, 0, 0, 0.15) 90%, transparent 100%);
          mask-image: radial-gradient(50% 50% at 50% 57%, #000 0%, #000 60%, rgba(0, 0, 0, 0.5) 78%, rgba(0, 0, 0, 0.15) 90%, transparent 100%);
}
@media (max-width: 700px) {
  html.theme-light .lamp__beams {
    inset: -50px -22%;
    -webkit-mask-image: radial-gradient(50% 50% at 50% 57%, #000 0%, #000 68%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
            mask-image: radial-gradient(50% 50% at 50% 57%, #000 0%, #000 68%, rgba(0, 0, 0, 0.45) 84%, transparent 100%);
  }
}