/* --- FIX MODE CLAIR (Pour que ce soit lisible) --- */
html:not(.dark) #difficultyGaugeContainer h3 { color: #1e293b !important; } /* Titre noir */
html:not(.dark) #difficultyGaugeContainer .text-gray-500 { color: #64748b !important; } /* Labels gris foncé */
html:not(.dark) .modern-range-slider::-webkit-slider-runnable-track { border-color: #cbd5e1; } /* Bordure plus claire */

/* --- Fond du site global en Mode CLAIR --- */
html:not(.dark) body {
    /* 1. Couleur de base : Un gris-blanc cassé (moins agressif que le blanc pur) */
    background-color: #f8fafc !important; 
    
    /* 2. Les Lueurs (Magie !) */
    background-image: 
        /* Une grande lueur BLEUE douce en haut à gauche */
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        
        /* Une lueur VIOLETTE discrète en bas à droite pour le contraste */
        radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.10) 0%, transparent 50%),
        
        /* Une touche de CYAN au centre-droit pour la vitalité */
        radial-gradient(circle at 100% 0%, rgba(6, 182, 212, 0.05) 0%, transparent 40%) 
        !important;

    /* 3. Fixe le fond : Quand tu scrolles, les lueurs restent en place (effet premium) */
    background-attachment: fixed;
    background-size: cover;
    
    /* S'assurer que le texte de base de la page est foncé */
    color: #0f172a; 
}

html:not(.dark) .depth-bg, 
html:not(.dark) .orb, 
html:not(.dark) #matiereGlowOverlay, 
html:not(.dark) #timerGlow, 
html:not(.dark) #timerFlame,
html:not(.dark) #celebrationGlow,
html:not(.dark) .shockwave-ring {
    display: none !important;
}

html:not(.dark) .card-panel,
html:not(.dark) .card-cinema,
html:not(.dark) .glass-panel,
html:not(.dark) #notesPanel,
html:not(.dark) .suggestion-card,
html:not(.dark) #playerWrapper,
html:not(.dark) #globalSettingsContent,
html:not(.dark) #xpModalContent,
html:not(.dark) #chronoModalContent,
html:not(.dark) .modal-backdrop > div,
html:not(.dark) #calendarGrid > div,
html:not(.dark) #subjectProgressContainer .bg-\[\#111\],
html:not(.dark) #todoList {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    color: #1e293b !important;
    backdrop-filter: none !important;
}

html:not(.dark) .card-cinema:hover,
html:not(.dark) .suggestion-card:hover,
html:not(.dark) #notesPanel:hover {
    transform: translateY(-4px) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15) !important;
}

html:not(.dark) input, 
html:not(.dark) textarea, 
html:not(.dark) select, 
html:not(.dark) #filterBar > div {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

html:not(.dark) #filterIcon {
    color: #64748b !important;
}

html:not(.dark) #searchInput {
    color: #0f172a !important;
}
html:not(.dark) #searchInput::placeholder {
    color: #94a3b8 !important;
}

html:not(.dark) input:focus, 
html:not(.dark) textarea:focus, 
html:not(.dark) select:focus {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

html:not(.dark) select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    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='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

html:not(.dark) select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html:not(.dark) ::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

html:not(.dark) #filterBar .relative {
    background-color: #ffffff !important;
}

html:not(.dark) input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0) !important;
    opacity: 0.5;
}

html:not(.dark) .rounded-full[class*="bg-"], 
html:not(.dark) .rounded-xl[class*="bg-"], 
html:not(.dark) .rounded-lg[class*="bg-"],
html:not(.dark) div[class*="bg-"][class*="/"] {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html:not(.dark) #timerBtn, 
html:not(.dark) #authBtn,
html:not(.dark) .btn-gold,
html:not(.dark) #resListAddBtn,
html:not(.dark) .toast,
html:not(.dark) button[class*="bg-blue-600"],
html:not(.dark) button[class*="bg-red-600"],
html:not(.dark) button[class*="bg-green-600"],
html:not(.dark) button[onclick*="toggleSuggestionDone"] {
    background-color: initial !important;
    background-image: initial !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    color: white !important;
}

html:not(.dark) .text-white { color: #1e293b !important; }
html:not(.dark) .text-gray-300, html:not(.dark) .text-gray-400 { color: #64748b !important; }
html:not(.dark) .text-gray-500 { color: #475569 !important; }

html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4 {
    color: #0f172a !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
}

html:not(.dark) .text-red-400, html:not(.dark) [class*="text-red-"] { color: #dc2626 !important; -webkit-text-fill-color: #dc2626 !important; }
html:not(.dark) .text-blue-400, html:not(.dark) [class*="text-blue-"] { color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; }
html:not(.dark) .text-green-400, html:not(.dark) [class*="text-green-"] { color: #16a34a !important; -webkit-text-fill-color: #16a34a !important; }
html:not(.dark) .text-yellow-400, html:not(.dark) [class*="text-yellow-"] { color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; }
html:not(.dark) .text-purple-400, html:not(.dark) [class*="text-purple-"] { color: #7c3aed !important; -webkit-text-fill-color: #7c3aed !important; }
html:not(.dark) .text-orange-400, html:not(.dark) [class*="text-orange-"] { color: #ea580c !important; -webkit-text-fill-color: #ea580c !important; }

html:not(.dark) header {
    /* Fond blanc à 70% d'opacité pour voir le flou derrière */
    background-color: rgba(255, 255, 255, 0.50) !important;
    
    /* Le flou d'arrière-plan (L'effet "Verre") */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Bordure subtile en bas pour délimiter */
    border-bottom: 1px solid rgba(255, 255, 255, 0.9) !important;
    
    /* Une ombre douce pour détacher le header du contenu */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) header h1 {
    color: #0f172a !important; /* Noir bleuté */
}


html:not(.dark) #greetingDisplay {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

html:not(.dark) #navbarIcon {
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.2)) !important;
}

html:not(.dark) header .relative.w-10.h-10 {
    background: transparent !important;
    box-shadow: none !important;
}
html:not(.dark) header .absolute.inset-0 { display: none !important; }

html:not(.dark) #levelUpOverlay h2,
html:not(.dark) #celebrationOverlay h2, 
html:not(.dark) #chronoStartOverlay h2 {
    background: linear-gradient(to right, #0f172a, #334155) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: none !important;
}
html:not(.dark) #levelUpContent p,
html:not(.dark) #celebrationContent div {
    color: #475569 !important;
}

html:not(.dark) #dayItemsList > div, 
html:not(.dark) #todoList > div {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 12px 4px !important;
}

html:not(.dark) #dayItemsList > div:hover,
html:not(.dark) #todoList > div:hover {
    background-color: #f8fafc !important;
}

html:not(.dark) #dayItemsList div[class*="bg-"] {
    background-color: transparent !important;
}

html:not(.dark) #timerDisplay {
    color: #2563eb !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #2563eb !important;
}

html:not(.dark) #levelUpOverlay,
html:not(.dark) #celebrationOverlay,
html:not(.dark) #focusOverlay,
html:not(.dark) #chronoStartOverlay {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

html:not(.dark) ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html:not(.dark) ::-webkit-scrollbar-track {
    background: #f1f5f9;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border: 2px solid #f1f5f9;
    border-radius: 20px;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

html:not(.dark) .text-xs.font-bold.uppercase {
    font-weight: 800 !important;
}

html:not(.dark) .text-xs.text-gray-500,
html:not(.dark) .text-sm.text-gray-400 {
    color: #334155 !important;
}

html:not(.dark) .autocomplete-list, 
html:not(.dark) #dropdownMenuBody, 
html:not(.dark) #goalControlPanel {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    color: #1e293b !important;
}

html:not(.dark) .autocomplete-item:hover,
html:not(.dark) #dropdownMenuBody button:hover {
    background-color: #f1f5f9 !important;
    color: #2563eb !important;
}

html:not(.dark) .border-white\/10,
html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/20 {
    border-color: #e2e8f0 !important;
}

html:not(.dark) button.bg-white\/5,
html:not(.dark) div.bg-white\/5 {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
}
html:not(.dark) button.bg-white\/5:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

html:not(.dark) #playerWrapper {
    background-color: #ffffff !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
html:not(.dark) #playerWrapper .bg-black\/50 {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html:not(.dark) #playerWrapper h3 {
    color: #0f172a !important;
}

html:not(.dark) input[type=range]::-webkit-slider-runnable-track {
    background: #e2e8f0 !important;
}
html:not(.dark) input[type=range]::-webkit-slider-thumb {
    background: #ffffff !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

html:not(.dark) button:has(.fa-times),
html:not(.dark) button:has(.fa-xmark) {
    background-color: transparent !important;
    color: #64748b !important;
}
html:not(.dark) button:has(.fa-times):hover,
html:not(.dark) button:has(.fa-xmark):hover {
    background-color: #fee2e2 !important;
    color: #ef4444 !important;
}

html:not(.dark) .circular-chart .circle-bg {
    stroke: #e2e8f0 !important;
}
html:not(.dark) .circular-chart text {
    fill: #0f172a !important;
    font-weight: 800 !important;
}

html:not(.dark) .flashcard-content, 
html:not(.dark) #aiContent,
html:not(.dark) .prose-invert {
    color: #334155 !important;
}
html:not(.dark) .flashcard-content h1, 
html:not(.dark) .flashcard-content h2, 
html:not(.dark) .flashcard-content h3,
html:not(.dark) .flashcard-content strong {
    color: #0f172a !important;
    border-bottom-color: #e2e8f0 !important;
}
html:not(.dark) .flashcard-content ul li::marker {
    color: #3b82f6 !important;
}

html:not(.dark) #emptyState,
html:not(.dark) #emptyGalleryState,
html:not(.dark) #emptyNotePlaceholder {
    color: #94a3b8 !important;
    border-color: #cbd5e1 !important;
    background-color: #f8fafc !important;
}

