/* ============================================================================= DataGrade — thèmes alternatifs pour l'interface élève ============================================================================= Surcharges des variables CSS (:root de landing.css). Le thème "light" est le défaut → pas de classe à appliquer. Les autres s'activent via une classe sur : → mode sombre → vert phosphorescent sur noir → rose vif + pastels Ce fichier est uniquement chargé par eleve_header.php → naturellement scoped à l'interface élève (admin et prof ne voient jamais ce CSS). Anti-flash : un mini-script inline dans applique la classe AVANT le chargement des stylesheets, donc pas de scintillement entre la page blanche et le thème final. Le picker UI dans la topbar mémorise le choix en localStorage (clé "eleve-theme") — non lié à un compte, donc indépendant pour chaque navigateur de l'élève. ============================================================================= */ /* ─── THÈME SOMBRE ───────────────────────────────────────────────────────── */ html.theme-dark { --bg: #11121A; --bg-elev: #1B1D29; --ink: #F0EBFB; --ink-soft: #D4CCE8; --ink-muted: #8E86A6; --line: #2A2D3B; --line-soft: #1F2230; --violet-50: #20162E; --violet-100: #2B1D44; --violet-200: #4B3678; --violet-400: #9B7FF7; --violet-500: #A992F2; --violet-600: #C0AEF7; --violet-700: #D7CAFB; --violet-900: #ECE5FF; --coral-400: #FF8C9E; --coral-500: #FF6B85; --amber-400: #FCD34D; --amber-500: #FBBF24; --emerald-500: #34D399; --emerald-50: #0F2818; --rose-50: #2A1622; --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.50); --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.45); --shadow-lg: 0 24px 48px -12px rgba(124, 58, 237, 0.25), 0 8px 16px -8px rgba(0,0,0,0.55); --shadow-xl: 0 40px 80px -20px rgba(124, 58, 237, 0.35), 0 16px 32px -16px rgba(0,0,0,0.65); color-scheme: dark; } /* ─── THÈME HACKER ───────────────────────────────────────────────────────── */ html.theme-hacker { --bg: #000000; --bg-elev: #050E05; --ink: #00FF41; --ink-soft: #00CC33; --ink-muted: #00892A; --line: #003311; --line-soft: #001A09; --violet-50: #001A09; --violet-100: #003311; --violet-200: #004D1A; --violet-400: #00CC33; --violet-500: #00FF41; --violet-600: #66FF7A; --violet-700: #99FFA6; --violet-900: #DDFFE0; --coral-400: #FF3366; --coral-500: #FF0044; --amber-400: #FFFF00; --amber-500: #FFCC00; --emerald-500: #00FF41; --emerald-50: #001A09; --rose-50: #1A0011; --font-display: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace; --font-body: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace; --shadow-sm: 0 0 4px rgba(0, 255, 65, 0.30); --shadow-md: 0 0 8px rgba(0, 255, 65, 0.40); --shadow-lg: 0 0 20px rgba(0, 255, 65, 0.50); --shadow-xl: 0 0 30px rgba(0, 255, 65, 0.60); color-scheme: dark; } html.theme-hacker body { font-family: var(--font-body); letter-spacing: 0.01em; } html.theme-hacker .eleve-topbar__brand .brand__text { text-shadow: 0 0 6px rgba(0,255,65,0.7); } html.theme-hacker .eleve-topbar__clock { text-shadow: 0 0 4px rgba(0,255,65,0.5); } /* ─── THÈME BARBIE ────────────────────────────────────────────────────────── */ html.theme-barbie { --bg: #FFE8F3; --bg-elev: #FFFFFF; --ink: #6B0F47; --ink-soft: #A1346F; --ink-muted: #C77BA0; --line: #FFC2DF; --line-soft: #FFE0EE; --violet-50: #FFE8F3; --violet-100: #FFC2E0; --violet-200: #FF8FCB; --violet-400: #FF5DAB; --violet-500: #FF1493; --violet-600: #E50080; --violet-700: #B30062; --violet-900: #660039; --coral-400: #FF85AC; --coral-500: #FF5B92; --amber-400: #FFD700; --amber-500: #FFB300; --emerald-500: #FF69B4; --emerald-50: #FFE0F0; --rose-50: #FFF0F7; --shadow-sm: 0 2px 4px rgba(255, 20, 147, 0.15); --shadow-md: 0 4px 14px rgba(255, 20, 147, 0.22); --shadow-lg: 0 24px 48px -12px rgba(255, 20, 147, 0.38), 0 8px 16px -8px rgba(255, 105, 180, 0.22); --shadow-xl: 0 40px 80px -20px rgba(255, 20, 147, 0.48); } html.theme-barbie body.eleve-app { background: radial-gradient(circle at 0% 0%, rgba(255,182,213,0.35) 0%, transparent 40%), radial-gradient(circle at 100% 100%, rgba(255,210,235,0.45) 0%, transparent 50%), var(--bg); background-attachment: fixed; } /* ─── THÈME CYBERPUNK ────────────────────────────────────────────────────── Néons cyan + magenta sur fond violet-noir profond. Style Blade Runner. */ html.theme-cyberpunk { --bg: #0a0118; --bg-elev: #150532; --ink: #f0e8ff; --ink-soft: #a8e6ff; --ink-muted: #8b7fb5; --line: #2d1659; --line-soft: #1a0d3d; /* Cyan néon pour les accents principaux */ --violet-50: #1a0d3d; --violet-100: #2d1659; --violet-200: #4a1f8a; --violet-400: #b388ff; --violet-500: #00ffff; --violet-600: #4dffff; --violet-700: #88ffff; --violet-900: #ccffff; --coral-400: #ff4dff; /* magenta néon */ --coral-500: #ff00ff; --amber-400: #ffe500; --amber-500: #ffcc00; --emerald-500: #00ff9f; --emerald-50: #0a2e1f; --rose-50: #2a0a2a; --shadow-sm: 0 0 6px rgba(0, 255, 255, 0.35); --shadow-md: 0 0 14px rgba(255, 0, 255, 0.30), 0 0 8px rgba(0, 255, 255, 0.30); --shadow-lg: 0 0 32px rgba(0, 255, 255, 0.45), 0 0 16px rgba(255, 0, 255, 0.30); --shadow-xl: 0 0 60px rgba(0, 255, 255, 0.55), 0 0 30px rgba(255, 0, 255, 0.45); --font-display: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; color-scheme: dark; } html.theme-cyberpunk body.eleve-app { background-image: linear-gradient(180deg, transparent 0%, rgba(255, 0, 255, 0.05) 100%), radial-gradient(circle at 20% 0%, rgba(0, 255, 255, 0.18) 0%, transparent 40%), radial-gradient(circle at 80% 100%, rgba(255, 0, 255, 0.18) 0%, transparent 50%); background-attachment: fixed; } html.theme-cyberpunk .eleve-topbar { background: linear-gradient(90deg, rgba(0, 255, 255, 0.08), rgba(255, 0, 255, 0.08)); border-bottom: 1px solid #00ffff; box-shadow: 0 0 14px rgba(0, 255, 255, 0.35); } html.theme-cyberpunk .eleve-topbar__brand .brand__text { text-shadow: 0 0 8px rgba(0, 255, 255, 0.8), 0 0 16px rgba(255, 0, 255, 0.5); font-family: var(--font-display); } html.theme-cyberpunk .eleve-topbar__clock { color: #00ffff; text-shadow: 0 0 6px rgba(0, 255, 255, 0.7); } /* ─── THÈME DISCO ────────────────────────────────────────────────────────── Doré + fuchsia + ambiance boule à facettes. Années 70 paillettes. */ html.theme-disco { --bg: #1a0033; --bg-elev: #2e0859; --ink: #fff6d0; --ink-soft: #ffd700; --ink-muted: #c084fc; --line: #4a1d8a; --line-soft: #2e0859; --violet-50: #2e0859; --violet-100: #4a1d8a; --violet-200: #7c3aed; --violet-400: #f59e0b; --violet-500: #ffd700; /* doré */ --violet-600: #ffe066; --violet-700: #fff099; --violet-900: #fff6d0; --coral-400: #ff6bcb; --coral-500: #ff1493; /* fuchsia disco */ --amber-400: #ffd700; --amber-500: #ffbf00; --emerald-500: #00e5ff; /* cyan disco */ --emerald-50: #0a2a3d; --rose-50: #3d0a2a; --shadow-sm: 0 2px 8px rgba(255, 215, 0, 0.30); --shadow-md: 0 6px 20px rgba(255, 20, 147, 0.30), 0 0 12px rgba(255, 215, 0, 0.25); --shadow-lg: 0 24px 48px rgba(255, 20, 147, 0.40), 0 0 28px rgba(255, 215, 0, 0.40); --shadow-xl: 0 40px 80px rgba(255, 20, 147, 0.50), 0 0 60px rgba(255, 215, 0, 0.50); color-scheme: dark; } html.theme-disco body.eleve-app { position: relative; background-image: radial-gradient(circle at 15% 10%, rgba(255, 20, 147, 0.28) 0%, transparent 35%), radial-gradient(circle at 85% 20%, rgba(255, 215, 0, 0.24) 0%, transparent 30%), radial-gradient(circle at 50% 90%, rgba(0, 229, 255, 0.22) 0%, transparent 40%), radial-gradient(circle at 5% 80%, rgba(192, 132, 252, 0.26) 0%, transparent 30%); background-attachment: fixed; animation: disco-bg-pulse 8s ease-in-out infinite; } @keyframes disco-bg-pulse { 0%, 100% { background-color: var(--bg); } 25% { background-color: #2a0850; } 50% { background-color: #3a0a45; } 75% { background-color: #1f0a55; } } /* Boule à facettes — disque qui flotte en haut à droite */ html.theme-disco body.eleve-app::before { content: ''; position: fixed; top: -90px; right: -90px; width: 320px; height: 320px; border-radius: 50%; background: conic-gradient(from 0deg, #ffd700, #ff1493, #00e5ff, #ff6bcb, #c084fc, #ffd700, #ff1493, #00e5ff, #ffd700); opacity: 0.18; filter: blur(2px); animation: disco-ball-spin 12s linear infinite, disco-ball-glow 4s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes disco-ball-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes disco-ball-glow { 0%, 100% { opacity: 0.18; filter: blur(2px); } 50% { opacity: 0.32; filter: blur(0px); } } /* Halos lumineux qui dansent en arrière-plan */ html.theme-disco body.eleve-app::after { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.10) 0%, transparent 25%), radial-gradient(circle at 80% 50%, rgba(255, 20, 147, 0.10) 0%, transparent 25%); animation: disco-spotlights 6s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes disco-spotlights { 0%, 100% { background-position: 0% 0%, 100% 100%; } 50% { background-position: 100% 100%, 0% 0%; } } /* Tout le contenu passe au-dessus des éléments décoratifs */ html.theme-disco .eleve-topbar, html.theme-disco main, html.theme-disco .eleve-container, html.theme-disco .eleve-state, html.theme-disco .xp-section, html.theme-disco .xp-hero, html.theme-disco .card, html.theme-disco .page-section { position: relative; z-index: 1; } html.theme-disco .eleve-topbar { background: linear-gradient(90deg, #2e0859 0%, #4a1d8a 25%, #ff1493 50%, #ff6bcb 75%, #ffd700 100%); background-size: 200% 100%; border-bottom: 2px solid #ffd700; box-shadow: 0 4px 24px rgba(255, 215, 0, 0.5), 0 2px 12px rgba(255, 20, 147, 0.4); animation: disco-topbar-slide 6s linear infinite; } @keyframes disco-topbar-slide { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } html.theme-disco .eleve-topbar__brand .brand__text { background: linear-gradient(90deg, #ffd700, #ff1493, #00e5ff, #c084fc, #ffd700); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: disco-shine 2.2s linear infinite; font-weight: 800; text-shadow: 0 0 18px rgba(255, 215, 0, 0.6); } @keyframes disco-shine { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } } html.theme-disco .eleve-topbar__clock { color: #ffd700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 16px rgba(255, 215, 0, 0.4); animation: disco-glow-pulse 1.8s ease-in-out infinite; } @keyframes disco-glow-pulse { 0%, 100% { text-shadow: 0 0 8px rgba(255, 215, 0, 0.8); } 50% { text-shadow: 0 0 18px rgba(255, 215, 0, 1), 0 0 32px rgba(255, 20, 147, 0.6); } } /* Boutons : bordure arc-en-ciel animée */ html.theme-disco .btn--primary, html.theme-disco button[type="submit"]:not([class*="btn--ghost"]) { background: linear-gradient(135deg, #ff1493 0%, #ffd700 50%, #00e5ff 100%); background-size: 200% 200%; border: none; color: #1a0033; font-weight: 800; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); animation: disco-btn-shift 4s ease-in-out infinite; box-shadow: 0 0 16px rgba(255, 20, 147, 0.5), 0 0 32px rgba(255, 215, 0, 0.3); transition: transform 0.18s ease, box-shadow 0.18s ease; } @keyframes disco-btn-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } html.theme-disco .btn--primary:hover, html.theme-disco button[type="submit"]:not([class*="btn--ghost"]):hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 28px rgba(255, 20, 147, 0.7), 0 0 48px rgba(255, 215, 0, 0.5); } /* Lignes du leaderboard top 3 : halos dorés animés */ html.theme-disco .xp-leaderboard li.tier-gold { box-shadow: 0 0 16px rgba(255, 215, 0, 0.35); animation: disco-gold-pulse 2.4s ease-in-out infinite; } @keyframes disco-gold-pulse { 0%, 100% { box-shadow: 0 0 16px rgba(255, 215, 0, 0.35); } 50% { box-shadow: 0 0 28px rgba(255, 215, 0, 0.65), 0 0 12px rgba(255, 20, 147, 0.3); } } /* Cartes hover : effet "spotlight" qui balaie */ html.theme-disco a[href*="code-free"], html.theme-disco a[href*="code-daily"], html.theme-disco .eleve-xp-card { position: relative; overflow: hidden; } html.theme-disco a[href*="code-free"]::after, html.theme-disco a[href*="code-daily"]::after, html.theme-disco .eleve-xp-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); animation: disco-shimmer 5s ease-in-out infinite; pointer-events: none; } @keyframes disco-shimmer { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } /* ─── THÈME ASTRO ────────────────────────────────────────────────────────── Ciel étoilé profond + nébuleuses + Voie lactée + étoiles filantes. Le tout en CSS pur, aucune image externe. */ html.theme-astro { --bg: #02030d; --bg-elev: #0a0e26; --ink: #e6e9ff; --ink-soft: #b8c1f0; --ink-muted: #7e8aba; --line: #1a1f44; --line-soft: #0d1130; /* Accent : bleu cosmique vers magenta nébuleuse */ --violet-50: #0d1130; --violet-100: #1a1f44; --violet-200: #3a2a78; --violet-400: #8a7fff; --violet-500: #b3a7ff; --violet-600: #d4c8ff; --violet-700: #e8dfff; --violet-900: #f5f0ff; --coral-400: #ff8fae; /* rose nébuleuse */ --coral-500: #ff5d8f; --amber-400: #ffe066; /* étoile jaune */ --amber-500: #ffd700; --emerald-500: #66f0d0; /* aurore turquoise */ --emerald-50: #0a3a2e; --rose-50: #2a0a2a; --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif; --shadow-sm: 0 0 8px rgba(138, 127, 255, 0.25); --shadow-md: 0 0 16px rgba(138, 127, 255, 0.30), 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 0 36px rgba(138, 127, 255, 0.40), 0 12px 28px rgba(0, 0, 0, 0.65); --shadow-xl: 0 0 60px rgba(138, 127, 255, 0.50), 0 24px 56px rgba(0, 0, 0, 0.75); color-scheme: dark; } /* Fond : dégradé profond + nébuleuses douces qui dérivent lentement */ html.theme-astro body.eleve-app { position: relative; background: radial-gradient(ellipse at 15% 20%, rgba(168, 85, 247, 0.18) 0%, transparent 40%), radial-gradient(ellipse at 85% 70%, rgba(59, 130, 246, 0.18) 0%, transparent 40%), radial-gradient(ellipse at 60% 10%, rgba(236, 72, 153, 0.10) 0%, transparent 50%), linear-gradient(180deg, #02030d 0%, #050822 50%, #02030d 100%); background-size: 180% 180%, 200% 200%, 220% 220%, 100% 100%; background-attachment: fixed; animation: astro-nebula-drift 40s ease-in-out infinite; overflow-x: hidden; } @keyframes astro-nebula-drift { 0%, 100% { background-position: 0% 0%, 100% 100%, 50% 0%, 0% 0%; } 50% { background-position: 30% 20%, 70% 80%, 60% 30%, 0% 0%; } } /* Voie lactée : bande diagonale subtile */ html.theme-astro body.eleve-app::before { content: ''; position: fixed; inset: 0; background: linear-gradient(125deg, transparent 38%, rgba(255, 255, 255, 0.025) 47%, rgba(186, 182, 255, 0.055) 50%, rgba(255, 255, 255, 0.025) 53%, transparent 62%); pointer-events: none; z-index: 0; } /* Champ d'étoiles : 3 calques avec box-shadow → centaines d'étoiles fixes, chaque calque clignote à un rythme différent pour donner vie au ciel. (Astuce CSS classique : un point de 1-2px dupliqué via box-shadow.) */ html.theme-astro body.eleve-app::after { content: ''; position: fixed; top: 0; left: 0; width: 1px; height: 1px; background: transparent; pointer-events: none; z-index: 0; box-shadow: /* Calque 1 — petites étoiles partout (~ 70 points) */ 18vw 7vh #fff, 42vw 12vh #fff, 78vw 4vh #cdd6f4, 91vw 18vh #fff, 7vw 24vh #b4befe, 34vw 31vh #fff, 56vw 22vh #fff, 67vw 36vh #cdd6f4, 82vw 28vh #fff, 4vw 41vh #fff, 22vw 48vh #b4befe, 47vw 44vh #fff, 62vw 51vh #fff, 75vw 47vh #cdd6f4, 89vw 55vh #fff, 11vw 62vh #fff, 29vw 58vh #b4befe, 44vw 65vh #fff, 58vw 71vh #fff, 71vw 64vh #cdd6f4, 85vw 76vh #fff, 3vw 78vh #fff, 19vw 84vh #b4befe, 36vw 79vh #fff, 51vw 88vh #fff, 64vw 82vh #cdd6f4, 78vw 91vh #fff, 93vw 87vh #fff, 13vw 14vh #fff, 27vw 6vh #cdd6f4, 50vw 8vh #fff, 73vw 16vh #b4befe, 88vw 9vh #fff, 8vw 33vh #cdd6f4, 24vw 39vh #fff, 41vw 26vh #fff, 53vw 38vh #b4befe, 69vw 32vh #fff, 84vw 41vh #cdd6f4, 16vw 53vh #fff, 31vw 67vh #fff, 46vw 56vh #b4befe, 60vw 60vh #fff, 73vw 73vh #cdd6f4, 87vw 67vh #fff, 6vw 70vh #fff, 21vw 75vh #b4befe, 37vw 68vh #fff, 54vw 80vh #fff, 65vw 89vh #cdd6f4, 80vw 84vh #fff, 95vw 81vh #fff, 9vw 5vh #fff, 39vw 17vh #b4befe, 66vw 28vh #fff, 92vw 38vh #cdd6f4, 15vw 92vh #fff, 38vw 95vh #fff, 57vw 96vh #b4befe, 76vw 95vh #fff, 2vw 56vh #cdd6f4, 25vw 18vh #fff, 49vw 32vh #fff, 70vw 8vh #b4befe; animation: astro-twinkle-slow 4.5s ease-in-out infinite; } /* Calque 2 — étoiles "moyennes" qui clignotent vite */ html.theme-astro .eleve-topbar::before { content: ''; position: fixed; top: 0; left: 0; width: 2px; height: 2px; background: transparent; border-radius: 50%; pointer-events: none; z-index: 0; box-shadow: 12vw 18vh 0.5px #ffd700, 45vw 35vh 0.5px #fff, 71vw 21vh 0.5px #cdd6f4, 88vw 41vh 0.5px #ffe066, 23vw 52vh 0.5px #fff, 56vw 64vh 0.5px #cdd6f4, 81vw 73vh 0.5px #fff, 8vw 88vh 0.5px #ffd700, 35vw 82vh 0.5px #fff, 68vw 50vh 0.5px #cdd6f4, 92vw 11vh 0.5px #fff, 19vw 38vh 0.5px #ffe066, 53vw 14vh 0.5px #fff, 77vw 60vh 0.5px #cdd6f4, 4vw 71vh 0.5px #fff, 29vw 26vh 0.5px #ffd700, 61vw 79vh 0.5px #fff, 84vw 92vh 0.5px #cdd6f4; animation: astro-twinkle-fast 2.4s ease-in-out infinite; } /* Calque 3 — quelques grosses étoiles brillantes avec halo */ html.theme-astro main::before { content: ''; position: fixed; top: 12vh; left: 8vw; width: 3px; height: 3px; background: #fff; border-radius: 50%; pointer-events: none; z-index: 0; box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9), 72vw 38vh 0 #fff, 72vw 38vh 6px 1px rgba(255, 215, 0, 0.7), 34vw 76vh 0 #fff, 34vw 76vh 6px 1px rgba(180, 190, 254, 0.7), 88vw 22vh 0 #fff, 88vw 22vh 6px 1px rgba(255, 100, 180, 0.6); animation: astro-bright-pulse 3.6s ease-in-out infinite; } @keyframes astro-twinkle-slow { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.45; } } @keyframes astro-twinkle-fast { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes astro-bright-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.85; } } /* Étoile filante — apparition occasionnelle en haut à gauche → bas à droite */ html.theme-astro body.eleve-app > nav::before, html.theme-astro body.eleve-app > .eleve-topbar::after { content: ''; position: fixed; top: 15%; left: -10%; width: 120px; height: 1.5px; background: linear-gradient(90deg, transparent, #fff, rgba(255, 215, 0, 0.7), transparent); border-radius: 50%; transform: rotate(15deg); box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.4); animation: astro-shooting-star 14s ease-in infinite; animation-delay: 3s; pointer-events: none; z-index: 0; opacity: 0; } @keyframes astro-shooting-star { 0% { transform: translate(0, 0) rotate(15deg); opacity: 0; } 2% { opacity: 1; } 8% { transform: translate(120vw, 60vh) rotate(15deg); opacity: 0; } 100% { opacity: 0; } } /* Tout le contenu passe au-dessus des étoiles */ html.theme-astro .eleve-topbar, html.theme-astro main, html.theme-astro .eleve-container, html.theme-astro .eleve-state, html.theme-astro .xp-section, html.theme-astro .xp-hero, html.theme-astro .card, html.theme-astro .page-section, html.theme-astro nav.eleve-topbar__nav { position: relative; z-index: 1; } html.theme-astro .eleve-topbar { background: linear-gradient(180deg, rgba(10, 14, 38, 0.85) 0%, rgba(2, 3, 13, 0.65) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(138, 127, 255, 0.25); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); } html.theme-astro .eleve-topbar__brand .brand__text { background: linear-gradient(90deg, #b8c1f0 0%, #fff 50%, #b8c1f0 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 12px rgba(180, 190, 254, 0.5); animation: astro-brand-shimmer 5s ease-in-out infinite; font-weight: 800; } @keyframes astro-brand-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } html.theme-astro .eleve-topbar__clock { color: #b8c1f0; text-shadow: 0 0 6px rgba(184, 193, 240, 0.5); } /* Cartes : verre dépoli pour qu'on devine le ciel à travers */ html.theme-astro .xp-section, html.theme-astro .eleve-state, html.theme-astro .page-section, html.theme-astro .card { background: rgba(10, 14, 38, 0.55) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(138, 127, 255, 0.18); } /* ─── THÈME RETRO (Windows 95) ───────────────────────────────────────────── Gris Win95 + bleu turquoise. Bordures 3D inset/outset. */ html.theme-retro { --bg: #008080; /* le fameux teal Windows 95 */ --bg-elev: #c0c0c0; /* gris Windows 95 */ --ink: #000000; --ink-soft: #1c1c1c; --ink-muted: #404040; --line: #808080; --line-soft: #d4d0c8; --violet-50: #d4d0c8; --violet-100: #c0c0c0; --violet-200: #a0a0a0; --violet-400: #000080; --violet-500: #000080; /* bleu titlebar Win95 */ --violet-600: #0000a8; --violet-700: #1e1eb4; --violet-900: #ffffff; --coral-400: #c00000; --coral-500: #800000; --amber-400: #ffff00; --amber-500: #c0c000; --emerald-500: #008000; --emerald-50: #c0c0c0; --rose-50: #d4d0c8; /* Pas d'ombres douces — c'est Win95, on est en pixel art */ --shadow-sm: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, 1px 1px 0 #000000; --shadow-md: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, 2px 2px 0 #000000; --shadow-lg: inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, 2px 2px 0 #000000; --shadow-xl: inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, 4px 4px 0 #000000; --font-display: 'MS Sans Serif', 'Tahoma', 'Geneva', sans-serif; --font-body: 'MS Sans Serif', 'Tahoma', 'Geneva', sans-serif; --r-md: 0; --r-lg: 0; --r-full: 0; } html.theme-retro body.eleve-app { font-family: var(--font-body); background: var(--bg); } html.theme-retro .eleve-topbar { background: var(--bg-elev); border-bottom: 2px solid #ffffff; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080, 0 2px 0 #000000; } html.theme-retro .eleve-topbar__brand .brand__text { font-weight: 700; color: #000080; text-shadow: 1px 1px 0 #ffffff; } /* Boutons : look 3D Win95 */ html.theme-retro .btn, html.theme-retro button { border: 2px solid; border-color: #ffffff #808080 #808080 #ffffff; background: #c0c0c0; color: #000000; border-radius: 0; box-shadow: 1px 1px 0 #000000; font-family: var(--font-body); } html.theme-retro .btn:active, html.theme-retro button:active { border-color: #808080 #ffffff #ffffff #808080; box-shadow: none; } html.theme-retro input, html.theme-retro select, html.theme-retro textarea { background: #ffffff; border: 2px solid; border-color: #808080 #ffffff #ffffff #808080; border-radius: 0; font-family: var(--font-body); } /* ─── PICKER UI (visible dans la topbar élève) ───────────────────────────── */ .theme-picker { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-full); } .theme-picker__btn { width: 26px; height: 26px; border: none; background: transparent; border-radius: var(--r-full); cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform 120ms var(--ease-out), background 120ms var(--ease-out); } .theme-picker__btn:hover { background: var(--violet-50); transform: scale(1.12); } .theme-picker__btn.is-active { background: var(--violet-100); box-shadow: inset 0 0 0 2px var(--violet-500); } html.theme-hacker .theme-picker__btn.is-active { box-shadow: inset 0 0 0 2px var(--ink), 0 0 6px rgba(0,255,65,0.5); } html.theme-barbie .theme-picker__btn.is-active { box-shadow: inset 0 0 0 2px var(--violet-500), 0 0 8px rgba(255,20,147,0.45); } /* ─── Quelques retouches utiles selon le thème ───────────────────────────── */ /* dark : adoucir la barre de défilement */ html.theme-dark { scrollbar-color: var(--violet-200) var(--bg); } /* hacker : effet "scanlines" très discret pour le côté écran cathodique */ html.theme-hacker body.eleve-app::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( 180deg, rgba(0, 255, 65, 0.02) 0px, rgba(0, 255, 65, 0.02) 1px, transparent 1px, transparent 3px ); z-index: 1; mix-blend-mode: screen; }