/* Correctifs responsives pour smartphone - Des Plumes et des Pattes */

/* Ajuster la Meta Viewport pour garantir un bon rendu sur mobile */
@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

/* Ajustements généraux pour mobile */
@media (max-width: 767px) {
    /* Empêcher le chevauchement entre la bannière et le texte */
    .hero-content {
        padding-bottom: 135px; /* Espace suffisant pour la bannière verte */
    }
    
    /* Ajuster la position de la bannière d'informations rapides */
    .quick-info {
        bottom: 0;
        background-color: rgba(76, 175, 80, 0.9); /* Légèrement plus opaque pour une meilleure lisibilité */
        padding: 0.5rem 0;
    }
    
    /* Améliorer la disposition des infos rapides sur mobile */
    .quick-info-content {
        flex-direction: column;
        padding: 0 0.5rem;
    }
    
    /* Améliorer la lisibilité du texte dans la bannière */
    .info-item {
        font-size: 0.9rem;
        margin: 0.3rem;
        display: block; /* Empiler les éléments sur mobile */
        text-align: center;
        width: 100%;
    }
    
    /* Réduire la taille de la section hero sur mobile */
    .hero {
        height: 100vh; /* Utiliser la hauteur de la fenêtre */
        max-height: 600px; /* Hauteur maximale */
    }
    
    /* Ajuster la position du contenu hero */
    .hero-content {
        width: 90%;
        top: 45%;
    }
    
    /* Rendre le texte plus lisible sur mobile */
    .hero-content h1 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .hero-content p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Ajuster les boutons sur mobile */
    .hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }
    
    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Ajuster les sections sur mobile */
    .section {
        padding: 2rem 0;
    }
    
    /* Améliorer la lisibilité des titres de section */
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
}

/* Correctifs spécifiques pour très petits écrans */
@media (max-width: 375px) {
    .hero-content h1 {
        font-size: 1.8rem;
    }
    
    .quick-info {
        padding: 0.3rem 0;
    }
    
    .info-item {
        font-size: 0.8rem;
        margin: 0.2rem;
    }
    
    /* Augmenter l'espace pour éviter le chevauchement */
    .hero-content {
        padding-bottom: 150px;
    }
}