:target::before {
    content: "";
    display: block;
    height: 120px; /* Espace de compensation (Header height + gap) */
    margin-top: -120px; /* Remonter le padding pour ne pas le voir */
    visibility: hidden;
    pointer-events: none;
}

:root {
    /* Theme tokens (dark defaults). Light mode will override in light-mode.css. */
    --bg: radial-gradient(ellipse at bottom, #0f172a 0%, #050505 100%);
    --text: #e5e7eb;
    --surface: rgba(20, 20, 20, 0.8);
    --surface-strong: rgba(20, 20, 20, 0.4);
    --surface-pop: rgba(20, 20, 20, 0.95);
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: #333;
    --muted: #9ca3af;
    --input-bg: rgba(30, 30, 30, 0.5);
    --input-border: #333;
    --card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --shadow-strong: 0 10px 30px rgba(0,0,0,0.5);
    --backdrop: rgba(0, 0, 0, 0.9);
}

        body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; overflow-x: hidden; min-height: 100vh; }
        .depth-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(circle at center, #111, #050505); overflow: hidden; }
        
        /* Custom Select Styling */
        select { 
            -webkit-appearance: none; -moz-appearance: none; appearance: none; 
            background-color: var(--input-bg); backdrop-filter: blur(12px);
            border: 1px solid var(--border); transition: all 0.3s ease; 
            border-radius: 12px; color: var(--text); cursor: pointer; padding-right: 30px;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em;
        }
        select option { background-color: var(--surface); color: var(--text); }
        select:hover { border-color: rgba(255,255,255,0.25); }
        select:focus { outline: none; border-color: #ffffff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); }

        input, textarea { background: var(--input-bg); border-color: var(--input-border); color: var(--text); }
        input:focus, select:focus, textarea:focus { border-color: white; outline: none; }
        
/* Cache les flèches (spinners) des inputs numériques */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield; /* Pour Firefox */
        }

        .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
        .circular-chart { display: block; margin: 0 auto; max-width: 80%; max-height: 250px; overflow: visible; }
        .circle-bg { fill: none; stroke: #222; stroke-width: 2.5; }
        .circle { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray 0.5s ease; }
        .timer-active { text-shadow: 0 0 15px rgba(59, 130, 246, 0.8); }
        .particle { position: fixed; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 9999; animation: particleRise 2s ease-out forwards; }
        @keyframes particleRise { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-150px) scale(0); opacity: 0; } }
        .autocomplete-list { position: absolute; top: 100%; left: 0; width: 100%; background: var(--surface-pop); border: 1px solid var(--border-strong); border-radius: 0 0 12px 12px; z-index: 50; max-height: 200px; overflow-y: auto; box-shadow: var(--shadow-strong); }
        .autocomplete-item { padding: 10px 15px; cursor: pointer; font-size: 0.85rem; border-bottom: 1px solid #222; transition: background 0.2s; }
        .autocomplete-item:hover { background: #1e3a8a; color: white; }
        .shockwave-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border-style: solid; opacity: 0; animation: shockwave 1s ease-out; pointer-events: none; }
        .screen-flash { position: fixed; inset: 0; z-index: 40; pointer-events: none; animation: screenFlash 0.5s ease-out forwards; }
        #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
        .toast { background: var(--surface-pop); border: 1px solid var(--border); backdrop-filter: blur(10px); padding: 12px 20px; border-radius: 10px; color: var(--text); font-size: 0.9rem; box-shadow: var(--shadow-strong); animation: toastSlide 0.3s ease-out; display: flex; align-items: center; gap: 10px; min-width: 250px; }
        .toast.error { border-left: 4px solid #ef4444; }
        .toast.success { border-left: 4px solid #22c55e; }
        .toast.info { border-left: 4px solid #3b82f6; }
        #celebrationOverlay.active { display: flex !important; opacity: 1 !important; }
        .flashcard-content h1, .flashcard-content h2, .flashcard-content h3 { color: #facc15; border-bottom: 1px solid rgba(250,204,21,0.2); padding-bottom: 5px; margin-top: 1.5rem; }
        .flashcard-content ul { list-style-type: disc; margin-left: 20px; }
        .flashcard-content p, .flashcard-content li { color: var(--text); line-height: 1.6; }
        .chat-bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; font-size: 0.9rem; line-height: 1.5; animation: toastSlide 0.3s ease-out; }
        .chat-user { align-self: flex-end; background-color: #2563eb; color: #fff; border-bottom-right-radius: 4px; }
        .chat-ai { align-self: flex-start; background-color: var(--surface-strong); color: var(--text); border-bottom-left-radius: 4px; border: 1px solid var(--border); }
        .notes-thematic { transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
        
        /* --- MODERNIZED SUGGESTIONS --- */
        .suggestion-card { 
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .suggestion-card:hover { 
            transform: translateY(-4px); 
            box-shadow: 0 15px 40px -10px rgba(0,0,0,0.8); 
            background: rgba(255,255,255,0.08) !important;
        }
        .suggestion-card.done { 
            opacity: 0.6; 
            background: rgba(20, 50, 20, 0.4) !important; 
            border-color: rgba(34, 197, 94, 0.3); 
        }
        .suggestion-card.done h3 { text-decoration: line-through; color: var(--muted); }

/* Permettre l'affichage des polices spécifiques dans l'éditeur */
.pro-editor font[face="Inter, sans-serif"] { font-family: 'Inter', sans-serif !important; }
.pro-editor font[face="'Courier Prime', monospace"] { font-family: 'Courier Prime', monospace !important; }
.pro-editor font[face="Georgia, serif"] { font-family: Georgia, serif !important; }
.pro-editor font[face="'Montserrat', sans-serif"] { font-family: 'Montserrat', sans-serif !important; font-weight: 700; }

/* Palette flottante au-dessus de la sélection texte */
.selection-toolbar {
    position: absolute;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--surface-pop);
    border: 1px solid var(--border);
    border-radius: 9999px;
    box-shadow: var(--shadow-strong);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.selection-toolbar.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.selection-dot {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms ease, box-shadow 120ms ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.selection-dot:hover { transform: scale(1.08); }

.selection-dot-auto {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.selection-dot.is-highlight {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.25);
}

.selection-divider {
    width: 1px;
    height: 16px;
    background: var(--border);
    opacity: 0.6;
}

        .animate-shake {
            animation: shakeError 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }

        .validation-error {
            border-color: #ef4444 !important;
            background-color: rgba(239, 68, 68, 0.15) !important;
            box-shadow: 0 0 25px rgba(239, 68, 68, 0.4) !important;
        }
        .validation-error h3, .validation-error p {
            color: #fca5a5 !important;
        }

        .custom-checkbox input:checked + div { background-color: #22c55e; border-color: #22c55e; }
        .custom-checkbox input:checked + div i { opacity: 1; animation: check-pop 0.3s ease-out forwards; }
        
        .view-bar { width: 4px; height: 100%; border-radius: 1px; transition: background-color 0.3s; }

        .glass-panel { background: var(--surface); backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
        input[type="date"] { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); padding: 10px; border-radius: 8px; width: 100%; font-family: 'Courier Prime', monospace; cursor: pointer; }
        input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
        .digit-scroll { display: inline-block; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .btn-gold { background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%); color: black; font-weight: bold; border: none; transition: all 0.3s ease; }
        .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(251, 191, 36, 0.6); }

/* --- DINO DIAMOND INTERACTION --- */
        .diamond-particle {
            position: absolute;
            pointer-events: none;
            animation: floatDiamond 1.2s ease-out forwards;
            font-size: 1rem;
            z-index: 30;
            text-shadow: 0 0 10px rgba(103, 232, 249, 0.8);
        }

        .dino-woke {
            /* Pas de tremblement, juste un glow propre et une couleur Cyan */
            transform: scale(1.1);
            color: #67e8f9; /* Cyan-300 */
            filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.6));
        }
        
        /* --- Card Styling --- */
        .card-cinema {
    z-index: 10; 
    position: relative; 
    background: var(--surface-strong); 
    border: 1px solid var(--border); 
    
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* On garde ça, c'est sans danger */
    content-visibility: auto; 
    contain-intrinsic-size: 1px 300px; 
}
        .card-cinema:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); z-index: 20; }
        .card-panel { background: var(--surface-strong); border: 1px solid var(--border); backdrop-filter: blur(15px); }
        
        .status-lu { background: rgba(15, 40, 15, 0.5) !important; border-color: rgba(34, 197, 94, 0.3); box-shadow: 0 0 10px rgba(34, 197, 94, 0.1); }
        .status-lu:hover { box-shadow: 0 0 30px rgba(34, 197, 94, 0.3), 0 20px 40px -10px rgba(0, 0, 0, 0.5); border-color: rgba(34, 197, 94, 0.5); }
        .status-maitrise { background: rgba(40, 30, 5, 0.5) !important; border-color: rgba(251, 191, 36, 0.3); box-shadow: 0 0 10px rgba(251, 191, 36, 0.15); }
        .status-maitrise:hover { box-shadow: 0 0 30px rgba(251, 191, 36, 0.5), 0 20px 40px -10px rgba(0, 0, 0, 0.5); border-color: rgba(251, 191, 36, 0.5); }
        .status-legendaire { 
            background: rgba(30, 5, 40, 0.7) !important; /* Fond violet sombre */
            border-color: rgba(168, 85, 247, 0.5) !important; /* Bordure Violette */
            box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); 
        }
        .status-legendaire:hover { 
            box-shadow: 0 0 50px rgba(168, 85, 247, 0.6), 0 20px 40px -10px rgba(0, 0, 0, 0.8); 
            border-color: rgba(168, 85, 247, 0.9) !important; 
            transform: translateY(-8px) scale(1.02);
        }
        
        .modal-backdrop { background: var(--backdrop); backdrop-filter: blur(8px); }
        
        /* Custom Select Styling */
        select { 
            -webkit-appearance: none; -moz-appearance: none; appearance: none; 
            background-color: var(--input-bg); backdrop-filter: blur(12px);
            border: 1px solid var(--border); transition: all 0.3s ease; 
            border-radius: 12px; color: var(--text); cursor: pointer; padding-right: 30px;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em;
        }
        select option { background-color: var(--surface); color: var(--text); }
        select:hover { border-color: rgba(255,255,255,0.25); }
        select:focus { outline: none; border-color: #ffffff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); }

        input, textarea { background: var(--input-bg); border-color: var(--input-border); color: var(--text); }
        input:focus, select:focus, textarea:focus { border-color: white; outline: none; }
        
/* Cache les flèches (spinners) des inputs numériques */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield; /* Pour Firefox */
        }

        /* Cercles de progression (statistiques globales) */
        .circular-chart {
            display: block;
            margin: 0 auto;
            max-width: 80%;
            max-height: 250px;
            overflow: visible;
        }

        .circle-bg {
            fill: none;
            stroke: #222;
            stroke-width: 2.5;
        }

        .circle {
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            transition: stroke-dasharray 0.5s ease;
        }

/* Deck de raccourcis du header (compact/expandable) */
#headerShortcuts {
    transition: gap 200ms ease, padding 200ms ease, max-width 200ms ease;
}

#headerShortcuts .shortcut-pill {
    transition: padding 150ms ease, gap 150ms ease, transform 200ms ease;
    min-height: 1.8rem;
}

#headerShortcuts .shortcut-label {
    transition: opacity 200ms ease, max-width 200ms ease;
    opacity: 1;
    max-width: 100px;
    overflow: hidden;
}

