/* ============================================================================ SEREANE — source chromatique unique de l'application. Charte validée le 18/07/2026 : six neutres, l'or de marque et quatre états. Les alias historiques restent publics, mais ne créent plus aucune teinte. ============================================================================ */ :root{ color-scheme:dark; /* Fonds, surfaces, bordures et encres — Nuit Sereane */ --sr-bg-sunken:#030622; --sr-bg:#06081F; --sr-bg-raised:#0D1133; --sr-surface:#111640; --sr-surface-2:#171C4A; --sr-surface-hover:#171C4A; --sr-surface-active:#29286A; --sr-border:#29286A; --sr-border-strong:#29286A; --sr-border-faint:rgba(41,40,106,.55); --sr-text:#F8F6FF; --sr-text-secondary:#CBC7DC; --sr-text-muted:#ABA7C1; --sr-text-inverse:#211C18; --sr-cream:var(--sr-surface-2); /* Marque et interaction */ --sr-gold:#F3B94A; --sr-gold-strong:#FFD06A; --sr-gold-hover:#FFD06A; --sr-gold-active:#D99A27; --sr-gold-disabled:#29286A; --sr-gold-text:#FFD06A; --sr-on-gold:#211C18; --sr-gold-soft:rgba(243,185,74,.12); --sr-gold-border:rgba(243,185,74,.38); --sr-focus-ring:#F3B94A; /* États sémantiques */ --sr-positive:#42D69E; --sr-positive-text:#42D69E; --sr-positive-bg:rgba(66,214,158,.12); --sr-positive-border:rgba(66,214,158,.34); --sr-pending:#8EAAFF; --sr-pending-text:#8EAAFF; --sr-pending-bg:rgba(142,170,255,.12); --sr-pending-border:rgba(142,170,255,.34); --sr-alert:#F59E5B; --sr-alert-text:#F59E5B; --sr-alert-bg:rgba(245,158,91,.12); --sr-alert-border:rgba(245,158,91,.34); --sr-danger:#FF7A7A; --sr-danger-text:#FF7A7A; --sr-danger-bg:rgba(255,122,122,.12); --sr-danger-border:rgba(255,122,122,.34); --sr-on-danger:#211C18; /* Surfaces composées uniquement depuis les rôles canoniques */ --sr-app-background:radial-gradient(circle at 62% 35%,var(--sr-bg-raised) 0%,var(--sr-bg) 52%,var(--sr-bg-sunken) 100%); --sr-panel-gradient:linear-gradient(135deg,var(--sr-surface-2),var(--sr-bg-raised)); --sr-panel-gradient-soft:linear-gradient(145deg,var(--sr-surface),var(--sr-bg-raised)); --sr-overlay:color-mix(in srgb,var(--sr-bg-sunken) 72%,transparent); --sr-glass-tint:color-mix(in srgb,var(--sr-surface) 86%,transparent); --sr-glass-tint-2:color-mix(in srgb,var(--sr-surface-2) 72%,transparent); --sr-glass-border:var(--sr-border-faint); --sr-glass-edge:var(--sr-border-faint); --sr-glass-sheen:color-mix(in srgb,var(--sr-text) 6%,transparent); --sr-glass-hairline:color-mix(in srgb,var(--sr-text) 6%,transparent); --sr-glass-blur:22px; --sr-glass-sat:130%; /* Sidebar, badges, wallet et visionneuse */ --sr-sidebar-bg:var(--sr-bg-raised); --sr-sidebar-text:var(--sr-text-secondary); --sr-sidebar-text-active:var(--sr-text); --sr-sidebar-active-bg:var(--sr-gold-soft); --sr-sidebar-border:var(--sr-border-faint); --sr-sidebar-background:linear-gradient(180deg,var(--sr-bg-raised),var(--sr-bg-sunken)); --sr-sidebar-brand-shadow:color-mix(in srgb,var(--sr-gold) 20%,transparent); --sr-sidebar-wordmark:linear-gradient(180deg,var(--sr-gold-hover),var(--sr-gold) 58%,var(--sr-gold-active)); --sr-sidebar-tag:var(--sr-text-secondary); --sr-sidebar-hover:color-mix(in srgb,var(--sr-text) 5%,transparent); --sr-sidebar-group-hover:color-mix(in srgb,var(--sr-text) 4%,transparent); --sr-sidebar-active:linear-gradient(90deg,var(--sr-gold-soft),var(--sr-surface-2)); --sr-sidebar-active-border:var(--sr-gold-border); --sr-sidebar-group:var(--sr-text-muted); --sr-sidebar-card:linear-gradient(145deg,var(--sr-surface-2),var(--sr-bg-raised)); --sr-sidebar-dot-ring:var(--sr-bg-raised); --sr-sidebar-dot-idle:var(--sr-text-muted); --sr-sidebar-collapse:var(--sr-text-muted); --sr-sidebar-collapse-border:var(--sr-border-faint); --sr-sidebar-collapse-hover:var(--sr-surface-hover); --sr-sidebar-collapse-active:var(--sr-text); --sr-badge-text:var(--sr-text-inverse); --sr-badge-violet:var(--sr-gold); --sr-badge-alert:var(--sr-alert); --sr-badge-gold:var(--sr-gold); --sr-badge-on-gold:var(--sr-on-gold); --sr-wallet-text:var(--sr-gold-text); --sr-wallet-background:linear-gradient(145deg,var(--sr-surface-2),var(--sr-bg-raised)); --sr-wallet-border:var(--sr-gold-border); --sr-wallet-title:var(--sr-text); --sr-wallet-link-bg:var(--sr-gold-soft); --sr-wallet-link-hover:color-mix(in srgb,var(--sr-gold) 18%,transparent); --sr-live-off-bg:color-mix(in srgb,var(--sr-text-muted) 10%,transparent); --sr-live-off-border:color-mix(in srgb,var(--sr-text-muted) 24%,transparent); --sr-lightbox-overlay:color-mix(in srgb,var(--sr-bg-sunken) 88%,transparent); --sr-lightbox-image-bg:var(--sr-bg-raised); --sr-lightbox-shadow:0 24px 70px color-mix(in srgb,var(--sr-bg-sunken) 60%,transparent); --sr-lightbox-control-border:var(--sr-border); --sr-lightbox-control-bg:color-mix(in srgb,var(--sr-surface) 70%,transparent); --sr-lightbox-control-text:var(--sr-text); --sr-lightbox-control-hover:var(--sr-gold-soft); --sr-on-solid:var(--sr-text-inverse); /* Alias historiques : or, attente/info et danger */ --sr-violet:var(--sr-gold); --sr-violet-strong:var(--sr-gold-hover); --sr-violet-text:var(--sr-gold-text); --sr-violet-soft:var(--sr-gold-soft); --sr-violet-border:var(--sr-gold-border); --sr-blue:var(--sr-pending); --sr-blue-soft:var(--sr-pending-bg); --sr-pink:var(--sr-danger); --sr-pink-soft:var(--sr-danger-bg); --sr-collect-bg:var(--sr-gold-soft); --sr-collect-border:var(--sr-gold-border); --sr-collect-hover:color-mix(in srgb,var(--sr-gold) 20%,transparent); --sr-positive-halo:color-mix(in srgb,var(--sr-positive) 50%,transparent); --sr-pending-halo:color-mix(in srgb,var(--sr-pending) 50%,transparent); --sr-alert-halo:color-mix(in srgb,var(--sr-alert) 50%,transparent); /* Graphiques : cinq familles répétées, sans nouvelle couleur */ --sr-chart-grid:var(--sr-border); --sr-chart-line:var(--sr-pending); --sr-chart-violet:var(--sr-gold); --sr-chart-pink:var(--sr-danger); --sr-chart-green:var(--sr-positive); --sr-pal-1:var(--sr-gold); --sr-pal-2:var(--sr-danger); --sr-pal-3:var(--sr-positive); --sr-pal-4:var(--sr-pending); --sr-pal-5:var(--sr-alert); --sr-pal-6:var(--sr-text-secondary); --sr-pal-7:var(--sr-gold); --sr-pal-8:var(--sr-danger); --sr-pal-9:var(--sr-positive); --sr-pal-10:var(--sr-pending); --sr-pal-11:var(--sr-alert); --sr-pal-12:var(--sr-text-muted); /* Dashboard — contrat historique conservé */ --sr-dashboard-background:var(--sr-app-background); --sr-dashboard-sidebar:var(--sr-sidebar-background); --sr-dashboard-main:var(--sr-bg); --sr-dashboard-card:var(--sr-surface); --sr-dashboard-card-hover:var(--sr-surface-hover); --sr-dashboard-border:var(--sr-border); --sr-dashboard-border-strong:var(--sr-border-strong); --sr-dashboard-border-soft:var(--sr-border-faint); --sr-dashboard-gold:var(--sr-gold); --sr-dashboard-gold-soft:var(--sr-gold-soft); --sr-dashboard-gold-halo:color-mix(in srgb,var(--sr-gold) 8%,transparent); --sr-dashboard-text:var(--sr-text); --sr-dashboard-muted:var(--sr-text-secondary); --sr-dashboard-muted-soft:var(--sr-text-muted); --sr-dashboard-alert:var(--sr-alert); --sr-dashboard-alert-soft:var(--sr-alert-bg); --sr-dashboard-danger:var(--sr-danger); --sr-dashboard-danger-soft:var(--sr-danger-bg); --sr-dashboard-positive:var(--sr-positive); --sr-dashboard-positive-soft:var(--sr-positive-bg); --sr-dashboard-shadow:var(--sr-shadow-lg); --sr-dashboard-avatar-color:var(--sr-on-gold); --sr-dashboard-avatar-bg:var(--sr-gold); --sr-dashboard-avatar-border:var(--sr-gold-border); --sr-dashboard-status-border:var(--sr-border); --sr-dashboard-status-bg:var(--sr-surface); --sr-dashboard-status-pay-border:var(--sr-pending-border); --sr-dashboard-status-pay-bg:var(--sr-surface); --sr-dashboard-action-icon-color:var(--sr-gold-text); --sr-dashboard-action-icon-bg:var(--sr-surface-2); --sr-dashboard-action-icon-shadow:inset 0 0 0 1px var(--sr-gold-border); --sr-dashboard-pay-icon-color:var(--sr-pending-text); --sr-dashboard-pay-icon-bg:var(--sr-pending-bg); --sr-dashboard-pay-icon-shadow:inset 0 0 0 1px var(--sr-pending-border); --sr-dashboard-action-arrow-color:var(--sr-on-gold); --sr-dashboard-action-arrow-bg:var(--sr-gold); --sr-dashboard-action-arrow-border:var(--sr-gold-active); --sr-dashboard-pay-arrow-color:var(--sr-on-gold); --sr-dashboard-pay-arrow-bg:var(--sr-gold); --sr-dashboard-pay-arrow-border:var(--sr-gold-active); --sr-dashboard-metric-icon-color:var(--sr-gold-text); --sr-dashboard-metric-icon-bg:var(--sr-surface-2); --sr-dashboard-metric-icon-shadow:inset 0 0 0 1px var(--sr-gold-border); --sr-dashboard-accent-icon-color:var(--sr-gold-text); --sr-dashboard-accent-icon-bg:var(--sr-surface-2); --sr-dashboard-accent-icon-shadow:inset 0 0 0 1px var(--sr-gold-border); --sr-dashboard-alert-icon-color:var(--sr-alert-text); --sr-dashboard-alert-icon-bg:var(--sr-alert-bg); --sr-dashboard-alert-icon-shadow:inset 0 0 0 1px var(--sr-alert-border); --sr-dashboard-positive-icon-color:var(--sr-positive-text); --sr-dashboard-positive-icon-bg:var(--sr-positive-bg); --sr-dashboard-positive-icon-shadow:inset 0 0 0 1px var(--sr-positive-border); /* Contrôles or historiques */ --sr-gold-grad-top:var(--sr-gold-hover); --sr-gold-grad-bot:var(--sr-gold); --sr-tooltip-dark-bg:var(--sr-bg-sunken); --sr-control-gold-top:var(--sr-gold-hover); --sr-control-gold-bottom:var(--sr-gold); --sr-control-gold-deep:var(--sr-gold-active); --sr-control-on-gold:var(--sr-on-gold); --sr-control-gold-gradient:linear-gradient(180deg,var(--sr-control-gold-top),var(--sr-control-gold-bottom)); --sr-control-gold-gradient-deep:linear-gradient(145deg,var(--sr-control-gold-top),var(--sr-control-gold-deep)); /* Mini-aperçus fixes du sélecteur de thème */ --sr-preview-nuit-bg:#06081F; --sr-preview-nuit-surface:#171C4A; --sr-preview-nuit-sidebar:#0D1133; --sr-preview-nuit-text:#F8F6FF; --sr-preview-nuit-muted:#ABA7C1; --sr-preview-nuit-border:#29286A; --sr-preview-nuit-accent:#F3B94A; --sr-preview-nuit-positive:#42D69E; --sr-preview-clair-bg:#F7F3EA; --sr-preview-clair-surface:#FFFDF8; --sr-preview-clair-sidebar:#EEE7DA; --sr-preview-clair-text:#211C18; --sr-preview-clair-muted:#6E655B; --sr-preview-clair-border:#D8CEBD; --sr-preview-clair-accent:#C27E0A; --sr-preview-clair-positive:#1C7655; --sr-preview-neutre-bg:#111214; --sr-preview-neutre-surface:#202226; --sr-preview-neutre-sidebar:#181A1D; --sr-preview-neutre-text:#F4F3F0; --sr-preview-neutre-muted:#A7A49E; --sr-preview-neutre-border:#3A3D43; --sr-preview-neutre-accent:#F3B94A; --sr-preview-neutre-positive:#54D3A3; /* Typographie */ /* Chapitre typo = Session 4 (Fraunces). */ --sr-font-sans:'Avenir Next','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; --sr-sans:'Avenir Next','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif; --sr-w-regular:300; --sr-w-medium:500; --sr-w-semibold:600; --sr-w-bold:700; --sr-fs-2xs:.6875rem; --sr-fs-xs:.75rem; --sr-fs-sm:.8125rem; --sr-fs-base:.9375rem; --sr-fs-md:1.0625rem; --sr-fs-lg:1.375rem; --sr-fs-xl:1.75rem; --sr-fs-2xl:2.5rem; --sr-fs-3xl:3.25rem; --sr-lh-tight:1.1; --sr-lh-snug:1.25; --sr-lh-normal:1.5; --sr-lh-relaxed:1.65; --sr-ls-wordmark:.18em; --sr-ls-caps:.08em; --sr-ls-display:-.01em; --sr-ls-normal:0; /* Espacement, rayons et mouvement */ --sr-space-1:.25rem; --sr-space-2:.5rem; --sr-space-3:.75rem; --sr-space-4:1rem; --sr-space-5:1.25rem; --sr-space-6:1.5rem; --sr-space-8:2rem; --sr-space-10:2.5rem; --sr-space-12:3rem; --sr-space-16:4rem; --sr-radius-xs:4px; --sr-radius-sm:8px; --sr-radius-md:12px; --sr-radius-lg:16px; --sr-radius-xl:19px; --sr-radius-2xl:24px; --sr-radius-pill:999px; --sr-dur-1:160ms; --sr-dur-2:240ms; --sr-dur-3:360ms; --sr-dur-4:520ms; --sr-ease-standard:cubic-bezier(.4,0,.2,1); --sr-ease-out:cubic-bezier(0,0,.2,1); --sr-ease-spring:cubic-bezier(.34,1.56,.64,1); --sr-ease:cubic-bezier(.22,.61,.36,1); --ease:cubic-bezier(.22,1,.36,1); --ease-std:cubic-bezier(.4,0,.2,1); /* Ombres dérivées du cran encaissé */ --sr-shadow-xs:0 1px 2px color-mix(in srgb,var(--sr-bg-sunken) 28%,transparent); --sr-shadow-sm:0 4px 14px color-mix(in srgb,var(--sr-bg-sunken) 24%,transparent); --sr-shadow-md:0 10px 28px color-mix(in srgb,var(--sr-bg-sunken) 30%,transparent); --sr-shadow-lg:0 18px 44px color-mix(in srgb,var(--sr-bg-sunken) 38%,transparent); --sr-shadow-xl:0 30px 70px color-mix(in srgb,var(--sr-bg-sunken) 48%,transparent); --glass-shadow:0 18px 50px -18px color-mix(in srgb,var(--sr-bg-sunken) 62%,transparent); --sr-glow-gold:0 0 0 1px var(--sr-gold-border),0 6px 26px color-mix(in srgb,var(--sr-gold) 18%,transparent); --sr-lift:inset 0 1px 0 var(--sr-border-faint),0 16px 40px -20px color-mix(in srgb,var(--sr-bg-sunken) 72%,transparent); /* Compatibilité pages AE / File d'achat */ --fx-gold:var(--sr-gold-text); --fx-gold-bg:var(--sr-gold-soft); --fx-gold-border:var(--sr-gold-border); --fx-green:var(--sr-positive-text); --fx-green-bg:var(--sr-positive-bg); --fx-green-border:var(--sr-positive-border); --fx-blue:var(--sr-pending-text); --fx-blue-bg:var(--sr-pending-bg); --fx-blue-border:var(--sr-pending-border); --fx-blue-solid:var(--sr-pending); --fx-red:var(--sr-danger-text); --fx-red-bg:var(--sr-danger-bg); --fx-red-border:var(--sr-danger-border); --fx-panel:var(--sr-surface); --fx-panel-border:var(--sr-border); } /* Clair — valeurs normatives */ :root[data-theme="clair"]{ color-scheme:light; --sr-bg-sunken:#EEE7DA; --sr-bg:#F7F3EA; --sr-bg-raised:#FFFAF2; --sr-surface:#FFFDF8; --sr-surface-2:#F2EBDF; --sr-surface-hover:#F2EBDF; --sr-surface-active:#D8CEBD; --sr-border:#D8CEBD; --sr-border-strong:#D8CEBD; --sr-border-faint:rgba(216,206,189,.72); --sr-text:#211C18; --sr-text-secondary:#514940; --sr-text-muted:#6E655B; --sr-text-inverse:#FFFDF8; --sr-gold:#C27E0A; --sr-gold-strong:#C88412; --sr-gold-hover:#C88412; --sr-gold-active:#B97800; --sr-gold-disabled:#F2EBDF; --sr-gold-text:#754700; --sr-on-gold:#211C18; --sr-gold-soft:rgba(194,126,10,.10); --sr-gold-border:rgba(117,71,0,.45); --sr-focus-ring:#754700; --sr-positive:#1C7655; --sr-positive-text:#1C7655; --sr-positive-bg:rgba(28,118,85,.10); --sr-positive-border:rgba(28,118,85,.32); --sr-pending:#3157A4; --sr-pending-text:#3157A4; --sr-pending-bg:rgba(49,87,164,.10); --sr-pending-border:rgba(49,87,164,.32); --sr-alert:#9A4A15; --sr-alert-text:#9A4A15; --sr-alert-bg:rgba(154,74,21,.10); --sr-alert-border:rgba(154,74,21,.32); --sr-danger:#A63838; --sr-danger-text:#A63838; --sr-danger-bg:rgba(166,56,56,.10); --sr-danger-border:rgba(166,56,56,.32); --sr-on-danger:#FFFDF8; } /* Sombre neutre — valeurs normatives */ :root[data-theme="sombre-neutre"]{ color-scheme:dark; --sr-bg-sunken:#0C0D0F; --sr-bg:#111214; --sr-bg-raised:#181A1D; --sr-surface:#202226; --sr-surface-2:#292C31; --sr-surface-hover:#292C31; --sr-surface-active:#3A3D43; --sr-border:#3A3D43; --sr-border-strong:#3A3D43; --sr-border-faint:rgba(58,61,67,.70); --sr-text:#F4F3F0; --sr-text-secondary:#CBC9C4; --sr-text-muted:#A7A49E; --sr-text-inverse:#211C18; --sr-gold:#F3B94A; --sr-gold-strong:#FFD06A; --sr-gold-hover:#FFD06A; --sr-gold-active:#D99A27; --sr-gold-disabled:#292C31; --sr-gold-text:#FFD06A; --sr-on-gold:#211C18; --sr-gold-soft:rgba(243,185,74,.12); --sr-gold-border:rgba(243,185,74,.38); --sr-focus-ring:#F3B94A; --sr-positive:#54D3A3; --sr-positive-text:#54D3A3; --sr-positive-bg:rgba(84,211,163,.12); --sr-positive-border:rgba(84,211,163,.34); --sr-pending:#8EAAFF; --sr-pending-text:#8EAAFF; --sr-pending-bg:rgba(142,170,255,.12); --sr-pending-border:rgba(142,170,255,.34); --sr-alert:#F59E5B; --sr-alert-text:#F59E5B; --sr-alert-bg:rgba(245,158,91,.12); --sr-alert-border:rgba(245,158,91,.34); --sr-danger:#FF8585; --sr-danger-text:#FF8585; --sr-danger-bg:rgba(255,133,133,.12); --sr-danger-border:rgba(255,133,133,.34); --sr-on-danger:#211C18; } /* ── MODE EMBARQUÉ (25/07, Ben « quand on clique sur un menu ça ne doit pas envoyer vers une nouvelle page ») ──────────────────────────────────────────────────────────────────────────────────────── Les onglets de Paramètres qui pointaient vers une page dédiée (Mes boutiques, Configuration, Appareils, Aide) affichent désormais cette page DANS le panneau. La page reste elle-même — même HTML, même JS, isolée dans son cadre, donc zéro collision d'identifiants ni de styles entre pages. Il faut seulement lui retirer sa propre coquille : la barre latérale et la barre de titre sont déjà là, celles de la page hôte. `data-embed` est posé par chrome.js dès son exécution. */ :root[data-embed="1"] .sr-shell{ grid-template-columns:1fr; height:auto; min-height:100%; } /* ⚠️ Masquer `#loom-side` ne suffit PAS : chrome.js REMPLACE ce conteneur par son propre `