/* =============================================
   Coodonateur PDDRCS — Dark Theme
   Activated via html.dark class
   Default: light. Dark toggled by user.
   ============================================= */

/* --------------------------------------------------
   Header logo swap (dark / light)
   -------------------------------------------------- */
.logo-for-dark  { display: none; }
.logo-for-light { display: block; }
html.dark .logo-for-dark  { display: block; }
html.dark .logo-for-light { display: none; }

/* --------------------------------------------------
   Anti-flash: instant apply before paint
   -------------------------------------------------- */
html.dark {
    color-scheme: dark;
}

/* --------------------------------------------------
   Body & Global
   -------------------------------------------------- */
html.dark body {
    background-color: #04091A;
    color: #CBD5E1;
}

/* --------------------------------------------------
   Background blobs — more visible on dark
   -------------------------------------------------- */
html.dark .bg-blob { opacity: 0.22; }

/* --------------------------------------------------
   Section backgrounds
   -------------------------------------------------- */
html.dark .bg-white                              { background-color: #071428 !important; }
html.dark .bg-slate-50                           { background-color: #04091A !important; }
html.dark section.bg-white                       { background-color: #071428 !important; }
html.dark section.bg-slate-50                    { background-color: #04091A !important; }
html.dark body                                   { background-color: #04091A; }

/* Specific hero sections that use bg-white with border */
html.dark .border-b.border-slate-100,
html.dark .border-b.border-slate-200            { border-color: rgba(255,255,255,0.06) !important; }
html.dark .border-t.border-slate-100,
html.dark .border-t.border-slate-200            { border-color: rgba(255,255,255,0.06) !important; }
html.dark .border-slate-100                     { border-color: rgba(255,255,255,0.07) !important; }
html.dark .border-slate-200                     { border-color: rgba(255,255,255,0.09) !important; }

/* --------------------------------------------------
   Glass utilities (nav, cards)
   -------------------------------------------------- */
html.dark .glass {
    background: rgba(4, 9, 26, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark .glass-card {
    background: rgba(13, 32, 64, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}
html.dark .glass-card:hover {
    background: rgba(16, 38, 80, 0.9) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(91, 155, 213, 0.25) !important;
}

/* Header nav on scroll */
html.dark header nav {
    background: rgba(4, 9, 26, 0.88) !important;
}

/* --------------------------------------------------
   Text colors
   -------------------------------------------------- */
html.dark .text-slate-800  { color: #E2E8F0 !important; }
html.dark .text-slate-700  { color: #CBD5E1 !important; }
html.dark .text-slate-600  { color: #94A3B8 !important; }
html.dark .text-slate-500  { color: #7B90A8 !important; }
html.dark .text-slate-400  { color: #5E748A !important; }

/* brand-navy text becomes light on dark bg */
html.dark .text-brand-navy { color: #E2E8F0 !important; }

/* Gradient text overrides — navy gradient invisible on dark */
html.dark .text-gradient-navy {
    background: linear-gradient(to right, #93C5FD, #E2E8F0) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --------------------------------------------------
   Cards & Articles
   -------------------------------------------------- */
html.dark .bg-white.rounded-2xl,
html.dark .bg-white.rounded-xl,
html.dark article.bg-white {
    background-color: #0D2040 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

html.dark .bg-slate-50.rounded-2xl,
html.dark .bg-slate-50.rounded-xl {
    background-color: #071428 !important;
}

/* Gallery overlay */
html.dark .bg-white\/90 {
    background: rgba(13, 32, 64, 0.9) !important;
}

/* Badge / pill bg-white in dark */
html.dark .bg-white.border.border-slate-200,
html.dark .bg-white.border.shadow-sm {
    background-color: #0D2040 !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* bg-slate-100 pill tags */
html.dark .bg-slate-100 { background-color: rgba(255, 255, 255, 0.06) !important; }
html.dark .bg-slate-50  { background-color: #04091A !important; }

/* --------------------------------------------------
   Mobile menu
   -------------------------------------------------- */
html.dark #mobile-menu {
    background: rgba(4, 9, 26, 0.97) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}html.dark .mobile-link                    { color: #CBD5E1 !important; }
html.dark .mobile-link:hover              { color: #5B9BD5 !important; }
html.dark .mobile-link.text-brand-blue    { color: #5B9BD5 !important; }

/* Separator in mobile menu */
html.dark .h-px.bg-slate-200 { background-color: rgba(255,255,255,0.08) !important; }

/* --------------------------------------------------
   Nav links (desktop)
   -------------------------------------------------- */
html.dark header nav ul a { color: #94A3B8; }
html.dark header nav ul a:hover { color: #5B9BD5; }

/* --------------------------------------------------
   Buttons & CTA on white backgrounds
   -------------------------------------------------- */
html.dark .border-slate-200.rounded-full,
html.dark .border-slate-200.rounded-xl {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Outline buttons (brand-navy border on white bg) */
html.dark .border-2.border-brand-navy.text-brand-navy {
    border-color: #5B9BD5 !important;
    color: #5B9BD5 !important;
}
html.dark .border-2.border-brand-navy.text-brand-navy:hover {
    background-color: #5B9BD5 !important;
    color: #ffffff !important;
}

/* --------------------------------------------------
   Form inputs
   -------------------------------------------------- */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #071428 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #E2E8F0 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #475569 !important; }
html.dark select option           { background-color: #071428; color: #CBD5E1; }

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #5B9BD5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.15) !important;
}

/* --------------------------------------------------
   Shadows — deeper on dark
   -------------------------------------------------- */
html.dark .shadow-sm  { box-shadow: 0 2px 8px  rgba(0,0,0,0.4) !important; }
html.dark .shadow-md  { box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; }
html.dark .shadow-lg  { box-shadow: 0 8px 30px rgba(0,0,0,0.55) !important; }
html.dark .shadow-xl  { box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important; }
html.dark .shadow-2xl { box-shadow: 0 20px 60px rgba(0,0,0,0.65) !important; }

/* --------------------------------------------------
   Timeline
   -------------------------------------------------- */
html.dark .timeline-line::before { background: rgba(255,255,255,0.07) !important; }

/* --------------------------------------------------
   CV page specific
   -------------------------------------------------- */
html.dark .cv-exp-card {
    background: rgba(13, 32, 64, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}
html.dark .cv-exp-card:hover {
    background: rgba(16, 38, 80, 0.9) !important;
    border-color: rgba(91, 155, 213, 0.2) !important;
}
html.dark .cv-org-badge {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94A3B8 !important;
}

/* --------------------------------------------------
   Biographie page specific
   -------------------------------------------------- */
/* Country tag cards */
html.dark .glass-card .text-slate-700,
html.dark .glass-card p  { color: #94A3B8 !important; }

/* --------------------------------------------------
   Nouvelles — filter buttons
   -------------------------------------------------- */
html.dark .filter-btn:not(.bg-brand-navy),
html.dark .sidebar-cat:not(.bg-brand-navy) {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94A3B8 !important;
}
html.dark .filter-btn:hover,
html.dark .sidebar-cat:hover {
    border-color: #5B9BD5 !important;
    color: #5B9BD5 !important;
}

/* Sidebar cards on nouvelles */
html.dark aside .bg-white {
    background-color: #0D2040 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* --------------------------------------------------
   Section P-DDRCS link card
   -------------------------------------------------- */
html.dark .bg-white.border.border-brand-blue\/20 {
    background-color: #0D2040 !important;
}

/* --------------------------------------------------
   Photo gallery overlay badges
   -------------------------------------------------- */
html.dark .gallery-item .bg-white\/90 {
    background: rgba(4, 9, 26, 0.9) !important;
    color: #E2E8F0 !important;
}
html.dark .gallery-item .text-brand-navy { color: #E2E8F0 !important; }

/* --------------------------------------------------
   Citation section
   -------------------------------------------------- */
html.dark .border-brand-blue\/20 { border-color: rgba(91,155,213,0.25) !important; }

/* --------------------------------------------------
   Vidéothèque cards (coming soon)
   -------------------------------------------------- */
html.dark .bg-white.rounded-2xl.border.border-slate-200.shadow-sm {
    background-color: #0D2040 !important;
    border-color: rgba(255,255,255,0.07) !important;
}

/* --------------------------------------------------
   Dark Theme Toggle Button
   -------------------------------------------------- */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
    cursor: pointer;
    border: 1.5px solid rgba(100, 116, 139, 0.25);
    background: rgba(100, 116, 139, 0.08);
    color: #64748B;
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    background: rgba(100, 116, 139, 0.18);
    color: #334155;
}
html.dark .theme-toggle-btn {
    background: rgba(91, 155, 213, 0.12);
    border-color: rgba(91, 155, 213, 0.3);
    color: #F2C300;
}
html.dark .theme-toggle-btn:hover {
    background: rgba(91, 155, 213, 0.22);
    color: #FFD700;
}

/* Sun icon hidden in light, visible in dark */
.icon-sun  { display: none; }
.icon-moon { display: block; }
html.dark .icon-sun  { display: block; }
html.dark .icon-moon { display: none; }

/* --------------------------------------------------
   Misc — prevent white flashes on dark-colored elements
   -------------------------------------------------- */
/* Keep footer, CTA navy sections as-is in dark mode */
html.dark footer.bg-brand-navy                          { background-color: #030813 !important; }
html.dark footer .border-white\/10                      { border-color: rgba(255,255,255,0.07) !important; }

/* Contact section dark CTA already dark — fine */
/* Lightbox already dark — fine */

/* Smooth transition on theme switch */
html body,
html .glass,
html .glass-card,
html .bg-white,
html .bg-slate-50,
html input,
html textarea,
html select {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.2s ease,
        box-shadow 0.3s ease;
}