#headerShortcuts .shortcut-pill:hover .shortcut-label {
    opacity: 1;
    max-width: 100px;
}

#headerShortcuts .shortcut-letter {
    min-width: 1.2rem;
    text-align: center;
}

#headerShortcuts.shortcut-collapsed {
    gap: 0.25rem !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
}

#headerShortcuts.shortcut-collapsed .shortcut-label,
#headerShortcuts.shortcut-collapsed .shortcut-divider {
    display: none !important;
}

#headerShortcuts.shortcut-collapsed .shortcut-pill {
    gap: 0.2rem !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    min-height: 1.6rem;
}

            #headerShortcuts.shortcut-expanded {
                gap: 0.75rem !important;
            }

            @media (max-width: 768px) {
                #headerShortcuts {
                    width: 100%;
                    max-width: 100%;
                    justify-content: flex-start;
                    overflow-x: auto;
                    scrollbar-width: none;
                }

                #headerShortcuts::-webkit-scrollbar { display: none; }

                #headerShortcuts .shortcut-label,
                #headerShortcuts .shortcut-divider,
                #headerShortcuts .shortcut-add-label {
                    display: none !important;
                }

            }

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.animate-shake {
    animation: shakeError 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.validation-error {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.15) !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.4) !important;
}

.validation-error h3, .validation-error p {
    color: #fca5a5 !important;
}

        .custom-checkbox input:checked + div { background-color: #22c55e; border-color: #22c55e; }
        .custom-checkbox input:checked + div i { opacity: 1; animation: check-pop 0.3s ease-out forwards; }
        
        .view-bar { width: 4px; height: 100%; border-radius: 1px; transition: background-color 0.3s; }

        .glass-panel { background: var(--surface); backdrop-filter: blur(12px); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
        input[type="date"] { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); padding: 10px; border-radius: 8px; width: 100%; font-family: 'Courier Prime', monospace; cursor: pointer; }
        input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
        .digit-scroll { display: inline-block; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .btn-gold { background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%); color: black; font-weight: bold; border: none; transition: all 0.3s ease; }
        .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(251, 191, 36, 0.6); }

/* --- DINO DIAMOND INTERACTION --- */
        .diamond-particle {
            position: absolute;
            pointer-events: none;
            animation: floatDiamond 1.2s ease-out forwards;
            font-size: 1rem;
            z-index: 30;
            text-shadow: 0 0 10px rgba(103, 232, 249, 0.8);
        }

        .dino-woke {
            /* Pas de tremblement, juste un glow propre et une couleur Cyan */
            transform: scale(1.1);
            color: #67e8f9; /* Cyan-300 */
            filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.6));
        }

@keyframes floatDiamond {
    0% {
        transform: translate(-50%, -50%) translateY(0) scale(0.5) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(-20px) scale(1.2) rotate(15deg);
    }
    100% {
        transform: translate(-50%, -50%) translateY(-100px) scale(0.8) rotate(-15deg);
        opacity: 0;
    }
}


/* --- CUSTOM DRIVER.JS THEME (Ultimate Cockpit Style) --- */

/* 1. La Bulle Principale */
.driver-popover {
    background-color: var(--surface-pop) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important; /* Bordure Dorée subtile */
    box-shadow: var(--shadow-strong), inset 0 0 20px rgba(251,191,36,0.05) !important;
    color: var(--text) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    min-width: 320px !important;
    max-width: 400px !important;
}

/* 2. Le Titre */
.driver-popover-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #fbbf24 !important; /* Jaune Or */
    margin-bottom: 12px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 3. Le Texte */
.driver-popover-description {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--muted) !important; /* Gris clair */
    font-weight: 400 !important;
}

/* 4. Les Boutons (Navigation) */
.driver-popover-footer {
    margin-top: 20px !important;
}

.driver-popover-footer button {
    background-color: var(--surface-strong) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    text-shadow: none !important;
    font-weight: bold !important;
    font-size: 11px !important;
    padding: 8px 16px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.driver-popover-footer button:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-strong);
}

/* Le bouton "Terminé" ou "Suivant" en mode Action */
.driver-popover-next-btn {
    background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%) !important;
    color: black !important;
    border: none !important;
    font-weight: 900 !important;
}

/* 5. La Flèche (Triangle) */
.driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--surface-pop) !important; }
.driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--surface-pop) !important; }
.driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--surface-pop) !important; }
.driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--surface-pop) !important; }

/* --- CSS GLASSMORPHISM & LUEUR INTERNE --- */


.glass-btn {
    /* Base Glassmorphism */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 12px; /* Arrondi comme vos boutons actuels */
    
    /* Animation */
    animation: softGlassPulse 4s infinite ease-in-out;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-btn:hover {
    /* Effet au survol (plus intense) */
    transform: translateY(-3px) scale(1.05);
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--border) !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
    animation: none; /* On stoppe la pulsation au survol pour fixer l'état actif */
}

/* Style personnalisé pour le Slider d'objectif */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #3b82f6; /* Bleu */
    border: 2px solid var(--border-strong); /* Bordure sombre */
    cursor: pointer;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    margin-top: -6px; /* Centrer sur la barre */
    transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: var(--border-strong);
    border-radius: 2px;
}

/* --- AJOUT : Animation Lueur Multicolore --- */
/* --- Animation "Spectre Complet" (Toutes les matières) --- */
        

        .animate-spectral {
            /* Durée de 20s pour que chaque couleur reste visible environ 1.2 à 1.5 secondes */
            /* C'est une transition douce et continue (linear) */
            animation: spectralPulse 20s linear infinite; 
        }

/* --- CORRECTION LISTES NOTES (Tailwind Reset Fix) --- */
        #detailNotesArea ul {
            list-style-type: disc !important;
            padding-left: 1.5rem !important;
            margin-bottom: 1rem;
        }
        
        #detailNotesArea ol {
            list-style-type: decimal !important;
            padding-left: 1.5rem !important;
            margin-bottom: 1rem;
        }
        
        #detailNotesArea li {
            display: list-item !important; /* Force l'affichage en élément de liste */
            margin-bottom: 0.25rem;
        }
        
        /* Style pour le gras et l'italique pour être sûr */
        #detailNotesArea b, #detailNotesArea strong { font-weight: bold !important; }
        #detailNotesArea i, #detailNotesArea em { font-style: italic !important; }

/* --- STYLE DES TITRES DANS LES NOTES --- */
        #detailNotesArea h2 {
            font-size: 1.5rem !important; /* Gros texte */
            font-weight: 800 !important;  /* Très gras */
            color: #fbbf24 !important;    /* Couleur Or (Gold) */
            margin-top: 1.5rem !important;
            margin-bottom: 0.5rem !important;
            border-bottom: 1px solid rgba(251, 191, 36, 0.2); /* Ligne de séparation subtile */
            padding-bottom: 5px;
            font-family: 'Montserrat', sans-serif; /* Police des titres */
        }

/* --- ANIMATION BURST (Changement de matière) --- */
        
        
        .animate-burst {
            animation: burstExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
/* Animation des Confettis */
#confettiContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Très important pour pouvoir cliquer à travers sur l'overlay */
    overflow: hidden; /* Pour que les confettis sortent proprement */
}

.confetti {
    position: absolute;
    /* Les styles de taille, couleur et position de départ sont définis par le JavaScript */
    /* On définit juste la transition de base */
    transition: top 0s, transform 0s, opacity 0s; 
    /* Les valeurs sont surchargées en JavaScript après le délai */
}

/* Le JavaScript gère l'animation de chute en changeant les propriétés 'top' 
et 'transform' après un délai, ce qui est une technique fiable pour les animations uniques.
*/

/* --- NOUVELLE RÈGLE TAILWIND (Animation de fond Level Up) --- */

/* Assurez-vous d'avoir cette animation dans votre tailwind.config.js */
/* Si vous ne pouvez pas modifier tailwind.config.js, cette règle fonctionnera en CSS pur */


.animate-pulse-slow {
    animation: pulse-slow 8s infinite ease-in-out;
}

/* --- ANIMATION ICONE GÉANTE --- */
        

        .animate-icon-burst {
            animation: iconZoomFade 0.7s ease-out forwards;
        }

/* --- FLASH LUMINEUX COLORÉ --- */
/* 1. La classe optimisée */
.transition-flash {
    position: fixed;
    inset: 0;
    z-index: 100001;
    pointer-events: none;
    
    /* On définit le fond ICI pour éviter de le recalculer à chaque frame */
    background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, rgba(168, 85, 247, 0.4) 60%, rgba(0,0,0,0) 100%);
    
    /* Optimisation matérielle indispensable pour la fluidité */
    will-change: opacity, transform;
    mix-blend-mode: screen; 
    
    /* On applique le flou de base (statique pour éviter le lag) */
    backdrop-filter: blur(5px);

    /* L'animation */
    animation: flashBurst 1.5s ease-out forwards;
}

/* 2. Les Keyframes avec "Zone de Sécurité" */


/* --- EFFET GLOW DYNAMIQUE NOTES --- */
        #notesPanel {
            /* Couleur par défaut (Gris/Blanc) */
            --glow-rgb: 255, 255, 255; 
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #notesPanel:hover {
            /* Bordure colorée */
            border-color: rgba(var(--glow-rgb), 0.6) !important;
            
            /* Lueur externe (Le "Brille") */
            box-shadow: 0 0 40px -5px rgba(var(--glow-rgb), 0.3), 
                        inset 0 0 20px rgba(var(--glow-rgb), 0.05) !important;
            
            /* Léger soulèvement */
            transform: translateY(-4px);
        }

/* --- CUSTOM SLIDER STYLE --- */
.range-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    transition: background 0.3s;
}

/* Le curseur (Rond qui bouge) */
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--thumb-color, #4b5563); /* Couleur dynamique via JS */
    border: 2px solid #111;
    box-shadow: 0 0 10px var(--thumb-color, #4b5563); /* Lueur */
    cursor: pointer;
    transition: all 0.2s ease;
    transform: translateY(-6px); /* Centrer sur la barre (6px hauteur barre vs 18px thumb) */
}

