/* Responsive Design */

/* Petits appareils (smartphones, 600px et moins) */
@media (max-width: 600px) {
    h1 { font-size: 2.5em; }
    h2 { font-size: 2em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.2em; }

    section {
        padding: 60px 0;
    }

    .container {
        padding: 0 15px;
    }

    .grid-cols-2 {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    /* Ajustements spécifiques pour la navigation mobile */
    .navbar .nav-links {
        flex-direction: column;
        position: absolute;
        top: 60px; /* Hauteur de la navbar */
        left: 0;
        width: 100%;
        background-color: var(--background-color);
        border-top: 1px solid var(--border-color);
        display: none; /* Caché par défaut */
        z-index: 1000;
    }

    .navbar .nav-links.active {
        display: flex; /* Affiché quand actif */
    }

    .navbar .nav-links li {
        margin: 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--border-color);
    }

    .navbar .nav-links li a {
        display: block;
        padding: 15px;
    }

    .navbar .menu-toggle {
        display: block; /* Affiché sur mobile */
    }

    .hero-content h1 {
        font-size: 2.8em;
    }
}

/* Appareils de taille moyenne (tablettes, 601px à 900px) */
@media (min-width: 601px) and (max-width: 900px) {
    h1 { font-size: 3em; }
    h2 { font-size: 2.2em; }

    .container {
        padding: 0 20px;
    }

    .grid-cols-2 {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajustement pour 2 colonnes ou plus */
    }

    .navbar .menu-toggle {
        display: none; /* Caché sur tablette */
    }

    .navbar .nav-links {
        display: flex; /* Toujours affiché sur tablette */
    }
}

/* Grands appareils (ordinateurs de bureau, 901px et plus) */
@media (min-width: 901px) {
    h1 { font-size: 3.8em; }
    h2 { font-size: 2.8em; }

    .container {
        padding: 0 20px;
    }

    .navbar .menu-toggle {
        display: none;
    }

    .navbar .nav-links {
        display: flex;
    }
}

/* Ajustements pour le mode sombre sur les éléments spécifiques */
body.dark-mode .navbar {
    background-color: var(--dark-background-color);
    border-bottom-color: var(--border-color);
}

body.dark-mode .navbar .nav-links {
    background-color: var(--dark-background-color);
    border-top-color: var(--border-color);
}

body.dark-mode .navbar .nav-links li {
    border-bottom-color: var(--border-color);
}

body.dark-mode .navbar .nav-links li a {
    color: var(--light-text-color);
}

body.dark-mode .navbar .nav-links li a:hover {
    color: var(--secondary-color);
}

body.dark-mode .menu-toggle span {
    background-color: var(--light-text-color);
}