html:not(.dark) #detailNotesArea li,
html:not(.dark) #fullScreenEditor li {
    color: #334155 !important;
}

html:not(.dark) #loginOverlay {
    background-color: #f8fafc !important;
    backdrop-filter: none !important;
}
html:not(.dark) #loginOverlay .card-panel {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) #loginOverlay input {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
}
html:not(.dark) #loginOverlay input:focus {
    background-color: #ffffff !important;
    border-color: #2563eb !important;
}
html:not(.dark) #authBtn {
    box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4) !important;
}

html:not(.dark) #notesPanel .flex.flex-wrap,
html:not(.dark) #fullScreenNotesContent .flex.flex-wrap {
    background-color: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html:not(.dark) #notesPanel button,
html:not(.dark) #fullScreenNotesContent button {
    color: #475569 !important;
}
html:not(.dark) #notesPanel button:hover,
html:not(.dark) #fullScreenNotesContent button:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}
html:not(.dark) #notesPanel .w-px,
html:not(.dark) #fullScreenNotesContent .w-px {
    background-color: #cbd5e1 !important;
}

html:not(.dark) #mainMusicBtn {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}
html:not(.dark) #musicMenuOptions {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}
html:not(.dark) #musicMenuOptions button {
    border-color: #e2e8f0 !important;
    background-color: #f8fafc !important;
}
html:not(.dark) #musicMenuOptions button:hover {
    background-color: #f1f5f9 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

html:not(.dark) #chatHistory,
html:not(.dark) #aiContent {
    background-color: #f8fafc !important;
}
html:not(.dark) .chat-ai {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}
html:not(.dark) #tutorChatInterface .border-t {
    background-color: #ffffff !important;
    border-top-color: #e2e8f0 !important;
}
html:not(.dark) #chatInput {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html:not(.dark) #dinoSpeechBubble {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) #dinoSpeechBubble > div:first-child {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}
html:not(.dark) #dinoSpeechText {
    color: #334155 !important;
    text-shadow: none !important;
}
html:not(.dark) #dinoSpeechBubble h4 {
    color: #0f172a !important;
    text-shadow: none !important;
}
html:not(.dark) #dinoSpeechBubble h4 i {
    color: #2563eb !important;
}

html:not(.dark) #errorCardsGrid > div {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    box-shadow: 0 4px 6px rgba(239, 68, 68, 0.05) !important;
}
html:not(.dark) #errorCardsGrid p {
    color: #991b1b !important;
}
html:not(.dark) #errorCardsGrid .text-red-500\/30 {
    color: #fca5a5 !important;
}

html:not(.dark) .bg-blue-900\/50, 
html:not(.dark) .bg-black.rounded-full {
    background-color: #e2e8f0 !important;
    border: none !important;
}

html:not(.dark) #subjectBurstOverlay {
    mix-blend-mode: multiply;
}
html:not(.dark) #subjectBurstCircle {
    opacity: 0.1 !important;
}
html:not(.dark) #subjectBurstIcon {
    filter: drop-shadow(0 0 0 rgba(0,0,0,0)) !important;
    opacity: 0.2 !important;
}

html:not(.dark) .modal-backdrop p {
    color: #334155 !important;
}
html:not(.dark) .modal-backdrop h3 {
    color: #0f172a !important;
}

html:not(.dark) #addModal > div,
html:not(.dark) #confirmModal > div,
html:not(.dark) #linkModal > div {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) #modalTitle {
    color: #0f172a !important;
}

html:not(.dark) label .bg-\[\#222\] {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}
html:not(.dark) label input:checked + div {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
}

html:not(.dark) #confirmBtnAction {
    background-color: #ef4444 !important;
    color: white !important;
}
html:not(.dark) #confirmBtnAction:hover {
    background-color: #dc2626 !important;
}

#difficultyGaugeContainer,
html:not(.dark) #difficultyGaugeContainer {
    background-color: transparent !important; /* Enlève le fond */
    background-image: none !important;        /* Enlève les dégradés éventuels */
    border: none !important;                  /* Enlève la bordure */
    box-shadow: none !important;              /* Enlève l'ombre */
}

html:not(.dark) #difficultyGaugeContainer h3,
html:not(.dark) #difficultyGaugeContainer span {
    /* On s'assure que le texte est foncé en mode clair puisqu'il n'y a plus de carte blanche derrière */
    text-shadow: 0 0 10px rgba(255,255,255,0.8); 
}

html:not(.dark) #difficultyGaugeContainer span.text-gray-400 {
    color: #94a3b8 !important;
}

html:not(.dark) #imageLightbox .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
html:not(.dark) #imageLightbox .text-gray-400 {
    color: #e5e7eb !important;
}

html:not(.dark) ::selection {
    background-color: #bfdbfe;
    color: #1e3a8a;
}

html:not(.dark) #calendarView button.bg-white\/5,
html:not(.dark) #calendarView button.bg-white\/10 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}
html:not(.dark) #calendarView button:hover {
    color: #2563eb !important;
    border-color: #cbd5e1 !important;
}

html:not(.dark) .bg-gray-800,
html:not(.dark) #timerProgressBarContainer {
    background-color: #e2e8f0 !important;
    border: none !important;
}

html:not(.dark) #resListContainer > div {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}
html:not(.dark) #resListContainer > div:hover {
    border-color: #3b82f6 !important;
    background-color: #f8fafc !important;
}
html:not(.dark) #resListContainer .w-10.h-10.rounded-lg {
    background-color: #f1f5f9 !important;
}

html:not(.dark) #itemGalleryGrid button.bg-black\/60 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #ef4444 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

html:not(.dark) .shadow-2xl, 
html:not(.dark) .shadow-xl, 
html:not(.dark) .shadow-lg {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01) !important;
}

html:not(.dark) #xpModalContent,
html:not(.dark) #chronoModalContent {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
html:not(.dark) #xpModalContent .absolute.top-0,
background: linear-gradient(to bottom, #3b82f6, transparent) !important; 
    opacity: 0.2 !important; /* Légèrement visible */
}
html:not(.dark) #chronoModalContent .absolute.top-0 {
    background: linear-gradient(to bottom, #f97316, transparent) !important; 
    opacity: 0.2 !important;
}
html:not(.dark) #xpModalContent .text-gray-400,
html:not(.dark) #chronoModalContent .text-gray-400 {
    color: #64748b !important;
}

html:not(.dark) #itemGalleryGrid > div > div {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}

html:not(.dark) button.text-gray-400:hover,
html:not(.dark) button.text-gray-500:hover,
html:not(.dark) button.text-gray-600:hover {
    color: #1e293b !important;
    background-color: #f1f5f9 !important;
}

html:not(.dark) #levelUpOverlay .from-\[\#1a1a1a\] {
    --tw-gradient-from: #ffffff !important;
    --tw-gradient-to: #f8fafc !important;
    color: #0f172a !important;
}

html:not(.dark) .card-cinema .text-\[9px\].bg-black\/40 {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

html:not(.dark) .card-cinema .bg-white\/\[0\.02\] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html:not(.dark) .card-cinema .bg-white\/5 {
    background-color: #cbd5e1 !important;
}

html:not(.dark) .card-cinema .absolute.top-3.right-3 button {
    /* Fond Gris très léger pour contraster avec la carte (F8FAFC est le fond de page) */
    background-color: #ffffff !important; 
    border: 1px solid #e2e8f0 !important; /* Bordure Grise définie */
    color: #64748b !important;            /* Icône Gris foncé */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

html:not(.dark) .card-cinema button[onclick*="toggleTodoFromCard"][class*="text-blue-400"] {
    background-color: #eff6ff !important; /* Fond Bleu très pâle */
    color: #2563eb !important;             /* Icône Bleu vif */
    border-color: #bfdbfe !important;
}

html:not(.dark) .card-cinema button[onclick*="'lu'"][class*="bg-green-500"] {
    color: #0f172a !important; /* Texte Noir sur Vert */
    box-shadow: 0 0 15px rgba(34,197,94,0.3) !important;
}

html:not(.dark) .card-cinema button[onclick*="'maitrise'"][class*="bg-yellow-500"] {
    color: #0f172a !important; /* Texte Noir sur Jaune/Or */
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3) !important;
}

html:not(.dark) .card-cinema .absolute.top-3.right-3 button:hover {
    border-color: #3b82f6 !important;
    color: #2563eb !important;
    transform: scale(1.1);
}

html:not(.dark) .card-cinema .absolute.top-3.right-3 button[class*="bg-green-"],
html:not(.dark) .card-cinema .absolute.top-3.right-3 button[class*="bg-yellow-"] {
    background-color: initial !important;
    color: #000000 !important;
    border: none !important;
}

html:not(.dark) .card-cinema h3.text-gray-200 {
    color: #1e293b !important;
}

html:not(.dark) #detailNotesArea {
    background-color: #ffffff !important;
    color: #334155 !important;
    line-height: 1.8 !important;
}
html:not(.dark) #detailNotesArea, 
html:not(.dark) #quickNotesPreview,
html:not(.dark) #fullScreenEditor {
    color: #1e293b !important;
    caret-color: #2563eb !important;
}

html:not(.dark) .border-b.border-white\/10.bg-\[\#151515\] {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
html:not(.dark) .bg-black\/20 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}
html:not(.dark) .bg-black\/20 button:hover {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}

html:not(.dark) #itemDetailView button.bg-white\/5 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}
html:not(.dark) #itemDetailView button.bg-white\/5:hover {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html:not(.dark) #detailStatusIconBg,
html:not(.dark) #detailDiffIconBg {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
}
html:not(.dark) #detailStatusText {
    font-weight: 800 !important;
}

html:not(.dark) #detailVues,
html:not(.dark) #detailFrequency {
    color: #0f172a !important;
}
html:not(.dark) .text-\[10px\].text-gray-500 {
    color: #94a3b8 !important;
    font-weight: 700 !important;
}

