/* ============================================================
   JARVIS : « Matrice de points » (Claude Code, 09/10/2026)
   Alexandre, avec une référence de tableau de bord à cartes noires mates et caractères à points lumineux :
   « je veux que tu appliques ce design à JARVIS, en mode HUD Iron Man ».
   Ce que la référence impose : cartes noires mates numérotées, UNE valeur vedette par carte en caractères à points
   (police Doto, déjà chargée pour la cinématique « Visière »), petites étiquettes en capitales, graphiques dessinés
   en points, un seul accent (rouge-orangé). Ce qui reste du HUD Iron Man : le réacteur au centre (redessiné en points),
   le cockpit à deux colonnes, la vue en survol, le cadre du casque.
   Chargée APRÈS verre.css : elle garde sa mise en page (colonnes, paliers de hauteur, liens) et ne change que la matière.
   Plus aucun flou d'arrière-plan : les cartes sont opaques (moins de travail pour un Mac de 8 Go).
   1. Jetons  2. Caractères à points  3. Cartes de l'accueil  4. Briques (stats, pastilles, anneau, colonnes de points)
   5. Réacteur en points  6. Pages  7. Téléphone, mouvement réduit
   ============================================================ */

/* ---------- 1. Jetons ---------- */
/* Accent : le rouge-orangé de la référence (Alexandre, 09/10 : « mets le rouge de la référence »), relevé sur son image
   (teinte moyenne #ee3f17, zones vives #fa370a). Il remplace l'orange #ff8a2c dans toute l'application, le bandeau voix
   et le cadre du casque ; les cinématiques de connexion gardent l'orange de leurs films rendus dans After Effects.
   Texte posé sur l'accent : toujours l'encre sombre (le blanc n'y atteint pas le contraste de lecture). */
