/* ============================================================
   JARVIS : « Spatial » (Claude Code, 09/10/2026)
   Alexandre, d'après le modèle « Vision Spatial UI » (fenêtres de verre flottant devant une vraie photo, façon
   Apple Vision Pro), validé sur maquette (https://claude.ai/artifact/BjsovzsQ4ZhuEGtZZZHo3K) : « c'est bien celui-là
   que je veux », « arc façon HUD », « verre clair orienté transparence », « gardons le réacteur façon Iron Man »,
   « l'hologramme me plaît », « scroll horizontal peut changer de catégorie », « applique ce design au vrai site ».
   Chargée en DERNIER, active sous html.rt.sp (interrupteur « Design Spatial » des Réglages, clé jarvis.themeSpatial).
   Elle garde la mise en page et la logique de verre.css et matrice.css ; elle change le décor (photo de l'atelier de
   nuit), la matière (verre transparent), la disposition en arc (repères à gauche, contenu au centre, détail à droite)
   et les caractères (étiquettes d'ordinateur de bord). Aucune vue n'est réécrite : tout est posé en CSS.
   RÈGLE À NE PAS CASSER : ne jamais animer `filter` ni poser `opacity`, `filter`, `mask` ou `transform` sur un parent
   d'un élément de verre (backdrop-filter). Mesuré sur la maquette : les fenêtres disparaissent, deux fois sur trois.
   1. Jetons  2. Décor  3. Coque  4. Arc des pages  5. Accueil  6. Conversations  7. Matière des composants
   8. Commande  9. Apparitions  10. Écrans moyens, téléphone, mouvement réduit
   ============================================================ */

/* ---------- 1. Jetons ---------- */
html.sp {
  /* Accent : l'orange ne sert plus qu'à ce qui attend Alexandre (validation, alerte). L'action principale est blanche. */
  --acc: 255, 160, 31; --acc-vif: #ffa01f; --acc-haut: #ffb347; --acc-bas: #f08c00;
  --acc-haut-s: #ffbd5c; --acc-vif-s: #ffab33; --acc-bas-s: #f59a14;
  --acc-clair: #ffc46b; --acc-pale: #ffdca6; --acc-doux: 255, 184, 92; --acc-pale-rgb: 255, 220, 166;
  --or: 255, 255, 255;
  --sp-t1: rgba(255, 255, 255, .96); --sp-t2: rgba(255, 255, 255, .76); --sp-t3: rgba(255, 255, 255, .58);
  /* Alexandre, 10/10 : « des éléments totalement transparents rendent la lecture difficile ». Le verre garde sa
     transparence mais reçoit un voile sombre sous le reflet, et plus rien de lisible n'est posé à nu sur la photo. */
  --sp-verre: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045)), linear-gradient(rgba(9, 11, 15, .38), rgba(9, 11, 15, .38));
  --sp-fx: blur(18px) saturate(145%) brightness(.62);
  --sp-arete: inset 0 1px 0 rgba(255, 255, 255, .36), inset 0 0 0 1px rgba(255, 255, 255, .13);
  --sp-ombre: 0 34px 80px -30px rgba(0, 0, 0, .78), 0 2px 8px rgba(0, 0, 0, .22);
  --sp-fume: rgba(255, 255, 255, .09);
  --sp-fume-h: rgba(255, 255, 255, .13);
  --sp-pastille: rgba(255, 255, 255, .13);
  --sp-filet: rgba(255, 255, 255, .14);
  --sp-vert: #3ddc6a; --sp-rouge: #ff5a4f;
  --sp-e: cubic-bezier(.22, 1, .36, 1);
  --sp-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Geist", "Segoe UI", system-ui, sans-serif;
  --sp-mono: ui-monospace, "SF Mono", SFMono-Regular, "Geist Mono", Menlo, Consolas, monospace;
  /* Arc : largeur totale, marge intérieure, intervalle, unité (gauche 1, centre 1.8, droite 1). */
  --sp-A: min(1380px, calc(100vw - 32px)); --sp-P: clamp(64px, 6vw, 92px); --sp-G: clamp(18px, 2.2vw, 34px);
  --sp-U: calc((var(--sp-A) - 2 * var(--sp-P) - 2 * var(--sp-G)) / 3.8);
  --sp-px: 0; --sp-py: 0;
}
html.rt.sp #app {
  --font-ui: var(--sp-ui); --font-mono: var(--sp-mono); --font-points: var(--sp-ui);
  /* Les surfaces de verre.css et matrice.css deviennent des cartes fumées sans flou : le flou est porté par les
     fenêtres de l'arc (un seul flou par fenêtre). */
  --m-carte: var(--sp-fume); --m-point: #ffffff; --m-gris: rgba(255, 255, 255, .62); --m-eteint: rgba(255, 255, 255, .22);
  --m-bord: inset 0 0 0 1px rgba(255, 255, 255, .07); --m-ombre: 0 0 0 0 rgba(0, 0, 0, 0);
  --v-voile: var(--sp-fume); --v-voile-fx: none;
  --v-plaque: var(--sp-fume); --v-plaque-fx: none;
  --v-pastille: var(--sp-pastille); --v-pastille-fx: none;
  --v-fume: var(--sp-fume);
  --v-ombre-plaque: var(--m-bord); --v-ombre-pastille: inset 0 0 0 1px rgba(255, 255, 255, .1); --v-ombre-fume: var(--m-bord);
  --v-white: #ffffff; --v-text-2: var(--sp-t2); --v-gray: var(--sp-t3); --v-gold: #ffffff;
  --v-ok: var(--sp-vert); --jarvis-success: var(--sp-vert);
  --v-fail: var(--sp-rouge); --jarvis-danger: var(--sp-rouge);
  --jarvis-text: var(--sp-t1); --jarvis-text-muted: var(--sp-t2); --jarvis-text-dim: var(--sp-t3);
  font-family: var(--sp-ui); color: var(--sp-t1);
}

