/* ============================================================
   ECHO — app.css
   Design system extrait du model.html — glassmorphism dark
   ============================================================ */

/* ---- Variables ---- */
:root {
    --bg-deep: #050505;
    --surface: rgba(255, 255, 255, 0.03);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 255, 255, 0.25);
    /* Profil — colorimétrie dynamique (override via JS/inline) */
    --theme-primary: #fbbf24;
    --theme-secondary: #f43f5e;
    --theme-glow: rgba(251, 191, 36, 0.3);
}

/* ---- Base ---- */
body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-deep);
    color: #FAFAFA;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(76, 29, 149, 0.15), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(15, 23, 42, 0.4), transparent 25%);
}

.font-serif-title { font-family: 'Playfair Display', serif; }

/* ---- Blobs de fond ---- */
.blob {
    position: fixed;
    filter: blur(50px);
    z-index: 0;
    opacity: 0.45;
    animation: float 12s infinite ease-in-out alternate;
    pointer-events: none;
    will-change: transform;
}
.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; max-width: 600px; max-height: 600px; background: rgba(139, 92, 246, 0.35); }
.blob-2 { bottom: -10%; right: -5%; width: 45vw; height: 45vw; max-width: 500px; max-height: 500px; background: rgba(56, 189, 248, 0.25); animation-delay: -4s; }
.blob-3 { top: 30%; left: 30%; width: 40vw; height: 40vw; max-width: 400px; max-height: 400px; background: rgba(244, 63, 94, 0.2); animation-duration: 18s; }

@keyframes float {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 60px) scale(1.1); }
}

/* ---- Navigation Duolingo-style ---- */
.glass-nav {
    background: rgba(5, 5, 5, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: rgba(255, 255, 255, 0.08);
    z-index: 50;
}

.nav-item {
    position: relative;
    transition: all 0.3s ease;
    text-decoration: none;
}
.nav-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}
.nav-item:hover::before { opacity: 1; }
.nav-item.active { color: #fff; }
.nav-item.active i,
.nav-item.active [data-lucide] { color: var(--theme-primary); filter: drop-shadow(0 0 8px var(--theme-glow)); }

/* Indicateur actif desktop — barre verticale à gauche */
.nav-indicator-desktop {
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 4px;
    height: 20px;
    background: var(--theme-primary);
    border-radius: 0 4px 4px 0;
    transition: transform 0.3s;
    box-shadow: 0 0 10px var(--theme-primary);
}
.nav-item.active .nav-indicator-desktop { transform: translateY(-50%) scaleY(1); }

/* Indicateur actif mobile — barre horizontale en haut */
.nav-indicator-mobile {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 3px;
    background: var(--theme-primary);
    border-radius: 0 0 4px 4px;
    transition: transform 0.3s;
    box-shadow: 0 0 10px var(--theme-primary);
}
.nav-item.active .nav-indicator-mobile { transform: translateX(-50%) scaleX(1); }

/* Padding bottom safe area iOS */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Custom scrollbar pour le contenu principal */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }

/* Layout body avec sidebar */
body.has-sidebar {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Forcer les vues tribunal à s'aligner en haut dans le nouveau layout */
body.has-sidebar main.flex-1 {
    justify-content: flex-start;
}

/* ---- Glassmorphism Buttons ---- */
.btn-elegant {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.btn-elegant::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: left 0.7s ease;
}

.btn-elegant:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.6);
}

.btn-elegant:hover::before { left: 200%; }

.btn-elegant:active, .btn-elegant.clicked {
    transform: scale(0.97) translateY(0);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.1s;
}

/* Option hover variants */
.btn-elegant.opt-a:hover { border-color: rgba(52, 211, 153, 0.5);  box-shadow: 0 0 20px -5px rgba(52, 211, 153, 0.2); }
.btn-elegant.opt-b:hover { border-color: rgba(56, 189, 248, 0.5);  box-shadow: 0 0 20px -5px rgba(56, 189, 248, 0.2); }
.btn-elegant.opt-c:hover { border-color: rgba(251, 191, 36, 0.5);  box-shadow: 0 0 20px -5px rgba(251, 191, 36, 0.2); }
.btn-elegant.opt-d:hover { border-color: rgba(244, 63, 94, 0.5);   box-shadow: 0 0 20px -5px rgba(244, 63, 94, 0.2); }
.btn-elegant.opt-e:hover { border-color: rgba(139, 92, 246, 0.5);  box-shadow: 0 0 20px -5px rgba(139, 92, 246, 0.2); }
.btn-elegant.opt-f:hover { border-color: rgba(6, 182, 212, 0.5);   box-shadow: 0 0 20px -5px rgba(6, 182, 212, 0.2); }
.btn-elegant.opt-g:hover { border-color: rgba(249, 115, 22, 0.5);  box-shadow: 0 0 20px -5px rgba(249, 115, 22, 0.2); }

/* Selected (voted) state */
.btn-elegant.selected {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.06);
}

