/* Onyx · la sphère
   Couche chargée en dernier, activée par la classe « sphere » sur <html>. Retirer la classe rétablit l'ancien tableau de bord.
   1. Les couleurs de toute l'application passent au vert d'eau (jour) et au vert profond (nuit), avec une seule couleur d'action.
   2. L'accueil devient une sphère 3D plein écran (sphere.js) : points de section, trafic simulé, coins d'information.
   Aucun style en ligne : tout passe par des classes ou par le CSSOM (el.style.x = …). */

/* ===== Couleurs de l'application ===== */
html.sphere.onyx2[data-theme="light"] {
  --bg: #EAF2F1; --surface: #FFFFFF; --sunk: #DDEBEA; --raise: #FFFFFF;
  --line: #CFE0DF; --line-strong: #7FA9AB;
  --ink: #0C2230; --ink-2: #2B4756; --muted: #3F5F6B;
  --accent: #0E5A5A; --accent-hover: #127070; --on-accent: #FFFFFF;
  --accent-soft: rgba(14, 90, 90, .10); --accent-text: #0E5A5A; --accent-link: #0E5A5A;
  --scrim: rgba(12, 34, 48, .5);
  --sh-2: 0 16px 40px -20px rgba(12, 34, 48, .28);
}
html.sphere.onyx2[data-theme="dark"] {
  --bg: #0A1A1A; --surface: #112829; --sunk: #071414; --raise: #173436;
  --line: #21403F; --line-strong: #4F8788;
  --ink: #E6F2F0; --ink-2: #C5DAD7; --muted: #9DBDBA;
  --accent: #4FD1BE; --accent-hover: #7BE0D0; --on-accent: #05211D;
  --accent-soft: rgba(79, 209, 190, .14); --accent-text: #7BE0D0; --accent-link: #4FD1BE;
  --scrim: rgba(3, 12, 12, .72);
  --sh-2: 0 16px 40px -20px rgba(0, 0, 0, .55);
}

/* ===== Couleurs de la sphère ===== */
.sphere-home, .sp-xwrap {
  --sp-bg: #EAF2F1; --sp-core: #DDEBEA; --sp-ln: 143, 183, 185; --sp-ln2: 94, 149, 152; --sp-a: 1;
  --sp-ink: #0C2230; --sp-mut: #3F5F6B; --sp-acc: #0E5A5A; --sp-on: #FFFFFF; --sp-soft: #CFE0DF; --sp-hov: #DDEBEA;
  --sp-ship: #16A394; --sp-plane: #0C2230; --sp-ok: #1E9E6A; --sp-bar: #CFE0DF;
}
html[data-theme="dark"] .sphere-home, html[data-theme="dark"] .sp-xwrap {
  --sp-bg: #0A1A1A; --sp-core: #112A2A; --sp-ln: 63, 122, 124; --sp-ln2: 95, 163, 164;
  --sp-ink: #E6F2F0; --sp-mut: #9DBDBA; --sp-acc: #4FD1BE; --sp-on: #05211D; --sp-soft: #17302F; --sp-hov: #14302F;
  --sp-ship: #5FE0C8; --sp-plane: #E6F2F0; --sp-ok: #4FD08F; --sp-bar: #1B3A39;
}

.sphere-home {
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  background: var(--sp-bg); color: var(--sp-ink);
  font-family: var(--fs, system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-variant-numeric: tabular-nums;
  opacity: 1; transition: opacity 350ms cubic-bezier(.23, 1, .32, 1);
}
.sphere-home[hidden] { display: none !important; }
.sphere-home.sp-fade { opacity: 0; pointer-events: none; }
.sphere-home button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; text-align: left; }
.sphere-home .sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Scène 3D ===== */
.sp-stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; perspective: 1500px; }
.sp-uni { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; transform: translateZ(0); transition: transform 800ms cubic-bezier(.23, 1, .32, 1); }
.sp-uni.sp-drag { cursor: grabbing; }
.sp-uni.sp-wait { pointer-events: none; }
.sp-uni.sp-dive { transform: translate3d(26px, 0, 1470px); transition: transform 1100ms cubic-bezier(.5, 0, .75, .4) 200ms; }
.sp-uni.sp-ret { transform: translateZ(0); transition: transform 1100ms cubic-bezier(.25, .6, .5, 1) 50ms; }
.sp-uni.sp-instant { transition: none !important; }
.sp-sphere { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.sp-abs { position: absolute; }

.sp-core { position: absolute; border-radius: 50%; background: var(--sp-core); }
.sp-wavebox { position: absolute; pointer-events: none; }
.sp-wave { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sp-acc); opacity: 0; animation: sp-wave 6s cubic-bezier(.23, 1, .32, 1) infinite; }
.sp-wave.w2 { animation-delay: 3s; }
@keyframes sp-wave { 0% { transform: scale(.12); opacity: .38; } 100% { transform: scale(1); opacity: 0; } }
.sp-aura { position: absolute; border-radius: 50%; background: var(--sp-acc); opacity: .08; pointer-events: none; animation: sp-sun 6s ease-in-out infinite; }
.sp-aura.a1 { left: -100px; top: -100px; width: 200px; height: 200px; }
.sp-aura.a2 { left: -160px; top: -160px; width: 320px; height: 320px; opacity: .055; animation-delay: -2s; }
.sp-aura.a3 { left: -230px; top: -230px; width: 460px; height: 460px; opacity: .035; animation-delay: -4s; }
@keyframes sp-sun { 0%, 100% { transform: translateZ(-28px) scale(.9); } 50% { transform: translateZ(-28px) scale(1.1); } }
.sp-hit { position: absolute; left: -310px; top: -310px; width: 620px; height: 620px; border-radius: 50%; touch-action: none; }

