/* ========================================================================== theme.css — Design system partagé (Abonator / Divertissements / Sport) Chargé AVANT les feuilles de style spécifiques à chaque page. Thème clair par défaut, bascule automatique en sombre selon l'OS. `data-theme="light"` ou `"dark"` sur force l'un des deux. ========================================================================== */ /* -------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------- */ :root { /* Accent — --primary est réécrit dynamiquement par profil (applyTheme). */ --primary: #3b82f6; --primary-dark: #2563eb; --primary-contrast: #ffffff; --danger: #ef4444; --danger-dark: #dc2626; --success: #16a34a; --success-dark: #15803d; --warning: #f59e0b; /* Surfaces — clair */ --bg: #f6f7f9; --bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(59,130,246,.10), transparent 60%), radial-gradient(1000px 500px at 100% 0%, rgba(139,92,246,.08), transparent 55%); --surface: #ffffff; --surface-2: #f1f3f7; --surface-3: #e7eaf1; --border: #e3e7ee; --border-strong: #cbd3e0; /* Texte — clair */ --text: #0d1220; --text-2: #4a5468; --text-3: #8a94a6; /* Rayons */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px; /* Ombres — douces, jamais noires pures */ --shadow-sm: 0 1px 2px rgba(13,18,32,.05), 0 1px 3px rgba(13,18,32,.04); --shadow-md: 0 4px 10px rgba(13,18,32,.06), 0 2px 4px rgba(13,18,32,.04); --shadow-lg: 0 18px 40px rgba(13,18,32,.10), 0 4px 12px rgba(13,18,32,.06); --shadow-glow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); /* Divers */ --ring: color-mix(in srgb, var(--primary) 38%, transparent); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-family: var(--font); /* alias rétro-compatible */ --ease: cubic-bezier(.22, 1, .36, 1); /* Courbe sans rebond, pour les fondus et les changements de contenu : `--ease` dépasse légèrement sa cible, ce qui rend une image « claquante ». */ --ease-soft: cubic-bezier(.4, 0, .2, 1); --nav-h: 60px; /* Alias conservés pour l'ancien code */ --text-primary: var(--text); --text-secondary: var(--text-2); --border-color: var(--border); --category-plaisir: #22c55e; --category-obligatoire: #ef4444; --category-occasionnel: #eab308; color-scheme: light; } /* --- Palette sombre --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0e14; --bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(59,130,246,.14), transparent 60%), radial-gradient(1000px 500px at 100% 0%, rgba(139,92,246,.10), transparent 55%); --surface: #141922; --surface-2: #1b212c; --surface-3: #232a37; --border: #262e3b; --border-strong: #38415275; --text: #eef1f6; --text-2: #a8b2c3; --text-3: #6f7A8c; --primary-contrast: #ffffff; --danger: #f87171; --success: #4ade80; --shadow-sm: 0 1px 2px rgba(0,0,0,.32); --shadow-md: 0 4px 12px rgba(0,0,0,.38); --shadow-lg: 0 20px 44px rgba(0,0,0,.50); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0b0e14; --bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(59,130,246,.14), transparent 60%), radial-gradient(1000px 500px at 100% 0%, rgba(139,92,246,.10), transparent 55%); --surface: #141922; --surface-2: #1b212c; --surface-3: #232a37; --border: #262e3b; --border-strong: #384152; --text: #eef1f6; --text-2: #a8b2c3; --text-3: #6f7a8c; --primary-contrast: #ffffff; --danger: #f87171; --success: #4ade80; --shadow-sm: 0 1px 2px rgba(0,0,0,.32); --shadow-md: 0 4px 12px rgba(0,0,0,.38); --shadow-lg: 0 20px 44px rgba(0,0,0,.50); color-scheme: dark; } /* -------------------------------------------------------------- 2. RESET & BASE -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: 15px; line-height: 1.55; letter-spacing: -0.011em; color: var(--text); background: var(--bg); background-image: var(--bg-accent); background-attachment: fixed; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .3s var(--ease), color .3s var(--ease); } h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 650; letter-spacing: -0.025em; line-height: 1.22; color: var(--text); } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } h4 { font-size: .95rem; } p { margin: 0 0 .8em; } a { color: var(--primary); text-decoration: none; } hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .hidden { display: none !important; } /* L'attribut `hidden` doit l'emporter sur nos `display: flex/grid`. Sans ça, un `