/* ============================================================ JARVIS : design « Réacteur, noir absolu » (Claude Code). Choisi par Alexandre le 25/09/2026 pour toute l'application. 1. Thème global, actif quand porte la classe .rt (interrupteur dans Réglages, « jarvis.themeReacteur » = off pour revenir à l'ancien style). 2. Accueil « Réacteur » (.rvh), rendu par views.home(). La transparence des panneaux et la vallée animée sont conservées. ============================================================ */ /* ---------- 1. Jetons ---------- */ html.rt { --font-ui: "Outfit", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --jarvis-bg: #050607; --jarvis-bg-2: #07090b; --jarvis-surface: rgba(10, 14, 18, .42); --jarvis-surface-2: rgba(12, 16, 21, .66); --jarvis-surface-solid: #0b0f13; --jarvis-border: rgba(255, 255, 255, .08); --jarvis-border-strong: rgba(255, 255, 255, .12); --jarvis-border-active: rgba(127, 211, 255, .45); --jarvis-text: #f2f4f6; --jarvis-text-muted: #a3abb5; --jarvis-text-dim: #7a828d; --jarvis-primary: #7fd3ff; --jarvis-primary-strong: #dff5ff; --jarvis-primary-soft: rgba(127, 211, 255, .10); --jarvis-primary-glow: rgba(127, 211, 255, .30); --jarvis-success: #8fdcaa; --jarvis-warning: #e8c36a; --jarvis-danger: #ff6b6b; --jarvis-radius: 18px; --jarvis-radius-sm: 12px; --cin-cyan: #7fd3ff; --cin-cyan-light: #dff5ff; --cin-orange: #ff8a2c; --cin-glass: rgba(10, 14, 18, .42); --cin-line: rgba(255, 255, 255, .10); } /* ---------- Fond : noir absolu, sans trame ni lignes de balayage ---------- */ html.rt body { font-family: var(--font-ui); background: #050607; } html.rt body::after { display: none; } html.rt body::before { opacity: .1; } html.rt .hud-frame { display: none; } html.rt .helmet { display: none !important; } /* Vallée dorée. Accueil : AUCUN voile ajouté, l'ombrage d'origine de cinematic.css s'applique (un voile gris uniforme délavait tout, retour d'Alexandre du 25/09). Pages : la vallée animée reste visible, en couleurs, sous un voile bleu nuit pour la lecture. pages.css la masquait (display:none) ou la désaturait hors accueil. */ html.rt body:not(.cinematic-home-active) #env { display: block !important; opacity: 1 !important; filter: none !important; } html.rt body:not(.cinematic-home-active) { background: #020a10; } html.rt body:not(.cinematic-home-active) .shell { background: transparent !important; } html.rt body:not(.cinematic-home-active) .env__shade { background: radial-gradient(ellipse 90% 80% at 45% 45%, rgba(2, 10, 16, .30), rgba(2, 10, 16, .78) 100%), linear-gradient(180deg, rgba(2, 10, 16, .58), rgba(2, 10, 16, .40)); } /* ---------- Typographie ---------- */ html.rt .mono { font-family: var(--font-mono); } html.rt .vhead__title { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.01em; text-transform: none; } html.rt :is(.panel__title, .section-title, .rvh-panel__title) { font-family: var(--font-ui); letter-spacing: .01em; text-transform: none; } html.rt :is(.panel__eyebrow, .ctx__eyebrow, .focuscard__eyebrow, .homehero__eyebrow) { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--jarvis-text-dim); } /* ---------- Surfaces de verre ---------- */ html.rt :is(.panel, .mcard, .tool, .mem, .pnode, .approval, .empty, .context, .drawer__panel, .agentcard, .focuscard, .quickcard, .homehero, .notice, .dossier, .hp, .card, .boot-welcome-setting, .boot-track) { border: 1px solid rgba(255, 255, 255, .10); border-radius: 18px; clip-path: none; background: rgba(10, 14, 18, .42); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); } html.rt :is(.panel, .mcard, .agentcard, .approval, .dossier)::before { opacity: .5; } html.rt .row { border-radius: 12px; clip-path: none; border-color: rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); } html.rt .ctx { border-radius: 14px; border-color: rgba(255, 255, 255, .08); background: rgba(10, 14, 18, .45); } /* ---------- Coque : barre système, navigation, commande ---------- */ html.rt .sysbar { border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(5, 6, 7, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; } html.rt .rail { border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: rgba(8, 10, 12, .5); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: none; } html.rt .rail__item { border-radius: 12px; font-family: var(--font-ui); letter-spacing: .01em; } html.rt .rail__item.is-active, html.rt .rail__item[aria-current="page"] { background: rgba(127, 211, 255, .10); color: var(--jarvis-primary); box-shadow: none; } html.rt :is(.command, .command-dock .command) { border-radius: 999px; clip-path: none; border-color: rgba(255, 255, 255, .12); background: rgba(10, 14, 18, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } html.rt .mobilebar { border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(5, 6, 7, .7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* ---------- Contrôles ---------- */ html.rt .btn { border-radius: 999px; clip-path: none; font-family: var(--font-ui); font-weight: 500; letter-spacing: 0; text-transform: none; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); } html.rt .btn:hover { border-color: rgba(127, 211, 255, .45); } html.rt .btn--primary { border-color: transparent; background: var(--jarvis-primary); color: #04131b; font-weight: 600; } html.rt .btn--primary:hover { background: var(--jarvis-primary-strong); } html.rt .btn--ghost { background: transparent; } html.rt :is(.input, .dd__btn) { border-radius: 14px; clip-path: none; border-color: rgba(255, 255, 255, .12); background: rgba(10, 14, 18, .55); font-family: var(--font-ui); } html.rt :is(.chip, .badge, .statuspulse) { border-radius: 999px; clip-path: none; } html.rt .progress { border-radius: 999px; overflow: hidden; } html.rt .progress__fill { border-radius: 999px; } /* ============================================================ 2. Accueil « Réacteur » ============================================================ */ .rvh { --rs: min(34vh, 300px); display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 320px); grid-template-areas: "left core right" "foot foot foot"; align-items: center; gap: 20px 24px; min-height: calc(100dvh - var(--sysbar-h, 44px) - var(--topnav-h, 0px) - 150px); padding: 8px clamp(16px, 2.2vw, 32px) 24px; } .rvh-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .rvh-col--left { grid-area: left; } .rvh-col--right { grid-area: right; } .rvh-core { grid-area: core; } .rvh-readouts { grid-area: foot; } .rvh-panel { position: relative; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 18px; background: rgba(10, 14, 18, .42); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); } .rvh-panel__line { position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--jarvis-primary, #7fd3ff), transparent); opacity: .8; } .rvh-eyebrow { margin: 0 0 2px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--jarvis-text-dim, #7a828d); } .rvh-eyebrow--warning { color: #ff8a2c; } .rvh-panel__title { margin: 0 0 6px; font-family: var(--font-ui); font-size: 16px; font-weight: 600; color: var(--jarvis-text, #f2f4f6); } .rvh-rule { display: block; height: 1px; margin: 0 0 6px; background: linear-gradient(90deg, rgba(255, 196, 107, .8) 0 28px, rgba(255, 255, 255, .14) 28px); } .rvh-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .rvh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .06); background: none; color: inherit; font: inherit; text-align: left; } .rvh-item:first-child .rvh-row { border-top: 0; } .rvh-row--btn { cursor: pointer; } .rvh-row--btn:hover .rvh-row__t, .rvh-row--btn:focus-visible .rvh-row__t { color: var(--jarvis-primary, #7fd3ff); } .rvh-row__k { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .rvh-row__id { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--jarvis-text-dim, #7a828d); } .rvh-row__t { overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; transition: color 160ms ease; } .rvh-row__meta { font-size: 12px; color: var(--jarvis-text-muted, #a3abb5); } .rvh-pill { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .rvh-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .rvh-pill--primary { color: #7fd3ff; } .rvh-pill--success { color: #8fdcaa; } .rvh-pill--warning { color: #e8c36a; } .rvh-pill--danger { color: #ff6b6b; } .rvh-pill--muted { color: #a3abb5; } .rvh-empty { margin: 4px 0; font-size: 13px; color: var(--jarvis-text-muted, #a3abb5); } .rvh-panel__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .rvh-panel .approval.rvh-approval { padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .rvh-panel .approval.rvh-approval::before, .rvh-panel .approval.rvh-approval::after { content: none; } .rvh-approval__title { margin: 2px 0 4px; font-size: 15px; font-weight: 600; } .rvh-approval__reason { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--jarvis-text-muted, #a3abb5); } .rvh-core { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; } .rvh-reactor { position: relative; width: var(--rs); height: var(--rs); margin-bottom: 6px; perspective: 1100px; } .rvh .rv__core b::after { content: none; } .rvh .rv__orbit { animation: rvhOrbit 18s linear infinite; } .rvh .rv__glow { animation: rvhBreathe 4.2s ease-in-out infinite; } @keyframes rvhOrbit { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } } @keyframes rvhBreathe { 50% { opacity: .85; transform: scale(1.06); } } .rvh-state { margin: 0; font-family: var(--font-ui); font-size: 22px; font-weight: 500; letter-spacing: .01em; } .rvh-sub { max-width: 46ch; margin: 0; font-size: 14px; color: #c9cfd6; text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); } .rvh-state { text-shadow: 0 1px 14px rgba(0, 0, 0, .7); } .rvh-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; } .rvh-readouts { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); } .rvh-readouts span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #aab3bd; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); } /* L'entrée des panneaux à l'ouverture est jouée par assets/motion.js (caméra 3D). */ @media (max-width: 980px) { .rvh { --rs: min(56vw, 220px); grid-template-columns: minmax(0, 1fr); grid-template-areas: "core" "left" "right" "foot"; min-height: 0; padding: 4px 0 calc(140px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .rvh .rv__orbit, .rvh .rv__glow, .rvh .rv__ring--mid { animation: none !important; } } html.no-motion .rvh .rv__orbit, html.no-motion .rvh .rv__glow, html.no-motion .rvh .rv__ring--mid { animation: none !important; } /* ============================================================ 3. Menu unique : une seule barre en haut, identique partout ============================================================ */ html.rt { --topnav-h: 56px; } html.rt .shell, html.rt .shell.rail-collapsed { grid-template-columns: 0 minmax(0, 1fr) var(--context-w) !important; } html.rt .shell.context-hidden, html.rt body.cinematic-home-active .shell { grid-template-columns: 0 minmax(0, 1fr) 0 !important; } html.rt .rail { position: fixed !important; top: var(--sysbar-h); left: 0; right: 0; z-index: 25; display: flex !important; flex-direction: row; align-items: center; gap: 12px; width: auto !important; height: var(--topnav-h) !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; border-radius: 0 !important; background: rgba(5, 6, 7, .55) !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; } /* Le menu fixe ne prend plus de case dans la grille : on place explicitement la scène et le contexte. */ html.rt .stage { grid-column: 2 !important; } html.rt .context { grid-column: 3 !important; } html.rt .rail__top { display: none !important; } html.rt .rail__nav { display: flex !important; flex: 1 1 auto; flex-direction: row; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; } html.rt .rail__nav::-webkit-scrollbar { display: none; } html.rt .rail__item { flex: none; display: inline-flex !important; align-items: center; gap: 7px; width: auto !important; min-height: 40px; padding: 0 10px !important; font-size: 13.5px; white-space: nowrap; } html.rt .rail__nav .rail__label { display: inline !important; opacity: 1 !important; width: auto !important; } html.rt .rail__count { position: static !important; margin-left: 2px; } html.rt .rail__bottom { display: flex !important; flex: none; flex-direction: row; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; border: 0 !important; } html.rt .rail__bottom .rail__label { display: none !important; } html.rt .rail__bottom .rail__item { padding: 0 10px !important; } html.rt .stage { padding-top: calc(var(--topnav-h) + 22px) !important; } html.rt .context { margin-top: calc(var(--topnav-h) + 12px) !important; height: calc(100dvh - var(--sysbar-h) - var(--topnav-h) - 26px) !important; } html.rt .mobilebar { display: none !important; } html.rt .command-dock { left: 24px !important; } /* Pages (ordinateur) : la commande occupe une ligne réservée sous la barre système ; le menu passe au-dessus. */ @media (min-width: 981px) { html.rt body:not(.cinematic-home-active) .shell:has(.stage:not([data-page="jarvis"]):not([data-page="home"])) .command-dock { left: auto !important; right: auto !important; margin-top: var(--topnav-h); } html.rt body:not(.cinematic-home-active) .shell:has(.stage:not([data-page="jarvis"]):not([data-page="home"])) .stage { padding-top: 22px !important; } } @media (max-width: 980px) { html.rt .rail { padding: 0 8px !important; } html.rt .rail__bottom { display: none !important; } html.rt .stage { padding-bottom: calc(var(--dock-h, 64px) + 48px) !important; } html.rt .command-dock { left: 12px !important; right: 12px !important; } } /* ============================================================ 4. En-têtes de page redessinés ============================================================ */ html.rt .vhead { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 26px; padding: 8px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); } html.rt .vhead__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #ff8a2c; } html.rt .vhead__kicker::before { content: ""; width: 28px; height: 1px; background: #ff8a2c; } html.rt .vhead__title { margin: 0; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; } html.rt .vhead__sub { max-width: 62ch; margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--jarvis-text-muted); } html.rt .vhead__stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } html.rt .vstat { min-width: 112px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 16px; background: rgba(10, 14, 18, .42); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); clip-path: none; } html.rt .vstat dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--jarvis-text-dim); } html.rt .vstat dd { margin: 4px 0 0; font-family: var(--font-ui); font-size: 30px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; } html.rt .vstat--primary dd { color: #7fd3ff; } html.rt .vstat--success dd { color: #8fdcaa; } html.rt .vstat--warning dd { color: #e8c36a; } html.rt .vstat--danger dd { color: #ff6b6b; } /* ---------- Motion : mots du titre et balayage orange des lignes ---------- */ .mo-word { display: inline-block; } .mo-sweep { background-image: linear-gradient(90deg, transparent, rgba(255, 138, 44, .22), transparent) !important; background-size: 40% 100% !important; background-repeat: no-repeat !important; animation: moSweep .9s ease-out both; } @keyframes moSweep { from { background-position: -50% 0; } to { background-position: 150% 0; } } @media (prefers-reduced-motion: reduce) { .mo-sweep { animation: none; background-image: none !important; } } /* ---------- Musique de la connexion : aucune vidéo visible (Alexandre, 25/09) ---------- Le lecteur YouTube reste dans la page, transparent et non cliquable ; la musique s'éteint en fondu à l'ouverture de l'application. Si le navigateur bloque le son, le bouton « Son » de l'écran de connexion ou le premier clic la lance. */ .boot-youtube-player { position: fixed; left: 0; bottom: 0; width: 0 !important; height: 0; aspect-ratio: auto !important; overflow: visible !important; border: 0 !important; background: none !important; box-shadow: none !important; opacity: 1 !important; pointer-events: none; } /* L'API YouTube remplace .boot-youtube-frame par son iframe : on vise les deux. */ .boot-youtube-player iframe, .boot-youtube-frame { position: fixed !important; left: 0; bottom: 0; width: 200px !important; height: 200px !important; border: 0; opacity: 0; pointer-events: none; z-index: -1; } .boot-youtube-frame iframe { position: static !important; width: 100% !important; height: 100% !important; opacity: 1; } /* ============================================================ Accueil « Réveil de JARVIS » (prototype remis sur demande d'Alexandre, 25/09 23 h) Réacteur au centre, état, commande juste dessous (« Parle à JARVIS… » + Envoyer), barre du haut épurée, menu en pastilles sans bandeau. Menu unique conservé. ============================================================ */ .rvh-cmdslot { flex: none; width: min(640px, 100%); height: 52px; } body:not(.cinematic-home-active) .rvh-cmdslot { display: none; } html.rt body.cinematic-home-active .core.core--slot { top: var(--slot-top) !important; bottom: auto !important; left: var(--slot-left) !important; width: var(--slot-w) !important; transform: none !important; justify-content: flex-start; } html.rt body.cinematic-home-active .core.core--slot .command { min-height: 48px; margin-top: 0; border-radius: 999px; border-color: rgba(255, 255, 255, .12); background: rgba(10, 14, 18, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); } html.rt body.cinematic-home-active .core.core--slot .command::before { content: none; } html.rt body.cinematic-home-active .core.core--slot :is(.reply, .core__feedback) { order: 1; } html.rt body.cinematic-home-active .core.core--slot .command__send { width: auto; min-width: 44px; padding: 0 18px; border-radius: 999px; gap: 6px; font-family: var(--font-ui); font-weight: 600; font-size: 14px; } html.rt body.cinematic-home-active .core.core--slot .command__send { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; white-space: nowrap; } html.rt body.cinematic-home-active .core.core--slot .command__send i { display: none; } html.rt body.cinematic-home-active .core.core--slot .command__send::after { content: "Envoyer"; } html.rt body.cinematic-home-active :is(#sysIndicators, #sysLatency, #sysSession) { display: none !important; } html.rt body.cinematic-home-active .sysbar { border-bottom: 1px solid rgba(255, 255, 255, .10); } html.rt body.cinematic-home-active .rail { background: transparent !important; border-bottom-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ---------- Playlist après la connexion : pastille discrète, aucune vidéo visible ---------- */ .music-pill { position: fixed; right: 16px; bottom: 16px; z-index: 10020; display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(5, 6, 7, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .music-pill[hidden] { display: none; } .music-pill button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #f2f4f6; font: 12px var(--font-ui, sans-serif); cursor: pointer; } .music-pill button:hover, .music-pill button:focus-visible { background: rgba(127, 211, 255, .14); outline: none; } .boot-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .boot-eq i { width: 2px; height: 100%; border-radius: 1px; background: #7fd3ff; transform-origin: bottom; animation: bootEq 1s ease-in-out infinite; } .boot-eq i:nth-child(2) { animation-delay: -.35s; } .boot-eq i:nth-child(3) { animation-delay: -.7s; } .boot-eq i:nth-child(4) { animation-delay: -.2s; } @keyframes bootEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .boot-eq i { animation: none; transform: scaleY(.6); } } @media (max-width: 980px) { .music-pill { bottom: auto; top: calc(var(--sysbar-h, 44px) + var(--topnav-h, 56px) + 10px); right: 12px; } } .radio-line { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; } .radio-line input { width: 18px; height: 18px; accent-color: #7fd3ff; }