/* ---------- 2. Décor : la photo de l'atelier, la lune posée dans l'espace libre à droite du réacteur ---------- */
html.rt.sp body { background: #06070a; }
html.rt.sp body #env { display: block !important; visibility: visible !important; position: fixed; inset: 0; z-index: 0; overflow: hidden; opacity: 1 !important; background: #06070a !important; transform: none !important; filter: none !important; }
html.rt.sp body #env > * { display: none !important; }
html.rt.sp body #env::before {
  content: ""; display: block !important; position: absolute; inset: -3%; z-index: 0; height: auto; opacity: 1; box-shadow: none; mix-blend-mode: normal;
  --wimg: max(124vw, calc(124vh * 1.7768));
  --t: calc(50vw + clamp(190px, 16.5vw, 250px));
  background: #0a0806 url("backgrounds/atelier-nuit.webp") no-repeat;
  background-size: var(--wimg) auto;
  /* La lune est à 67,64 % de la largeur de la photo : on la pose à --t, sans jamais découvrir un bord. */
  background-position: clamp(calc(106vw - var(--wimg)), calc(var(--t) + 3vw - 0.6764 * var(--wimg)), 0px) 42%;
  transform: translate(calc(var(--sp-px) * -16px), calc(var(--sp-py) * -10px)) scale(1.03);
  transition: transform .5s var(--sp-e);
}
html.rt.sp body #env::after { content: ""; display: block !important; position: absolute; inset: 0; z-index: 1; opacity: 1; mix-blend-mode: normal; transform: none; animation: none; will-change: auto; background: linear-gradient(180deg, rgba(4, 5, 8, .5), rgba(4, 5, 8, .16) 26%, rgba(4, 5, 8, .2) 66%, rgba(4, 5, 8, .6)); }
html.rt.sp body #env.sp-pousse-1::before { animation: sp-pousse-g .62s var(--sp-e); }
html.rt.sp body #env.sp-pousse--1::before { animation: sp-pousse-d .62s var(--sp-e); }
@keyframes sp-pousse-g { 30% { translate: -22px 0; } }
@keyframes sp-pousse-d { 30% { translate: 22px 0; } }
/* Les anciens décors et cadres s'effacent : paysage en survol, casque, cadre HUD, particules, écran de changement. */
html.rt.sp body :is(#survol, #helmet, .hud-frame, #fxParticles, #glow, #wipe, #pageBoot),
html.rt.sp #app :is(.hud-ecran, .hud-coins, .vh-lien) { display: none !important; }
html.rt.sp #app .command-dock::before { display: none !important; }

/* ---------- 3. Coque : barre système, menu en pastille ---------- */
html.rt.sp #app .sysbar { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-family: var(--sp-mono); color: var(--sp-t2); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
html.rt.sp #app .sysbar::before, html.rt.sp #app .sysbar::after { display: none !important; }
html.rt.sp #app .sysbar .mono { font-family: var(--sp-mono); }
html.rt.sp #app .rail { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.rt.sp #app .rail::before, html.rt.sp #app .rail::after { display: none !important; }
html.rt.sp #app .rail__nav {
  border-radius: 999px; background: var(--sp-verre) !important; -webkit-backdrop-filter: var(--sp-fx) !important; backdrop-filter: var(--sp-fx) !important;
  box-shadow: var(--sp-arete), var(--sp-ombre) !important; border: 0 !important;
}
html.rt.sp #app .rail__nav .rail__item { font-family: var(--sp-ui); font-weight: 500; color: var(--sp-t2) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
html.rt.sp #app .rail__nav .rail__item:hover, html.rt.sp #app .rail__nav .rail__item.is-active { color: #fff !important; }
html.rt.sp #app .rail__nav .navpill { background: rgba(255, 255, 255, .26) !important; box-shadow: none !important; border: 0 !important; }
html.rt.sp #app .rail__count { background: rgba(255, 255, 255, .16) !important; color: #fff !important; box-shadow: none !important; font-family: var(--sp-mono); }
html.rt.sp #app .rail__item[data-page="approvals"] .rail__count { background: var(--acc-vif) !important; color: #1c1205 !important; }
html.rt.sp #app .iconbtn { color: var(--sp-t1); }
html.rt.sp #app .iconbtn__badge { background: var(--acc-vif) !important; color: #1c1205 !important; }