:root {
  --acc: 248, 66, 26; --acc-vif: #f8421a; --acc-haut: #ff5c36; --acc-bas: #e0340f;
  --acc-haut-s: #ff6e4a; --acc-vif-s: #fb5029; --acc-bas-s: #e63d18;
  --acc-clair: #ff8d70; --acc-pale: #ffb5a1; --acc-doux: 255, 112, 76; --acc-pale-rgb: 255, 184, 164;
  --or: 243, 241, 236; /* plus d'or : filets et halos d'information en blanc chaud */
}
#app {
  --m-point: #f3f1ec;      /* point allumé */
  --m-gris: #8f9299;       /* étiquette, point secondaire */
  --m-eteint: #3c3d43;     /* point éteint */
  --m-carte: linear-gradient(180deg, #1d1d20, #151517);
  --m-bord: inset 0 1px 0 rgba(255, 255, 255, .075), inset 0 0 0 1px rgba(255, 255, 255, .055);
  --m-ombre: 0 26px 50px -26px rgba(0, 0, 0, .9), 0 2px 8px rgba(0, 0, 0, .4);
  --m-pointille: radial-gradient(circle, rgba(255, 255, 255, .26) .9px, transparent 1.3px);
  --font-points: "Doto", "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}
/* Avec le design actif : les trois verres deviennent une seule matière mate, l'or d'information devient blanc chaud
   (la référence n'a que blanc, gris et un accent : le rouge-orangé ci-dessus, couleur de l'action et de la validation). */
html.rt #app {
  --v-voile: var(--m-carte); --v-voile-fx: none;
  --v-plaque: var(--m-carte); --v-plaque-fx: none;
  --v-pastille: linear-gradient(180deg, #26262a, #1b1b1e); --v-pastille-fx: none;
  --v-fume: linear-gradient(180deg, #202023, #19191c);
  --v-ombre-plaque: var(--m-bord), var(--m-ombre);
  --v-ombre-pastille: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 14px 30px -16px rgba(0, 0, 0, .8);
  --v-ombre-fume: var(--m-bord), 0 14px 30px -18px rgba(0, 0, 0, .7);
  --v-gold: var(--m-point);
  --v-fail: var(--acc-vif); --jarvis-danger: var(--acc-vif); /* un seul rouge, comme la référence : l'échec se distingue par sa forme (carré, croix) et son libellé */
  --v-ok: #dcdad5; --jarvis-success: #dcdad5; /* « réussi » : blanc chaud, porté par une coche ou une forme, plus de vert menthe */
  --jarvis-primary: #f3f1ec; --jarvis-primary-strong: #ffffff;
  --jarvis-primary-soft: rgba(243, 241, 236, .1); --jarvis-primary-glow: rgba(243, 241, 236, .2);
  --jarvis-border-active: rgba(243, 241, 236, .36);
}
/* Le liseré de lumière qui suivait le curseur (verre) devient un simple fil clair en haut de carte (matière mate). */
html.rt #app :is([data-light], .panel)::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 24%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .04));
}

/* ---------- 2. Caractères à points ---------- */
/* Réservés aux valeurs vedettes et aux titres (22 px et plus) : en dessous, les points ne se lisent plus. */
#app .mx-num { font-family: var(--font-points); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: .03em; color: var(--m-point); }
#app .mx-num--xl { display: block; margin: 10px 0 0; font-size: 36px; text-transform: uppercase; }
#app .mx-num.is-hot, #app .is-hot > .mx-num { color: var(--v-orange); }
#app .mx-num.is-bad, #app .is-bad > .mx-num { color: var(--v-fail); }
#app .mx-lab { font: 500 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--m-gris); }
#app .mx-idx { font: 600 12px/1 var(--font-mono); letter-spacing: .1em; color: var(--m-point); } /* trop petit pour les caractères à points */
#app .vh-micro--hot .mx-idx { color: var(--v-orange); }
#app .vh-state__t { font: 800 30px/1.1 var(--font-points); letter-spacing: .05em; text-transform: uppercase; }
#app .nv__ok { font-family: var(--font-points); font-weight: 800; letter-spacing: .04em; }
/* Décision en attente : titre blanc précédé d'une pastille à l'accent, comme « ● REC » sur la référence. Le rouge
   franc sur la vue drone ne dépassait pas 2,7:1 de contraste (QA du 09/10) ; le blanc y dépasse 10:1. */
#app .vh--gate .vh-state__t { color: var(--v-white); }
#app .vh--gate .vh-state__t::before { content: ""; display: inline-block; width: .36em; height: .36em; margin-right: .42em; border-radius: 50%; vertical-align: .14em; background: var(--acc-vif); box-shadow: 0 0 12px rgba(var(--acc), .75); }

/* « 0 » seul : le zéro de Doto est dessiné en pointe et se lit comme un losange (aucune variante dans la police).
   La classe mx-zero (views.js) affiche à sa place le « O » de la police, celui du zéro de la référence ; le texte du
   document reste « 0 ». --pts = taille des caractères à points du contexte (la taille de l'élément passe à 0). */
#app .mx-num.mx-zero, html.rt #app .vstat dd.mx-zero { font-size: 0; }
#app .mx-num.mx-zero::after, html.rt #app .vstat dd.mx-zero::after { content: "O"; content: "O" / ""; font-size: var(--pts, 32px); }
#app .mx-stats .mx-num { --pts: 25px; }
#app .mx-num--xl { --pts: 36px; }
#app .mx-anneau__c .mx-num { --pts: 26px; }

/* ---------- 3. Cartes de l'accueil ---------- */
/* Une seule épaisseur : plus de cadre translucide autour du panneau, plus de flou. */
#app .vh-orn { padding: 0; border-radius: 18px; background: none; box-shadow: none; }
#app .vh-orn__core { border-radius: 18px; background: var(--m-carte); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--m-bord), var(--m-ombre); }
#app .vh-micro--titre { gap: 9px; font: 500 12px/1.2 var(--font-mono); letter-spacing: .14em; color: #d9d7d2; }
#app .vh-micro--titre::after { content: none; }
#app .vh-orn__title { margin-top: 12px; }
#app .vh-orn__meta { font-size: 14px; }
/* Pied de carte : séparé par une ligne de points. */
#app .vh--cockpit .vh-orn__foot { margin-top: 12px; padding-top: 12px; background: var(--m-pointille) 0 0 / 6px 3px repeat-x; }
#app .vh--cockpit .vh-orn__core > .mx-stats + .vh-orn__foot, #app .vh--cockpit .vh-orn__core > .vh-team__lead + .vh-orn__foot { margin-top: 12px; }
/* Décision en attente : un fil net à la couleur d'accent au lieu du halo de verre. */
#app .vh-orn--dec.is-gate::after { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 44px -18px rgba(var(--acc), .4); }
#app .vh-orn--dec.is-gate .vh-orn__core::after { background: none; box-shadow: inset 0 0 0 1px rgba(var(--acc), .62); }
/* La carte de décision de l'accueil reprend la classe .approval (styles partagés avec la page Validations) : pages.css lui
   ajoutait 20 px de marge à gauche et à droite hors accueil cinématique (titre et boutons décalés au téléphone). */
body #app .vh-dec > * { margin-left: 0; margin-right: 0; }
/* État en haut de carte (« Connecté ») : pastille blanche, rouge si le serveur ne répond pas. */
#app .mx-etat { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--m-gris); white-space: nowrap; }
#app .mx-etat i { width: 7px; height: 7px; border-radius: 50%; background: var(--m-point); }
#app .mx-etat.is-bad { color: var(--v-fail); }
#app .mx-etat.is-bad i { background: var(--v-fail); }
/* Étiquettes : pilules à filet, comme les pastilles « +18 % » de la référence. */
#app .vh-tag { height: 24px; padding: 0 10px; color: #dedcd7; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
#app .vh-tag--hot { color: var(--v-orange); background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--acc), .7); }
#app .vh-tag--lien:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
#app .vh-memtypes .vh-tag b { color: var(--m-point); }
#app .vh-memlist li::before { background: var(--m-point); }
/* Boutons secondaires : pilules à filet (le bouton d'action reste plein, à la couleur d'accent). */
#app .vh--cockpit .vbtn:not(.vbtn--primary, .vbtn--link) { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; }
#app .vh--cockpit .vbtn:not(.vbtn--primary, .vbtn--link):hover { background: rgba(255, 255, 255, .07) !important; }
/* Journal : rond blanc = réussi (le losange « à valider » et le carré « échec » de verre.css gardent leur forme). */
#app .vh-log:not(.vh-log--warning, .vh-log--danger) i { background: var(--m-point); }
#app .vh-team__lead { margin-top: 12px; }
#app .vh-log--warning i, #app .vh-log--danger i { width: 9px; height: 9px; } /* losange et carré de la même couleur : plus grands pour se distinguer */
#app .mx-tete { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }

/* ---------- 4. Briques ---------- */
/* Rangée de mesures séparées par un filet (« STEPS | TOOLS | MEMORY » de la référence). */
#app .mx-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 14px 0 0; }
#app .mx-stats > div { position: relative; min-width: 0; padding: 0 12px; border-left: 1px solid rgba(255, 255, 255, .1); }
#app .mx-stats > div:first-child { padding-left: 0; border-left: 0; }
#app .mx-stats dt { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--m-gris); white-space: nowrap; }
#app .mx-stats dd { display: flex; align-items: baseline; gap: 4px; margin: 7px 0 0; }
#app .mx-stats .mx-num { font-size: 25px; }
#app .mx-stats small { font: 500 12px/1 var(--font-mono); color: var(--m-gris); }
/* Mesure cliquable : la zone couvre toute la case. */
#app .mx-lien { all: unset; display: inline-flex; align-items: baseline; gap: 5px; cursor: pointer; }
#app .mx-lien::after { content: ""; position: absolute; inset: -6px 0; border-radius: 8px; }
#app .mx-lien i { font: 500 14px/1 var(--font-ui); font-style: normal; color: var(--m-gris); transition: translate 160ms var(--v-move), color 160ms var(--v-move); }
#app .mx-lien:hover i { translate: 2px 0; color: var(--m-point); }
#app .mx-lien.is-hot .mx-num, #app .mx-lien.is-hot i { color: var(--v-orange); }
#app .mx-lien:focus-visible { outline: 2px solid var(--m-point); outline-offset: 4px; border-radius: 4px; }
/* Ligne à deux bouts : valeur vedette à gauche, lien ou bouton à droite (remplace le pied de carte, gain de hauteur). */
#app .mx-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; }
#app .vh-orn--mem .mx-ligne { margin-top: 4px; }
#app .mx-ligne > .mx-stats, #app .mx-ligne > .mx-duo { margin-top: 0; }
#app .mx-ligne .mx-num--xl { margin-top: 0; }
/* Lien discret vers la page complète (« Toute l'équipe › »). */
#app .mx-voir { all: unset; display: inline-flex; align-items: center; gap: 5px; margin: -6px 0; padding: 6px 0; font: 500 12px/1.2 var(--font-ui); color: var(--m-gris); white-space: nowrap; cursor: pointer; transition: color 160ms var(--v-move); }
#app .mx-voir i { font-style: normal; transition: translate 160ms var(--v-move); }
#app .mx-voir:hover { color: var(--m-point); }
#app .mx-voir:hover i { translate: 2px 0; }
#app .mx-voir:focus-visible { outline: 2px solid var(--m-point); outline-offset: 4px; border-radius: 4px; }
#app .mx-duo { display: flex; align-items: baseline; gap: 10px; margin: 0; }
#app .mx-duo .mx-num--xl { margin-top: 10px; }
#app .mx-region { margin-top: 12px; }
/* Étapes de la mission : pastilles reliées, une forme par état (rond coché = faite, anneau à point = en cours,
   losange = à valider, carré à croix = en échec, anneau gris = à venir). */
#app .mx-pas { display: flex; align-items: center; margin: 14px 0 0; padding: 0; list-style: none; }
#app .mx-pas__e { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
#app .mx-pas__e:last-child { flex: 0 0 auto; }
#app .mx-pas__e::after { content: ""; flex: 1; height: 1px; margin: 0 5px; background: rgba(255, 255, 255, .22); }
#app .mx-pas__e:last-child::after { content: none; }
#app .mx-pas__e i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; color: #1a0d03; box-shadow: inset 0 0 0 1.5px var(--m-eteint); }
#app .mx-pas__e--done i { background: var(--v-orange); box-shadow: none; }
#app .mx-pas__e--done::after { background: rgba(var(--acc), .6); }
#app .mx-pas__e--run i { box-shadow: inset 0 0 0 1.5px var(--m-point); }
#app .mx-pas__e--run i::before, #app .mx-pas__e--gate i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m-point); }
#app .mx-pas__e--gate i { width: 17px; height: 17px; margin: 2.5px; border-radius: 3px; rotate: 45deg; box-shadow: inset 0 0 0 2px var(--v-orange); }
#app .mx-pas__e--gate i::before { width: 7px; height: 7px; border-radius: 1px; background: var(--v-orange); }
#app .mx-pas__e--fail i { border-radius: 4px; background: var(--v-fail); box-shadow: none; } /* carré à croix (encre sombre, même contraste que la coche) */
#app .mx-rangee { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 0; }
#app .mx-rangee i { width: 7px; height: 7px; border-radius: 50%; background: var(--m-eteint); }
#app .mx-rangee i.is-fait { background: var(--m-point); }
#app .mx-etape { display: grid; gap: 4px; margin: 12px 0 0; font: 400 14px/1.35 var(--font-ui); color: var(--v-white); }
/* Équipe : anneau d'un point par agent et légende (formes distinctes, jamais la couleur seule). */
#app .mx-equipe { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; max-width: 440px; margin-top: 10px; }
#app .mx-anneau { position: relative; width: 96px; aspect-ratio: 1; }
#app .mx-anneau__svg { display: block; width: 100%; height: 100%; }
#app .mx-anneau__fond { fill: none; stroke: var(--m-eteint); stroke-width: 1.7; stroke-dasharray: .1 4.3; stroke-linecap: round; }
#app .mx-a--available { fill: var(--m-point); }
#app .mx-a--running { fill: none; stroke: var(--m-point); stroke-width: 1.4; }
#app .mx-a--awaiting_approval { fill: var(--v-orange); }
#app .mx-a--blocked { fill: var(--v-fail); }
#app .mx-anneau__c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 3px; }
#app .mx-anneau__c .mx-num { font-size: 26px; }
#app .mx-anneau__c .mx-lab { font-size: 10px; }
#app .mx-legende { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#app .mx-legende li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--m-gris); }
#app .mx-legende .mx-num { font: 600 14px/1 var(--font-mono); letter-spacing: 0; } /* en points, le « 0 » y ressemblait au losange « en attente » */
#app .mx-legende li.is-hot { color: var(--v-hot); }
#app .mx-legende__lien { all: unset; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(var(--acc-doux), .4); text-underline-offset: 3px; }
#app .mx-legende__lien:hover { text-decoration-color: currentColor; }
#app .mx-legende__lien:focus-visible { outline: 2px solid var(--m-point); outline-offset: 3px; border-radius: 3px; }
/* Initiales : pastilles mates, chacune ouvre le journal de son agent ; l'état est redit par le contour (et par la légende). */
#app .mx-initiales { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }
#app .mx-initiales .vh-stack__a { width: 30px; height: 30px; margin: 0; font: 600 11px/1 var(--font-mono); color: var(--m-point); background: linear-gradient(180deg, #2a2a2e, #1c1c1f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
#app .mx-initiales .vh-stack__a { position: relative; }
#app .mx-initiales .vh-stack__a--running { box-shadow: inset 0 0 0 1.5px var(--m-point); }
#app .mx-initiales :is(.vh-stack__a--awaiting_approval, .vh-stack__a--blocked) { color: var(--acc-clair); box-shadow: inset 0 0 0 1.5px var(--acc-vif); }
/* État redit par un repère en coin, aux mêmes formes que la légende (anneau = en mission, losange = attend, carré = bloqué) :
   « attend » et « bloqué » partagent le rouge, jamais la forme. */
#app .mx-initiales :is(.vh-stack__a--running, .vh-stack__a--awaiting_approval, .vh-stack__a--blocked)::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; box-sizing: border-box; }
#app .mx-initiales .vh-stack__a--running::after { border-radius: 50%; background: #17171a; border: 1.5px solid var(--m-point); }
#app .mx-initiales .vh-stack__a--awaiting_approval::after { border-radius: 1px; rotate: 45deg; background: var(--acc-vif); box-shadow: 0 0 0 2px #17171a; }
#app .mx-initiales .vh-stack__a--blocked::after { border-radius: 1px; background: var(--acc-vif); box-shadow: 0 0 0 2px #17171a; }
#app .mx-initiales .vh-stack__a--more { color: var(--m-gris); }
#app .mx-initiales + .vh-team__lead { margin-top: 10px; }
#app .mx-m { justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--m-point); }
#app .mx-m--running { background: none; box-shadow: inset 0 0 0 1.4px var(--m-point); }
#app .mx-m--awaiting_approval { border-radius: 1px; rotate: 45deg; background: var(--v-orange); }
#app .mx-m--blocked { border-radius: 1px; background: var(--v-fail); }
/* « Missions · 7 jours » : carte mate, colonnes de points (rond plein = terminée, carré rouge = en échec, anneau = autre). */
#app .vh-act { border-radius: 16px; background: var(--m-carte); box-shadow: var(--m-bord), var(--m-ombre); }
#app .vh-act__zone { height: 34px; } /* = ACT_POINTS (views.js) × 5 px + écarts */
#app .vh-act__barre { align-items: center; width: auto; min-height: 0; overflow: visible; border-radius: 0; }
#app .mx-pt { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--m-point); }
#app .mx-pt--ko { border-radius: 1px; background: var(--v-fail); }
#app .mx-pt--autre { background: none; box-shadow: inset 0 0 0 1.3px var(--m-gris); }
#app .vh-act__barre.is-vide { width: 3px; height: 3px; border: 0; border-radius: 50%; background: var(--m-eteint); }
#app .vh-act__m--ok { background: var(--m-point); }
#app .vh-act__m--autre { width: 8px; height: 8px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.4px var(--m-gris); }

/* ---------- 5. Réacteur en points ---------- */
/* Même géométrie (noyau.js) : cercles, graduations, anneau segmenté et bobines sont tracés en points ronds.
   La jauge de progression et le verrou gardent leur trait plein : ce sont eux qui portent l'information. */
#app .nv-c { stroke-width: 1.8; stroke-opacity: .5; stroke-dasharray: .1 5.2; stroke-linecap: round; }
#app .nv-tk { stroke-width: 2; stroke-opacity: .5; stroke-dasharray: .1 4.4; stroke-linecap: round; }
#app .nv-tk--l { stroke-opacity: .95; }
#app .nv-segp { stroke-width: 3; stroke-opacity: .42; stroke-dasharray: .1 6.4; stroke-linecap: round; }
#app .nv-segp--hi { stroke-opacity: .9; }
#app .nv-segt { stroke-dasharray: .1 4.6; stroke-linecap: round; }
#app .nv-gtrack { stroke-width: 1.8; stroke-opacity: .34; stroke-dasharray: .1 5; stroke-linecap: round; }
#app .nv-coil { fill: none; stroke-width: 1.7; stroke-opacity: .5; stroke-dasharray: .1 4.2; stroke-linecap: round; }
#app .nv-wind { stroke-width: 1.9; stroke-dasharray: .1 4.5; stroke-linecap: round; }

/* ---------- 6. Pages ---------- */
/* Titres de page et grands chiffres en caractères à points ; le reste suit les jetons mats de la section 1. */
html.rt #app .vhead__title { font-family: var(--font-points); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
html.rt #app .vstat dd { font: 800 32px/1 var(--font-points); letter-spacing: .03em; }
html.rt #app .vstat--primary dd { color: var(--m-point); }
html.rt #app .chip { background: transparent; }
/* Titre de page mis au focus après une navigation au clavier : contour blanc (il était bleuté). */
html.rt #app :is(.vhead__title, .cv-titre):focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 6px; border-radius: 6px; }
/* Restes ambrés des feuilles plus anciennes (jarvis.css, pages.css) : avertissements et décisions à l'accent. */
html.rt #app .badge--warning { border-color: rgba(var(--acc), .45); }
html.rt #app .mission-decision--high { border-color: rgba(var(--acc), .3); }
html.rt #app .mission-decision__eyebrow { color: var(--acc-clair); }
/* Restes de vert et de cyan des feuilles plus anciennes : filets et pastilles en blanc chaud. */
html.rt #app :is(.badge--success, .badge--primary) { border-color: rgba(255, 255, 255, .3); }
html.rt #app .vm-pill--success { color: #dcdad5; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
html.rt #app .step--success::before { background: var(--m-point); border-color: var(--m-point); box-shadow: none; }
html.rt #app .tool--success .tool__icon::after { background: var(--m-point); box-shadow: none; }
html.rt #app .tool__icon { border-color: rgba(255, 255, 255, .2); }
html.rt #app .sysbar__mark { background-image: radial-gradient(circle, var(--m-point) 0 2px, transparent 2.6px); }
html.rt .helmet__sweep { filter: grayscale(1); }
html.rt .pageboot__route { color: var(--m-point) !important; border-color: rgba(255, 255, 255, .3) !important; }
html.rt .pageboot__inner { border-color: rgba(255, 255, 255, .2) !important; }
/* Rouge franc trop sombre pour un petit texte posé sur le fond de page (4,5:1) : teinte claire de l'accent (7:1). */
html.rt #app :is(.badge--danger, .mission-actions__subtitle, .tone-danger) { color: var(--acc-clair); }
html.rt #app .badge--danger { border-color: rgba(var(--acc), .55); }
/* verre.css impose le rouge franc à .tone-danger en !important (« Irréversible », 14 px : 4,5:1) : teinte claire. */
html.rt #app .tone-danger { color: var(--acc-clair) !important; }
/* Mémoire : plus de couleur par catégorie (violet, vert, cyan), le nom du type suffit. */
html.rt #app :is(.mem--primary, .mem--mind, .mem--success, .mem--warning) { --kind: var(--m-point); border-left-color: rgba(255, 255, 255, .3); }
/* Derniers halos colorés : filet de la barre système, cadre du casque. */
html.rt #app .sysbar::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), rgba(var(--acc), .55), rgba(255, 255, 255, .26), transparent); }
html.rt .helmet__edge--strut { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .22)); }
html.rt .helmet__seg--orange { filter: drop-shadow(0 0 4px rgba(var(--acc), .6)); }
/* Avatar : pastille mate à lettre blanche (plus de disque doré). */
html.rt #app .rail__avatar { color: var(--m-point); background: linear-gradient(180deg, #2a2a2e, #1c1c1f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

