/**
 * Dark Mode Styles
 * Système avec 3 modes : auto, clair, sombre
 */

/* ============================================
   Bouton Toggle Dark Mode (Jour/Nuit)
   ============================================ */

#dark-mode-toggler {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
    cursor: pointer !important;
    background: var(--color2, #f5f5f5) !important;
    border: none !important;
    padding: 12px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    aspect-ratio: 1 / 1 !important;
}

#dark-mode-toggler::before,
#dark-mode-toggler::after {
    display: none !important;
}

#dark-mode-toggler .theme-icon {
    width: 26px;
    height: 26px;
    display: block;
    transition: transform 0.3s ease;
    color: var(--color1, #1a1a1a);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Hover effect */
#dark-mode-toggler:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

#dark-mode-toggler:active .theme-icon {
    transform: rotate(20deg);
}

.is-dark-theme #dark-mode-toggler .theme-icon {
    color: var(--color1, #1a1a1a);
}

/* ============================================
   Variables CSS pour le thème clair (défaut)
   ============================================ */

:root,
.is-light-theme {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #000000;
    --text-secondary: #666666;
    --border-color: #e0e0e0;
    --link-color: var(--color1, #1a1a1a);
    --link-hover: var(--color2, #333333);
}

/* ============================================
   Variables CSS pour le thème sombre
   INVERSION : color1 ↔ color2
   ============================================ */

.is-dark-theme {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border-color: #444444;
    --link-color: var(--color2, #cccccc);
    --link-hover: var(--color1, #ffffff);
}

/* ============================================
   Application du thème sombre
   ============================================ */

.is-dark-theme {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.is-dark-theme body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.is-dark-theme .site-header,
.is-dark-theme .site-footer,
.is-dark-theme #site-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
.is-dark-theme .site-header {
    background-color: transparent;
}

.is-dark-theme a {
    color: var(--link-color);
}

.is-dark-theme a:hover {
    color: var(--link-hover);
}

/* Cards et éléments de contenu */
.is-dark-theme .emag-post-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.is-dark-theme .card-content {
    background-color: var(--bg-secondary);
}

.is-dark-theme .card-title a {
    color: var(--text-primary);
}

.is-dark-theme .card-meta,
.is-dark-theme .card-meta-top {
    color: var(--text-secondary);
}

/* Formulaires */
.is-dark-theme input[type="text"],
.is-dark-theme input[type="search"],
.is-dark-theme input[type="email"],
.is-dark-theme select,
.is-dark-theme textarea {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.is-dark-theme input::placeholder {
    color: var(--text-secondary);
}

/* Boutons */
.is-dark-theme button,
.is-dark-theme .button,
.is-dark-theme input[type="submit"] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.is-dark-theme button:hover,
.is-dark-theme .button:hover {
    background-color: var(--border-color);
}

/* Navigation */
.is-dark-theme .primary-menu-wrapper,
.is-dark-theme .primary-menu {
    background-color: var(--bg-primary);
}

.is-dark-theme .primary-menu a {
    color: var(--text-primary);
}

/* Archive header */
.is-dark-theme .archive-header {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

.is-dark-theme .archive-title {
    color: var(--text-primary);
}

/* Pagination */
.is-dark-theme .emag-pagination a,
.is-dark-theme .emag-pagination button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Tables */
.is-dark-theme table {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.is-dark-theme th,
.is-dark-theme td {
    border-color: var(--border-color);
}

/* Modals */
.is-dark-theme .modal-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Images - conserver leur luminosité */
.is-dark-theme img {
    opacity: 0.9;
}

.is-dark-theme img:hover {
    opacity: 1;
}

/* Preloader */
.is-dark-theme .preloader {
    background-color: var(--bg-primary);
}

/* Progress bar */
.is-dark-theme .progress-container {
    background-color: var(--bg-secondary);
}

.is-dark-theme .progress-bar {
    background-color: var(--link-color);
}

/* Topbar */
.is-dark-theme .topbar {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* ============================================
   Transitions fluides
   ============================================ */

html,
body,
.site-header,
.site-footer,
.emag-post-card,
a {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}