html:not(.dark) #detailNumberBg {
    opacity: 0.05 !important;
}
html:not(.dark) #detailItemIdDisplay {
    color: #545454 !important;
}

html:not(.dark) button[onclick*="startRevisionChat"],
html:not(.dark) button[onclick*="openErrorModal"] {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

html:not(.dark) #detailTitle {
    color: #1e3a8a !important;
    font-weight: 900 !important;
}

html:not(.dark) .card-panel h3.text-white {
    color: #1e293b !important;
}
html:not(.dark) .card-panel:has(.fa-images) h3 {
    color: #c026d3 !important;
}
html:not(.dark) .card-panel:has(.fa-images) p.text-gray-500 {
    color: #a21caf !important;
    opacity: 0.8;
}

html:not(.dark) button[onclick*="openErrorModal"] {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.1) !important;
}
html:not(.dark) button[onclick*="openErrorModal"]:hover {
    background-color: #fee2e2 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(220, 38, 38, 0.15) !important;
}
html:not(.dark) #errorCountLabel {
    background-color: #dc2626 !important;
    color: white !important;
    border: 1px solid white !important;
}

html:not(.dark) button[onclick*="startRevisionChat"] {
    background-color: #faf5ff !important;
    border: 1px solid #e9d5ff !important;
    color: #7c3aed !important;
}
html:not(.dark) button[onclick*="startRevisionChat"]:hover {
    background-color: #f3e8ff !important;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.15) !important;
}

html:not(.dark) div[id^="vues-container"] .rounded-full {
    opacity: 1 !important;
    transform: scale(1) !important;
}

html:not(.dark) div[id^="vues-container"] .bg-white\/10 {
    background-color: #cbd5e1 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

html:not(.dark) div[id^="vues-container"] .bg-green-500 { background-color: #22c55e !important; box-shadow: 0 0 5px rgba(34,197,94,0.5) !important; }
html:not(.dark) div[id^="vues-container"] .bg-yellow-400 { background-color: #facc15 !important; box-shadow: 0 0 5px rgba(250,204,21,0.5) !important; }
html:not(.dark) div[id^="vues-container"] .bg-fuchsia-500 { background-color: #d946ef !important; box-shadow: 0 0 5px rgba(217, 70, 239, 0.5) !important; }

html:not(.dark) #timerBtn {
    background-color: #2563eb !important;
    border: 4px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3) !important;
}
html:not(.dark) #playBtnProgress {
    stroke: #2563eb !important;
}

html:not(.dark) #detailTitle[class*="text-"] {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

html:not(.dark) div[onclick*="'lu'"] h3 {
    color: #16a34a !important;
    text-shadow: none !important;
}

html:not(.dark) div[onclick*="'maitrise'"] h3 {
    color: #d97706 !important;
    text-shadow: none !important;
}

html:not(.dark) div[onclick*="'lu'"] p.text-gray-400 {
    color: #15803d !important;
    opacity: 0.8;
}

html:not(.dark) div[onclick*="'maitrise'"] p.text-gray-400 {
    color: #b45309 !important;
    opacity: 0.8;
}

html:not(.dark) .card-cinema .absolute.top-3.left-3 i {
    filter: brightness(0.6) saturate(1.5) !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1)) brightness(0.6) saturate(1.5) !important;
}

html:not(.dark) .card-cinema .absolute.top-3.left-3 > div {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

html:not(.dark) .card-cinema .absolute.top-3.left-3 span {
    background-color: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

html:not(.dark) .suggestion-card .w-6.h-6 {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

html:not(.dark) .suggestion-card div.font-mono {
    background-color: #e2e8f0 !important;
    color: #475569 !important;
    border: none !important;
}

html:not(.dark) .suggestion-card.done {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
    opacity: 0.8 !important;
}

html:not(.dark) #suggestionList .suggestion-card {
    background-color: #f3f4f6 !important;
    background-image: none !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    color: #1f2937 !important;
}

html:not(.dark) #suggestionList .suggestion-card div.font-mono {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
}

html:not(.dark) #suggestionList .suggestion-card p {
    color: #111827 !important;
    font-weight: 700 !important;
}

html:not(.dark) #suggestionList .suggestion-card .w-6.h-6 {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

html:not(.dark) #suggestionList .suggestion-card:hover {
    background-color: #ffffff !important;
    border-color: #f97316 !important;
    box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.2) !important;
    transform: translateY(-4px);
    z-index: 10;
}

html:not(.dark) #searchInput {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #0f172a !important;
}
html:not(.dark) #filterBar > div {
    border-color: #cbd5e1 !important;
    background-color: #ffffff !important;
}
html:not(.dark) #suggestionBlock > div {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1) !important;
}
html:not(.dark) #suggestionBlock h3 { color: #0f172a !important; }
html:not(.dark) #suggestionBlock p { color: #64748b !important; }

html:not(.dark) .suggestion-card {
    background-color: #f8fafc !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .suggestion-card:hover {
    background-color: #ffffff !important;
    border-color: #f97316 !important;
    box-shadow: 0 10px 20px -5px rgba(249, 115, 22, 0.15) !important;
    transform: translateY(-4px);
}
html:not(.dark) .suggestion-card p {
    color: #334155 !important;
}
html:not(.dark) .suggestion-card .text-gray-400 {
    color: #64748b !important;
}

html:not(.dark) #todoInput {
    background-color: #f1f5f9 !important;
    border: 1px solid transparent !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

html:not(.dark) #todoInput:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
html:not(.dark) #todoInput + i {
    color: #94a3b8 !important;
}
html:not(.dark) #todoList {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html:not(.dark) #todoList > div.text-center {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    margin-top: 2.5rem !important;
}
html:not(.dark) #todoList > div {
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

html:not(.dark) div[onclick*="filterByStatus"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) div[onclick*="filterByStatus"] .circular-chart + div {
    color: #0f172a !important;
    font-weight: 800 !important;
}

html:not(.dark) .circular-chart .circle-bg {
    stroke: #f1f5f9 !important;
}

html:not(.dark) div[onclick*="'lu'"] h3 {
    color: #16a34a !important;
}
html:not(.dark) div[onclick*="'lu'"] p.text-green-400 {
    color: #15803d !important;
}
html:not(.dark) div[onclick*="'lu'"] p.text-gray-400 {
    color: #86efac !important;
    color: #475569 !important;
}
html:not(.dark) div[onclick*="'maitrise'"] h3 {
    color: #d97706 !important;
}

html:not(.dark) #zoneLu {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
}

html:not(.dark) div[onclick*="'maitrise'"] p.text-yellow-400 {
    color: #b45309 !important;
}
html:not(.dark) div[onclick*="'maitrise'"] p.text-gray-400 {
    color: #475569 !important;
}

html:not(.dark) #zoneMaitrise {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1) !important;
    opacity: 1 !important;
}

html:not(.dark) #globalSettingsContent .w-10.h-10.bg-gradient-to-br {
    background-image: none !important;
    background-color: #f3e8ff !important;
    border: 1px solid #d8b4fe !important;
}

html:not(.dark) #globalSettingsContent .w-10.h-10.bg-gradient-to-br i {
    color: #9333ea !important;
}

html:not(.dark) #noteSaveIndicator,
html:not(.dark) #fsSaveIndicator {
    background-color: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
    padding: 2px 6px;
    border-radius: 4px;
    text-shadow: none !important;
}

html:not(.dark) #errorModal .glass-panel,
html:not(.dark) #errorModal .flex-grow {
    background-color: #f8fafc !important;
    color: #334155 !important;
}

html:not(.dark) #errorCardsGrid > div {
    background-color: #ffffff !important;
    border: 1px solid #fecaca !important;
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.05) !important;
}

html:not(.dark) #errorCardsGrid p {
    color: #991b1b !important;
}

html:not(.dark) #errorCardsGrid .text-red-500\/30 {
    color: #f87171 !important;
    opacity: 1 !important;
}

html:not(.dark) #detailStatusIconBg.bg-gray-800 {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
}
html:not(.dark) #detailStatusText {
    color: #0f172a !important;
}
html:not(.dark) #itemDetailView .card-panel {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) .card-panel .text-\[10px\].text-gray-500 {
    color: #64748b !important;
}

html:not(.dark) #detailResourcesList span.text-gray-200 {
    color: #1e293b !important;
}
html:not(.dark) #detailResourcesList span[class*="text-"][class*="/70"] {
    opacity: 1 !important;
    font-weight: 800 !important;
}

html:not(.dark) #newErrorInput {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html:not(.dark) #newErrorInput::placeholder {
    color: #94a3b8 !important;
}

html:not(.dark) #errorModal button[onclick*="addErrorCard"] {
    background-color: #dc2626 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3) !important;
    opacity: 1 !important;
}

html:not(.dark) #errorModal button[onclick*="addErrorCard"]:hover {
    background-color: #b91c1c !important;
    transform: translateY(-2px);
}

html:not(.dark) #authBtn {
    background: linear-gradient(to right, #2563eb, #4f46e5) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4) !important;
    opacity: 1 !important;
}

html:not(.dark) #authBtn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

html:not(.dark) header .glass-btn {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

html:not(.dark) header .glass-btn:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #2563eb !important;
}

html:not(.dark) #headerXPBtn {
    background-color: #eff6ff !important; /* Fond Bleu très pâle */
    border: 1px solid #60a5fa !important; /* Bordure Bleue visible */
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.15) !important;
}

html:not(.dark) #headerXPBtn * {
    color: #1e3a8a !important; 
    -webkit-text-fill-color: #1e3a8a !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

html:not(.dark) #headerXPBtn i {
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
}

html:not(.dark) #headerXPBtn .bg-blue-900\/50 {
    background-color: #dbeafe !important;
    border: 1px solid #93c5fd !important;
}

html:not(.dark) #headerChronoBtn {
    background-color: #fff7ed !important; /* Fond Orange très pâle */
    border: 1px solid #fb923c !important; /* Bordure Orange visible */
    box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.15) !important;
}

html:not(.dark) #headerChronoBtn * {
    color: #9a3412 !important;
    -webkit-text-fill-color: #9a3412 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

html:not(.dark) #headerChronoBtn i,
html:not(.dark) #countdownDisplay {
    color: #ea580c !important;
    -webkit-text-fill-color: #ea580c !important;
}

html:not(.dark) #headerShortcuts {
    background-color: rgba(241, 245, 249, 0.8) !important; /* Gris très clair */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

html:not(.dark) #headerShortcuts span {
    color: #64748b !important; /* Texte gris */
}

html:not(.dark) #headerShortcuts button[onclick="openLinkModal()"] {
    /* On vise le texte "Nouveau" */
    color: #64748b !important; /* Gris foncé */
}
html:not(.dark) #headerShortcuts button[onclick="openLinkModal()"] span {
    color: #475569 !important; /* Assure que le texte est foncé */
}

html:not(.dark) #headerShortcuts button[onclick="openLinkModal()"] .w-5.h-5 {
    background-color: #f1f5f9 !important; /* Gris très clair */
    color: #64748b !important; /* Icone grise */
}
html:not(.dark) #headerShortcuts button[onclick="openLinkModal()"]:hover .w-5.h-5 {
    background-color: #2563eb !important; /* Bleu au survol */
    color: #ffffff !important;
}

html:not(.dark) #customLinksContainer a {
    background-color: #f8fafc !important; /* Fond Gris Papier */
    border: 1px solid #cbd5e1 !important; /* Bordure Grise */
}

html:not(.dark) #customLinksContainer span.font-display {
    color: #2563eb !important; /* Bleu Royal (Uniforme et lisible) */
}

html:not(.dark) #customLinksContainer span.text-xs {
    color: #334155 !important; /* Gris Foncé (Slate-700) */
    opacity: 1 !important; /* Enlève la transparence */
}

html:not(.dark) #customLinksContainer button {
    background-color: #ef4444 !important; /* Rouge */
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

html:not(.dark) .suggestion-card button.bg-white\/5 {
    background-color: #ffffff !important; /* Fond Blanc Solide */
    border: 1px solid #d1d5db !important; /* Bordure Grise Définie */
    color: #475569 !important;            /* Texte Gris Foncé */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

html:not(.dark) .suggestion-card button.bg-white\/5:hover {
    background-color: #f1f5f9 !important; /* Gris léger au survol */
    color: #1e293b !important;            /* Texte plus foncé */
    border-color: #a1a1aa !important;
}

html:not(.dark) .suggestion-card button.bg-green-500 {
    color: #0f172a !important; /* Texte Noir */
    text-shadow: none !important;
}

html:not(.dark) .suggestion-card button.bg-green-500 i {
    color: #0f172a !important; /* Icône Noire */
}

html:not(.dark) #globalSettingsContent h3 {
    color: #1e3a8a !important; /* Bleu Nuit profond pour le contraste */
    font-weight: 900 !important;
}

html:not(.dark) #globalSettingsContent .bg-\[\#151515\],
html:not(.dark) #globalSettingsContent .bg-black\/40,
html:not(.dark) #globalSettingsContent .bg-orange-500\/5 {
    background-color: rgba(241, 245, 249, 0.8) !important; /* Gris très pâle (Slate-100) semi-opaque */
    border: 1px solid #cbd5e1 !important; /* Bordure plus définie */
}

html:not(.dark) #globalSettingsContent label {
    color: #475569 !important; /* Gris foncé (Slate-600) au lieu de gris moyen */
    font-weight: 700 !important;
}

html:not(.dark) #globalSettingsContent input {
    background-color: #ffffff !important; /* Blanc pur pour la zone de saisie */
    color: #0f172a !important; /* Texte noir profond */
    border: 1px solid #cbd5e1 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
html:not(.dark) #globalSettingsContent input::placeholder {
    color: #94a3b8 !important; /* Placeholder gris moyen */
}

html:not(.dark) #globalSettingsContent p.text-gray-400,
html:not(.dark) #globalSettingsContent p.text-gray-500 {
    color: #64748b !important; /* Slate-500 plus lisible */
}

html:not(.dark) #goalControlPanel h4 {
    color: #1e293b !important; /* Titre foncé */
}
html:not(.dark) #goalControlPanel .text-gray-600 {
    color: #475569 !important; /* Textes secondaires plus foncés */
}

html:not(.dark) #goalControlPanel {
    background-color: rgba(255, 255, 255, 0.5) !important; /* Fond très clair et translucide */
    backdrop-filter: blur(10px) !important; /* Ajout du flou */
    border-color: #d1d5db !important; /* Bordure plus douce */
}

html:not(.dark) #globalSettingsContent {
    background-color: rgba(255, 255, 255, 0.7s5) !important; /* Presque opaque pour la lisibilité du contenu */
    backdrop-filter: blur(10px) !important; 
    border-color: #cbd5e1 !important;
}

html:not(.dark) #globalSettingsContent input {
    background-color: rgba(255, 255, 255, 0.6) !important; /* Rend le champ d'entrée translucide */
    border-color: #e2e8f0 !important;
}

html:not(.dark) #globalSettingsContent .bg-\[\#151515\],
html:not(.dark) #globalSettingsContent .bg-black\/40,
html:not(.dark) #globalSettingsContent .bg-orange-500\/5 {
    background-color: rgba(255, 255, 255, 0.75) !important; /* Translucide sur le fond principal */
    border-color: #e2e8f0 !important;
}

html:not(.dark) #globalSettingsContent .text-white {
    color: #1e293b !important;
}

html:not(.dark) #settingSoundToggle + div {
    background-color: #cbd5e1 !important; /* Gris visible (Slate-300) */
    border: 1px solid #94a3b8 !important; /* Bordure grise */
    opacity: 1 !important; /* Force l'opacité */
}

html:not(.dark) #settingSoundToggle:checked + div {
    background-color: #2563eb !important; /* Bleu Royal */
    border-color: #2563eb !important;
}

html:not(.dark) #settingSoundToggle + div::after {
    background-color: #ffffff !important; /* Blanc pur */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Petite ombre pour le relief */
}

html:not(.dark) #resetConfirmModal .bg-\[\#0f0505\] {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Blanc translucide */
    backdrop-filter: blur(20px) !important; /* Flou d'arrière-plan */
    border: 1px solid #fecaca !important; /* Bordure Rouge très pâle */
    box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.15) !important; /* Ombre rouge diffuse */
}

html:not(.dark) #resetConfirmModal h3 {
    color: #7f1d1d !important; /* Rouge Sang foncé */
    text-shadow: none !important;
}

html:not(.dark) #resetConfirmModal p.text-red-400 {
    color: #dc2626 !important; /* Rouge Vif (Red-600) */
    font-weight: 800 !important;
}

html:not(.dark) #resetConfirmModal .bg-red-900\/10 {
    background-color: rgba(254, 226, 226, 0.6) !important; /* Rouge pâle (Red-100) translucide */
    border: 1px solid #fecaca !important; /* Bordure Red-200 */
}

html:not(.dark) #resetConfirmModal ul li {
    color: #450a0a !important; /* Rouge/Marron très foncé pour la lisibilité */
}
html:not(.dark) #resetConfirmModal .text-gray-400 {
    color: #7f1d1d !important; /* Titre de la liste en rouge foncé */
    opacity: 0.8;
}

html:not(.dark) #resetConfirmModal .bg-red-500\/10 {
    background-color: #fee2e2 !important; /* Red-100 solide */
    border-color: #fecaca !important;
    color: #dc2626 !important;
}

html:not(.dark) #resetConfirmModal button.bg-white\/5 {
    background-color: #f1f5f9 !important; /* Gris clair */
    color: #64748b !important; /* Texte Gris */
    border: 1px solid #e2e8f0 !important;
}
html:not(.dark) #resetConfirmModal button.bg-white\/5:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html:not(.dark) #resetConfirmModal button.bg-red-600 {
    background-color: #dc2626 !important; /* Rouge Vif Forcé */
    background-image: none !important;    /* Pas de dégradé/image vide */
    border: 1px solid #b91c1c !important; /* Bordure Rouge Foncé */
    color: #ffffff !important;            /* Texte Blanc */
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important; /* Ombre Rouge */
    opacity: 1 !important;
}

html:not(.dark) #resetConfirmModal button.bg-red-600:hover {
    background-color: #b91c1c !important; /* Rouge plus sombre */
    transform: translateY(-2px);
}

html:not(.dark) #resetConfirmModal button.bg-white\/5 {
    background-color: #f1f5f9 !important; /* Gris Clair */
    border: 1px solid #cbd5e1 !important; /* Bordure Grise */
    color: #64748b !important;            /* Texte Gris Foncé */
}

html:not(.dark) #resetConfirmModal button.bg-white\/5:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html:not(.dark) #calendarGrid > div[class*="bg-[#151515]"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html:not(.dark) #calendarGrid > div[class*="bg-green-"] {
    background-color: #dcfce7 !important; /* Green-100 */
    border: 1px solid #86efac !important; /* Bordure Green-300 */
}
html:not(.dark) #calendarGrid > div[class*="bg-green-"] span {
    color: #14532d !important; 
    font-weight: 800 !important;
}

html:not(.dark) #calendarGrid > div[class*="bg-blue-"] {
    background-color: #dbeafe !important; /* Blue-100 */
    border: 1px solid #93c5fd !important; /* Bordure Blue-300 */
}
/* Le numéro du jour en Bleu Foncé */
html:not(.dark) #calendarGrid > div[class*="bg-blue-"] span {
    color: #1e3a8a !important;
    font-weight: 800 !important;
}

html:not(.dark) #calendarGrid > div[class*="bg-red-"] {
    background-color: #fee2e2 !important; /* Red-100 */
    border: 1px solid #fca5a5 !important; /* Bordure Red-300 */
}
html:not(.dark) #calendarGrid > div[class*="bg-red-"] span {
    color: #7f1d1d !important;
    font-weight: 800 !important;
}

html:not(.dark) .card-cinema .absolute.top-3.right-3 button {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* Bordure grise fine */
    color: #94a3b8 !important;            /* Icône grise */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

html:not(.dark) .card-cinema .absolute.top-3.right-3 button[class*="text-blue-400"] {
    background-color: #eff6ff !important; /* Fond Bleu très pâle */
    border-color: #60a5fa !important;     /* Bordure Bleue */
    color: #2563eb !important;            /* Icône Bleu Vif */
}

html:not(.dark) .card-cinema .absolute.top-3.right-3 button[class*="bg-green-500"] {
    background-color: #22c55e !important; /* VERT VIF (Green-500) */
    border-color: #16a34a !important;     /* Bordure Verte */
    color: #000000 !important;            /* Icône Noire */
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.4) !important; /* Lueur verte */
}

html:not(.dark) .card-cinema .absolute.top-3.right-3 button[class*="bg-yellow-500"] {
    background-color: #fbbf24 !important; /* JAUNE VIF (Amber-400) */
    border-color: #d97706 !important;     /* Bordure Orange */
    color: #000000 !important;            /* Icône Noire */
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.4) !important; /* Lueur dorée */
}


html:not(.dark) #notesHeader .relative.w-8.h-8 {
    background-color: #ffffff !important;   /* Fond Blanc */
}

/* 2. Effet au survol */
html:not(.dark) #notesHeader .relative.w-8.h-8:hover {
    background-color: #ededed !important;   
    border-color: #cbd5e1 !important;       
    transform: translateY(-1px);          
}

html:not(.dark) #notesIcon {
    filter: brightness(0.9); /* Ajuste légèrement les couleurs vives des matières pour le fond blanc */
}

html:not(.dark) #notesIcon.text-gray-300,
html:not(.dark) #notesIcon.text-gray-400 {
    color: #2563eb !important; 
}

html:not(.dark) #fullScreenNotesContent {
    background-color: #ffffff !important; /* Fond Blanc pur */
    border: 1px solid #e2e8f0 !important; /* Bordure grise fine */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) #fullScreenEditor {
    background-color: #ffffff !important; /* Fond Blanc */
    color: #334155 !important;            /* Texte Gris Foncé (Slate-700) */
    caret-color: #2563eb !important;      /* Curseur Bleu */
}

html:not(.dark) #fullScreenNotesContent .bg-\[\#111\],
html:not(.dark) #fullScreenNotesContent .bg-\[\#151515\] {
    background-color: #f8fafc !important; 
    border-bottom-color: #e2e8f0 !important;
}

html:not(.dark) #fullScreenNotesContent button {
    color: #64748b !important; /* Icônes grises */
}

html:not(.dark) #fullScreenNotesContent button:hover {
    background-color: #e2e8f0 !important; /* Fond gris au survol */
    color: #0f172a !important;             /* Icône noire au survol */
}

html:not(.dark) #fsNoteTitle {
    color: #1e3a8a !important; /* Bleu Nuit */
}
html:not(.dark) #fsNoteIconBg {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

html:not(.dark) #fullScreenEditor li {
    color: #334155 !important;
}
html:not(.dark) #fullScreenEditor strong {
    color: #0f172a !important; /* Gras en noir profond */
}

html:not(.dark) .dino-woke {
    color: #eab308 !important; /* Amber-600 (Or chaud) au lieu de Cyan */
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.6)) !important; 
    transform: scale(1.1);
}

html:not(.dark) .diamond-particle {
    color: #facc15 !important; /* Amber-400 (Or vif) */
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.8) !important; /* Lueur jaune */
}

html:not(.dark) #dinoSpeechBubble h4 {
    color: #ca8a04 !important; /* Amber-700 (Or très foncé pour la lecture) */
}

html:not(.dark) #dinoSpeechBubble h4 i {
    color: #eab308 !important; /* Amber-500 */
}

/* --- FIX VISIBILITÉ SLIDER (JAUGE TEMPS) --- */

/* 1. Le Rail (La barre horizontale) */
html:not(.dark) input[type=range]::-webkit-slider-runnable-track {
    background: #94a3b8 !important; /* Gris Moyen (Slate-400) bien visible */
    border: 1px solid #cbd5e1 !important; /* Bordure pour la définition */
    height: 6px !important;
    border-radius: 10px !important;
}

/* 2. Le Curseur (Le rond qu'on bouge) */
html:not(.dark) input[type=range]::-webkit-slider-thumb {
    background: #2563eb !important; /* Bleu Royal (Blue-600) pour le contraste */
    border: 2px solid #ffffff !important; /* Contour blanc pour le détacher */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: -7px !important; /* Pour bien centrer le rond sur la barre */
}

/* Pour Firefox aussi (au cas où) */
html:not(.dark) input[type=range]::-moz-range-track {
    background: #94a3b8 !important;
    height: 6px !important;
    border-radius: 10px !important;
}
html:not(.dark) input[type=range]::-moz-range-thumb {
    background: #2563eb !important;
    border: 2px solid #ffffff !important;
}

	
/* ==========================================================================
   CORRECTIFS PARTIE 11 : IMPORT PDF & LISTE RESSOURCES
   ========================================================================== */

/* --- 1. LE SÉLECTEUR DE SOURCE (Switch Import/Lien) --- */
/* Le conteneur principal du switch */
html:not(.dark) #pdfSourceSelector > div {
    background-color: #f1f5f9 !important; /* Gris très pâle */
    border: 1px solid #e2e8f0 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

/* Les options NON sélectionnées (Texte gris) */
html:not(.dark) #pdfSourceSelector label div {
    color: #64748b !important; /* Slate-500 */
    background-color: transparent;
}
html:not(.dark) #pdfSourceSelector label div:hover {
    background-color: #ffffff !important;
    color: #334155 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* L'option SÉLECTIONNÉE (Fond Bleu) */
/* Note : On doit être précis pour écraser le CSS par défaut */
html:not(.dark) #pdfSourceSelector label input:checked + div {
    background-color: #2563eb !important; /* Bleu Royal */
    color: #ffffff !important; /* Texte Blanc */
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
}

/* Le petit texte d'aide en dessous */
html:not(.dark) #pdfSourceSelector p {
    color: #94a3b8 !important;
}

/* --- 2. LE CHAMP D'UPLOAD DE FICHIER (Input File) --- */
html:not(.dark) input[type="file"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* Bordure pointillée ou solide selon votre style */
    color: #475569 !important; /* Texte du nom de fichier */
}
/* Le bouton "Choisir un fichier" à l'intérieur de l'input */
html:not(.dark) input[type="file"]::file-selector-button {
    background-color: #eff6ff !important; /* Bleu très pâle */
    color: #1d4ed8 !important; /* Texte Bleu foncé */
    border: none !important;
    border-right: 1px solid #dbeafe !important;
    font-weight: bold !important;
}
html:not(.dark) input[type="file"]:hover::file-selector-button {
    background-color: #dbeafe !important;
}

/* --- 3. LISTE DES RESSOURCES (Mode Édition) --- */
/* Quand on clique sur le crayon pour renommer une ressource */
html:not(.dark) #resListContainer input[type="text"] {
    background-color: #ffffff !important;
    border: 2px solid #3b82f6 !important; /* Bordure bleue active */
    color: #0f172a !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1) !important;
}

/* Boutons d'action dans la liste (Crayon, Poubelle) */
html:not(.dark) #resListContainer button.text-gray-600 {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}
html:not(.dark) #resListContainer button.text-gray-600:hover {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #2563eb !important; /* Bleu au survol */
}
/* Spécifique pour la poubelle au survol */
html:not(.dark) #resListContainer button[title="Supprimer"]:hover {
    color: #ef4444 !important;
    border-color: #fca5a5 !important;
    background-color: #fef2f2 !important;
}

/* ==========================================================================
   AJOUTS POUR LA LISIBILITÉ GLOBALE & COMPOSANTS MANQUANTS
   ========================================================================== */

/* --- 1. CARTES DE COURS (Card Cinema) --- */
/* Rend les cartes blanches avec une ombre douce au lieu de l'effet verre sombre */
html:not(.dark) .card-cinema {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* Bordure grise subtile */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Titre du cours en bleu foncé */
html:not(.dark) .card-cinema h3 {
    color: #1e293b !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* Texte de description (Items, Pourcentage) */
html:not(.dark) .card-cinema p, 
html:not(.dark) .card-cinema span {
    color: #64748b !important; /* Slate-500 */
}

/* Barre de progression dans la carte */
html:not(.dark) .card-cinema .bg-gray-800 {
    background-color: #f1f5f9 !important; /* Fond de barre gris clair */
}

/* --- 2. CHAT TUTEUR IA (Bulles de discussion) --- */
/* Zone de fond du chat */
html:not(.dark) #tutorChatInterface, 
html:not(.dark) #chatHistory {
    background-color: #f8fafc !important; /* Fond très clair */
}

/* Bulle de l'utilisateur (Bleue) */
html:not(.dark) .chat-user {
    background-color: #2563eb !important; /* Bleu Royal */
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
}

/* Bulle de l'IA (Blanche/Grise) */
html:not(.dark) .chat-ai {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important; /* Texte foncé */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Code ou Markdown dans le chat IA */
html:not(.dark) .chat-ai code {
    background-color: #f1f5f9 !important;
    color: #ea580c !important; /* Orange pour le code */
    border: 1px solid #e2e8f0 !important;
}

/* --- 3. FIX DU CHRONOMÈTRE & BOUTONS --- */
/* Le grand bouton Play central */
html:not(.dark) #timerBtn {
    background: #ffffff !important;
    color: #2563eb !important; /* Icône Play bleue */
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.25) !important;
}
html:not(.dark) #timerBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.35) !important;
}