/* ---------- 4. Arc des pages : repères à gauche, contenu au centre, détail à droite ---------- */
@media (min-width: 1100px) {
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view {
    position: relative; z-index: 0; display: grid; align-content: start; align-items: start;
    grid-template-columns: var(--sp-U) minmax(0, calc(1.8 * var(--sp-U))) var(--sp-U); column-gap: var(--sp-G); row-gap: 0;
    width: calc(var(--sp-A) - 2 * var(--sp-P)); max-width: none !important; margin: 0 auto !important;
    padding: 26px 0 150px !important; perspective: none !important; transform: none !important;
  }
  /* La fenêtre centrale : un seul verre derrière tout le contenu (pseudo-élément, pour ne pas enfermer le reste). */
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view::before {
    content: ""; display: block !important; position: absolute; z-index: -1; left: calc(var(--sp-U) + var(--sp-G)); right: 0; top: 0; bottom: 118px;
    border-radius: 36px; background: var(--sp-verre); -webkit-backdrop-filter: var(--sp-fx); backdrop-filter: var(--sp-fx);
    box-shadow: var(--sp-arete), var(--sp-ombre); pointer-events: none;
  }
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view > * {
    grid-column: 2 / 4; min-width: 0; margin-left: 26px !important; margin-right: 26px !important;
  }
  /* Fenêtre de gauche : le titre de la page, ses compteurs et ses filtres. Elle reste en vue pendant le défilement. */
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view > .vhead {
    grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 26px; align-self: start;
    display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin: 0 !important; padding: 22px !important;
    border-radius: 34px; background: var(--sp-verre) !important; -webkit-backdrop-filter: var(--sp-fx); backdrop-filter: var(--sp-fx);
    box-shadow: var(--sp-arete), var(--sp-ombre) !important; border: 0 !important;
    transform: perspective(1500px) rotateY(20deg); transform-origin: 100% 50%; transition: transform .24s var(--sp-e);
    max-height: calc(100vh - 250px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view > .vhead:hover { transform: perspective(1500px) rotateY(11deg); }
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view > .vhead::before, html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view > .vhead::after { display: none !important; }
  /* Le premier bloc du centre commence sous le bord arrondi de la fenêtre, le dernier s'arrête avant. */
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view > .vhead + * { margin-top: 26px !important; }
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view > :last-child { margin-bottom: 26px !important; }

  /* Missions : la liste au centre, la mission ouverte dans la fenêtre de droite. */
  html.rt.sp #app #stage[data-page="missions"] #view:has(.vm-insp)::before { right: calc(var(--sp-U) + var(--sp-G)); }
  html.rt.sp #app #stage[data-page="missions"] #view > .vm { display: contents; }
  html.rt.sp #app #stage[data-page="missions"] #view:has(.vm-insp) > :not(.vhead) { grid-column: 2 !important; }
  html.rt.sp #app #stage[data-page="missions"] #view > .vm > .vm-sheet { grid-column: 2 !important; min-width: 0; margin: 26px 20px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; transform: none !important; }
  html.rt.sp #app #stage[data-page="missions"] #view:not(:has(.vm-insp)) > .vm > .vm-sheet { grid-column: 2 / 4 !important; }
  html.rt.sp #app #stage[data-page="missions"] #view > .vm > .vm-insp {
    grid-column: 3 !important; grid-row: 1 / span 60 !important; position: sticky !important; top: 26px !important; align-self: start; width: auto !important; margin: 0 !important;
    border-radius: 34px; background: var(--sp-verre) !important; -webkit-backdrop-filter: var(--sp-fx); backdrop-filter: var(--sp-fx);
    box-shadow: var(--sp-arete), var(--sp-ombre) !important; border: 0 !important;
    transform: perspective(1500px) rotateY(-20deg) !important; transform-origin: 0 50%; transition: transform .24s var(--sp-e);
  }
  html.rt.sp #app #stage[data-page="missions"] #view > .vm > .vm-insp:hover { transform: perspective(1500px) rotateY(-11deg) !important; }
  html.rt.sp #app #stage[data-page="missions"] .vm-insp__core { background: none !important; box-shadow: none !important; border: 0 !important; max-height: calc(100vh - 262px) !important; }
}

/* En-tête de page dans la fenêtre de gauche. */
html.rt.sp #app .vhead__text { min-width: 0; }
html.rt.sp #app .vhead__kicker { font: 500 12px/1.35 var(--sp-mono) !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--sp-t3) !important; }
html.rt.sp #app .vhead__kicker::before, html.rt.sp #app .vhead__kicker::after { display: none !important; }
html.rt.sp #app .vhead__title { font: 600 clamp(22px, 2vw, 28px)/1.12 var(--sp-ui) !important; letter-spacing: -.02em !important; text-transform: none !important; color: #fff !important; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
html.rt.sp #app .vhead__sub { font: 400 14.5px/1.45 var(--sp-ui) !important; color: var(--sp-t2) !important; }
html.rt.sp #app .vhead__stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; width: auto; margin: 0; padding-top: 16px; border-top: 1px solid var(--sp-filet); }
html.rt.sp #app .vstat { min-width: 0; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; transform: none !important; }
html.rt.sp #app .vstat::before, html.rt.sp #app .vstat::after { display: none !important; }
html.rt.sp #app .vstat dt { font: 500 11.5px/1.3 var(--sp-mono) !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--sp-t3) !important; }
html.rt.sp #app .vstat dd { margin: 3px 0 0; font: 600 clamp(22px, 2vw, 28px)/1 var(--sp-ui) !important; letter-spacing: -.02em !important; font-variant-numeric: tabular-nums; color: #fff !important; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
html.rt.sp #app .vstat--warning dd { color: var(--acc-vif) !important; }
html.rt.sp #app .vstat--danger dd { color: var(--sp-rouge) !important; }
html.rt.sp #app .vhead__ctrl { width: 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--sp-filet); }
html.rt.sp #app .vhead__ctrl .dd, html.rt.sp #app .vhead__ctrl .dd__btn { width: 100%; }
html.rt.sp #app .journal-controls { display: grid; gap: 8px; width: 100%; }

/* ---------- 5. Accueil : deux fenêtres en arc autour du réacteur en hologramme ---------- */
@media (min-width: 1100px) {
  html.rt.sp #app .vh.vh--cockpit { perspective: none !important; }
  html.rt.sp #app .vh-col {
    border-radius: 34px; padding: 14px !important; gap: 0 !important;
    background: var(--sp-verre) !important; -webkit-backdrop-filter: var(--sp-fx); backdrop-filter: var(--sp-fx);
    box-shadow: var(--sp-arete), var(--sp-ombre) !important; scrollbar-width: thin;
    transition: transform .24s var(--sp-e);
  }
  html.rt.sp #app .vh-col--l { transform: perspective(1500px) rotateY(20deg); transform-origin: 100% 50%; }
  html.rt.sp #app .vh-col--r { transform: perspective(1500px) rotateY(-20deg); transform-origin: 0 50%; }
  html.rt.sp #app .vh-col--l:hover { transform: perspective(1500px) rotateY(11deg); }
  html.rt.sp #app .vh-col--r:hover { transform: perspective(1500px) rotateY(-11deg); }
}
/* Dans une fenêtre, les anciens panneaux deviennent de simples rubriques séparées par un filet. */
html.rt.sp #app .vh-orn { transform: none !important; }
html.rt.sp #app .vh-orn .vh-orn__core { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
html.rt.sp #app .vh-orn .vh-orn__core::before, html.rt.sp #app .vh-orn .vh-orn__core::after, html.rt.sp #app .vh-orn::before, html.rt.sp #app .vh-orn::after { display: none !important; }
html.rt.sp #app .vh-col .vh-orn + .vh-orn { border-top: 1px solid var(--sp-filet); }
html.rt.sp #app .vh-orn--dec.is-gate .vh-orn__core { border-radius: 22px !important; background: rgba(255, 160, 31, .1) !important; box-shadow: inset 0 0 0 1px rgba(255, 160, 31, .34) !important; }
/* Centre : le graphique d'activité flotte sans cadre, le réacteur n'a aucune vitre derrière lui. */
html.rt.sp #app .vh-act { border-radius: 22px !important; background: var(--sp-verre) !important; -webkit-backdrop-filter: var(--sp-fx); backdrop-filter: var(--sp-fx); box-shadow: var(--sp-arete) !important; border: 0 !important; transform: none !important; }
html.rt.sp #app .vh-act::before, html.rt.sp #app .vh-act::after { display: none !important; }
html.rt.sp #app .vh-state__t { font: 600 clamp(28px, 2.9vw, 40px)/1.1 var(--sp-ui) !important; letter-spacing: -.02em !important; text-transform: none !important; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .7), 0 0 28px rgba(0, 0, 0, .8); }
html.rt.sp #app .vh--gate .vh-state__t { color: var(--acc-vif); }
html.rt.sp #app .vh-state__s { font: 400 16px/1.4 var(--sp-ui) !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 22px rgba(0, 0, 0, .85); }
/* Réacteur : traits pleins et cœur lumineux (la matrice de points le dessinait en pointillés). */
html.rt.sp #app .nv { --nv-c: #f6f1e7; --nv-rgb: 246, 241, 231; filter: drop-shadow(0 0 22px rgba(246, 241, 231, .3)); }
html.rt.sp #app .nv[data-etat="gate"] { --nv-c: #ffa01f; --nv-rgb: 255, 160, 31; filter: drop-shadow(0 0 22px rgba(255, 160, 31, .34)); }
html.rt.sp #app .nv[data-etat="anomalie"] { --nv-c: #ff5a4f; --nv-rgb: 255, 90, 79; filter: drop-shadow(0 0 22px rgba(255, 90, 79, .34)); }
html.rt.sp #app .nv-c { stroke-width: 1; stroke-opacity: .3; stroke-dasharray: none; }
html.rt.sp #app .nv-c--hi { stroke-opacity: .55; }
html.rt.sp #app .nv-c--rim { stroke-opacity: .9; stroke-width: 1.25; }
html.rt.sp #app .nv-tk { stroke-width: 1; stroke-opacity: .42; stroke-dasharray: none; }
html.rt.sp #app .nv-tk--l { stroke-opacity: .9; }
html.rt.sp #app .nv-segp { stroke-width: 5; stroke-opacity: .32; stroke-dasharray: none; stroke-linecap: butt; }
html.rt.sp #app .nv-segp--hi { stroke-opacity: .78; }
html.rt.sp #app .nv-segt { stroke-dasharray: none; }
html.rt.sp #app .nv-gtrack { stroke-width: 1; stroke-opacity: .22; stroke-dasharray: none; }
html.rt.sp #app .nv-coil { fill: rgba(var(--nv-rgb), .08); stroke-width: 1; stroke-opacity: .58; stroke-dasharray: none; }
html.rt.sp #app .nv-wind { stroke-width: 1; stroke-dasharray: none; }

