/* ========================================================= PIPO — Mode sombre (production) --------------------------------------------------------- Re-mappe les tokens définis dans styles.css (:root) sous [data-theme="dark"], puis corrige les valeurs codées en dur qui ne suivent pas les tokens. ⚠️ NOMS DE TOKENS : ce fichier utilise les tokens RÉELS du codebase (--bg, --surface, --accent…), PAS les --pipo-* du design system. Ne pas confondre. Intégration : 1. Charger ce fichier APRÈS styles.css et app.css sur chaque page (ou via le partial de ). 2. theme-toggle.js pose data-theme="dark|light" sur et le persiste dans localStorage. Le mode clair reste 100% inchangé (tokens d'origine). ========================================================= */ [data-theme="dark"] { /* ---- Surfaces : papier beige → slab teal-noir ---- */ --bg: #0c1819; /* page — la plus sombre */ --surface: #13282a; /* cartes, fenêtres produit */ --surface-alt: #0f2123; /* bandes en retrait, chrome */ --border: rgba(255,255,255,0.10); /* ---- Texte : inversé, neutres toujours chauds ---- */ --text: #eef3f2; --text-muted: #9fb3b4; --text-faint: #6f8284; /* ---- Teal : éclairci d'un cran pour le contraste sur sombre. Le hover ÉCLAIRCIT (inverse du mode clair). ---- */ --accent: #1ab9ab; --accent-hover: #38ccbe; --accent-strong: #cdeee9; /* était un teal foncé → devient clair */ --accent-soft: rgba(26,185,171,0.16); /* utilisé surtout comme FOND translucide */ /* ---- Ambre (stabilo) : ressort mieux sur sombre, on l'éclaircit juste un peu pour le fond de chip ---- */ --ambre-soft: rgba(245,199,106,0.16); --ambre-strong: #f5c76a; --ambre-border: rgba(245,199,106,0.32); /* ---- Slabs « inversés » : remontés d'un cran pour se détacher du fond de page désormais sombre ---- */ --dark: #16292b; --dark-soft: #1c3133; --dark-deeper: #0a1314; /* ---- Sémantique : adoucie pour fond sombre ---- */ --danger: #e8896a; --danger-bg: rgba(232,137,106,0.16); --warning: #f5c76a; --warning-bg: rgba(245,199,106,0.16); /* ---- Ombres : invisibles sur sombre → renforcées ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.24); --shadow-md: 0 8px 24px rgba(0,0,0,0.36); --shadow-lg: 0 24px 60px rgba(0,0,0,0.45); /* ---- Tokens alias de app.css (ex-couleurs en dur tokenisées). Valeurs sombres correspondant au rôle de chaque token. ---- */ --app-ink: #eef3f2; --app-ink-2: #eef3f2; --app-ink-3: #eef3f2; --app-ink-4: #dbe6e5; --app-ink-5: #eef3f2; --app-ink-6: #cdd6e0; --app-muted-a: #9fb3b4; --app-muted-b: #9fb3b4; --app-muted-c: #9fb3b4; --app-muted-d: #9fb3b4; --app-muted-e: #b3aa98; --app-muted-f: #9fb3b4; --app-muted-g: #9fb3b4; --app-muted-h: #9fb3b4; --app-muted-i: #9fb3b4; --app-faint-a: #6f8284; --app-paper: #eef3f2; --app-ok: #5fd08a; --app-ok-2: #8fe0ad; --app-surf-a: #0f2123; --app-surf-b: #13282a; --app-surf-c: #13282a; --app-surf-d: #0f2123; --app-surf-e: #13282a; --app-surf-f: #0f2123; --app-surf-g: #0f2123; --app-surf-teal: rgba(26,185,171,0.12); --app-surf-green: rgba(26,185,171,0.10); --app-surf-danger: rgba(232,137,106,0.14); --app-card: #13282a; --app-bd-a: rgba(255,255,255,0.10); --app-bd-b: rgba(255,255,255,0.10); --app-bd-c: rgba(255,255,255,0.10); --app-bd-d: rgba(255,255,255,0.10); --app-bd-e: rgba(255,255,255,0.10); --app-bd-f: rgba(255,255,255,0.10); --app-bd-g: rgba(255,255,255,0.10); --app-bd-h: rgba(255,255,255,0.10); --app-bd-i: rgba(255,255,255,0.10); --app-bd-j: rgba(255,255,255,0.10); --app-bd-k: rgba(255,255,255,0.10); --app-bd-teal: rgba(26,185,171,0.30); --app-danger: #e8896a; --app-danger-2: #ef9078; --app-danger-3: #ef9078; --app-warn: #f5c76a; --app-warn-2: #e0a94f; --app-warn-3: #f5c76a; --app-warn-4: #e8c06a; --app-info: #5b8bff; /* couleurs one-off (1 occurrence) tokenisees */ --app-x1: #5fd08a; --app-x2: #7aa2ff; --app-x3: #5fd08a; --app-x4: #7aa2ff; --app-x5: #5fd08a; --app-x6: rgba(26,185,171,0.10); --app-x7: #7aa2ff; --app-x8: #7aa2ff; --app-x9: #7aa2ff; --app-x10: #eef3f2; --app-x11: #eef3f2; --app-x12: #eef3f2; --app-x13: #9fb3b4; --app-x14: #f5c76a; --app-x15: #f5c76a; --app-x16: #5fd08a; --app-x17: #ef9078; --app-x18: #ef9078; --app-x19: #ef9078; --app-x20: #ef9078; --app-x21: #ef9078; --app-x22: #ef9078; --app-x23: #0f2123; --app-x24: #ef9078; --app-x25: #ef9078; --app-x26: rgba(26,185,171,0.30); --app-x27: rgba(26,185,171,0.30); --app-x28: rgba(26,185,171,0.30); --app-x29: rgba(26,185,171,0.10); --app-x30: rgba(255,255,255,0.10); --app-x31: #0f2123; --app-x32: rgba(26,185,171,0.10); --app-x33: rgba(245,199,106,0.32); --app-x34: rgba(91,139,255,0.30); --app-x35: rgba(26,185,171,0.10); --app-x36: #0f2123; --app-x37: #0f2123; --app-x38: rgba(232,137,106,0.30); --app-x39: rgba(91,139,255,0.14); --app-x40: rgba(91,139,255,0.14); --app-x41: #0f2123; --app-x42: #0f2123; --app-x43: #0f2123; --app-x44: #0f2123; --app-x45: rgba(245,199,106,0.32); --app-x46: rgba(245,199,106,0.32); --app-x47: #0f2123; --app-x48: #0f2123; --app-x49: rgba(245,199,106,0.32); --app-x50: #0f2123; --app-x51: rgba(245,199,106,0.32); --app-x52: #0f2123; --app-x53: rgba(245,199,106,0.14); --app-x54: #0f2123; --app-x55: #0f2123; --app-x56: #0f2123; --app-x57: #0f2123; --app-x58: rgba(232,137,106,0.14); --app-x59: #0f2123; --app-x60: #0f2123; --app-x61: rgba(245,199,106,0.14); --app-x62: rgba(245,199,106,0.14); --app-x63: rgba(245,199,106,0.14); --app-x64: rgba(245,199,106,0.14); --app-x65: #0f2123; --app-x66: rgba(245,199,106,0.14); --app-x67: #0f2123; color-scheme: dark; } /* Transition douce au basculement (optionnel, retirable) */ [data-theme="dark"] body, [data-theme="dark"] .site-header, [data-theme="dark"] .card, [data-theme="dark"] .mock-window { transition: background .25s ease, color .25s ease, border-color .25s ease; } /* ========================================================= CORRECTIFS — valeurs codées en dur dans styles.css (ne suivent pas les tokens, à corriger explicitement) ========================================================= */ /* Header collant : verre teinté beige → verre teinté sombre */ [data-theme="dark"] .site-header { background: rgba(12,24,25,0.82); } [data-theme="dark"] .site-header.scrolled { border-bottom-color: rgba(255,255,255,0.08); } /* Fenêtre produit : fond blanc (var(--white)) → surface */ [data-theme="dark"] .mock-window { background: var(--surface); } /* --accent-soft utilisé comme COULEUR DE TEXTE sur slabs sombres : il est devenu translucide → repasser sur accent plein. */ [data-theme="dark"] .eyebrow-light, [data-theme="dark"] .plan-featured .plan-name, [data-theme="dark"] .coverage-label, [data-theme="dark"] .waitlist-form label { color: var(--accent); } /* Blocs inversés dont le TEXTE était color:var(--surface) (devenu sombre) */ [data-theme="dark"] .why-col-accent, [data-theme="dark"] .plan-featured, [data-theme="dark"] .coverage { color: var(--text); } [data-theme="dark"] .plan-featured .plan-tag, [data-theme="dark"] .plan-featured .plan-price span, [data-theme="dark"] .plan-featured .plan-features li { color: var(--text-muted); } /* Boutons qui utilisaient --accent-soft (translucide) comme FOND : featured plan + form waitlist → teal plein, texte très sombre. */ [data-theme="dark"] .plan-featured .btn-primary, [data-theme="dark"] .waitlist-form .btn-primary { background: var(--accent); color: #04201d; } [data-theme="dark"] .plan-featured .btn-primary:hover, [data-theme="dark"] .waitlist-form .btn-primary:hover { background: var(--accent-hover); } /* Toggle facturation : pilule active au fond blanc → surface claire */ [data-theme="dark"] .billing-toggle-option.is-active { background: var(--surface); color: var(--text); } [data-theme="dark"] .billing-toggle { background: var(--surface-alt); } /* Tag accent (mock hero) : garde un fond teal lisible */ [data-theme="dark"] .tag-accent { background: var(--accent-soft); color: var(--accent); } /* Sélecteurs