/* Logo OX en relief au cœur : dix couches empilées en profondeur */
.sp-ox { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; transform-style: preserve-3d; pointer-events: none; }
.sp-ox svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: visible; fill: none; stroke: currentColor; stroke-width: 5; stroke-linejoin: miter; stroke-linecap: butt; }
.sp-ox path { stroke-dasharray: 100; stroke-dashoffset: 0; }
.sp-intro .sp-ox path { stroke-dashoffset: 100; animation: sp-draw 700ms cubic-bezier(.23, 1, .32, 1) forwards; }
.sp-intro .sp-ox .p2 { animation-delay: 320ms; }
.sp-intro .sp-ox .p3 { animation-delay: 560ms; }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }
.sp-ox .l0 { color: #052B2B; } .sp-ox .l1 { color: #063333; } .sp-ox .l2 { color: #073B3B; } .sp-ox .l3 { color: #08423F; } .sp-ox .l4 { color: #094A49; }
.sp-ox .l5 { color: #0A5251; } .sp-ox .l6 { color: #0B5958; } .sp-ox .l7 { color: #0E6362; } .sp-ox .l8 { color: #12746F; } .sp-ox .l9 { color: #188987; }
html[data-theme="dark"] .sp-ox .l0 { color: #0A3B38; } html[data-theme="dark"] .sp-ox .l1 { color: #0E4B47; } html[data-theme="dark"] .sp-ox .l2 { color: #125B56; }
html[data-theme="dark"] .sp-ox .l3 { color: #176B65; } html[data-theme="dark"] .sp-ox .l4 { color: #1C7B74; } html[data-theme="dark"] .sp-ox .l5 { color: #228B83; }
html[data-theme="dark"] .sp-ox .l6 { color: #2A9C93; } html[data-theme="dark"] .sp-ox .l7 { color: #35AEA3; } html[data-theme="dark"] .sp-ox .l8 { color: #44C2B5; } html[data-theme="dark"] .sp-ox .l9 { color: #5ED8CB; }

/* Lignes du globe et trafic simulé : un seul canevas 2D (sphere.js), posé juste derrière le logo (à -30 px, d'où l'échelle 1,02 qui compense la perspective) */
.sp-cv { position: absolute; left: -380px; top: -380px; width: 760px; height: 760px; transform: translateZ(-30px) scale(1.02); pointer-events: none; transition: opacity 400ms cubic-bezier(.23, 1, .32, 1); }
.sp-uni.sp-dive .sp-cv { opacity: 0; }
.sp-uni.sp-ret .sp-cv { animation: sp-cvin 500ms cubic-bezier(.23, 1, .32, 1) 800ms both; }   /* au retour, les lignes reviennent quand la sphère a presque fini de se reformer */
@keyframes sp-cvin { from { opacity: 0; } to { opacity: 1; } }

/* Mode allégé (automatique si l'écran est lent) : moins de décor animé */
.sp-lite1 .sp-aura.a3, .sp-lite1 .sp-wave.w2 { display: none; }
.sp-lite2 .sp-aura, .sp-lite2 .sp-wave, .sp-lite2 .sp-streaks, .sp-lite2 .sp-pt .ping { display: none; }

/* Plus de fond topographique ni de halos nulle part : les pages gardent un fond uni, dans la couleur de l'application */
html.sphere canvas.fond, html.sphere .orbs { display: none !important; }

/* Le reste du site est mis en pause tant que la sphère est affichée : rien ne se dessine ni ne s'anime derrière elle */
html.sp-on .shell, html.sp-on .tabbar, html.sp-on canvas.fond, html.sp-on .orbs, html.sp-on .toasts { display: none !important; }

/* Points de section : un badge rond avec le logo de la section */
.sp-pt { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.sp-pt.back { visibility: hidden; pointer-events: none; }
.sp-pt .dot { width: 40px; height: 40px; border-radius: 50%; background: var(--sp-acc); display: flex; align-items: center; justify-content: center; transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
.sp-pt .dot svg { width: 22px; height: 22px; display: block; stroke: var(--sp-on); stroke-width: 1.8; fill: none; stroke-linejoin: miter; stroke-linecap: butt; }
.sp-pt .ping { position: absolute; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--sp-acc); opacity: 0; animation: sp-ping 3.6s cubic-bezier(.23, 1, .32, 1) infinite; pointer-events: none; }
@keyframes sp-ping { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.sp-pt .halo { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: var(--sp-acc); opacity: 0; transform: scale(.5); transition: opacity 200ms cubic-bezier(.23, 1, .32, 1), transform 200ms cubic-bezier(.23, 1, .32, 1); pointer-events: none; }
.sp-pt.sel .halo { opacity: .16; transform: scale(1); }
.sp-pt.sel .dot { transform: scale(1.18); }
.sp-pt:active .dot { transform: scale(.92); }

/* Fil d'annotation : point, trait en biais, trait horizontal, nom au bout */
.sp-tip { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.sp-tip .lead { position: absolute; left: 0; top: -76px; width: 260px; height: 80px; overflow: visible; transform-origin: 0 76px; }
.sp-tip .lead path { fill: none; stroke: var(--sp-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 100ms cubic-bezier(.23, 1, .32, 1); }
.sp-tip .t1, .sp-tip .t2 { position: absolute; background: var(--sp-bg); opacity: 0; white-space: nowrap; transition: opacity 100ms cubic-bezier(.23, 1, .32, 1); }
.sp-tip .t1 { left: 240px; top: -68px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1; padding: 4px 8px; color: var(--sp-ink); }
.sp-tip .t2 { left: 50px; top: -48px; font-size: 15px; line-height: 1.2; color: var(--sp-mut); padding: 2px 6px 2px 0; }
.sp-pt.flip .sp-tip .lead { transform: scaleX(-1); }
.sp-pt.flip .sp-tip .t1 { left: auto; right: 240px; text-align: right; }
.sp-pt.flip .sp-tip .t2 { left: auto; right: 50px; text-align: right; padding: 2px 0 2px 6px; }
.sp-pt:focus-visible .sp-tip path, .sp-uni:not(.sp-drag) .sp-pt:hover .sp-tip path { stroke-dashoffset: 0; transition-duration: 300ms; }
.sp-pt:focus-visible .sp-tip .t1, .sp-pt:focus-visible .sp-tip .t2, .sp-uni:not(.sp-drag) .sp-pt:hover .sp-tip .t1, .sp-uni:not(.sp-drag) .sp-pt:hover .sp-tip .t2 { opacity: 1; transition-delay: 200ms; }
@media (hover: none) { .sp-pt.sel .sp-tip path { stroke-dashoffset: 0; transition-duration: 300ms; } .sp-pt.sel .sp-tip .t1, .sp-pt.sel .sp-tip .t2 { opacity: 1; transition-delay: 200ms; } }
@media (hover: hover) and (pointer: fine) { .sp-pt:hover .dot { transform: scale(1.15); } }

/* ===== Jets de lumière (arrivée et sortie de la plongée) ===== */
.sp-streaks, .sp-xstreaks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.sp-xwrap { position: fixed; inset: 0; z-index: 71; pointer-events: none; overflow: hidden; }
.sp-sk { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sp-sk i { position: absolute; left: 36px; top: -1px; height: 2px; width: 110px; border-radius: 2px; background: var(--sp-acc); opacity: 0; transform-origin: 0 50%; }
.sp-intro .sp-streaks .sp-sk i { animation: sp-shoot 1500ms cubic-bezier(.55, 0, .2, 1) both; }
.sp-go .sp-xstreaks .sp-sk i { animation: sp-xshoot 700ms cubic-bezier(.23, 1, .32, 1) both; }   /* à la sortie sur une page : un éclat bref et discret, qui ne traîne pas sur le contenu */
@keyframes sp-xshoot { 0% { transform: translateX(0) scaleX(.2); opacity: 0; } 20% { opacity: .4; } 100% { transform: translateX(300px) scaleX(.8); opacity: 0; } }
@keyframes sp-shoot { 0% { transform: translateX(0) scaleX(.15); opacity: 0; } 18% { opacity: .75; } 100% { transform: translateX(620px) scaleX(1); opacity: 0; } }

/* ===== Coins d'information ===== */
.sp-hud { position: absolute; inset: 0; pointer-events: none; color: var(--sp-ink); transition: opacity 220ms cubic-bezier(.23, 1, .32, 1); }
.sp-hud.off { opacity: 0; }
.sp-hud > div { position: absolute; max-width: 46vw; }
.sp-tl { left: 36px; top: 30px; }
.sp-tr { right: 36px; top: 30px; text-align: right; }
.sp-bl { left: 36px; bottom: 30px; }
.sp-br { right: 36px; bottom: 30px; width: 190px; }
.sp-hi { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sp-sub { margin-top: 6px; font-size: 15px; color: var(--sp-mut); display: flex; align-items: center; gap: 8px; }
.sp-live { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-ok); flex: none; }
.sp-live.off { background: var(--sp-mut); opacity: .6; }
.sp-live.bad { background: #D9534F; }
.sp-date { font-size: 16px; color: var(--sp-mut); }
.sp-time { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sp-note { pointer-events: auto; display: flex; flex-direction: column; gap: 4px; max-width: 270px; padding: 10px 12px; margin: -10px -12px; border-radius: 10px; transition: background-color 160ms cubic-bezier(.23, 1, .32, 1), transform 160ms cubic-bezier(.23, 1, .32, 1); }
.sp-note:active { transform: scale(.98); }
.sp-note .who { font-size: 14px; color: var(--sp-mut); }
.sp-note .txt { font-size: 18px; font-weight: 600; line-height: 1.25; }
.sp-srv { font-size: 15px; color: var(--sp-mut); display: flex; align-items: center; justify-content: flex-end; gap: 8px; pointer-events: auto; }
.sp-srv a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.sp-st { display: flex; justify-content: space-between; font-size: 14px; color: var(--sp-mut); margin-top: 10px; }
.sp-st b { color: var(--sp-ink); font-weight: 600; }
.sp-bar { height: 4px; border-radius: 2px; background: var(--sp-bar); margin-top: 5px; overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 0; background: var(--sp-acc); transition: width 600ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .sp-note:hover { background: var(--sp-hov); } .sp-srv a:hover { color: var(--sp-ink); } }

.sp-hint { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font-size: 16px; color: var(--sp-mut); pointer-events: none; transition: opacity 400ms cubic-bezier(.23, 1, .32, 1); }
.sp-hint.gone { opacity: 0; }

/* ===== Arrivée sur une page : on ressort du logo ===== */
.sp-arrive { animation: sp-arrive 900ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes sp-arrive { from { transform: scale(1.12); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== Téléphone ===== */
@media (max-width: 760px) {
  .sp-stage { transform: scale(.6); }
  .sp-streaks, .sp-xstreaks { transform: scale(.6); }
  .sp-tl { left: 18px; top: 18px; } .sp-tr { right: 18px; top: 18px; } .sp-bl { left: 30px; bottom: 22px; } .sp-br { right: 18px; bottom: 22px; width: 140px; }
  .sp-hi { font-size: 20px; } .sp-time { font-size: 24px; } .sp-date { font-size: 13px; } .sp-note .txt { font-size: 15px; }
  .sp-hint { top: 108px; bottom: auto; font-size: 14px; padding: 0 24px; }
  /* fils d'annotation plus courts : ils restent dans l'écran */
  .sp-tip .lead { transform: scaleX(.55); }
  .sp-pt.flip .sp-tip .lead { transform: scaleX(-.55); }
  .sp-tip .t1 { left: 140px; font-size: 21px; }
  .sp-pt.flip .sp-tip .t1 { left: auto; right: 140px; }
  .sp-tip .t2 { left: 28px; font-size: 14px; }
  .sp-pt.flip .sp-tip .t2 { left: auto; right: 28px; }
}

/* ===== Mouvement réduit ou aucun ===== */
html[data-motion="reduced"] .sphere-home *, html[data-motion="none"] .sphere-home *, html[data-motion="reduced"] .sphere-home, html[data-motion="none"] .sphere-home { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
html[data-motion="reduced"] .sp-streaks, html[data-motion="none"] .sp-streaks, html[data-motion="reduced"] .sp-xstreaks, html[data-motion="none"] .sp-xstreaks { display: none; }
html[data-motion="reduced"] .sp-ox path, html[data-motion="none"] .sp-ox path { stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .sp-wave, .sp-aura, .sp-pt .ping { animation: none; }
  .sp-streaks, .sp-xstreaks { display: none; }
  .sp-intro .sp-ox path { animation: none; stroke-dashoffset: 0; }
  .sp-arrive { animation: none; }
}
.sphere-home button:focus-visible, .sp-uni:focus-visible { outline: 2px solid var(--sp-acc); outline-offset: 4px; }