.range-slider::-webkit-slider-thumb:hover {
    transform: translateY(-6px) scale(1.2); /* Grossit au survol */
}

/* La piste (Barre de fond) */
.range-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: transparent;
    border-radius: 10px;
}

/* --- STYLE JAUGE DIFFICULTÉ MODERNE --- */

/* 1. Typographie moderne */
#difficultyGaugeContainer { font-family: 'Inter', sans-serif !important; }

/* 2. Reset de l'input range par défaut */
.modern-range-slider {
    -webkit-appearance: none; width: 100%; background: transparent;
}
.modern-range-slider:focus { outline: none; }

/* 3. La Piste (Barre dégradée) */
.modern-range-slider::-webkit-slider-runnable-track {
    width: 100%; height: 12px; cursor: pointer;
    background: linear-gradient(to right, #22c55e, #eab308, #ef4444); /* Vert -> Jaune -> Rouge */
    border-radius: 20px;
    border: 2px solid #1e293b; /* Bordure foncée pour le contraste */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* 4. Le Curseur (Gros bouton blanc) */
.modern-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px; width: 24px;
    border-radius: 50%;
    background: #ffffff;
    cursor: grab;
    margin-top: -8px; /* Pour centrer verticalement */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 0 0 10px rgba(255, 255, 255, 0.5);
    border: 2px solid #0f172a;
    transition: transform 0.1s ease;
}

.modern-range-slider:active::-webkit-slider-thumb {
    transform: scale(1.2); cursor: grabbing;
}

#goalControlPanel { 
    background-color: #000000 !important; 
    background-color: rgba(18, 18, 18, 0.9) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Cache la barre de scroll mais permet le défilement */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- SLIDER VOLUME "FAT BAR" --- */
.volume-slider {
    -webkit-appearance: none;
    width: 50px; /* Un peu plus large */
    height: 20px; /* FAT : Hauteur épaisse bien visible */
    
    /* Couleur de fond (partie vide) : Gris sombre avec ombre interne pour l'effet creusé */
    background: rgba(0, 0, 0, 0.5); 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
    border: 0px solid rgba(255,255,255,0.1);
    
    border-radius: 10px; /* Forme de pilule */
    outline: none;
    cursor: pointer;
    overflow: hidden; /* Important pour que la couleur ne dépasse pas les bords ronds */
}

/* Curseur invisible mais présent pour le clic */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0; 
    height: 0;
    box-shadow: -100vw 0 0 100vw #a855f7; /* Astuce : l'ombre remplit la barre à gauche */
}

/* Firefox */
.volume-slider::-moz-range-thumb {
    width: 0;
    height: 0;
    border: 0;
    box-shadow: -100vw 0 0 100vw #a855f7;
}

/* --- SLIDER SFX (Style "Fat Bar" Bleu) --- */
.sfx-slider {
    -webkit-appearance: none;
    width: 100%; /* Prend toute la place dispo */
    height: 15px; /* Même épaisseur que la musique */
    
    /* Fond creusé sombre */
    background: rgba(0, 0, 0, 0.5); 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
    border: 0px solid rgba(255,255,255,0.1);
    
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    overflow: hidden; /* Pour couper l'ombre qui dépasse */
}

/* Le remplissage Bleu (via l'ombre portée) */
.sfx-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0; 
    height: 0;
    /* Remplissage en Bleu (#3b82f6) au lieu de Violet */
    box-shadow: -100vw 0 0 100vw #3b82f6; 
}

/* Firefox */
.sfx-slider::-moz-range-thumb {
    width: 0;
    height: 0;
    border: 0;
    box-shadow: -100vw 0 0 100vw #3b82f6;
}

/* --- CALENDRIER 3D PREMIUM --- */

/* 1. Le conteneur de la grille doit avoir une perspective */
#calendarGrid {
    perspective: 1000px;
    padding: 30px; /* Espace suffisant pour que le zoom ne soit pas coupé */
    padding-top: 20px;
}

/* 2. La case de base (Le conteneur 3D) */
.cal-day-3d {
    position: relative;
    min-height: 140px; 
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
    cursor: pointer;
    border-radius: 0.75rem;
}

/* 3. La FACE AVANT (Ce qu'on voit normalement) */
.cal-day-front {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden; /* Cache l'arrière quand ça tourne */
    
    /* Style Premium par défaut (Gris Verre) */
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255,255,255,0.1);
    
    color: var(--muted); /* Gris texte */
    font-weight: 600;
    transition: all 0.3s ease;
}

/* 4. L'ANIMATION AU SURVOL (L'ouverture) */
.cal-day-3d:hover {
    /* On soulève et on incline vers le haut comme une trappe */
    transform: translateZ(20px) rotateX(15deg);
}

.cal-day-3d:hover .cal-day-front {
    /* La face avant s'allume */
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    border-color: rgba(59, 130, 246, 0.4);
    color: white;
    box-shadow: 
        0 15px 25px -5px rgba(0, 0, 0, 0.5), /* Ombre portée profonde */
        inset 0 0 15px rgba(59, 130, 246, 0.3); /* Lueur interne */
}

/* --- ÉTATS SPÉCIAUX (Aujourd'hui & Sélectionné) --- */

/* Aujourd'hui (Bleu distinct) */
.cal-day-3d.today .cal-day-front {
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.4), rgba(30, 58, 138, 0.6));
    border-color: rgba(59, 130, 246, 0.8);
    color: white;
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.5);
}

/* Sélectionné (Or/Orange pour ressortir) */
.cal-day-3d.selected .cal-day-front {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.4), rgba(245, 158, 11, 0.6));
    border-color: rgba(251, 191, 36, 0.8);
    color: white;
    box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.5);
    /* Le sélectionné est déjà un peu soulevé */
    transform: translateZ(5px); 
}
/* Le parent doit aussi être transformé si l'enfant l'est par défaut */
.cal-day-3d.selected {
     transform: translateZ(5px);
}

.cal-day-face {
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    backface-visibility: hidden;
    
    /* AJOUTEZ ou VÉRIFIEZ ces lignes pour l'effet translucide : */
    background-color: var(--surface-strong); /* Fond de base semi-transparent */
    backdrop-filter: blur(8px); /* Le flou "verre" */
    -webkit-backdrop-filter: blur(8px);
    
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* On force la transparence quand le JS ajoute ses propres classes */
.cal-day-face.bg-white\/5, 
.cal-day-face.bg-white\/\[0\.02\] {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* --- RESSOURCES DETAIL (EFFET 3D POP-UP) --- */

/* 1. On donne de l'espace aux items pour qu'ils puissent "bondir" sans être coupés */
#detailResourcesList {
    padding: 10px; /* Zone tampon autour des cartes */
    margin: -10px; /* On compense pour ne pas décaler le layout */
}

/* 2. Le Bouton (L'objet 3D) */
#detailResourcesList button {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Rebond élastique fluide */
    transform-origin: center center;
    position: relative;
    z-index: 1;
}

/* 3. L'Animation au Survol */
#detailResourcesList button:hover {
    /* Soulèvement physique */
    transform: translateY(-5px) scale(1.02); 
    z-index: 20; /* Passe au-dessus de tout */

    /* Effet de lumière "Verre Premium" */
    background-color: rgba(255, 255, 255, 0.08) !important; /* Eclaircissement */
    border-color: rgba(255, 255, 255, 0.4) !important; /* Bordure brillante */
    
    /* Ombre portée profonde pour simuler la hauteur */
    box-shadow: 
        0 20px 30px -5px rgba(0, 0, 0, 0.6), /* Ombre loin dessous */
        0 0 15px rgba(255, 255, 255, 0.05);  /* Petite aura */
}

/* Petit détail : Le texte s'illumine aussi */
#detailResourcesList button:hover span {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* --- ANIMATIONS DE TRANSITION CALENDRIER --- */

/* Mouvements */






/* Classes utilitaires appliquées par le JS */
.anim-next {
    animation: slideInRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.anim-prev {
    animation: slideInLeft 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.anim-fade {
    animation: fadeInScale 0.4s ease-out forwards;
}

@media (max-width: 640px) {
    /* Sur mobile, on réduit la taille des cases calendrier */
    .cal-day-3d { min-height: 100px !important; } 
    .orb, .depth-bg { display: none !important; }
    .cal-day-face .flex-wrap { display: none !important; }
}

/* Deck de raccourcis du header (compact/expandable) */
#headerShortcuts {
    transition: gap 200ms ease, padding 200ms ease, max-width 200ms ease;
}

#headerShortcuts .shortcut-pill {
    transition: padding 150ms ease, gap 150ms ease;
}

#headerShortcuts .shortcut-label {
    transition: opacity 120ms ease;
}

#headerShortcuts .shortcut-letter {
    min-width: 1.5rem;
    text-align: center;
}

#headerShortcuts.shortcut-collapsed {
    gap: 0.35rem !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    max-width: fit-content;
}

#headerShortcuts.shortcut-collapsed .shortcut-label,
#headerShortcuts.shortcut-collapsed .shortcut-divider {
    display: none !important;
}

#headerShortcuts.shortcut-collapsed #customLinksContainer {
    display: none !important;
}

#headerShortcuts.shortcut-collapsed .shortcut-pill {
    gap: 0.25rem !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    min-height: 1.8rem;
}

#headerShortcuts.shortcut-expanded {
    gap: 0.75rem !important;
}

/* Simplify header cards on mobile/tablet */
@media (max-width: 1024px) {
    #headerXPBtn .xp-divider,
    #headerXPBtn .xp-details {
        display: none !important;
    }

    #headerXPBtn {
        padding-right: 0.75rem !important;
        padding-left: 0.75rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        gap: 0.5rem !important;
    }

    #headerChronoBtn .chrono-divider,
    #headerChronoBtn .chrono-labels {
        display: none !important;
    }

    #headerChronoBtn {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        gap: 0.5rem !important;
    }
}

/* Rendre les cases XP et Chrono de même taille */
@media (max-width: 768px) {
    #headerShortcuts {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    #headerShortcuts::-webkit-scrollbar { display: none; }

    #headerShortcuts .shortcut-label,
    #headerShortcuts .shortcut-divider,
    #headerShortcuts .shortcut-add-label {
        display: none !important;
    }
}

