/* ============================================================ themes.css — Palettes de thèmes Olarys Chargé sur toutes les pages après global.css Appliqué via Sans attribut = thème Sombre (défaut) ============================================================ */ /* ══════════════════════════════════════════════════════════════ THÈME CLAIR ══════════════════════════════════════════════════════════════ */ /* Variables CSS globales */ [data-theme="clair"] { --or: #C99A35; --or-clair: #E8B84B; --or-sombre: #A07820; --orange: #C96030; --rouge: #C96030; --noir: #F5F0E8; --noir2: #EDE8DF; --gris: #E2DDD4; --gris2: #7A6E5F; --pierre: #D8D2C8; --blanc: #1A120A; --blanc2: #3D2E1E; } /* ── Base universelle ─────────────────────────────────────── */ [data-theme="clair"] body { background: #F5F0E8 !important; color: #1A120A !important; } [data-theme="clair"] html, [data-theme="clair"] body { background-color: #F5F0E8 !important; } /* ── Overlays "bientôt" (Vote, Colisée) ───────────────────── Ces overlays sont en position:fixed sur toute la page. On leur conserve leur fond sombre + texte clair pour la lisibilité — ils ont leur propre design indépendant du thème. */ /* ── Colisée : page entière sur fond sombre (hero image en plein écran) ── */ [data-theme="clair"] body:has(.colisee-hero) { background: #17110D !important; } [data-theme="clair"] .hero-overlay-dark, [data-theme="clair"] .hero-overlay-bottom { background: revert !important; } [data-theme="clair"] .bientot-overlay { background: #17110D !important; color: #F2E9DA !important; } [data-theme="clair"] .bientot-overlay * { color: #F2E9DA; } [data-theme="clair"] .bientot-titre span { color: #E8B84B !important; } [data-theme="clair"] .bientot-eyebrow { color: #E07A4D !important; } [data-theme="clair"] .bientot-desc { color: #8e7f6b !important; } [data-theme="clair"] .bientot-retour { color: #8e7f6b !important; border-color: rgba(244,227,184,.15) !important; background: transparent !important; } /* ── Toutes les "cards" / blocs sombres ─────────────────── */ [data-theme="clair"] .abo-card, [data-theme="clair"] .divers-card, [data-theme="clair"] .pack-card, [data-theme="clair"] .enchere-card, [data-theme="clair"] .video-card, [data-theme="clair"] .sortie-card, [data-theme="clair"] .event-card, [data-theme="clair"] .fanart-card, [data-theme="clair"] .serie-card, [data-theme="clair"] .tendance-item, [data-theme="clair"] .auteur-card, [data-theme="clair"] .fid-mission-card, [data-theme="clair"] .recompense-card, [data-theme="clair"] .perso-option, [data-theme="clair"] .perso-grid, [data-theme="clair"] .info-bloc, [data-theme="clair"] .securite-bloc, [data-theme="clair"] .liste-card, [data-theme="clair"] .lecture-card, [data-theme="clair"] .forum-sujet-row { background: #EDE8DF !important; border-color: rgba(26,18,10,.10) !important; color: #1A120A !important; } /* ── Heros et sections pleine largeur ───────────────────── */ [data-theme="clair"] .boutique-hero, [data-theme="clair"] .planning-hero, [data-theme="clair"] .page-hero, [data-theme="clair"] .nl-hero, [data-theme="clair"] .nl-left, [data-theme="clair"] .contact-left, [data-theme="clair"] .contact-wrap, [data-theme="clair"] .auteurs-section, [data-theme="clair"] .fidelite-section, [data-theme="clair"] .boutique-body, [data-theme="clair"] .planning-body, [data-theme="clair"] .trailer-grid, [data-theme="clair"] .vote-wrap, [data-theme="clair"] .inscription-wrap, [data-theme="clair"] .inscription-left, [data-theme="clair"] .fanart-hero, [data-theme="clair"] .fanart-body, [data-theme="clair"] .series-body, [data-theme="clair"] .compte-wrap { background: #F5F0E8 !important; } /* ── Sidebar compte ─────────────────────────────────────── */ [data-theme="clair"] .compte-sidebar { background: #E8E2D8 !important; } [data-theme="clair"] .sidebar-profil { background: #DDD7CC !important; } [data-theme="clair"] .sidebar-nom { color: #1A120A !important; } [data-theme="clair"] .sidebar-email { color: #7A6E5F !important; } [data-theme="clair"] .sidebar-section-label { color: #A07820 !important; } [data-theme="clair"] .sidebar-item { color: #3D2E1E !important; } [data-theme="clair"] .sidebar-item:hover { color: #1A120A !important; background: rgba(26,18,10,.04) !important; } [data-theme="clair"] .sidebar-item.active { color: #C99A35 !important; background: rgba(201,154,53,.08) !important; border-left-color: #C99A35 !important; } [data-theme="clair"] .sidebar-footer a { color: #C96030 !important; } /* ── Barre nav onglets ──────────────────────────────────── */ [data-theme="clair"] .cat-nav, [data-theme="clair"] .planning-tabs { background: #E2DDD4 !important; border-color: rgba(26,18,10,.08) !important; } [data-theme="clair"] .tab-btn, [data-theme="clair"] .cat-nav-item { color: #7A6E5F !important; border-bottom-color: transparent !important; } [data-theme="clair"] .tab-btn.active, [data-theme="clair"] .cat-nav-item.active { color: #C99A35 !important; border-bottom-color: #C99A35 !important; } /* ── Formulaires ────────────────────────────────────────── */ [data-theme="clair"] input, [data-theme="clair"] textarea, [data-theme="clair"] select { background: #EDE8DF !important; border-color: rgba(26,18,10,.15) !important; color: #1A120A !important; } [data-theme="clair"] input::placeholder, [data-theme="clair"] textarea::placeholder { color: #9A8C77 !important; } /* ── Forum ──────────────────────────────────────────────── */ [data-theme="clair"] .forum-stats-bar { background: #1A120A !important; } [data-theme="clair"] .forum-stats-bar * { color: #F5F0E8 !important; } [data-theme="clair"] .forum-cat-titre { color: #C99A35 !important; } [data-theme="clair"] .forum-sujet-titre { color: #1A120A !important; } [data-theme="clair"] .forum-sujet-meta { color: #7A6E5F !important; } /* ── nl-right (formulaire newsletter) ───────────────────── */ [data-theme="clair"] .nl-right { background: #EDE8DF !important; } /* ── Navbar ─────────────────────────────────────────────── */ [data-theme="clair"] .navbar { background: rgba(245,240,232,0.97) !important; border-bottom: 1px solid rgba(26,18,10,0.10) !important; } [data-theme="clair"] .navbar-brand { color: #1A120A !important; } [data-theme="clair"] .navbar-brand:hover { color: #C99A35 !important; } [data-theme="clair"] .navbar-nav .nav-link { color: #5A4A35 !important; } [data-theme="clair"] .navbar-nav .nav-link:hover { color: #1A120A !important; } [data-theme="clair"] .navbar-nav .nav-link:not(.dropdown-toggle)::after { background: #C99A35 !important; } /* ── Dropdown ───────────────────────────────────────────── */ [data-theme="clair"] .dropdown-menu { background: rgba(245,240,232,0.99) !important; border-top: 2px solid #C99A35 !important; border-color: rgba(26,18,10,0.12) !important; box-shadow: 0 24px 60px rgba(0,0,0,.12) !important; } [data-theme="clair"] .dropdown-item { color: #3D2E1E !important; background: transparent !important; } [data-theme="clair"] .dropdown-item:hover { background: rgba(201,154,53,.08) !important; color: #1A120A !important; border-left-color: #C99A35 !important; } [data-theme="clair"] .dropdown-header-label { color: #7A6E5F !important; } /* ── Section header / titres ────────────────────────────── */ [data-theme="clair"] .section-tag, [data-theme="clair"] .hero-tag { color: #A07820 !important; } [data-theme="clair"] .section-titre, [data-theme="clair"] .hero-h1, [data-theme="clair"] .planning-titre { color: #1A120A !important; } [data-theme="clair"] .section-titre span, [data-theme="clair"] .planning-titre span { color: #C99A35 !important; } [data-theme="clair"] .section-sep, [data-theme="clair"] .sous-titre::after { background: rgba(26,18,10,.08) !important; } [data-theme="clair"] .sous-titre { color: #A07820 !important; } /* ── Textes généraux ────────────────────────────────────── */ [data-theme="clair"] p, [data-theme="clair"] span, [data-theme="clair"] li, [data-theme="clair"] td, [data-theme="clair"] th, [data-theme="clair"] label, [data-theme="clair"] div { color: inherit; } /* ── Skeleton / loading ─────────────────────────────────── */ [data-theme="clair"] .skeleton { background: linear-gradient(90deg, #E2DDD4 25%, #D8D2C8 50%, #E2DDD4 75%) !important; background-size: 200% 100% !important; } /* ── Footer ─────────────────────────────────────────────── */ [data-theme="clair"] .site-footer { background: #EDE8DF !important; border-top-color: rgba(26,18,10,.08) !important; } [data-theme="clair"] .footer-brand { color: #1A120A !important; } [data-theme="clair"] .footer-desc { color: #7A6E5F !important; } [data-theme="clair"] .footer-col-title { color: #C96030 !important; } [data-theme="clair"] .footer-links a { color: #5A4A35 !important; } [data-theme="clair"] .footer-links a:hover { color: #1A120A !important; } [data-theme="clair"] .footer-copy { color: #7A6E5F !important; } [data-theme="clair"] .footer-social a { color: #7A6E5F !important; } [data-theme="clair"] .footer-social a:hover { color: #C99A35 !important; } [data-theme="clair"] .footer-sep { border-top-color: rgba(26,18,10,.08) !important; } /* ── Scrollbar ──────────────────────────────────────────── */ [data-theme="clair"] ::-webkit-scrollbar-track { background: #F5F0E8; } [data-theme="clair"] ::-webkit-scrollbar-thumb { background: #C99A35; } /* ══════════════════════════════════════════════════════════════ THÈME PIONNIER ══════════════════════════════════════════════════════════════ */ [data-theme="pionnier"] { --or: #E8B84B; --or-clair: #F4D58A; --or-sombre: #C99A35; --orange: #C96030; --rouge: #C96030; --rouge2: #A84020; --noir: #1E0E04; --noir2: #2A1508; --gris: #3A200C; --gris2: #9A7A5A; --pierre: #3D2510; --blanc: #F4D58A; --blanc2: #C9A870; } [data-theme="pionnier"] body { background: #1E0E04; color: #F4D58A; background-image: radial-gradient(ellipse at 20% 50%, rgba(201,96,48,.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(232,184,75,.04) 0%, transparent 50%); } [data-theme="pionnier"] .navbar { background: rgba(30,14,4,0.97) !important; border-bottom: 1px solid rgba(232,184,75,0.15); } [data-theme="pionnier"] .navbar::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,184,75,.4), transparent); pointer-events: none; } [data-theme="pionnier"] .navbar-brand { color: #E8B84B !important; letter-spacing: 3px; } [data-theme="pionnier"] .navbar-nav .nav-link { color: #C9A870 !important; } [data-theme="pionnier"] .navbar-nav .nav-link:hover { color: #F4D58A !important; } [data-theme="pionnier"] .dropdown-menu { background: rgba(30,14,4,0.99) !important; border-top: 2px solid #C96030 !important; border-color: rgba(232,184,75,0.15) !important; } [data-theme="pionnier"] .dropdown-item { color: #C9A870 !important; } [data-theme="pionnier"] .dropdown-item:hover { background: rgba(201,96,48,.08) !important; color: #F4D58A !important; border-left-color: #C96030 !important; } [data-theme="pionnier"] .navbar-brand::after { content: ' ✦ PIONNIER'; font-size: 0.45rem; font-weight: 700; letter-spacing: 3px; color: #C96030; vertical-align: super; margin-left: 4px; } [data-theme="pionnier"] .site-footer { background: #160900; border-top: 1px solid rgba(232,184,75,.10); } [data-theme="pionnier"] ::-webkit-scrollbar-track { background: #1E0E04; } [data-theme="pionnier"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #C96030, #E8B84B); }