/* ===================================================================== EPSXP TD STAPS L3 — app.css CSS custom au-delà de Tailwind (animations XP / badges / confettis, accessibilité reduce-motion, surcharges mode sombre, utilitaires). ===================================================================== */ /* ---------- Variables racine (palette Kinetic Academy) -------------- */ :root { --color-primary: #FF6B35; --color-secondary: #4ECDC4; --color-tertiary: #722ED1; --color-success: #52C41A; --color-warning: #FAAD14; --color-error: #F5222D; --ca-1: #F5222D; --ca-2: #52C41A; --ca-3: #722ED1; --ca-4: #FF6B35; --ca-5: #4ECDC4; --rarity-common: #9E9E9E; --rarity-uncommon: #4CAF50; --rarity-rare: #2196F3; --rarity-epic: #9C27B0; --rarity-legendary: #FF9800; --bg-light: #FFFBF8; --surface-light: #FFFFFF; --on-bg-light: #1F1B16; --bg-dark: #0F0F1E; --surface-dark: #1A1A2E; --surface-2-dark: #252540; --on-bg-dark: #E6E1E5; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.10); --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.14); --transition-fast: 150ms; --transition: 300ms; } /* ---------- Mode sombre — surcharges (déclenché par .dark sur ) */ html.dark { background-color: var(--bg-dark); color: var(--on-bg-dark); } html.dark body { background-color: var(--bg-dark); color: var(--on-bg-dark); } /* ---------- Typographie de base ------------------------------------- */ body { font-family: 'Lexend', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input, textarea, select, button { font-family: inherit; } .code-pin, .font-code-pin { font-family: 'Space Grotesk', monospace; letter-spacing: 0.1em; } /* ---------- Focus visible ------------------------------------------- */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 0.25rem; } /* ===================================================================== ANIMATIONS — keyframes ===================================================================== */ @keyframes xpFloat { 0% { opacity: 0; transform: translateY(0) scale(0.8); } 20% { opacity: 1; transform: translateY(-10px) scale(1.0); } 100% { opacity: 0; transform: translateY(-60px) scale(1.1); } } @keyframes badgeUnlock { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 60% { transform: scale(1.1) rotate(0deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes confetti { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } @keyframes pulseCyan { 0%, 100% { box-shadow: 0 0 0 0 rgba(78, 205, 196, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(78, 205, 196, 0.0); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ===================================================================== CLASSES UTILITAIRES — animations ===================================================================== */ .xp-float { animation: xpFloat 800ms ease-out forwards; pointer-events: none; position: absolute; z-index: 50; font-weight: 800; color: var(--color-primary); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); font-size: 1.5rem; } .badge-unlock { animation: badgeUnlock 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .field-locked { border-color: var(--color-secondary) !important; animation: pulseCyan 1.5s ease-in-out infinite; } .shake { animation: shake 300ms ease-in-out; } .pulse-dot { animation: pulseDot 1.5s ease-in-out infinite; } .confetti-piece { position: fixed; top: -20px; width: 10px; height: 14px; pointer-events: none; z-index: 60; animation: confetti 4s linear forwards; } .toast-enter { animation: slideInRight 250ms ease-out forwards; } /* ===================================================================== COMPOSANTS UI ===================================================================== */ /* PIN inputs — style code OTP (chacun 4 chiffres) */ .pin-input { width: 56px; height: 64px; border-radius: 0.5rem; border: 2px solid var(--color-primary); background: transparent; text-align: center; font-family: 'Space Grotesk', monospace; font-size: 28px; font-weight: 700; letter-spacing: 0; transition: border-color var(--transition), box-shadow var(--transition); } .pin-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.25); } /* Card générique */ .card { background-color: #fff; border-radius: 0.5rem; border: 1px solid #D7C2B5; box-shadow: var(--shadow-card); transition: box-shadow var(--transition); } html.dark .card { background-color: var(--surface-dark); border-color: #3a3a55; } .card:hover { box-shadow: var(--shadow-elevated); } /* Bouton primaire */ .btn-primary { background-color: var(--color-primary); color: #fff; padding: 12px 24px; border-radius: 9999px; font-weight: 600; transition: opacity var(--transition), transform var(--transition); } .btn-primary:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } /* Chips — Champs d'apprentissage */ .chip-ca-1 { background-color: var(--ca-1); } .chip-ca-2 { background-color: var(--ca-2); } .chip-ca-3 { background-color: var(--ca-3); } .chip-ca-4 { background-color: var(--ca-4); } .chip-ca-5 { background-color: var(--ca-5); } /* Toasts */ .tdeps-toast { pointer-events: auto; min-width: 240px; max-width: 360px; padding: 12px 16px; border-radius: 0.5rem; color: #fff; box-shadow: var(--shadow-elevated); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; } .tdeps-toast.success { background-color: var(--color-success); } .tdeps-toast.error { background-color: var(--color-error); } .tdeps-toast.warning { background-color: var(--color-warning); color: #1F1B16; } .tdeps-toast.info { background-color: var(--color-secondary); } /* Badge unlock overlay */ .badge-unlock-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 60; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); pointer-events: auto; animation: fadeIn 250ms ease-out forwards; } .badge-unlock-card { background: var(--surface-light); color: var(--on-bg-light); border-radius: 1rem; padding: 32px 48px; text-align: center; box-shadow: var(--shadow-elevated); max-width: 90vw; } html.dark .badge-unlock-card { background: var(--surface-dark); color: var(--on-bg-dark); } .badge-unlock-icon { width: 96px; height: 96px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary), var(--color-warning)); color: #fff; font-size: 48px; box-shadow: 0 0 0 8px rgba(255, 107, 53, 0.18); } /* Avatar coéquipier */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 700; line-height: 1; } /* Tableaux — espacement par défaut */ .table-default th { text-align: left; font-weight: 600; padding: 8px 12px; border-bottom: 1px solid #D7C2B5; } .table-default td { padding: 8px 12px; border-bottom: 1px solid #F4DED2; } /* Zones champs collaboratifs verrouillés */ .lock-indicator { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 9999px; background: var(--color-secondary); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); z-index: 5; } /* Compteurs caractères */ .char-count { font-size: 12px; color: #85736A; font-variant-numeric: tabular-nums; } .char-count.below-min { color: var(--color-warning); } .char-count.ok { color: var(--color-success); } /* ===================================================================== ACCESSIBILITÉ — préférences utilisateur ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .confetti-piece { display: none; } .pulse-dot, .field-locked { animation: none !important; } } /* Scrollbar discrète mode sombre */ html.dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.dark ::-webkit-scrollbar-track { background: var(--bg-dark); } html.dark ::-webkit-scrollbar-thumb { background: var(--surface-2-dark); border-radius: 5px; } /* Print */ @media print { header, aside, .no-print { display: none !important; } body { background: #fff !important; color: #000 !important; } }