/* Styles CSS pour améliorer l'expérience utilisateur des dropdowns */

/* Amélioration de la zone de survol des dropdowns */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 200px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 8px 0;
    margin-top: 4px;
    transition: all 0.2s ease;
}

/* Zone invisible pour faciliter la navigation */
.dropdown::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 10px;
    z-index: 999;
}

/* Amélioration visuelle des liens dans les dropdowns */
.dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s ease;
    border-radius: 4px;
    margin: 2px 8px;
}

.dropdown-menu a:hover {
    background-color: #f3f4f6;
    color: #1f2937;
    transform: translateX(4px);
}

/* Animation smooth pour l'ouverture/fermeture */
.dropdown-menu.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.dropdown-menu:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: all 0.2s ease;
}

/* Amélioration du bouton dropdown */
.dropdown-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.dropdown-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dropdown-button svg {
    transition: transform 0.2s ease;
}

.dropdown:hover .dropdown-button svg {
    transform: rotate(180deg);
}

/* Responsive - masquer les dropdowns sur mobile */
@media (max-width: 1024px) {
    .dropdown-menu {
        position: static;
        box-shadow: none;
        background: transparent;
        padding: 0;
        margin: 0;
        border: none;
    }
    
    .dropdown-menu a {
        margin: 0;
        border-radius: 0;
        padding: 8px 16px;
    }
}

/* ============================================
   OPTIMISATION TEXTES & TITRES MOBILE
   ============================================ */

/* Tablettes et grands mobiles */
@media (max-width: 768px) {
    /* Hero Title */
    .hero-title {
        font-size: 2rem !important;
        line-height: 1.25 !important;
        margin-bottom: 1rem;
    }
    
    /* Tous les h1 dans les sections */
    section h1 {
        font-size: 2rem !important;
        line-height: 1.25 !important;
    }
    
    /* Titres de sections */
    h2 {
        font-size: 2rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    /* Textes body */
    p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Réduire espacement des sections */
    .section-padding {
        padding: 3rem 0 !important;
    }
    
    /* Container padding */
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Hero paragraphe */
    .hero-animation p,
    section p.text-lg,
    section p.text-xl {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Boutons */
    .btn {
        font-size: 0.938rem !important;
        padding: 0.875rem 1.5rem !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        width: 100%;
    }
    
    /* Boutons avec liens <a> */
    a.btn,
    button.btn {
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Petits mobiles */
@media (max-width: 640px) {
    /* Hero Title plus petit */
    .hero-title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    /* Tous les h1 */
    section h1,
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    /* Titres de sections */
    h2 {
        font-size: 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.375rem !important;
    }
    
    h4 {
        font-size: 1.125rem !important;
    }
    
    /* Textes */
    p {
        font-size: 0.938rem !important;
    }
    
    /* Réduire encore les espacements */
    .section-padding {
        padding: 2.5rem 0 !important;
    }
    
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Cards */
    .card {
        padding: 1.5rem !important;
    }
    
    /* Statistiques */
    .text-5xl {
        font-size: 2.5rem !important;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .hero-title,
    section h1,
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    body {
        font-size: 16px;
    }
    
    .container {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
}

/* ============================================
   SURCHARGE STYLES INLINE POUR MOBILE
   ============================================ */

/* Forcer les tailles de texte sur mobile même avec styles inline */
@media (max-width: 768px) {
    /* Tous les h2 avec style inline */
    h2[style*="font-size"] {
        font-size: 2rem !important;
    }
    
    /* Tous les h3 avec style inline */
    h3[style*="font-size"] {
        font-size: 1.5rem !important;
    }
    
    /* Tous les h4 avec style inline */
    h4[style*="font-size"] {
        font-size: 1.25rem !important;
    }
    
    /* Textes de sous-titre */
    h2[style*="font-size: 1.4rem"],
    h2[style*="font-weight: 400"] {
        font-size: 1.125rem !important;
    }
    
    /* Tous les paragraphes avec classe text-lg ou text-xl */
    p[class*="text-lg"],
    p[class*="text-xl"] {
        font-size: 1rem !important;
    }
}

@media (max-width: 640px) {
    /* Titres principaux encore plus petits */
    h2[style*="font-size"] {
        font-size: 1.75rem !important;
    }
    
    h3[style*="font-size"] {
        font-size: 1.375rem !important;
    }
    
    h4[style*="font-size"] {
        font-size: 1.125rem !important;
    }
    
    /* Sous-titres */
    h2[style*="font-size: 1.4rem"] {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    h2[style*="font-size"] {
        font-size: 1.5rem !important;
    }
    
    h3[style*="font-size"] {
        font-size: 1.25rem !important;
    }
    
    h4[style*="font-size"] {
        font-size: 1.063rem !important;
    }
}

/* ============================================
   OPTIMISATION BOUTONS MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Tous les boutons sur mobile SAUF scroll-to-top */
    .btn:not(.scroll-to-top-btn),
    a.btn:not(.scroll-to-top-btn),
    button.btn:not(.scroll-to-top-btn),
    [class*="btn"]:not(.scroll-to-top-btn),
    a[class*="button"]:not(.scroll-to-top-btn),
    button[class*="button"]:not(.scroll-to-top-btn) {
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0.5rem 0 !important;
    }
    
    /* Container de boutons */
    .flex.flex-col a:not(.scroll-to-top-btn),
    .flex.flex-row a:not(.scroll-to-top-btn) {
        width: 100% !important;
    }
    
    /* Forcer le bouton scroll-to-top à rester circulaire */
    .scroll-to-top-btn {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }
}

@media (max-width: 640px) {
    .btn {
        font-size: 0.875rem !important;
        padding: 0.875rem 1.25rem !important;
    }
}

/* ============================================
   OPTIMISATION FORMULAIRE CONTACT MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Masquer la section "Rejoignez Mida" sur mobile */
    #page-contact > section:first-child {
        display: none !important;
    }
    
    /* Optimiser le formulaire pour tenir dans l'écran */
    #page-contact .section-padding {
        padding: 1.5rem 0 !important;
    }
    
    /* Grille en 1 colonne sur mobile */
    #page-contact .grid.md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Container du formulaire plus compact */
    #page-contact .rounded-2xl {
        padding: 1.5rem !important;
        border-radius: 1rem !important;
    }
    
    /* Titre du formulaire plus petit */
    #page-contact h3 {
        font-size: 1.375rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Champs du formulaire plus compacts */
    #contact-form input,
    #contact-form select,
    #contact-form textarea {
        padding: 0.625rem 0.875rem !important;
        font-size: 0.938rem !important;
    }
    
    /* Labels plus petits */
    #contact-form label {
        font-size: 0.813rem !important;
        margin-bottom: 0.375rem !important;
    }
    
    /* Espacement entre champs réduit */
    #contact-form .space-y-6 {
        gap: 0.875rem !important;
    }
    
    #contact-form > div {
        margin-bottom: 0.875rem !important;
    }
    
    /* Textarea plus petit */
    #contact-form textarea {
        min-height: 80px !important;
        max-height: 100px !important;
    }
    
    /* Bouton submit optimisé */
    #contact-form button[type="submit"] {
        padding: 0.875rem 1rem !important;
        font-size: 0.938rem !important;
        margin-top: 1rem !important;
    }
    
    /* Grille prénom/nom en 1 colonne sur mobile */
    #contact-form .grid.md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.875rem !important;
    }
    
    /* Coordonnées et horaires plus compacts */
    #page-contact .space-y-8 {
        margin-top: 1.5rem;
    }
    
    #page-contact .space-y-8 > div {
        padding: 1rem !important;
    }
}

