/* Mode jour dessiné (28/10/2026, demande de Karim) : palette claire propre, sans inversion de couleurs.
   mode-jour.js pose html[data-mode=jour|nuit] et repère les surfaces sombres (.ej-s), les fonds plein écran (.ej-f),
   les dégradés sombres (.ej-g), les textes clairs (.ej-t), les textes secondaires (.ej-t2) et les accents orange (.ej-o).
   Photos, vidéos et canvas ne sont jamais recolorés. Aussi : bouton « Voir les outils » du film, lumières sur la planète. */
:root{--j-ciel1:#e6eef8;--j-ciel2:#f7efe5;--j-encre:#0b2239;--j-encre2:#34506b;--j-orange:#b4530a;--j-orange-titre:#c4560e;
  --j-carte:#ffffff;--j-bord:rgba(11,34,57,.14);--j-ombre:0 1px 2px rgba(11,34,57,.06),0 16px 36px -22px rgba(11,34,57,.45)}

html[data-mode=jour]{color-scheme:light;background:linear-gradient(180deg,var(--j-ciel1) 0%,#eef3f9 55%,var(--j-ciel2) 100%) fixed!important}
html[data-mode=jour] body{background:transparent!important;color:var(--j-encre)}
html[data-mode=jour] .ej-f{background:linear-gradient(180deg,#dcebff 0%,#eef5ff 48%,#fff1df 100%)!important}
html[data-mode=jour] .ej-v{background-color:rgba(244,249,255,.55)!important}
html[data-mode=jour] .ej-s{background-color:var(--j-carte)!important;border-color:var(--j-bord)!important;box-shadow:var(--j-ombre)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
html[data-mode=jour] .ej-t{color:var(--j-encre)!important}
html[data-mode=jour] .ej-t2{color:var(--j-encre2)!important}
html[data-mode=jour] .ej-o{color:var(--j-orange)!important}
html[data-mode=jour] ::selection{background:#ffd9bd;color:var(--j-encre)}

/* accueil : ciel, étoiles estompées, planète éclairée */
html[data-mode=jour] .film-stage{background:linear-gradient(180deg,#dcebff 0%,#eef5ff 48%,#fff1df 100%)!important}
html[data-mode=jour] #earth-canvas{opacity:0}
html[data-mode=jour] #earth-sphere{mix-blend-mode:multiply;filter:saturate(1.15) contrast(1.05)}
html[data-mode=jour] .film-shade,html[data-mode=jour] .route-veil{opacity:.25}
html[data-mode=jour] .hm-orbit *{stroke:rgba(25,80,125,.42)}
html[data-mode=jour] .arrival-header{background:rgba(255,255,255,.72)!important;border-color:var(--j-bord)!important}
html[data-mode=jour] .primary-action,html[data-mode=jour] .ff-cta{background:#f07a24!important;color:#fff!important}
html[data-mode=jour] .ff-arc::before{background:radial-gradient(120% 100% at 50% 0%,#ffffff 0%,#e3f0ff 55%,transparent 75%)!important;
  box-shadow:0 -2px 40px rgba(110,180,255,.55)!important}

/* bouton jour / nuit */
.ej-bascule{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(169,217,237,.35);
  background:rgba(24,58,76,.38);color:#eff8ff;cursor:pointer;flex:none;transition:transform 160ms cubic-bezier(.23,1,.32,1),background 150ms}
.ej-bascule:active{transform:scale(.94)}
.ej-bascule svg{width:19px;height:19px}
.ej-bascule .ej-soleil{display:none}
html[data-mode=nuit] .ej-bascule .ej-soleil{display:block}
html[data-mode=nuit] .ej-bascule .ej-lune{display:none}
html[data-mode=jour] .ej-bascule{background:#fff;color:var(--j-encre);border-color:var(--j-bord);box-shadow:var(--j-ombre)}
.ej-bascule.ej-flottant{position:fixed;left:16px;bottom:16px;z-index:60}
@media (hover:hover){.ej-bascule:hover{transform:translateY(-1px)}}
html.ej-transition,html.ej-transition *{transition:background-color 420ms ease,color 420ms ease,border-color 420ms ease!important}

/* film : « Voir les outils » à côté de « Passer l'intro », et en premier sur la dernière carte */
.ej-outils{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:inherit;font-weight:700;color:#071421!important;
  background:#ffad77;border-radius:999px;padding:9px 16px;box-shadow:0 10px 24px -12px rgba(249,115,22,.7)}
html[data-mode=jour] .ej-outils{background:#f07a24;color:#fff!important}
.ej-outils-film{position:fixed;right:clamp(16px,3vw,40px);bottom:calc(clamp(16px,3vw,40px) + 92px);z-index:2147483000}
.ej-outils-fin{margin:0 10px 0 0}

/* lumières sur la planète (inspirées d'un visuel animé : lignes qui s'allument, anneaux en orbite) */
.ej-lumieres{position:absolute;pointer-events:none;z-index:2;opacity:0;transition:opacity .9s ease}
body[data-step=earth] .ej-lumieres.is-pret{opacity:1}
.ej-lumieres svg{width:100%;height:100%;overflow:visible}
.ej-ligne{fill:none;stroke:#ffac76;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:14 260;opacity:.85;
  animation:ej-course 7s linear infinite}
.ej-ligne.l2{animation-duration:9.5s;animation-delay:-3s;stroke:#98e6f8}
.ej-ligne.l3{animation-duration:11s;animation-delay:-6s}
.ej-ligne.l4{animation-duration:8.2s;animation-delay:-1.5s;stroke:#98e6f8}
.ej-trame{fill:none;stroke:rgba(152,230,248,.16);stroke-width:.8}
.ej-noeud{fill:#ffac76;opacity:.15;animation:ej-allume 6s ease-in-out infinite}
.ej-anneau{fill:none;stroke:rgba(152,230,248,.38);stroke-width:1}
.ej-anneau-a{transform-origin:50% 50%;animation:ej-tourne 60s linear infinite}
.ej-anneau-b{transform-origin:50% 50%;animation:ej-tourne 90s linear infinite reverse}
.ej-satellite{fill:#ffac76;filter:drop-shadow(0 0 6px rgba(255,172,118,.9))}
html[data-mode=jour] .ej-ligne{stroke:#e86f1c;opacity:.9}
html[data-mode=jour] .ej-ligne.l2,html[data-mode=jour] .ej-ligne.l4{stroke:#1f86c8}
html[data-mode=jour] .ej-trame{stroke:rgba(15,42,68,.14)}
html[data-mode=jour] .ej-anneau{stroke:rgba(15,42,68,.30)}
html[data-mode=jour] .ej-noeud,html[data-mode=jour] .ej-satellite{fill:#e86f1c}
@keyframes ej-course{to{stroke-dashoffset:-274}}
@keyframes ej-allume{0%,70%,100%{opacity:.15}80%{opacity:1}}
@keyframes ej-tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ej-ligne,.ej-noeud,.ej-anneau-a,.ej-anneau-b{animation:none}.ej-ligne{stroke-dasharray:none;opacity:.25}}
html.ef-reduit .ej-ligne,html.ef-reduit .ej-noeud,html.ef-reduit .ej-anneau-a,html.ef-reduit .ej-anneau-b{animation:none}

/* décors sombres faits de pseudo-éléments (pas atteignables par le script) */
html[data-mode=jour] .fluid-page:before{background:linear-gradient(90deg,rgba(244,249,255,.93),rgba(255,247,238,.86)),var(--context-scene) center/cover!important}
html[data-mode=jour] .projection-image:before{background:linear-gradient(0deg,rgba(255,255,255,.9),rgba(255,255,255,.35))!important}
html[data-mode=jour] .applications-showcase:before{background:linear-gradient(rgba(244,249,255,.82),rgba(255,247,238,.94)),url('/cinematic/atelier.webp') center/cover!important}
html[data-mode=jour] .universe-backdrop:after{background:radial-gradient(circle at 68% 40%,rgba(249,115,22,.14),transparent 42%),linear-gradient(105deg,rgba(244,249,255,.92) 15%,rgba(234,244,255,.72) 55%,rgba(255,246,236,.9))!important}
html[data-mode=jour] .universe-poster:after{background:linear-gradient(transparent 35%,rgba(255,255,255,.88))!important}
html[data-mode=jour] .lounge-launch:after{background:linear-gradient(transparent,rgba(255,255,255,.92))!important}
html[data-mode=jour] body:after{background:#eaf4ff!important}

@media (max-width:760px){.ej-lumieres{opacity:0!important}body[data-step=earth] .ej-lumieres.is-pret{opacity:.5!important}.ej-anneau-a,.ej-anneau-b{display:none}}
@media (max-width:760px){html[data-mode=jour] #earth-sphere{opacity:.32}}
html[data-mode=jour] .film-shade,html[data-mode=jour] .route-veil{background:none!important}

/* v2 (28/10, audit de Karim : couleurs trop pâles, textes peu lisibles) */
html[data-mode=jour] body{-webkit-font-smoothing:antialiased}
html[data-mode=jour] .ej-s{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-mode=jour] h1.ej-t,html[data-mode=jour] h2.ej-t,html[data-mode=jour] h3.ej-t,html[data-mode=jour] h1 .ej-t,html[data-mode=jour] h2 .ej-t{font-weight:600!important;letter-spacing:-.01em}
html[data-mode=jour] h1 .ej-o,html[data-mode=jour] h2 .ej-o,html[data-mode=jour] h1.ej-o,html[data-mode=jour] h2.ej-o,html[data-mode=jour] h3 .ej-o{color:var(--j-orange-titre)!important;font-weight:600!important}
html[data-mode=jour] p.ej-t2,html[data-mode=jour] li.ej-t2,html[data-mode=jour] small.ej-t2{color:var(--j-encre2)!important}
html[data-mode=jour] .ej-t2{font-weight:500}
html[data-mode=jour] .ej-blanc{color:#fff!important}
html[data-mode=jour] .primary-action,html[data-mode=jour] .ff-cta,html[data-mode=jour] .ej-outils{background:#c2560f!important;color:#fff!important}
html[data-mode=jour] .primary-action *,html[data-mode=jour] .ff-cta *{color:#fff!important}
html[data-mode=jour] a.ej-o,html[data-mode=jour] .ej-o a{text-decoration-thickness:1px}
html[data-mode=jour] .oc-achat,html[data-mode=jour] .oc-achat *{color:#fff!important}
/* éléments actifs (onglet, filtre choisi, page en cours) : restent marqués en jour */
html[data-mode=jour] [aria-selected="true"].ej-s,html[data-mode=jour] [aria-pressed="true"].ej-s,html[data-mode=jour] .active.ej-s,html[data-mode=jour] .is-active.ej-s,html[data-mode=jour] .is-on.ej-s{background-color:var(--j-encre)!important;color:#fff!important;border-color:var(--j-encre)!important}
html[data-mode=jour] [aria-selected="true"].ej-s *,html[data-mode=jour] [aria-pressed="true"].ej-s *,html[data-mode=jour] .active.ej-s *,html[data-mode=jour] .is-active.ej-s *,html[data-mode=jour] .is-on.ej-s *{color:#fff!important}
html[data-mode=jour] .oc-achat{background-color:#ad4d0c!important}

/* v3 (28/10 soir, Karim : « la planète, on ne la voit pas, le bleu est bizarre ») : planète éclairée avec halo,
   lignes orange et bleu nuit (plus de bleu vif), téléphones du décor en verre clair */
html[data-mode=jour] #earth-sphere{mix-blend-mode:normal!important;filter:brightness(1.3) saturate(1.15) contrast(.96) drop-shadow(0 0 38px rgba(96,160,228,.55))!important}
html[data-mode=jour] .ej-lumieres{background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.28),transparent 46%),
  radial-gradient(circle,transparent 48.6%,rgba(150,200,255,.55) 49.6%,rgba(150,200,255,.18) 52%,transparent 57%);border-radius:50%}
html[data-mode=jour] .ej-ligne{stroke:#d9661a;opacity:.85}
html[data-mode=jour] .ej-ligne.l2,html[data-mode=jour] .ej-ligne.l4{stroke:#24476b;opacity:.6}
html[data-mode=jour] .ej-trame{stroke:rgba(255,255,255,.35)}
html[data-mode=jour] .ej-anneau{stroke:rgba(36,71,107,.38)}
html[data-mode=jour] .hm-orbit *{stroke:rgba(36,71,107,.34)}
html[data-mode=jour] .ef-phone{background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(238,245,252,.9))!important;opacity:.96!important;
  border-color:rgba(11,34,57,.14)!important;filter:drop-shadow(0 14px 22px rgba(11,34,57,.18))!important;color:var(--j-encre)!important}
html[data-mode=jour] .ef-phone *{color:var(--j-encre2)!important;border-color:rgba(11,34,57,.12)!important}
html[data-mode=jour] .ef-phone b,html[data-mode=jour] .ef-phone strong,html[data-mode=jour] .ef-phone h3,html[data-mode=jour] .ef-phone h4{color:var(--j-encre)!important}
html[data-mode=jour] .ef-phone .ph-screen{background:#fbfdff!important}
html[data-mode=jour] .ef-phone .ph-notch{background:rgba(11,34,57,.18)!important}
html[data-mode=jour] .ej-trame{stroke:rgba(255,255,255,.13)}
html[data-mode=jour] .ef-mirage .lid,html[data-mode=jour] .ef-mirage .base{background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(232,240,250,.92))!important;border-color:rgba(11,34,57,.14)!important}
html[data-mode=jour] .ef-mirage .screen{background:#fbfdff!important}
html[data-mode=jour] .ef-mirage .screen *{color:var(--j-encre2)!important}
html[data-mode=jour] .ef-mirage .screen b,html[data-mode=jour] .ef-mirage .screen strong{color:var(--j-encre)!important}