/* ---------- 6 bis. Tuiles 3D, casque partout, onglet Conversations (Alexandre, 09/10/2026) ---------- */
/* Tuiles 3D : app.js pose data-tilt sur chaque carte (tuiles3D), fx.bindTilt l'incline vers le curseur.
   Ici : reflet blanc (il était cyan), calque graphique seulement pendant le mouvement, ombre plus profonde sous la tuile.
   Rien ne bouge en mouvement réduit ni au doigt (fx.js). */
#app [data-tilt] { will-change: auto; }
#app [data-tilt].is-tilting { will-change: transform; z-index: 2; }
#app [data-tilt]::before { z-index: 4; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .075), transparent 45%); }
#app .vh-orn.is-tilting .vh-orn__core { box-shadow: var(--m-bord), 0 36px 64px -26px rgba(0, 0, 0, .95), 0 4px 12px rgba(0, 0, 0, .45); }
html.no-motion #app [data-tilt] { transform: none !important; }

/* Casque : le cadre du cockpit entoure maintenant toutes les pages (« que l'on soit dans le casque d'Iron Man sur
   l'intégralité du site »), ordinateur seulement ; le bas des pages garde une marge pour ne pas passer sous le cadre. */
@media (min-width: 981px) {
  html.rt body #helmet { display: block !important; opacity: 1; } /* pages.css le masque par son identifiant hors de l'accueil */
  html.rt #app #stage:not([data-page="jarvis"]):not([data-page="home"]) #view { padding-bottom: 96px; }
}
html.rt .helmet__edge { stroke: rgba(var(--or), .42); }
html.rt .helmet__edge--inner { stroke: rgba(var(--or), .14); }
html.rt .helmet__seg { stroke: rgba(var(--or), .7); }
html.rt .helmet__seg--orange { stroke: var(--acc-vif); }
html.rt .helmet__led { background: rgb(var(--or)); box-shadow: 0 0 10px rgba(var(--or), .7); }
html.rt .helmet__led--orange { background: var(--acc-vif); box-shadow: 0 0 10px var(--acc-vif); }

