/* ==================================================================== Thèmes par profil (règle 7 gamification) — un univers visuel complet. Appliqué via . ==================================================================== */ /* ------------------------------------------------------------ SOBRE (parents) */ body[data-theme="sobre"] { --accent: #7c3aed; --bg: #0f172a; --bg2: #1e293b; --card: #1e293b; --card2: #273449; --text: #e2e8f0; --muted: #94a3b8; --line: #334155; } /* ------------------------------------------------------------ ASTRO (Nino 🚀) */ body[data-theme="astro"] { --accent: #0284C7; --bg: #070b1a; --bg2: #0e1630; --card: #10193a; --card2: #16224f; --text: #e6eeff; --muted: #8ba0cf; --line: #23345f; } /* ciel étoilé animé */ body[data-theme="astro"]::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #cfe3ff, transparent), radial-gradient(2px 2px at 40% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 10% 80%, #bcd4ff, transparent), radial-gradient(2px 2px at 55% 45%, #fff, transparent), radial-gradient(circle at 50% -10%, #13214e 0%, transparent 55%); opacity: .7; animation: twinkle 5s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .45; } to { opacity: .8; } } /* petits astronautes / fusées / planètes (SVG libre de droit) qui dérivent doucement */ body[data-theme="astro"]::after { content: ''; position: fixed; inset: -10% -10% -10% -10%; z-index: -1; pointer-events: none; background-image: url('../img/bg-astro.svg'); background-size: 260px 260px; background-repeat: repeat; opacity: .10; animation: bg-drift 60s linear infinite; } @keyframes bg-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-260px,-260px,0); } } body[data-theme="astro"] .topbar { background: color-mix(in srgb, #070b1a 82%, transparent); } body[data-theme="astro"] .brand-logo { animation: float 3s ease-in-out infinite; } @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* la fusée décolle : petite flamme animée sous le marqueur */ body[data-theme="astro"] .echelle-rocket span { display: inline-block; animation: launch 1.4s ease-in-out infinite; } @keyframes launch { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } body[data-theme="astro"] .echelle-fill { background: linear-gradient(0deg, #0284C7, #38bdf8); } body[data-theme="astro"] .avatar { border-color: #38bdf8; box-shadow: 0 0 18px rgba(56,189,248,.4); } /* ------------------------------------------------------------ MANGA (Elio ⚡) */ body[data-theme="manga"] { --accent: #EA580C; --bg: #14100e; --bg2: #201812; --card: #241a13; --card2: #33241a; --text: #fdf3e7; --muted: #c9a58a; --line: #4a2f1c; } /* lignes de vitesse shōnen en fond */ body[data-theme="manga"]::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .12; background: repeating-conic-gradient(from 0deg at 50% 40%, #EA580C 0deg 2deg, transparent 2deg 8deg); mask: radial-gradient(circle at 50% 40%, transparent 30%, #000 75%); -webkit-mask: radial-gradient(circle at 50% 40%, transparent 30%, #000 75%); } /* petits héros chibi / éclairs / étoiles d'action (SVG libre de droit) */ body[data-theme="manga"]::after { content: ''; position: fixed; inset: -10% -10% -10% -10%; z-index: -1; pointer-events: none; background-image: url('../img/bg-manga.svg'); background-size: 260px 260px; background-repeat: repeat; opacity: .10; animation: bg-drift 75s linear infinite; } body[data-theme="manga"] .topbar { background: color-mix(in srgb, #14100e 82%, transparent); } body[data-theme="manga"] .section-title h1, body[data-theme="manga"] .reunion-title, body[data-theme="manga"] .big-solde { font-weight: 900; letter-spacing: .01em; text-shadow: 2px 2px 0 #111827, -1px -1px 0 #111827; } body[data-theme="manga"] .tache-btn { border-color: #4a2f1c; } body[data-theme="manga"] .tache-btn:active { border-color: #EA580C; box-shadow: 3px 3px 0 #111827; } body[data-theme="manga"] .echelle-fill { background: linear-gradient(0deg, #EA580C, #f97316); } body[data-theme="manga"] .avatar { border-color: #f97316; box-shadow: 3px 3px 0 #111827; } body[data-theme="manga"] .btn { box-shadow: 2px 2px 0 rgba(17,24,39,.6); } /* ------------------------------------------------------------ Onomatopées thème */ .onomatopee-manga { color: #fde047; -webkit-text-stroke: 2px #111827; text-shadow: 4px 4px 0 #EA580C; font-style: italic; } .onomatopee-astro { color: #fff; text-shadow: 0 0 14px #38bdf8, 0 0 26px #0284C7; } .onomatopee-sobre { color: var(--accent); text-shadow: 0 2px 10px rgba(0,0,0,.4); }