/* Responsive Design */
@media (max-width: 768px) {
    .why-choose-content {
        flex-direction: column;
        align-items: center;
    }

    @media (max-width: 768px) {
        /* Ajuster le padding du header pour qu'il occupe bien l'espace en largeur */
        header {
            padding: 5px 4vw; /* Utilise des unités dynamiques pour s'adapter à la largeur de l'écran */
        }
    
        /* Ajuster la taille du logo pour gagner de l'espace si nécessaire */
        .logo-header {
            max-width: 12vw; /* Utilisation de vw pour une taille proportionnelle à la largeur de l'écran */
            height: auto;
        }
    
        /* Réduction des marges autour des éléments du header */
        .title {
            margin: 0 2vw; /* Réduire les marges pour que le logo soit centré */
        }
    
        .header-left {
            margin-right: 2vw; /* Ajustement de l'espace à droite */
        }
    
        .header-right {
            margin-left: 2vw; /* Ajustement de l'espace à gauche */
        }
    
        /* Ajustement de la taille et du padding des liens du header */
        nav ul li a {
            font-size: 4vw; /* Taille de police relative à la largeur de l'écran */
            padding: 8px 3vw; /* Ajuste le padding de manière dynamique */
        }
        
        .content-image {
            min-height: 200px; /* Hauteur minimale pour les images */
            height: auto; /* Permet à la hauteur de s'ajuster */
            object-fit: cover; /* Recadre l'image si nécessaire */
            aspect-ratio: 16 / 9; /* Définir un ratio de 16:9 pour un recadrage horizontal */
        }
        
        .blog-title {
            margin-top: 5px;
        }
    }

}

/* === Masquer le texte superposé sur la première image hero sur mobile === */
@media (max-width: 768px) {
    .bento-item.large > div[style*="position: absolute"] {
        display: none;
    }
}