/* Menu : 14 entrées depuis l'ajout de « Conversations ». Resserré jusqu'à 1 700 px pour tenir sur une ligne à 1 440 px
   (verre.css ne le resserrait que sous 1 400 px). */
@media (min-width: 981px) and (max-width: 1700px) {
  html.rt #app .rail__nav .rail__item { padding: 0 8px !important; font-size: 13px !important; }
  html.rt #app .railgroup { margin-right: 2px !important; padding-right: 2px !important; }
}
@media (min-width: 981px) and (max-width: 1320px) {
  html.rt #app .rail__nav .rail__item { padding: 0 6px !important; font-size: 12.5px !important; }
}

/* Onglet Conversations : fil au centre, saisie en bas, sessions à droite (comme Claude ou ChatGPT), en tuiles HUD.
   --cv-h, --cv-g, --cv-l sont mesurées par app.js (placerConversation). */
#app .cv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 18px; box-sizing: border-box; height: var(--cv-h, 70vh); max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4.5vw, 84px); }
#app .cv-fil { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
#app .cv-tete { padding: 2px 4px 12px; }
#app .cv-titre { margin: 0; font: 800 26px/1.1 var(--font-points); letter-spacing: .04em; text-transform: uppercase; color: var(--m-point); }
#app .cv-sous { margin: 6px 0 0; font: 400 14px/1.4 var(--font-ui); color: var(--m-gris); }
#app .cv-retour { margin-bottom: 8px; font-size: 14px; }
#app .cv-messages { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 18px 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
#app .cv-messages:focus-visible { outline: 2px solid var(--m-point); outline-offset: 2px; border-radius: 12px; }
#app .cv-saisie { height: 72px; } /* place de la barre de saisie, fixée par-dessus */
#app .cv-msg { flex: none; box-sizing: border-box; max-width: min(78%, 720px); padding: 12px 16px 14px; border-radius: 16px; background: var(--m-carte); box-shadow: var(--m-bord), 0 14px 30px -18px rgba(0, 0, 0, .8); }
#app .cv-msg--assistant { align-self: flex-start; }
#app .cv-msg--user { align-self: flex-end; background: linear-gradient(180deg, #2b2b2f, #202024); }
#app .cv-msg__tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#app .cv-msg__qui { font: 500 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--m-gris); }
#app .cv-msg--assistant .cv-msg__qui::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--acc-vif); vertical-align: 1px; }
#app .cv-msg__tete time { font-size: 12px; color: var(--m-gris); }
#app .cv-msg__texte { margin-top: 8px; font: 400 15px/1.6 var(--font-ui); color: var(--v-white); white-space: pre-wrap; overflow-wrap: anywhere; }
#app .cv-msg__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#app .cv-msg__actions .vbtn:not(.vbtn--primary) { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important; }
#app .cv-msg.is-pending { opacity: .82; }
#app .cv-msg.is-error { box-shadow: inset 0 0 0 1px rgba(var(--acc), .6); }
#app .cv-msg.is-error .cv-msg__texte { color: var(--acc-clair); }
#app .cv-jour { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--m-gris); }
#app .cv-jour::before, #app .cv-jour::after { content: ""; flex: 1; height: 3px; background: var(--m-pointille) 0 50% / 6px 3px repeat-x; }
#app .cv-vide { margin: auto; max-width: 440px; text-align: center; }
#app .cv-vide p { margin: 14px 0 0; font: 400 15px/1.55 var(--font-ui); color: var(--m-gris); }
#app .cv-sessions { display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; margin-bottom: 72px; padding: 14px 12px 12px; border-radius: 18px; background: var(--m-carte); box-shadow: var(--m-bord), var(--m-ombre); }
#app .cv-sessions__tete { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
#app .cv-sessions__liste { display: grid; align-content: start; gap: 4px; flex: 1; min-height: 0; margin: 12px 0 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
#app .cv-session { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; width: 100%; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background-color 160ms var(--v-move); }
#app .cv-session__t { grid-column: 1; overflow: hidden; font: 500 14px/1.3 var(--font-ui); color: var(--v-white); white-space: nowrap; text-overflow: ellipsis; }
#app .cv-session__m { grid-column: 1; overflow: hidden; font: 400 12px/1.3 var(--font-ui); color: var(--m-gris); white-space: nowrap; text-overflow: ellipsis; }
#app .cv-session .badge { grid-column: 2; grid-row: 1 / span 2; }
#app .cv-session:hover { background: rgba(255, 255, 255, .05); }
#app .cv-session.is-active { background: rgba(255, 255, 255, .08); box-shadow: inset 2px 0 0 var(--acc-vif); }
#app .cv-session:focus-visible { outline: 2px solid var(--m-point); outline-offset: -2px; }
#app .cv-sessions__note { margin: 12px 0 0; padding: 12px 4px 0; font: 400 12px/1.5 var(--font-ui); color: var(--m-gris); background: var(--m-pointille) 0 0 / 6px 3px repeat-x; }
/* Saisie : la commande globale (#commandDock), fixée en bas de la colonne du fil sur ordinateur ; au téléphone elle est
   déjà fixée en bas de l'écran (verre.css). */
@media (min-width: 981px) {
  html.rt #app:has(#stage[data-page="chat"]) .command-dock { position: fixed !important; top: auto !important; bottom: 66px !important; left: var(--cv-g, 24px) !important; right: auto !important; width: var(--cv-l, 640px) !important; margin: 0 !important; padding: 0 !important; }
  html.rt #app:has(#stage[data-page="chat"]) .command-dock .command { width: 100%; max-width: none; }
  html.rt #app #stage[data-page="chat"] #view { padding-bottom: 0; }
}
@media (max-width: 980px) {
  #app .cv { grid-template-columns: minmax(0, 1fr); height: auto; padding: 0; }
  #app .cv-messages { overflow: visible; padding-inline: 0; }
  #app .cv-msg { max-width: 92%; }
  #app .cv-saisie { height: 12px; }
  #app .cv-sessions { margin-bottom: 96px; }
  #app .cv-session { padding: 12px; }
}

/* ---------- 7. Téléphone, mouvement réduit ---------- */
@media (max-width: 980px) {
  /* Les cartes changent d'ordre au téléphone (noyau, décision, équipe…) : les numéros n'y auraient plus de sens. */
  #app .mx-idx { display: none; }
  #app .vh-state__t { font-size: 26px; }
  #app .mx-legende__lien { padding: 14px 0; }
  #app .mx-voir { margin: -14px 0; padding: 14px 0; font-size: 14px; }
  #app .mx-initiales { gap: 8px; }
  #app .mx-initiales .vh-stack__a { width: 44px; height: 44px; font-size: 13px; }
}
@media (min-width: 981px) and (max-height: 780px) {
  #app .vh--cockpit .mx-region { display: none; }
  /* La phrase d'équipe redit la légende et la première initiale : retirée pour que la colonne tienne. */
  #app .vh--cockpit .mx-initiales + .vh-team__lead { display: none; }
}
/* Écrans de 761 à 820 px de haut : réacteur un peu plus petit, « Missions · 7 jours » garde sa place au-dessus. */
@media (min-width: 981px) and (min-height: 761px) and (max-height: 820px) {
  #app .vh--cockpit { --nv: clamp(232px, 37.5vh, 350px); }
}
@media (prefers-reduced-motion: reduce) { #app :is(.mx-lien i, .mx-voir, .mx-voir i) { transition: none; } }
html.no-motion #app :is(.mx-lien i, .mx-voir, .mx-voir i) { transition: none; }
@media (prefers-reduced-motion: reduce) { #app .cv-session { transition: none; } }
html.no-motion #app .cv-session { transition: none; }