/* ---------- 6. Conversations : la liste à gauche, le fil au centre ---------- */
@media (min-width: 1100px) {
  html.rt.sp #app #stage[data-page="chat"] #view { width: calc(var(--sp-A) - 2 * var(--sp-P)); max-width: none !important; margin: 0 auto !important; padding: 26px 0 0 !important; perspective: none !important; transform: none !important; }
  html.rt.sp #app #stage[data-page="chat"] .cv { display: grid !important; grid-template-columns: var(--sp-U) minmax(0, 1fr); gap: var(--sp-G); align-items: start; height: calc(100vh - 262px) !important; max-height: none !important; padding: 0 !important; }
  html.rt.sp #app #stage[data-page="chat"] .cv-sessions { order: -1; grid-column: 1; grid-row: 1; height: auto !important; max-height: 100%; transform: perspective(1500px) rotateY(20deg) !important; transform-origin: 100% 50%; transition: transform .24s var(--sp-e); }
  html.rt.sp #app #stage[data-page="chat"] .cv-sessions:hover { transform: perspective(1500px) rotateY(11deg) !important; }
  html.rt.sp #app #stage[data-page="chat"] .cv-fil { grid-column: 2; grid-row: 1; height: 100% !important; min-height: 0; }
}
html.rt.sp #app :is(.cv-fil, .cv-sessions) {
  border-radius: 34px !important; background: var(--sp-verre) !important; -webkit-backdrop-filter: var(--sp-fx); backdrop-filter: var(--sp-fx);
  box-shadow: var(--sp-arete), var(--sp-ombre) !important; border: 0 !important;
}
html.rt.sp #app :is(.cv-fil, .cv-sessions)::before, html.rt.sp #app :is(.cv-fil, .cv-sessions)::after { display: none !important; }
html.rt.sp #app .cv-titre { font: 600 clamp(20px, 1.8vw, 26px)/1.15 var(--sp-ui) !important; letter-spacing: -.015em !important; text-transform: none !important; color: #fff !important; }
html.rt.sp #app .cv-msg { transform: none !important; border-radius: 18px 18px 18px 6px !important; background: var(--sp-fume) !important; box-shadow: none !important; }
html.rt.sp #app .cv-msg--user { border-radius: 18px 18px 6px 18px !important; background: rgba(255, 255, 255, .2) !important; }
html.rt.sp #app .cv-msg::before, html.rt.sp #app .cv-msg::after { display: none !important; }
html.rt.sp #app .cv-session.is-active { background: rgba(255, 255, 255, .2) !important; box-shadow: none !important; }

