/* Styles du mode sombre */
body.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --primary-color: #1e4f8a;
    --secondary-color: #0a2342;
    --container-bg: #1c1c1c;
    --border-color: #333;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --button-hover-bg: #0055aa;
    --button-hover-text: #ff4444;
    --hover-color-dark: #ff4444;
}

/* Styles du mode clair */
body:not(.dark-mode) {
    --bg-color: #f0f4f8;
    --text-color: #222;
    --primary-color: #0044cc;
    --secondary-color: #0055dd;
    --container-bg: #ffffff;
    --border-color: #ccc;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --button-hover-bg: #004080;
    --button-hover-text: #ffd700;
    --hover-color-dark: #cc0000;
}

/* Styles spécifiques au mode sombre */
body.dark-mode .menu-center ul li a:hover {
    color: #f44;
}

body.dark-mode a:hover,
body.dark-mode button:hover,
body.dark-mode .btn:hover {
    color: var(--hover-color-dark);
}

body.dark-mode .search-container form button:hover {
    background-color: #f44;
    color: #fff;
}

/* Styles du logo pour les modes sombre et clair */
body:not(.dark-mode) .menu-left .logo {
    border: 2px solid #fff0;
    background: linear-gradient(#ffffff, #cccccc) padding-box,
                linear-gradient(to right, #d3d3d3, #add8e6) border-box;
}

body.dark-mode .menu-left .logo {
    border: 2px solid #fff0;
    background: linear-gradient(#222, #333) padding-box,
                linear-gradient(to right, #555555, #333333) border-box;
}

/* Transition générale */
body {
    transition: background-color 0.3s, color 0.3s;
}

/* Styles spécifiques pour la page tutoriels en mode sombre */
body.dark-mode .blog-tutorials {
    background-color: var(--bg-color);
    color: var(--text-color);
}

body.dark-mode .tutorial-card {
    background-color: var(--container-bg);
    border-color: var(--border-color);
}

body.dark-mode .tutorial-header h2 a {
    color: var(--text-color);
}

body.dark-mode .tutorial-meta {
    color: #888;
}

body.dark-mode .tutorial-excerpt {
    color: var(--text-color);
}

body.dark-mode .read-more-btn {
    background-color: var(--primary-color);
    color: var(--text-color);
}

body.dark-mode .read-more-btn:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}

body.dark-mode .pagination a {
    background-color: var(--container-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .pagination a:hover {
    background-color: var(--primary-color);
    color: var(--text-color);
}

/* Styles pour la sidebar en mode sombre */
body.dark-mode .sidebar {
    background-color: var(--container-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .sidebar-section {
	background-color: var(--primary-color);
    color: var(--text-color);
}

body.dark-mode .sidebar h3 {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

body.dark-mode .sidebar ul li a {
    color: var(--text-color);
}

body.dark-mode .sidebar ul li a:hover {
    color: var(--button-hover-text);
}

body.dark-mode .sidebar .search-box input {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark-mode .sidebar .search-box button {
    background-color: var(--primary-color);
    color: var(--text-color);
}

body.dark-mode .sidebar .search-box button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}