html:not(.dark) #playBtnProgress {
    stroke: #2563eb !important;
}
html:not(.dark) circle[stroke*="rgba(255,255,255,0.1)"] {
    stroke: #e2e8f0 !important; /* Piste grise claire */
}

html:not(.dark) #calendarView .text-gray-500 {
    color: #64748b !important;
    font-weight: 700 !important;
}

html:not(.dark) #calMonthYear {
    color: #0f172a !important;
}

html:not(.dark) #modalTitle, 
html:not(.dark) #aiModalTitle {
    color: #0f172a !important;
}

html:not(.dark) .modal-backdrop input[type="text"],
html:not(.dark) .modal-backdrop input[type="number"],
html:not(.dark) .modal-backdrop textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Boutons de fermeture (X) */
html:not(.dark) .fa-times {
    color: #94a3b8 !important;
}
html:not(.dark) .fa-times:hover {
    color: #ef4444 !important;
}

html:not(.dark) ::-webkit-scrollbar {
    width: 8px;
}
html:not(.dark) ::-webkit-scrollbar-track {
    background: #f1f5f9; /* Fond de la piste gris très clair */
}
html:not(.dark) ::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Barre grise */
    border-radius: 4px;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* Plus foncé au survol */
}

html:not(.dark) #lvlDisplay {
    color: #2563eb !important;
    font-weight: 900 !important;
}
html:not(.dark) #xpBar {
    background: linear-gradient(to right, #3b82f6, #60a5fa) !important;
}
html:not(.dark) .bg-blue-900\/50 {
    background-color: #e2e8f0 !important; /* Fond de la barre XP */
}

html:not(.dark) #resourceListModal .glass-panel {
    background-color: #ffffff !important; /* Fond Blanc pur */
    color: #1e293b !important; /* Texte gris foncé */
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) #resListTitle {
    color: #1e3a8a !important; /* Bleu nuit pour bien ressortir */
    font-weight: 800 !important;
}

html:not(.dark) #resListContainer > div {
    background-color: #f8fafc !important; /* Gris très pâle (Slate-50) */
    border: 1px solid #cbd5e1 !important; /* Bordure grise définie */
    box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important;
    margin-bottom: 8px !important; /* Espacement entre les items */
}

html:not(.dark) #resListContainer > div:hover {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important; /* Bordure bleue */
    transform: translateY(-2px); /* Léger soulèvement */
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

html:not(.dark) #resListContainer h4,
html:not(.dark) #resListContainer strong {
    color: #0f172a !important; /* Noir profond */
}

html:not(.dark) #resListContainer p,
html:not(.dark) #resListContainer span {
    color: #64748b !important; /* Gris moyen */
}

html:not(.dark) #detailResourcesList > div,
html:not(.dark) #detailResourcesList > a {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

html:not(.dark) #detailResourcesList > div:hover,
html:not(.dark) #detailResourcesList > a:hover {
    background-color: #f0f9ff !important; /* Fond bleu très pâle au survol */
    border-color: #7dd3fc !important; /* Bordure bleu ciel */
    color: #0369a1 !important; /* Texte bleu foncé */
    padding-left: 1rem !important; /* Petit décalage vers la droite */
}

html:not(.dark) #fileUploadGroup input[type="file"] {
    background-color: #f1f5f9 !important; /* Gris clair */
    border: 2px dashed #cbd5e1 !important; /* Bordure pointillée */
    color: #475569 !important;
    padding: 10px !important;
}

html:not(.dark) #fileUploadGroup input[type="file"]:hover {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important; /* Devient bleu au survol */
}

html:not(.dark) #typeInputGroup label div {
    background-color: #ffffff !important; /* Fond Blanc */
    border: 1px solid #e2e8f0 !important; /* Bordure Grise */
    color: #64748b !important;            /* Icône et Texte Gris */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

html:not(.dark) #typeInputGroup label div:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px);
}

html:not(.dark) input[value="video"]:checked + div {
    background-color: #fef2f2 !important; /* Rouge très pâle */
    border-color: #ef4444 !important;     /* Bordure Rouge vif */
    color: #dc2626 !important;            /* Texte Rouge foncé */
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15) !important;
}

html:not(.dark) input[value="audio"]:checked + div {
    background-color: #fffbeb !important; /* Ambre très pâle */
    border-color: #f59e0b !important;
    color: #d97706 !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.15) !important;
}

html:not(.dark) input[value="flash"]:checked + div {
    background-color: #faf5ff !important; /* Violet très pâle */
    border-color: #a855f7 !important;
    color: #7e22ce !important;
    box-shadow: 0 4px 10px rgba(168, 85, 247, 0.15) !important;
}

html:not(.dark) input[value="fiche"]:checked + div {
    background-color: #eff6ff !important; /* Bleu très pâle */
    border-color: #3b82f6 !important;
    color: #1d4ed8 !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.15) !important;
}

html:not(.dark) #addModal label.block, 
html:not(.dark) #linkModal label.block {
    color: #475569 !important; /* Slate-600 (Gris foncé lisible) */
    font-weight: 800 !important;
}

html:not(.dark) #addModal input[type="text"],
html:not(.dark) #addModal input[type="number"],
html:not(.dark) #linkModal input[type="text"] {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important; /* Texte noir */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) !important;
}

html:not(.dark) #addModal input:focus,
html:not(.dark) #linkModal input:focus {
    border-color: #2563eb !important; /* Bordure bleue */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

html:not(.dark) #addModal button.text-gray-400,
html:not(.dark) #linkModal button.text-gray-400 {
    color: #64748b !important;
}
html:not(.dark) #addModal button.text-gray-400:hover,
html:not(.dark) #linkModal button.text-gray-400:hover {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
    border-radius: 8px;
}

html:not(.dark) #btnSaveResource,
html:not(.dark) button[onclick="saveCustomLink()"] {
    background-color: #0f172a !important; /* Fond Noir */
    color: #ffffff !important;            /* Texte Blanc */
    border: 1px solid #0f172a !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}

html:not(.dark) #btnSaveResource:hover,
html:not(.dark) button[onclick="saveCustomLink()"]:hover {
    background-color: #334155 !important; /* Gris foncé au survol */
    transform: translateY(-2px);
}


html:not(.dark) #resListAddBtn {
    background-color: #2563eb !important; /* Bleu Royal (Blue-600) */
    background-image: none !important;    /* Supprime les dégradés sombres */
    color: #ffffff !important;            /* Texte Blanc */
    border: 1px solid #2563eb !important; /* Bordure assortie */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important; /* Ombre portée bleue */
    opacity: 1 !important; /* Force l'opacité au cas où */
}

html:not(.dark) #resListAddBtn:hover {
    background-color: #1d4ed8 !important; /* Bleu plus foncé au survol (Blue-700) */
    border-color: #1d4ed8 !important;
    transform: translateY(-2px) scale(1.02); /* Petit effet de "pop" */
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.5) !important;
}

html:not(.dark) #resListAddBtn i {
    color: #ffffff !important;
}

html:not(.dark) #detailResourcesList strong,
html:not(.dark) #detailResourcesList b,
html:not(.dark) #detailResourcesList .font-bold,
html:not(.dark) #detailResourcesList .text-white,
html:not(.dark) #detailResourcesList .text-gray-200,
html:not(.dark) #detailResourcesList .text-gray-300 {
    color: #0f172a !important; /* Slate-900 (Noir Profond) */
}

html:not(.dark) #detailResourcesList .text-xs,
html:not(.dark) #detailResourcesList .text-sm,
html:not(.dark) #detailResourcesList .text-gray-400,
html:not(.dark) #detailResourcesList .text-gray-500 {
    color: #475569 !important; /* Slate-600 (Gris Foncé) */
    font-weight: 600 !important; /* Un peu plus gras pour la lisibilité */
}

html:not(.dark) #resListContainer h4,
html:not(.dark) #resListContainer .font-bold {
    color: #1e3a8a !important; /* Bleu Nuit */
}

html:not(.dark) #resListContainer p,
html:not(.dark) #resListContainer span,
html:not(.dark) #resListContainer .text-sm {
    color: #334155 !important; /* Gris Foncé */
}

/* On s'assure que les icônes gardent leur couleur (Rouge PDF, Bleu Lien, etc.) */
html:not(.dark) #detailResourcesList i,
html:not(.dark) #resListContainer i {
    /* On laisse la couleur définie précédemment (ne pas forcer en noir) */
    /* Pas de règle 'color' ici, pour laisser la règle précédente s'appliquer */
}

html:not(.dark) #resListContainer button.text-green-500,
html:not(.dark) #resListContainer button.text-green-400,
html:not(.dark) #resListContainer button:has(.fa-check) {
    background-color: #22c55e !important; /* Fond Vert Vif (Green-500) */
    color: #ffffff !important;            /* Icône Blanche */
    border: 1px solid #16a34a !important; /* Bordure plus foncée */
    border-radius: 8px !important;        /* Coins arrondis */
    
    /* Taille fixe pour faire un joli bouton carré */
    width: 32px !important;
    height: 32px !important;
    
    /* Centrage de l'icône */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    box-shadow: 0 2px 5px rgba(34, 197, 94, 0.3) !important;
    margin-left: 8px !important; /* Espace avec l'input */
    opacity: 1 !important;
}

html:not(.dark) #resListContainer button.text-green-500:hover,
html:not(.dark) #resListContainer button:has(.fa-check):hover {
    background-color: #15803d !important; 
    border-color: #14532d !important;
    transform: scale(1.1);
}

