/* ============================================================ Wimau - Variables de thème : Clair / Sombre Appliqué via data-theme="light" | data-theme="dark" sur ============================================================ */ /* ── Thème CLAIR ── */ [data-theme="light"] { color-scheme: light; --bg: #F8F6F0; --surface: #FFFFFF; --surface2: #F2EFEB; --surface3: #E9E5DE; --border: #DCD7CD; --border-hi: #C4BEB2; --gold: #9A7228; --gold-br: #B88D3B; --gold-dim: rgba(184, 141, 59, 0.12); --gold-glow: rgba(184, 141, 59, 0.25); --ink: #14120E; --ink-dim: #5E5A52; --danger: #B33225; --danger-dim: rgba(179, 50, 37, 0.12); --green: #2D754B; --green-dim: rgba(45, 117, 75, 0.12); --warn: #A8761E; --warn-dim: rgba(168, 118, 30, 0.12); --blue: #2E63AD; --blue-dim: rgba(46, 99, 173, 0.12); /* Composants spécifiques light */ --nav-bg: rgba(248, 246, 240, 0.88); --nav-border: rgba(220, 215, 205, 0.8); --sidebar-bg: #FFFFFF; --card-shadow: 0 2px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.03); --card-shadow-hover: 0 4px 14px rgba(0,0,0,.07), 0 12px 32px rgba(0,0,0,.05); --modal-backdrop-bg: rgba(20, 18, 14, 0.55); } /* ── Thème SOMBRE ── */ [data-theme="dark"] { color-scheme: dark; --bg: #0A0B0E; --surface: #13151A; --surface2: #1B1E26; --surface3: #242732; --border: #282B36; --border-hi: #3B3F4E; --gold: #C9A24B; --gold-br: #E5C572; --gold-dim: rgba(201, 162, 75, 0.16); --gold-glow: rgba(229, 197, 114, 0.35); --ink: #F3F0E8; --ink-dim: #A4A094; --danger: #D95C50; --danger-dim: rgba(217, 92, 80, 0.15); --green: #5EAA7C; --green-dim: rgba(94, 170, 124, 0.15); --warn: #E2AC4C; --warn-dim: rgba(226, 172, 76, 0.15); --blue: #689AE8; --blue-dim: rgba(104, 154, 232, 0.15); --nav-bg: rgba(19, 21, 26, 0.88); --nav-border: rgba(40, 43, 54, 0.8); --sidebar-bg: #13151A; --card-shadow: 0 2px 10px rgba(0,0,0,.35); --card-shadow-hover: 0 6px 20px rgba(0,0,0,.5); --modal-backdrop-bg: rgba(0, 0, 0, 0.75); } /* ── Base commune (utilise les variables) ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); transition: background .25s ease, color .25s ease; } /* Transition douce sur tous les éléments qui portent des couleurs */ *, *::before, *::after { transition: background-color .2s ease, border-color .2s ease, color .15s ease, box-shadow .2s ease; } /* Exclure les animations existantes */ .fade-in, .skeleton, .animate-spin, [class*="transition-"], svg *, .zone-dot { transition: none !important; } .fade-in { animation: fadeIn .22s cubic-bezier(0.16, 1, 0.3, 1) both; } .skeleton { animation: shimmer 1.4s ease infinite; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-hi); } /* ── Focus ── */ .ring-focus:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 35%, transparent); border-color: var(--gold) !important; } /* ── Tape divider ── */ .tape-divider { height: 10px; background-image: repeating-linear-gradient( to right, var(--gold) 0px, var(--gold) 1.5px, transparent 1.5px, transparent 8px ); background-size: 8px 100%; opacity: .5; mask-image: linear-gradient(to bottom, black 50%, transparent 100%); flex-shrink: 0; } /* ── Bouton thème toggle ── */ .theme-toggle { display: flex; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 99px; padding: 3px; gap: 2px; } .theme-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 99px; border: none; background: transparent; color: var(--ink-dim); cursor: pointer; font-size: 13px; transition: background .18s, color .18s !important; } .theme-btn.active { background: var(--gold); color: #0A0B0E; font-weight: 700; } .theme-btn:not(.active):hover { background: var(--surface3); color: var(--ink); }