/* CSS complémentaire pour améliorer la responsivité du Hero */

/* Assurer que le texte ne déborde jamais */
#hero-carousel h1,
#hero-carousel h2,
#hero-carousel p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Meilleure lisibilité sur très petits écrans */
@media (max-width: 375px) {
    #hero-carousel h1 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    
    #hero-carousel h2 {
        font-size: 0.875rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
    }
    
    #hero-carousel p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }
    
    #hero-carousel .max-w-full {
        padding: 0 0.5rem;
    }
    
    #hero-carousel a {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
    }
}

/* Hauteur minimale pour très petits écrans */
@media (max-width: 640px) {
    #hero-carousel {
        min-height: 200px;
    }
}

/* Améliorer la visibilité des contrôles sur mobile */
@media (max-width: 768px) {
    #prev-slide,
    #next-slide {
        opacity: 0.8;
        backdrop-filter: blur(4px);
    }
    
    #slide-indicators button {
        backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
}

/* Animation plus douce pour les transitions */
.hero-slides > div {
    transition: opacity 0.8s ease-in-out;
}

/* Assurer que les boutons restent cliquables */
#hero-carousel button {
    touch-action: manipulation;
    user-select: none;
}