/* SUR MOBILE : On force l'affichage des éléments qui n'apparaissent qu'au survol normalement */
@media (hover: none) {
    /* Rend le titre toujours coloré (comme s'il était survolé) */
    .card-cinema h3 { color: #3b82f6 !important; } 
    
    /* Affiche les boutons d'action en bas des cartes */
    .card-cinema .opacity-0 { opacity: 1 !important; }
    
    /* Affiche les boutons de suppression (croix rouge) */
    .group:hover .opacity-0 { opacity: 1 !important; }
    
    /* Affiche les flèches de scroll */
    #btnProgLeft, #btnProgRight { opacity: 1 !important; }
}

/* --- ADAPTATIONS MOBILES (RESPONSIVE) --- */
@media (max-width: 768px) {
    
    /* 1. Marges globales plus petites */
    .container { padding-left: 1rem !important; padding-right: 1rem !important; }
    
    /* 2. Modales qui prennent presque toute la largeur avec une petite marge */
    .glass-panel, .card-panel { 
        margin-left: 1rem !important; 
        margin-right: 1rem !important; 
        width: auto !important;
        max-width: none !important;
    }
    
    /* 3. Texte plus petit pour les titres géants */
    h1.text-5xl, h2.text-5xl, div.text-5xl { font-size: 2.5rem !important; }
    h1.text-6xl, h2.text-6xl { font-size: 3rem !important; }
    
    /* 4. Le slider de navigation des matières */
    #subjectHeader { height: 180px !important; }
    #subjectIcon { font-size: 1.5rem !important; }
    
    /* 5. Grille du calendrier : plus compacte */
    .cal-day-3d { min-height: 90px !important; }
    
    /* 6. Boutons d'action toujours visibles (pas besoin de survol) */
    .group-hover\:opacity-100 { opacity: 1 !important; }
    
    /* 7. Masquer certains éléments décoratifs lourds */
    .orb, .depth-bg { display: none !important; }
}

/* Empêche tout scroll horizontal sur le site entier */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

/* Ajustement Header du Lecteur sur Mobile */
@media (max-width: 768px) {
    #playerWrapper .flex.justify-between {
        padding-left: 1rem !important;  /* Un peu d'air à gauche */
        padding-right: 1rem !important; /* Un peu d'air à droite */
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Réduire un peu la taille du titre sur mobile */
    #playerTitle {
        font-size: 0.8rem !important; 
        max-width: 200px; /* Empêche le titre d'écraser la croix */
    }
}

/* Correction du Media Query */
@media (max-width: 640px) {
    /* 1. On cache l'URL technique */
    #resListContainer .font-mono {
        display: none !important;
    }

    /* 2. On agrandit les boutons */
    /* CORRIGÉ ICI : on remplace la variable JS par un sélecteur CSS valide */
    [id^="actions-"] button, 
    #resListContainer button[title="Renommer"],
    #resListContainer button[title="Supprimer"] {
        padding: 12px !important; /* Zone de touche plus grande */
    }

    /* 3. On réduit l'espace */
    #resListContainer > div {
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }
}

/* --- FIX 1 : FORCER L'AFFICHAGE DES ICÔNES FA --- */
/* Ciblage des icônes dans le panneau de progression et le carrousel */
html:not(.dark) #subjectProgressContainer i,
html:not(.dark) #subjectCarouselTrack i,
html:not(.dark) #detailMatiereBadge i {
    /* Force l'utilisation de la police Font Awesome */
    font-family: 'Font Awesome 6 Free', sans-serif !important; 
    font-weight: 900 !important; /* Essentiel pour les icônes fa-solid */
    text-shadow: none !important;
    font-style: normal !important; /* Empêche le navigateur de le rendre en italique */
}
/* Pour les vues sombres également */
#subjectProgressContainer i,
#subjectCarouselTrack i,
#detailMatiereBadge i {
    font-family: 'Font Awesome 6 Free', sans-serif !important; 
    font-weight: 900 !important;
}

/* Animation pour les particules qui tombent */
    

    .theme-particle {
        position: fixed;
        top: 0;
        z-index: 9999; /* Devant tout */
        pointer-events: none; /* Ne gêne pas les clics */
        border-radius: 50%;
        will-change: transform, opacity;
    }

/* --- ANIMATIONS CINÉMATIQUES VICTOIRE --- */

/* 1. L'arrivée brutale du texte (Slam) */


/* 2. L'onde de choc (Cercle qui s'étend) */


/* 3. Le tremblement de caméra (Impact) */


/* Classes utilitaires */
.animate-slam { animation: slam-enter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.animate-shockwave { animation: shockwave-expand 0.8s ease-out forwards; }
.animate-screen-shake { animation: screen-shake 0.5s ease-out forwards; }

/* Rayons de lumière tournants (God Rays) */

.god-rays {
    background: repeating-conic-gradient(from 0deg, rgba(255,215,0,0.1) 0deg 10deg, transparent 10deg 20deg);
    animation: rotate-slow 20s linear infinite;
}

/* --- NOUVEAUX STYLES VICTOIRE CINÉMA --- */

/* Animation de fond (Défilement lent des étoiles) */


.bg-star-anim {
    /* Texture répétée (pas étirée) pour garder la netteté */
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    background-repeat: repeat; 
    background-size: 400px 400px; /* Taille fixe pour éviter le flou */
    animation: star-move 60s linear infinite;
    opacity: 0.4;
}

/* Texte Or Métallique */
.text-gold-gradient {
    background: linear-gradient(to bottom, #fef3c7 0%, #f59e0b 40%, #b45309 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

/* Vignette Cinéma (Bords sombres) */
.cinema-vignette {
    background: radial-gradient(circle at center, transparent 40%, black 100%);
}

/* Animation Rayons de lumière (God Rays) */

.god-rays-spin { animation: rotate-rays 40s linear infinite; }

/* Animation de "Respiration" profonde pour le build-up */


/* Animation de pulsation douce (Juste l'opacité) */


/* Le conteneur principal (Vignette colorée) */
.cinematic-glow-container {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease-in; /* Apparition fluide */
    
    /* Dégradé radial : Transparent au centre -> Couleur du thème sur les bords */
    background: radial-gradient(circle at center, transparent 40%, rgba(var(--theme-rgb), 0.5) 100%);
    
    /* Mode de fusion pour que la couleur soit lumineuse mais pas opaque */
    mix-blend-mode: screen; 
    
    /* Animation lente */
    animation: soft-pulse 4s ease-in-out infinite;
}

/* --- EFFET ESPACE PROFOND ULTRA-RÉALISTE --- */

/* 1. Mouvement de montée (Parallaxe) */


/* 2. Scintillement aléatoire (Twinkle) */


/* Base commune */
#stars, #stars2, #stars3 {
    position: absolute;
    top: 100%; left: 0; right: 0; bottom: auto;
    background: transparent;
    z-index: 0;
}

/* COUCHE 1 : Fond lointain (Petites, Lentes, Scintillent doucement) */
#stars {
    width: 1px; height: 1px;
    box-shadow: 
        1744px 122px #FFF, 344px 1321px #FFF, 92px 859px #FFF, 2637px 1196px #FFF, 1622px 1332px #FFF, 
        3555px 139px #FFF, 189px 1222px #FFF, 3678px 1052px #FFF, 1025px 1238px #FFF, 2980px 1059px #FFF, 
        1475px 1340px #FFF, 3464px 34px #FFF, 192px 1459px #FFF, 2075px 1452px #FFF, 1478px 233px #FFF, 
        2172px 129px #FFF, 3978px 973px #FFF, 1438px 1729px #FFF, 1107px 1563px #FFF, 3269px 920px #FFF, 
        429px 1205px #FFF, 2735px 934px #FFF, 866px 1656px #FFF, 2245px 337px #FFF, 153px 1867px #FFF, 
        1202px 55px #FFF, 3902px 1295px #FFF, 1373px 839px #FFF, 3060px 426px #FFF, 1874px 1787px #FFF, 
        2506px 1447px #FFF, 1292px 213px #FFF, 3199px 621px #FFF, 197px 179px #FFF, 3450px 1182px #FFF, 
        2321px 1709px #FFF, 1334px 1083px #FFF, 2009px 174px #FFF, 3957px 871px #FFF, 1009px 1329px #FFF, 
        307px 1421px #FFF, 3353px 1996px #FFF, 2292px 1315px #FFF, 3704px 93px #FFF, 2826px 1308px #FFF, 
        1097px 590px #FFF, 2905px 790px #FFF, 2271px 1207px #FFF, 3974px 229px #FFF, 3024px 1793px #FFF;
    
    /* Double animation : Montée lente (150s) + Scintillement lent (4s) */
    animation: animStar 150s linear infinite, twinkle 4s ease-in-out infinite;
    opacity: 0.6;
}
#stars:after {
    content: " "; position: absolute; top: 2000px; width: 1px; height: 1px; background: transparent;
    box-shadow: inherit; /* Reprend les mêmes étoiles pour la boucle */
}

/* COUCHE 2 : Étoiles moyennes (Plus rapides, Scintillement décalé) */
#stars2 {
    width: 2px; height: 2px;
    box-shadow: 
        1958px 1236px #FFF, 429px 1860px #FFF, 2429px 406px #FFF, 3590px 1327px #FFF, 222px 1083px #FFF, 
        2864px 333px #FFF, 1139px 744px #FFF, 3079px 1827px #FFF, 136px 972px #FFF, 2690px 1477px #FFF, 
        800px 400px #FFF, 3200px 900px #FFF, 1600px 150px #FFF, 3600px 1600px #FFF, 900px 1200px #FFF, 
        2850px 600px #FFF, 50px 300px #FFF, 2050px 800px #FFF, 150px 1900px #FFF, 2150px 1200px #FFF;
    
    /* Montée moyenne (100s) + Scintillement rapide (3s) */
    animation: animStar 100s linear infinite, twinkle 3s ease-in-out infinite alternate;
    opacity: 0.8;
}
#stars2:after {
    content: " "; position: absolute; top: 2000px; width: 2px; height: 2px; background: transparent;
    box-shadow: inherit;
}

/* COUCHE 3 : Étoiles proches (Rares, Brillantes, Pas de scintillement pour la stabilité) */
#stars3 {
    width: 3px; height: 3px;
    box-shadow: 
        529px 1629px #FFF, 2422px 426px #FFF, 982px 1845px #FFF, 3167px 742px #FFF, 
        450px 1200px #FFF, 2500px 1800px #FFF, 1800px 300px #FFF, 3800px 1900px #FFF,
        150px 100px #FFF, 2150px 500px #FFF, 100px 1500px #FFF, 2100px 1200px #FFF;
    
    /* Montée rapide (50s) - Pas de twinkle sur les grosses pour éviter l'effet "clignotant" gênant */
    animation: animStar 50s linear infinite;
    opacity: 1;
}
#stars3:after {
    content: " "; position: absolute; top: 2000px; width: 3px; height: 3px; background: transparent;
    box-shadow: inherit;
}