/* ---------- 7. Matière des composants ---------- */
html.rt.sp #app { text-shadow: 0 1px 12px rgba(0, 0, 0, .42); }
html.rt.sp #app :is(.mono, .vh-micro, .mx-lab, .panel__eyebrow, .section-title, .badge, .chip b, time) { font-family: var(--sp-mono); }
html.rt.sp #app :is(.mx-num, .vh-orn__title, .panel__title, .daily__title, .pnode__name, .mem__title, .row__title, .approval__title, h1, h2, h3) { font-family: var(--sp-ui); text-transform: none; }
html.rt.sp #app .mx-num { font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
html.rt.sp #app .mx-idx { display: none; }
html.rt.sp #app :is(.mx-num.mx-zero, .vstat dd.mx-zero)::after { content: none !important; }
html.rt.sp #app .mx-num.mx-zero { font-size: var(--pts, 32px); }
/* Cartes à l'intérieur d'une fenêtre : verre fumé sans flou, jamais d'inclinaison ni de coins de visée. */
html.rt.sp #app #view [data-tilt] { transform: none !important; will-change: auto !important; }
html.rt.sp #app #view [data-tilt]::before { display: none !important; }
html.rt.sp #app #view :is(.panel, .row, .pnode, .agentcard, .mem, .tool, .approval, .activity-row, .notice, .empty, .vm-row, .chips--tuile, .mcard, .well-card) {
  border-radius: 18px !important; background: var(--sp-fume) !important; box-shadow: none !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.rt.sp #app #view :is(.panel, .row, .pnode, .agentcard, .mem, .tool, .approval, .activity-row, .notice, .empty, .mcard, .well-card)::after { display: none !important; }
