/* ============================================================================ ExpertLoop — Jetons de design (source de vérité) ---------------------------------------------------------------------------- Deux couches, dans cet ordre : 1. JETONS DE MARQUE `--el-*` : la charte. Toute nouvelle règle CSS lit ici, et nulle part ailleurs. 2. PONT LEGACY : les échelles historiques (`--neutral-*`, `--primary-*`, …) redéfinies à partir de la charte. Elles ne sont plus générées en OKLCH : chaque palier est posé explicitement, ce qui rend le rendu prévisible et permet de repeindre les ~50 CSS existants sans les réécrire. ⚠️ La palette sombre est dupliquée dans deux blocs (classe `.theme-dark` et media query système, cette dernière ne servant qu'à éviter le flash blanc avant l'hydratation de themeStore). Toute modification doit être reportée dans les DEUX blocs. ========================================================================= */ :root { /* ─── Surfaces ───────────────────────────────────────────────────────── Canvas v3 (#F7F3EC, légèrement plus dense que l'ancien #FAF7F1) : sans lui les cartes ivoire ne se détachent pas et la lumière tombe à plat. */ --el-canvas: #F7F3EC; --el-surface: #FFFDFC; --el-surface-muted: #F5F0E8; --el-surface-soft: #EEF4FF; /* ─── Encre ────────────────────────────────────────────────────────── */ --el-ink: #10265C; --el-ink-muted: #5A6480; /* Charte : #667085. Assombri au strict nécessaire pour rester lisible sur le canvas chaud (4,20:1 → 4,71:1) : il porte du texte, notamment les intitulés du panneau d'achat et les libellés de champ. */ --el-ink-subtle: #6B7280; /* ─── Marque ─────────────────────────────────────────────────────────── Le bleu du mot-symbole est la couleur de marque. Il passe AA avec du texte blanc (7,15:1), ce que le teal de la V1 ne faisait pas : l'action principale peut donc enfin porter la couleur de marque elle-même. */ --el-brand-blue: #0048CF; --el-brand-blue-hover: #003BAD; --el-brand-blue-deep: #10265C; --el-brand-blue-soft: #EEF4FF; /* SURFACES de marque, à ne pas confondre avec les couleurs de texte ci-dessus. En thème sombre `--el-brand-blue` et `--el-brand-blue-deep` s'éclaircissent pour rester lisibles EN TEXTE ; les employer comme fond y donnerait du blanc sur bleu clair. Ces deux jetons-ci restent sombres dans les deux thèmes et portent toujours `--el-on-action`. */ --el-brand-surface: #0048CF; --el-brand-surface-deep: #10265C; /* Survol des boutons clairs posés sur un aplat de marque. Constant dans les deux thèmes : ces boutons restent blancs sur bleu partout. */ --el-brand-surface-soft: #EEF4FF; /* Voile posé SUR un aplat de marque : encart de lien, pastille de partage. Un blanc très translucide, qui éclaircit le fond sans introduire de seconde couleur. Constant dans les deux thèmes, comme les surfaces qu'il habille ; le texte posé dessus reste `--el-on-action`. */ --el-on-brand-veil: rgba(255, 255, 255, 0.10); --el-on-brand-veil-border: rgba(255, 255, 255, 0.25); /* Accents secondaires. `-text` est la seule déclinaison lisible en texte courant sur fond clair ; la valeur nominale sert aux aplats et aux pastilles, jamais au texte fin. */ --el-orange: #F47A3A; --el-orange-text: #B14A12; --el-orange-soft: #FFF1E7; --el-purple: #7A5CE7; --el-purple-text: #5B3FC4; --el-purple-soft: #F3EEFF; /* Pastilles et aplats d'accent portant du texte ou une icône blanche. `--el-orange` (2,73:1 avec blanc) et `--el-purple` en thème sombre ne passent pas : ces deux-ci sont assez soutenus pour, et ne varient pas d'un thème à l'autre. */ --el-orange-surface: #B14A12; --el-purple-surface: #5B3FC4; --el-amber: #C58B48; --el-danger: #C94444; /* ─── Bordures et focus ────────────────────────────────────────────── */ --el-border: #E8E0D6; /* Charte : #C9BFB2, soit 1,79:1 — sous le 3:1 exigé pour un contrôle (WCAG 1.4.11). Or ce jeton borde les boutons secondaires, les cartes de prestation et les champs. Assombri au strict nécessaire : 3,38:1 sur surface, 3,21:1 sur canvas. `--el-border` reste le trait de séparation discret, non soumis à ce seuil. */ --el-border-strong: #94897A; --el-focus: #0048CF; /* ─── Rôles d'interaction ────────────────────────────────────────────── Le vert n'est plus une couleur de marque : il ne reste que pour le succès métier réel (voir les échelles `--success-*` du pont legacy). */ --el-action: var(--el-brand-blue); --el-action-hover: var(--el-brand-blue-hover); --el-on-action: #FFFFFF; --el-link: var(--el-brand-blue); --el-on-accent: #FFFFFF; /* ─── Typographie ────────────────────────────────────────────────────── `:root` reste à 14px pour ne pas décaler les écrans legacy calibrés en rem. Les composants `el-*` posent donc leur taille explicitement : --el-font-size-body vaut 16px réels. */ --el-font-sans: "Manrope Variable", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --el-font-size-2xs: 0.857143rem; /* 12px — méta, réservé */ --el-font-size-sm: 1rem; /* 14px — texte secondaire */ --el-font-size-body: 1.142857rem; /* 16px — texte courant */ --el-font-size-lg: 1.285714rem; /* 18px */ --el-font-size-xl: 1.571429rem; /* 22px */ --el-font-size-2xl: 2rem; /* 28px */ --el-font-size-3xl: 2.571429rem; /* 36px */ /* Les deux paliers hauts n'existent que pour les accroches de la landing et de la boutique. Sans eux, le titre plafonnait à 36px là où la maquette compose à ~52px : la hiérarchie s'écrasait et la page paraissait plate. */ --el-font-size-4xl: 3.142857rem; /* 44px */ --el-font-size-5xl: 3.714286rem; /* 52px */ --el-line-tight: 1.25; /* Réservé aux paliers 4xl et 5xl : à cette taille, 1.25 ouvre trop les interlignes et disloque le bloc de titre. */ --el-line-display: 1.08; --el-line-body: 1.55; --el-weight-regular: 400; --el-weight-medium: 500; --el-weight-semibold: 600; --el-weight-bold: 700; /* ─── Espacements ──────────────────────────────────────────────────── */ --el-space-1: 4px; --el-space-2: 8px; --el-space-3: 12px; --el-space-4: 16px; --el-space-5: 20px; --el-space-6: 24px; --el-space-8: 32px; --el-space-10: 40px; --el-space-12: 48px; --el-space-16: 64px; /* ─── Formes ───────────────────────────────────────────────────────── */ --el-radius-sm: 10px; --el-radius-md: 16px; --el-radius-lg: 20px; --el-radius-pill: 999px; /* Ombres teintées de l'encre bleue, jamais du noir pur : sur le canvas chaud, le noir grise la surface au lieu de la détacher. */ --el-shadow-soft: 0 10px 30px rgba(16, 38, 92, 0.10); --el-shadow-card: 0 2px 10px rgba(16, 38, 92, 0.07); /* ─── Mise en page ─────────────────────────────────────────────────── */ --el-content-max: 1440px; --el-gutter: var(--el-space-5); /* mobile */ --el-touch-target: 44px; /* Points de rupture : non utilisables dans @media (limite CSS), posés ici comme référence unique pour la documentation et le code JS. */ --el-bp-sm: 640px; --el-bp-md: 768px; --el-bp-lg: 1024px; --el-bp-xl: 1280px; /* ─── Mouvement ────────────────────────────────────────────────────── */ --el-motion-fast: 150ms; --el-motion: 200ms; --el-motion-slow: 250ms; --el-easing: cubic-bezier(0.4, 0, 0.2, 1); /* ══════════════════════════════════════════════════════════════════════ REFONTE v3 — système de lumière (docs/refonte-ui-v3/README.md) Source unique en haut à gauche, 146°. Aucun composant n'écrit de dégradé ni d'ombre littérale : tout passe par ces jetons. ══════════════════════════════════════════════════════════════════════ */ /* ─── Lumière (source en haut à gauche, 146°) ────────────────────── */ --el-sheen: linear-gradient(146deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 42%, rgba(22,38,90,.028) 100%); --el-sheen-deep: linear-gradient(146deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 44%, rgba(0,0,0,.10) 100%); --el-bevel: inset 1px 1px 0 rgba(255,255,255,.85), inset -1px -1px 0 rgba(22,38,90,.045); --el-bevel-deep: inset 1px 1px 0 rgba(255,255,255,.22), inset -1px -1px 0 rgba(0,0,0,.14); --el-bevel-inset: inset 1px 1px 2px rgba(22,38,90,.05), inset -1px -1px 0 rgba(255,255,255,.80); --el-lift-1: 1px 1px 2px rgba(22,38,90,.04), 2px 3px 8px -3px rgba(22,38,90,.07); --el-lift-2: 1px 2px 3px rgba(22,38,90,.05), 4px 8px 18px -8px rgba(22,38,90,.13); --el-lift-3: 2px 3px 6px rgba(22,38,90,.06), 8px 16px 34px -14px rgba(22,38,90,.20); /* ─── Surfaces neutres éclairées ─────────────────────────────────── */ --el-surface-lit: linear-gradient(146deg, #FFFFFF 0%, #FFFDFA 50%, #FAF6EF 100%); --el-surface-lit-2: linear-gradient(146deg, #FFFFFF 0%, #F9F5EE 55%, #F2EDE4 100%); --el-veil-neutral: linear-gradient(146deg, #FAF6F0 0%, #F2EDE4 45%, #EAE3D7 100%); --el-veil-success: linear-gradient(146deg, #F7FCF9 0%, #EFF7F2 55%, #E4F0E9 100%); --el-veil-error: linear-gradient(146deg, #FEF5F3 0%, #FBEEEC 55%, #F5DFDB 100%); /* ─── Indigo : action, marque, lien ──────────────────────────────── */ --el-blue-lit: #3A63D6; --el-blue-body: #22459F; --el-blue-shade: #152F79; --el-blue-ink: #1C3E96; --el-blue-rim: #D3DDF4; --el-blue-grad: linear-gradient(146deg, #3A63D6 0%, #22459F 55%, #152F79 100%); --el-veil-blue: linear-gradient(146deg, #FAFCFF 0%, #F1F5FD 55%, #E9EEFA 100%); /* ─── Orange : accent de marque, élan, éditorial ─────────────────── */ --el-orange-lit: #F99A63; --el-orange-body: #EE7431; --el-orange-shade: #C4520F; --el-orange-ink: #A9541F; --el-orange-rim: #F2DCC5; --el-orange-grad: linear-gradient(146deg, #F99A63 0%, #EE7431 55%, #C4520F 100%); --el-veil-orange: linear-gradient(146deg, #FEFAF6 0%, #FDF3EA 55%, #F8E6D5 100%); /* ─── Violet : dialogue, assistance, IA ──────────────────────────── */ --el-purple-lit: #9B7FF0; --el-purple-body: #7A5CE7; --el-purple-shade: #5433B8; --el-purple-ink: #5B3FC4; --el-purple-rim: #DFD5FA; --el-purple-grad: linear-gradient(146deg, #9B7FF0 0%, #7A5CE7 55%, #5433B8 100%); --el-veil-purple: linear-gradient(146deg, #FCFAFF 0%, #F5F1FE 55%, #EDE6FB 100%); /* ─── Ocre : attente, échéance, délai ────────────────────────────── */ --el-ochre-lit: #E0B45F; --el-ochre-body: #C08A28; --el-ochre-shade: #8E620F; --el-ochre-ink: #8A6110; --el-ochre-rim: #EFE0BE; --el-ochre-grad: linear-gradient(146deg, #E0B45F 0%, #C08A28 55%, #8E620F 100%); --el-veil-ochre: linear-gradient(146deg, #FEFBF3 0%, #FBF4E3 55%, #F4E7C8 100%); /* ─── Cadres chauds ──────────────────────────────────────────────── */ --el-rim: #E6DFD3; --el-rim-soft: #F0EAE0; /* ─── Canvas v3 — généralisé au lot 2, l'alias du lot 1 est conservé ── */ --el-canvas-chat: var(--el-canvas); /* ─── Jetons découverts au lot 1 (ChatCard) — valeurs de la maquette ── Encres et filets succès / erreur : les familles du README ne couvrent que indigo / orange / violet / ocre, or les tonalités de carte du fil ont besoin d'un texte et d'un bord succès et erreur. */ --el-success-ink: #186640; --el-success-rim: #C9E4D5; --el-error-ink: #912A23; --el-error-rim: #EFCDC8; /* Trait d'accent des cartes du fil : lui aussi éclairé, clair en haut, saturé en bas. La maquette l'écrit à 180° ; posé à 146° ici car sur un trait de 3 px les deux angles sont indiscernables et l'audit n'admet qu'un seul angle de lumière. */ --el-edge-blue: linear-gradient(146deg, #3A63D6 0%, #152F79 100%); --el-edge-hero: linear-gradient(146deg, #5C82E6 0%, #152F79 100%); --el-edge-success: linear-gradient(146deg, #3EA372 0%, #186640 100%); --el-edge-ochre: linear-gradient(146deg, #E0B45F 0%, #8E620F 100%); --el-edge-error: linear-gradient(146deg, #CE6055 0%, #912A23 100%); --el-edge-muted: linear-gradient(146deg, #D8D0C1 0%, #B4AB9A 100%); /* Corps du livrable (variante hero) : ivoire très légèrement bleuté */ --el-surface-hero: linear-gradient(146deg, #FFFFFF 0%, #FCFAFF 55%, #F5F5FC 100%); /* Danger FORT (lot 8) — réservé aux actions IRRÉVERSIBLES (suppression définitive, refus et libération des fonds…). Le danger discret (voile + encre) reste la valeur par défaut ; ce volume rouge est un signal rare. Blanc AA dès l'arrêt clair (4,8:1 sur #C94444). */ --el-danger-grad: linear-gradient(146deg, #C94444 0%, #A93636 55%, #7E2222 100%); --el-danger-shade: #7E2222; /* Halo de la puce du journal système : anneau, pas une ombre portée — la règle « toute ombre est décalée » vise les ombres, pas les anneaux. */ --el-halo-dot: 0 0 0 3px rgba(255, 255, 255, 0.5); /* Halo de focus du champ de saisie relevé (anneau, même statut) */ --el-halo-focus: 0 0 0 3px rgba(0, 72, 207, 0.16); /* ─── Jetons découverts au lot 5 (marketing) ────────────────────────── Volume du hero et des grandes bandes marketing : même trio indigo que --el-blue-grad, mais la rampe plonge jusqu'au bleu nuit (#10265C). Sur une surface d'un demi-écran, la rampe standard s'épuisait à mi-hauteur et le bloc se lisait encore comme un aplat. */ --el-hero-grad: linear-gradient(146deg, #3A63D6 0%, #22459F 48%, #10265C 100%); /* Scrim de lisibilité du hero quand la photo tient le fond (768-1023px) : le fondu suit la lisière VERTICALE de la photo, d'où le 100deg — exception assumée à l'angle unique de 146°, qui ferait remonter le voile sur le visage du sujet. Ce n'est pas une surface éclairée mais un voile de protection du texte (même statut que les halos). */ --el-hero-scrim: linear-gradient(100deg, #3A63D6 0%, #22459F 40%, rgba(34, 69, 159, 0.55) 58%, rgba(34, 69, 159, 0) 76%); /* ══════════════════════════════════════════════════════════════════════ PONT LEGACY — ne pas consommer dans les nouveaux composants ══════════════════════════════════════════════════════════════════════ */ /* Neutres : ivoire chaud en surface, encre bleutée en texte */ --neutral-0: #FFFFFF; --neutral-50: #FAF7F1; --neutral-75: #FFFDFC; --neutral-100: #F5F0E8; --neutral-150: #EFE8DE; --neutral-200: #E8E0D6; --neutral-300: #C9BFB2; --neutral-400: #8A8FA0; --neutral-500: #5A6480; --neutral-600: #414D6E; --neutral-650: #2F3C61; --neutral-700: #1E2F58; --neutral-800: #10265C; --neutral-900: #0A1B42; /* Primaire : le bleu de marque. Le palier 500 porte les aplats d'action et passe AA avec du texte blanc (7,15:1). */ --primary-50: #F5F8FF; --primary-100: #EEF4FF; --primary-200: #D3E2FF; --primary-300: #A8C4FF; --primary-400: #4C82F0; --primary-500: #0048CF; --primary-600: #003BAD; --primary-700: #002F8C; --primary-800: #10265C; --primary-900: #0A1B42; --primary-500-rgb: 0, 72, 207; /* Secondaire : bleu profond, pour les fonds structurants et les titres */ --secondary-50: #F4F6FC; --secondary-100: #E5EAF7; --secondary-200: #C7D2EC; --secondary-300: #93A5D3; --secondary-400: #4459A0; --secondary-500: #10265C; --secondary-600: #0D1F4C; --secondary-700: #0A183C; --secondary-800: #07122C; /* Succès */ --success-50: #F1F8F3; --success-100: #DCEFE2; --success-200: #BCE0C8; --success-300: #8FCBA4; --success-400: #4FA871; --success-500: #2E7C55; --success-600: #236344; --success-700: #1B5336; --success-800: #14402A; --success-900: #0E2E1F; /* Attente : re-dérivée de la famille OCRE (bascule du lot 2, README §2). 50-200 suivent le voile ocre, 500 est le corps, 600 l'encre. */ --warning-50: #FEFBF3; --warning-100: #FBF4E3; --warning-200: #F4E7C8; --warning-300: #E8D5A1; --warning-400: #D5AF63; --warning-500: #C08A28; --warning-600: #8A6110; --warning-700: #6F4E0C; --warning-800: #533A09; --warning-900: #3A2906; /* Erreur */ --error-50: #FCF2F2; --error-100: #F7DEDE; --error-200: #EFBEBE; --error-300: #E29494; --error-400: #D66666; --error-500: #C94444; --error-600: #A93636; --error-700: #8A2A2A; --error-800: #661F1F; --error-900: #4A1616; /* Information : bleu ardoise désaturé. Volontairement terne pour ne pas entrer en concurrence avec le bleu de marque, nettement plus vif. */ --info-50: #F1F5F8; --info-100: #DEE9F0; --info-200: #C2D6E2; --info-300: #9BBACD; --info-400: #6D96AF; --info-500: #3F7391; --info-600: #325D76; --info-700: #274A5E; --info-800: #1D3848; --info-900: #142833; /* Alias consommés par des CSS existants sans définition préalable */ --danger-50: var(--error-50); --danger-400: var(--error-400); --danger-700: var(--error-700); --accent-100: var(--primary-100); --accent-400: var(--primary-400); --accent-500: var(--primary-500); --accent-600: var(--primary-600); --accent-700: var(--primary-700); --gray-50: var(--neutral-50); --gray-200: var(--neutral-200); --gray-500: var(--neutral-500); --gray-600: var(--neutral-600); --color-gray-500: var(--neutral-500); --color-gray-600: var(--neutral-600); /* Alias sémantiques */ --color-primary: var(--primary-500); --color-primary-hover: var(--primary-600); --color-primary-dark: var(--primary-700); --color-text: var(--el-ink); --color-text-secondary: var(--el-ink-muted); --color-text-muted: var(--el-ink-muted); --color-border: var(--el-border); --color-background: var(--el-canvas); --color-background-muted: var(--el-surface-muted); --color-bg: var(--el-canvas); --color-bg-secondary: var(--el-surface); --color-bg-tertiary: var(--el-surface-muted); --color-bg-hover: var(--el-surface-muted); --surface-primary: var(--el-surface); --color-danger: var(--el-danger); --color-warning: var(--warning-600); --color-warning-bg: var(--warning-100); --color-warning-text: var(--warning-700); /* Cartes et espacements legacy */ --card-radius: var(--el-radius-md); --card-shadow: var(--el-shadow-card); --card-shadow-hover: var(--el-shadow-soft); --space-xs: 0.375rem; --space-sm: 0.625rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --touch-target: var(--el-touch-target); /* Réglages de police de la racine — 14px conservés volontairement */ font-family: var(--el-font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; color-scheme: light; } /* ============================================================================ THÈME SOMBRE — bloc 1/2 (appliqué par themeStore via une classe) ========================================================================= */ :root.theme-dark { --el-canvas: #0B1020; --el-surface: #131A31; --el-surface-muted: #1B2440; --el-surface-soft: #16224A; --el-ink: #E8ECF7; --el-ink-muted: #A8B2CC; --el-ink-subtle: #8B96B3; /* Le bleu de marque s'éclaircit : #0048CF sur fond nuit tombe à 2,2:1. `-deep`, qui porte du texte fort en clair, s'inverse donc lui aussi. */ --el-brand-blue: #5B8DEF; --el-brand-blue-hover: #7BA5F5; --el-brand-blue-deep: #A8C4FF; --el-brand-blue-soft: #16224A; /* Les surfaces, elles, restent sombres : c'est ce qui garde le texte blanc lisible sur le hero, le bandeau et le pied de page. */ --el-brand-surface: #2F62D9; --el-brand-surface-deep: #0D1F4C; --el-brand-surface-soft: #EEF4FF; /* Le voile suit ses surfaces : elles restent sombres en thème sombre, le blanc translucide y garde donc le même rôle. */ --el-on-brand-veil: rgba(255, 255, 255, 0.10); --el-on-brand-veil-border: rgba(255, 255, 255, 0.25); --el-orange: #F4915C; --el-orange-text: #F9B48A; --el-orange-soft: #33210F; --el-purple: #9B85F0; --el-purple-text: #B9A7F7; --el-purple-soft: #241C46; --el-orange-surface: #B14A12; --el-purple-surface: #5B3FC4; --el-amber: #D9A05F; --el-danger: #E07A7A; --el-border: #26304D; --el-border-strong: #3A4668; --el-focus: #5B8DEF; --el-action: #2F62D9; --el-action-hover: #3E74EE; --el-on-action: #FFFFFF; --el-link: #7BA5F5; --el-on-accent: #FFFFFF; --el-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45); --el-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35); --neutral-0: #080D19; --neutral-50: #0B1020; --neutral-75: #131A31; --neutral-100: #1B2440; --neutral-150: #202B4B; --neutral-200: #26304D; --neutral-300: #3A4668; --neutral-400: #6B7799; --neutral-500: #A8B2CC; --neutral-600: #C3CBDE; --neutral-650: #D0D6E6; --neutral-700: #DCE1EE; --neutral-800: #E8ECF7; --neutral-900: #F4F6FB; --primary-50: #0D1633; --primary-100: #16224A; --primary-200: #1E2F63; --primary-300: #2A4189; --primary-400: #3E63C4; --primary-500: #5B8DEF; --primary-600: #7BA5F5; --primary-700: #A0C0FA; --primary-800: #C4D8FD; --primary-900: #E2EDFE; --primary-500-rgb: 91, 141, 239; --secondary-50: #0C1226; --secondary-100: #141C38; --secondary-200: #1D284C; --secondary-300: #2C3B6B; --secondary-400: #45599B; --secondary-500: #6E85C4; --secondary-600: #90A4D8; --secondary-700: #B4C3E8; --secondary-800: #D5DEF3; --success-50: #0E1F16; --success-100: #123024; --success-200: #184430; --success-300: #216248; --success-400: #2E8B62; --success-500: #45B37E; --success-600: #6BC79A; --success-700: #96D9B7; --success-800: #C0E9D3; --success-900: #E0F4E9; --warning-50: #201907; --warning-100: #33290F; --warning-200: #4A3B15; --warning-300: #6B561E; --warning-400: #96782A; --warning-500: #C89F3C; --warning-600: #DDB964; --warning-700: #E9CE8F; --warning-800: #F2E2BA; --warning-900: #F9F0DB; --error-50: #241313; --error-100: #3A1D1D; --error-200: #532727; --error-300: #753939; --error-400: #A15050; --error-500: #D46B6B; --error-600: #E08989; --error-700: #EDACAC; --error-800: #F5CCCC; --error-900: #FAE3E3; --info-50: #101B21; --info-100: #172A33; --info-200: #1F3B47; --info-300: #2C5567; --info-400: #3F7893; --info-500: #5A9BBA; --info-600: #7FB5CD; --info-700: #A6CCDE; --info-800: #C9E0EC; --info-900: #E4F0F6; --color-warning: var(--warning-500); /* ─── Refonte v3 — JEU SOMBRE ÉCLAIRÉ (lot 6) ───────────────────────── La lumière s'inverse en logique, pas en valeurs : source toujours en haut à gauche, surfaces recevant une lumière ténue (jamais de blanc franc). Remplace les replis plats posés au lot 1. */ --el-sheen: linear-gradient(146deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 42%, rgba(0,0,0,.14) 100%); --el-sheen-deep: linear-gradient(146deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 44%, rgba(0,0,0,.18) 100%); --el-bevel: inset 1px 1px 0 rgba(255,255,255,.10), inset -1px -1px 0 rgba(0,0,0,.40); --el-bevel-deep: inset 1px 1px 0 rgba(255,255,255,.12), inset -1px -1px 0 rgba(0,0,0,.45); --el-bevel-inset: inset 1px 1px 2px rgba(0,0,0,.45), inset -1px -1px 0 rgba(255,255,255,.05); --el-lift-1: 1px 1px 2px rgba(0,0,0,.30), 2px 3px 8px -3px rgba(0,0,0,.40); --el-lift-2: 1px 2px 3px rgba(0,0,0,.35), 4px 8px 18px -8px rgba(0,0,0,.50); --el-lift-3: 2px 3px 6px rgba(0,0,0,.40), 8px 16px 34px -14px rgba(0,0,0,.60); --el-surface-lit: linear-gradient(146deg, #1B2440 0%, #131A31 50%, #0E1428 100%); --el-surface-lit-2: linear-gradient(146deg, #202B4B 0%, #1B2440 55%, #141C36 100%); --el-veil-neutral: linear-gradient(146deg, #232B47 0%, #1B2440 45%, #151D38 100%); --el-veil-success: linear-gradient(146deg, #14301F 0%, #102818 55%, #0C2013 100%); --el-veil-error: linear-gradient(146deg, #3A1D1D 0%, #301717 55%, #251212 100%); --el-blue-ink: var(--el-brand-blue); --el-blue-rim: #2A4189; --el-blue-grad: linear-gradient(146deg, #3A63D6 0%, #22459F 55%, #152F79 100%); --el-veil-blue: linear-gradient(146deg, #1B2A55 0%, #16224A 55%, #101A3C 100%); --el-orange-ink: var(--el-orange-text); --el-orange-rim: #4A3413; --el-orange-grad: linear-gradient(146deg, #F99A63 0%, #EE7431 55%, #C4520F 100%); --el-veil-orange: linear-gradient(146deg, #3A2812 0%, #33210F 55%, #29190B 100%); --el-purple-ink: var(--el-purple-text); --el-purple-rim: #35296B; --el-purple-grad: linear-gradient(146deg, #9B7FF0 0%, #7A5CE7 55%, #5433B8 100%); --el-veil-purple: linear-gradient(146deg, #2B2352 0%, #241C46 55%, #1C1538 100%); --el-ochre-ink: var(--warning-600); --el-ochre-rim: #4A3B15; --el-ochre-grad: linear-gradient(146deg, #E0B45F 0%, #C08A28 55%, #8E620F 100%); --el-veil-ochre: linear-gradient(146deg, #3B3013 0%, #33290F 55%, #28200B 100%); --el-rim: #26304D; --el-rim-soft: #202B4B; --el-canvas-chat: var(--el-canvas); --el-success-ink: var(--success-500); --el-success-rim: #1E4A33; --el-error-ink: var(--error-500); --el-error-rim: #4E2626; --el-edge-blue: linear-gradient(146deg, #3A63D6 0%, #152F79 100%); --el-edge-hero: linear-gradient(146deg, #5C82E6 0%, #152F79 100%); --el-edge-success: linear-gradient(146deg, #3EA372 0%, #186640 100%); --el-edge-ochre: linear-gradient(146deg, #E0B45F 0%, #8E620F 100%); --el-edge-error: linear-gradient(146deg, #CE6055 0%, #912A23 100%); --el-edge-muted: linear-gradient(146deg, #4A5578 0%, #333D5C 100%); --el-surface-hero: linear-gradient(146deg, #1C2547 0%, #161E3B 55%, #10172E 100%); /* Danger fort : même rampe qu'en clair, le blanc y reste AA */ --el-danger-grad: linear-gradient(146deg, #C94444 0%, #A93636 55%, #7E2222 100%); --el-danger-shade: #7E2222; --el-halo-dot: 0 0 0 3px rgba(255, 255, 255, 0.06); --el-halo-focus: 0 0 0 3px rgba(91, 141, 239, 0.30); /* Lot 5 — marketing en sombre : volume conservé, plus de repli plat. Le scrim garde son 100° (voile de protection suivant la lisière de la photo — exception à l'angle unique, justifiée au bloc clair). */ --el-hero-grad: linear-gradient(146deg, #2F62D9 0%, #1E3C8F 48%, #101A3C 100%); --el-hero-scrim: linear-gradient(100deg, #1E3C8F 0%, #1E3C8F 40%, rgba(30, 60, 143, 0.55) 58%, rgba(30, 60, 143, 0) 76%); color-scheme: dark; } /* ============================================================================ THÈME SOMBRE — bloc 2/2 (préférence système, avant hydratation du store) Miroir strict du bloc 1. Toute modification doit être reportée ici. ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not(.theme-light):not(.theme-dark) { --el-canvas: #0B1020; --el-surface: #131A31; --el-surface-muted: #1B2440; --el-surface-soft: #16224A; --el-ink: #E8ECF7; --el-ink-muted: #A8B2CC; --el-ink-subtle: #8B96B3; /* Le bleu de marque s'éclaircit : #0048CF sur fond nuit tombe à 2,2:1. `-deep`, qui porte du texte fort en clair, s'inverse donc lui aussi. */ --el-brand-blue: #5B8DEF; --el-brand-blue-hover: #7BA5F5; --el-brand-blue-deep: #A8C4FF; --el-brand-blue-soft: #16224A; /* Les surfaces, elles, restent sombres : c'est ce qui garde le texte blanc lisible sur le hero, le bandeau et le pied de page. */ --el-brand-surface: #2F62D9; --el-brand-surface-deep: #0D1F4C; --el-brand-surface-soft: #EEF4FF; /* Le voile suit ses surfaces : elles restent sombres en thème sombre, le blanc translucide y garde donc le même rôle. */ --el-on-brand-veil: rgba(255, 255, 255, 0.10); --el-on-brand-veil-border: rgba(255, 255, 255, 0.25); --el-orange: #F4915C; --el-orange-text: #F9B48A; --el-orange-soft: #33210F; --el-purple: #9B85F0; --el-purple-text: #B9A7F7; --el-purple-soft: #241C46; --el-orange-surface: #B14A12; --el-purple-surface: #5B3FC4; --el-amber: #D9A05F; --el-danger: #E07A7A; --el-border: #26304D; --el-border-strong: #3A4668; --el-focus: #5B8DEF; --el-action: #2F62D9; --el-action-hover: #3E74EE; --el-on-action: #FFFFFF; --el-link: #7BA5F5; --el-on-accent: #FFFFFF; --el-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.45); --el-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35); --neutral-0: #080D19; --neutral-50: #0B1020; --neutral-75: #131A31; --neutral-100: #1B2440; --neutral-150: #202B4B; --neutral-200: #26304D; --neutral-300: #3A4668; --neutral-400: #6B7799; --neutral-500: #A8B2CC; --neutral-600: #C3CBDE; --neutral-650: #D0D6E6; --neutral-700: #DCE1EE; --neutral-800: #E8ECF7; --neutral-900: #F4F6FB; --primary-50: #0D1633; --primary-100: #16224A; --primary-200: #1E2F63; --primary-300: #2A4189; --primary-400: #3E63C4; --primary-500: #5B8DEF; --primary-600: #7BA5F5; --primary-700: #A0C0FA; --primary-800: #C4D8FD; --primary-900: #E2EDFE; --primary-500-rgb: 91, 141, 239; --secondary-50: #0C1226; --secondary-100: #141C38; --secondary-200: #1D284C; --secondary-300: #2C3B6B; --secondary-400: #45599B; --secondary-500: #6E85C4; --secondary-600: #90A4D8; --secondary-700: #B4C3E8; --secondary-800: #D5DEF3; --success-50: #0E1F16; --success-100: #123024; --success-200: #184430; --success-300: #216248; --success-400: #2E8B62; --success-500: #45B37E; --success-600: #6BC79A; --success-700: #96D9B7; --success-800: #C0E9D3; --success-900: #E0F4E9; --warning-50: #201907; --warning-100: #33290F; --warning-200: #4A3B15; --warning-300: #6B561E; --warning-400: #96782A; --warning-500: #C89F3C; --warning-600: #DDB964; --warning-700: #E9CE8F; --warning-800: #F2E2BA; --warning-900: #F9F0DB; --error-50: #241313; --error-100: #3A1D1D; --error-200: #532727; --error-300: #753939; --error-400: #A15050; --error-500: #D46B6B; --error-600: #E08989; --error-700: #EDACAC; --error-800: #F5CCCC; --error-900: #FAE3E3; --info-50: #101B21; --info-100: #172A33; --info-200: #1F3B47; --info-300: #2C5567; --info-400: #3F7893; --info-500: #5A9BBA; --info-600: #7FB5CD; --info-700: #A6CCDE; --info-800: #C9E0EC; --info-900: #E4F0F6; --color-warning: var(--warning-500); /* ─── Refonte v3 — JEU SOMBRE ÉCLAIRÉ (lot 6) ───────────────────────── La lumière s'inverse en logique, pas en valeurs : source toujours en haut à gauche, surfaces recevant une lumière ténue (jamais de blanc franc). Remplace les replis plats posés au lot 1. */ --el-sheen: linear-gradient(146deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 42%, rgba(0,0,0,.14) 100%); --el-sheen-deep: linear-gradient(146deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 44%, rgba(0,0,0,.18) 100%); --el-bevel: inset 1px 1px 0 rgba(255,255,255,.10), inset -1px -1px 0 rgba(0,0,0,.40); --el-bevel-deep: inset 1px 1px 0 rgba(255,255,255,.12), inset -1px -1px 0 rgba(0,0,0,.45); --el-bevel-inset: inset 1px 1px 2px rgba(0,0,0,.45), inset -1px -1px 0 rgba(255,255,255,.05); --el-lift-1: 1px 1px 2px rgba(0,0,0,.30), 2px 3px 8px -3px rgba(0,0,0,.40); --el-lift-2: 1px 2px 3px rgba(0,0,0,.35), 4px 8px 18px -8px rgba(0,0,0,.50); --el-lift-3: 2px 3px 6px rgba(0,0,0,.40), 8px 16px 34px -14px rgba(0,0,0,.60); --el-surface-lit: linear-gradient(146deg, #1B2440 0%, #131A31 50%, #0E1428 100%); --el-surface-lit-2: linear-gradient(146deg, #202B4B 0%, #1B2440 55%, #141C36 100%); --el-veil-neutral: linear-gradient(146deg, #232B47 0%, #1B2440 45%, #151D38 100%); --el-veil-success: linear-gradient(146deg, #14301F 0%, #102818 55%, #0C2013 100%); --el-veil-error: linear-gradient(146deg, #3A1D1D 0%, #301717 55%, #251212 100%); --el-blue-ink: var(--el-brand-blue); --el-blue-rim: #2A4189; --el-blue-grad: linear-gradient(146deg, #3A63D6 0%, #22459F 55%, #152F79 100%); --el-veil-blue: linear-gradient(146deg, #1B2A55 0%, #16224A 55%, #101A3C 100%); --el-orange-ink: var(--el-orange-text); --el-orange-rim: #4A3413; --el-orange-grad: linear-gradient(146deg, #F99A63 0%, #EE7431 55%, #C4520F 100%); --el-veil-orange: linear-gradient(146deg, #3A2812 0%, #33210F 55%, #29190B 100%); --el-purple-ink: var(--el-purple-text); --el-purple-rim: #35296B; --el-purple-grad: linear-gradient(146deg, #9B7FF0 0%, #7A5CE7 55%, #5433B8 100%); --el-veil-purple: linear-gradient(146deg, #2B2352 0%, #241C46 55%, #1C1538 100%); --el-ochre-ink: var(--warning-600); --el-ochre-rim: #4A3B15; --el-ochre-grad: linear-gradient(146deg, #E0B45F 0%, #C08A28 55%, #8E620F 100%); --el-veil-ochre: linear-gradient(146deg, #3B3013 0%, #33290F 55%, #28200B 100%); --el-rim: #26304D; --el-rim-soft: #202B4B; --el-canvas-chat: var(--el-canvas); --el-success-ink: var(--success-500); --el-success-rim: #1E4A33; --el-error-ink: var(--error-500); --el-error-rim: #4E2626; --el-edge-blue: linear-gradient(146deg, #3A63D6 0%, #152F79 100%); --el-edge-hero: linear-gradient(146deg, #5C82E6 0%, #152F79 100%); --el-edge-success: linear-gradient(146deg, #3EA372 0%, #186640 100%); --el-edge-ochre: linear-gradient(146deg, #E0B45F 0%, #8E620F 100%); --el-edge-error: linear-gradient(146deg, #CE6055 0%, #912A23 100%); --el-edge-muted: linear-gradient(146deg, #4A5578 0%, #333D5C 100%); --el-surface-hero: linear-gradient(146deg, #1C2547 0%, #161E3B 55%, #10172E 100%); /* Danger fort : même rampe qu'en clair, le blanc y reste AA */ --el-danger-grad: linear-gradient(146deg, #C94444 0%, #A93636 55%, #7E2222 100%); --el-danger-shade: #7E2222; --el-halo-dot: 0 0 0 3px rgba(255, 255, 255, 0.06); --el-halo-focus: 0 0 0 3px rgba(91, 141, 239, 0.30); /* Lot 5 — marketing en sombre : volume conservé, plus de repli plat. Le scrim garde son 100° (voile de protection suivant la lisière de la photo — exception à l'angle unique, justifiée au bloc clair). */ --el-hero-grad: linear-gradient(146deg, #2F62D9 0%, #1E3C8F 48%, #101A3C 100%); --el-hero-scrim: linear-gradient(100deg, #1E3C8F 0%, #1E3C8F 40%, rgba(30, 60, 143, 0.55) 58%, rgba(30, 60, 143, 0) 76%); color-scheme: dark; } } /* ─── Gouttières responsives ────────────────────────────────────────────── */ @media (min-width: 768px) { :root { --el-gutter: var(--el-space-8); } } @media (min-width: 1024px) { :root { --el-gutter: var(--el-space-12); } }