/** * Theme Monlibertinage — 2 ambiances commutables. * * Phase 2, PR #7 — palettes complètes pour Pop ✨ et Élégant 🌿. * Le swap se fait via l'attribut data-theme="pop" | "claire" sur , * piloté par : * - le serveur (View::render injecte data-theme depuis la pref user * ou THEME_DEFAULT du tenant) * - un script inline no-FOUC qui lit localStorage en priorité * - le toggle JS qui écrit localStorage + data-theme et appelle * POST /setTheme si l'utilisateur est connecté. * * Référence visuelle : public/mockups/monlibertinage-switch.html * * Convention : seules les variables sont définies ici. Aucune règle * de mise en page ; les vues/partials utilisent var(--xyz). */ /* ============================================================ THÈME POP ✨ (jeune, vibrant, stories Instagram) ============================================================ */ :root[data-theme="pop"] { /* Surfaces */ --bg: #0F0918; --bg2: #16102A; --card: #1F1530; --card2: #2A1D40; --border: #3A2A55; /* Texte */ --text: #FFEEF5; --muted: #A89DBE; /* Couleurs sémantiques */ --primary: #FF3D7F; /* hot pink */ --primary2: #FF80AB; --secondary: #7B5FFF; /* violet électrique */ --secondary2: #A78BFF; --highlight: #FFD93D; /* jaune fluo (stickers, accents) */ --accent3: #4FE3F4; --green: #42E695; /* Couleurs d'ambiance pour glows / radial backgrounds (rgba lourd) */ --glow-primary: rgba(255, 61, 127, 0.18); --glow-secondary: rgba(123, 95, 255, 0.18); --glow-highlight: rgba(255, 217, 61, 0.05); /* Gradients */ --grad: linear-gradient(135deg, #FF3D7F, #7B5FFF); --grad-h: linear-gradient(135deg, #FFD93D, #FF3D7F); /* Typographie & forme */ --display: 'Bricolage Grotesque', system-ui, sans-serif; --display-italic: normal; --display-weight: 800; --display-spacing: -0.035em; --body: 'Plus Jakarta Sans', system-ui, sans-serif; --radius: 18px; --radius-lg: 28px; --radius-pill: 99px; /* Effets */ --shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 60px -30px rgba(255,61,127,0.2); } /* ============================================================ THÈME CLAIRE 🌿 (clair, élégant, sobre) ============================================================ */ :root[data-theme="claire"] { /* Surfaces */ --bg: #FAF7F2; --bg2: #FFFFFF; --card: #FFFFFF; --card2: #F4EDE3; --border: #E5DCCC; /* Texte */ --text: #1F1A14; --muted: #6E5F4D; /* WCAG AA ≥ 4.5:1 sur --bg #FAF7F2 (mesuré ~6.2:1) */ /* Couleurs sémantiques */ --primary: #B91C3C; /* bordeaux */ --primary2: #E03A5C; --secondary: #6B4F2C; /* brun chaud */ --secondary2: #A88550; --highlight: #C9A24A; /* or vieilli */ --accent3: #4A6C8C; --green: #1B7A47; /* Couleurs d'ambiance (subtiles sur fond clair) */ --glow-primary: rgba(185, 28, 60, 0.08); --glow-secondary: rgba(107, 79, 44, 0.06); --glow-highlight: rgba(201, 162, 74, 0.06); /* Gradients */ --grad: linear-gradient(135deg, #B91C3C, #6B4F2C); --grad-h: linear-gradient(135deg, #C9A24A, #B91C3C); /* Typographie & forme */ --display: 'Cormorant Garamond', 'Playfair Display', serif; --display-italic: italic; --display-weight: 600; --display-spacing: -0.01em; --body: 'Plus Jakarta Sans', system-ui, sans-serif; --radius: 10px; --radius-lg: 14px; --radius-pill: 99px; /* Effets — ombres plus douces sur fond clair */ --shadow: 0 20px 60px -20px rgba(150,80,80,0.12), 0 1px 0 rgba(0,0,0,0.04); } /* ============================================================ FALLBACK : aucun data-theme → applique pop ============================================================ */ :root:not([data-theme]) { --bg: #0F0918; --bg2: #16102A; --card: #1F1530; --border: #3A2A55; --text: #FFEEF5; --muted: #A89DBE; --primary: #FF3D7F; --secondary: #7B5FFF; --highlight: #FFD93D; --grad: linear-gradient(135deg, #FF3D7F, #7B5FFF); --grad-h: linear-gradient(135deg, #FFD93D, #FF3D7F); --glow-primary: rgba(255, 61, 127, 0.18); --glow-secondary: rgba(123, 95, 255, 0.18); --glow-highlight: rgba(255, 217, 61, 0.05); --display: 'Bricolage Grotesque', system-ui, sans-serif; --display-italic: normal; --display-weight: 800; --display-spacing: -0.035em; --body: 'Plus Jakarta Sans', system-ui, sans-serif; --radius: 18px; --radius-lg: 28px; --radius-pill: 99px; } /* ============================================================ 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 Coupe les animations/transitions/transforms pour les utilisateurs ayant activé "Réduire les animations" (iOS, macOS, Windows, Android). Couvre aussi .pulse (eyebrow login) et les hover transform globaux. ============================================================ */ @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 :focus-visible cible UNIQUEMENT la nav clavier (Tab), pas la souris. Les vues qui définissent -webkit-tap-highlight-color: transparent sur leurs interactifs n'ont actuellement aucun retour clavier visible → règle critique WCAG 2.4.7. Ring 2px primary + offset 2px sur tous les interactifs natifs et les classes utilisées par les vues MLB. ============================================================ */ :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); } /* Inputs : on garde le ring color-mix existant des vues, on ajoute juste un fallback outline si la vue ne définit pas de focus custom. */ :where(input, textarea, select):focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }