/* ==================== Petits écrans (max-width: 768px) ==================== */
@media (max-width: 768px) {
    .feature-item img,
    .hero-content img {
        width: 100%; /* S'assure que l'image prend toute la largeur de son conteneur */
        height: auto;
    }

    .container {
        padding: 0 10px;
    }

    /* Masquer le menu par défaut */
    .navbar {
        display: none;
        position: absolute; /* Positionner sous le header */
        top: 100%; /* Placer le menu juste en dessous du header */
        left: 0;
        right: 0;
        flex-direction: column; /* Les liens en colonne */
        gap: 10px;
        background-color: var(--background-light); /* Fond visible */
        padding: 10px 0;
        z-index: 999; /* Assurer que le menu est au-dessus du contenu */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
    }

    /* Afficher le menu lorsque la classe active est ajoutée */
    .navbar.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }

    .navbar a {
        display: block;
        width: 100%;
        padding: 12px 20px;
        color: var(--secondary-color);
        text-decoration: none;
        text-align: center;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    .navbar a:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    /* Section Hero */
    .hero {
        padding: 40px 15px;
        text-align: center;
    }

    .hero h2 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-content {
        max-width: 90%;
        margin: 0 auto;
    }

    /* Fonctionnalités */
    .features {
        flex-direction: column;
        gap: 15px;
    }

    .feature-item {
        flex: 1 1 100%;
    }
}

/* ==================== Tablettes et écrans moyens (max-width: 1024px) ==================== */
@media (max-width: 1024px) {
    .hero h2 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .hero-content {
        max-width: 80%;
        margin: 0 auto;
    }

    /* Fonctionnalités */
    .features {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .feature-item {
        flex: 1 1 calc(50% - 20px);
    }
}

/* ==================== Grands écrans (min-width: 768px) ==================== */
@media (min-width: 768px) {
    .menu-toggle {
        display: none; /* Masque le bouton burger sur les écrans plus grands */
    }

    .navbar {
        display: flex; /* Affiche le menu normal en ligne */
        flex-direction: row;
        gap: 15px;
    }

    .hero-content img {
        max-width: 100%; /* Evite que l'image dépasse du conteneur */
        height: auto;
    }
}

/* ===================== PAGE NOTRE BOT ========================= */
img,
.feature-item img,
.hero-content img {
    width: 100%; /* Ajuste l'image à la largeur de son conteneur */
    height: auto; /* Garde les proportions */
}

.feature-item img {
    border-radius: 10px; /* Optionnel, pour arrondir les coins des images */
}

/* ===================== AMÉLIORATION POUR LES IMAGES EN PETITS TÉLÉPHONES ===================== */
@media (max-width: 480px) {
    .feature-item img,
    .hero-content img {
        width: 100%;
        height: auto;
    }
}