/* ==========================================================================
   THEME-CLAIR.CSS — Mode clair (noir sur blanc) + bouton de bascule
   À charger APRÈS la feuille de style de la page.
   Ne modifie rien en mode sombre : toutes les règles de couleur
   ne s'appliquent que si <html data-theme="light">.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BOUTON SOLEIL / LUNE (visible dans les deux modes)
   -------------------------------------------------------------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.4s ease;
}
.theme-toggle:hover { opacity: 1; border-color: currentColor; }
.theme-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; opacity: 1; }
.theme-toggle:active { transform: rotate(-30deg); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }

/* Icône affichée = mode vers lequel on bascule */
.theme-toggle .icone-soleil { display: block; }
.theme-toggle .icone-lune   { display: none; }
html[data-theme="light"] .theme-toggle .icone-soleil { display: none; }
html[data-theme="light"] .theme-toggle .icone-lune   { display: block; }

/* Dans la barre de navigation : aligné avec les liens */
.nav-links .theme-toggle { align-self: center; }

/* Page sans barre de navigation : bouton flottant en haut à droite */
.theme-toggle.theme-toggle--flottant {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1002;
}

/* Transition douce uniquement pendant la bascule (pas au chargement) */
html.theme-transition,
html.theme-transition body,
html.theme-transition .main-navbar,
html.theme-transition .slider-section,
html.theme-transition a,
html.theme-transition button,
html.theme-transition input,
html.theme-transition select,
html.theme-transition textarea {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
}

/* --------------------------------------------------------------------------
   2. MODE CLAIR — BASE
   -------------------------------------------------------------------------- */
html[data-theme="light"],
html[data-theme="light"] body {
    background-color: #ffffff;
    color: #0d0d0d;
}

/* --------------------------------------------------------------------------
   3. NAVIGATION (toutes les pages)
   -------------------------------------------------------------------------- */
html[data-theme="light"] .main-navbar {
    background-color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .nav-logo,
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .theme-toggle {
    color: #0d0d0d;
}

html[data-theme="light"] .theme-toggle { border-color: rgba(0, 0, 0, 0.2); }

/* Logo blanc → noir (supprimer cette règle si vous fournissez un logo sombre) */
html[data-theme="light"] .nav-logo img { filter: invert(1); }

html[data-theme="light"] .nav-links a.active::after { background-color: #0d0d0d; }

/* Burger */
html[data-theme="light"] .nav-toggle-label span,
html[data-theme="light"] .nav-toggle-label span::before,
html[data-theme="light"] .nav-toggle-label span::after {
    background: #0d0d0d;
}
html[data-theme="light"] .nav-toggle:checked ~ .nav-toggle-label span { background: transparent; }

/* Menu mobile plein écran */
@media (max-width: 820px) {
    html[data-theme="light"] .nav-links { background-color: rgba(255, 255, 255, 0.96); }
}

/* --------------------------------------------------------------------------
   4. ACCUEIL (index.css)
   -------------------------------------------------------------------------- */
html[data-theme="light"] .hero-content h1 { color: #0d0d0d; }
html[data-theme="light"] .divider { background-color: #0d0d0d; }

html[data-theme="light"] .cta-button {
    border-color: #0d0d0d;
    color: #0d0d0d;
}
html[data-theme="light"] .cta-button:hover {
    background-color: #0d0d0d;
    color: #ffffff;
}

html[data-theme="light"] .slider-section {
    background-color: #ffffff;
    border-top-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .logo-track span { color: #0d0d0d; }
html[data-theme="light"] .logo-slider::before { background: linear-gradient(to right, #ffffff, transparent); }
html[data-theme="light"] .logo-slider::after  { background: linear-gradient(to left,  #ffffff, transparent); }

/* --------------------------------------------------------------------------
   5. PORTFOLIO (portfolio.css)
   -------------------------------------------------------------------------- */
html[data-theme="light"] .image-flexible { background-color: #f0f0f0; }

/* --------------------------------------------------------------------------
   6. PAGES PROJET (projet.css)
   -------------------------------------------------------------------------- */
html[data-theme="light"] .media-wrapper { background-color: #f0f0f0; }
html[data-theme="light"] .portfolio-item:hover .media-wrapper { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }

html[data-theme="light"] .back-button {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: #0d0d0d;
}
html[data-theme="light"] .back-button:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   7. CONTACT (projet.css)
   -------------------------------------------------------------------------- */
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea {
    color: #0d0d0d;
    border-bottom-color: rgba(0, 0, 0, 0.2);
}
html[data-theme="light"] .form-group input:hover,
html[data-theme="light"] .form-group select:hover,
html[data-theme="light"] .form-group textarea:hover { border-bottom-color: rgba(0, 0, 0, 0.5); }
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus { border-bottom-color: #0d0d0d; }
html[data-theme="light"] .form-group select option { background: #ffffff; color: #0d0d0d; }

html[data-theme="light"] .submit-btn {
    border-color: #0d0d0d;
    color: #0d0d0d;
}
html[data-theme="light"] .submit-btn:hover,
html[data-theme="light"] .submit-btn:focus-visible {
    background-color: #0d0d0d;
    color: #ffffff;
}

html[data-theme="light"] .notification {
    background: rgba(0, 0, 0, 0.04);
    border-left-color: #0d0d0d;
}
html[data-theme="light"] .notification.error { border-left-color: rgba(0, 0, 0, 0.4); }

/* --------------------------------------------------------------------------
   8. Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle, html.theme-transition * { transition: none !important; }
}