/** * Theme PlanFIST — Charte « Cuir & Néon », 2 modes commutables (BROUILLON migration). * * Destination finale : sites/planfist/theme.css * À placer via le workflow PR de la plateforme (pas de commit direct sur main). * * Modèle : sites/monlibertinage/theme.css (même jeu de variables, car planfist * sera un tenant TENANT_USES_MLB et ses vues consomment ce vocabulaire). * * Le swap se fait via l'attribut data-theme="dark" | "light" sur : * - le serveur (View::render) injecte data-theme depuis la pref user * (users_meta.theme) ou THEME_DEFAULT du tenant ; * - un script inline no-FOUC lit localStorage en priorité ; * - le toggle JS écrit localStorage + data-theme et POST /setTheme. * * RESPECT DU MODE SYSTÈME : pour que le mode suive le réglage du téléphone * par défaut, le script no-FOUC doit, en l'absence de pref stockée, lire * window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark' * (logique côté layout, pas dans ce fichier). * * PRÉREQUIS layout : le de planfist doit charger les polices * Archivo (600;800) et Inter (400;500;600) — via Google Fonts ou self-host. * * Convention : seules les variables sont définies ici. Aucune règle de * mise en page ; les vues/partials utilisent var(--xyz). */ /* ============================================================ MODE SOMBRE — Cuir & Néon (défaut) Noir cuir + rouge sang + rouge néon sur les CTA. ============================================================ */ :root[data-theme="dark"] { /* Surfaces */ --bg: #0C0B0E; --bg2: #110F13; --card: #17151A; --card2: #211E25; --border: #2A272E; /* Texte */ --text: #ECE8E6; --muted: #8A8489; /* Couleurs sémantiques */ --primary: #C0102A; /* rouge sang */ --primary2: #FF3B5C; /* rouge néon — hover / CTA */ --secondary: #7A1020; /* oxblood profond */ --secondary2: #9E2738; --highlight: #FF3B5C; /* néon — accents, badges */ --accent3: #FF6B4A; /* ember — accent chaud, usage rare */ --green: #28C76F; /* Couleurs d'ambiance pour glows / radial backgrounds */ --glow-primary: rgba(192, 16, 42, 0.20); --glow-secondary: rgba(122, 16, 32, 0.16); --glow-highlight: rgba(255, 59, 92, 0.10); /* Gradients */ --grad: linear-gradient(135deg, #C0102A, #7A1020); --grad-h: linear-gradient(135deg, #FF3B5C, #C0102A); /* Typographie & forme */ --display: 'Archivo', system-ui, sans-serif; --display-italic: normal; --display-weight: 800; --display-spacing: -0.01em; --body: 'Inter', system-ui, sans-serif; --radius: 14px; --radius-lg: 20px; --radius-pill: 99px; /* Effets — ombre profonde + halo néon discret */ --shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 60px -30px rgba(255,59,92,0.22); } /* ============================================================ MODE CLAIR — Cuir & Néon clair Blanc cassé chaud + rouge sang. Le néon devient rouge plein. ============================================================ */ :root[data-theme="light"] { /* Surfaces */ --bg: #F4F1EF; --bg2: #FFFFFF; --card: #FFFFFF; --card2: #F2EBEC; --border: #E6E0DC; /* Texte */ --text: #1A1518; --muted: #6E646A; /* WCAG AA ≥ 4.5:1 sur --bg #F4F1EF */ /* Couleurs sémantiques */ --primary: #C0102A; /* rouge sang */ --primary2: #A50D24; /* hover — légèrement plus sombre sur fond clair */ --secondary: #7A1020; /* oxblood profond */ --secondary2: #9E2738; --highlight: #C0102A; /* pas de néon sur fond clair → rouge plein */ --accent3: #C25A2E; /* ember assombri pour rester lisible */ --green: #1B7A47; /* Couleurs d'ambiance (subtiles sur fond clair) */ --glow-primary: rgba(192, 16, 42, 0.08); --glow-secondary: rgba(122, 16, 32, 0.06); --glow-highlight: rgba(192, 16, 42, 0.06); /* Gradients */ --grad: linear-gradient(135deg, #C0102A, #7A1020); --grad-h: linear-gradient(135deg, #FF3B5C, #C0102A); /* Typographie & forme */ --display: 'Archivo', system-ui, sans-serif; --display-italic: normal; --display-weight: 800; --display-spacing: -0.01em; --body: 'Inter', system-ui, sans-serif; --radius: 14px; --radius-lg: 20px; --radius-pill: 99px; /* Effets — ombres douces sur fond clair */ --shadow: 0 20px 60px -20px rgba(60,20,25,0.14), 0 1px 0 rgba(0,0,0,0.04); } /* ============================================================ FALLBACK : aucun data-theme → applique le mode sombre ============================================================ */ :root:not([data-theme]) { --bg: #0C0B0E; --bg2: #110F13; --card: #17151A; --card2: #211E25; --border: #2A272E; --text: #ECE8E6; --muted: #8A8489; --primary: #C0102A; --primary2: #FF3B5C; --secondary: #7A1020; --secondary2: #9E2738; --highlight: #FF3B5C; --accent3: #FF6B4A; --green: #28C76F; --glow-primary: rgba(192, 16, 42, 0.20); --glow-secondary: rgba(122, 16, 32, 0.16); --glow-highlight: rgba(255, 59, 92, 0.10); --grad: linear-gradient(135deg, #C0102A, #7A1020); --grad-h: linear-gradient(135deg, #FF3B5C, #C0102A); --display: 'Archivo', system-ui, sans-serif; --display-italic: normal; --display-weight: 800; --display-spacing: -0.01em; --body: 'Inter', system-ui, sans-serif; --radius: 14px; --radius-lg: 20px; --radius-pill: 99px; --shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 60px -30px rgba(255,59,92,0.22); } /* ============================================================ TRANSITIONS GLOBALES — anim douce du swap de thème ============================================================ */ :root { color-scheme: light dark; } html { transition: background-color .35s ease, color .35s ease; } body, .card, .surface, button, input, .btn { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* ============================================================ ACCESSIBILITÉ — respect des préférences système ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ ACCESSIBILITÉ — focus visible clavier (WCAG 2.4.7) ============================================================ */ :where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible, .ml-btn:focus-visible, .ml-top-cta:focus-visible, .ml-nav a:focus-visible, .ml-filter:focus-visible, .theme-toggle button:focus-visible, .mlb-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-pill, 8px); } :where(input, textarea, select):focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }