/* * Mode édition — DA dashboard clair (surface blanche, corail actif, * grille 12 colonnes). Activé via :root[data-theme="editorial"] sur . * Aucune fuite hors de ce sélecteur — le studio sombre reste intact. * * Sources de vérité : `morning-stats.html` à la racine du repo. */ @layer tokens { :root[data-theme='editorial'] { color-scheme: light; scrollbar-color: var(--ed-rule) transparent; /* ---- Palette dashboard clair ---- */ --ed-paper: #eef1f7; --ed-paper-2: #ffffff; --ed-paper-card: rgba(255, 255, 255, 0.78); --ed-paper-card-2: rgba(255, 255, 255, 0.9); --ed-paper-card-3: rgba(255, 255, 255, 0.96); --ed-ink: #232842; --ed-ink-soft: #53514d; --ed-ink-mute: #8c8983; --ed-rule: #e3e6f0; --ed-rule-strong: #d4d8e8; --ed-sun: #0d9488; --ed-amber: #f4bd3d; --ed-moss: #73bf8f; --ed-sky: #5fd0c5; --ed-plum: #7aa0a8; --ed-live-green: #73bf8f; /* opacités de remplissage */ --ed-fill-sun: rgba(13, 148, 136, 0.26); --ed-fill-sun-soft: rgba(13, 148, 136, 0.1); --ed-fill-amber: rgba(244, 189, 61, 0.18); /* gradient AI panel sombre */ --ed-ai-bg: linear-gradient(160deg, rgba(47, 48, 47, 0.96), rgba(95, 208, 197, 0.88)); /* ---- Remap des tokens chassis ---- * (topbar, mobile-nav, …) — pour qu'ils héritent du dashboard clair. */ --bg: #eef1f7; --bg2: #ffffff; --bg3: rgba(255, 255, 255, 0.9); --bg4: #eeeae4; --bd: #e3e6f0; --bd2: #d4d8e8; --tx: #232842; --tx2: #53514d; --tx3: #8c8983; --ac: #0d9488; --ac2: rgba(13, 148, 136, 0.1); --ac3: rgba(13, 148, 136, 0.2); --accent-rgb: 13, 148, 136; --ok: #73bf8f; --ok2: rgba(115, 191, 143, 0.12); --wr: #f4bd3d; --wr2: rgba(244, 189, 61, 0.14); --dn: #0d9488; --dn2: rgba(13, 148, 136, 0.1); --shadow-1: 0 2px 6px rgba(38, 42, 68, 0.05); --shadow-2: 0 10px 24px rgba(38, 42, 68, 0.08); --shadow-3: 0 18px 46px rgba(38, 42, 68, 0.11); --shadow-focus: 0 0 0 3px rgba(13, 148, 136, 0.2); --r: 6px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --glow-accent: 0 0 0 transparent; /* ---- Typographie « Morning Stats » ---- */ --ed-font-serif: 'Fraunces', 'Times New Roman', Georgia, serif; --ed-font-serif-italic: 'Instrument Serif', 'Fraunces', Georgia, serif; --ed-font-italic: 'Instrument Serif', 'Fraunces', Georgia, serif; --ed-font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ed-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Variations Fraunces typo presse */ --ed-frax-display: 'opsz' 144, 'SOFT' 100, 'WONK' 1; --ed-frax-kpi: 'opsz' 144, 'SOFT' 50; --ed-font-display: 72px; --ed-font-h1: 38px; --ed-font-h2: 26px; --ed-font-h3: 18px; --ed-font-body: 14px; --ed-font-meta: 13px; --ed-font-mono-sm: 11px; --ed-font-mono-xs: 10px; --ed-leading-prose: 1.55; --ed-leading-tight: 1.15; --ed-tracking-tight: -0.03em; --ed-tracking-label: 0.18em; --ed-tracking-stamp: 0.2em; --text-xs: 10.5px; --text-sm: 11px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px; } @media (prefers-reduced-motion: reduce) { :root[data-theme='editorial'] { --t-fast: 0ms linear; --t-base: 0ms linear; --t-slow: 0ms linear; } } } @layer base { /* ---- Shell snorklee caché en mode édition ---- * La masthead Morning Stats vit dans #topbar-slot comme sur les pages * moteur ; tabs-bar et mobile-nav restent remplacées par sa mini-nav. */ :root[data-mode='edition'] #tabs-bar-slot, :root[data-mode='edition'] #mobile-nav-slot { display: none !important; } :root[data-mode='edition'] #topbar-slot, :root[data-mode='engine'] #topbar-slot { padding: 28px 36px 60px; max-width: 1440px; margin: 0 auto; } :root[data-mode='edition'] #topbar-slot { padding-bottom: 0; } :root[data-mode='edition'] #tab-content { padding: 12px 36px 60px; max-width: 1440px; margin: 0 auto; } /* ---- Mode moteur : même masthead que l'édition ---- * Le masthead partagé (rendu dans #topbar-slot) tient lieu de header ; * la tabs-bar et la nav mobile sont remplacées par sa mini-nav. Les * contrôles période/comparaison/filtres vivent dans une barre secondaire. */ :root[data-mode='engine'] #tabs-bar-slot, :root[data-mode='engine'] #mobile-nav-slot { display: none !important; } :root[data-mode='engine'] #topbar-slot { padding-bottom: 0; } :root[data-mode='engine'] #tab-content { padding: 12px 36px 60px; max-width: 1440px; margin: 0 auto; } :root[data-theme='editorial'] .topbar-controls { margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .topbar-controls-inner { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* Pastilles de contrôle (période/compare/filtre) recolorées en beige */ :root[data-theme='editorial'] .topbar-period-pill { background: rgba(255, 255, 255, 0.7); border: 0.5px solid var(--ed-rule); border-radius: 2px; color: var(--ed-ink); font-family: var(--ed-font-mono); font-size: 11px; } :root[data-theme='editorial'] .topbar-period-pill:hover, :root[data-theme='editorial'] .topbar-period-pill[aria-expanded='true'] { background: rgba(255, 255, 255, 0.95); border-color: var(--ed-ink-mute); box-shadow: none; } :root[data-theme='editorial'] .topbar-period-pill--filter { background: rgba(13, 148, 136, 0.08); border-color: var(--ed-sun); color: var(--ed-sun); } :root[data-theme='editorial'] .topbar-period-pill--filter .topbar-period-pill-chev, :root[data-theme='editorial'] .topbar-period-pill--filter .topbar-period-pill-icon { color: var(--ed-sun); } :root[data-theme='editorial'] .topbar-period-pill-chev { color: var(--ed-ink-mute); } /* Voile de fond des vues moteur : une lumière de dashboard claire, sans halo lourd. */ :root[data-theme='editorial'] .dbv2-broadcast-overlay, :root[data-theme='editorial'] .ai-broadcast-overlay { background: linear-gradient(135deg, rgba(95, 208, 197, 0.08), rgba(244, 189, 61, 0.06) 42%, rgba(13, 148, 136, 0.05)), var(--ed-paper); mix-blend-mode: normal; } :root[data-theme='editorial'] #app-root { background: var(--ed-paper); min-height: 100vh; } /* ---- Body : fond clair + grain léger ---- */ :root[data-theme='editorial'] body { background: var(--ed-paper); color: var(--ed-ink); font-family: var(--ed-font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: linear-gradient(135deg, rgba(95, 208, 197, 0.08), rgba(244, 189, 61, 0.08) 45%, rgba(13, 148, 136, 0.06)), var(--ed-paper); background-attachment: fixed; } /* Grain SVG très léger, fixé sur viewport, pointer-events: none */ :root[data-theme='editorial'] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.3; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } :root[data-theme='editorial'] ::selection { background: rgba(13, 148, 136, 0.22); color: var(--ed-ink); } :root[data-theme='editorial'] ::-webkit-scrollbar-thumb { background: var(--ed-rule); } :root[data-theme='editorial'] ::-webkit-scrollbar-thumb:hover { background: var(--ed-ink-mute); } /* ---- Italique éditoriale : tout sous data-theme = Instrument Serif ---- */ :root[data-theme='editorial'] em, :root[data-theme='editorial'] .ed-italic { font-family: var(--ed-font-italic); font-style: italic; font-weight: 400; } } @layer components { /* ============================================================ * MASTHEAD (logo soleil + brand "Morning Stats" + date + pulse) * ============================================================ */ :root[data-theme='editorial'] .ed-masthead { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 10px; border-bottom: 0; margin-bottom: 14px; gap: 18px; flex-wrap: wrap; } :root[data-theme='editorial'] .ed-brand-block { display: flex; align-items: center; gap: 12px; } :root[data-theme='editorial'] .ed-sun-icon { width: 42px; height: 42px; flex-shrink: 0; } :root[data-theme='editorial'] .ed-brand h1 { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-display); font-weight: 360; font-size: 42px; line-height: 0.95; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-brand h1 em { font-weight: 320; color: var(--ed-sun); } :root[data-theme='editorial'] .ed-brand-tag { font-family: var(--ed-font-mono); font-size: 10.5px; letter-spacing: var(--ed-tracking-label); text-transform: uppercase; color: var(--ed-ink-mute); margin-top: 4px; } :root[data-theme='editorial'] .ed-masthead-right { text-align: right; font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-masthead-top { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } :root[data-theme='editorial'] .ed-mini-nav { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255, 255, 255, 0.58); border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .ed-mini-nav-item { min-height: 26px; padding: 4px 8px; border: 0; border-radius: 1px; background: transparent; color: var(--ed-ink-mute); cursor: pointer; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } :root[data-theme='editorial'] .ed-mini-nav-item:hover, :root[data-theme='editorial'] .ed-mini-nav-item:focus-visible { color: var(--ed-ink); outline: none; } :root[data-theme='editorial'] .ed-mini-nav-item.is-active { background: var(--ed-ink); color: var(--ed-paper); } :root[data-theme='editorial'] .ed-head-site-group, :root[data-theme='editorial'] .ed-head-tools { display: inline-flex; align-items: center; gap: 6px; } :root[data-theme='editorial'] .ed-head-site-add, :root[data-theme='editorial'] .ed-head-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0.5px solid var(--ed-rule); border-radius: 2px; background: rgba(255, 255, 255, 0.58); color: var(--ed-ink-mute); cursor: pointer; text-decoration: none; } :root[data-theme='editorial'] .ed-head-site-add { font-family: var(--ed-font-mono); font-size: 16px; line-height: 1; } :root[data-theme='editorial'] .ed-head-icon:hover, :root[data-theme='editorial'] .ed-head-icon:focus-visible, :root[data-theme='editorial'] .ed-head-site-add:hover, :root[data-theme='editorial'] .ed-head-site-add:focus-visible { color: var(--ed-ink); border-color: var(--ed-ink-mute); outline: none; } :root[data-theme='editorial'] .ed-head-lang { height: 30px; max-width: 120px; padding: 0 24px 0 8px; border: 0.5px solid var(--ed-rule); border-radius: 2px; background: rgba(255, 255, 255, 0.58); color: var(--ed-ink); cursor: pointer; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } :root[data-theme='editorial'] .ed-head-lang:focus { border-color: var(--ed-ink-mute); outline: none; } :root[data-theme='editorial'] .ed-masthead-date { font-family: var(--ed-font-italic); font-size: 18px; color: var(--ed-ink); font-style: italic; margin-bottom: 4px; } :root[data-theme='editorial'] .ed-masthead-meta { text-transform: uppercase; } :root[data-theme='editorial'] .ed-pulse { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 4px 10px; background: var(--ed-ink); color: var(--ed-paper); border-radius: 2px; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.12em; } :root[data-theme='editorial'] .ed-pulse-dot { width: 6px; height: 6px; background: var(--ed-live-green); border-radius: 50%; animation: ed-ms-pulse 1.6s infinite; } :root[data-theme='editorial'] .ed-data-quality { display: inline-flex; align-items: center; justify-content: flex-end; margin-top: 6px; color: #3f7d57; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } @keyframes ed-ms-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } @media (max-width: 760px) { /* Le masthead vit dans #topbar-slot (moteur) ou #tab-content (édition) ; * ces conteneurs sont des enfants flex de #app-root et doivent pouvoir * rétrécir sous la largeur de leur contenu, sinon la mini-nav pousse la * page hors écran. */ :root[data-mode='edition'] #topbar-slot, :root[data-mode='engine'] #topbar-slot { padding-inline: 16px; min-width: 0; max-width: 100%; } :root[data-mode='edition'] #tab-content, :root[data-mode='engine'] #tab-content { padding-inline: 16px; min-width: 0; } :root[data-theme='editorial'] .ed-masthead { gap: 16px; max-width: 100%; min-width: 0; } :root[data-theme='editorial'] .ed-brand-block { min-width: 0; max-width: 100%; gap: 12px; } /* Titre du masthead : 72px déborde sous ~375px. On le réduit en clamp * pour qu'il reste dans la colonne quelle que soit la langue. */ :root[data-theme='editorial'] .ed-brand h1 { font-size: clamp(40px, 16vw, 72px); } :root[data-theme='editorial'] .ed-sun-icon { width: 48px; height: 48px; } :root[data-theme='editorial'] .ed-masthead-right { width: 100%; min-width: 0; max-width: 100%; text-align: left; } :root[data-theme='editorial'] .ed-masthead-top { justify-content: flex-start; width: 100%; min-width: 0; max-width: 100%; } :root[data-theme='editorial'] .ed-mini-nav { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; } :root[data-theme='editorial'] .ed-mini-nav::-webkit-scrollbar { display: none; } :root[data-theme='editorial'] .ed-mini-nav-item { flex: 0 0 auto; } :root[data-theme='editorial'] .ed-head-site-group { flex: 1 1 auto; min-width: 0; } :root[data-theme='editorial'] .ed-ms-site-select { min-width: 0; flex: 1 1 auto; } :root[data-theme='editorial'] .ed-head-tools { width: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } :root[data-theme='editorial'] .ed-head-tools::-webkit-scrollbar { display: none; } } /* ============================================================ * ALMANACH — la « une » du jour : nameplate (date + météo) * puis 3 colonnes : manchette / le fil / en chiffres * ============================================================ */ :root[data-theme='editorial'] .ed-almanac { padding: 14px 0 18px; border-bottom: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-alm-icon { width: 36px; height: 36px; flex-shrink: 0; } /* --- Nameplate (sous-titre de manchette journal) --- */ :root[data-theme='editorial'] .ed-fp-nameplate { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 11px; margin-bottom: 16px; border-bottom: 1px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-fp-plate { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-ink-soft); min-width: 0; } /* --- Colonnes (filets verticaux) --- */ :root[data-theme='editorial'] .ed-fp-cols { display: grid; grid-template-columns: 1.5fr 1fr 0.85fr; gap: 0; } :root[data-theme='editorial'] .ed-fp-col { padding: 0 22px; border-left: 0.5px solid var(--ed-rule); min-width: 0; } :root[data-theme='editorial'] .ed-fp-col:first-child { padding-left: 0; border-left: none; } :root[data-theme='editorial'] .ed-fp-col:last-child { padding-right: 0; } :root[data-theme='editorial'] .ed-fp-kicker { font-family: var(--ed-font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-sun); font-weight: 600; margin-bottom: 11px; padding-bottom: 5px; border-bottom: 0.5px solid var(--ed-rule); } /* --- La manchette --- */ :root[data-theme='editorial'] .ed-fp-lead-head { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 420; font-size: 30px; line-height: 1.08; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-fp-lead-stand { font-family: var(--ed-font-italic); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--ed-ink-soft); margin-top: 8px; } /* --- En chiffres --- */ :root[data-theme='editorial'] .ed-fp-figs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } :root[data-theme='editorial'] .ed-fp-fig { display: flex; align-items: baseline; gap: 8px; } :root[data-theme='editorial'] .ed-fp-fig-val { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 380; font-size: 20px; line-height: 1; color: var(--ed-ink); flex-shrink: 0; } :root[data-theme='editorial'] .ed-fp-fig-lbl { font-family: var(--ed-font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-ink-mute); } /* --- Le fil (dépêches) --- */ :root[data-theme='editorial'] .ed-wire-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } :root[data-theme='editorial'] .ed-wire-item { padding-left: 11px; border-left: 2px solid var(--ed-sun); } :root[data-theme='editorial'] .ed-wire-meta { display: flex; align-items: baseline; gap: 6px; font-family: var(--ed-font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; } :root[data-theme='editorial'] .ed-wire-cat { color: var(--ed-sun); font-weight: 600; } :root[data-theme='editorial'] .ed-wire-head { font-family: var(--ed-font-serif); font-size: 14px; line-height: 1.25; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-wire-empty { font-family: var(--ed-font-italic); font-style: italic; font-size: 13px; color: var(--ed-ink-mute); } /* --- Météo réelle (coin nameplate) --- */ :root[data-theme='editorial'] .ed-day-wx { display: flex; align-items: center; gap: 10px; } :root[data-theme='editorial'] .ed-day-wx-icon { flex-shrink: 0; line-height: 0; } :root[data-theme='editorial'] .ed-day-wx-icon svg { width: 30px; height: 30px; } :root[data-theme='editorial'] .ed-day-temp { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 380; font-size: 22px; line-height: 1; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-day-temp sub { font-size: 11px; color: var(--ed-ink-mute); margin-left: 2px; vertical-align: baseline; } :root[data-theme='editorial'] .ed-day-city { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ed-ink-mute); margin-top: 3px; } /* ============================================================ * SUB-BAR + RANGE (24h/7j/30j/...) * ============================================================ */ :root[data-theme='editorial'] .ed-subbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 22px; border-bottom: 0.5px solid var(--ed-rule); margin-bottom: 28px; font-family: var(--ed-font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ed-ink-mute); gap: 18px; flex-wrap: wrap; } :root[data-theme='editorial'] .ed-subbar-tagline { font-family: var(--ed-font-italic); font-style: italic; font-size: 14px; letter-spacing: 0; color: var(--ed-ink-soft); text-transform: none; } :root[data-theme='editorial'] .ed-range { display: flex; gap: 4px; background: var(--ed-paper-2); padding: 3px; border-radius: 3px; align-items: center; } :root[data-theme='editorial'] .ed-range > button { padding: 4px 10px; cursor: pointer; border-radius: 2px; background: transparent; border: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; } :root[data-theme='editorial'] .ed-range > button.is-active { background: var(--ed-ink); color: var(--ed-paper); } :root[data-theme='editorial'] .ed-refresh { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; border-left: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-refresh-btn { padding: 4px 10px; cursor: pointer; border-radius: 2px; background: transparent; border: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; } :root[data-theme='editorial'] .ed-refresh-btn:hover, :root[data-theme='editorial'] .ed-refresh-btn:focus-visible { background: var(--ed-paper); color: var(--ed-ink); } :root[data-theme='editorial'] .ed-refresh-status { letter-spacing: 0.08em; text-transform: none; white-space: nowrap; } /* ============================================================ * DAILY EDITION — Une décisionnelle Morning Stats * ============================================================ */ :root[data-theme='editorial'] .ed-daily { margin: 0 0 28px; border-top: 2px solid var(--ed-ink); border-bottom: 1px solid var(--ed-ink); background: linear-gradient(90deg, rgba(13, 148, 136, 0.06), transparent 42%), rgba(255, 250, 240, 0.76); } :root[data-theme='editorial'] .ed-daily-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.65fr); gap: 0; border-bottom: 0.5px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-daily-main { padding: 28px 28px 26px 0; border-right: 0.5px solid var(--ed-rule-strong); min-width: 0; } :root[data-theme='editorial'] .ed-daily-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-daily h1 { margin: 0; max-width: 920px; font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-display); font-size: 56px; font-weight: 360; line-height: 0.98; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-daily-subtitle { max-width: 780px; margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-daily-verdict-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; } :root[data-theme='editorial'] .ed-verdict, :root[data-theme='editorial'] .ed-confidence, :root[data-theme='editorial'] .ed-impact { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 0.5px solid var(--ed-rule-strong); border-radius: 3px; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-ink-soft); background: rgba(255, 255, 255, 0.58); } :root[data-theme='editorial'] .ed-verdict--fragile, :root[data-theme='editorial'] .ed-verdict--attention, :root[data-theme='editorial'] .ed-verdict--critical { border-color: rgba(13, 148, 136, 0.55); color: #9b3a19; background: rgba(13, 148, 136, 0.1); } :root[data-theme='editorial'] .ed-verdict--growth, :root[data-theme='editorial'] .ed-verdict--opportunity { border-color: rgba(115, 191, 143, 0.6); color: #3f7d57; background: rgba(115, 191, 143, 0.1); } :root[data-theme='editorial'] .ed-daily-human { max-width: 820px; margin: 18px 0 0; padding-left: 16px; border-left: 3px solid var(--ed-sun); font-family: var(--ed-font-italic); font-size: 20px; font-style: italic; line-height: 1.34; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-priority { padding: 28px 0 24px 24px; min-width: 0; } :root[data-theme='editorial'] .ed-priority-kicker, :root[data-theme='editorial'] .ed-section-kicker { font-family: var(--ed-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-sun); } :root[data-theme='editorial'] .ed-priority h2 { margin: 12px 0 8px; font-family: var(--ed-font-italic); font-size: 28px; font-weight: 400; line-height: 1.05; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-priority p { margin: 0; font-size: 13.5px; line-height: 1.48; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-priority-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-priority-btn { width: 100%; min-height: 42px; border: 0; border-radius: 3px; background: var(--ed-ink); color: var(--ed-paper); font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } :root[data-theme='editorial'] .ed-priority-btn:hover, :root[data-theme='editorial'] .ed-priority-btn:focus-visible { background: var(--ed-sun); outline: none; } :root[data-theme='editorial'] .ed-context-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 0.5px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-context-kpi { padding: 18px 18px 16px 0; border-right: 0.5px solid var(--ed-rule); min-width: 0; } :root[data-theme='editorial'] .ed-context-kpi + .ed-context-kpi { padding-left: 18px; } :root[data-theme='editorial'] .ed-context-kpi:last-child { border-right: 0; } :root[data-theme='editorial'] .ed-context-kpi-label, :root[data-theme='editorial'] .ed-context-kpi-proof { font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-context-kpi-value { margin-top: 7px; font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-size: 36px; font-weight: 360; line-height: 1; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-context-kpi-delta { margin-top: 7px; font-family: var(--ed-font-mono); font-size: 10.5px; color: var(--ed-sun); } :root[data-theme='editorial'] .ed-context-kpi p { min-height: 54px; margin: 9px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-decision-grid, :root[data-theme='editorial'] .ed-watch-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr); gap: 0; } :root[data-theme='editorial'] .ed-lead-article { padding: 24px 28px 24px 0; border-right: 0.5px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-lead-article h2 { margin: 10px 0 10px; font-family: var(--ed-font-serif); font-size: 34px; font-weight: 380; line-height: 1.04; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-lead-summary { margin: 0; max-width: 780px; font-size: 15px; line-height: 1.55; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-lead-why { margin-top: 15px; padding: 13px 15px; border: 0.5px solid var(--ed-rule); background: rgba(255, 255, 255, 0.5); font-size: 13px; line-height: 1.5; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-lead-why strong { color: var(--ed-ink); } :root[data-theme='editorial'] .ed-evidence-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } :root[data-theme='editorial'] .ed-evidence-item { padding: 12px; border-top: 2px solid var(--ed-ink); background: rgba(255, 255, 255, 0.56); } :root[data-theme='editorial'] .ed-evidence-item span, :root[data-theme='editorial'] .ed-evidence-item small { display: block; font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-evidence-item strong { display: block; margin: 6px 0; font-family: var(--ed-font-serif); font-size: 24px; font-weight: 380; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-evidence-item small { letter-spacing: 0; line-height: 1.35; text-transform: none; } :root[data-theme='editorial'] .ed-driver-panel { padding: 24px 0 24px 24px; } :root[data-theme='editorial'] .ed-driver-row { padding: 12px 0; border-bottom: 0.5px dashed var(--ed-rule); } :root[data-theme='editorial'] .ed-driver-row span { font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-driver-row strong { display: block; margin: 3px 0; font-family: var(--ed-font-italic); font-size: 19px; font-weight: 400; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-driver-row p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-watch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0.5px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-watch-card { padding: 22px 18px 20px 0; border-right: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-watch-card + .ed-watch-card { padding-left: 18px; } :root[data-theme='editorial'] .ed-watch-card:last-child { border-right: 0; } :root[data-theme='editorial'] .ed-risk-row, :root[data-theme='editorial'] .ed-opportunity-row, :root[data-theme='editorial'] .ed-memory-row { padding: 12px 0; border-bottom: 0.5px dashed var(--ed-rule); } :root[data-theme='editorial'] .ed-risk-row strong, :root[data-theme='editorial'] .ed-opportunity-row strong { display: block; font-size: 14px; line-height: 1.3; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-risk-row span, :root[data-theme='editorial'] .ed-risk-row p, :root[data-theme='editorial'] .ed-opportunity-row p, :root[data-theme='editorial'] .ed-opportunity-row div, :root[data-theme='editorial'] .ed-memory-row p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.42; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-risk-row small, :root[data-theme='editorial'] .ed-opportunity-row small, :root[data-theme='editorial'] .ed-memory-row span { display: inline-flex; margin-top: 7px; font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-sun); } :root[data-theme='editorial'] .ed-archive { padding: 20px 0 22px; border-top: 0.5px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-archive-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } :root[data-theme='editorial'] .ed-archive-row { text-align: left; border: 0.5px solid var(--ed-rule); border-radius: 3px; background: rgba(255, 255, 255, 0.48); padding: 12px; cursor: pointer; } :root[data-theme='editorial'] .ed-archive-row:hover, :root[data-theme='editorial'] .ed-archive-row:focus-visible { border-color: var(--ed-sun); outline: none; background: rgba(255, 255, 255, 0.78); } :root[data-theme='editorial'] .ed-archive-row span, :root[data-theme='editorial'] .ed-archive-row small { display: block; font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-archive-row strong { display: block; min-height: 38px; margin: 6px 0; font-family: var(--ed-font-italic); font-size: 17px; font-weight: 400; line-height: 1.1; color: var(--ed-ink); } /* ============================================================ * GRILLE 12-COL + CARD GÉNÉRIQUE * ============================================================ */ :root[data-theme='editorial'] .ed-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } :root[data-theme='editorial'] .ed-card { background: var(--ed-paper-card); border: 0.5px solid var(--ed-rule); padding: 22px; position: relative; overflow: hidden; /* Indispensable : un enfant de grille a min-width:auto par défaut et ne peut donc pas rétrécir sous la largeur de son contenu (un tableau/un graphe large élargirait alors toute la grille hors écran sur mobile). */ min-width: 0; } :root[data-theme='editorial'] .ed-card-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 12px; } :root[data-theme='editorial'] .ed-card-h .ed-label { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: var(--ed-tracking-label); text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-card-h .ed-corner { font-family: var(--ed-font-italic); font-style: italic; font-size: 13px; color: var(--ed-ink-mute); } /* spans */ :root[data-theme='editorial'] .ed-span-3 { grid-column: span 3; } :root[data-theme='editorial'] .ed-span-4 { grid-column: span 4; } :root[data-theme='editorial'] .ed-span-6 { grid-column: span 6; } :root[data-theme='editorial'] .ed-span-8 { grid-column: span 8; } :root[data-theme='editorial'] .ed-span-12 { grid-column: span 12; } /* ============================================================ * KPI cards * ============================================================ */ :root[data-theme='editorial'] .ed-kpi-value { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 380; font-size: 52px; line-height: 1; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-kpi-value sub { font-size: 18px; font-weight: 300; color: var(--ed-ink-mute); vertical-align: baseline; margin-left: 2px; } :root[data-theme='editorial'] .ed-kpi-delta { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-family: var(--ed-font-mono); font-size: 11px; } :root[data-theme='editorial'] .ed-delta-up { color: var(--ed-moss); } :root[data-theme='editorial'] .ed-delta-down { color: var(--ed-sun); } :root[data-theme='editorial'] .ed-delta-flat { color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-kpi-arr { font-size: 14px; line-height: 1; } /* ============================================================ * Legend (sous chart) * ============================================================ */ :root[data-theme='editorial'] .ed-legend { display: flex; gap: 18px; margin-top: 12px; font-family: var(--ed-font-mono); font-size: 10.5px; color: var(--ed-ink-soft); flex-wrap: wrap; } :root[data-theme='editorial'] .ed-legend > span { display: flex; align-items: center; gap: 6px; } :root[data-theme='editorial'] .ed-legend-sw { width: 14px; height: 2px; } /* ============================================================ * ANALYSES AURORA — rubriques gazette * ============================================================ */ :root[data-theme='editorial'] .ed-analysis { grid-column: span 8; background: var(--ed-paper-card-3); border: 0.5px solid var(--ed-rule); padding: 22px; min-width: 0; } :root[data-theme='editorial'] .ed-analysis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 0.5px solid var(--ed-rule); padding-bottom: 14px; margin-bottom: 14px; } :root[data-theme='editorial'] .ed-analysis-head h3 { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-display); font-size: 30px; font-weight: 360; line-height: 1.05; margin: 5px 0 0; } :root[data-theme='editorial'] .ed-analysis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } :root[data-theme='editorial'] .ed-analysis-card { border-left: 2px solid var(--ed-rule-strong); padding: 2px 0 0 14px; min-width: 0; } :root[data-theme='editorial'] .ed-analysis-card--diagnostic { border-left-color: var(--ed-sky); } :root[data-theme='editorial'] .ed-analysis-card--week { border-left-color: var(--ed-amber); } :root[data-theme='editorial'] .ed-analysis-card--action { border-left-color: var(--ed-sun); } :root[data-theme='editorial'] .ed-analysis-kicker, :root[data-theme='editorial'] .ed-analysis-evidence { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: var(--ed-tracking-label); text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-analysis-card h4 { font-family: var(--ed-font-italic); font-size: 23px; font-weight: 400; line-height: 1.08; margin: 8px 0 8px; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-analysis-card h4 em { color: var(--ed-sun); } :root[data-theme='editorial'] .ed-analysis-card p { color: var(--ed-ink-soft); font-size: 13px; line-height: 1.55; margin: 0 0 12px; } :root[data-theme='editorial'] .ed-analysis-action { font-family: var(--ed-font-italic); font-size: 15px; line-height: 1.35; color: var(--ed-ink); border-top: 0.5px solid var(--ed-rule); padding-top: 10px; margin-bottom: 9px; } :root[data-theme='editorial'] .ed-analysis-action::before { content: '→ '; color: var(--ed-sun); font-family: var(--ed-font-mono); font-style: normal; } /* ============================================================ * AI PREDICTIONS card sombre * ============================================================ */ :root[data-theme='editorial'] .ed-ai-panel { background: var(--ed-ai-bg); color: var(--ed-paper); border: none; } :root[data-theme='editorial'] .ed-ai-panel .ed-label { color: rgba(244, 243, 239, 0.55); } :root[data-theme='editorial'] .ed-ai-panel .ed-corner { color: var(--ed-amber); } :root[data-theme='editorial'] .ed-ai-panel h3 { font-family: var(--ed-font-italic); font-size: 26px; line-height: 1.15; font-weight: 400; margin: 4px 0 14px; letter-spacing: 0; } :root[data-theme='editorial'] .ed-ai-panel h3 em { color: var(--ed-amber); } :root[data-theme='editorial'] .ed-ai-insight { font-size: 13px; color: rgba(244, 243, 239, 0.78); line-height: 1.55; margin-bottom: 14px; } :root[data-theme='editorial'] .ed-ai-quote { border-left: 2px solid var(--ed-amber); padding-left: 10px; font-style: italic; font-family: var(--ed-font-italic); font-size: 15px; color: rgba(244, 243, 239, 0.95); } :root[data-theme='editorial'] .ed-ai-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; border-top: 0.5px solid rgba(244, 243, 239, 0.18); } :root[data-theme='editorial'] .ed-ai-stats > div { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(244, 243, 239, 0.5); text-transform: uppercase; } :root[data-theme='editorial'] .ed-ai-stats b { display: block; font-family: var(--ed-font-serif); font-size: 24px; font-weight: 380; color: var(--ed-paper); margin-top: 4px; letter-spacing: 0; } /* ============================================================ * ASK AURORA chat * ============================================================ */ :root[data-theme='editorial'] .ed-ask-card { background: linear-gradient(135deg, rgba(95, 208, 197, 0.08), rgba(13, 148, 136, 0.05)), var(--ed-paper-card-3); } :root[data-theme='editorial'] .ed-ask-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; } :root[data-theme='editorial'] .ed-ask-head h2 { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-display); font-weight: 360; font-size: 38px; line-height: 1; letter-spacing: 0; } :root[data-theme='editorial'] .ed-ask-head h2 em { color: var(--ed-sun); } :root[data-theme='editorial'] .ed-ask-sub { font-family: var(--ed-font-italic); font-style: italic; color: var(--ed-ink-mute); font-size: 14px; } :root[data-theme='editorial'] .ed-ask-badge { font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.18em; color: var(--ed-ink-mute); text-transform: uppercase; display: flex; align-items: center; gap: 6px; } :root[data-theme='editorial'] .ed-chat-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; max-height: 280px; overflow-y: auto; padding-right: 4px; } :root[data-theme='editorial'] .ed-msg { max-width: 78%; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; border-radius: 4px; } :root[data-theme='editorial'] .ed-msg-user { align-self: flex-end; background: var(--ed-ink); color: var(--ed-paper); font-family: var(--ed-font-mono); font-size: 12.5px; } :root[data-theme='editorial'] .ed-msg-ai { align-self: flex-start; background: var(--ed-paper-2); color: var(--ed-ink-soft); border-left: 2px solid var(--ed-sun); border-radius: 0 4px 4px 0; } :root[data-theme='editorial'] .ed-msg-ai b { color: var(--ed-ink); font-weight: 600; } :root[data-theme='editorial'] .ed-msg-ai em { color: var(--ed-sun); } :root[data-theme='editorial'] .ed-msg-src { display: block; margin-top: 6px; font-family: var(--ed-font-mono); font-size: 10px; color: var(--ed-ink-mute); letter-spacing: 0.08em; } :root[data-theme='editorial'] .ed-ask-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } :root[data-theme='editorial'] .ed-chip { padding: 6px 12px; background: transparent; border: 0.5px solid var(--ed-rule); border-radius: 999px; font-family: var(--ed-font-sans); font-size: 12px; color: var(--ed-ink-soft); cursor: pointer; transition: all 0.15s; } :root[data-theme='editorial'] .ed-chip:hover { background: var(--ed-ink); color: var(--ed-paper); border-color: var(--ed-ink); } :root[data-theme='editorial'] .ed-ask-input-row { display: flex; border-top: 1.5px solid var(--ed-ink); padding-top: 14px; align-items: center; gap: 12px; } :root[data-theme='editorial'] .ed-ask-input-row input { flex: 1; border: none; background: transparent; font-family: var(--ed-font-italic); font-style: italic; font-size: 20px; color: var(--ed-ink); outline: none; padding: 4px 0; } :root[data-theme='editorial'] .ed-ask-input-row input::placeholder { color: var(--ed-ink-mute); opacity: 0.7; } :root[data-theme='editorial'] .ed-ask-send { background: var(--ed-sun); color: var(--ed-paper); border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; } :root[data-theme='editorial'] .ed-ask-send:hover { transform: translateX(3px); } /* ============================================================ * DIGEST / ALERTS / GOALS * ============================================================ */ :root[data-theme='editorial'] .ed-digest-card { background: var(--ed-paper-card-2); } :root[data-theme='editorial'] .ed-digest-stamp { position: absolute; top: 18px; right: 22px; transform: rotate(6deg); font-family: var(--ed-font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ed-sun); border: 1px solid var(--ed-sun); padding: 3px 8px; border-radius: 2px; text-transform: uppercase; } :root[data-theme='editorial'] .ed-digest-title { font-family: var(--ed-font-italic); font-style: italic; font-size: 20px; line-height: 1.2; margin: 6px 0 4px; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-digest-meta { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ed-ink-mute); margin-bottom: 14px; text-transform: uppercase; } :root[data-theme='editorial'] .ed-digest-list { list-style: none; padding: 0; margin: 0; } :root[data-theme='editorial'] .ed-digest-list li { padding: 10px 0; border-top: 0.5px dashed var(--ed-rule); font-size: 12.5px; color: var(--ed-ink-soft); display: flex; gap: 10px; align-items: flex-start; } :root[data-theme='editorial'] .ed-digest-ic { font-family: var(--ed-font-serif); font-style: italic; color: var(--ed-sun); font-size: 18px; line-height: 1; flex-shrink: 0; width: 18px; } :root[data-theme='editorial'] .ed-digest-foot { margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--ed-rule); display: flex; justify-content: space-between; font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--ed-ink-mute); text-transform: uppercase; } :root[data-theme='editorial'] .ed-alerts-list { list-style: none; padding: 0; margin: 0; } :root[data-theme='editorial'] .ed-alert { padding: 12px 0; border-bottom: 0.5px dashed var(--ed-rule); display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: flex-start; } :root[data-theme='editorial'] .ed-alert:last-child { border-bottom: none; } :root[data-theme='editorial'] .ed-alert-ic { font-size: 14px; line-height: 1.4; } :root[data-theme='editorial'] .ed-alert-body { font-size: 13px; line-height: 1.4; } :root[data-theme='editorial'] .ed-alert-body b { color: var(--ed-ink); } :root[data-theme='editorial'] .ed-alert-path { font-family: var(--ed-font-mono); font-size: 11.5px; color: var(--ed-sun); } :root[data-theme='editorial'] .ed-alert-body small { display: block; color: var(--ed-ink-mute); font-size: 11px; margin-top: 2px; } :root[data-theme='editorial'] .ed-alert-nominal .ed-alert-body { font-family: var(--ed-font-serif-italic, 'Instrument Serif', serif); font-style: italic; color: var(--ed-moss); } :root[data-theme='editorial'] .ed-agenda-list { list-style: none; margin: 6px 0 0; padding: 0; } :root[data-theme='editorial'] .ed-agenda-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-agenda-item:last-child { border-bottom: 0; } :root[data-theme='editorial'] .ed-agenda-label { font-size: 13.5px; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-agenda-when { font-family: var(--ed-font-mono); font-size: 11px; color: var(--ed-ink-mute); white-space: nowrap; } :root[data-theme='editorial'] .ed-alert-ts { font-family: var(--ed-font-mono); font-size: 10px; color: var(--ed-ink-mute); letter-spacing: 0.06em; } :root[data-theme='editorial'] .ed-goal { padding: 14px 0; border-bottom: 0.5px dashed var(--ed-rule); } :root[data-theme='editorial'] .ed-goal:last-child { border-bottom: none; padding-bottom: 0; } :root[data-theme='editorial'] .ed-goal:first-child { padding-top: 4px; } :root[data-theme='editorial'] .ed-goal-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } :root[data-theme='editorial'] .ed-goal-name { font-family: var(--ed-font-italic); font-size: 16px; font-style: italic; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-goal-val { font-family: var(--ed-font-mono); font-size: 12px; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-goal-val b { font-family: var(--ed-font-serif); font-style: normal; font-size: 16px; font-weight: 500; color: var(--ed-ink); margin-right: 4px; } :root[data-theme='editorial'] .ed-goal-bar { height: 6px; background: var(--ed-paper-2); border-radius: 1px; overflow: hidden; } :root[data-theme='editorial'] .ed-goal-fill { height: 100%; background: linear-gradient(90deg, var(--ed-sun), var(--ed-amber)); } :root[data-theme='editorial'] .ed-goal-pct { margin-top: 4px; font-family: var(--ed-font-mono); font-size: 10px; color: var(--ed-ink-mute); display: flex; justify-content: space-between; } :root[data-theme='editorial'] .ed-goal-add { margin-top: 10px; background: none; border: 0.5px dashed var(--ed-rule); border-radius: 2px; padding: 6px 10px; font-family: var(--ed-font-mono); font-size: 11px; color: var(--ed-ink-mute); cursor: pointer; } :root[data-theme='editorial'] .ed-goal-add:hover { color: var(--ed-ink); border-color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-goal-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; padding: 10px; background: rgba(255, 255, 255, 0.6); border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .ed-goal-form input, :root[data-theme='editorial'] .ed-goal-form select { font-family: var(--ed-font-mono); font-size: 12px; padding: 6px 8px; border: 0.5px solid var(--ed-rule); border-radius: 2px; background: var(--ed-paper, #eef1f7); color: var(--ed-ink); } :root[data-theme='editorial'] .ed-goal-form-actions { display: flex; gap: 8px; } :root[data-theme='editorial'] .ed-goal-save, :root[data-theme='editorial'] .ed-goal-cancel { font-family: var(--ed-font-mono); font-size: 11px; padding: 6px 12px; border-radius: 2px; cursor: pointer; } :root[data-theme='editorial'] .ed-goal-save { background: var(--ed-ink); color: var(--ed-paper, #eef1f7); border: 0.5px solid var(--ed-ink); } :root[data-theme='editorial'] .ed-goal-cancel { background: none; border: 0.5px solid var(--ed-rule); color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-goal-del { margin-left: 8px; background: none; border: 0; color: var(--ed-ink-mute); font-size: 14px; line-height: 1; cursor: pointer; } :root[data-theme='editorial'] .ed-goal-del:hover { color: var(--ed-sun); } /* ============================================================ * TABLES (top pages) + SOURCES + GEO * ============================================================ */ :root[data-theme='editorial'] .ed-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } :root[data-theme='editorial'] .ed-tbl th { text-align: left; font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ed-ink-mute); padding: 8px 0; border-bottom: 0.5px solid var(--ed-rule); font-weight: 400; } :root[data-theme='editorial'] .ed-tbl td { padding: 11px 0; border-bottom: 0.5px dashed var(--ed-rule); color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-tbl tr:last-child td { border-bottom: none; } :root[data-theme='editorial'] .ed-tbl-path { font-family: var(--ed-font-mono); font-size: 12px; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-tbl-num { text-align: right; font-family: var(--ed-font-mono); } :root[data-theme='editorial'] .ed-bar-cell { width: 80px; position: relative; height: 4px; background: var(--ed-paper-2); border-radius: 1px; overflow: hidden; display: inline-block; margin-right: 10px; vertical-align: middle; } :root[data-theme='editorial'] .ed-bar-cell::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--ed-sun); } :root[data-theme='editorial'] .ed-src-row { display: grid; grid-template-columns: 1fr 60px 60px; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 0.5px dashed var(--ed-rule); } :root[data-theme='editorial'] .ed-src-row:last-child { border-bottom: none; } :root[data-theme='editorial'] .ed-src-name { display: flex; align-items: center; gap: 10px; font-size: 13px; } :root[data-theme='editorial'] .ed-src-dot { width: 8px; height: 8px; border-radius: 50%; } :root[data-theme='editorial'] .ed-src-pct { font-family: var(--ed-font-mono); font-size: 12px; text-align: right; } :root[data-theme='editorial'] .ed-src-bar { height: 18px; background: var(--ed-paper-2); position: relative; border-radius: 1px; overflow: hidden; } :root[data-theme='editorial'] .ed-src-fill { height: 100%; border-radius: 1px; } :root[data-theme='editorial'] .ed-geo-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-geo-tab { padding: 6px 14px; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ed-ink-mute); cursor: pointer; border-bottom: 1.5px solid transparent; margin-bottom: -0.5px; transition: all 0.15s; background: transparent; border-left: 0; border-right: 0; border-top: 0; } :root[data-theme='editorial'] .ed-geo-tab.is-active { color: var(--ed-ink); border-bottom-color: var(--ed-sun); } :root[data-theme='editorial'] .ed-geo-tab .ed-count { color: var(--ed-ink-mute); font-size: 9px; margin-left: 4px; } :root[data-theme='editorial'] .ed-geo-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } :root[data-theme='editorial'] .ed-mini-heading { margin: 2px 0 10px; padding-bottom: 8px; border-bottom: 0.5px solid var(--ed-rule); font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-geo-row { display: grid; grid-template-columns: 28px 1fr 80px 70px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 0.5px dashed var(--ed-rule); } :root[data-theme='editorial'] .ed-geo-row:last-child { border-bottom: none; } :root[data-theme='editorial'] .ed-geo-flag { font-family: var(--ed-font-mono); font-size: 10px; color: var(--ed-ink-mute); letter-spacing: 0.05em; } :root[data-theme='editorial'] .ed-geo-name { font-size: 13.5px; color: var(--ed-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-theme='editorial'] .ed-geo-name small { color: var(--ed-ink-mute); font-family: var(--ed-font-mono); font-size: 10px; margin-left: 6px; letter-spacing: 0.05em; } :root[data-theme='editorial'] .ed-mini-bar { height: 4px; background: var(--ed-paper-2); border-radius: 1px; overflow: hidden; position: relative; } :root[data-theme='editorial'] .ed-mini-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--ed-sun); } :root[data-theme='editorial'] .ed-mini-bar.amber::after { background: var(--ed-amber); } :root[data-theme='editorial'] .ed-geo-pct { font-family: var(--ed-font-mono); font-size: 12px; text-align: right; color: var(--ed-ink); } /* ============================================================ * REALTIME (sparkbars 30min) * ============================================================ */ :root[data-theme='editorial'] .ed-rt-big { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-size: 64px; font-weight: 380; line-height: 1; letter-spacing: 0; margin-top: 4px; } :root[data-theme='editorial'] .ed-rt-big sub { font-family: var(--ed-font-mono); font-size: 11px; color: var(--ed-ink-mute); margin-left: 8px; vertical-align: middle; letter-spacing: 0.1em; } :root[data-theme='editorial'] .ed-rt-vis { height: 140px; display: flex; align-items: flex-end; gap: 3px; margin: 8px 0 12px; } :root[data-theme='editorial'] .ed-rt-vis > span { flex: 1; background: var(--ed-sun); min-height: 4px; border-radius: 1px 1px 0 0; opacity: 0.85; transition: height 0.5s ease; } :root[data-theme='editorial'] .ed-rt-vis > span:last-child { background: var(--ed-ink); } :root[data-theme='editorial'] .ed-rt-foot { display: flex; justify-content: space-between; font-family: var(--ed-font-mono); font-size: 10px; color: var(--ed-ink-mute); letter-spacing: 0.1em; } /* ============================================================ * FUNNEL (5 étapes) * ============================================================ */ :root[data-theme='editorial'] .ed-funnel-step { display: grid; grid-template-columns: 100px 1fr 80px 50px; align-items: center; gap: 14px; padding: 10px 0; } :root[data-theme='editorial'] .ed-funnel-name { font-family: var(--ed-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-funnel-bar { height: 24px; background: var(--ed-paper-2); position: relative; border-radius: 1px; overflow: hidden; } :root[data-theme='editorial'] .ed-funnel-bar > div { height: 100%; background: linear-gradient(90deg, var(--ed-sun), var(--ed-amber)); } :root[data-theme='editorial'] .ed-funnel-val { font-family: var(--ed-font-mono); font-size: 13px; text-align: right; } :root[data-theme='editorial'] .ed-funnel-drop { font-family: var(--ed-font-mono); font-size: 10px; color: var(--ed-ink-mute); text-align: right; } /* ============================================================ * Footer * ============================================================ */ :root[data-theme='editorial'] .ed-footer { margin-top: 40px; padding-top: 28px; border-top: 1.5px solid var(--ed-ink); display: block; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-ink-mute); text-align: center; } /* Colophon — col gauche (principe + crédits) */ :root[data-theme='editorial'] .ed-colophon-left { flex: 1 1 280px; min-width: 240px; } :root[data-theme='editorial'] .ed-colophon-principle { font-family: var(--ed-font-italic); font-style: italic; font-size: 18px; letter-spacing: 0; color: var(--ed-ink); text-transform: none; margin-bottom: 8px; line-height: 1.35; } :root[data-theme='editorial'] .ed-colophon-principle em { color: var(--ed-sun); } :root[data-theme='editorial'] .ed-colophon-credits { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.14em; line-height: 1.5; overflow-wrap: anywhere; text-transform: uppercase; color: var(--ed-ink-mute); } /* Colophon — nav 3 boutons (Salle des machines / Conformité / Intégration) */ :root[data-theme='editorial'] .ed-colophon-nav { display: flex; gap: 10px; flex-wrap: wrap; } :root[data-theme='editorial'] .ed-colophon-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--ed-ink); color: var(--ed-paper); border: none; border-radius: 2px; cursor: pointer; font-family: var(--ed-font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; transition: transform 0.15s ease, background-color 0.15s ease; text-align: left; } :root[data-theme='editorial'] .ed-colophon-btn:hover { transform: translateY(-1px); background: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-colophon-btn:focus-visible { outline: 2px solid var(--ed-amber); outline-offset: 2px; } :root[data-theme='editorial'] .ed-colophon-btn-label { display: block; font-weight: 500; } :root[data-theme='editorial'] .ed-colophon-btn-hint { display: block; margin-top: 2px; font-family: var(--ed-font-italic); font-style: italic; font-size: 11.5px; letter-spacing: 0; text-transform: none; color: rgba(244, 243, 239, 0.7); } :root[data-theme='editorial'] .ed-colophon-btn-arrow { margin-left: auto; font-size: 16px; color: var(--ed-amber); line-height: 1; } /* Mobile : empile colophon + boutons */ @media (max-width: 700px) { :root[data-theme='editorial'] .ed-footer { flex-direction: column; align-items: stretch; } :root[data-theme='editorial'] .ed-colophon-nav { flex-direction: column; } :root[data-theme='editorial'] .ed-colophon-btn { width: 100%; } } /* ============================================================ * Responsive ≤ 1100px * ============================================================ */ @media (max-width: 1100px) { :root[data-theme='editorial'] .ed-span-3, :root[data-theme='editorial'] .ed-span-4, :root[data-theme='editorial'] .ed-span-6, :root[data-theme='editorial'] .ed-span-8 { grid-column: span 12; } :root[data-theme='editorial'] .ed-fp-cols { grid-template-columns: 1fr; } :root[data-theme='editorial'] .ed-fp-col { padding: 14px 0 0; border-left: none; border-top: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-fp-col:first-child { padding-top: 0; } :root[data-theme='editorial'] .ed-fp-lead-head { font-size: 26px; } /* Lignes géo : sur étroit on retire la barre décorative et on laisse le nom rétrécir (ellipsis) — flag · nom · %. */ :root[data-theme='editorial'] .ed-geo-row { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; } :root[data-theme='editorial'] .ed-geo-columns { grid-template-columns: 1fr; } :root[data-theme='editorial'] .ed-geo-row .ed-mini-bar { display: none; } :root[data-theme='editorial'] .ed-analysis { grid-column: span 12; } :root[data-theme='editorial'] .ed-analysis-grid { grid-template-columns: 1fr; gap: 18px; } :root[data-theme='editorial'] .ed-daily-hero, :root[data-theme='editorial'] .ed-decision-grid, :root[data-theme='editorial'] .ed-watch-grid, :root[data-theme='editorial'] .ed-context-kpis, :root[data-theme='editorial'] .ed-archive-list { grid-template-columns: 1fr; } :root[data-theme='editorial'] .ed-daily-main, :root[data-theme='editorial'] .ed-lead-article, :root[data-theme='editorial'] .ed-context-kpi, :root[data-theme='editorial'] .ed-watch-card { padding-right: 0; border-right: 0; } :root[data-theme='editorial'] .ed-priority, :root[data-theme='editorial'] .ed-driver-panel, :root[data-theme='editorial'] .ed-context-kpi + .ed-context-kpi, :root[data-theme='editorial'] .ed-watch-card + .ed-watch-card { padding-left: 0; } :root[data-theme='editorial'] .ed-priority, :root[data-theme='editorial'] .ed-driver-panel, :root[data-theme='editorial'] .ed-context-kpi, :root[data-theme='editorial'] .ed-watch-card { border-top: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-daily h1 { font-size: 42px; } :root[data-theme='editorial'] .ed-evidence-list { grid-template-columns: 1fr; } } /* Édition du jour : marges de contenu resserrées sur petit écran. */ @media (max-width: 600px) { :root[data-mode='edition'] #tab-content { padding: 16px 16px 48px; } :root[data-theme='editorial'] .ed-daily-main, :root[data-theme='editorial'] .ed-priority, :root[data-theme='editorial'] .ed-lead-article, :root[data-theme='editorial'] .ed-driver-panel, :root[data-theme='editorial'] .ed-watch-card, :root[data-theme='editorial'] .ed-archive { padding-top: 18px; padding-bottom: 18px; } :root[data-theme='editorial'] .ed-daily h1 { font-size: 34px; line-height: 1.02; } :root[data-theme='editorial'] .ed-daily-topline { align-items: flex-start; flex-direction: column; letter-spacing: 0.1em; } :root[data-theme='editorial'] .ed-daily-subtitle { font-size: 14px; } :root[data-theme='editorial'] .ed-daily-human { font-size: 17px; } :root[data-theme='editorial'] .ed-lead-article h2 { font-size: 27px; } :root[data-theme='editorial'] .ed-context-kpi p { min-height: 0; } } /* Briefing quotidien vendable : diagnostic, action et preuves avant les annexes. */ :root[data-theme='editorial'] .ed-daily { margin: 0 0 22px; border: 1px solid var(--ed-rule-strong); border-radius: 8px; overflow: hidden; background: var(--ed-paper-card-3); box-shadow: 0 18px 50px rgba(47, 48, 47, 0.1); } :root[data-theme='editorial'] .ed-daily-hero { grid-template-columns: minmax(0, 1.4fr) minmax(330px, 0.78fr); gap: 0; border-bottom: 1px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-daily-main { padding: 26px 28px; border-right: 1px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-daily-topline { margin-bottom: 12px; justify-content: flex-start; gap: 10px; flex-wrap: wrap; } :root[data-theme='editorial'] .ed-daily-topline span { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 8px; border: 1px solid var(--ed-rule); border-radius: 999px; background: rgba(244, 243, 239, 0.72); color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-daily h1 { max-width: 860px; font-size: 48px; line-height: 1.02; } :root[data-theme='editorial'] .ed-daily-subtitle { max-width: 800px; margin-top: 13px; font-size: 16px; } :root[data-theme='editorial'] .ed-daily-verdict-row { margin-top: 16px; } :root[data-theme='editorial'] .ed-verdict, :root[data-theme='editorial'] .ed-confidence, :root[data-theme='editorial'] .ed-impact, :root[data-theme='editorial'] .ed-comparison, :root[data-theme='editorial'] .ed-updated { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; border: 1px solid var(--ed-rule-strong); border-radius: 999px; background: #fff; color: var(--ed-ink-soft); font-family: var(--ed-font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; } :root[data-theme='editorial'] .ed-verdict--fragile { border-color: rgba(13, 148, 136, 0.48); background: rgba(13, 148, 136, 0.1); color: #8f3719; } :root[data-theme='editorial'] .ed-daily-human { max-width: 760px; margin-top: 17px; font-size: 19px; } :root[data-theme='editorial'] .ed-business-impact { max-width: 760px; margin: 12px 0 0; padding: 11px 13px; border: 1px solid rgba(115, 191, 143, 0.42); border-radius: 6px; background: rgba(115, 191, 143, 0.1); color: var(--ed-ink-soft); font-size: 13.5px; line-height: 1.42; } :root[data-theme='editorial'] .ed-priority { padding: 24px; background: linear-gradient(180deg, rgba(13, 148, 136, 0.12), rgba(244, 189, 61, 0.08)), #fff; border-top: 0; } :root[data-theme='editorial'] .ed-priority h2 { margin: 10px 0 10px; font-family: var(--ed-font-serif); font-size: 30px; font-weight: 430; line-height: 1.06; } :root[data-theme='editorial'] .ed-priority p { font-size: 14px; } :root[data-theme='editorial'] .ed-priority-proof { margin-top: 13px; padding: 12px; border: 1px solid rgba(13, 148, 136, 0.22); border-radius: 6px; background: rgba(255, 255, 255, 0.76); } :root[data-theme='editorial'] .ed-priority-proof strong { display: block; margin-bottom: 4px; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-sun); } :root[data-theme='editorial'] .ed-priority-proof span { font-size: 14px; line-height: 1.4; color: var(--ed-ink); } :root[data-theme='editorial'] .ed-priority-meta { margin: 12px 0 14px; } :root[data-theme='editorial'] .ed-priority-meta span { padding: 4px 8px; border-radius: 999px; background: rgba(47, 48, 47, 0.08); color: var(--ed-ink); } :root[data-theme='editorial'] .ed-priority-pages { display: flex; flex-wrap: wrap; gap: 7px; margin: -2px 0 14px; } :root[data-theme='editorial'] .ed-priority-pages a { padding: 5px 8px; border: 1px solid var(--ed-rule); border-radius: 999px; background: #fff; color: var(--ed-ink); font-family: var(--ed-font-mono); font-size: 10px; text-decoration: none; } :root[data-theme='editorial'] .ed-priority-actions { display: flex; flex-wrap: wrap; gap: 8px; } :root[data-theme='editorial'] .ed-priority-actions .ed-priority-btn { width: auto; min-height: 38px; padding: 0 12px; border: 1px solid transparent; } :root[data-theme='editorial'] .ed-priority-btn--secondary { background: #fff; color: var(--ed-ink); border-color: var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-priority-btn--ghost { background: transparent; color: var(--ed-ink-mute); border-color: transparent; } :root[data-theme='editorial'] .ed-understanding-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-understanding-card { min-width: 0; padding: 18px 20px; border-right: 1px solid var(--ed-rule); background: rgba(244, 243, 239, 0.42); } :root[data-theme='editorial'] .ed-understanding-card:last-child { border-right: 0; } :root[data-theme='editorial'] .ed-understanding-card h2 { margin: 0 0 7px; font-family: var(--ed-font-serif); font-size: 22px; font-weight: 420; line-height: 1.1; } :root[data-theme='editorial'] .ed-understanding-card p { margin: 0; font-size: 13.5px; line-height: 1.48; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .ed-context-kpis { border-bottom: 1px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-context-kpi { padding: 17px 18px; background: #fff; } :root[data-theme='editorial'] .ed-context-kpi + .ed-context-kpi { padding-left: 18px; } :root[data-theme='editorial'] .ed-context-kpi-value { font-size: 34px; } :root[data-theme='editorial'] .ed-context-kpi p { min-height: 0; font-size: 13px; } :root[data-theme='editorial'] .ed-secondary-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--ed-rule-strong); background: rgba(244, 243, 239, 0.42); } :root[data-theme='editorial'] .ed-secondary-metric { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-secondary-metric:last-child { border-right: 0; } :root[data-theme='editorial'] .ed-secondary-metric span, :root[data-theme='editorial'] .ed-secondary-metric small { display: block; color: var(--ed-ink-mute); font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; } :root[data-theme='editorial'] .ed-secondary-metric strong { display: block; margin: 5px 0 3px; color: var(--ed-ink); font-family: var(--ed-font-serif); font-size: 24px; font-weight: 420; line-height: 1; } :root[data-theme='editorial'] .ed-proof-panel[hidden] { display: none; } :root[data-theme='editorial'] .ed-proof-panel { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; background: rgba(47, 48, 47, 0.28); } :root[data-theme='editorial'] .ed-proof-panel-inner { width: min(520px, 100%); min-height: 100%; padding: 28px; border-left: 1px solid var(--ed-rule-strong); background: var(--ed-paper-card-3); box-shadow: -18px 0 46px rgba(47, 48, 47, 0.16); } :root[data-theme='editorial'] .ed-proof-panel h2 { margin: 8px 34px 18px 0; font-family: var(--ed-font-serif); font-size: 31px; font-weight: 420; line-height: 1.06; } :root[data-theme='editorial'] .ed-proof-close { float: right; width: 32px; height: 32px; border: 1px solid var(--ed-rule-strong); border-radius: 50%; background: #fff; color: var(--ed-ink); cursor: pointer; font-size: 20px; line-height: 1; } :root[data-theme='editorial'] .ed-proof-grid { display: grid; gap: 10px; } :root[data-theme='editorial'] .ed-proof-item { padding: 13px; border: 1px solid var(--ed-rule); border-radius: 6px; background: #fff; } :root[data-theme='editorial'] .ed-proof-item span { display: block; margin-bottom: 5px; color: var(--ed-sun); font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } :root[data-theme='editorial'] .ed-proof-item strong { color: var(--ed-ink); font-size: 14px; line-height: 1.42; } :root[data-theme='editorial'] .ed-diagnosis-section { padding: 22px 24px 24px; border-bottom: 1px solid var(--ed-rule-strong); background: rgba(244, 243, 239, 0.46); } :root[data-theme='editorial'] .ed-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 13px; } :root[data-theme='editorial'] .ed-section-title h2 { margin: 0; font-family: var(--ed-font-serif); font-size: 28px; font-weight: 420; line-height: 1.1; } :root[data-theme='editorial'] .ed-driver-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } :root[data-theme='editorial'] .ed-driver-row { padding: 14px; border: 1px solid var(--ed-rule); border-radius: 6px; background: #fff; } :root[data-theme='editorial'] .ed-driver-row strong { margin-top: 7px; font-family: var(--ed-font-sans); font-size: 14px; font-weight: 650; line-height: 1.35; } :root[data-theme='editorial'] .ed-watch-grid { border-top: 0; } :root[data-theme='editorial'] .ed-watch-card { padding: 20px; background: #fff; } :root[data-theme='editorial'] .ed-watch-card + .ed-watch-card { padding-left: 20px; } :root[data-theme='editorial'] .ed-risk-row, :root[data-theme='editorial'] .ed-opportunity-row, :root[data-theme='editorial'] .ed-memory-row { padding: 12px 0; } :root[data-theme='editorial'] .ed-risk-row strong, :root[data-theme='editorial'] .ed-opportunity-row strong { font-size: 14.5px; } :root[data-theme='editorial'] .ed-details { margin: 26px 0 28px; padding-top: 20px; border-top: 1px solid var(--ed-rule-strong); } :root[data-theme='editorial'] .ed-details-head { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 14px; align-items: baseline; margin-bottom: 14px; cursor: pointer; list-style: none; } :root[data-theme='editorial'] .ed-details-head::-webkit-details-marker { display: none; } :root[data-theme='editorial'] .ed-details-head .ed-section-kicker { grid-row: span 2; align-self: center; } :root[data-theme='editorial'] .ed-details-head h2 { margin: 0; font-family: var(--ed-font-serif); font-size: 30px; font-weight: 420; } :root[data-theme='editorial'] .ed-details-head p { margin: 0; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .ed-details-head strong { grid-row: span 2; align-self: center; padding: 8px 11px; border: 1px solid var(--ed-rule-strong); border-radius: 999px; background: #fff; color: var(--ed-ink); font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } :root[data-theme='editorial'] .ed-details:not([open]) .ed-details-grid { display: none; } :root[data-theme='editorial'] .ed-details-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } :root[data-theme='editorial'] .ed-details-card { padding: 16px; border: 1px solid var(--ed-rule); border-radius: 8px; background: rgba(255, 255, 255, 0.72); } :root[data-theme='editorial'] .ed-details-card h3 { margin: 0 0 10px; font-family: var(--ed-font-serif); font-size: 20px; font-weight: 420; } :root[data-theme='editorial'] .ed-details-row { padding: 10px 0; border-top: 1px dashed var(--ed-rule); } :root[data-theme='editorial'] .ed-details-row span { display: block; color: var(--ed-ink); font-size: 13.5px; font-weight: 650; } :root[data-theme='editorial'] .ed-details-row strong { display: block; margin-top: 3px; color: var(--ed-sun); font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } :root[data-theme='editorial'] .ed-details-row p { margin: 4px 0 0; color: var(--ed-ink-soft); font-size: 12.5px; line-height: 1.38; } @media (max-width: 980px) { :root[data-theme='editorial'] .ed-daily-hero, :root[data-theme='editorial'] .ed-understanding-grid, :root[data-theme='editorial'] .ed-context-kpis, :root[data-theme='editorial'] .ed-watch-grid, :root[data-theme='editorial'] .ed-secondary-metrics { grid-template-columns: 1fr; } :root[data-theme='editorial'] .ed-daily-main, :root[data-theme='editorial'] .ed-priority, :root[data-theme='editorial'] .ed-understanding-card, :root[data-theme='editorial'] .ed-context-kpi, :root[data-theme='editorial'] .ed-watch-card { border-right: 0; } :root[data-theme='editorial'] .ed-priority, :root[data-theme='editorial'] .ed-understanding-card, :root[data-theme='editorial'] .ed-context-kpi, :root[data-theme='editorial'] .ed-watch-card { border-top: 1px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-secondary-metric { border-right: 0; border-top: 1px solid var(--ed-rule); } :root[data-theme='editorial'] .ed-driver-list, :root[data-theme='editorial'] .ed-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { :root[data-theme='editorial'] .ed-brand h1 { font-size: 34px; } :root[data-theme='editorial'] .ed-daily-main, :root[data-theme='editorial'] .ed-priority, :root[data-theme='editorial'] .ed-watch-card { padding: 18px; } :root[data-theme='editorial'] .ed-daily h1 { font-size: 33px; } :root[data-theme='editorial'] .ed-driver-list, :root[data-theme='editorial'] .ed-details-grid { grid-template-columns: 1fr; } :root[data-theme='editorial'] .ed-section-title, :root[data-theme='editorial'] .ed-details-head { display: block; } :root[data-theme='editorial'] .ed-details-head p { margin-top: 4px; } } /* ============================================================ * Fade-in cascade * ============================================================ */ @keyframes ed-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } :root[data-theme='editorial'] .ed-fade-in { animation: ed-fade-in 300ms ease-out backwards; } @media (prefers-reduced-motion: reduce) { :root[data-theme='editorial'] .ed-fade-in { animation: none !important; } } } /* ============================================================================ * HARMONISATION DES VUES MOTEUR SUR LA DA ÉDITORIALE * ---------------------------------------------------------------------------- * Les 4 vues « moteur » (Salle des machines, IA Analytics, Conformité, * Intégration) ont été conçues pour le studio sombre : cartes arrondies, * dégradés, ombres « glow » néon, titres en sans-serif. Le thème éditorial * remappe déjà les tokens couleur en beige — ce bloc aligne la FORME : * cartes plates papier (radius 2px, filet 0.5px var(--ed-rule)), titres serif * Fraunces, labels mono JetBrains majuscules espacés, suppression des glows * et des voiles « broadcast » (scanlines). Aucune fuite hors data-theme. * Scopé sous @layer components, chargé après les CSS studio. * ========================================================================== */ @layer components { /* ---- Voiles « broadcast » (scanlines + halo screen) neutralisés ---- */ :root[data-theme='editorial'] .dbv2-broadcast-overlay, :root[data-theme='editorial'] .ai-broadcast-overlay { display: none !important; } /* ---- Suppression des pseudo-éléments scanlines des cartes/sections ---- */ :root[data-theme='editorial'] .dbv2-hero::before, :root[data-theme='editorial'] .dbv2-kpi-tile::after, :root[data-theme='editorial'] .dbv2-section::after, :root[data-theme='editorial'] .dbv2-ask::after, :root[data-theme='editorial'] .ai-hero::before, :root[data-theme='editorial'] .ai-kpi-card::after, :root[data-theme='editorial'] .ai-section::after { display: none !important; content: none !important; } /* ============================================================ * HERO (Salle des machines + IA Analytics) → bandeau papier plat * ============================================================ */ :root[data-theme='editorial'] .dbv2-hero, :root[data-theme='editorial'] .ai-hero { background: var(--ed-paper-card-2); border: 0.5px solid var(--ed-rule); border-radius: 2px; box-shadow: none; padding: 24px 26px; } :root[data-theme='editorial'] .dbv2-hero-headline, :root[data-theme='editorial'] .ai-hero-headline { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-display); font-weight: 360; font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem); line-height: 1.08; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .dbv2-hero-headline em, :root[data-theme='editorial'] .ai-hero-headline em { font-family: var(--ed-font-italic); font-style: italic; font-weight: 400; color: var(--ed-sun); } :root[data-theme='editorial'] .dbv2-hero-headline strong, :root[data-theme='editorial'] .ai-hero-headline strong { font-weight: 500; color: var(--ed-sun); text-shadow: none; } :root[data-theme='editorial'] .dbv2-hero-pill, :root[data-theme='editorial'] .ai-hero-pill { background: rgba(13, 148, 136, 0.08); border: 0.5px solid var(--ed-rule); border-radius: 2px; color: var(--ed-sun); font-family: var(--ed-font-mono); letter-spacing: 0.08em; } :root[data-theme='editorial'] .dbv2-hero-pill--mono, :root[data-theme='editorial'] .ai-hero-pill--mono { background: rgba(255, 255, 255, 0.6); color: var(--ed-ink-mute); } :root[data-theme='editorial'] .dbv2-quality-summary, :root[data-theme='editorial'] .dbv2-signal-summary { grid-column: 1 / -1; padding: 22px; border: 0.5px solid var(--ed-rule); border-radius: 2px; background: var(--ed-paper-card-2); } :root[data-theme='editorial'] .dbv2-quality-summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.6fr) auto; gap: 16px; align-items: center; } :root[data-theme='editorial'] .dbv2-quality-copy h2, :root[data-theme='editorial'] .dbv2-signal-summary h3 { margin: 4px 0 6px; font-family: var(--ed-font-serif); font-size: 34px; font-weight: 420; line-height: 1.06; } :root[data-theme='editorial'] .dbv2-quality-copy p, :root[data-theme='editorial'] .dbv2-quality-metrics small { margin: 0; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .dbv2-quality-eyebrow { color: var(--ed-sun); font-family: var(--ed-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } :root[data-theme='editorial'] .dbv2-quality-metrics { display: grid; gap: 4px; font-family: var(--ed-font-mono); font-size: 12px; color: var(--ed-ink); } :root[data-theme='editorial'] .dbv2-quality-metrics b { color: #9b3a19; font-weight: 600; } :root[data-theme='editorial'] .dbv2-quality-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } :root[data-theme='editorial'] .dbv2-quality-actions button, :root[data-theme='editorial'] .dbv2-section-toggle { min-height: 34px; padding: 0 11px; border: 0.5px solid var(--ed-rule-strong); border-radius: 2px; background: #fff; color: var(--ed-ink); cursor: pointer; font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; } :root[data-theme='editorial'] .dbv2-quality-alerts, :root[data-theme='editorial'] .dbv2-signal-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } :root[data-theme='editorial'] .dbv2-signal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; } :root[data-theme='editorial'] .dbv2-quality-alerts article, :root[data-theme='editorial'] .dbv2-signal-grid article { padding: 13px; border: 0.5px solid var(--ed-rule); border-radius: 2px; background: rgba(255, 255, 255, 0.64); } :root[data-theme='editorial'] .dbv2-quality-alerts article.is-muted { opacity: 0.55; } :root[data-theme='editorial'] .dbv2-quality-alerts strong, :root[data-theme='editorial'] .dbv2-signal-grid strong { display: block; margin-bottom: 5px; color: var(--ed-ink); } :root[data-theme='editorial'] .dbv2-quality-alerts span, :root[data-theme='editorial'] .dbv2-signal-grid span { color: var(--ed-ink-soft); font-size: 13px; line-height: 1.38; } :root[data-theme='editorial'] .dbv2-section--collapsible.is-collapsed .dbv2-section-body { display: none; } :root[data-theme='editorial'] .dbv2-kpi-tile--low-volume { border-color: rgba(13, 148, 136, 0.28); } :root[data-theme='editorial'] .dbv2-kpi-sub--confidence { color: #9b3a19; } @media (max-width: 980px) { :root[data-theme='editorial'] .dbv2-quality-summary { grid-template-columns: 1fr; } :root[data-theme='editorial'] .dbv2-quality-actions { justify-content: flex-start; } :root[data-theme='editorial'] .dbv2-quality-alerts, :root[data-theme='editorial'] .dbv2-signal-grid { grid-template-columns: 1fr; } } /* ============================================================ * CARTES GÉNÉRIQUES (.card), tuiles KPI, sections → papier plat * ============================================================ */ :root[data-theme='editorial'] .card, :root[data-theme='editorial'] .dbv2-kpi-tile, :root[data-theme='editorial'] .dbv2-section, :root[data-theme='editorial'] .ai-kpi-card, :root[data-theme='editorial'] .ai-section, :root[data-theme='editorial'] .ai-empty-demo, :root[data-theme='editorial'] .ai-error { background: var(--ed-paper-card); border: 0.5px solid var(--ed-rule); border-radius: 2px; box-shadow: none; } :root[data-theme='editorial'] .card { padding: 22px; } :root[data-theme='editorial'] .dbv2-kpi-tile--placeholder { background: var(--ed-paper-card); animation: none; } /* ============================================================ * VALEURS KPI → grand serif Fraunces, sans glow * ============================================================ */ :root[data-theme='editorial'] .dbv2-kpi-value, :root[data-theme='editorial'] .ai-kpi-value, :root[data-theme='editorial'] .kpi-value { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 380; letter-spacing: 0; color: var(--ed-ink); text-shadow: none; } :root[data-theme='editorial'] .dbv2-kpi-value--live, :root[data-theme='editorial'] .ai-kpi-card--score .ai-kpi-value { color: var(--ed-sun); text-shadow: none; } :root[data-theme='editorial'] .dbv2-kpi-suffix, :root[data-theme='editorial'] .ai-kpi-suffix { font-family: var(--ed-font-mono); color: var(--ed-ink-mute); } :root[data-theme='editorial'] .dbv2-kpi-label, :root[data-theme='editorial'] .ai-kpi-label { font-family: var(--ed-font-mono); letter-spacing: var(--ed-tracking-label); color: var(--ed-ink-mute); } :root[data-theme='editorial'] .dbv2-kpi-icon, :root[data-theme='editorial'] .kpi-icon { color: var(--ed-sun); background: transparent; } :root[data-theme='editorial'] .dbv2-kpi-sub { font-family: var(--ed-font-mono); color: var(--ed-ink-mute); } /* ============================================================ * EN-TÊTES DE SECTION → eyebrow mono + titre serif * ============================================================ */ :root[data-theme='editorial'] .dbv2-section-eyebrow, :root[data-theme='editorial'] .ai-section-hint { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: var(--ed-tracking-label); text-transform: uppercase; color: var(--ed-ink-mute); opacity: 1; } :root[data-theme='editorial'] .dbv2-section-title { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 400; font-size: 22px; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .ai-section-title { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: var(--ed-tracking-label); text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .dbv2-section-hint { font-family: var(--ed-font-italic); font-style: italic; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ed-ink-mute); } /* Titre de carte générique (.card-title) en mono éditorial */ :root[data-theme='editorial'] .card-title { font-family: var(--ed-font-mono); letter-spacing: var(--ed-tracking-label); color: var(--ed-ink-mute); font-weight: 400; } :root[data-theme='editorial'] .dashboard-grid-section-label { font-family: var(--ed-font-mono); letter-spacing: var(--ed-tracking-label); color: var(--ed-ink-mute); font-weight: 400; } /* ============================================================ * ASK AURORA / INSIGHT — orbes lumineux → pastille encre sobre * ============================================================ */ :root[data-theme='editorial'] .dbv2-ask, :root[data-theme='editorial'] .ai-insight-box { background: var(--ed-paper-card-3); border: 0.5px solid var(--ed-rule); border-radius: 2px; box-shadow: none; } :root[data-theme='editorial'] .dbv2-ask-orb, :root[data-theme='editorial'] .ai-insight-orb { background: var(--ed-sun); box-shadow: none; animation: none; } :root[data-theme='editorial'] .dbv2-ask-title { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 400; font-size: 22px; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .dbv2-ask-eyebrow { font-family: var(--ed-font-mono); letter-spacing: var(--ed-tracking-label); color: var(--ed-ink-mute); opacity: 1; } :root[data-theme='editorial'] .dbv2-ask-msg--assistant .dbv2-ask-bubble { background: var(--ed-paper-2); border: 0.5px solid var(--ed-rule); border-left: 2px solid var(--ed-sun); } :root[data-theme='editorial'] .dbv2-ask-msg--user .dbv2-ask-bubble { background: var(--ed-ink); border: none; color: var(--ed-paper); } :root[data-theme='editorial'] .dbv2-ask-bubble strong { color: var(--ed-sun); } :root[data-theme='editorial'] .dbv2-ask-send { background: var(--ed-sun); border: none; color: var(--ed-paper); border-radius: 2px; } :root[data-theme='editorial'] .dbv2-ask-send:hover:not(:disabled) { background: var(--ed-sun); transform: translateY(-1px); } :root[data-theme='editorial'] .dbv2-ask-input-wrap { background: rgba(255, 255, 255, 0.6); border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .ai-insight-text { font-family: var(--ed-font-italic); font-style: italic; font-size: 17px; color: var(--ed-ink); } /* ============================================================ * BARRES / LIGNES / DOTS — retrait des glows néon * (on garde la couleur chaude, on enlève box-shadow / drop-shadow) * ============================================================ */ :root[data-theme='editorial'] .dbv2-live-dot, :root[data-theme='editorial'] .live-dot, :root[data-theme='editorial'] .ai-provider-dot { box-shadow: none; } :root[data-theme='editorial'] .ai-trend-line { filter: none; } :root[data-theme='editorial'] .ai-provider-bar i, :root[data-theme='editorial'] .ai-geo-bar i, :root[data-theme='editorial'] .ai-agent-bar i, :root[data-theme='editorial'] .ai-cited-bar i, :root[data-theme='editorial'] .ai-forgotten-bar i { box-shadow: none; } :root[data-theme='editorial'] .ai-legend-item--crawlers i, :root[data-theme='editorial'] .ai-legend-item--chats i { box-shadow: none; } /* Barres de stat / quartiles en accent chaud plat */ :root[data-theme='editorial'] .stat-bar-bar-inner, :root[data-theme='editorial'] .top3 .bar-inner { background: var(--ed-sun); } /* ============================================================ * TRENDS / TENDANCES — pastilles plates, couleurs éditoriales * ============================================================ */ :root[data-theme='editorial'] .kpi-trend.trend-up, :root[data-theme='editorial'] .dbv2-kpi-trend.is-up, :root[data-theme='editorial'] .ai-kpi-trend.is-up { color: var(--ed-moss); background: transparent; } :root[data-theme='editorial'] .kpi-trend.trend-down, :root[data-theme='editorial'] .dbv2-kpi-trend.is-down, :root[data-theme='editorial'] .ai-kpi-trend.is-down { color: var(--ed-sun); background: transparent; } :root[data-theme='editorial'] .kpi-trend.trend-flat, :root[data-theme='editorial'] .dbv2-kpi-trend.is-flat, :root[data-theme='editorial'] .ai-kpi-trend.is-flat { color: var(--ed-ink-mute); background: transparent; } /* ============================================================ * CONFORMITÉ + INTÉGRATION — bannières & sous-cartes papier * ============================================================ */ :root[data-theme='editorial'] .compliance-status-banner { border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .compliance-status-title { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 400; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .compliance-referentials, :root[data-theme='editorial'] .compliance-download-btn, :root[data-theme='editorial'] .compliance-referential-chip, :root[data-theme='editorial'] .overview-notice { border: 0.5px solid var(--ed-rule); border-radius: 2px; box-shadow: none; } :root[data-theme='editorial'] .compliance-referentials-heading { font-family: var(--ed-font-mono); letter-spacing: var(--ed-tracking-label); color: var(--ed-ink-mute); } /* ============================================================ * BOUTONS PRIMAIRES — encre/sun plat, radius 2px * ============================================================ */ :root[data-theme='editorial'] .card-header-btn, :root[data-theme='editorial'] .data-table-toggle, :root[data-theme='editorial'] .list-expand, :root[data-theme='editorial'] .ai-insight-btn { border-radius: 2px; box-shadow: none; } /* ============================================================ * EN-TÊTE DE PAGE (.tab-header) → titre serif « édition du jour » * Composant partagé : restyler ici relooke toutes les vues moteur. * ============================================================ */ :root[data-theme='editorial'] .tab-title { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-display); font-weight: 360; font-size: clamp(2rem, 1.3rem + 3.4vw, 3.2rem); line-height: 1.04; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .tab-subtitle { font-family: var(--ed-font-italic); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .tab-header { border-bottom: 0.5px solid var(--ed-rule); padding-bottom: 18px; } :root[data-theme='editorial'] .tab-export-btn { background: var(--ed-paper-card-2); border: 0.5px solid var(--ed-rule); border-radius: 2px; box-shadow: none; font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: var(--ed-tracking-label); text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .tab-export-btn:hover { color: var(--ed-sun); border-color: var(--ed-sun); background: rgba(13, 148, 136, 0.06); } /* ============================================================ * SÉPARATEURS DE SECTION (.dashboard-grid-section) → filet + label mono * ============================================================ */ :root[data-theme='editorial'] .dashboard-grid-section-label { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: var(--ed-tracking-label); text-transform: uppercase; color: var(--ed-ink-mute); font-weight: 400; } :root[data-theme='editorial'] .dashboard-grid-section-line { background: var(--ed-rule); } /* ============================================================ * CONFORMITÉ — bannière, chips, table de rétention, DPO, DPA, footer * ============================================================ */ /* La bannière de statut garde sa teinte mais devient filet plat */ :root[data-theme='editorial'] .compliance-status-banner { background: var(--ed-paper-card-2); box-shadow: none; } :root[data-theme='editorial'] .compliance-status-sub, :root[data-theme='editorial'] .compliance-status-attention { color: var(--ed-ink-mute); } /* Bloc référentiels = papier plat, chips = filet carré (pas de pilule) */ :root[data-theme='editorial'] .compliance-referentials { background: var(--ed-paper-card-3); } :root[data-theme='editorial'] .compliance-referentials-heading { text-transform: uppercase; font-weight: 400; } :root[data-theme='editorial'] .compliance-referential-chip { background: rgba(255, 255, 255, 0.6); border-radius: 2px; } :root[data-theme='editorial'] .compliance-referential-label { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 400; } :root[data-theme='editorial'] .compliance-referential-version, :root[data-theme='editorial'] .compliance-referentials-note { color: var(--ed-ink-mute); } /* Boutons de téléchargement = papier plat */ :root[data-theme='editorial'] .compliance-download-btn { background: var(--ed-paper-card-3); } :root[data-theme='editorial'] .compliance-download-btn:hover { border-color: var(--ed-sun); background: rgba(13, 148, 136, 0.06); } :root[data-theme='editorial'] .compliance-download-icon { color: var(--ed-sun); } :root[data-theme='editorial'] .compliance-download-size { color: var(--ed-ink-mute); } /* Table de rétention : en-têtes mono, durées mono encre */ :root[data-theme='editorial'] .retention-table thead th { font-family: var(--ed-font-mono); letter-spacing: var(--ed-tracking-label); color: var(--ed-ink-mute); font-weight: 400; border-bottom-color: var(--ed-rule); } :root[data-theme='editorial'] .retention-table tbody td { border-bottom-color: var(--ed-rule); color: var(--ed-ink); } :root[data-theme='editorial'] .retention-cell-duration { font-family: var(--ed-font-mono); } :root[data-theme='editorial'] .retention-notice { font-family: var(--ed-font-italic); font-style: italic; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .retention-extra { color: var(--ed-ink-mute); } /* Contact DPO : labels mono, e-mail accent encre */ :root[data-theme='editorial'] .dpo-contact-section-label { font-family: var(--ed-font-mono); font-size: 10px; letter-spacing: var(--ed-tracking-label); text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .dpo-contact-email { font-family: var(--ed-font-mono); color: var(--ed-sun); } :root[data-theme='editorial'] .dpo-contact-address, :root[data-theme='editorial'] .dpo-contact-delay { color: var(--ed-ink-soft); } /* Formulaire DPA : champs sobres, accent --ed-sun gardé sur le bouton */ :root[data-theme='editorial'] .dpa-ccpa-option, :root[data-theme='editorial'] .dpa-signature-resign, :root[data-theme='editorial'] .login-field input[type='text'], :root[data-theme='editorial'] .login-field input[type='email'], :root[data-theme='editorial'] .login-field input[type='password'], :root[data-theme='editorial'] .login-field input[type='number'] { background: rgba(255, 255, 255, 0.6); border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .login-field input[type='text']:focus, :root[data-theme='editorial'] .login-field input[type='email']:focus, :root[data-theme='editorial'] .login-field input[type='password']:focus, :root[data-theme='editorial'] .login-field input[type='number']:focus { border-color: var(--ed-sun); box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.12); } :root[data-theme='editorial'] .dpa-ccpa-help, :root[data-theme='editorial'] .dpa-ccpa-note, :root[data-theme='editorial'] .dpa-signature-resign > summary { color: var(--ed-ink-mute); } :root[data-theme='editorial'] .dpa-ccpa-help a { color: var(--ed-sun); } /* Bouton DPA principal : accent --ed-sun plein, plat */ :root[data-theme='editorial'] .login-submit { background: var(--ed-sun); color: var(--ed-paper); border-radius: 2px; box-shadow: none; font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: var(--ed-tracking-label); text-transform: uppercase; font-weight: 400; } :root[data-theme='editorial'] .login-submit:hover:not(:disabled) { filter: none; background: #0b7d72; } /* Footer conformité */ :root[data-theme='editorial'] .compliance-footer { border-top: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .compliance-footer p { font-family: var(--ed-font-italic); font-style: italic; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .compliance-footer strong { font-style: normal; color: var(--ed-sun); } /* ============================================================ * INTÉGRATION — snippets, boutons, sous-titres, ancres, zone dangereuse * ============================================================ */ /* Blocs de code = encadré encre léger, mono */ :root[data-theme='editorial'] .install-code-block { background: rgba(47, 48, 47, 0.04); border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .install-code { font-family: var(--ed-font-mono); color: var(--ed-ink); } /* Boutons d'install (copier / tester / rafraîchir / ancre) = papier plat */ :root[data-theme='editorial'] .install-copy-btn, :root[data-theme='editorial'] .install-test-btn, :root[data-theme='editorial'] .install-check-refresh, :root[data-theme='editorial'] .install-snippet-adblock-link, :root[data-theme='editorial'] .install-optout-anchor-btn { background: var(--ed-paper-card-2); border: 0.5px solid var(--ed-rule); border-radius: 2px; box-shadow: none; font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .install-copy-btn:hover, :root[data-theme='editorial'] .install-test-btn:hover:not(:disabled), :root[data-theme='editorial'] .install-check-refresh:hover, :root[data-theme='editorial'] .install-snippet-adblock-link:hover, :root[data-theme='editorial'] .install-optout-anchor-btn:hover { color: var(--ed-sun); border-color: var(--ed-sun); background: rgba(13, 148, 136, 0.06); } :root[data-theme='editorial'] .install-copy-btn.is-copied { background: var(--ed-moss); border-color: var(--ed-moss); color: var(--ed-paper); } /* Sous-titres de sous-sections → serif éditorial (au lieu de sans gras) */ :root[data-theme='editorial'] .install-optout-section-title, :root[data-theme='editorial'] .wp-plugin-steps-title, :root[data-theme='editorial'] .adblock-why-title, :root[data-theme='editorial'] .adblock-how-title, :root[data-theme='editorial'] .adblock-steps-title { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ed-ink); } /* Points de statut : retrait du halo néon */ :root[data-theme='editorial'] .install-status-dot { box-shadow: none; } :root[data-theme='editorial'] .install-status-dot.status-ok { background: var(--ed-moss); } :root[data-theme='editorial'] .install-status-dot.status-partial { background: var(--ed-amber, #f4bd3d); } /* Dépannage : items papier, symptômes mono */ :root[data-theme='editorial'] .install-trouble-item { background: rgba(255, 255, 255, 0.5); border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .install-trouble-contact { font-family: var(--ed-font-italic); color: var(--ed-ink-mute); } /* Plateformes : note de précaution sobre */ :root[data-theme='editorial'] .platforms-panel-note { background: rgba(255, 255, 255, 0.6); border-left: 2px solid var(--ed-sun); border-radius: 2px; } /* WordPress : bouton de téléchargement accent sun plat */ :root[data-theme='editorial'] .wp-plugin-download { background: var(--ed-sun); color: var(--ed-paper); border-radius: 2px; font-family: var(--ed-font-mono); font-size: 12px; letter-spacing: 0.04em; font-weight: 400; } :root[data-theme='editorial'] .wp-plugin-features li::before { color: var(--ed-moss); } /* Adblock : CTA doc à plat (suppression du dégradé), encart d'activation sobre */ :root[data-theme='editorial'] .adblock-doc-cta { background: rgba(13, 148, 136, 0.06); border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .adblock-doc-cta:hover { border-color: var(--ed-sun); transform: none; } :root[data-theme='editorial'] .adblock-doc-cta-icon { background: rgba(13, 148, 136, 0.12); color: var(--ed-sun); } :root[data-theme='editorial'] .adblock-doc-cta-arrow { color: var(--ed-sun); } :root[data-theme='editorial'] .adblock-activation { background: rgba(255, 255, 255, 0.6); border: 0.5px solid var(--ed-rule); border-radius: 2px; } /* Ancre opt-out : encart papier filet plein (au lieu de pointillé) */ :root[data-theme='editorial'] .install-optout-anchor { background: var(--ed-paper-card-3); border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .install-optout-anchor-icon { color: var(--ed-sun); } :root[data-theme='editorial'] .install-optout-where-label { font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ed-ink-mute); font-weight: 400; } /* ============================================================ * ZONE DANGEREUSE — accent d'alerte sobre (sun encre), filet plat * ============================================================ */ :root[data-theme='editorial'] .install-danger-info { background: rgba(255, 255, 255, 0.5); border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .install-danger-key { font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .install-danger-value { font-family: var(--ed-font-mono); color: var(--ed-ink); } :root[data-theme='editorial'] .install-danger-responsibility { color: var(--ed-ink-mute); } :root[data-theme='editorial'] .install-danger-export-hint { background: rgba(13, 148, 136, 0.07); border-left: 2px solid var(--ed-sun); border-radius: 2px; color: var(--ed-ink); } /* Boutons export/erase (Conformité ET zone dangereuse) → filet plat */ :root[data-theme='editorial'] .export-erase-btn { background: var(--ed-paper-card-2); border: 0.5px solid var(--ed-rule); border-radius: 2px; box-shadow: none; } :root[data-theme='editorial'] .export-erase-btn:hover:not(:disabled) { border-color: var(--ed-sun); background: rgba(13, 148, 136, 0.06); } :root[data-theme='editorial'] .export-erase-btn-warning { color: var(--ed-amber, #f4bd3d); border-color: var(--ed-rule); } :root[data-theme='editorial'] .export-erase-btn-danger { color: var(--ed-sun); border-color: var(--ed-rule); } :root[data-theme='editorial'] .export-erase-btn-danger:hover:not(:disabled) { border-color: var(--ed-sun); background: rgba(13, 148, 136, 0.06); } } /* ============================================================ * AIDE /docs — DA éditoriale (papier beige « édition du jour ») * ------------------------------------------------------------ * /docs charge tokens.css + marketing.css + docs.css puis editorial.css, * et porte data-theme="editorial" sur . Les tokens chassis * (--bg/--bd/--tx/--ac…) sont déjà remappés beige par le bloc @layer * tokens ci-dessus, donc nav/sidebar/footer héritent du sable. * * Ces overrides sont VOLONTAIREMENT hors @layer : docs.css est non-layé * et l'emporterait sur un @layer components. Hors couche + sélecteur * :root[data-theme='editorial'] (spécificité ≥ docs.css) ⇒ on gagne. * Scope strict au thème éditorial : aucune fuite sur about/pricing/etc. * ============================================================ */ /* ---- Nav marketing → bandeau presse beige ---- */ :root[data-theme='editorial'] .mk-nav { background: color-mix(in srgb, var(--ed-paper) 90%, transparent); border-bottom: 1.5px solid var(--ed-ink); backdrop-filter: saturate(120%) blur(8px); -webkit-backdrop-filter: saturate(120%) blur(8px); } :root[data-theme='editorial'] .docs-body .mk-brand { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-display); font-weight: 400; font-size: 22px; letter-spacing: 0; color: var(--ed-ink); } /* Pastille de marque : on retire le carré vert + glow, filet plat */ :root[data-theme='editorial'] .mk-brand-mark { background: none; box-shadow: none; border-radius: 2px; color: var(--ed-sun); } :root[data-theme='editorial'] .docs-body .mk-nav-link { font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ed-ink-mute); border-radius: 2px; } :root[data-theme='editorial'] .docs-body .mk-nav-link:hover { color: var(--ed-ink); background: var(--ed-paper-2); } :root[data-theme='editorial'] .docs-body .mk-nav-link[aria-current='page'] { color: var(--ed-paper); background: var(--ed-ink); } /* Sélecteur de langue + boutons en plat éditorial */ :root[data-theme='editorial'] .mk-lang, :root[data-theme='editorial'] .mk-icon-btn { border: 0.5px solid var(--ed-rule); border-radius: 2px; background: var(--ed-paper-card-2); color: var(--ed-ink-soft); } :root[data-theme='editorial'] .mk-lang:hover, :root[data-theme='editorial'] .mk-icon-btn:hover { border-color: var(--ed-ink-mute); background: var(--ed-paper-card-3); color: var(--ed-ink); } :root[data-theme='editorial'] .docs-body .mk-btn-ghost { font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border: 0.5px solid var(--ed-rule); border-radius: 2px; color: var(--ed-ink-soft); background: transparent; } :root[data-theme='editorial'] .docs-body .mk-btn-ghost:hover { border-color: var(--ed-ink-mute); color: var(--ed-ink); } :root[data-theme='editorial'] .docs-body .mk-btn-primary { font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--ed-ink); color: var(--ed-paper); border: 0.5px solid var(--ed-ink); border-radius: 2px; box-shadow: none; } :root[data-theme='editorial'] .docs-body .mk-btn-primary:hover { background: var(--ed-sun); border-color: var(--ed-sun); color: var(--ed-paper); box-shadow: none; transform: none; } /* Le toggle light/dark n'a aucun sens en beige : on le masque sur /docs */ :root[data-theme='editorial'] .docs-body [data-theme-toggle] { display: none; } /* Menu mobile marketing en papier */ :root[data-theme='editorial'] .docs-body .mk-mobile a { font-family: var(--ed-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ed-ink-soft); } /* ---- Bouton sidebar mobile ---- */ :root[data-theme='editorial'] .docs-sidebar-toggle { background: var(--ed-paper-card-2); border: 0.5px solid var(--ed-rule); border-radius: 2px; color: var(--ed-ink-soft); font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } /* ---- Sidebar / onglets d'aide : papier, item actif encre pleine ---- */ :root[data-theme='editorial'] .docs-sidebar-group-title { font-family: var(--ed-font-mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .docs-sidebar-link { font-family: var(--ed-font-sans); font-size: 13px; color: var(--ed-ink-soft); border-left: 0.5px solid transparent; border-radius: 2px; } :root[data-theme='editorial'] .docs-sidebar-link:hover { color: var(--ed-ink); background: var(--ed-paper-2); } :root[data-theme='editorial'] .docs-sidebar-link.is-active { font-weight: 500; color: var(--ed-paper); background: var(--ed-ink); border-left-color: var(--ed-ink); } :root[data-theme='editorial'] .docs-sidebar { border-right: 0.5px solid var(--ed-rule); } /* ---- TOC ---- */ :root[data-theme='editorial'] .docs-toc-title { font-family: var(--ed-font-mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .docs-toc-list { border-left: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .docs-toc-item a { font-family: var(--ed-font-sans); color: var(--ed-ink-mute); border-left: 1.5px solid transparent; } :root[data-theme='editorial'] .docs-toc-item a:hover { color: var(--ed-ink); } :root[data-theme='editorial'] .docs-toc-item a.is-active { color: var(--ed-sun); border-left-color: var(--ed-sun); } /* ---- Article : titres serif Fraunces, corps lisible ---- */ :root[data-theme='editorial'] .docs-article h1 { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-display); font-weight: 380; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); line-height: 1.05; letter-spacing: 0; color: var(--ed-ink); } :root[data-theme='editorial'] .docs-article h2 { font-family: var(--ed-font-serif); font-variation-settings: var(--ed-frax-kpi); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.7rem); line-height: 1.2; letter-spacing: 0; color: var(--ed-ink); padding-bottom: 8px; border-bottom: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .docs-article h3 { font-family: var(--ed-font-serif-italic); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); color: var(--ed-ink); } :root[data-theme='editorial'] .docs-article h4 { font-family: var(--ed-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .docs-article p, :root[data-theme='editorial'] .docs-article li { font-family: var(--ed-font-sans); color: var(--ed-ink-soft); line-height: var(--ed-leading-prose); } :root[data-theme='editorial'] .docs-article a { color: var(--ed-sun); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ed-fill-sun); } :root[data-theme='editorial'] .docs-article a:hover { text-decoration-color: var(--ed-sun); } :root[data-theme='editorial'] .docs-article hr { border-top: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .docs-article blockquote { border-left: 2px solid var(--ed-sun); background: var(--ed-paper-card-2); color: var(--ed-ink-soft); border-radius: 0; font-family: var(--ed-font-italic); font-style: italic; } :root[data-theme='editorial'] .docs-article code { font-family: var(--ed-font-mono); background: var(--ed-paper-2); border: 0.5px solid var(--ed-rule); border-radius: 2px; color: var(--ed-ink); } :root[data-theme='editorial'] .docs-article pre { background: var(--ed-paper-card-2); border: 0.5px solid var(--ed-rule); border-radius: 2px; font-family: var(--ed-font-mono); } :root[data-theme='editorial'] .docs-article pre code { background: transparent; border: none; } :root[data-theme='editorial'] .docs-article img { border: 0.5px solid var(--ed-rule); border-radius: 2px; } :root[data-theme='editorial'] .docs-article table { width: 100%; border-collapse: collapse; font-family: var(--ed-font-sans); } :root[data-theme='editorial'] .docs-article th { font-family: var(--ed-font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; color: var(--ed-ink-mute); text-align: left; padding: 8px 10px; border-bottom: 0.5px solid var(--ed-rule); } :root[data-theme='editorial'] .docs-article td { padding: 9px 10px; border-bottom: 0.5px dashed var(--ed-rule); color: var(--ed-ink-soft); } :root[data-theme='editorial'] .docs-anchor { color: var(--ed-ink-mute); } /* ---- Prev / next : cartes papier plates ---- */ :root[data-theme='editorial'] .docs-prev, :root[data-theme='editorial'] .docs-next { background: var(--ed-paper-card-2); border: 0.5px solid var(--ed-rule); border-radius: 2px; color: var(--ed-ink-soft); } :root[data-theme='editorial'] .docs-prev:hover, :root[data-theme='editorial'] .docs-next:hover { border-color: var(--ed-sun); color: var(--ed-sun); } :root[data-theme='editorial'] .docs-prevnext-label { font-family: var(--ed-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .docs-prevnext-title { font-family: var(--ed-font-serif-italic); font-style: italic; font-weight: 400; } /* ---- Footer marketing en papier sobre ---- */ :root[data-theme='editorial'] .mk-footer { border-top: 1.5px solid var(--ed-ink); background: var(--ed-paper); } :root[data-theme='editorial'] .mk-footer h4, :root[data-theme='editorial'] .mk-footer-legal summary { font-family: var(--ed-font-mono); letter-spacing: 0.16em; color: var(--ed-ink-mute); } :root[data-theme='editorial'] .mk-footer a { color: var(--ed-ink-soft); } :root[data-theme='editorial'] .mk-footer a:hover { color: var(--ed-sun); }