/* ===================================================================== v102-dark-premium.css (claude-darkprem-1) Passe "un peu plus dark" + graphismes/titres/SVG premium. Chargée EN DERNIER (après v101-premium-graphics.css) -> gagne la cascade. 100% ADDITIVE + STATIQUE (aucune animation -> compatible mode fluidité, rien à exempter). Ne touche JAMAIS un fill/stroke SVG (les icônes de section/ressources utilisent des dégradés codés en dur : un override global les casserait). Ne recouvre PAS les images de fond d'écran (vignette bords-only, transparente au centre). ===================================================================== */ /* --------------------------------------------------------------------- 1) AMBIANCE PLUS DARK — vignette cinématique sur les bords. html::after (pseudo LIBRE, vérifié). Fixe, pointer-events:none, statique. Centre transparent (contenu lisible) -> assombrit seulement les bords. --------------------------------------------------------------------- */ html::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 118% 104% at 50% 42%, transparent 0%, transparent 54%, rgba(3, 2, 9, 0.30) 84%, rgba(2, 1, 6, 0.44) 100%); } @media (prefers-reduced-motion: reduce) { html::after { background: radial-gradient(ellipse 118% 104% at 50% 42%, transparent 0%, transparent 54%, rgba(3,2,9,.30) 84%, rgba(2,1,6,.44) 100%); } } /* --------------------------------------------------------------------- 2) SURFACES PLUS PROFONDES — cartes/boutons/panneaux un cran plus dark et plus opaques = contraste + richesse (texte clair reste lisible). !important + charge tardive -> bat v98-polish / main.css. --------------------------------------------------------------------- */ .nav-btn, .mode-btn, .buy-btn { background: linear-gradient(160deg, rgba(18, 11, 28, 0.90), rgba(8, 5, 15, 0.92)) !important; } #exercise-buttons .exercise-btn { background: linear-gradient(160deg, rgba(20, 13, 32, 0.94), rgba(9, 6, 16, 0.95)) !important; } .stat-card { background: rgba(9, 4, 15, 0.66) !important; } /* cartes marché / inventaire / modes / gem-pack : léger assombrissement (elles n'ont pas de fond !important -> pas besoin de !important ici) */ #market-screen .grid-3 > div, .equip-slot, .gem-pack, .market-item, .inv-item, .invp-card, .mode-card { background-color: rgba(8, 5, 14, 0.42); } /* --------------------------------------------------------------------- 3) TITRES PLUS PROPRES — soulignement OR épuré (fini l'arc-en-ciel), or cohérent, hiérarchie, text-wrap:balance. --------------------------------------------------------------------- */ .section-luxe-title { text-wrap: balance; text-shadow: 0 2px 14px rgba(255, 200, 90, 0.12), 0 1px 2px rgba(0, 0, 0, 0.7) !important; } /* soulignement OR raffiné (remplace le dégradé or->rose->cyan de v101) */ .section-luxe-title::after { width: 74px !important; height: 2px !important; margin-top: 8px !important; background: linear-gradient(90deg, transparent, #c9a44a 22%, #ffe6a3 50%, #c9a44a 78%, transparent) !important; box-shadow: 0 0 6px rgba(212, 175, 55, 0.5) !important; opacity: 0.9 !important; border-radius: 2px !important; } /* le mot accentué : renforce le grain doré (drop-shadow plus net) */ .section-luxe-title em { filter: drop-shadow(0 1px 2px rgba(120, 80, 0, 0.5)) drop-shadow(0 0 8px rgba(255, 200, 90, 0.22)) !important; } /* en-têtes d'écran génériques (hors titre de section) : traitement serif propre SANS forcer la taille (respecte les styles inline existants) */ .screen h2:not(.section-luxe-title):not(.lx-title), .screen h3:not(.section-luxe-title) { font-family: "Cinzel", "Cormorant Garamond", serif; letter-spacing: 0.03em; color: #f0e6d2; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62), 0 0 12px rgba(255, 200, 90, 0.10); } /* en-têtes de MODALES/panneaux : or unifié + Cinzel + lueur douce */ #glad-modal h2, #mx-fitness-claim-modal h2, #mx-mailbox-modal h2, #mx-guild-chat-modal h2, #mx-tuto-final-modal h2, #tutoV4-final-modal h2, #mx-modes-popup .card h2, #mx-modes-popup .card h3, .mx-set-title, #settings-modal h2 { font-family: "Cinzel", serif !important; color: #ffd97a !important; letter-spacing: 0.04em !important; text-shadow: 0 0 14px rgba(255, 210, 90, 0.35), 0 2px 6px rgba(0, 0, 0, 0.7) !important; } /* --------------------------------------------------------------------- 4) SVG PLUS NETS + PREMIUM. - Rendu géométrique précis partout (sûr, y compris icônes à dégradé). - Micro-glow OR + net UNIQUEMENT sur les groupes d'icônes sûrs (currentColor ou déjà-glow) — jamais de fill/stroke global. --------------------------------------------------------------------- */ svg { shape-rendering: geometricPrecision; } /* médaillon de section : cadre premium (double liseré or + lueur interne + ombre portée). On AJOUTE seulement box-shadow/border -> le fond radial d'origine (et son animation float) restent intacts. */ .section-luxe-icon { box-shadow: inset 0 0 0 1px rgba(255, 216, 130, 0.30), inset 0 0 18px rgba(255, 190, 70, 0.12), 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 180, 60, 0.14) !important; border: 1px solid rgba(255, 210, 120, 0.18) !important; } .section-luxe-icon svg { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(255, 190, 70, 0.26)) !important; } /* icônes d'UI en currentColor (nav, onglets, actions, réglages, guilde, ressources) : net + fine ombre + micro-halo doré (rest state). Le hover (v99-ui-premium) reste plus spécifique -> garde son glow au survol. */ .nav-btn svg, .action-btn svg, #guild-screen button svg, .psp-res-svg, button[onclick*="showSettingsModal"] svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 3px rgba(255, 200, 90, 0.30)) !important; } /* POINT AVEUGLE corrigé : mini-icônes de stats du profil (svg nus, pas dans un bouton -> non couverts jusqu'ici). currentColor -> re-style sûr. */ #profile-screen svg, .stat-card svg, .invp-card svg { shape-rendering: geometricPrecision; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); } /* --------------------------------------------------------------------- 5) CADRE OR du stage de combat renforcé (ambiance dark-fantasy). --------------------------------------------------------------------- */ #combat-vs-screen { box-shadow: inset 0 0 0 1px rgba(255, 205, 110, 0.20), inset 0 0 40px rgba(0, 0, 0, 0.55), 0 10px 34px rgba(0, 0, 0, 0.6) !important; }