html.rt.sp #app #view .dossier { background: none !important; box-shadow: none !important; border: 0 !important; }
html.rt.sp #app #view .vm-row.is-sel { background: rgba(255, 255, 255, .2) !important; }
html.rt.sp #app #view .vm-row:hover { background: var(--sp-fume-h) !important; }
html.rt.sp #app .section-title { margin-top: 26px; font: 500 12px/1.35 var(--sp-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--sp-t2) !important; }
html.rt.sp #app .section-title::before, html.rt.sp #app .section-title::after { display: none !important; }
/* Pastilles de statut : un point de couleur et un libellé, la couleur ne porte jamais l'information seule. */
html.rt.sp #app .badge { border-radius: 999px !important; background: rgba(255, 255, 255, .1) !important; border: 0 !important; box-shadow: none !important; font: 500 11.5px/1 var(--sp-mono) !important; letter-spacing: .05em !important; text-transform: uppercase; color: var(--sp-t2) !important; }
html.rt.sp #app .badge--success, html.rt.sp #app .badge--ok { color: var(--sp-vert) !important; }
html.rt.sp #app .badge--warning, html.rt.sp #app .badge--pending { color: var(--acc-vif) !important; }
html.rt.sp #app .badge--danger { color: var(--sp-rouge) !important; }
html.rt.sp #app .badge--primary { color: #fff !important; }
html.rt.sp #app .chip { border-radius: 999px !important; background: var(--sp-pastille) !important; border: 0 !important; box-shadow: none !important; color: var(--sp-t1) !important; }
html.rt.sp #app .chip.is-active { background: rgba(255, 255, 255, .3) !important; color: #fff !important; }
/* Boutons : l'action principale est blanche, les autres sont des pastilles de verre. */
html.rt.sp #app :is(.btn, .vbtn) { border-radius: 999px !important; background: var(--sp-pastille) !important; border: 0 !important; box-shadow: none !important; color: #fff !important; font-family: var(--sp-ui) !important; font-weight: 600 !important; text-shadow: none; }
html.rt.sp #app :is(.btn, .vbtn):hover { background: rgba(255, 255, 255, .22) !important; }
html.rt.sp #app :is(.btn--primary, .vbtn--primary) { background: #fff !important; color: #14151a !important; }
html.rt.sp #app :is(.btn--primary, .vbtn--primary):hover { background: #ececec !important; }
html.rt.sp #app :is(.btn--primary, .vbtn--primary) i { color: inherit !important; background: none !important; }
html.rt.sp #app .vbtn--link { background: none !important; color: var(--sp-t2) !important; }
html.rt.sp #app :is(.btn, .vbtn)::before, html.rt.sp #app :is(.btn, .vbtn)::after { display: none !important; }
html.rt.sp #app :is(.input, .dd__btn, .well-card input, .well-card select, .well-card textarea) { border-radius: 12px !important; background: rgba(255, 255, 255, .1) !important; border: 0 !important; box-shadow: none !important; color: #fff !important; font-family: var(--sp-ui) !important; }
html.rt.sp #app .dd__menu { border-radius: 16px !important; background: rgba(28, 29, 35, .94) !important; box-shadow: var(--sp-arete), var(--sp-ombre) !important; border: 0 !important; }
html.rt.sp #app .switch__track { background: rgba(255, 255, 255, .18) !important; border: 0 !important; box-shadow: none !important; }
html.rt.sp #app .switch input:checked + .switch__track { background: var(--sp-vert) !important; }
/* Panneaux hors de la vue : tiroir, contexte, messages. */
html.rt.sp #app :is(.drawer__panel, .context, .toast, .tour__card) { background: linear-gradient(180deg, rgba(40, 42, 50, .78), rgba(22, 23, 29, .86)) !important; -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%); box-shadow: var(--sp-arete), var(--sp-ombre) !important; border: 0 !important; }
html.rt.sp #app .settings-savebar { bottom: calc(var(--barre-bas, 24px) + 72px) !important; border-radius: 22px !important; background: rgba(28, 29, 35, .88) !important; box-shadow: var(--sp-arete) !important; border: 0 !important; }