/* ---- Animations ---- */
.reveal-up {
    animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes revealUp {
    to { opacity: 1; transform: translateY(0); }
}

.haptic-shake {
    animation: haptic 0.3s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes haptic {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* Stagger children reveal */
.reveal-up-delay-1 { animation-delay: 0.1s; }
.reveal-up-delay-2 { animation-delay: 0.2s; }
.reveal-up-delay-3 { animation-delay: 0.3s; }
.reveal-up-delay-4 { animation-delay: 0.4s; }
.reveal-up-delay-5 { animation-delay: 0.5s; }
.reveal-up-delay-6 { animation-delay: 0.6s; }
.reveal-up-delay-7 { animation-delay: 0.7s; }

/* ---- Sparks ---- */
.spark {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 2px;
    height: 12px;
    border-radius: 2px;
    animation: spark-fly 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    box-shadow: 0 0 10px currentColor;
}

@keyframes spark-fly {
    0%   { transform: translate(0, 0) rotate(var(--rot)) scaleY(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scaleY(0); opacity: 0; }
}

/* ---- Laser Bar ---- */
.laser-bar-container {
    background: #111;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.laser-bar {
    position: relative;
    transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.laser-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    bottom: -2px;
    width: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

/* ---- SPA View Transitions ---- */
.view-section {
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.view-hidden {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}
.view-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    position: relative;
    visibility: visible;
}

/* ---- Story Card (Viral Share) ---- */
.story-card {
    background: linear-gradient(135deg, rgba(20,20,20,0.9) 0%, rgba(5,5,5,0.95) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 20px 50px rgba(0,0,0,0.8);
    aspect-ratio: 9/16;
    max-height: 80vh;
}

/* ---- Stats Result Bars ---- */
.stat-bar {
    height: 100%;
    border-radius: 9999px;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stats detail page — bar track + bar + glow dot */
.stats-bar-track {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    position: relative;
}
.stats-bar {
    height: 100%;
    border-radius: 6px;
    position: relative;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.stats-bar::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor, 0 0 15px currentColor;
}

/* Filter pills */
.filter-pill {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    transition: all 0.3s ease;
    cursor: pointer;
}
.filter-pill:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.filter-pill.active {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.1);
}

/* Scanning / sweep effect on filter change */
.scanning {
    position: relative;
}
.scanning::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: scan 1s ease-in-out infinite;
    z-index: 20;
    pointer-events: none;
}
@keyframes scan {
    100% { left: 200%; }
}

/* Hide scrollbar for filter bar */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Flash messages ---- */
.flash-enter {
    animation: flashIn 0.4s ease forwards;
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* ---- Selection ---- */
::selection {
    background: rgba(255,255,255,0.2);
}

/* ---- Select dark (options fond sombre) ---- */
select option {
    background-color: #111111;
    color: #FAFAFA;
}

/* ---- Shimmer for premium upsell ---- */
@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ---- 404 Page ---- */
.glitch-text {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(to right, #8b5cf6, #3b82f6);
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.4));
    animation: glitch-pulse 4s infinite alternate;
}
@keyframes glitch-pulse {
    0%   { filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.4)); opacity: 0.8; }
    100% { filter: drop-shadow(0 0 50px rgba(139, 92, 246, 0.7)); opacity: 1; }
}
@keyframes dust-drift {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    20%  { opacity: 0.3; }
    80%  { opacity: 0.3; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ============================================================
   SALLE D'ATTENTE (waiting room) — V2
   ============================================================ */

/* Timer "Orbe Vivant" */
.timer-orb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow:hidden confine ::before (inset:-20px + spin) au cercle — évite le scrollbar mobile */
    overflow: hidden;
    /* le lueur extérieure est sur l'élément lui-même (non clipé par son propre overflow:hidden) */
    box-shadow: 0 0 50px var(--waiting-glow, rgba(139,92,246,0.4));
}
.timer-orb::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--waiting-color, #8b5cf6), transparent 70%);
    animation: spin 10s linear infinite;
    filter: blur(10px);
    opacity: 0.3;
    z-index: -1;
}
.timer-orb::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 40px var(--waiting-color, #8b5cf6);
    z-index: 1;
    pointer-events: none;
}

/* Sphère Vivante (Entity Sphere) — Timer animé organique */
.entity-sphere {
    background-size: 200% 200%;
    animation: entity-breathe 5s ease-in-out infinite, entity-shift-glow 8s ease-in-out infinite alternate;
    will-change: transform;
}
.organic-ring {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph-ring 8s ease-in-out infinite alternate, spin-ring 20s linear infinite;
}
.core-entity {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, rgba(139, 92, 246, 0.2) 50%, transparent 80%);
    border-radius: 50%;
    animation: core-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(15px);
    will-change: transform;
}
@keyframes entity-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
@keyframes entity-shift-glow {
    0% { background-position: 0% 50%; box-shadow: inset 0 0 40px rgba(139, 92, 246, 0.1), 0 0 80px rgba(139, 92, 246, 0.2); }
    100% { background-position: 100% 50%; box-shadow: inset 0 0 60px rgba(167, 139, 250, 0.2), 0 0 120px rgba(139, 92, 246, 0.4); }
}
@keyframes morph-ring {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes spin-ring {
    100% { transform: rotate(360deg); }
}
@keyframes core-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; box-shadow: 0 0 30px rgba(168, 85, 247, 0.2); }
    15% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.7; box-shadow: 0 0 60px rgba(168, 85, 247, 0.4); }
    30% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; box-shadow: 0 0 40px rgba(168, 85, 247, 0.3); }
    45% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.85; box-shadow: 0 0 90px rgba(192, 132, 252, 0.6); }
}