html:not(.dark) #resListContainer button.text-red-500,
html:not(.dark) #resListContainer button.text-red-400 {
    background-color: #ffffff !important; /* Fond Blanc */
    color: #ef4444 !important;            /* Icône Rouge */
    border: 1px solid #fca5a5 !important; /* Bordure Rouge pâle */
    border-radius: 8px !important;
    
    width: 32px !important;
    height: 32px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    margin-left: 4px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

html:not(.dark) #resListContainer button.text-red-500:hover {
    background-color: #fef2f2 !important; /* Fond Rouge très pâle */
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}


html:not(.dark) label.group\/upload > div.rounded-xl {
    /* 1. On force la visibilité par-dessus la règle globale */
    background-color: #d946ef !important; /* Fuchsia Vif */
    background-image: none !important;    /* Stop au dégradé */
    opacity: 1 !important;                /* FORCE L'OPACITÉ */
    visibility: visible !important;
    
    /* 2. On rétablit le style du bouton */
    border: 1px solid #c026d3 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(217, 70, 239, 0.4) !important;
}

html:not(.dark) label.group\/upload:hover > div.rounded-xl {
    background-color: #c026d3 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(217, 70, 239, 0.6) !important;
}

html:not(.dark) label.group\/upload i,
html:not(.dark) label.group\/upload span {
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    z-index: 50 !important; /* Pour être sûr qu'ils sont au-dessus */
}

/* ==========================================================================
   STYLE "TÉLÉCOMMANDE" CALENDRIER (Navigation Mois)
   ========================================================================== */

/* 1. Le conteneur (la boîte qui entoure les deux flèches) */
/* On cible le div qui est juste après le titre du mois ou dans le header du calendrier */
html:not(.dark) #calendarView .bg-\[\#151515\] {
    background-color: #ffffff !important; /* Fond Blanc */
    border: 1px solid #cbd5e1 !important; /* Bordure Grise */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

/* 2. Les boutons flèches à l'intérieur */
html:not(.dark) #calendarView button[onclick*="changeMonth"] {
    background-color: transparent !important; /* Pas de fond par défaut */
    border: none !important;
    color: #64748b !important; /* Gris foncé */
    box-shadow: none !important;
}

/* 3. Au survol des flèches */
html:not(.dark) #calendarView button[onclick*="changeMonth"]:hover {
    background-color: #f1f5f9 !important; /* Gris très clair au survol */
    color: #2563eb !important;            /* Flèche devient Bleue */
}

/* 4. Le petit séparateur vertical au milieu */
html:not(.dark) #calendarView .w-px.h-5 {
    background-color: #e2e8f0 !important;
}

/* ==========================================================================
   AMÉLIORATION CALENDRIER V3 (Week-ends & Jauges)
   ========================================================================== */

/* 1. Distinction des Week-ends (Colonnes 6 et 7) */
/* En mode sombre : fond légèrement plus foncé */
.calendar-weekend {
    background-color: rgba(0, 0, 0, 0.3) !important;
}
/* En mode clair : fond légèrement grisé */
html:not(.dark) .calendar-weekend {
    background-color: #f8fafc !important;
}

/* 2. Barre de progression du jour (Sidebar) */
.day-progress-bg {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}
html:not(.dark) .day-progress-bg {
    background: #e2e8f0;
}

/* 3. Style des cases "Vides" (Mois précédent/suivant) */
.calendar-empty {
    opacity: 0.3;
    pointer-events: none; /* Non cliquable */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.02) 5px, rgba(255,255,255,0.02) 10px);
}
html:not(.dark) .calendar-empty {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.02) 5px, rgba(0,0,0,0.02) 10px);
}

html:not(.dark) .planning-panel {
    background-color: #ffffff;      /* Fond blanc pur pour bien ressortir */
    color: #1a202c;                 /* Texte gris très foncé (presque noir) */
    border: 1px solid #e2e8f0;      /* Une bordure fine grise pour délimiter */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Une ombre pour le détacher du fond */
}

html:not(.dark) .planning-panel h2, 
html:not(.dark) .planning-panel h3 {
    color: #2d3748; /* Force les titres en couleur sombre */
}

/* 3. La pastille "0% complété" */
html:not(.dark) .progress-pill {
    background-color: #edf2f7;      /* Fond gris très clair */
    color: #2d3748;                 /* Texte foncé */
    border: 1px solid #cbd5e0;      /* Bordure pour la rendre visible */
    font-weight: 600;               /* Gras pour la lisibilité */
}

html:not(.dark) .planning-card {
    background-image: none !important;  /* Supprime le dégradé noir */
    background-color: #ffffff !important; /* Met un fond blanc pur */
    border-color: #e2e8f0 !important;   /* Bordure grise légère au lieu du bleu sombre */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Ajoute une ombre pour le relief */
}

html:not(.dark) .planning-card h3 {
    color: #1a202c !important; /* Force le texte en noir */
}

html:not(.dark) .planning-card .text-blue-400 {
    color: #2563eb !important; /* On le met en bleu plus foncé pour qu'il soit lisible sur le blanc */
}

html:not(.dark) .planning-card .bg-blue-500\/10 {
    background-color: rgba(59, 130, 246, 0.05) !important; /* On le rend très discret */
}

/* --- Design du Planning en Mode CLAIR avec Lueurs --- */

html:not(.dark) .planning-card {
    /* 1. Fond : Un dégradé subtil du blanc vers un bleu "glacé" */
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
    
    /* 2. Bordure : Gris bleuté très clair */
    border-color: #dbeafe !important;
    
    /* 3. Ombre : Une ombre portée avec une légère teinte bleue (glow externe) */
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15), 
                0 8px 10px -6px rgba(59, 130, 246, 0.1) !important;
    
    /* Pour s'assurer que le fond ne cache pas les éléments internes */
    position: relative;
    z-index: 1;
}

html:not(.dark) .planning-card h3 {
    color: #1e3a8a !important; /* Bleu nuit profond */
}

html:not(.dark) .planning-card .text-blue-400 {
    color: #3b82f6 !important; /* Bleu standard plus lisible */
}

html:not(.dark) .planning-card > div.absolute {
    /* On change la couleur pour un bleu ciel pastel */
    background-color: rgba(59, 130, 246, 0.2) !important;
    
    /* On force le flou pour que ça fasse une belle tache douce */
    filter: blur(60px);
    
    /* On s'assure qu'elle reste derrière le texte */
    z-index: -1; 
}

/* ================================================================= */
/* CORRECTION FORCEE POUR ÉLÉMENTS GÉNÉRÉS PAR JS (Mode Clair) */
/* ================================================================= */

/* --- 1. LES CASES DU CALENDRIER (Les jours) --- */
/* On cible les divs directes dans la grille */
html:not(.dark) #calendarGrid > div {
    background-color: #ffffff !important;   /* Fond blanc pour la case */
    border: 1px solid #e2e8f0 !important;   /* Bordure grise claire */
    color: #1e293b !important;              /* Chiffre du jour en noir */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Légère ombre */
}

/* Les jours "hors mois" (souvent grisés) */
html:not(.dark) #calendarGrid > div.opacity-50 {
    background-color: #f8fafc !important;   /* Gris très pâle */
    color: #94a3b8 !important;              /* Texte gris clair */
}

/* Le jour "Aujourd'hui" (souvent une classe spécifique ou une bordure bleue) */
html:not(.dark) #calendarGrid > div.border-blue-500 {
    background-color: #eff6ff !important;   /* Bleu très pâle */
    border-color: #3b82f6 !important;       /* Bordure bleue */
    color: #1d4ed8 !important;              /* Texte bleu foncé */
}

/* Le jour "Sélectionné" (souvent fond blanc ou bleu) */
html:not(.dark) #calendarGrid > div.ring-2 {
    ring-color: #3b82f6 !important;         /* Anneau de sélection bleu */
}

/* --- 2. LES PASTILLES (Petits points de couleur) --- */
/* On cible les petits ronds à l'intérieur des jours */
html:not(.dark) #calendarGrid div .rounded-full {
    /* On ajoute une petite bordure pour qu'ils ne se fondent pas dans le blanc */
    border: 1px solid rgba(0,0,0,0.1); 
}

/* Si les pastilles utilisent des classes de fond tailwind (bg-green-500, etc) */
/* On s'assure qu'elles restent vives */
html:not(.dark) #calendarGrid .bg-green-500 { background-color: #22c55e !important; }
html:not(.dark) #calendarGrid .bg-yellow-500 { background-color: #eab308 !important; }
html:not(.dark) #calendarGrid .bg-red-500 { background-color: #ef4444 !important; }
html:not(.dark) #calendarGrid .bg-purple-500 { background-color: #a855f7 !important; }

/* --- 3. LA BARRE DE PROGRESSION (Dans le panneau latéral) --- */
/* C'est ici qu'on force la visibilité de la barre invisible */

/* Le "Rail" (le fond de la barre, souvent bg-gray-700 ou bg-white/10 en JS) */
html:not(.dark) .planning-card div[class*="bg-gray-"],
html:not(.dark) .planning-card div[class*="bg-white/"],
html:not(.dark) .planning-card div[class*="bg-black/"] {
    background-color: #e2e8f0 !important; /* Gris clair solide */
}

/* La "Barre remplie" (le niveau d'avancement) */
html:not(.dark) .planning-card div[class*="bg-blue-"] {
    background-color: #3b82f6 !important; /* Bleu vif */
}

/* Le texte "0% complété" */
html:not(.dark) .planning-card div.text-xs,
html:not(.dark) .planning-card span {
    color: #475569 !important; /* Gris foncé */
}

/* --- CORRECTION ZONE LISTE & PROGRESSION (Mode Clair) --- */