/* ---------- 8. Commande : une pastille de verre, « Envoyer » blanc dans la même barre ---------- */
html.rt.sp #app .command-dock .command {
  border-radius: 999px !important; background: var(--sp-verre) !important; -webkit-backdrop-filter: var(--sp-fx); backdrop-filter: var(--sp-fx);
  box-shadow: var(--sp-arete), var(--sp-ombre) !important; border: 0 !important;
}
html.rt.sp #app .command::before, html.rt.sp #app .command::after { display: none !important; }
html.rt.sp #app .command:focus-within { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8), var(--sp-ombre) !important; }
html.rt.sp #app .command__input { font-family: var(--sp-ui) !important; color: #fff !important; }
html.rt.sp #app .command__input::placeholder { color: var(--sp-t3) !important; }
html.rt.sp #app .command__aux { background: none !important; box-shadow: none !important; border: 0 !important; color: var(--sp-t2) !important; }
html.rt.sp #app .command__send { background: #fff !important; color: #14151a !important; box-shadow: none !important; border: 0 !important; font-family: var(--sp-ui) !important; text-shadow: none; }
html.rt.sp #app .command__send:hover { background: #ececec !important; }
html.rt.sp #app .command__send i { color: inherit !important; background: none !important; }
/* Repère de section (spatial.js) : « 03 / 14 » et deux flèches, en bas à droite. */
.sp-pager { display: none; }
html.rt.sp #app .sp-pager {
  position: fixed; z-index: 40; right: 22px; bottom: 26px; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--sp-verre); -webkit-backdrop-filter: var(--sp-fx); backdrop-filter: var(--sp-fx); box-shadow: var(--sp-arete), var(--sp-ombre);
}
html.rt.sp #app .sp-pager output { min-width: 78px; text-align: center; font: 500 13px/1 var(--sp-mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: #fff; }
html.rt.sp #app .sp-pager button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background .16s; }
html.rt.sp #app .sp-pager button:hover { background: var(--sp-pastille); }
html.rt.sp #app .sp-pager button:disabled { opacity: .3; cursor: default; }
html.rt.sp #app .sp-pager svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 9. Apparitions : fenêtres qui coulissent, éléments l'un après l'autre (jamais de flou animé) ---------- */
html.rt.sp #app #stage[data-sp-dir="1"] { --sp-from: 54px; --sp-to: -40px; }
html.rt.sp #app #stage[data-sp-dir="-1"] { --sp-from: -54px; --sp-to: 40px; }
html.rt.sp #app #stage.sp-in :is(.vhead, .vm-insp, .vh-col, .cv-fil, .cv-sessions), html.rt.sp #app #stage.sp-in #view::before { animation: sp-entre .28s var(--sp-e) both; }
html.rt.sp #app #stage.sp-in :is(.vhead, .vh-col--l, .cv-sessions) { animation-delay: 55ms; }
html.rt.sp #app #stage.sp-in :is(.vm-insp, .vh-col--r) { animation-delay: 110ms; }
@keyframes sp-entre { from { opacity: 0; translate: var(--sp-from, 0px) 8px; scale: .98; } }
html.rt.sp #app #stage.sp-out #view > *, html.rt.sp #app #stage.sp-out #view::before, html.rt.sp #app #stage.sp-out :is(.vm-insp, .vm-sheet, .vh-col, .vh-center, .cv-fil, .cv-sessions) { animation: sp-part .13s ease-in both !important; }
@keyframes sp-part { to { opacity: 0; translate: var(--sp-to, 0px) 0; } }
/* Les tuiles de la nouvelle page arrivent l'une après l'autre (rang --hud-i posé par app.js, entreeHUD). */
html.rt.sp #app .view.hud-entree [data-tilt][style*="--hud-i"] { animation: sp-glisse .26s var(--sp-e) both !important; animation-delay: calc(150ms + var(--hud-i) * 34ms) !important; }
@keyframes sp-glisse { from { opacity: 0; translate: 0 12px; } }

