/* ============================================================================ Nestor â€” Catalogue de thÃ¨mes visuels Chaque thÃ¨me s'active via l'attribut data-theme="..." sur . Les overrides ciblent les classes Tailwind utilisÃ©es dans les templates ; on Ã©vite ainsi de modifier 30 templates pour changer la palette. ============================================================================ */ /* ============================================================================ THÃˆME ATELIER â€” papier, cuir, dorure Cible : littÃ©rature exigeante, classiques, universitaire ============================================================================ */ body[data-theme="atelier"] { font-family: 'EB Garamond', Georgia, serif !important; background-color: #f1e4ca !important; background-image: radial-gradient(at 15% 30%, rgba(139, 90, 43, 0.06) 0px, transparent 60%), radial-gradient(at 85% 70%, rgba(101, 33, 14, 0.05) 0px, transparent 60%); color: #2c1810 !important; } body[data-theme="atelier"] h1, body[data-theme="atelier"] h2, body[data-theme="atelier"] h3, body[data-theme="atelier"] h4, body[data-theme="atelier"] .serif { font-family: 'Cormorant Garamond', 'EB Garamond', serif !important; font-weight: 600 !important; letter-spacing: -0.01em; } body[data-theme="atelier"] .bg-white, body[data-theme="atelier"] .bg-white\/95 { background-color: #fbf4e2 !important; border-color: #d4b896 !important; } body[data-theme="atelier"] .bg-stone-50, body[data-theme="atelier"] .bg-stone-50\/40, body[data-theme="atelier"] .bg-stone-50\/50 { background-color: #ebdcb6 !important; } body[data-theme="atelier"] .bg-stone-100 { background-color: #e4d4a8 !important; } body[data-theme="atelier"] .bg-stone-900, body[data-theme="atelier"] .bg-stone-800 { background-color: #3a2418 !important; color: #f1e4ca !important; } body[data-theme="atelier"] .text-stone-900 { color: #2c1810 !important; } body[data-theme="atelier"] .text-stone-800 { color: #3a2418 !important; } body[data-theme="atelier"] .text-stone-700 { color: #4d342a !important; } body[data-theme="atelier"] .text-stone-600 { color: #6b4c3a !important; } body[data-theme="atelier"] .text-stone-500 { color: #8b6d52 !important; } body[data-theme="atelier"] .text-stone-400 { color: #a08066 !important; } body[data-theme="atelier"] .bg-amber-700, body[data-theme="atelier"] .bg-amber-600, body[data-theme="atelier"] .hover\:bg-amber-600:hover, body[data-theme="atelier"] .hover\:bg-amber-800:hover { background-color: #7a1c1c !important; color: #f8e5a0 !important; } body[data-theme="atelier"] .text-amber-700, body[data-theme="atelier"] .text-amber-800, body[data-theme="atelier"] .text-amber-600 { color: #7a1c1c !important; } body[data-theme="atelier"] .bg-amber-50, body[data-theme="atelier"] .bg-amber-50\/30 { background-color: rgba(245, 215, 130, 0.25) !important; } body[data-theme="atelier"] .border-amber-100, body[data-theme="atelier"] .border-amber-200, body[data-theme="atelier"] .border-amber-300 { border-color: #d4af37 !important; } body[data-theme="atelier"] .border-stone-200, body[data-theme="atelier"] .border-stone-300, body[data-theme="atelier"] .border-stone-100 { border-color: #c9a877 !important; } body[data-theme="atelier"] input[type="text"], body[data-theme="atelier"] input[type="number"], body[data-theme="atelier"] input[type="password"], body[data-theme="atelier"] textarea, body[data-theme="atelier"] select { background-color: #faf0d4 !important; border-color: #b89668 !important; color: #2c1810 !important; font-family: 'EB Garamond', serif !important; } body[data-theme="atelier"] .rounded-2xl, body[data-theme="atelier"] .rounded-xl, body[data-theme="atelier"] .rounded-3xl { border-radius: 4px !important; } body[data-theme="atelier"] .shadow-sm, body[data-theme="atelier"] .shadow-md, body[data-theme="atelier"] .shadow-lg { box-shadow: 0 2px 8px rgba(60, 30, 15, 0.15), 0 1px 2px rgba(60, 30, 15, 0.1) !important; } body[data-theme="atelier"] main h2.serif { position: relative; padding-bottom: 0.3em; } body[data-theme="atelier"] main h2.serif::after { content: ''; display: block; width: 4em; height: 2px; background: linear-gradient(90deg, #d4af37, transparent); margin-top: 0.3em; } /* Fond image (bibliothÃ¨que ancienne IA) : opacitÃ© moyenne, lÃ©ger flou sÃ©pia */ body[data-theme="atelier"]::before { content: ''; position: fixed; inset: 0; background: url('/static/img/fond-atelier.jpg') center / cover no-repeat; filter: blur(2.5px) sepia(0.3); opacity: 0.35; pointer-events: none; z-index: 0; } body[data-theme="atelier"] > * { position: relative; z-index: 1; } /* ============================================================================ THÃˆME PETIT MONDE â€” mer, savane, montagne, jardin Cible : jeunesse, famille, premiÃ¨res lectures ============================================================================ */ body[data-theme="petit_monde"] { font-family: 'Quicksand', 'Nunito', sans-serif !important; background-color: #fbf6e8 !important; /* Pattern SVG : coccinelle, escargot, feuille, vague, Ã©toile, montagne â€” rÃ©pÃ©tÃ© */ /* + 4 halos de couleur dans les 4 coins = les 4 univers */ background-image: url("data:image/svg+xml;utf8,"), radial-gradient(at 0% 0%, rgba(91, 155, 213, 0.10) 0px, transparent 45%), radial-gradient(at 100% 0%, rgba(232, 176, 74, 0.10) 0px, transparent 45%), radial-gradient(at 0% 100%, rgba(126, 184, 122, 0.10) 0px, transparent 45%), radial-gradient(at 100% 100%, rgba(217, 126, 142, 0.10) 0px, transparent 45%); background-size: 320px 320px, auto, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-attachment: fixed; color: #2a3528 !important; } body[data-theme="petit_monde"] h1, body[data-theme="petit_monde"] h2, body[data-theme="petit_monde"] h3, body[data-theme="petit_monde"] h4, body[data-theme="petit_monde"] .serif { font-family: 'Patrick Hand', 'Quicksand', sans-serif !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #2a4a2e !important; } body[data-theme="petit_monde"] .bg-white, body[data-theme="petit_monde"] .bg-white\/95 { background-color: #ffffff !important; border-color: #cfe1c5 !important; } body[data-theme="petit_monde"] .bg-stone-50, body[data-theme="petit_monde"] .bg-stone-50\/40, body[data-theme="petit_monde"] .bg-stone-50\/50 { background-color: #f1ecd9 !important; } body[data-theme="petit_monde"] .bg-stone-100 { background-color: #e8e0c4 !important; } body[data-theme="petit_monde"] .bg-stone-900, body[data-theme="petit_monde"] .bg-stone-800 { background-color: #2a4a2e !important; color: #fbf6e8 !important; } body[data-theme="petit_monde"] .text-stone-900 { color: #2a3528 !important; } body[data-theme="petit_monde"] .text-stone-800 { color: #36443a !important; } body[data-theme="petit_monde"] .text-stone-700 { color: #4d5c50 !important; } body[data-theme="petit_monde"] .text-stone-600 { color: #6b7a6c !important; } body[data-theme="petit_monde"] .text-stone-500 { color: #8c9b8c !important; } body[data-theme="petit_monde"] .text-stone-400 { color: #a8b8a8 !important; } /* Bouton primaire : vert sauge (univers jardin) */ body[data-theme="petit_monde"] .bg-amber-700, body[data-theme="petit_monde"] .bg-amber-600, body[data-theme="petit_monde"] .hover\:bg-amber-600:hover, body[data-theme="petit_monde"] .hover\:bg-amber-800:hover { background-color: #7eb87a !important; color: #fff !important; } body[data-theme="petit_monde"] .text-amber-700, body[data-theme="petit_monde"] .text-amber-800, body[data-theme="petit_monde"] .text-amber-600 { color: #4a7c4e !important; } /* Bandeau "amber" â†’ jaune savane trÃ¨s clair */ body[data-theme="petit_monde"] .bg-amber-50, body[data-theme="petit_monde"] .bg-amber-50\/30 { background-color: rgba(232, 176, 74, 0.12) !important; } body[data-theme="petit_monde"] .border-amber-100, body[data-theme="petit_monde"] .border-amber-200, body[data-theme="petit_monde"] .border-amber-300 { border-color: #e8b04a !important; } /* Bandeau "emerald" â†’ bleu mer (info, Ã©tat) */ body[data-theme="petit_monde"] .bg-emerald-50, body[data-theme="petit_monde"] .bg-emerald-50\/40 { background-color: rgba(91, 155, 213, 0.10) !important; } body[data-theme="petit_monde"] .text-emerald-700, body[data-theme="petit_monde"] .text-emerald-800, body[data-theme="petit_monde"] .text-emerald-600 { color: #3d7ab0 !important; } body[data-theme="petit_monde"] .border-emerald-100, body[data-theme="petit_monde"] .border-emerald-200 { border-color: #5b9bd5 !important; } /* Bandeau "rose" â†’ rose montagne (alerte douce) */ body[data-theme="petit_monde"] .bg-rose-50, body[data-theme="petit_monde"] .bg-rose-50\/40 { background-color: rgba(217, 126, 142, 0.12) !important; } body[data-theme="petit_monde"] .text-rose-700, body[data-theme="petit_monde"] .text-rose-600 { color: #c05569 !important; } body[data-theme="petit_monde"] .border-stone-200, body[data-theme="petit_monde"] .border-stone-300, body[data-theme="petit_monde"] .border-stone-100 { border-color: #cfe1c5 !important; } body[data-theme="petit_monde"] input[type="text"], body[data-theme="petit_monde"] input[type="number"], body[data-theme="petit_monde"] input[type="password"], body[data-theme="petit_monde"] textarea, body[data-theme="petit_monde"] select { background-color: #fffbf0 !important; border-color: #b0d79e !important; color: #2a3528 !important; font-family: 'Quicksand', sans-serif !important; } body[data-theme="petit_monde"] .rounded-2xl, body[data-theme="petit_monde"] .rounded-xl { border-radius: 24px !important; } body[data-theme="petit_monde"] .rounded-3xl { border-radius: 32px !important; } body[data-theme="petit_monde"] .shadow-sm { box-shadow: 0 2px 6px rgba(74, 124, 78, 0.08) !important; } body[data-theme="petit_monde"] .shadow-md { box-shadow: 0 6px 16px rgba(74, 124, 78, 0.10) !important; } body[data-theme="petit_monde"] .shadow-lg { box-shadow: 0 12px 28px rgba(74, 124, 78, 0.14) !important; } /* Fond image (illustration jeunesse IA) : opacitÃ© forte, presque pas de flou â€” c'est joyeux */ body[data-theme="petit_monde"]::before { content: ''; position: fixed; inset: 0; background: url('/static/img/fond-petit-monde.jpg') center / cover no-repeat; filter: blur(1px); opacity: 0.40; pointer-events: none; z-index: 0; } body[data-theme="petit_monde"] > * { position: relative; z-index: 1; } /* ============================================================================ THÃˆME VIGNETTES â€” BD, manga, comics Cases nettes, encre noire, bulle jaune, halftone ============================================================================ */ body[data-theme="vignettes"] { font-family: 'Comic Neue', 'Comic Sans MS', sans-serif !important; background-color: #fffef8 !important; /* LÃ©gÃ¨re trame halftone + halo jaune en haut, restent au-dessus de la planche */ background-image: radial-gradient(circle at 50% 50%, rgba(10, 10, 10, 0.05) 1px, transparent 1.5px), radial-gradient(at 50% 0%, rgba(255, 204, 0, 0.14) 0%, transparent 55%); background-size: 14px 14px, 100% 100%; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; color: #0a0a0a !important; } /* La planche dessinÃ©e maison, plein Ã©cran, lÃ©gÃ¨rement floutÃ©e pour rester en filigrane */ body[data-theme="vignettes"]::before { content: ''; position: fixed; inset: 0; background: url('/static/img/vignettes-planche-nestor.jpg') center / cover no-repeat; filter: blur(2px); opacity: 0.30; pointer-events: none; z-index: 0; } /* Les enfants directs du body remontent au-dessus de la planche */ body[data-theme="vignettes"] > * { position: relative; z-index: 1; } body[data-theme="vignettes"] h1, body[data-theme="vignettes"] h2, body[data-theme="vignettes"] h3, body[data-theme="vignettes"] h4, body[data-theme="vignettes"] .serif { font-family: 'Bangers', 'Impact', sans-serif !important; font-weight: 400 !important; letter-spacing: 0.03em; color: #0a0a0a !important; text-shadow: 2px 2px 0 rgba(255, 204, 0, 0.5); } body[data-theme="vignettes"] h1 { font-size: 110%; } body[data-theme="vignettes"] .bg-white, body[data-theme="vignettes"] .bg-white\/95 { background-color: #fffef8 !important; border: 2.5px solid #0a0a0a !important; border-color: #0a0a0a !important; } body[data-theme="vignettes"] .bg-stone-50, body[data-theme="vignettes"] .bg-stone-50\/40, body[data-theme="vignettes"] .bg-stone-50\/50 { background-color: #fffac8 !important; } body[data-theme="vignettes"] .bg-stone-100 { background-color: #fff48d !important; } body[data-theme="vignettes"] .bg-stone-900, body[data-theme="vignettes"] .bg-stone-800 { background-color: #0a0a0a !important; color: #ffcc00 !important; } body[data-theme="vignettes"] .text-stone-900 { color: #0a0a0a !important; } body[data-theme="vignettes"] .text-stone-800 { color: #1a1a1a !important; } body[data-theme="vignettes"] .text-stone-700 { color: #2a2a2a !important; } body[data-theme="vignettes"] .text-stone-600 { color: #4a4a4a !important; } body[data-theme="vignettes"] .text-stone-500 { color: #6a6a6a !important; } body[data-theme="vignettes"] .text-stone-400 { color: #8a8a8a !important; } body[data-theme="vignettes"] .text-white { color: #ffcc00 !important; } /* Bouton primaire : jaune bulle, contour noir Ã©pais, ombre offset */ body[data-theme="vignettes"] .bg-amber-700, body[data-theme="vignettes"] .bg-amber-600, body[data-theme="vignettes"] .hover\:bg-amber-600:hover, body[data-theme="vignettes"] .hover\:bg-amber-800:hover { background-color: #ffcc00 !important; color: #0a0a0a !important; border: 2.5px solid #0a0a0a !important; box-shadow: 3px 3px 0 0 #0a0a0a !important; font-weight: 700 !important; } body[data-theme="vignettes"] .text-amber-700, body[data-theme="vignettes"] .text-amber-800, body[data-theme="vignettes"] .text-amber-600 { color: #e63946 !important; } body[data-theme="vignettes"] .bg-amber-50, body[data-theme="vignettes"] .bg-amber-50\/30 { background-color: #fff8c5 !important; } body[data-theme="vignettes"] .border-amber-100, body[data-theme="vignettes"] .border-amber-200, body[data-theme="vignettes"] .border-amber-300 { border-color: #0a0a0a !important; } body[data-theme="vignettes"] .border-stone-200, body[data-theme="vignettes"] .border-stone-300, body[data-theme="vignettes"] .border-stone-100 { border-color: #0a0a0a !important; border-width: 2px !important; } body[data-theme="vignettes"] input[type="text"], body[data-theme="vignettes"] input[type="number"], body[data-theme="vignettes"] input[type="password"], body[data-theme="vignettes"] textarea, body[data-theme="vignettes"] select { background-color: #fffef8 !important; border: 2px solid #0a0a0a !important; color: #0a0a0a !important; font-family: 'Comic Neue', sans-serif !important; box-shadow: 2px 2px 0 0 #0a0a0a; } body[data-theme="vignettes"] .rounded-2xl, body[data-theme="vignettes"] .rounded-xl, body[data-theme="vignettes"] .rounded-3xl { border-radius: 4px !important; } body[data-theme="vignettes"] .rounded-full { border-radius: 9999px !important; } body[data-theme="vignettes"] .shadow-sm { box-shadow: 2px 2px 0 0 #0a0a0a !important; } body[data-theme="vignettes"] .shadow-md { box-shadow: 4px 4px 0 0 #0a0a0a !important; } body[data-theme="vignettes"] .shadow-lg { box-shadow: 6px 6px 0 0 #0a0a0a !important; } /* Accent rouge pour text emerald/rose dans ce thÃ¨me (dramatique manga) */ body[data-theme="vignettes"] .text-emerald-700, body[data-theme="vignettes"] .text-emerald-800, body[data-theme="vignettes"] .text-emerald-600 { color: #0a0a0a !important; font-weight: 700; } body[data-theme="vignettes"] .text-rose-700, body[data-theme="vignettes"] .text-rose-600 { color: #e63946 !important; font-weight: 700; } /* ============================================================================ THÃˆME NOIR â€” polar, dramatique, cinÃ©ma noir ============================================================================ */ body[data-theme="noir"] { font-family: 'Inter', sans-serif !important; background-color: #1a1a1a !important; background-image: radial-gradient(at 20% 0%, rgba(185, 28, 28, 0.08) 0px, transparent 50%), radial-gradient(at 80% 100%, rgba(0, 0, 0, 0.4) 0px, transparent 60%); color: #e5e5e5 !important; } body[data-theme="noir"] h1, body[data-theme="noir"] h2, body[data-theme="noir"] h3, body[data-theme="noir"] h4, body[data-theme="noir"] .serif { font-family: 'Playfair Display', 'Georgia', serif !important; font-weight: 700 !important; color: #f5f5f5 !important; letter-spacing: -0.01em; } body[data-theme="noir"] .bg-white, body[data-theme="noir"] .bg-white\/95 { background-color: #262626 !important; border-color: #3f3f3f !important; color: #e5e5e5 !important; } body[data-theme="noir"] .bg-stone-50, body[data-theme="noir"] .bg-stone-50\/40, body[data-theme="noir"] .bg-stone-50\/50 { background-color: #1f1f1f !important; } body[data-theme="noir"] .bg-stone-100 { background-color: #2a2a2a !important; } body[data-theme="noir"] .bg-stone-900, body[data-theme="noir"] .bg-stone-800 { background-color: #0a0a0a !important; border-bottom: 1px solid #404040 !important; } body[data-theme="noir"] .text-stone-900, body[data-theme="noir"] .text-stone-800 { color: #f5f5f5 !important; } body[data-theme="noir"] .text-stone-700 { color: #d4d4d4 !important; } body[data-theme="noir"] .text-stone-600 { color: #a3a3a3 !important; } body[data-theme="noir"] .text-stone-500 { color: #737373 !important; } body[data-theme="noir"] .text-stone-400 { color: #525252 !important; } body[data-theme="noir"] .text-white { color: #f5f5f5 !important; } body[data-theme="noir"] .bg-amber-700, body[data-theme="noir"] .bg-amber-600, body[data-theme="noir"] .hover\:bg-amber-600:hover, body[data-theme="noir"] .hover\:bg-amber-800:hover { background-color: #b91c1c !important; color: #fff !important; } body[data-theme="noir"] .text-amber-700, body[data-theme="noir"] .text-amber-800, body[data-theme="noir"] .text-amber-600 { color: #ef4444 !important; } body[data-theme="noir"] .bg-amber-50, body[data-theme="noir"] .bg-amber-50\/30 { background-color: rgba(185, 28, 28, 0.12) !important; } body[data-theme="noir"] .border-amber-100, body[data-theme="noir"] .border-amber-200, body[data-theme="noir"] .border-amber-300 { border-color: #991b1b !important; } body[data-theme="noir"] .border-stone-200, body[data-theme="noir"] .border-stone-300, body[data-theme="noir"] .border-stone-100 { border-color: #3f3f3f !important; } body[data-theme="noir"] .bg-emerald-50, body[data-theme="noir"] .bg-emerald-50\/40 { background-color: rgba(110, 110, 110, 0.15) !important; } body[data-theme="noir"] .text-emerald-700, body[data-theme="noir"] .text-emerald-800 { color: #a3a3a3 !important; } body[data-theme="noir"] .text-rose-700, body[data-theme="noir"] .text-rose-600 { color: #ef4444 !important; } body[data-theme="noir"] input[type="text"], body[data-theme="noir"] input[type="number"], body[data-theme="noir"] input[type="password"], body[data-theme="noir"] textarea, body[data-theme="noir"] select { background-color: #0f0f0f !important; border-color: #3f3f3f !important; color: #e5e5e5 !important; } body[data-theme="noir"] .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.6) !important; } body[data-theme="noir"] .shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.7) !important; } body[data-theme="noir"] .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 0 1px rgba(185, 28, 28, 0.1) !important; } body[data-theme="noir"] img { filter: contrast(1.05) brightness(0.92) saturate(0.9); } /* Fond image (ruelle polar IA) : opacitÃ© moyenne, flou doux pour rester noir et atmosphÃ©rique */ body[data-theme="noir"]::before { content: ''; position: fixed; inset: 0; background: url('/static/img/fond-noir.jpg') center / cover no-repeat; filter: blur(2px) contrast(1.1); opacity: 0.45; pointer-events: none; z-index: 0; } body[data-theme="noir"] > * { position: relative; z-index: 1; } /* ============================================================================ THÃˆME CYBER â€” nÃ©ons, sombre, mono (et legacy "cyberpunk") ============================================================================ */ body[data-theme="cyber"], body[data-theme="cyberpunk"] { font-family: 'JetBrains Mono', 'Consolas', monospace !important; background-color: #07020e !important; background-image: radial-gradient(at 15% 0%, rgba(255, 0, 255, 0.12) 0px, transparent 50%), radial-gradient(at 85% 100%, rgba(0, 255, 234, 0.10) 0px, transparent 50%), repeating-linear-gradient(90deg, transparent 0px, transparent 50px, rgba(255, 0, 255, 0.02) 50px, rgba(255, 0, 255, 0.02) 51px); color: #d6d6ff !important; } body[data-theme="cyber"] h1, body[data-theme="cyber"] h2, body[data-theme="cyber"] h3, body[data-theme="cyber"] h4, body[data-theme="cyber"] .serif, body[data-theme="cyberpunk"] h1, body[data-theme="cyberpunk"] h2, body[data-theme="cyberpunk"] h3, body[data-theme="cyberpunk"] h4, body[data-theme="cyberpunk"] .serif { font-family: 'Orbitron', 'JetBrains Mono', monospace !important; color: #00ffea !important; text-shadow: 0 0 12px rgba(0, 255, 234, 0.7), 0 0 2px rgba(0, 255, 234, 1); letter-spacing: 0.04em; font-weight: 700 !important; } body[data-theme="cyber"] .bg-white, body[data-theme="cyber"] .bg-white\/95, body[data-theme="cyberpunk"] .bg-white, body[data-theme="cyberpunk"] .bg-white\/95 { background-color: rgba(20, 5, 45, 0.85) !important; border-color: rgba(0, 255, 234, 0.3) !important; backdrop-filter: blur(2px); } body[data-theme="cyber"] .bg-stone-50, body[data-theme="cyber"] .bg-stone-50\/40, body[data-theme="cyber"] .bg-stone-50\/50, body[data-theme="cyberpunk"] .bg-stone-50, body[data-theme="cyberpunk"] .bg-stone-50\/40, body[data-theme="cyberpunk"] .bg-stone-50\/50 { background-color: rgba(30, 10, 60, 0.5) !important; } body[data-theme="cyber"] .bg-stone-100, body[data-theme="cyberpunk"] .bg-stone-100 { background-color: rgba(40, 15, 80, 0.7) !important; } body[data-theme="cyber"] .bg-stone-900, body[data-theme="cyber"] .bg-stone-800, body[data-theme="cyberpunk"] .bg-stone-900, body[data-theme="cyberpunk"] .bg-stone-800 { background-color: #03000a !important; border-bottom: 1px solid rgba(255, 0, 255, 0.4); } body[data-theme="cyber"] .text-stone-900, body[data-theme="cyber"] .text-stone-800, body[data-theme="cyber"] .text-stone-700, body[data-theme="cyberpunk"] .text-stone-900, body[data-theme="cyberpunk"] .text-stone-800, body[data-theme="cyberpunk"] .text-stone-700 { color: #d6d6ff !important; } body[data-theme="cyber"] .text-stone-600, body[data-theme="cyberpunk"] .text-stone-600 { color: #b899cc !important; } body[data-theme="cyber"] .text-stone-500, body[data-theme="cyberpunk"] .text-stone-500 { color: #8866aa !important; } body[data-theme="cyber"] .text-stone-400, body[data-theme="cyberpunk"] .text-stone-400 { color: #664488 !important; } body[data-theme="cyber"] .text-white, body[data-theme="cyberpunk"] .text-white { color: #00ffea !important; } body[data-theme="cyber"] .bg-amber-700, body[data-theme="cyber"] .bg-amber-600, body[data-theme="cyber"] .hover\:bg-amber-600:hover, body[data-theme="cyber"] .hover\:bg-amber-800:hover, body[data-theme="cyberpunk"] .bg-amber-700, body[data-theme="cyberpunk"] .bg-amber-600, body[data-theme="cyberpunk"] .hover\:bg-amber-600:hover, body[data-theme="cyberpunk"] .hover\:bg-amber-800:hover { background: linear-gradient(135deg, #ff00ff, #aa00ff) !important; color: #ffffff !important; box-shadow: 0 0 20px rgba(255, 0, 255, 0.6), inset 0 1px 0 rgba(255,255,255,0.2) !important; text-shadow: 0 0 6px rgba(255, 255, 255, 0.8); } body[data-theme="cyber"] .text-amber-700, body[data-theme="cyber"] .text-amber-800, body[data-theme="cyber"] .text-amber-600, body[data-theme="cyber"] .text-amber-300, body[data-theme="cyberpunk"] .text-amber-700, body[data-theme="cyberpunk"] .text-amber-800, body[data-theme="cyberpunk"] .text-amber-600, body[data-theme="cyberpunk"] .text-amber-300 { color: #ff00ff !important; text-shadow: 0 0 8px rgba(255, 0, 255, 0.7); } body[data-theme="cyber"] .bg-amber-50, body[data-theme="cyber"] .bg-amber-50\/30, body[data-theme="cyberpunk"] .bg-amber-50, body[data-theme="cyberpunk"] .bg-amber-50\/30 { background-color: rgba(255, 0, 255, 0.08) !important; } body[data-theme="cyber"] .bg-emerald-50, body[data-theme="cyber"] .bg-emerald-50\/40, body[data-theme="cyberpunk"] .bg-emerald-50, body[data-theme="cyberpunk"] .bg-emerald-50\/40 { background-color: rgba(0, 255, 234, 0.08) !important; } body[data-theme="cyber"] .text-emerald-700, body[data-theme="cyber"] .text-emerald-800, body[data-theme="cyber"] .text-emerald-600, body[data-theme="cyberpunk"] .text-emerald-700, body[data-theme="cyberpunk"] .text-emerald-800, body[data-theme="cyberpunk"] .text-emerald-600 { color: #00ffea !important; text-shadow: 0 0 6px rgba(0, 255, 234, 0.6); } body[data-theme="cyber"] .text-rose-700, body[data-theme="cyber"] .text-rose-600, body[data-theme="cyberpunk"] .text-rose-700, body[data-theme="cyberpunk"] .text-rose-600 { color: #ff0066 !important; text-shadow: 0 0 6px rgba(255, 0, 102, 0.6); } body[data-theme="cyber"] .border-amber-100, body[data-theme="cyber"] .border-amber-200, body[data-theme="cyber"] .border-amber-300, body[data-theme="cyber"] .border-amber-700, body[data-theme="cyberpunk"] .border-amber-100, body[data-theme="cyberpunk"] .border-amber-200, body[data-theme="cyberpunk"] .border-amber-300, body[data-theme="cyberpunk"] .border-amber-700 { border-color: #ff00ff !important; box-shadow: 0 0 8px rgba(255, 0, 255, 0.3); } body[data-theme="cyber"] .border-stone-200, body[data-theme="cyber"] .border-stone-300, body[data-theme="cyber"] .border-stone-100, body[data-theme="cyberpunk"] .border-stone-200, body[data-theme="cyberpunk"] .border-stone-300, body[data-theme="cyberpunk"] .border-stone-100 { border-color: rgba(0, 255, 234, 0.25) !important; } body[data-theme="cyber"] input, body[data-theme="cyber"] textarea, body[data-theme="cyber"] select, body[data-theme="cyberpunk"] input, body[data-theme="cyberpunk"] textarea, body[data-theme="cyberpunk"] select { background-color: rgba(10, 0, 30, 0.85) !important; border-color: #00ffea !important; color: #d6d6ff !important; font-family: 'JetBrains Mono', monospace !important; box-shadow: inset 0 0 8px rgba(0, 255, 234, 0.2); } body[data-theme="cyber"] img, body[data-theme="cyberpunk"] img { filter: contrast(1.05) saturate(0.9) brightness(0.95); border: 1px solid rgba(0, 255, 234, 0.2); } body[data-theme="cyber"] a:not(.no-glow):hover, body[data-theme="cyberpunk"] a:not(.no-glow):hover { text-shadow: 0 0 8px currentColor, 0 0 16px currentColor; } body[data-theme="cyber"]::before, body[data-theme="cyberpunk"]::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient( 0deg, rgba(0, 255, 234, 0.03) 0px, rgba(0, 255, 234, 0.03) 1px, transparent 2px, transparent 4px ); } /* Fond image (ville cyberpunk IA) : opacitÃ© forte, contraste boostÃ©, nÃ©ons vifs */ body[data-theme="cyber"]::after, body[data-theme="cyberpunk"]::after { content: ''; position: fixed; inset: 0; background: url('/static/img/fond-cyber.jpg') center / cover no-repeat; filter: blur(2px) saturate(1.2); opacity: 0.55; pointer-events: none; z-index: 0; } body[data-theme="cyber"] > *, body[data-theme="cyberpunk"] > * { position: relative; z-index: 1; } /* ============================================================================ THÃˆME GALERIE â€” minimaliste, white space, art ============================================================================ */ body[data-theme="galerie"] { font-family: 'Inter', 'Helvetica Neue', sans-serif !important; background-color: #fafafa !important; color: #1a1a1a !important; font-weight: 400; } body[data-theme="galerie"] h1, body[data-theme="galerie"] h2, body[data-theme="galerie"] h3, body[data-theme="galerie"] h4, body[data-theme="galerie"] .serif { font-family: 'Inter', 'Helvetica Neue', sans-serif !important; font-weight: 300 !important; letter-spacing: -0.02em; color: #050505 !important; } body[data-theme="galerie"] h1, body[data-theme="galerie"] h2 { font-weight: 200 !important; } body[data-theme="galerie"] .bg-white, body[data-theme="galerie"] .bg-white\/95 { background-color: #ffffff !important; border-color: #e5e5e5 !important; } body[data-theme="galerie"] .bg-stone-50, body[data-theme="galerie"] .bg-stone-50\/40, body[data-theme="galerie"] .bg-stone-50\/50 { background-color: #f5f5f5 !important; } body[data-theme="galerie"] .bg-stone-100 { background-color: #ededed !important; } body[data-theme="galerie"] .bg-stone-900, body[data-theme="galerie"] .bg-stone-800 { background-color: #050505 !important; color: #fafafa !important; } body[data-theme="galerie"] .text-stone-900 { color: #050505 !important; } body[data-theme="galerie"] .text-stone-800 { color: #1a1a1a !important; } body[data-theme="galerie"] .text-stone-700 { color: #2a2a2a !important; } body[data-theme="galerie"] .text-stone-600 { color: #525252 !important; } body[data-theme="galerie"] .text-stone-500 { color: #737373 !important; } body[data-theme="galerie"] .text-stone-400 { color: #a3a3a3 !important; } body[data-theme="galerie"] .bg-amber-700, body[data-theme="galerie"] .bg-amber-600, body[data-theme="galerie"] .hover\:bg-amber-600:hover, body[data-theme="galerie"] .hover\:bg-amber-800:hover { background-color: #050505 !important; color: #fafafa !important; } body[data-theme="galerie"] .text-amber-700, body[data-theme="galerie"] .text-amber-800, body[data-theme="galerie"] .text-amber-600 { color: #050505 !important; } body[data-theme="galerie"] .bg-amber-50, body[data-theme="galerie"] .bg-amber-50\/30 { background-color: #f5f5f5 !important; } body[data-theme="galerie"] .border-amber-100, body[data-theme="galerie"] .border-amber-200, body[data-theme="galerie"] .border-amber-300 { border-color: #1a1a1a !important; } body[data-theme="galerie"] .border-stone-200, body[data-theme="galerie"] .border-stone-300, body[data-theme="galerie"] .border-stone-100 { border-color: #e5e5e5 !important; } body[data-theme="galerie"] input[type="text"], body[data-theme="galerie"] input[type="number"], body[data-theme="galerie"] input[type="password"], body[data-theme="galerie"] textarea, body[data-theme="galerie"] select { background-color: #ffffff !important; border-color: #d4d4d4 !important; color: #1a1a1a !important; } body[data-theme="galerie"] .rounded-2xl, body[data-theme="galerie"] .rounded-xl { border-radius: 2px !important; } body[data-theme="galerie"] .rounded-3xl { border-radius: 4px !important; } body[data-theme="galerie"] .shadow-sm, body[data-theme="galerie"] .shadow-md, body[data-theme="galerie"] .shadow-lg { box-shadow: none !important; } body[data-theme="galerie"] main { padding-top: 4rem !important; padding-bottom: 4rem !important; } body[data-theme="galerie"] img { box-shadow: 0 0 0 1px rgba(0,0,0,0.05); }