/* COUCHE 1 : Étoiles lointaines (Petites, Lentes) */
#stars {
    /* Coordonnées étendues jusqu'à 4000px pour couvrir tous les écrans */
    box-shadow: 
        1744px 122px #FFF, 344px 1321px #FFF, 92px 859px #FFF, 2637px 1196px #FFF, 1622px 1332px #FFF, 
        3555px 139px #FFF, 189px 1222px #FFF, 3678px 1052px #FFF, 1025px 1238px #FFF, 2980px 1059px #FFF, 
        1475px 1340px #FFF, 3464px 34px #FFF, 192px 1459px #FFF, 2075px 1452px #FFF, 1478px 233px #FFF, 
        2172px 129px #FFF, 3978px 973px #FFF, 1438px 1729px #FFF, 1107px 1563px #FFF, 3269px 920px #FFF, 
        429px 1205px #FFF, 2735px 934px #FFF, 866px 1656px #FFF, 2245px 337px #FFF, 153px 1867px #FFF, 
        1202px 55px #FFF, 3902px 1295px #FFF, 1373px 839px #FFF, 3060px 426px #FFF, 1874px 1787px #FFF, 
        2506px 1447px #FFF, 1292px 213px #FFF, 3199px 621px #FFF, 197px 179px #FFF, 3450px 1182px #FFF, 
        2321px 1709px #FFF, 1334px 1083px #FFF, 2009px 174px #FFF, 3957px 871px #FFF, 1009px 1329px #FFF, 
        307px 1421px #FFF, 3353px 1996px #FFF, 2292px 1315px #FFF, 3704px 93px #FFF, 2826px 1308px #FFF, 
        1097px 590px #FFF, 2905px 790px #FFF, 2271px 1207px #FFF, 3974px 229px #FFF, 3024px 1793px #FFF,
        500px 500px #FFF, 1500px 1000px #FFF, 2500px 500px #FFF, 3500px 1000px #FFF, 
        200px 1800px #FFF, 1200px 1800px #FFF, 2200px 1800px #FFF, 3200px 1800px #FFF;
        
    animation: animStar 150s linear infinite;
    opacity: 0.4;
}
#stars:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    /* On reprend exactement les mêmes ombres pour la boucle */
    box-shadow: 
        1744px 122px #FFF, 344px 1321px #FFF, 92px 859px #FFF, 2637px 1196px #FFF, 1622px 1332px #FFF, 
        3555px 139px #FFF, 189px 1222px #FFF, 3678px 1052px #FFF, 1025px 1238px #FFF, 2980px 1059px #FFF, 
        1475px 1340px #FFF, 3464px 34px #FFF, 192px 1459px #FFF, 2075px 1452px #FFF, 1478px 233px #FFF, 
        2172px 129px #FFF, 3978px 973px #FFF, 1438px 1729px #FFF, 1107px 1563px #FFF, 3269px 920px #FFF, 
        429px 1205px #FFF, 2735px 934px #FFF, 866px 1656px #FFF, 2245px 337px #FFF, 153px 1867px #FFF, 
        1202px 55px #FFF, 3902px 1295px #FFF, 1373px 839px #FFF, 3060px 426px #FFF, 1874px 1787px #FFF, 
        2506px 1447px #FFF, 1292px 213px #FFF, 3199px 621px #FFF, 197px 179px #FFF, 3450px 1182px #FFF, 
        2321px 1709px #FFF, 1334px 1083px #FFF, 2009px 174px #FFF, 3957px 871px #FFF, 1009px 1329px #FFF, 
        307px 1421px #FFF, 3353px 1996px #FFF, 2292px 1315px #FFF, 3704px 93px #FFF, 2826px 1308px #FFF, 
        1097px 590px #FFF, 2905px 790px #FFF, 2271px 1207px #FFF, 3974px 229px #FFF, 3024px 1793px #FFF,
        500px 500px #FFF, 1500px 1000px #FFF, 2500px 500px #FFF, 3500px 1000px #FFF, 
        200px 1800px #FFF, 1200px 1800px #FFF, 2200px 1800px #FFF, 3200px 1800px #FFF;
}

/* COUCHE 2 : Étoiles moyennes (Moins nombreuses, plus rapides) */
#stars2 {
    box-shadow: 
        1958px 1236px #FFF, 429px 1860px #FFF, 2429px 406px #FFF, 3590px 1327px #FFF, 222px 1083px #FFF, 
        2864px 333px #FFF, 1139px 744px #FFF, 3079px 1827px #FFF, 136px 972px #FFF, 2690px 1477px #FFF, 
        800px 400px #FFF, 3200px 900px #FFF, 1600px 150px #FFF, 3600px 1600px #FFF, 900px 1200px #FFF, 
        2850px 600px #FFF, 50px 300px #FFF, 2050px 800px #FFF, 150px 1900px #FFF, 2150px 1200px #FFF;
    animation: animStar 100s linear infinite;
    opacity: 0.6;
}
#stars2:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        1958px 1236px #FFF, 429px 1860px #FFF, 2429px 406px #FFF, 3590px 1327px #FFF, 222px 1083px #FFF, 
        2864px 333px #FFF, 1139px 744px #FFF, 3079px 1827px #FFF, 136px 972px #FFF, 2690px 1477px #FFF, 
        800px 400px #FFF, 3200px 900px #FFF, 1600px 150px #FFF, 3600px 1600px #FFF, 900px 1200px #FFF, 
        2850px 600px #FFF, 50px 300px #FFF, 2050px 800px #FFF, 150px 1900px #FFF, 2150px 1200px #FFF;
}

/* COUCHE 3 : Étoiles proches (Rares, Rapides, Brillantes) */
#stars3 {
    box-shadow: 
        529px 1629px #FFF, 2422px 426px #FFF, 982px 1845px #FFF, 3167px 742px #FFF, 
        450px 1200px #FFF, 2500px 1800px #FFF, 1800px 300px #FFF, 3800px 1900px #FFF,
        150px 100px #FFF, 2150px 500px #FFF, 100px 1500px #FFF, 2100px 1200px #FFF;
    animation: animStar 50s linear infinite;
    opacity: 0.8;
}
#stars3:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 
        529px 1629px #FFF, 2422px 426px #FFF, 982px 1845px #FFF, 3167px 742px #FFF, 
        450px 1200px #FFF, 2500px 1800px #FFF, 1800px 300px #FFF, 3800px 1900px #FFF,
        150px 100px #FFF, 2150px 500px #FFF, 100px 1500px #FFF, 2100px 1200px #FFF;
}

/* --- EFFET AURORE BORÉALE (Couleurs Originales & Subtiles) --- */

/* Base commune */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px); /* Un peu moins de flou pour garder de la texture */
    opacity: 0.2; /* TRES REDUIT pour bien voir les étoiles */
    mix-blend-mode: screen; /* Laisse passer la lumière des étoiles */
    animation: aurora-morph 20s infinite alternate ease-in-out;
    z-index: 1;
}

/* ORBE 1 (Haut-Gauche) : Le Bleu Profond Original */
.orb-1 {
    top: -10%;
    left: -10%;
    width: 70vw;
    height: 70vw;
    /* Dégradé subtil basé sur votre bleu d'origine (#1e3a8a) */
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #3b82f6 100%);
    animation-duration: 30s;
}

/* ORBE 2 (Bas-Droite) : Le Violet Profond Original */
.orb-2 {
    bottom: -10%;
    right: -10%;
    width: 70vw;
    height: 70vw;
    /* Dégradé subtil basé sur votre violet d'origine (#4c1d95) */
    background: linear-gradient(to top left, #2e1065 0%, #4c1d95 60%, #7c3aed 100%);
    animation-duration: 40s;
    animation-direction: alternate-reverse;
}

@media (max-width: 1366px), (hover: none) {
    
    /* 1. On supprime physiquement les orbes du rendu */
    .orb, .orb-1, .orb-2 {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        animation: none !important;
    }

    /* 2. On remplace par un fond fixe élégant (0% de batterie/GPU) */
    .depth-bg {
        background: var(--bg) !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* 3. Sécurité supplémentaire pour le fond global */
    html, body {
        background: var(--bg) !important;
    }
}

/* Animation de déformation "Liquide" (Inchangée) */


/* --- 1. GRAIN CINÉMATOGRAPHIQUE (Texture) --- */
.noise-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Texture de bruit générée en SVG (pas besoin d'image externe) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.07; /* Très subtil (7%) */
    pointer-events: none;
    z-index: 2; /* Par dessus les orbes */
    mix-blend-mode: overlay; /* Incrustation */
}

/* --- CORRECTIF ÉTOILES FILANTES --- */

#shooting-stars {
    position: fixed; /* Utiliser fixed pour qu'il reste calé à l'écran */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Au-dessus du fond et du bruit, mais sous le contenu */
    transform: rotate(45deg); /* Angle de chute global */
    pointer-events: none;
    overflow: hidden;
}

#shooting-stars span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0; /* Départ invisible */
    height: 2px; /* Épaisseur de la traînée */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Traînée blanche */
    opacity: 0;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(95, 145, 255, 0.8); /* Lueur bleutée */
    /* L'animation combine :
       - tail : allonge la queue
       - shoot : déplace l'étoile
       - fade : gère l'apparition/disparition */
    animation: shoot-anim 4s linear infinite;
}

/* La tête de la comète (point brillant) */
#shooting-stars span::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0; /* À la pointe du mouvement */
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px #fff, 0 0 30px #4f46e5; /* Gros éclat blanc/bleu */
}

/* --- CONFIGURATION INDIVIDUELLE DES 4 MÉTÉORES --- */

/* Météore 1 */
#shooting-stars span:nth-child(1) {
    top: 0%;
    left: 20%;
    animation-delay: 0s;
    animation-duration: 4s;
}

/* Météore 2 */
#shooting-stars span:nth-child(2) {
    top: 0%;
    left: 50%;
    animation-delay: 2s;
    animation-duration: 6s;
}

/* Météore 3 */
#shooting-stars span:nth-child(3) {
    top: 30%;
    left: 0%;
    animation-delay: 5s;
    animation-duration: 5s;
}

/* Météore 4 */
#shooting-stars span:nth-child(4) {
    top: 60%;
    left: 0%;
    animation-delay: 1.5s;
    animation-duration: 7s;
}

/* --- L'ANIMATION UNIQUE (Simplifiée et Robuste) --- */


/* --- GESTION DU MODE FLOW (Immersion) --- */

/* --- GESTION INTELLIGENTE : MODE FLOW & MODE CLAIR --- */

/* 1. MODE CLAIR (Light Mode) : PRIORITÉ ABSOLUE */
/* Si on n'est PAS en mode sombre, on cache tout le décor spatial pour voir le fond clair */
html:not(.dark) .depth-bg,
html:not(.dark) .orb,
html:not(.dark) #stars,
html:not(.dark) #stars2,
html:not(.dark) #stars3,
html:not(.dark) #shooting-stars {
    display: none !important;
}