/* ---------- 10. Écrans moyens, téléphone, mouvement réduit ---------- */
@media (max-width: 1099px) {
  html.rt.sp #app .sp-pager { display: none; }
  html.rt.sp body #env::before { --t: 80vw; }
  html.rt.sp #app #view > .vhead, html.rt.sp #app .vh-col { border-radius: 28px; background: var(--sp-verre) !important; -webkit-backdrop-filter: var(--sp-fx); backdrop-filter: var(--sp-fx); box-shadow: var(--sp-arete), var(--sp-ombre) !important; border: 0 !important; }
  html.rt.sp #app #view > .vhead { padding: 20px !important; }
  html.rt.sp #app .vh-col { padding: 12px !important; }
  /* Sous 1100 px, le contenu d'une page n'a pas de vitre commune derrière lui : ses cartes deviennent sombres et
     presque opaques (sans flou, léger pour un téléphone), et les intertitres posés sur la photo reçoivent une ombre. */
  html.rt.sp #app { --sp-fume: rgba(20, 22, 28, .76); --sp-fume-h: rgba(34, 36, 44, .82); }
  html.rt.sp #app #view :is(.section-title, .vm-group, .cv-jour) { text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .85); }
  html.rt.sp #app #view .vm-insp { border-radius: 24px; background: var(--sp-fume) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.rt.sp body #env::before { transition: none; animation: none !important; }
  html.rt.sp #app #stage :is(.vhead, .vm-insp, .vh-col, .cv-fil, .cv-sessions), html.rt.sp #app #stage #view::before, html.rt.sp #app #stage #view > * { animation: none !important; }
}
html.no-motion.sp body #env::before { transition: none; animation: none !important; }
html.no-motion.sp #app #stage :is(.vhead, .vm-insp, .vh-col, .cv-fil, .cv-sessions), html.no-motion.sp #app #stage #view::before, html.no-motion.sp #app #stage #view > * { animation: none !important; }

/* ---------- 11. Corrections du contrôle indépendant (10/10/2026, verdict « refusé en l'état ») ---------- */
/* Bloquant 1. Missions, Journal, Équipe : pages.css fixe à 120 px la hauteur du ::before de la vue sur ces « routes
   pilotes ». La vitre centrale ne couvrait donc pas le contenu, qui reposait sur la photo (contrastes jusqu'à 1,3:1). */
html.rt.sp body #app #stage #view::before { height: auto !important; width: auto !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; }
/* Bloquant 3. Filtres : ils partaient dans une seconde colonne hors de la fenêtre de gauche, leur menu était coupé par
   elle (défilement interne) ou passait derrière la liste (la fenêtre crée son propre plan). */
@media (min-width: 1100px) {
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view > .vhead { flex-wrap: nowrap !important; max-height: none !important; overflow: visible !important; z-index: 5; }
  html.rt.sp #app #stage:not([data-page="jarvis"]):not([data-page="home"]):not([data-page="chat"]) #view > .vhead > * { flex: 0 0 auto !important; width: auto; max-width: 100%; }
}
html.rt.sp #app #view > .vhead { position: relative; z-index: 5; }
/* Important 4. Barre de commande et menu : le flou était annulé (jeton mis à none d'un côté, découpe héritée de
   hud-premium.css de l'autre), le contenu défilait net au travers. */
html.rt.sp #app .command-dock .command { -webkit-backdrop-filter: var(--sp-fx) !important; backdrop-filter: var(--sp-fx) !important; }
html.rt.sp #app :is(.rail, .rail__nav) { clip-path: none !important; }
/* Important 6. Mission ouverte : le titre passait sur quatre lignes à côté de sa pastille. */
html.rt.sp #app .vm-insp .dossier__head { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
/* Important 7. Couleurs de statut et texte discret plus clairs : rouge, orange et heures passaient sous 4,5:1 sur le verre. */
html.sp { --sp-t3: rgba(255, 255, 255, .74); --sp-rouge: #ff948b; --sp-vert: #62e58c; }
html.rt.sp #app .badge--warning, html.rt.sp #app .badge--pending { color: #ffc46b !important; }
/* Finitions : anciens voiles de grille et de balayage, repère qui recouvrait un lien sous 1280 px. */
html.rt.sp body::before, html.rt.sp body::after, html.rt.sp #app #stage::before { display: none !important; }
@media (max-width: 1279px) { html.rt.sp #app .sp-pager { display: none; } }
@media (max-width: 1099px) {
  html.rt.sp #app #stage #view::before { display: none !important; }
  /* Important 8. Cibles tactiles : 44 px au moins. */
  html.rt.sp #app .rail__nav .rail__item { min-height: 44px; }
  html.rt.sp #app :is(.iconbtn, .command__aux) { min-width: 44px; min-height: 44px; }
  html.rt.sp #app #view :is(.btn, .vbtn, .dd__btn, .chip) { min-height: 44px; }
}