/* Sphère atténuée — Dossier Clos */
.sphere-clos {
    animation: entity-breathe 9s ease-in-out infinite, entity-shift-glow-clos 12s ease-in-out infinite alternate;
}
.sphere-clos .core-entity {
    animation: core-pulse-clos 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.sphere-clos .organic-ring {
    opacity: 0.35;
}
@keyframes entity-shift-glow-clos {
    0% { background-position: 0% 50%; box-shadow: inset 0 0 15px rgba(139, 92, 246, 0.04), 0 0 25px rgba(139, 92, 246, 0.07); }
    100% { background-position: 100% 50%; box-shadow: inset 0 0 25px rgba(167, 139, 250, 0.06), 0 0 45px rgba(139, 92, 246, 0.12); }
}
@keyframes core-pulse-clos {
    0%, 100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.15; box-shadow: 0 0 15px rgba(168, 85, 247, 0.1); }
    15% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.22; box-shadow: 0 0 25px rgba(168, 85, 247, 0.15); }
    30% { transform: translate(-50%, -50%) scale(0.75); opacity: 0.16; box-shadow: 0 0 18px rgba(168, 85, 247, 0.1); }
    45% { transform: translate(-50%, -50%) scale(1.0); opacity: 0.28; box-shadow: 0 0 35px rgba(192, 132, 252, 0.18); }
}

/* Jauges de stats minimalistes */
.waiting-stat-bar {
    height: 6px;
    border-radius: 6px;
    transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.waiting-stat-bar-user {
    box-shadow: 0 0 15px currentColor;
}

/* Cartes d'exploration (Hier & Archives) */
.explore-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}
.explore-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Glass panel (gradient top border) */
.glass-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 2rem;
    position: relative;
    z-index: 10;
}

/* Animation breathing pour le blob dynamique */
@keyframes breathe-blob {
    0%   { transform: scale(0.9) translateY(0); opacity: 0.3; }
    100% { transform: scale(1.1) translateY(20px); opacity: 0.6; }
}

/* Font mono pour le timer */
.font-mono { font-family: 'Space Mono', monospace; }

/* ============================================================
   PAGE DE BIENVENUE (welcome / landing)
   ============================================================ */

