/* ============================================================ THÈMES PERSONNALISABLES — Émerveil'Créa Couche « marque » : chaque bloc redéfinit les tokens du :root d'app.css pour le thème choisi. Le violet (défaut) reste défini dans app.css, aucun bloc n'est nécessaire pour lui. Sélection : attribut data-theme posé sur par js/theme.js (et par le script anti-flash d'index.html avant le premier paint). Le mode sombre (data-mode="dark") arrive en Phase 2. ============================================================ */ /* ---- Ardoise : sobre et élégant ---- */ html[data-theme="ardoise"] { --cp-primary: #3B5271; --cp-primary-dark: #1E2A3A; --cp-primary-light: #7FA3C9; --cp-accent: #D9A441; --cp-accent-light: #EDCB8A; --cp-accent-ink: #1E2A3A; --cp-lavande: #E8EDF3; --cp-lavande-soft: #EFF3F8; --cp-rose: #F5F3F5; --cp-bg: #FAFBFC; --nav-bg: #141E2B; --cp-hint-bg: #EEF2F7; --cp-hint-border: #D8E1EA; --cp-hint-bg-alt: #EAF0F5; --cp-hint-border-alt: #D2DCE6; --cp-ink-strong: #22303F; --cp-primary-strong: #2F4460; --cp-surface-warm: #F3F6F9; --cp-rose-accent: #A9899B; --cp-sauge: #7FA08F; --cp-primary-rgb: 59, 82, 113; --cp-primary-light-rgb: 127, 163, 201; --cp-accent-rgb: 217, 164, 65; --cp-nav-bg-rgb: 20, 30, 43; --cp-ink-strong-rgb: 34, 48, 63; } /* ---- Terracotta : chaleureux et artisanal ---- */ html[data-theme="terracotta"] { --cp-primary: #B05F3F; --cp-primary-dark: #5C3327; --cp-primary-light: #D98B6A; --cp-accent: #E9B44C; --cp-accent-light: #F3D18F; --cp-accent-ink: #5C3327; --cp-lavande: #F6EBE3; --cp-lavande-soft: #FAF2EB; --cp-rose: #FBF1EE; --cp-bg: #FDF9F4; --nav-bg: #3A2620; --cp-hint-bg: #F9F0E8; --cp-hint-border: #EBDACB; --cp-hint-bg-alt: #F7EDE2; --cp-hint-border-alt: #E5D2C0; --cp-ink-strong: #4A3328; --cp-primary-strong: #9C5236; --cp-surface-warm: #F9F1E8; --cp-rose-accent: #D98FB0; --cp-sauge: #6FAE93; --cp-primary-rgb: 176, 95, 63; --cp-primary-light-rgb: 217, 139, 106; --cp-accent-rgb: 233, 180, 76; --cp-nav-bg-rgb: 58, 38, 32; --cp-ink-strong-rgb: 74, 51, 40; } /* ============================================================ MODE SOMBRE — couche « surfaces » + ajustements de marque. Encapsulé sous @media screen : l'impression reste toujours claire (les PDF devis/factures sont de toute façon générés côté serveur, en clair par construction). Le bloc de base correspond au thème violet ; les combinaisons thème x sombre affinent ensuite surfaces et marque. ============================================================ */ @media screen { html[data-mode="dark"] { color-scheme: dark; /* Surfaces (violet par défaut) */ --cp-bg: #171326; --cp-card-bg: #221C38; --cp-surface-warm: #1C1730; --cp-input-bg: #1B1630; --cp-surface-100: #2A2344; --cp-surface-50: #251F3C; --cp-surface-gray: #2A2344; --cp-surface-2: #2C2547; --cp-surface-2b: #2A2344; --cp-gris-tres-clair: #2A2344; --cp-rose: #2A2038; /* Textes : l'échelle s'inverse */ --cp-gris-profond: #ECEFF7; --cp-ink-900: #F1F3F9; --cp-ink-800: #E4E7F0; --cp-ink-700: #CDD3E1; --cp-slate-800: #C9D2DF; --cp-slate-700: #B4BDCE; --cp-slate-600: #9AA5B8; --cp-gray-600: #98A2B5; --cp-slate-400: #8791A5; --cp-gray-400: #8590A3; --cp-mauve-400: #A49CBE; --cp-gris-fonce: #A7B0C4; /* Bordures */ --cp-gris-clair: #362E52; --cp-gris-moyen: #4A4270; --cp-border-200: #363050; --cp-border-slate: #343048; --cp-border-slate-strong: #453D68; --cp-border-gray: #3B3456; /* Marque ajustée (violet) : la principale s'éclaircit pour le texte, les boutons (--cp-btn) gardent une teinte dense lisible en blanc. */ --cp-primary: #8D7CE8; --cp-btn: #6351d0; --cp-primary-dark: #C9BFF5; --cp-primary-light: #9C8DEB; --cp-primary-strong: #7C6BDF; --cp-ink-strong: #D9D2F2; --cp-info-strong: #5B6BD5; --cp-navy: #2E2752; --nav-bg: #100D1D; /* Lavandes et encarts → teintes sombres */ --cp-lavande: #322A52; --cp-lavande-soft: #2C2547; --cp-hint-bg: #2A2347; --cp-hint-border: #3A3060; --cp-hint-bg-alt: #282142; --cp-hint-border-alt: #372E5B; /* Teintes fantômes et pistes : suivent les surfaces du thème */ --cp-ghost-bg: var(--cp-surface-50); --cp-ghost-border: var(--cp-gris-clair); --cp-primary-ghost: var(--cp-lavande-soft); --cp-hover-ghost: var(--cp-surface-2); --cp-track: var(--cp-surface-2); --cp-lilac-100: var(--cp-surface-2); --cp-lilac-50: var(--cp-surface-2); --cp-border-warm: var(--cp-gris-clair); --cp-border-ghost2: var(--cp-gris-clair); --cp-info-soft: #2E3554; /* Encres de chips : s'éclaircissent pour rester lisibles */ --cp-rose-ink: #E2A4C4; --cp-sauge-ink: #8FCBB0; --cp-jaune-ink: #EBCB74; /* Fonds doux : dérivés de la couleur du thème sur la carte sombre */ --cp-rose-soft: color-mix(in srgb, var(--cp-rose-accent) 16%, var(--cp-card-bg)); --cp-sauge-soft: color-mix(in srgb, var(--cp-sauge) 16%, var(--cp-card-bg)); --cp-jaune-soft: color-mix(in srgb, var(--cp-accent) 13%, var(--cp-card-bg)); --cp-danger-soft: #46231F; --cp-success-soft: #16352A; --cp-success-soft2: #142E25; --cp-warning-soft: #43351A; --cp-danger-ink: #F5A79E; --cp-danger-ink2: #F5A79E; --cp-success-ink: #5ACD8A; --cp-success-ink2: #6ED4A0; --cp-danger-200: #5C2A24; --cp-danger-800: #F3B8B0; --cp-sky-soft: #16293C; --cp-sky-200: #234A66; --cp-sky-ink: #9CCDEC; --cp-green-100: #17382B; --cp-green-50: #142E25; --cp-emerald: #2BD4A0; --cp-amber-50: #3A2F14; --cp-amber-ink: #F5BE72; --cp-amber-800: #F0C58C; --cp-ink-mauve: var(--cp-ink-700); --cp-ink-neutral: var(--cp-ink-800); --cp-ink-navy: var(--cp-ink-800); --cp-ink-indigo: var(--cp-ink-800); --cp-gray-700: var(--cp-slate-600); --cp-gray-570: var(--cp-slate-600); --cp-rose-vif: #E58BB4; --cp-rose-200: #4A2833; --cp-lavande-300: var(--cp-gris-moyen); /* Sémantiques : le danger s'éclaircit un peu pour rester lisible */ --cp-danger: #F16A5E; /* Triplets RGB alignés sur la marque sombre ; les ombres passent au noir */ --cp-primary-rgb: 141, 124, 232; --cp-primary-light-rgb: 156, 141, 235; --cp-ink-strong-rgb: 0, 0, 0; } html[data-theme="ardoise"][data-mode="dark"] { --cp-bg: #10161F; --cp-card-bg: #1A2330; --cp-surface-warm: #141C27; --cp-input-bg: #141C27; --cp-surface-100: #212C3C; --cp-surface-50: #1D2734; --cp-surface-gray: #212C3C; --cp-surface-2: #232E3F; --cp-surface-2b: #212C3C; --cp-gris-tres-clair: #212C3C; --cp-rose: #1F2833; --cp-gris-clair: #2A3646; --cp-gris-moyen: #3C4B5F; --cp-border-200: #2B3748; --cp-border-slate: #293544; --cp-border-slate-strong: #37465A; --cp-border-gray: #2E3B4C; --cp-primary: #7FA3C9; --cp-btn: #46648A; --cp-primary-dark: #C3D4E6; --cp-primary-light: #8FB0D2; --cp-primary-strong: #6D93BC; --cp-ink-strong: #D3DEEA; --cp-navy: #24384E; --nav-bg: #0B1119; --cp-lavande: #26313F; --cp-lavande-soft: #222D3A; --cp-hint-bg: #1F2B3B; --cp-hint-border: #2E3E52; --cp-hint-bg-alt: #1D2937; --cp-hint-border-alt: #2B3A4D; --cp-primary-rgb: 127, 163, 201; --cp-primary-light-rgb: 143, 176, 210; } html[data-theme="terracotta"][data-mode="dark"] { --cp-bg: #1D1512; --cp-card-bg: #2A201B; --cp-surface-warm: #221913; --cp-input-bg: #221913; --cp-surface-100: #33261F; --cp-surface-50: #2E221C; --cp-surface-gray: #33261F; --cp-surface-2: #362920; --cp-surface-2b: #33261F; --cp-gris-tres-clair: #33261F; --cp-rose: #2E211E; --cp-gris-profond: #F3EDE8; --cp-ink-900: #F5F0EB; --cp-ink-800: #EAE2DA; --cp-ink-700: #D6CCC2; --cp-slate-800: #DACFC5; --cp-slate-700: #C0B4A9; --cp-slate-600: #A89B8F; --cp-gray-600: #A69A8E; --cp-slate-400: #94897E; --cp-gray-400: #92877C; --cp-mauve-400: #B0A29A; --cp-gris-fonce: #B5A79B; --cp-gris-clair: #40322A; --cp-gris-moyen: #57453A; --cp-border-200: #41332B; --cp-border-slate: #3E312A; --cp-border-slate-strong: #524136; --cp-border-gray: #453629; --cp-primary: #D98B6A; --cp-btn: #B05F3F; --cp-primary-dark: #EBC0AD; --cp-primary-light: #E09B7D; --cp-primary-strong: #C4704F; --cp-ink-strong: #EDD9CD; --cp-navy: #4A2E22; --nav-bg: #150F0C; --cp-lavande: #3B2C23; --cp-lavande-soft: #33271F; --cp-hint-bg: #33261F; --cp-hint-border: #46362C; --cp-hint-bg-alt: #302319; --cp-hint-border-alt: #423326; --cp-primary-rgb: 217, 139, 106; --cp-primary-light-rgb: 224, 155, 125; } /* ---- Parcours guidé + Studio (.rf-root) en sombre ---- Les tokens rf non couverts par les alias --cp-* : encre, teintes douces des chips (dérivées de la couleur du thème via color-mix) et ombres. Valable pour les trois thèmes. */ html[data-mode="dark"] .rf-root { --rf-ink: var(--cp-ink-700); --rf-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.40); } } /* fin @media screen */