/* 1. Le Conteneur global de la liste (pour qu'il ne soit plus transparent) */
html:not(.dark) #dayItemsList {
    background-color: #ffffff !important;   /* Fond blanc solide */
    border: 1px solid #e2e8f0 !important;   /* Bordure grise */
    border-radius: 1rem !important;         /* Arrondis */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Ombre douce */
    color: #334155 !important;              /* Texte général en gris foncé */
}

/* 2. La Barre de Progression (Le Rail de fond) */
/* On cible la barre grise qui sert de fond */
html:not(.dark) #dayItemsList div[class*="bg-gray-"] {
    background-color: #e2e8f0 !important; /* Gris clair au lieu de foncé */
}

/* 3. La Barre de Progression (Le Remplissage Bleu) */
/* On cible la partie qui avance */
html:not(.dark) #dayItemsList div[class*="bg-blue-"] {
    background-color: #3b82f6 !important; /* Bleu vif */
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6); /* Petit effet lumineux */
}


/* ================================================================= */
/* CORRECTION DES POINTS (DOTS) DU CALENDRIER EN MODE CLAIR */
/* ================================================================= */

/* 1. Les points VERTS (Fait) */
html:not(.dark) #calendarGrid .bg-green-500 {
    background-color: #16a34a !important; /* Vert foncé solide */
    box-shadow: none !important;           /* On enlève le flou lumineux */
    border: 1px solid rgba(0,0,0,0.2) !important; /* Petite bordure pour la netteté */
    opacity: 1 !important;
}

/* 2. Les points ROUGES (Raté / En retard) */
html:not(.dark) #calendarGrid .bg-red-500 {
    background-color: #dc2626 !important; /* Rouge vif solide */
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
}

/* 3. Les points BLEUS (À faire) */
html:not(.dark) #calendarGrid .bg-blue-500 {
    background-color: #2563eb !important; /* Bleu roi solide */
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
}

/* 4. Les points JAUNES (Événements) */
html:not(.dark) #calendarGrid .bg-yellow-500,
html:not(.dark) #calendarGrid .bg-yellow-400 {
    background-color: #d97706 !important; /* Amber-600 : Un jaune orangé bien visible sur blanc */
    box-shadow: none !important;           /* Enlève le flou lumineux illisible sur blanc */
    border: 1px solid rgba(0,0,0,0.2) !important; /* Ajoute une bordure fine pour la netteté */
    opacity: 1 !important;                 /* Force l'opacité à 100% */
}

/* ==========================================================================
   FIX PANNEAU ÉVÉNEMENTS (HEADER) - MODE CLAIR
   ========================================================================== */

/* 1. Le Bouton Principal "Agenda" */
html:not(.dark) #globalEventsContainer > button {
    background-color: #ffffff !important;   /* Fond Blanc */
    border: 1px solid #cbd5e1 !important;   /* Bordure Grise définie */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; /* Ombre douce */
}

/* Le texte "Voir détails" dans le bouton */
html:not(.dark) #globalEventsContainer > button #eventsBtnLabel {
    color: #1e293b !important; /* Noir/Gris foncé */
}

/* Le petit label "AGENDA" */
html:not(.dark) #globalEventsContainer > button .text-gray-400 {
    color: #64748b !important; /* Gris moyen lisible */
}

/* La flèche (Chevron) */
html:not(.dark) #eventsChevron {
    color: #94a3b8 !important;
}

/* Le Badge Rouge (Compteur) */
html:not(.dark) #eventsCounterBadge {
    border: 1px solid #ffffff !important; /* Contour blanc pour le détacher */
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

/* 2. Le Menu Déroulant (La liste) */
html:not(.dark) #eventsDropdownList {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
}

/* --- LES ÉLÉMENTS DE LA LISTE (Générés par JS) --- */

/* A. Événements d'AUJOURD'HUI (Jaune) */
html:not(.dark) #todayEventsAlertBox > div {
    background-color: #fefce8 !important; /* Fond Jaune très pâle */
    border: 1px solid #fde047 !important; /* Bordure Jaune visible */
    box-shadow: 0 2px 4px rgba(234, 179, 8, 0.1) !important;
}

/* Le texte de l'événement (qui était text-white) */
html:not(.dark) #todayEventsAlertBox span.text-white {
    color: #854d0e !important; /* Texte Jaune Foncé / Marron */
}

/* Le petit label "AUJOURD'HUI" */
html:not(.dark) #todayEventsAlertBox span.text-yellow-500\/80 {
    color: #ca8a04 !important; /* Jaune foncé */
}

/* L'icône carrée à gauche */
html:not(.dark) #todayEventsAlertBox .bg-yellow-500\/20 {
    background-color: #fef08a !important; /* Fond icône plus soutenu */
    border: 1px solid #facc15 !important;
}
html:not(.dark) #todayEventsAlertBox i {
    color: #a16207 !important; /* Icône foncée */
}


/* B. Événements de DEMAIN (Orange) */
html:not(.dark) #tomorrowEventsAlertBox > div {
    background-color: #fff7ed !important; /* Fond Orange très pâle */
    border: 1px solid #fdba74 !important; /* Bordure Orange visible */
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.1) !important;
}

/* Le texte de l'événement */
html:not(.dark) #tomorrowEventsAlertBox span.text-white {
    color: #9a3412 !important; /* Texte Orange Foncé / Rouille */
}

/* Le petit label "DEMAIN" */
html:not(.dark) #tomorrowEventsAlertBox span.text-orange-500\/80 {
    color: #ea580c !important; /* Orange foncé */
}

/* L'icône carrée à gauche */
html:not(.dark) #tomorrowEventsAlertBox .bg-orange-500\/20 {
    background-color: #fed7aa !important;
    border: 1px solid #fb923c !important;
}
html:not(.dark) #tomorrowEventsAlertBox i {
    color: #c2410c !important;
}

html:not(.dark) .planning-card button[onclick*="triggerCustomEvent"] {
    background-color: #3b82f6 !important; /* Bleu Vif (Blue-500) */
    background-image: none !important;    /* Supprime les dégradés éventuels */
    border: 1px solid #2563eb !important; /* Bordure Bleu foncé pour la définition */
    color: #ffffff !important;            /* Icône Blanche */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4) !important; /* Ombre portée bleue (Glow) */
    opacity: 1 !important;                /* Force la visibilité */
}

html:not(.dark) .planning-card button[onclick*="triggerCustomEvent"]:hover {
    background-color: #1d4ed8 !important; /* Bleu Profond (Blue-700) */
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.6) !important;
}

html:not(.dark) .planning-card button[onclick*="triggerCustomEvent"] i {
    color: #ffffff !important;
}

/* ==========================================================================
   FIX ÉCRANS TIMER (PAUSE & FOCUS) - MODE CLAIR
   ========================================================================== */

/* Fond blanc opaque pour les overlays */
html:not(.dark) #breakOverlay,
html:not(.dark) #backToWorkOverlay {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

/* --- ÉCRAN PAUSE (Vert) --- */
html:not(.dark) #breakOverlay h2 {
    color: #16a34a !important; /* Vert foncé */
    text-shadow: none !important;
}
html:not(.dark) #breakOverlay p {
    color: #475569 !important; /* Gris texte */
}
html:not(.dark) #breakOverlay .rounded-full {
    background-color: #f0fdf4 !important; /* Fond cercle vert très pâle */
    border-color: #86efac !important;
}
html:not(.dark) #breakOverlay i {
    color: #16a34a !important; /* Icône verte */
}
html:not(.dark) #breakOverlay button {
    background-color: #16a34a !important; /* Bouton Vert */
    color: white !important;
    box-shadow: 0 10px 20px -5px rgba(22, 163, 74, 0.3) !important;
}

/* --- ÉCRAN FOCUS / AU TRAVAIL (Bleu) --- */
html:not(.dark) #backToWorkOverlay h2 {
    color: #1e3a8a !important; /* Bleu foncé */
    text-shadow: none !important;
}
html:not(.dark) #backToWorkOverlay p {
    color: #475569 !important; /* Gris texte */
}
html:not(.dark) #backToWorkOverlay .rounded-full {
    background-color: #eff6ff !important; /* Fond cercle bleu très pâle */
    border-color: #93c5fd !important;
}
html:not(.dark) #backToWorkOverlay i {
    color: #2563eb !important; /* Icône bleue */
}
html:not(.dark) #backToWorkOverlay button {
    background-color: #2563eb !important; /* Bouton Bleu */
    color: white !important;
    box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.3) !important;
}

/* ==========================================================================
   FIX ÉCRAN VICTOIRE FINALE - MODE CLAIR
   ========================================================================== */

/* Fond blanc opaque pour cacher l'interface derrière */
html:not(.dark) #victoryOverlay {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

/* Le titre "MISSION ACCOMPLIE" en dégradé violet foncé */
html:not(.dark) #victoryOverlay h2 {
    background: linear-gradient(to right, #6b21a8, #d946ef) !important; /* Purple-800 vers Fuchsia-500 */
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

/* Le texte de description */
html:not(.dark) #victoryOverlay p {
    color: #4c1d95 !important; /* Violet très foncé */
}
html:not(.dark) #victoryOverlay p span.text-white {
    color: #9333ea !important; /* Un violet plus vif pour le gras */
}

/* Le cercle central */
html:not(.dark) #victoryOverlay .rounded-full.bg-gradient-to-b {
    background: #f3e8ff !important; /* Fond violet très pâle */
    border-color: #d8b4fe !important;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.2) !important;
}

/* Le Dragon */
html:not(.dark) #victoryOverlay i.fa-dragon {
    color: #7e22ce !important; /* Violet soutenu */
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.5)) !important;
}

/* Le Bouton */
html:not(.dark) #victoryOverlay button {
    background-color: #7e22ce !important; /* Bouton Violet */
    color: white !important;
    box-shadow: 0 10px 25px -5px rgba(126, 34, 206, 0.4) !important;
}
html:not(.dark) #victoryOverlay button:hover {
    background-color: #6b21a8 !important;
}