/* 2. MODE SOMBRE + FLOW DÉSACTIVÉ (Mode "Performance") */
/* Uniquement si on est en Dark Mode ET que le Flow est coupé */
html.dark body:not(.flow-active) .orb,
html.dark body:not(.flow-active) #stars,
html.dark body:not(.flow-active) #stars2,
html.dark body:not(.flow-active) #stars3,
html.dark body:not(.flow-active) #shooting-stars {
    display: none !important; /* On cache les animations */
}

html.dark body:not(.flow-active) .depth-bg {
    /* On force un fond noir simple à la place de l'espace */
    background: radial-gradient(circle at center, #111, #050505) !important;
    animation: none !important;
}

html.dark body:not(.flow-active) .glass-panel,
html.dark body:not(.flow-active) .card-panel,
html.dark body:not(.flow-active) .card-cinema {
    /* Panneaux opaques et rapides */
    background: #111111 !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(255, 255, 255, 0.05);
}

/* --- EXCEPTION : LOGIN TOUJOURS GLASS --- */
/* On force le style vitré sur l'overlay de login, peu importe le mode Flow */
#loginOverlay .card-panel {
    background-color: rgba(10, 10, 10, 0.7) !important; /* Fond semi-transparent */
    backdrop-filter: blur(50px) !important; /* Flou forcé */
    -webkit-backdrop-filter: blur(50px) !important;
    border: 0px solid rgba(255, 255, 255, 0.1) !important;
}

/* 3. MODE SOMBRE + FLOW ACTIVÉ (Mode "Immersion") */
html.dark body.flow-active .orb,
html.dark body.flow-active #stars,
html.dark body.flow-active #stars2,
html.dark body.flow-active #stars3,
html.dark body.flow-active #shooting-stars {
    display: block; /* Tout s'affiche normalement */
}

/* --- PERSONNALISATION FLOU SUGGESTIONS --- */
#suggestionBlock > div {
    /* Par défaut c'est environ 40px (très flou) */
    /* On le réduit pour un effet plus net */
    backdrop-filter: blur(10px) !important; 
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* Optionnel : Rendre le fond un peu plus transparent pour voir les étoiles */
    background-color: var(--surface-strong) !important; 
}

/* --- FIX CURSEUR --- */
html, body { cursor: default !important; }
a, button, .cursor-pointer { cursor: pointer !important; }
input[type="text"], textarea { cursor: text !important; }


.reaction-badge {
    animation: reaction-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Effet 3D pour les cartes Lootbox */
.loot-modal-backdrop {
    background-color: var(--surface-pop);
        background-image: 
            radial-gradient(circle at 50% 50%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        background-size: 100% 100%, 40px 40px, 40px 40px; /* Grille de 40px */
        backdrop-filter: blur(10px);
    }

    /* --- CARTES (Style Dark Red Premium) --- */
    .loot-card { perspective: 1000px; }
    .loot-card-inner {
        position: relative; width: 100%; height: 100%;
        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        transform-style: preserve-3d;
    }
    .loot-card.flipped .loot-card-inner { transform: rotateY(180deg); }
    
    .loot-front, .loot-back {
        position: absolute; width: 100%; height: 100%;
        backface-visibility: hidden; border-radius: 12px;
        box-shadow: var(--shadow-strong);
    }

    /* Face Avant : Minimaliste Pro */
    .loot-front {
        background: var(--surface);
        border: 1px solid var(--border);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        transition: all 0.3s ease;
    }
    .loot-card:hover .loot-front {
        border-color: rgba(220, 38, 38, 0.5);
        box-shadow: var(--shadow-strong);
        transform: translateY(-4px);
    }

    /* Face Arrière : Zone de lecture */
    .loot-back {
        background: var(--surface-strong);
        border: 1px solid var(--border);
        transform: rotateY(180deg);
        display: flex; align-items: center; justify-content: center;
        padding: 1.25rem;
    }
    
    /* Scrollbar invisible */
    .loot-back::-webkit-scrollbar { width: 0px; }

/* --- GLITCH : DÉCODAGE SIGNAL --- */
    
    .system-glitch-effect {
        /* L'animation dure 0.5s et est très saccadée */
        animation: signal-decode 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) both;
        
        /* On force le GPU pour éviter le flou */
        transform-origin: center center;
        backface-visibility: hidden;
    }

    

/* =======================================================
   FIX STABILITÉ CARTES (ANTI-DISPARITION)
   ======================================================= */

/* 1. On force le moteur 3D à être plus strict */
.loot-card-inner {
    will-change: transform; /* Prévient le navigateur que ça va bouger */
}

/* 2. On "décolle" physiquement la face avant de 1 pixel */
/* Cela force le navigateur à comprendre qu'elle est DEVANT */
.loot-front {
    transform: translateZ(1px); 
    backface-visibility: hidden; /* Sécurité standard */
}

/* 3. On s'assure que le survol ne casse pas cette sécurité */
/* (C'était souvent la cause : le hover écrasait le translateZ) */
.loot-card:hover .loot-front {
    transform: translateY(-4px) translateZ(1px) !important;
}

/* 4. On stabilise la face arrière */
.loot-back {
    /* Rotation + léger décalage pour éviter le frottement avec l'avant */
    transform: rotateY(180deg) translateZ(1px);
    backface-visibility: hidden;
}

/* 5. Fix spécifique pour Safari/Chrome sur certains écrans */
.loot-card {
    transform-style: preserve-3d;
    z-index: 1; /* Crée un nouveau contexte d'empilement */
}

/* CSS Nécessaire pour l'effet 3D */

.flipped-card {
    transform: rotateY(180deg); 
}

.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    -webkit-backface-visibility: hidden; /* Pour Safari/iOS */
    backface-visibility: hidden;
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

/* Ajoute ceci pour être sûr que la carte a les bonnes propriétés de base */
#activeFlashcard {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


        .scrolling-text-container {
            animation: scrollText 2.5s cubic-bezier(0.6, 0, 0.4, 1);
        }

        /* 4 items + 1 clone = 5 steps of 24px */
        @keyframes scrollText {
            0%, 15%  { transform: translateY(0px); }
            20%, 35% { transform: translateY(-24px); }
            40%, 55% { transform: translateY(-48px); }
            60%, 75% { transform: translateY(-72px); }
            80%, 95% { transform: translateY(-96px); }
            100%     { transform: translateY(0px); } 
        }

        #stars-bg {
            width: 1px; height: 1px;
            background: transparent;
            box-shadow: 10vw 15vh #fff, 30vw 80vh #fff, 70vw 20vh #fff, 90vw 60vh #fff, 40vw 40vh #fff;
            opacity: 0.3;
            animation: twinkle 5s infinite linear;
        }
        
        
        
        
        
        
        #appLoader.opacity-0 {
            opacity: 0;
            transform: scale(1.15); 
            filter: blur(12px);     
            pointer-events: none;
        }

        /* --- ANIMATIONS FLASHCARDS --- */






/* Classes utilitaires pour le JS */
.animate-fly-out-right { animation: flyOutRight 0.5s forwards ease-in-out; }
.animate-fly-out-left { animation: flyOutLeft 0.5s forwards ease-in-out; }
.animate-fly-in-back { animation: flyInBack 0.5s forwards ease-out; }

