@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

body { 
    font-family: 'Outfit', sans-serif; 
    background-color: #f8fafc; 
    color: #0f172a; 
}

.tab-content { 
    display: none; 
}

.tab-content.active { 
    display: block; 
}

/* Éditeur Fiche de Cours RichText */
#richEditor { 
    min-height: 500px; 
    outline: none; 
}

#richEditor h1 { font-size: 1.6rem; font-weight: 800; margin-top: 1rem; margin-bottom: 0.5rem; color: #0f172a; }
#richEditor h2 { font-size: 1.3rem; font-weight: 700; margin-top: 0.85rem; margin-bottom: 0.4rem; color: #1e293b; }
#richEditor h3 { font-size: 1.1rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.3rem; color: #334155; }
#richEditor p { margin-bottom: 0.5rem; line-height: 1.6; }
#richEditor ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 0.5rem; }
#richEditor ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 0.5rem; }

/* Images dans l'éditeur textuel & habillage */
#richEditor img { 
    max-width: 100%; 
    border-radius: 12px; 
    margin: 0.5rem; 
    border: 1px solid #e2e8f0; 
    cursor: pointer;
    transition: border-color 0.2s;
    resize: both;
    overflow: hidden;
    display: inline-block;
}

#richEditor img:hover { border-color: var(--primary, #6366f1); }
#richEditor img.img-left { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
#richEditor img.img-right { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
#richEditor img.img-center { display: block; margin: 1rem auto; float: none; }

#richEditor blockquote { border-left: 4px solid var(--primary, #6366f1); padding-left: 1rem; color: #64748b; font-style: italic; margin: 0.8rem 0; }
#richEditor table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
#richEditor th, #richEditor td { border: 1px solid #cbd5e1; padding: 8px 12px; text-align: left; }
#richEditor th { background-color: #f1f5f9; font-weight: 700; }
mark { background-color: #fef08a; padding: 0.1rem 0.3rem; border-radius: 4px; }

.sticky-toolbar { 
    position: sticky; 
    top: 1rem; 
    z-index: 30; 
}

/* Studio Moodboard & Canvas */
#moodboardCanvas {
    min-height: 600px;
    background-size: 20px 20px;
    background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
}

.mb-item {
    position: absolute;
    cursor: move;
    user-select: none;
}

.mb-item.selected {
    outline: 2px solid var(--primary, #6366f1);
    outline-offset: 2px;
}

/* MODE POMODORO IMMERSIF & ÉTOILES FILANTES */
#pomodoroImmersiveOverlay {
    transition: all 0.3s ease-in-out;
}

.space-bg {
    background: radial-gradient(ellipse at bottom, #0f172a 0%, #020617 100%);
    overflow: hidden;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: animateStar 7s linear infinite;
}

@keyframes animateStar {
    0% { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 0.8; }
    100% { transform: translateY(80vh) translateX(-120px) scale(0.2); opacity: 0; }
}

#pipCanvas {
    display: none;
}

#userAvatarContainer img, #modalAvatarPreview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


/* ==========================================
   1. SYSTÈME DE THÈMES UNIVERSEL (6 COULEURS)
   ================================---------- */

body { 
    --primary: #6366f1; 
    --primary-light: #e0e7ff; 
    --primary-hover: #4f46e5; 
}
body[data-theme="emerald"] { 
    --primary: #10b981; 
    --primary-light: #d1fae5; 
    --primary-hover: #059669; 
}
body[data-theme="purple"] { 
    --primary: #a855f7; 
    --primary-light: #f3e8ff; 
    --primary-hover: #9333ea; 
}
body[data-theme="rose"] { 
    --primary: #f43f5e; 
    --primary-light: #ffe4e6; 
    --primary-hover: #e11d48; 
}
body[data-theme="amber"] { 
    --primary: #f59e0b; 
    --primary-light: #fef3c7; 
    --primary-hover: #d97706; 
}
body[data-theme="cyan"] { 
    --primary: #06b6d4; 
    --primary-light: #cffafe; 
    --primary-hover: #0891b2; 
}

button.bg-brand-600,
button.bg-indigo-600,
.bg-brand-600,
.bg-indigo-600,
.bg-indigo-500,
[class*="bg-indigo-"],
#startTimer {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

button.bg-brand-600:hover,
button.bg-indigo-600:hover,
.hover\:bg-brand-700:hover, 
.hover\:bg-indigo-700:hover, 
[class*="hover\:bg-indigo-"]:hover,
#startTimer:hover {
    background-color: var(--primary-hover) !important;
}

.text-brand-600, 
.text-indigo-600, 
.text-indigo-500, 
[class*="text-indigo-"] {
    color: var(--primary) !important;
}

.bg-brand-50, 
.bg-indigo-50, 
[class*="bg-indigo-50"] {
    background-color: var(--primary-light) !important;
}

.border-brand-200, 
.border-indigo-100, 
.border-indigo-200, 
[class*="border-indigo-"] {
    border-color: var(--primary) !important;
}

button.bg-emerald-600,
.bg-emerald-600 {
    background-color: #059669 !important;
    color: #ffffff !important;
}
button.bg-emerald-600:hover {
    background-color: #047857 !important;
}

.btn-secondary,
#resetTimer {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}
.btn-secondary:hover,
#resetTimer:hover {
    background-color: #e2e8f0 !important;
}


/* ==========================================
   2. MODE SOMBRE PROFOND ET COLORÉ SELON LE THÈME
   ================================---------- */
body.dark-deep {
    background-color: #070c0a !important;
    color: #f1f5f9 !important;
}

body.dark-deep[data-theme="emerald"] { background-color: #04110b !important; }
body.dark-deep[data-theme="purple"] { background-color: #0b0711 !important; }
body.dark-deep[data-theme="rose"] { background-color: #110709 !important; }
body.dark-deep[data-theme="amber"] { background-color: #110c07 !important; }
body.dark-deep[data-theme="cyan"] { background-color: #060e11 !important; }

body.dark-deep aside,
body.dark-deep .bg-white,
body.dark-deep div[id$="Modal"] .bg-white {
    background-color: #111d18 !important;
    border-color: #1f332a !important;
    color: #f8fafc !important;
}

body.dark-deep[data-theme="purple"] .bg-white, body.dark-deep[data-theme="purple"] aside { background-color: #151021 !important; border-color: #271e3d !important; }
body.dark-deep[data-theme="rose"] .bg-white, body.dark-deep[data-theme="rose"] aside { background-color: #201014 !important; border-color: #381c23 !important; }
body.dark-deep[data-theme="amber"] .bg-white, body.dark-deep[data-theme="amber"] aside { background-color: #20170e !important; border-color: #38281a !important; }
body.dark-deep[data-theme="cyan"] .bg-white, body.dark-deep[data-theme="cyan"] aside { background-color: #0e1b20 !important; border-color: #19313a !important; }

body.dark-deep input, 
body.dark-deep select, 
body.dark-deep textarea {
    background-color: #182821 !important;
    border-color: #273e35 !important;
    color: #f8fafc !important;
}

body.dark-deep .text-slate-800, 
body.dark-deep .text-slate-900, 
body.dark-deep .text-slate-700,
body.dark-deep h1, body.dark-deep h2, body.dark-deep h3, body.dark-deep h4 {
    color: #f8fafc !important;
}

body.dark-deep .text-slate-400, 
body.dark-deep .text-slate-500 {
    color: #94a3b8 !important;
}

body.dark-deep .bg-slate-50,
body.dark-deep .bg-slate-100 {
    background-color: #182821 !important;
    border-color: #273e35 !important;
    color: #f1f5f9 !important;
}

body.dark-deep .btn-secondary,
body.dark-deep #resetTimer {
    background-color: #1f332a !important;
    color: #cbd5e1 !important;
}
body.dark-deep .btn-secondary:hover,
body.dark-deep #resetTimer:hover {
    background-color: #273e35 !important;
}

/* Fond Nuit Étoilée (Session Travail) */
.space-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
}

/* Fond Lever de Soleil (Session Pause) */
.sunrise-bg {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fed7aa 100%);
    color: #1e293b !important;
}
.sunrise-bg h2, .sunrise-bg div {
    color: #1e293b !important;
}