/* L'Œil de l'Algorithme (Orbe central) */
.ai-core {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.ai-core::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--theme-primary, #8b5cf6), var(--theme-secondary, #0ea5e9), transparent 60%);
    animation: spin 8s linear infinite;
    filter: blur(15px);
    opacity: 0.6;
}
.ai-core::after {
    content: ''; position: absolute; inset: 10px;
    border-radius: 50%;
    background: #000;
    box-shadow: inset 0 0 40px var(--theme-primary, #8b5cf6);
    z-index: 1;
}
.ai-pupil {
    position: absolute; z-index: 2;
    width: 4px; height: 40px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 20px #fff, 0 0 40px var(--theme-primary, #8b5cf6);
    animation: blink-pupil 4s infinite ease-in-out, look-around 10s infinite;
}

@keyframes blink-pupil {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}
@keyframes look-around {
    0%, 100% { left: 50%; transform: translateX(-50%) scaleY(1); }
    25% { left: 40%; transform: translateX(-50%) scaleY(0.8) skewX(10deg); }
    75% { left: 60%; transform: translateX(-50%) scaleY(0.8) skewX(-10deg); }
}

/* Blobs de la page bienvenue */
.welcome-blob-1 { top: 30%; left: -10%; width: 50vw; height: 50vw; background: var(--theme-primary, #8b5cf6); opacity: 0.2; }
.welcome-blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: var(--theme-secondary, #0ea5e9); animation-delay: -10s; opacity: 0.2; }

/* Glassmorphism Card (welcome-specific, pas de conflit avec explore-card) */
.glass-welcome-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 1.5rem;
    position: relative;
    z-index: 10;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.glass-welcome-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 0 20px rgba(139, 92, 246, 0.1);
}

/* Bouton CTA Neon Glow */
.btn-glow {
    position: relative;
    background: linear-gradient(90deg, var(--theme-primary, #8b5cf6), var(--theme-secondary, #0ea5e9));
    border: none;
    z-index: 1;
}
.btn-glow::before {
    content: ''; position: absolute; inset: -2px; z-index: -1;
    background: linear-gradient(90deg, var(--theme-primary, #8b5cf6), var(--theme-secondary, #0ea5e9), var(--theme-primary, #8b5cf6));
    background-size: 200% auto; border-radius: inherit; filter: blur(15px);
    opacity: 0.7; animation: btn-glow-shimmer 3s linear infinite; transition: opacity 0.3s;
}
.btn-glow:hover::before { opacity: 1; }
@keyframes btn-glow-shimmer { to { background-position: 200% center; } }

/* Typewriter cursor */
.typewriter-text {
    border-right: 2px solid var(--theme-primary, #8b5cf6);
    white-space: nowrap;
    overflow: hidden;
    animation: blink-cursor 0.75s step-end infinite;
}
@keyframes blink-cursor { from, to { border-color: transparent } 50% { border-color: var(--theme-primary, #8b5cf6); } }

/* Scroll Reveal */
.welcome-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.welcome-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   PROFIL PAGE
   ============================================================ */

/* ---- h1 italique → couleur thématique (dominant aura) ---- */
h1 i, h1 em {
    color: var(--theme-primary) !important;
    font-style: italic;
}

/* ---- Couleurs thématiques utilitaires ---- */
.text-theme  { color: var(--theme-primary); }
.border-theme { border-color: var(--theme-primary); }
.bg-theme-glow { background-color: var(--theme-glow); }

/* ---- Glass Card (profil) ---- */
.glass-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
}
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    pointer-events: none;
}

/* ---- Profile fade-in-up ---- */
.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* ---- Radar polygon breathing ---- */
.radar-polygon {
    animation: breathe 4s ease-in-out infinite alternate;
    transform-origin: center;
    transition: stroke 0.8s ease, filter 0.8s ease;
}
@keyframes breathe {
    0%   { transform: scale(0.98); filter: drop-shadow(0 0 10px var(--theme-glow)); }
    100% { transform: scale(1.02); filter: drop-shadow(0 0 25px var(--theme-glow)); }
}

/* ---- Profil avatar ring ---- */
.profile-avatar-ring {
    animation: spin 10s linear infinite;
    background: linear-gradient(to bottom right, var(--theme-primary), var(--theme-secondary), transparent);
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- MBTI slots ---- */
.mbti-slot {
    transition: all 0.3s ease;
}
.mbti-slot:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px -5px rgba(255,255,255,0.1);
}

/* ---- CTA Néon (bas de page profil) ---- */
.neon-cta {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}
.neon-cta::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary), #38BDF8, var(--theme-primary));
    background-size: 200% auto;
    border-radius: inherit;
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: shimmer-cta 3s linear infinite;
}
.neon-cta:hover::before { opacity: 0.7; }
.neon-cta:hover { transform: translateY(-2px); }
@keyframes shimmer-cta { to { background-position: 200% center; } }

/* ---- Radar tooltip ---- */
.radar-tooltip {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.radar-tooltip-arrow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---- Méfaits récents : fondu en bas ---- */
.mefaits-fade {
    position: relative;
}
.mefaits-fade::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.5rem;
    background: linear-gradient(to bottom, transparent, rgba(5, 5, 5, 0.95));
    pointer-events: none;
    border-radius: 0 0 0.75rem 0.75rem;
    z-index: 1;
}

/* ---- Assiduité / Rétention heatmap ---- */
.retention-box {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.35rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
    cursor: default;
}
.retention-box:hover {
    transform: translateY(-3px);
}
.retention-miss {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
}
.retention-hit {
    background: var(--theme-glow);
    border: 1px solid var(--theme-primary);
}
.retention-today {
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    box-shadow: 0 0 15px var(--theme-glow);
    animation: pulse-glow 2s infinite;
}
.retention-future {
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.15);
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px var(--theme-glow); }
    50% { box-shadow: 0 0 25px var(--theme-primary); }
}

/* ---- Nav AI Waiting (contenu disponible) ---- */
@keyframes nav-ai-wait {
    0%   { color: rgba(168,85,247,0.7);  filter: drop-shadow(0 0 4px rgba(168,85,247,0.4)); }
    25%  { color: rgba(236,72,153,0.8);  filter: drop-shadow(0 0 6px rgba(236,72,153,0.4)); }
    50%  { color: rgba(251,191,36,0.9);  filter: drop-shadow(0 0 8px rgba(251,191,36,0.5)); }
    75%  { color: rgba(52,211,153,0.8);  filter: drop-shadow(0 0 6px rgba(52,211,153,0.4)); }
    100% { color: rgba(168,85,247,0.7);  filter: drop-shadow(0 0 4px rgba(168,85,247,0.4)); }
}
.nav-ai-wait {
    animation: nav-ai-wait 4s ease-in-out infinite;
}
.custom-scrollbar::-webkit-scrollbar { height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* ---- Bonus Streak Animation ---- */
@keyframes bonusBounce {
    0% { opacity: 0; transform: translateY(8px) scale(0.8); }
    50% { opacity: 1; transform: translateY(-4px) scale(1.1); }
    70% { transform: translateY(1px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bonusGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(251,191,36,0.3); }
    50% { box-shadow: 0 0 30px rgba(251,191,36,0.7); }
}

/* ---- MBTI Shimmer (lettre incomplète) ---- */
@keyframes mbti-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.mbti-shimmer {
    animation: mbti-shimmer 2s ease-in-out infinite;
}

/* ============================================================
   LE TRIBUNAL — Styles spécifiques
   ============================================================ */

/* Vue SPA transitions */
.tribunal-page .view-section {
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.tribunal-page .view-hidden {
    opacity: 0; transform: scale(0.98); pointer-events: none;
    position: absolute; visibility: hidden;
}
.tribunal-page .view-active {
    opacity: 1; transform: scale(1); pointer-events: auto;
    position: relative; visibility: visible;
}

/* Danger card rouge */
.tribunal-danger-card {
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: inset 0 0 40px rgba(239, 68, 68, 0.1), 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

/* Archive card hover */
.tribunal-archive-card:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Glitch title */
.tribunal-glitch-title {
    position: relative;
    text-shadow:
        0.05em 0 0 rgba(239, 68, 68, 0.75),
        -0.025em -0.05em 0 rgba(139, 92, 246, 0.75),
        0.025em 0.05em 0 rgba(255, 255, 255, 0.75);
    animation: tribunal-glitch 3s infinite;
}

@keyframes tribunal-glitch {
    0%  { text-shadow: 0.05em 0 0 rgba(239,68,68,0.75), -0.05em -0.025em 0 rgba(139,92,246,0.75), -0.025em 0.05em 0 rgba(255,255,255,0.75); }
    14% { text-shadow: 0.05em 0 0 rgba(239,68,68,0.75), -0.05em -0.025em 0 rgba(139,92,246,0.75), -0.025em 0.05em 0 rgba(255,255,255,0.75); }
    15% { text-shadow: -0.05em -0.025em 0 rgba(239,68,68,0.75), 0.025em 0.025em 0 rgba(139,92,246,0.75), -0.05em -0.05em 0 rgba(255,255,255,0.75); }
    49% { text-shadow: -0.05em -0.025em 0 rgba(239,68,68,0.75), 0.025em 0.025em 0 rgba(139,92,246,0.75), -0.05em -0.05em 0 rgba(255,255,255,0.75); }
    50% { text-shadow: 0.025em 0.05em 0 rgba(239,68,68,0.75), 0.05em 0 0 rgba(139,92,246,0.75), 0 -0.05em 0 rgba(255,255,255,0.75); }
    99% { text-shadow: 0.025em 0.05em 0 rgba(239,68,68,0.75), 0.05em 0 0 rgba(139,92,246,0.75), 0 -0.05em 0 rgba(255,255,255,0.75); }
    100%{ text-shadow: -0.025em 0 0 rgba(239,68,68,0.75), -0.025em -0.025em 0 rgba(139,92,246,0.75), -0.025em -0.05em 0 rgba(255,255,255,0.75); }
}

/* Bouton CTA rouge */
.tribunal-generate-btn {
    background: linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(153,27,27,0.4) 100%);
    box-shadow: 0 0 20px rgba(239,68,68,0.3), inset 0 0 10px rgba(255,255,255,0.1);
    border: 1px solid rgba(239,68,68,0.5);
    transition: all 0.3s ease;
}
.tribunal-generate-btn:hover:not(:disabled) {
    box-shadow: 0 0 30px rgba(239,68,68,0.6), inset 0 0 15px rgba(255,255,255,0.2);
    transform: scale(1.02);
    background: linear-gradient(135deg, rgba(239,68,68,0.3) 0%, rgba(153,27,27,0.5) 100%);
}
.tribunal-generate-btn:active:not(:disabled) { transform: scale(0.98); }

/* Curseur typewriter */
.tribunal-cursor::after {
    content: '█';
    color: #ef4444;
    animation: tribunal-blink 1s step-start infinite;
    margin-left: 4px;
}
.tribunal-cursor.typing-done::after { display: none; }
@keyframes tribunal-blink { 50% { opacity: 0; } }

/* Tampon ("PATHÉTIQUE") */
.tribunal-stamp-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
    pointer-events: none;
    z-index: 50;
}
.tribunal-stamp {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: transparent;
    border: 8px solid #ef4444;
    padding: 1rem 2rem;
    text-transform: uppercase;
    border-radius: 1rem;
    font-family: 'Space Mono', 'Courier New', monospace;
    background-image: linear-gradient(45deg, #ef4444, #b91c1c);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0 0 30px rgba(239, 68, 68, 0.8));
    opacity: 0;
    transform: scale(3) rotate(-15deg);
}
.tribunal-stamp-hit {
    animation: tribunal-stampIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes tribunal-stampIn {
    0%   { opacity: 0; transform: scale(3) rotate(-25deg); }
    50%  { opacity: 1; transform: scale(0.8) rotate(-10deg); }
    100% { opacity: 0.9; transform: scale(1) rotate(-15deg); }
}

/* Screen shake */
.tribunal-screen-shake {
    animation: tribunal-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes tribunal-shake {
    10%, 90% { transform: translate3d(-4px, 2px, 0); }
    20%, 80% { transform: translate3d(8px, -4px, 0); }
    30%, 50%, 70% { transform: translate3d(-12px, 8px, 0); }
    40%, 60% { transform: translate3d(12px, -6px, 0); }
}

/* Scan line */
.tribunal-scan-line {
    width: 100%; height: 3px;
    background: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 20px #ef4444, 0 0 40px #ef4444;
    animation: tribunal-scanVertical 3s linear infinite;
    position: absolute; left: 0;
    opacity: 0.6; z-index: 20; pointer-events: none;
}
@keyframes tribunal-scanVertical {
    0%   { top: -10%; }
    100% { top: 110%; }
}

/* ==========================================================
   LE GRAND TRIBUNAL — Styles communautaires
   ========================================================== */

/* Onglets de filtrage */
.gt-tab-active {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.15);
}

/* Carte de verdict dans le feed */
.gt-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Barre de répartition communautaire */
.community-bar {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.community-bar-guilty {
    background: linear-gradient(90deg, #10b981, #34d399);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
.community-bar-objection {
    background: linear-gradient(90deg, #ef4444, #f87171);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* Animation de révélation de la barre après le vote */
.community-bar-wrapper {
    animation: communityBarReveal 0.6s ease-out;
}
@keyframes communityBarReveal {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---- CTA "Créer un compte" — étoile brillante ---- */
.cta-register-glow {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.3);
    animation: ctaStarPulse 2s ease-in-out infinite;
    position: relative;
}
.cta-register-glow:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.5);
}
@keyframes ctaStarPulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(251, 191, 36, 0.15), 0 0 12px rgba(251, 191, 36, 0.05);
    }
    50% {
        box-shadow: 0 0 12px rgba(251, 191, 36, 0.4), 0 0 24px rgba(251, 191, 36, 0.15), 0 0 40px rgba(251, 191, 36, 0.05);
    }
}

/* ---- CTA étoile — wiggle animé ---- */
.cta-star-wiggle {
    animation: starWiggle 3s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
@keyframes starWiggle {
    0%   { transform: rotate(0deg)   scale(1);    }
    8%   { transform: rotate(12deg)  scale(1.15); }
    16%  { transform: rotate(-8deg)  scale(1.05); }
    24%  { transform: rotate(5deg)   scale(1.1);  }
    32%  { transform: rotate(-3deg)  scale(1);    }
    40%  { transform: rotate(2deg)   scale(1.05); }
    50%  { transform: rotate(0deg)   scale(1);    }
    100% { transform: rotate(0deg)   scale(1);    }
}

/* ============================================================
   DILEMMES RAPIDES
   ============================================================ */

/* ---- Vues superposées (cross-fade) ---- */
.dilemma-game-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(15px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
}
.dilemma-game-view::-webkit-scrollbar {
    display: none;                  /* Chrome/Safari */
}
.dilemma-game-view.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 10;
}

/* Mobile : adapter la hauteur de l'arène aux barres de nav */
@media (max-width: 767px) {
    #dilemma-arena {
        min-height: calc(100dvh - 8rem) !important;
    }
    .dilemma-game-view {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* ---- Halo résultat ---- */
#dilemma-glow {
    transition: opacity 0.8s ease, background 0.8s ease;
}

/* ---- Glassmorphism card ---- */
.dilemma-glass-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 2rem;
}

/* ---- Timer bar (CSS animated) ---- */
.dilemma-timer-container {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.dilemma-timer-bar {
    height: 100%;
    width: 100%;
    border-radius: 6px;
    transform-origin: left;
    box-shadow: 0 0 15px var(--dilemma-color, #38bdf8);
    background: var(--dilemma-color, #38bdf8);
}
.dilemma-timer-bar.running {
    animation: dilemmaTimerShrink 10s linear forwards;
}
@keyframes dilemmaTimerShrink {
    0%   { transform: scaleX(1); background: var(--dilemma-color, #38bdf8); box-shadow: 0 0 15px var(--dilemma-color, #38bdf8); }
    60%  { background: #fbbf24; box-shadow: 0 0 15px #fbbf24; }
    100% { transform: scaleX(0); background: #f43f5e; box-shadow: 0 0 15px #f43f5e; }
}

/* ---- Boutons de choix v2 (plein écran) ---- */
.dilemma-choice-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
    cursor: pointer;
    color: white;
}
.dilemma-choice-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--dilemma-color, #38bdf8);
    box-shadow: 0 0 30px var(--dilemma-glow, rgba(56, 189, 248, 0.4));
    transform: scale(1.02);
}
.dilemma-choice-btn:active {
    transform: scale(0.95);
}

/* ---- Bouton néon "Suivant" ---- */
.dilemma-neon-btn {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dilemma-neon-btn:hover {
    transform: scale(1.05);
}
.dilemma-neon-btn .neon-halo {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    filter: blur(16px);
    background: var(--dilemma-color, #38bdf8);
}
.dilemma-neon-btn:hover .neon-halo {
    opacity: 0.8;
}
.dilemma-neon-btn .neon-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: rgba(5, 5, 5, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    backdrop-filter: blur(24px);
    transition: border-color 0.3s ease;
}
.dilemma-neon-btn:hover .neon-inner {
    border-color: rgba(255, 255, 255, 0.5);
}

/* ---- Skip button ---- */
.dilemma-skip-btn {
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.dilemma-skip-btn:hover {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
}

/* ---- Summary (utilisé par dilemma_summary.php) ---- */
.dilemma-summary-item {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
}
@media (min-width: 768px) {
    .dilemma-summary-item { padding: 16px; }
}
.dilemma-summary-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}
.dilemma-majority-badge {
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .dilemma-majority-badge {
        padding: 2px 10px;
        font-size: 0.65rem;
        letter-spacing: 0.05em;
    }
}
.dilemma-majority-badge.majority {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.2);
}

/* ---- Form Validation ---- */
.field-error {
    color: #f87171;
    font-size: 0.75rem;
    margin-top: 0.375rem;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(-4px);
    animation: fieldErrorIn 0.2s ease forwards;
}
@keyframes fieldErrorIn {
    to { opacity: 1; transform: translateY(0); }
}
.field-valid {
    border-color: rgba(52, 211, 153, 0.5) !important;
}
.field-valid:focus {
    border-color: rgba(52, 211, 153, 0.6) !important;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3) !important;
}
.field-invalid {
    border-color: rgba(248, 113, 113, 0.5) !important;
}
.field-invalid:focus {
    border-color: rgba(248, 113, 113, 0.6) !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3) !important;
}

/* Password strength bar */
.pwd-strength {
    display: flex;
    gap: 4px;
    margin-top: 0.5rem;
}
.pwd-strength-seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    transition: background 0.3s ease;
}
.pwd-strength-label {
    font-size: 0.7rem;
    margin-top: 0.25rem;
    transition: color 0.3s ease;
    color: rgba(255,255,255,0.3);
}
.pwd-str-1 .pwd-strength-seg:nth-child(1) { background: #f87171; }
.pwd-str-1 .pwd-strength-label { color: #f87171; }
.pwd-str-2 .pwd-strength-seg:nth-child(-n+2) { background: #fb923c; }
.pwd-str-2 .pwd-strength-label { color: #fb923c; }
.pwd-str-3 .pwd-strength-seg:nth-child(-n+3) { background: #facc15; }
.pwd-str-3 .pwd-strength-label { color: #facc15; }
.pwd-str-4 .pwd-strength-seg { background: #34d399; }
.pwd-str-4 .pwd-strength-label { color: #34d399; }

/* Disabled submit */
button[type="submit"]:disabled {
    opacity: 0.4;
}

/* ============================================================
   Cortex — Graphe force-graph (Explorer)
   ============================================================ */

/* Full-page container (in layout) */
.cortex-fullpage {
    width: 100%;
    height: calc(100dvh - 57px - 60px); /* mobile: 100vh - header - bottom bar */
    overflow: hidden;
}
@media (min-width: 768px) {
    .cortex-fullpage {
        height: 100vh; /* desktop: main is h-full, no header/footer */
    }
}

/* Container */
.cortex-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

.cortex-wrap canvas {
    border-radius: 0;
}

/* Warp flash */
#cortex-flash {
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#cortex-flash.active {
    opacity: 0.8;
    transition: opacity 0.05s ease;
}

/* Title overlay */
.cortex-title-overlay {
    position: absolute;
    top: 16px;
    left: 20px;
    pointer-events: none;
    z-index: 10;
}
.cortex-title-overlay h2 {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    letter-spacing: 2px;
}
.cortex-title-overlay .cortex-subtitle {
    margin: 4px 0 0 0;
    color: #ff007f;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

#cortex-universe-label {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 8px;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 6px;
    color: #00f0ff;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Zoom controls */
.cortex-zoom-controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}
.cortex-zoom-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
}
.cortex-zoom-btn:hover {
    border-color: rgba(0, 240, 255, 0.4);
    color: #00f0ff;
    background: rgba(0, 240, 255, 0.08);
}

/* Info panel (glass-card style) */
#cortex-info-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 300px;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    background: rgba(10, 10, 15, 0.85);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(16px);
    z-index: 20;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}
#cortex-info-panel.visible {
    transform: translateX(0);
}

#cortex-info-title {
    color: #00f0ff;
    margin: 0 0 6px 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 6px;
    padding-right: 24px;
}
#cortex-info-category {
    font-size: 0.7rem;
    color: #ff007f;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#cortex-info-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    white-space: pre-wrap;
}

#cortex-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: #ff007f;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}
#cortex-close-btn:hover {
    color: #ffffff;
}

/* Cortex link in info panel */
.cortex-link {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    color: #00f0ff;
    border: 1px solid rgba(0, 240, 255, 0.4);
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}
.cortex-link:hover {
    background-color: rgba(0, 240, 255, 0.15);
    border-color: #00f0ff;
    color: #ffffff;
}

/* Weight colors (in panel) */
.cortex-weight-positive { color: #00ff7f; font-weight: bold; }
.cortex-weight-negative { color: #ff007f; font-weight: bold; }
.cortex-weight-neutral  { color: rgba(255, 255, 255, 0.5); }

/* Portal action */
.cortex-portal-action {
    color: #b026ff;
    font-weight: bold;
    animation: cortex-pulse 1.5s infinite;
    cursor: pointer;
}
@keyframes cortex-pulse {
    0%   { opacity: 0.7; text-shadow: 0 0 5px #b026ff; }
    50%  { opacity: 1;   text-shadow: 0 0 20px #b026ff; }
    100% { opacity: 0.7; text-shadow: 0 0 5px #b026ff; }
}

/* Loader */
.cortex-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 30;
    background: transparent;
}
.cortex-loader.hidden { display: none; }
.cortex-loader-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #00f0ff;
    border-radius: 50%;
    animation: cortex-spin 0.8s linear infinite;
}
@keyframes cortex-spin {
    to { transform: rotate(360deg); }
}

/* Error state */
.cortex-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}
.cortex-error.hidden { display: none; }

/* Mobile responsive */
@media (max-width: 768px) {
    .cortex-wrap {
        height: 100%;
    }
    #cortex-info-panel {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 45%;
        border-radius: 16px 16px 0 0;
        transform: translateY(120%);
        border: none;
        border-top: 1px solid rgba(0, 240, 255, 0.2);
    }
    #cortex-info-panel.visible {
        transform: translateY(0);
    }
    .cortex-zoom-controls {
        bottom: 12px;
        right: 12px;
    }
    .cortex-title-overlay {
        left: 12px;
        top: 12px;
    }
    .cortex-title-overlay h2 {
        font-size: 1rem;
    }
}
    cursor: not-allowed;
    transform: none !important;
}
.dilemma-majority-badge.minority {
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.2);
}
.dilemma-majority-badge.timeout {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.2);
}
.dilemma-majority-badge.skipped {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* ---- "ou" separator ---- */
.dilemma-ou {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: rgba(255, 255, 255, 0.2);
    font-size: 1.25rem;
}

/* ============================================================
   Collection / Archive dilemmes
   ============================================================ */

/* Dossier cards (liste) */
.dossier-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.dossier-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--card-glow);
    transform: translateY(-2px);
}

/* ============================================================
   Accessibilité — Réduction de mouvement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .blob,
    .entity-sphere,
    .organic-ring,
    .core-entity,
    .sphere-clos,
    .sphere-clos .core-entity,
    .sphere-clos .organic-ring,
    .timer-orb::before,
    .spark,
    .laser-bar {
        animation: none !important;
        transition: none !important;
    }
    .blob { opacity: 0.3; }
    .core-entity { opacity: 0.3; }
}

/* ---- Streak Tiers ---- */
.streak-tier-base .streak-icon { color: #d1d5db; }
.streak-tier-base .streak-label { color: #9ca3af; }
.streak-tier-warm .streak-icon { color: #f97316; }
.streak-tier-warm .streak-label { color: #f97316; }
.streak-tier-hot .streak-icon { color: #f59e0b; filter: drop-shadow(0 0 6px rgba(245,158,11,0.5)); }
.streak-tier-hot .streak-label { color: #fbbf24; }
.streak-tier-fire .streak-icon { color: #ef4444; filter: drop-shadow(0 0 8px rgba(239,68,68,0.6)); }
.streak-tier-fire .streak-label { color: #f87171; }
.streak-tier-legendary .streak-icon { color: #facc15; filter: drop-shadow(0 0 10px rgba(250,204,21,0.7)); }
.streak-tier-legendary .streak-label { color: #fde047; }

@keyframes streak-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.streak-pulse {
    animation: streak-pulse 0.6s ease-in-out 3;
}
@keyframes streak-milestone-in {
    0% { opacity: 0; transform: translate(-50%, -20px) scale(0.9); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.dossier-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--card-glow);
}

/* XP progress bar */
.xp-bar-container {
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.xp-bar {
    position: relative;
    transition: width 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.xp-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    bottom: -3px;
    width: 6px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 15px currentColor, 0 0 30px currentColor;
}

/* Split bars (demographics) */
.split-bar-container {
    display: flex;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.demo-bar-a, .demo-bar-b {
    height: 100%;
    transition: width 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* SPA view toggle */
.col-view-section { display: none; }
.col-view-section.active { display: block; }

/* Bouncy entrance */
.bouncy-enter {
    animation: colBounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
    transform: scale(0.95);
}
@keyframes colBounceIn { to { opacity: 1; transform: scale(1); } }

/* Slide up entrance */
.col-slide-up {
    animation: colSlideUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}
@keyframes colSlideUp { to { opacity: 1; transform: translateY(0); } }
.col-delay-1 { animation-delay: 0.1s; }
.col-delay-2 { animation-delay: 0.2s; }
.col-delay-3 { animation-delay: 0.3s; }

/* ============================================================
   VERDICT — Collection / Summary glass-panel
   ============================================================ */
.verdict-glass {
    background: rgba(25, 13, 36, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 1rem;
    transition: border-color 0.3s, background 0.3s;
}
.verdict-glass:hover {
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(30, 15, 45, 0.5);
}
.glow-text {
    text-shadow: 0 0 20px rgba(167, 139, 250, 0.5);
}
.glow-box {
    box-shadow: 0 0 40px -10px rgba(139, 92, 246, 0.3);
}
.humanity-bar-bg {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.humanity-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(139,92,246,0.5) 0%, rgba(168,85,247,1) 100%);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
    border-radius: 999px;
    position: relative;
}
.humanity-bar-fill::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -2px;
    width: 6px;
    height: calc(100% + 4px);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 0 8px #fff, 0 0 16px rgba(168, 85, 247, 0.8);
}
.scanner-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
    animation: scanLine 10s linear infinite;
    pointer-events: none;
    z-index: 50;
    opacity: 0.2;
}
@keyframes scanLine {
    0%   { top: -10%; }
    100% { top: 110%; }
}