@media (max-width: 640px) {
    /* Encore plus compact sur petits écrans */
    #page-contact .section-padding {
        padding: 1rem 0 !important;
    }
    
    #page-contact .rounded-2xl {
        padding: 1.25rem !important;
    }
    
    #contact-form input,
    #contact-form select,
    #contact-form textarea {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    #contact-form > div {
        margin-bottom: 0.75rem !important;
    }
    
    #contact-form h3 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 480px) {
    /* Très petits écrans - maximum de compacité */
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    #page-contact .rounded-2xl {
        padding: 1rem !important;
    }
}

/* ============================================
   OPTIMISATION PHOTOS ÉQUIPE (Page Qui sommes-nous)
   ============================================ */

/* Desktop - Photos parfaitement rondes */
#page-qui-sommes-nous img[alt*="Directeur"],
#page-qui-sommes-nous img[alt*="Directrice"],
#page-qui-sommes-nous img[alt*="Responsable"],
#page-qui-sommes-nous img[alt*="Coordinatrice"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Tablette - Photos légèrement plus petites */
@media (max-width: 1024px) {
    #page-qui-sommes-nous .w-40.h-40 {
        width: 9rem !important;
        height: 9rem !important;
    }
}

/* Mobile - Photos plus compactes */
@media (max-width: 768px) {
    #page-qui-sommes-nous .grid.lg\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    #page-qui-sommes-nous .w-40.h-40 {
        width: 8rem !important;
        height: 8rem !important;
    }
    
    #page-qui-sommes-nous .rounded-2xl {
        padding: 1.5rem !important;
    }
}

/* Petits mobiles - 1 colonne */
@media (max-width: 640px) {
    #page-qui-sommes-nous .grid.lg\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    #page-qui-sommes-nous .w-40.h-40 {
        width: 10rem !important;
        height: 10rem !important;
    }
}

/* Très petits écrans - Photos encore plus grandes pour meilleure visibilité */
@media (max-width: 480px) {
    #page-qui-sommes-nous .w-40.h-40 {
        width: 9rem !important;
        height: 9rem !important;
    }
}