/* Carte du dessous (Pile) */
.card-stack-effect {
    transform: scale(0.95) translateY(10px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}


    /* Masque pour fondre les bords du carrousel */
    .mask-linear-sides {
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

        /* --- ANIMATION "Spectre Complet" (Toutes les matières) --- */
        @keyframes spectralPulse {
            0%   { color: #ef4444; filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.8)); }
            6%   { color: #f97316; filter: drop-shadow(0 0 15px rgba(249, 115, 22, 0.8)); }
            12%  { color: #f59e0b; filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.8)); }
            18%  { color: #eab308; filter: drop-shadow(0 0 15px rgba(234, 179, 8, 0.8)); }
            24%  { color: #84cc16; filter: drop-shadow(0 0 15px rgba(132, 204, 22, 0.8)); }
            30%  { color: #22c55e; filter: drop-shadow(0 0 15px rgba(34, 197, 94, 0.8)); }
            36%  { color: #10b981; filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.8)); }
            42%  { color: #14b8a6; filter: drop-shadow(0 0 15px rgba(20, 184, 166, 0.8)); }
            48%  { color: #06b6d4; filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.8)); }
            54%  { color: #0ea5e9; filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.8)); }
            60%  { color: #3b82f6; filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8)); }
            66%  { color: #6366f1; filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.8)); }
            72%  { color: #8b5cf6; filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.8)); }
            78%  { color: #a855f7; filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.8)); }
            84%  { color: #d946ef; filter: drop-shadow(0 0 15px rgba(217, 70, 239, 0.8)); }
            90%  { color: #ec4899; filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.8)); }
            96%  { color: #f43f5e; filter: drop-shadow(0 0 15px rgba(244, 63, 94, 0.8)); }
            100% { color: #ef4444; filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.8)); }
        }

        .animate-spectral {
            animation: spectralPulse 20s linear infinite;
        }

        /* --- CORRECTION LISTES NOTES (Tailwind Reset Fix) --- */
        #detailNotesArea ul {
            list-style-type: disc !important;
            padding-left: 1.5rem !important;
            margin-bottom: 1rem;
        }
        
        #detailNotesArea ol {
            list-style-type: decimal !important;
            padding-left: 1.5rem !important;
            margin-bottom: 1rem;
        }
        
        #detailNotesArea li {
            display: list-item !important;
            margin-bottom: 0.25rem;
        }
        
        #detailNotesArea b, #detailNotesArea strong { font-weight: bold !important; }
        #detailNotesArea i, #detailNotesArea em { font-style: italic !important; }

        #detailNotesArea h2 {
            font-size: 1.5rem !important;
            font-weight: 800 !important;
            color: #fbbf24 !important;
            margin-top: 1.5rem !important;
            margin-bottom: 0.5rem !important;
            border-bottom: 1px solid rgba(251, 191, 36, 0.2);
            padding-bottom: 5px;
            font-family: 'Montserrat', sans-serif;
        }

        /* --- ANIMATION BURST (Changement de matière) --- */
        @keyframes burstExpand {
            0% { width: 0; height: 0; opacity: 0.8; }
            40% { opacity: 0.9; }
            100% { width: 250vmax; height: 250vmax; opacity: 0; }
        }
        
        .animate-burst {
            animation: burstExpand 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* Animation des Confettis */
        #confettiContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .confetti {
            position: absolute;
            transition: top 0s, transform 0s, opacity 0s;
        }

        /* --- ANIMATION PULSE SLOW --- */
        @keyframes pulse-slow {
            0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
        }

        .animate-pulse-slow {
            animation: pulse-slow 8s infinite ease-in-out;
        }

        /* --- ANIMATION ICONE GÉANTE --- */
        @keyframes iconZoomFade {
            0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
            20% { opacity: 1; }
            50% { transform: scale(1.2) rotate(0deg); opacity: 0.8; }
            100% { transform: scale(2) rotate(10deg); opacity: 0; }
        }

        .animate-icon-burst {
            animation: iconZoomFade 0.7s ease-out forwards;
        }

        /* --- FLASH LUMINEUX COLORÉ --- */
        .transition-flash {
            position: fixed;
            inset: 0;
            z-index: 100001;
            pointer-events: none;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, rgba(168, 85, 247, 0.4) 60%, rgba(0,0,0,0) 100%);
            will-change: opacity, transform;
            mix-blend-mode: screen;
            backdrop-filter: blur(5px);
            animation: flashBurst 1.5s ease-out forwards;
        }

        @keyframes flashBurst {
            0% { 
                opacity: 0; 
                transform: scale(1);
            }
            10% { 
                opacity: 1; 
                transform: scale(1.05);
            }
            80% {
                opacity: 0; 
                transform: scale(1.15);
            }
            100% { 
                opacity: 0; 
                transform: scale(1.2);
            }
        }

        /* --- EFFET GLOW DYNAMIQUE NOTES --- */
        #notesPanel {
            --glow-rgb: 255, 255, 255;
            transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #notesPanel:hover {
            border-color: rgba(var(--glow-rgb), 0.6) !important;
            box-shadow: 0 0 40px -5px rgba(var(--glow-rgb), 0.3), 
                        inset 0 0 20px rgba(var(--glow-rgb), 0.05) !important;
            transform: translateY(-4px) !important;
        }

        /* --- KEYFRAMES MANQUANTES ESSENTIELLES --- */
        
        @keyframes softGlassPulse {
            0%, 100% { 
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 0 0 rgba(255, 255, 255, 0); 
                border-color: rgba(255, 255, 255, 0.1);
                background: rgba(255, 255, 255, 0.03);
            }
            50% { 
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(100, 200, 255, 0.15); 
                border-color: rgba(255, 255, 255, 0.25);
                background: rgba(255, 255, 255, 0.06);
            }
        }

        @keyframes slideInRight {
            0% { opacity: 0; transform: translateX(50px) scale(0.95); }
            100% { opacity: 1; transform: translateX(0) scale(1); }
        }

        @keyframes slideInLeft {
            0% { opacity: 0; transform: translateX(-50px) scale(0.95); }
            100% { opacity: 1; transform: translateX(0) scale(1); }
        }

        @keyframes fadeInScale {
            0% { opacity: 0; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1); }
        }

        @keyframes themeParticleFall {
            0% {
                transform: translateY(-10vh) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
                scale: 1;
            }
            100% {
                transform: translateY(105vh) scale(0.5) rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes slam-enter {
            0% { transform: scale(3); opacity: 0; filter: blur(10px); }
            40% { opacity: 1; }
            80% { transform: scale(0.95); }
            100% { transform: scale(1); filter: blur(0); }
        }

        @keyframes shockwave-expand {
            0% { transform: scale(0); opacity: 1; border-width: 50px; }
            100% { transform: scale(4); opacity: 0; border-width: 0px; }
        }

        @keyframes screen-shake {
            0% { transform: translate(0, 0); }
            10% { transform: translate(-10px, -10px); }
            20% { transform: translate(10px, 10px); }
            30% { transform: translate(-10px, 10px); }
            40% { transform: translate(10px, -10px); }
            50% { transform: translate(-5px, 0); }
            100% { transform: translate(0, 0); }
        }

        @keyframes rotate-slow { 
            from { transform: rotate(0deg); } 
            to { transform: rotate(360deg); } 
        }

        @keyframes star-move {
            0% { background-position: 0% 0%; transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { background-position: 100% 100%; transform: scale(1); }
        }

        @keyframes rotate-rays { 
            from { transform: rotate(0deg); } 
            to { transform: rotate(360deg); } 
        }

        @keyframes cinematic-breath {
            0%, 100% { opacity: 0.4; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); filter: brightness(1.2); }
        }

        @keyframes soft-pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }

        @keyframes animStar {
            from { transform: translateY(0px); }
            to { transform: translateY(-200vh); }
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        @keyframes aurora-morph {
            0% {
                transform: rotate(0deg) scale(1);
                border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            }
            50% {
                transform: rotate(10deg) scale(1.1);
                border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
            }
            100% {
                transform: rotate(-5deg) scale(0.95);
                border-radius: 50% 60% 30% 60% / 40% 70% 60% 30%; 
            }
        }

        @keyframes shoot-anim {
            0% {
                transform: translateX(0);
                width: 0;
                opacity: 0;
            }
            10% {
                opacity: 1;
                width: 100px;
            }
            80% {
                width: 0;
                opacity: 0;
            }
            100% {
                transform: translateX(1500px);
                width: 0;
                opacity: 0;
            }
        }

        @keyframes reaction-pop {
            0% { transform: scale(0); }
            70% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        @keyframes signal-decode {
            0% { 
                opacity: 0;
                transform: scale(1.2) skewX(30deg); 
                filter: invert(1) brightness(2) contrast(2);
            }
            10% {
                opacity: 1;
                transform: scale(1.05) skewX(-20deg);
                filter: invert(0.5) brightness(1.5);
            }
            20% { 
                transform: scale(0.98) skewX(10deg); 
                filter: hue-rotate(90deg) contrast(1.5);
            }
            30% {
                transform: scale(1.02) skewX(-5deg);
                filter: drop-shadow(-4px 0 red) drop-shadow(4px 0 cyan);
            }
            50% { 
                transform: scale(1) skewX(2deg); 
                filter: brightness(1.2); 
            }
            70% { 
                transform: skewX(-1deg); 
                filter: none; 
            }
            100% { 
                transform: scale(1) skewX(0); 
                filter: none; 
            }
        }

        @keyframes scan {
            0% { top: -10%; opacity: 0; }
            50% { opacity: 1; }
            100% { top: 110%; opacity: 0; }
        }

        @keyframes breathing-glow {
            0%, 100% { filter: drop-shadow(0 0 15px rgba(59,130,246,0.5)); }
            50% { filter: drop-shadow(0 0 35px rgba(59,130,246,0.9)); }
        }

        @keyframes flyOutRight {
            0% { opacity: 1; transform: translateX(0); }
            100% { opacity: 0; transform: translateX(100px); }
        }

        @keyframes flyOutLeft {
            0% { opacity: 1; transform: translateX(0); }
            100% { opacity: 0; transform: translateX(-100px); }
        }

        @keyframes flyInBack {
            0% { opacity: 0; transform: translateX(-100px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* Media Queries for Statistics View Responsive Design */
        @media (max-width: 480px) {
            /* Petits écrans mobiles */
            #statisticsView {
                padding: 0.5rem !important;
            }

            /* Header */
            #statisticsView > div:first-child {
                gap: 0.5rem !important;
                margin-bottom: 0.5rem !important;
                flex-direction: column !important;
                align-items: stretch !important;
            }

            #statisticsView .flex.items-center.gap-3.sm\:gap-6 {
                gap: 0.25rem !important;
                align-items: center !important;
                flex-direction: row !important;
            }

            #statisticsView h2 {
                font-size: 1.125rem !important;
                line-height: 1.1 !important;
                margin: 0 !important;
            }

            #statisticsView p {
                font-size: 0.6rem !important;
                margin: 0.125rem 0 0 0 !important;
            }

            /* Bouton retour plus petit */
            #statisticsView .w-10.h-10 {
                width: 2rem !important;
                height: 2rem !important;
                flex-shrink: 0 !important;
            }

            #statisticsView .w-10.h-10 i {
                font-size: 0.75rem !important;
            }

            /* Divider caché */
            #statisticsView .h-8.sm\:h-12.w-px {
                display: none !important;
            }

            /* Contrôles compacts */
            #statisticsView .w-full.sm\:w-auto {
                width: 100% !important;
                gap: 0.375rem !important;
            }

            /* Boutons type stats compacts */
            #statisticsView .flex.gap-1\.5.p-1\.5.bg-gradient-to-br.from-white {
                width: 100% !important;
                padding: 0.625rem !important;
                gap: 0.5rem !important;
            }

            #statisticsView .flex.gap-1\.5.p-1\.5 button {
                padding: 0.375rem 0.625rem !important;
                font-size: 0.6rem !important;
                gap: 0.375rem !important;
            }

            /* Boutons période compacts */
            #statisticsView .relative.order-1.sm\:order-2 {
                width: 100% !important;
            }

            #statisticsView .flex.items-center.gap-1\.5.p-1\.5.bg-gradient-to-br:not(.from-white) {
                width: 100% !important;
                padding: 0.625rem !important;
                gap: 0.375rem !important;
            }

            #statisticsView .px-5.py-2 {
                padding: 0.375rem 0.5rem !important;
                font-size: 0.6rem !important;
            }

            /* Carte métrique */
            #primaryMetricCard {
                padding: 1rem !important;
                gap: 1.25rem !important;
                margin-bottom: 1rem !important;
                flex-direction: column !important;
                align-items: stretch !important;
            }

            #primaryMetricCard > div:first-child {
                flex-direction: column !important;
                gap: 0 !important;
                align-items: stretch !important;
            }

            #primaryMetricCard > div:first-child > div:first-child {
                gap: 0.75rem !important;
                flex-direction: row !important;
                align-items: center !important;
                text-align: left !important;
                width: 100% !important;
            }

            #primaryMetricCard > div:first-child > div:first-child > div:last-child {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                width: 100% !important;
            }

            #primaryMetricCard .flex-shrink-0 {
                height: 150px !important;
                width: 100% !important;
                flex-shrink: 0 !important;
            }

            #metricIcon {
                width: 3rem !important;
                height: 3rem !important;
                font-size: 1rem !important;
                flex-shrink: 0 !important;
            }

            #statTypeLabel {
                font-size: 0.65rem !important;
                text-align: center !important;
            }

            #statTotalViews {
                font-size: 2.25rem !important;
                text-align: center !important;
            }

            #statTotalInfo {
                font-size: 0.65rem !important;
                text-align: center !important;
            }

            /* Onglets */
            #statisticsView .flex.gap-1.mb-8 {
                gap: 0.2rem !important;
                padding: 0.375rem !important;
            }

            #statisticsView .flex.gap-1.mb-8 button {
                padding: 0.4rem !important;
                font-size: 0.6rem !important;
                flex: 1 !important;
            }

            /* Cartes stats compactes */
            #tabContentDaily .flex.items-start.gap-6,
            #tabContentWeekly .flex.items-start.gap-6,
            #tabContentMonthly .flex.items-start.gap-6 {
                gap: 0.875rem !important;
                margin-bottom: 1rem !important;
                align-items: flex-start !important;
            }

            #tabContentDaily .w-16.h-16,
            #tabContentWeekly .w-16.h-16,
            #tabContentMonthly .w-16.h-16 {
                width: 2.75rem !important;
                height: 2.75rem !important;
                font-size: 1rem !important;
                flex-shrink: 0 !important;
            }

            #tabContentDaily .text-4xl,
            #tabContentWeekly .text-4xl,
            #tabContentMonthly .text-4xl {
                font-size: 1.75rem !important;
            }

            #tabContentDaily .text-xs,
            #tabContentWeekly .text-xs,
            #tabContentMonthly .text-xs {
                font-size: 0.6rem !important;
            }

            /* Chart très compact */
            #chartGoalsContainer {
                gap: 0.5rem !important;
            }

            #statisticsChart {
                height: 140px !important;
                gap: 0.2rem !important;
            }

            /* Grille jours */
            #statisticsChart + .grid {
                gap: 0.3rem !important;
                font-size: 0.55rem !important;
            }

            /* Stats */
            #statisticsView .grid.grid-cols-3.gap-6 {
                gap: 0.5rem !important;
                padding-top: 0.75rem !important;
            }

            #chartContent .grid.grid-cols-3 {
                gap: 0.375rem !important;
                padding-bottom: 0 !important;
                margin-bottom: 0 !important;
            }

            /* Panneau chart */
            #statisticsView > div:nth-last-child(2) {
                padding: 0.875rem !important;
            }

            #statisticsView > div:last-child > div:last-child > div:first-child {
                margin-bottom: 1.5rem !important;
            }

            /* Cartes stats alignées horizontalement sur mobile */
            #tabContentDaily .flex.items-start.gap-6,
            #tabContentWeekly .flex.items-start.gap-6,
            #tabContentMonthly .flex.items-start.gap-6 {
                flex-direction: row !important;
                align-items: center !important;
                gap: 0.5rem !important;
                flex-wrap: wrap !important;
            }

            #tabContentDaily .flex-grow,
            #tabContentWeekly .flex-grow,
            #tabContentMonthly .flex-grow {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 0.35rem !important;
                flex-grow: 1 !important;
            }

            #tabContentDaily .flex-grow p:first-child,
            #tabContentWeekly .flex-grow p:first-child,
            #tabContentMonthly .flex-grow p:first-child {
                margin-bottom: 0 !important;
            }

            #tabContentDaily .flex-grow .flex.items-baseline,
            #tabContentWeekly .flex-grow .flex.items-baseline,
            #tabContentMonthly .flex-grow .flex.items-baseline {
                gap: 0.2rem !important;
                align-items: center !important;
            }

            #tabContentDaily .flex-grow p:last-child,
            #tabContentWeekly .flex-grow p:last-child,
            #tabContentMonthly .flex-grow p:last-child {
                margin-top: 0 !important;
            }

            /* Bouton objectifs visible sur mobile */
            #statisticsView > div:last-child > div:last-child > div:first-child > div:last-child {
                display: block !important;
            }

            #chartMaxValue,
            #chartAvgValue,
            #chartTotalValue {
                font-size: 1rem !important;
            }

            /* Boutons période */
            #statisticsView .px-5.py-2 {
                padding: 0.375rem 0.625rem !important;
                font-size: 0.6rem !important;
            }

            /* Sélecteur date */
            #statsDateSelector {
                width: 95% !important;
                gap: 0.5rem !important;
                padding: 0.375rem !important;
            }

            #statsDateDisplay {
                font-size: 0.6rem !important;
                padding: 0.4rem !important;
                min-width: 70px !important;
            }

            #statsDateSelector button {
                width: 1.5rem !important;
                height: 1.5rem !important;
                font-size: 0.65rem !important;
            }

            /* Goals panel mobile */
            #goalsPanel .w-10.h-10 {
                width: 1.75rem !important;
                height: 1.75rem !important;
            }

            #goalsPanel .text-lg {
                font-size: 0.9rem !important;
            }
        }

        @media (max-width: 360px) {
            /* Très petits écrans */
            #statisticsView {
                padding: 0.375rem !important;
            }

            /* Header ultra compact */
            #statisticsView > div:first-child {
                gap: 0.375rem !important;
                margin-bottom: 0.375rem !important;
            }

            #statisticsView .flex.items-center.gap-3.sm\:gap-6 {
                gap: 0.25rem !important;
            }

            #statisticsView h2 {
                font-size: 1rem !important;
                line-height: 1 !important;
                font-weight: 900 !important;
            }

            #statisticsView > div:first-child > div:first-child > p {
                font-size: 0.55rem !important;
                margin: 0.08rem 0 0 0 !important;
            }

            #statisticsView .w-10.h-10 {
                width: 1.75rem !important;
                height: 1.75rem !important;
            }

            #statisticsView .w-10.h-10 i {
                font-size: 0.7rem !important;
            }

            /* Contrôles ultra compacts */
            #statisticsView .w-full.sm\:w-auto {
                width: 100% !important;
                gap: 0.25rem !important;
            }

            #statisticsView .flex.gap-1\.5.p-1\.5.bg-gradient-to-br {
                width: 100% !important;
                padding: 0.5rem !important;
                gap: 0.375rem !important;
            }

            #statisticsView .flex.gap-1\.5.p-1\.5 button {
                padding: 0.3rem 0.4rem !important;
                font-size: 0.55rem !important;
                gap: 0.25rem !important;
            }

            #statisticsView .relative.order-1.sm\:order-2 {
                width: 100% !important;
            }

            #statisticsView .flex.items-center.gap-1\.5 {
                width: 100% !important;
                padding: 0.5rem !important;
                gap: 0.25rem !important;
            }

            #statisticsView .px-5.py-2 {
                padding: 0.3rem 0.375rem !important;
                font-size: 0.55rem !important;
            }

            #primaryMetricCard {
                flex-direction: column !important;
                gap: 1rem !important;
                padding: 0.875rem !important;
                align-items: stretch !important;
            }

            #primaryMetricCard > div:first-child {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 0 !important;
            }

            #primaryMetricCard > div:first-child > div:first-child {
                gap: 0.625rem !important;
                flex-direction: row !important;
                align-items: center !important;
                text-align: left !important;
            }

            #primaryMetricCard > div:first-child > div:first-child > div:last-child {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                width: 100% !important;
            }

            #primaryMetricCard .flex-shrink-0 {
                width: 100% !important;
                height: 120px !important;
                flex-shrink: 0 !important;
            }

            #statTotalViews {
                font-size: 1.75rem !important;
                line-height: 1 !important;
                text-align: left !important;
            }

            #metricIcon {
                width: 2.75rem !important;
                height: 2.75rem !important;
                font-size: 0.9rem !important;
                flex-shrink: 0 !important;
            }

            #statTypeLabel {
                font-size: 0.55rem !important;
                text-align: left !important;
            }

            #statTotalInfo {
                font-size: 0.6rem !important;
                text-align: left !important;
            }

            /* Onglets ultra-compact */
            #statisticsView .flex.gap-1.mb-8 {
                gap: 0.15rem !important;
                padding: 0.3rem !important;
            }

            #statisticsView .flex.gap-1.mb-8 button {
                padding: 0.25rem !important;
                font-size: 0.5rem !important;
                flex: 1 !important;
            }

            /* Contenu onglets ultra compact */
            #tabContentDaily .flex.items-start.gap-6,
            #tabContentWeekly .flex.items-start.gap-6,
            #tabContentMonthly .flex.items-start.gap-6 {
                gap: 0.625rem !important;
                align-items: flex-start !important;
            }

            #tabContentDaily .w-16.h-16,
            #tabContentWeekly .w-16.h-16,
            #tabContentMonthly .w-16.h-16 {
                width: 2.25rem !important;
                height: 2.25rem !important;
                font-size: 0.8rem !important;
                flex-shrink: 0 !important;
            }

            #tabContentDaily .text-4xl,
            #tabContentWeekly .text-4xl,
            #tabContentMonthly .text-4xl {
                font-size: 1.5rem !important;
            }

            #tabContentDaily .text-xs,
            #tabContentWeekly .text-xs,
            #tabContentMonthly .text-xs {
                font-size: 0.5rem !important;
            }

            #statisticsChart {
                height: 120px !important;
                margin-bottom: 0.75rem !important;
            }

            /* Panneau chart ultra-compact */
            #statisticsView > div:last-child > div:last-child {
                padding: 0.75rem !important;
            }

            #statisticsView > div:last-child > div:last-child > div:first-child {
                margin-bottom: 1.25rem !important;
            }

            /* Cartes stats alignées horizontalement sur mobile */
            #tabContentDaily .flex.items-start.gap-6,
            #tabContentWeekly .flex.items-start.gap-6,
            #tabContentMonthly .flex.items-start.gap-6 {
                flex-direction: row !important;
                align-items: center !important;
                gap: 0.375rem !important;
                flex-wrap: wrap !important;
            }

            #tabContentDaily .flex-grow,
            #tabContentWeekly .flex-grow,
            #tabContentMonthly .flex-grow {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 0.25rem !important;
                flex-grow: 1 !important;
            }

            #tabContentDaily .flex-grow p:first-child,
            #tabContentWeekly .flex-grow p:first-child,
            #tabContentMonthly .flex-grow p:first-child {
                margin-bottom: 0 !important;
            }

            #tabContentDaily .flex-grow .flex.items-baseline,
            #tabContentWeekly .flex-grow .flex.items-baseline,
            #tabContentMonthly .flex-grow .flex.items-baseline {
                gap: 0.15rem !important;
                align-items: center !important;
            }

            #tabContentDaily .flex-grow p:last-child,
            #tabContentWeekly .flex-grow p:last-child,
            #tabContentMonthly .flex-grow p:last-child {
                margin-top: 0 !important;
            }

            #chartContent > div:first-child {
                margin-bottom: 0.75rem !important;
            }

            /* Stats du chart */
            #chartContent .grid.grid-cols-3 {
                padding-top: 0.5rem !important;
                padding-bottom: 0 !important;
                margin-bottom: 0 !important;
                gap: 0.375rem !important;
            }

            /* Bouton objectifs visible sur mobile */
            #statisticsView > div:last-child > div:last-child > div:first-child > div:last-child {
                display: block !important;
            }

            #chartMaxValue,
            #chartAvgValue,
            #chartTotalValue {
                font-size: 0.875rem !important;
            }
        }