/* ───────────────────────────────────────────────────────────────────────────── theme-hud.css — Le langage visuel « HUD » (handoff Claude Code, 09/2026). Trois modes RGAA : AUTO suit `prefers-color-scheme`, CLAIR et SOMBRE sont des choix explicites posés par data-theme sur et persistés (localStorage['amc-theme'], partagé entre pages — cf. theme-hud.js). Deux jeux de JETONS, jamais deux jeux de styles : le jeu clair vit sur :root nu, le sombre se rejoue à l'identique sous le média ET sous le choix explicite. Les contrastes sont calibrés AA (≥ 4,5:1 texte courant) dans les deux thèmes ; pas d'effet de lueur — couleurs pleines (règle 5). L'ÉCHELLE SÉMANTIQUE unique (règle 4) vit dans --sc-1..4 + classes utilitaires texte-/fond-/trait- : un 72 est TOUJOURS jaune, dans les deux thèmes, avec la déclinaison qui tient le contraste de chaque fond. ───────────────────────────────────────────────────────────────────────── */ /* ── Jeu CLAIR (défaut) ── */ :root { --hud-page-bg: radial-gradient(ellipse at 30% 0%, #F5F9FC 0%, #E8EEF4 70%); --hud-page-flat: #E8EEF4; --hud-grid: rgba(20, 84, 127, .06); --hud-panel: rgba(255, 255, 255, .85); --hud-side: rgba(255, 255, 255, .75); --hud-border: rgba(20, 84, 127, .28); --hud-border-soft: rgba(20, 84, 127, .15); --hud-border-strong:rgba(20, 84, 127, .55); --hud-accent: #0F5E86; --hud-on-accent: #FFFFFF; --hud-accent-bright:#0A4361; --hud-accent-tint: rgba(15, 94, 134, .10); --hud-title: #0D1E30; --hud-text: #1C3247; --hud-dim: #44607A; --hud-faint: #4A6379; /* éclairci 09/2026 : #5F7A92 passait sous AA en petit corps */ --hud-track: rgba(20, 84, 127, .12); --hud-hover: rgba(15, 94, 134, .07); --hud-scan: rgba(15, 94, 134, .30); --hud-vise: rgba(15, 94, 134, .40); --hud-tip-bg: #FFFFFF; --hud-ok: #1F7A50; /* Échelle sémantique — déclinaison claire (assombrie pour AA sur clair) */ --sc-1: #B2312A; /* < 40 */ --sc-2: #A85614; /* 40-59 */ --sc-3: #8A6D0A; /* 60-74 */ --sc-4: #1F7A50; /* ≥ 75 */ --sc-na: #5F7A92; } /* ── Jeu SOMBRE — data-theme est TOUJOURS résolu par theme-hud.js (AUTO y compris : il lit prefers-color-scheme, pose dark/light, et suit les changements système en direct). Un seul sélecteur, zéro duplication. ── */ :root[data-theme="dark"] { --hud-page-bg: radial-gradient(ellipse at 30% 0%, #123252 0%, #081627 70%); --hud-page-flat: #081627; --hud-grid: rgba(53, 201, 240, .07); --hud-panel: rgba(16, 42, 66, .62); --hud-side: rgba(13, 34, 54, .75); --hud-border: rgba(53, 201, 240, .32); --hud-border-soft: rgba(53, 201, 240, .20); --hud-border-strong:rgba(53, 201, 240, .6); --hud-accent: #35C9F0; --hud-on-accent: #04141F; --hud-accent-bright:#7FE3FF; --hud-accent-tint: rgba(53, 201, 240, .16); --hud-title: #FFFFFF; --hud-text: #E6F4FB; --hud-dim: #8AB2CC; /* éclairci 09/2026 : #5B8AA6 trop pâle en petit corps */ --hud-faint: #6E96B0; /* éclairci 09/2026 : #3E6B85 était sous AA (≈3:1) */ --hud-track: rgba(53, 201, 240, .18); --hud-hover: rgba(53, 201, 240, .12); --hud-scan: rgba(53, 201, 240, .35); --hud-vise: rgba(53, 201, 240, .60); /* filet de visée bien visible (retour 01/09) */ --hud-tip-bg: #0C2237; --hud-ok: #3DF08C; --sc-1: #F0554D; --sc-2: #F08A3D; --sc-3: #E8C64A; --sc-4: #3DF08C; --sc-na: #3E6B85; } /* ── Les jetons historiques de l'application suivent le thème ── */ :root { --alps-red: var(--hud-accent); --alps-red-hi: var(--hud-accent-bright); --alps-dark: var(--hud-title); --alps-grey: var(--hud-text); --alps-grey-lt: var(--hud-dim); --alps-border: var(--hud-border-soft); --alps-light: var(--hud-page-flat); --alps-surface: var(--hud-panel); --grad-red: linear-gradient(135deg, var(--hud-accent), var(--hud-accent-bright)); --grad-header: var(--hud-page-flat); --score-high: var(--sc-4); --score-mid: var(--sc-2); --score-low: var(--sc-1); --score-na: var(--sc-na); --radius-sm: 0; --radius: 0; --radius-lg: 0; --shadow-sm: none; } /* ── Échelle sémantique : classes utilitaires ── */ .texte-sc-1 { color: var(--sc-1); } .fond-sc-1 { background: var(--sc-1); } .trait-sc-1 { stroke: var(--sc-1); } .texte-sc-2 { color: var(--sc-2); } .fond-sc-2 { background: var(--sc-2); } .trait-sc-2 { stroke: var(--sc-2); } .texte-sc-3 { color: var(--sc-3); } .fond-sc-3 { background: var(--sc-3); } .trait-sc-3 { stroke: var(--sc-3); } .texte-sc-4 { color: var(--sc-4); } .fond-sc-4 { background: var(--sc-4); } .trait-sc-4 { stroke: var(--sc-4); } .texte-sc-na { color: var(--sc-na); } .fond-sc-na { background: var(--sc-na); } .trait-sc-na { stroke: var(--sc-na); } /* ── Le corps ── */ body { font-family: 'Rajdhani', system-ui, sans-serif; background: var(--hud-page-bg); background-attachment: fixed; color: var(--hud-text); } /* La grille de fond 44 px — pointer-events none, purement décorative */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--hud-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hud-grid) 1px, transparent 1px); background-size: 44px 44px; } button, input, select, textarea { font-family: inherit; } /* ── En-tête d'application ── */ .app-header { background: var(--hud-page-flat) !important; border-bottom: 1px solid var(--hud-border); position: relative; z-index: 100; } /* z-index 100 = la valeur d'origine d'app.css. À 5, l'en-tête créait un contexte d'empilement SOUS la barre d'onglets collante (40) : le menu du compte passait derrière les onglets Stratégie/Expérience (constaté en prod). */ .header-title { letter-spacing: 3px; color: var(--hud-title); } .header-sub { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 1.5px; color: var(--hud-accent) !important; } .header-nav-btn { border-radius: 0; border: 1px solid var(--hud-border); background: transparent; color: var(--hud-text); letter-spacing: 1px; } .header-nav-btn:hover { background: var(--hud-hover); border-color: var(--hud-border-strong); color: var(--hud-text); } .header-nav-btn.primary { background: var(--hud-accent-tint) !important; border: 1px solid var(--hud-border-strong) !important; color: var(--hud-accent-bright) !important; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } /* ── Le sélecteur de thème (RGAA : group + aria-pressed, focus visible) ── */ .hud-theme-picker { display: flex; border: 1px solid var(--hud-border-strong); } .hud-theme-picker button { padding: 6px 12px; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 1px; cursor: pointer; border: none; background: transparent; color: var(--hud-dim); } .hud-theme-picker button + button { border-left: 1px solid var(--hud-border-strong); } .hud-theme-picker button[aria-pressed="true"] { background: var(--hud-accent); color: var(--hud-on-accent); font-weight: 700; } .hud-theme-picker button:focus-visible { outline: 2px solid var(--hud-accent-bright); outline-offset: -2px; } /* ── Panneaux HUD ── */ .hud-panneau { position: relative; border: 1px solid var(--hud-border); background: var(--hud-panel); padding: 20px 26px; } .hud-equerres::before, .hud-equerres::after { content: ''; position: absolute; width: 18px; height: 18px; } .hud-equerres::before { top: -1px; left: -1px; border-top: 2px solid var(--hud-accent); border-left: 2px solid var(--hud-accent); } .hud-equerres::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--hud-accent); border-right: 2px solid var(--hud-accent); } /* ── Onglet Synthèse HUD ── */ .hud-synthese { position: relative; z-index: 1; } .hud-entete h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: 4px; color: var(--hud-title); text-transform: uppercase; } .hud-curseur { color: var(--hud-accent); animation: hudPulse 2s infinite; } .hud-sous-titre { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; color: var(--hud-accent); margin-top: 4px; } .hud-meta { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 1.5px; color: var(--hud-dim); margin-top: 6px; } .hud-sources { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .hud-sources .meta-src-chip { border-radius: 0; border: 1px solid var(--hud-border); background: var(--hud-panel); color: var(--hud-text); } .hud-source-periode { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--hud-faint); } .hud-entete { margin-bottom: 20px; } .hud-haut { display: grid; grid-template-columns: 430px 1fr; gap: 18px; margin-bottom: 18px; } .hud-panneau-titre { display: flex; justify-content: space-between; align-items: center; align-self: stretch; width: 100%; } .hud-panneau h2, .hud-radar-liste h2 { margin: 0; font-family: 'Share Tech Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 2px; color: var(--hud-dim); } .hud-aide { width: 18px; height: 18px; border: 1px solid var(--hud-border-strong); color: var(--hud-accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: help; } .hud-equerres { display: flex; flex-direction: column; align-items: center; } .hud-jauge { position: relative; width: 250px; height: 250px; margin: 14px 0 4px; } .hud-jauge svg { position: absolute; inset: 0; } .hud-jauge-visee { animation: hudSpin 40s linear infinite; } .hud-jauge-visee-inverse { animation: hudSpinRev 60s linear infinite; } .hud-trait line { stroke: var(--hud-vise); } .hud-cercle-pointille { stroke: var(--hud-vise); stroke-width: 1; } .hud-piste { stroke: var(--hud-track); } .hud-jauge-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hud-jauge-note { font-size: 58px; font-weight: 700; letter-spacing: -1px; color: var(--hud-title); line-height: 1; } .hud-jauge-sur { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--hud-dim); } .hud-jauge-legende { display: flex; gap: 22px; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 1px; color: var(--hud-dim); } .hud-jauge-legende span { display: flex; align-items: center; gap: 7px; } .hud-jauge-legende i { width: 9px; height: 9px; display: inline-block; } .hud-jauge-legende strong { color: var(--hud-title); } .hud-echelle { margin-top: 14px; align-self: stretch; border-top: 1px solid var(--hud-border-soft); padding-top: 12px; } .hud-echelle-titre { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 2px; color: var(--hud-faint); margin-bottom: 6px; } .hud-echelle-barres { display: flex; gap: 3px; height: 6px; } .hud-echelle-grad { display: flex; justify-content: space-between; font-family: 'Share Tech Mono', monospace; font-size: 10.5px; color: var(--hud-faint); margin-top: 4px; } .hud-haut-droite { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .hud-verdict { border-left: 3px solid var(--hud-accent); } .hud-verdict-titre { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; color: var(--hud-accent); margin-bottom: 8px; } .hud-verdict p { margin: 0; font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--hud-text); } .hud-radar { display: flex; gap: 24px; align-items: center; flex: 1; } .hud-radar > svg { flex-shrink: 0; } .hud-grille { stroke: var(--hud-border-soft); fill: none; } .hud-grille-forte { stroke: var(--hud-border); fill: none; } .hud-radar-aire { fill: var(--hud-accent-tint); stroke: var(--hud-accent); stroke-width: 1.5; } .hud-radar-liste { flex: 1; min-width: 0; } .hud-radar-liste h2 { margin-bottom: 12px; } .hud-radar-ligne { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; } .hud-radar-label { width: 168px; font-size: 14px; font-weight: 500; color: var(--hud-text); flex-shrink: 0; } .hud-radar-barre { flex: 1; height: 6px; background: var(--hud-track); } .hud-radar-barre div { height: 6px; } .hud-radar-val { width: 30px; text-align: right; font-size: 15px; font-weight: 700; } .hud-note-bas { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--hud-faint); margin-top: 10px; } .hud-fd { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* Sous ~1460px de fenêtre, jauge (430px) + verdict/radar (~580px incompressibles) ne tiennent plus à droite du panneau de recherche (400px) : le radar sortait de l'écran sur laptop, labels coupés au bord (retour bêta du 04/09/2026). La jauge passe alors au-dessus, chaque panneau reprend la pleine largeur. */ @media (max-width: 1460px) { .hud-haut { grid-template-columns: 1fr; } } /* Fenêtre étroite (le panneau gauche est déjà replié à 768px) : le radar et sa liste s'empilent, forces/faiblesses aussi. */ @media (max-width: 700px) { .hud-radar { flex-direction: column; align-items: stretch; } .hud-radar > svg { align-self: center; } .hud-fd { grid-template-columns: 1fr; } } .hud-fd-titre { margin: 0 0 14px !important; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; } .hud-fd-ligne { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .hud-fd-texte { flex: 1; } .hud-fd-label { font-size: 15px; font-weight: 600; color: var(--hud-title); } .hud-fd-sous { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--hud-faint); margin-top: 1px; } .hud-fd-barre { width: 110px; height: 6px; background: var(--hud-track); flex-shrink: 0; } .hud-fd-barre div { height: 6px; } .hud-fd-val { width: 42px; text-align: right; font-size: 16px; font-weight: 700; } @keyframes hudPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes hudSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes hudSpinRev { from { transform: rotate(0); } to { transform: rotate(-360deg); } } /* RGAA : les animations respectent la préférence de mouvement réduit */ @media (prefers-reduced-motion: reduce) { .hud-jauge-visee, .hud-jauge-visee-inverse, .hud-curseur { animation: none; } } /* ── Le rapport classique dans le langage HUD (chrome, pas données) ── */ .section, .canvas-header, .canvas-bande { border-radius: 0 !important; } .canvas-header { background: var(--hud-panel) !important; border: 1px solid var(--hud-border); color: var(--hud-title); } .canvas-header h2 { color: var(--hud-title); } .nav-section, .nav-tab, .tf-btn { border-radius: 0; } .nav-tab.active { background: var(--hud-accent); color: var(--hud-on-accent); } /* ── L'accueil « Recherche » ─────────────────────────────────────────────── */ body.hud-accueil .panel-left { display: none; } body.hud-accueil .welcome-screen { display: none; } #hudAccueil { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 64px 24px 60px; } .hud-accueil-hero { text-align: center; margin-bottom: 34px; } .hud-accueil-sur { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 3px; color: var(--hud-accent); margin-bottom: 10px; } .hud-accueil-hero h1 { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: 2px; color: var(--hud-title); text-transform: uppercase; } .hud-accueil-hero p { margin: 10px auto 0; max-width: 560px; font-size: 15.5px; line-height: 1.55; color: var(--hud-dim); } /* Le formulaire existant, rhabillé : bordure forte, fond panneau, bouton coupé */ #hudAccueilFormulaire .search-form { background: var(--hud-panel); border: 1px solid var(--hud-border-strong); border-radius: 0; box-shadow: none; border-image: none; border-top: 1px solid var(--hud-border-strong); padding: 22px 24px; } #hudAccueilFormulaire .search-title-text, #hudAccueilFormulaire .search-subtitle { display: none; } .search-form label { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 2px; color: var(--hud-faint); text-transform: uppercase; } .search-form input[type="text"] { background: transparent; border: 1px solid var(--hud-border); border-radius: 0; color: var(--hud-title); font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 600; } .search-form input[type="text"]:focus { border-color: var(--hud-border-strong); outline: 2px solid var(--hud-accent); outline-offset: -1px; } .btn-analyze { background: var(--hud-accent) !important; color: var(--hud-on-accent) !important; border-radius: 0 !important; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); } .btn-analyze:hover { filter: none; background: var(--hud-accent-bright) !important; } .suggestions-list { border: 1px solid var(--hud-border-strong) !important; border-radius: 0 !important; background: var(--hud-tip-bg) !important; box-shadow: none !important; } .suggestions-list::after { content: "L'ÉCHELLE EST CHOISIE ICI ET VOYAGE AVEC LE TERRITOIRE — ELLE N'EST PAS DEVINÉE"; display: block; padding: 8px 16px; font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--hud-faint); } .place-card { border-radius: 0 !important; border: 1px solid var(--hud-border-strong) !important; background: var(--hud-accent-tint) !important; } .hud-recentes-titre { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 2px; color: var(--hud-dim); margin: 26px 0 10px; } .hud-recentes-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .hud-recente { display: block; text-align: left; border: 1px solid var(--hud-border); background: var(--hud-panel); padding: 13px 16px; cursor: pointer; } .hud-recente:hover { border-color: var(--hud-border-strong); } .hud-recente-haut { display: flex; justify-content: space-between; align-items: baseline; } .hud-recente-nom { font-size: 15px; font-weight: 700; color: var(--hud-title); } .hud-recente-note { font-size: 18px; font-weight: 700; } .hud-recente-meta { display: block; font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: .5px; color: var(--hud-dim); margin-top: 3px; } /* ── Le pipeline d'analyse (surcouche de l'écran de chargement existant) ── */ .loading-overlay { background: var(--hud-page-bg) !important; } .loading-card, .loading-overlay > div { background: var(--hud-panel) !important; border: 1px solid var(--hud-border) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--hud-text); } #loadingStatus { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 1px; color: var(--hud-accent) !important; } .loading-bar, #loadingFill { border-radius: 0 !important; } #loadingFill { background: var(--hud-accent) !important; } /* Pipeline d'analyse en 8 étapes (maquette « Recherche ») */ .loading-card { width: 420px; max-width: 92vw; padding: 20px 24px; box-sizing: border-box; } .loading-pipe-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; } .loading-pipe-titre { color: var(--hud-accent); } .loading-pipe-pct { color: var(--hud-dim); letter-spacing: 1px; } .loading-overlay .loading-track { width: 100%; height: 4px; border-radius: 0; background: var(--hud-track); margin-bottom: 6px; } .loading-overlay .loading-fill { background: var(--hud-accent); border-radius: 0; box-shadow: none; } .loading-overlay .loading-status { max-width: none; text-align: left; opacity: 1; color: var(--hud-dim); margin-bottom: 12px; } .loading-overlay .loading-steps { width: 100%; text-align: left; opacity: 1; gap: 9px; } .loading-step { display: flex; align-items: center; gap: 12px; color: var(--hud-faint); opacity: .65; } .loading-step.active, .loading-step.done { opacity: 1; color: var(--hud-text); } .ls-icone { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hud-border-soft); color: var(--hud-faint); font-size: 11px; font-weight: 700; } .loading-step.active .ls-icone { border-color: var(--hud-accent); color: var(--hud-accent); animation: hudPulse 1.2s infinite; } .loading-step.done .ls-icone { border-color: var(--sc-4); color: var(--sc-4); } .ls-label { flex: 1; font-size: 14px; font-weight: 600; } .ls-meta { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 1px; color: var(--hud-faint); } .loading-step.active .ls-meta { color: var(--hud-accent-bright); } .loading-overlay .loading-hint { max-width: none; text-align: left; opacity: 1; color: var(--hud-faint); margin-top: 14px; } @media (prefers-reduced-motion: reduce) { .loading-step.active .ls-icone { animation: none; } } /* L'accueil sort de la grille deux-colonnes : une seule scène, centrée */ body.hud-accueil .app-layout { display: block; } #hudAccueilFormulaire { max-width: 640px; margin: 0 auto; } #hudAccueilFormulaire .search-form { width: 100%; max-width: none; } #hudAccueilRecentes { max-width: 640px; margin: 0 auto; } /* ── Chip profil partagé (account-chip.js) au langage HUD ── Ses styles d'origine (texte blanc sur blanc translucide) étaient écrits pour l'ancien en-tête rouge : sur l'en-tête HUD clair ils devenaient illisibles. Les jetons portent les deux thèmes d'un coup. */ #acctChip { background: transparent !important; border: 1px solid var(--hud-border) !important; border-radius: 0 !important; color: var(--hud-text) !important; } #acctChip a, #acctChip button { color: var(--hud-text) !important; } #acctChip .ac-sep { background: var(--hud-border-soft) !important; } #acctChip .ac-role { border-radius: 0 !important; font-family: 'Share Tech Mono', monospace; font-weight: 400 !important; letter-spacing: 1px !important; background: transparent !important; border: 1px solid var(--hud-dim); color: var(--hud-dim) !important; } #acctChip .ac-role.pro { border-color: var(--sc-3); color: var(--sc-3) !important; } #acctChip .ac-role.admin { border-color: var(--sc-1); color: var(--sc-1) !important; } #acctChip .ac-menu-list { background: var(--hud-page-flat) !important; border: 1px solid var(--hud-border-strong) !important; border-radius: 0 !important; box-shadow: none !important; } #acctChip .ac-menu-list a { color: var(--hud-text) !important; border-radius: 0 !important; } #acctChip .ac-menu-list a:hover { background: var(--hud-hover) !important; } #acctChip .ac-menu-list .ac-div { background: var(--hud-border-soft) !important; } #acctChip .ac-menu-list a.ac-danger { color: var(--sc-1) !important; } #acctChip .ac-menu-list a.ac-danger:hover { background: var(--hud-hover) !important; } #acctChip .ac-menu-list a.ac-cta { background: var(--hud-accent) !important; color: var(--hud-on-accent) !important; } #acctChip .ac-menu-list a.ac-cta-soft { color: var(--hud-accent) !important; } #acctChip .ac-menu-list a.ac-cta-soft:hover { background: var(--hud-hover) !important; } #impBanner { background: var(--hud-accent) !important; color: var(--hud-on-accent) !important; } #impBanner button { background: var(--hud-on-accent) !important; color: var(--hud-accent) !important; border-radius: 0 !important; } /* ── Texte posé sur l'accent : blanc en clair, encre sombre en sombre ── Ces sélecteurs posaient « color: #fff » sur un fond var(--alps-red) — juste sur le rouge historique, illisible sur le cyan du thème sombre. */ .alps-badge, .header-nav-btn.active, .hov-btn-open, .hov-btn-open-sm:hover, .suivi-btn.primary, .tt-close-btn, .btn-export, .axe-numero, .nudge-switch-btn.actif { color: var(--hud-on-accent) !important; } /* ── Angles droits dans le rapport : les cartes internes suivent la coque ── */ .section [class] { border-radius: 0; } /* Les onglets actifs gardaient chacun leur couleur historique (!important) : l'accent du thème reprend la main, uniformément. */ .nav-tab.tab-societe.active, .nav-tab.tab-suivi.active, .nav-tab.tab-donut.active, .nav-tab.tab-vpc.active, .nav-tab.tab-dmc.active, .nav-tab.tab-exp.active, .nav-tab.tab-nudge.active { background: var(--hud-accent) !important; color: var(--hud-on-accent) !important; border-color: var(--hud-accent) !important; } /* ── Passe fine des onglets du rapport (maquette « Rapport complet ») ── Les en-têtes à fond sombre (--alps-dark) et les puces pastel héritées passent au motif HUD : fond neutre, bord sémantique, texte en jetons. Les échelles sémantiques --sc-* portent le contraste AA des deux thèmes. */ .essence-block, .swot-header, .matrice-header, .axes-header, .f3-header { background: var(--hud-accent-tint) !important; color: var(--hud-accent-bright) !important; border: 1px solid var(--hud-border-strong); } .toast { background: var(--hud-page-flat) !important; color: var(--hud-text) !important; border: 1px solid var(--hud-border-strong); } .skip-link { background: var(--hud-accent) !important; color: var(--hud-on-accent) !important; } .donut-synthese { background: var(--hud-panel) !important; border-color: var(--sc-4) !important; } .donut-synthese-title { color: var(--sc-4) !important; } .donut-synthese-text { color: var(--hud-text) !important; } .donut-strength { background: transparent !important; border-color: var(--sc-4) !important; color: var(--hud-text) !important; } .donut-alert { background: transparent !important; border-color: var(--sc-1) !important; color: var(--hud-text) !important; } .vpc-gap { background: var(--hud-hover) !important; color: var(--hud-text) !important; border-left-color: var(--sc-3) !important; } .exp-gap { background: var(--hud-hover) !important; color: var(--hud-text) !important; border-left-color: var(--sc-2) !important; } .depicting-theme { background: var(--hud-hover) !important; color: var(--hud-text) !important; } .pine-narrative { background: var(--hud-hover) !important; } .pine-quad.education, .pine-quad.divertissement, .pine-quad.evasion, .pine-quad.esthetique { background: var(--hud-panel); color: var(--hud-text); border: 1px solid var(--hud-border-soft); } /* Les quadrants ACTIFS gardent leur couleur pleine et leur texte blanc — lisible partout. */ .ift-bm { background: transparent !important; border-color: var(--sc-2) !important; } .pistes-block { background: var(--hud-hover) !important; } .bm-level-badge { background: var(--hud-accent-tint) !important; color: var(--hud-accent-bright) !important; } .hista-row { border-bottom-color: var(--hud-border-soft) !important; } .hista-row.latest { background: var(--hud-accent-tint) !important; } .dimprog-track { background: var(--hud-track) !important; } .effort-item.quickwin { background: var(--hud-hover) !important; border-left-color: var(--sc-4) !important; } .effort-item.grandprojet { background: var(--hud-hover) !important; border-left-color: var(--sc-3) !important; } .evo-alertes, .evo-alertes-vide, .evo-explication { background: var(--hud-hover) !important; } .f3-tr:hover { background: var(--hud-hover) !important; } .src-card.src-google, .src-card.src-gouv, .src-card.src-trip { background: var(--hud-panel) !important; } .mcol-fort, .mrow-fort { background: transparent !important; color: var(--sc-2) !important; } .mrow-faible { background: transparent !important; color: var(--hud-dim) !important; } .label-quickwin { background: transparent !important; color: var(--sc-4) !important; border: 1px solid var(--sc-4); } .label-grandprojet { background: transparent !important; color: var(--sc-3) !important; border: 1px solid var(--sc-3); } /* Étiquettes TOWS et KPI 3F : les fonds pastel (y compris posés en style inline par f3.js) passent au motif bord + texte sémantiques. */ .tag-so { background: transparent !important; color: var(--sc-4) !important; border: 1px solid var(--sc-4); } .tag-st { background: transparent !important; color: var(--hud-accent) !important; border: 1px solid var(--hud-accent); } .tag-wo { background: transparent !important; color: var(--sc-1) !important; border: 1px solid var(--sc-1); } .tag-wt { background: transparent !important; color: var(--sc-2) !important; border: 1px solid var(--sc-2); } .f3-kpi { background: var(--hud-panel) !important; } .f3-sec-head { background: var(--hud-hover) !important; } .tag-horizon { background: transparent !important; color: var(--hud-accent) !important; border: 1px solid var(--hud-border-strong); } /* Le verdict IA vit dans la Synthèse (panneau « // VERDICT IA ») depuis que celle-ci est l'onglet d'atterrissage : la copie de la colonne de gauche faisait doublon à l'écran (retour François 01/09). Les chips d'honnêteté et la période restent à gauche — la Synthèse n'est qu'un onglet sur 18. */ #metaResume { display: none; } /* ── Visée animée autour des chiffres clés (retour François 01/09 : le motif de la note d'attractivité, multiplié). CSS pur : deux cercles pointillés contra-rotatifs derrière le chiffre, dans le langage de la jauge. ── */ .meta-score-card, .score-global { position: relative; overflow: hidden; } .meta-score-card::before, .meta-score-card::after, .score-global::before, .score-global::after { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; } .meta-score-card::before { width: 74px; height: 74px; margin: -37px 0 0 -37px; border: 1px dashed var(--hud-vise); animation: hudSpin 26s linear infinite; } .meta-score-card::after { width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 1px dotted var(--hud-border-strong); animation: hudSpinRev 40s linear infinite; } .score-global::before { width: 58px; height: 58px; margin: -29px 0 0 -29px; border: 1px dashed var(--hud-vise); animation: hudSpin 26s linear infinite; } .score-global::after { width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px dotted var(--hud-border-strong); animation: hudSpinRev 40s linear infinite; } @media (prefers-reduced-motion: reduce) { .meta-score-card::before, .meta-score-card::after, .score-global::before, .score-global::after { animation: none; } } /* ── « À fond Jarvis » (retour François 01/09) : la visée contra-rotative de la jauge est déclinée sur TOUS les chiffres clés du rapport. CSS pur, pas de lueur (règle 5), reduced-motion coupe tout en bloc plus bas. ── */ /* Le gabarit : deux anneaux pointillés centrés, sens inverses. */ .cell-score::before, .cell-score::after, .tt-score-pill::before, .tt-score-pill::after, .vpc-fit-score::before, .vpc-fit-score::after, .score-evo-val::before, .score-evo-val::after, .f3-kpi-val::before, .sv-tuile b::before, .src-count::before, .bande-score::before, .hud-fd-val::before, .hud-radar-val::before { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; border: 1px dashed var(--hud-vise); animation: hudSpin 26s linear infinite; } .cell-score::after, .tt-score-pill::after, .vpc-fit-score::after, .score-evo-val::after { border: 1px dotted var(--hud-border-strong); animation: hudSpinRev 40s linear infinite; } /* Tailles par cible (le chiffre reste roi : l'anneau dépasse d'un souffle). */ .cell-score::before { width: 58px; height: 58px; margin: -29px 0 0 -29px; } .cell-score::after { width: 68px; height: 68px; margin: -34px 0 0 -34px; } .tt-score-pill { position: relative; } .tt-score-pill::before { width: 56px; height: 56px; margin: -28px 0 0 -28px; } .tt-score-pill::after { width: 66px; height: 66px; margin: -33px 0 0 -33px; } .vpc-fit-score { position: relative; display: inline-block; padding: 10px; } .vpc-fit-score::before { width: 76px; height: 76px; margin: -38px 0 0 -38px; } .vpc-fit-score::after { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .score-evo-val { position: relative; display: inline-block; padding: 8px; } .score-evo-val::before { width: 72px; height: 72px; margin: -36px 0 0 -36px; } .score-evo-val::after { width: 58px; height: 58px; margin: -29px 0 0 -29px; } .f3-kpi-val { position: relative; display: inline-block; padding: 6px; } .f3-kpi-val::before { width: 62px; height: 62px; margin: -31px 0 0 -31px; } .sv-tuile b { position: relative; display: inline-block; padding: 4px 8px; } .sv-tuile b::before { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .src-count { position: relative; display: inline-block; padding: 2px 6px; } .src-count::before { width: 38px; height: 38px; margin: -19px 0 0 -19px; } .bande-score { position: relative; padding: 4px 8px; } .bande-score::before { width: 42px; height: 42px; margin: -21px 0 0 -21px; } .hud-fd-val { position: relative; } .hud-fd-val::before { width: 38px; height: 38px; margin: -19px 0 0 -19px; } .hud-radar-val { position: relative; } .hud-radar-val::before { width: 34px; height: 34px; margin: -17px 0 0 -17px; } /* ── Deux touches Jarvis de plus ── 1. Un balayage lumineux discret traverse l'en-tête de chaque canvas. */ .canvas-header { overflow: hidden; } .canvas-header::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--hud-scan), transparent); animation: hudBalayage 8s linear infinite; } @keyframes hudBalayage { from { left: -140px; } to { left: 100%; } } .canvas-header { position: relative; } /* 2. Le curseur terminal clignote après le titre de chaque canvas. */ .canvas-header h2::after { content: '_'; color: var(--hud-accent); animation: hudClignote 1.1s steps(1) infinite; } @keyframes hudClignote { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cell-score::before, .cell-score::after, .tt-score-pill::before, .tt-score-pill::after, .vpc-fit-score::before, .vpc-fit-score::after, .score-evo-val::before, .score-evo-val::after, .f3-kpi-val::before, .sv-tuile b::before, .src-count::before, .bande-score::before, .hud-fd-val::before, .hud-radar-val::before, .canvas-header::after, .canvas-header h2::after { animation: none; } .canvas-header::after { display: none; } } /* ── Sonar : l'aiguille de balayage des radars (retour 01/09, geste 2) ── Radar Synthèse (SVG maison) : deux aiguilles, la traîne en retrait. */ .hud-sonar { transform-box: view-box; transform-origin: 150px 140px; animation: hudSpin 6s linear infinite; } .hud-sonar line { stroke: var(--hud-vise); stroke-width: 1.2; } .hud-sonar line.hud-sonar-traine { stroke: var(--hud-scan); stroke-width: 1; } /* Radars amCharts (Synthèse visuelle) : cône de balayage en surimpression. */ .sv-radar { position: relative; } .sv-radar::after { content: ''; position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, var(--hud-scan), transparent 55deg); animation: hudSonarCone 6s linear infinite; } @keyframes hudSonarCone { to { transform: translate(-50%, -50%) rotate(360deg); } } /* ── Allumage en cascade des panneaux d'une section (geste 3, classe posée par app/hud-anim.js à chaque affichage d'onglet) ── */ .section.hud-allume > * { animation: hudAllume .45s cubic-bezier(.2, .7, .3, 1) both; } .section.hud-allume > *:nth-child(2) { animation-delay: .06s; } .section.hud-allume > *:nth-child(3) { animation-delay: .12s; } .section.hud-allume > *:nth-child(4) { animation-delay: .18s; } .section.hud-allume > *:nth-child(5) { animation-delay: .24s; } .section.hud-allume > *:nth-child(6) { animation-delay: .30s; } .section.hud-allume > *:nth-child(n+7) { animation-delay: .36s; } @keyframes hudAllume { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { .hud-sonar, .sv-radar::after, .section.hud-allume > * { animation: none; } .sv-radar::after { display: none; } } /* ── Les modales de l'application au langage HUD (retour François 01/09 : le design doit aussi couvrir le paiement). Trois fenêtres injectées par JS avec leurs styles clairs en dur — achat d'onglet (gating.js), offres et retours (account-chip.js), notes de version. Textes et prix intacts. ── */ #buyModal, #offersModal, #feedbackModal, #notesModal { background: rgba(2, 8, 14, .72) !important; } #buyModal .bm-card, #offersModal .om-card, #feedbackModal .fb-card, #notesModal .nv-card { position: relative; background: var(--hud-page-flat) !important; border-radius: 0 !important; border: 1px solid var(--hud-border-strong) !important; box-shadow: none !important; color: var(--hud-text); font-family: 'Rajdhani', sans-serif; } #buyModal .bm-card::before, #offersModal .om-card::before, #feedbackModal .fb-card::before, #notesModal .nv-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 18px; height: 18px; border-top: 2px solid var(--hud-accent); border-left: 2px solid var(--hud-accent); } #buyModal h3, #offersModal h3, #feedbackModal h3, #notesModal h3, #buyModal h4, #offersModal h4, #notesModal .nv-titre { color: var(--hud-title) !important; } #buyModal .bm-sub, #buyModal .bm-tag, #buyModal .bm-ht, #buyModal .bm-note, #offersModal .om-tag, #offersModal .om-ttc, #feedbackModal .fb-sub, #notesModal .nv-intro, #notesModal .nv-date { color: var(--hud-dim) !important; } #buyModal .bm-opt, #offersModal .om-opt, #feedbackModal .fb-type { border: 1px solid var(--hud-border) !important; border-radius: 0 !important; background: var(--hud-panel) !important; } #buyModal .bm-opt.dest { border-color: var(--hud-border-strong) !important; background: var(--hud-accent-tint) !important; } #buyModal .bm-opt.pro, #offersModal .om-opt.pro { border: 2px solid var(--sc-1) !important; background: var(--hud-panel) !important; } #buyModal .bm-badge, #offersModal .om-badge { background: var(--sc-1) !important; color: #fff !important; border-radius: 0 !important; font-family: 'Share Tech Mono', monospace; font-weight: 400 !important; letter-spacing: 1px; } #buyModal .bm-price, #offersModal .om-price { color: var(--hud-title) !important; } #buyModal .bm-opt.pro .bm-price, #offersModal .om-opt.pro .om-price { color: var(--sc-1) !important; } #buyModal .bm-price .bm-per, #offersModal .om-price span { color: var(--hud-dim) !important; } #buyModal ul, #buyModal li { color: var(--hud-text) !important; } #buyModal li::before { color: var(--sc-4) !important; } #buyModal .bm-btn, #offersModal .om-btn, #feedbackModal .fb-send { border-radius: 0 !important; font-family: 'Rajdhani', sans-serif; font-weight: 700 !important; letter-spacing: 1px; } #buyModal .bm-btn.alacarte { background: transparent !important; color: var(--hud-text) !important; border: 1px solid var(--hud-border-strong) !important; } #buyModal .bm-btn.destpay, #offersModal .om-btn.dest { background: var(--hud-accent) !important; color: var(--hud-on-accent) !important; } #buyModal .bm-btn.propay, #offersModal .om-btn.propay, #feedbackModal .fb-send { background: var(--sc-1) !important; color: #fff !important; } #offersModal .om-btn:disabled { background: var(--hud-hover) !important; color: var(--hud-faint) !important; } #buyModal .bm-close, #offersModal .om-close, #feedbackModal .fb-cancel, #notesModal .nv-close { color: var(--hud-dim) !important; text-decoration: underline; } #feedbackModal .fb-type:has(input:checked) { border-color: var(--hud-accent) !important; background: var(--hud-accent-tint) !important; } #feedbackModal textarea { background: var(--hud-accent-tint) !important; border: 1px solid var(--hud-border) !important; border-radius: 0 !important; color: var(--hud-title) !important; font-family: 'Rajdhani', sans-serif; } #feedbackModal textarea:focus { border-color: var(--hud-accent) !important; box-shadow: none !important; } #feedbackModal .fb-msg { color: var(--sc-1) !important; } #notesModal .nv-num { background: var(--hud-accent-tint) !important; color: var(--hud-accent-bright) !important; border-radius: 0 !important; } #notesModal .nv-v { border-bottom-color: var(--hud-border-soft) !important; } #notesModal .nv-v.neuve { border-left-color: var(--hud-accent) !important; } #notesModal .nv-flag { background: transparent !important; border: 1px solid var(--sc-3) !important; color: var(--sc-3) !important; border-radius: 0 !important; } #notesModal .nv-neuf { background: var(--hud-accent) !important; color: var(--hud-on-accent) !important; border-radius: 0 !important; } #notesModal .nv-effet { background: var(--hud-hover) !important; border: 1px solid var(--hud-border) !important; border-radius: 0 !important; color: var(--hud-text) !important; } #notesModal .nv-rub li { color: var(--hud-text) !important; } #notesModal .nv-rub.a h4 { color: var(--sc-4) !important; } #notesModal .nv-rub.m h4 { color: var(--hud-accent) !important; } #notesModal .nv-rub.c h4 { color: var(--sc-3) !important; } #acToast { background: var(--hud-page-flat) !important; border: 1px solid var(--hud-border-strong); color: var(--hud-text) !important; border-radius: 0 !important; }