/**
 * Composants Modales - Mapster
 * Système de modales unifié selon les conventions françaises BEM
 */

/* ========================================
   MODALE DE BASE - .modale
   ======================================== */

.modale {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-index-modale);
    padding: var(--espacement-md);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duree-transition-normale) var(--fonction-ease),
                visibility var(--duree-transition-normale) var(--fonction-ease);
}

.modale--visible {
    opacity: 1;
    visibility: visible;
}

.modale--visible .modale__contenu {
    transform: scale(1) translateY(0);
}

/* Fermeture par clic sur l'overlay */
.modale__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ========================================
   CONTENU DE MODALE - BEM
   ======================================== */

.modale__contenu {
    background: var(--couleur-blanche);
    border-radius: var(--rayon-bordure-grand);
    width: 100%;
    max-width: var(--largeur-modale-max);
    max-height: 95vh;
    overflow: hidden;
    box-shadow: var(--ombre-grande);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    transform: scale(0.9) translateY(-20px);
    transition: transform var(--duree-transition-normale) var(--fonction-ease-out);
}

/* Modale grande */
.modale__contenu--grande {
    max-width: var(--largeur-modale-grande);
}

/* Modale plein écran */
.modale__contenu--plein-ecran {
    max-width: none;
    max-height: none;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

/* ========================================
   EN-TÊTE DE MODALE - BEM
   ======================================== */

.modale__en-tete {
    padding: var(--espacement-lg);
    border-bottom: 1px solid var(--gris-300);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: var(--couleur-blanche);
    position: relative;
}

.modale__titre {
    margin: 0;
    font-size: var(--taille-police-xl);
    font-weight: var(--poids-police-gras);
    color: var(--gris-800);
    line-height: var(--hauteur-ligne-serree);
}

.modale__sous-titre {
    margin: var(--espacement-xs) 0 0 0;
    font-size: var(--taille-police-sm);
    color: var(--gris-600);
    font-weight: var(--poids-police-normal);
}

.modale__bouton-fermer {
    background: none;
    border: none;
    font-size: var(--taille-police-2xl);
    cursor: pointer;
    color: var(--gris-500);
    padding: var(--espacement-xs);
    line-height: 1;
    transition: color var(--duree-transition-rapide) var(--fonction-ease);
    border-radius: var(--rayon-bordure-petit);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.modale__bouton-fermer:hover {
    color: var(--gris-700);
    background: var(--gris-200);
}

.modale__bouton-fermer:focus {
    outline: 2px solid var(--couleur-focus);
    outline-offset: 2px;
}

/* ========================================
   CORPS DE MODALE - BEM
   ======================================== */

.modale__corps {
    padding: var(--espacement-lg);
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--gris-400) var(--gris-200);
}

.modale__corps::-webkit-scrollbar {
    width: 8px;
}

.modale__corps::-webkit-scrollbar-track {
    background: var(--gris-200);
    border-radius: var(--rayon-bordure-petit);
}

.modale__corps::-webkit-scrollbar-thumb {
    background: var(--gris-400);
    border-radius: var(--rayon-bordure-petit);
}

.modale__corps::-webkit-scrollbar-thumb:hover {
    background: var(--gris-500);
}

/* Corps sans padding (pour contenu personnalisé) */
.modale__corps--sans-padding {
    padding: 0;
}

/* Corps avec défilement visible */
.modale__corps--defilement-visible {
    overflow-y: visible;
}

/* ========================================
   PIED DE MODALE - BEM
   ======================================== */

.modale__pied {
    padding: var(--espacement-lg);
    border-top: 1px solid var(--gris-300);
    display: flex;
    justify-content: flex-end;
    gap: var(--espacement-sm);
    flex-shrink: 0;
    background: var(--couleur-blanche);
}

.modale__pied--centre {
    justify-content: center;
}

.modale__pied--entre {
    justify-content: space-between;
}

.modale__pied--debut {
    justify-content: flex-start;
}

/* ========================================
   TYPES DE MODALES SPÉCIALISÉES
   ======================================== */

/* Modale de confirmation */
.modale--confirmation {
    --largeur-modale: 400px;
}

.modale--confirmation .modale__contenu {
    max-width: var(--largeur-modale);
}

.modale--confirmation .modale__corps {
    text-align: center;
    padding: var(--espacement-xl);
}

.modale--confirmation .modale__icone {
    font-size: var(--taille-police-4xl);
    margin-bottom: var(--espacement-lg);
    display: block;
}

.modale--confirmation.modale--danger .modale__icone {
    color: var(--couleur-danger);
}

.modale--confirmation.modale--succes .modale__icone {
    color: var(--couleur-succes);
}

.modale--confirmation.modale--avertissement .modale__icone {
    color: var(--couleur-avertissement);
}

/* Modale d'alerte */
.modale--alerte .modale__en-tete {
    background: linear-gradient(135deg, var(--couleur-avertissement-claire), var(--couleur-avertissement));
    color: var(--couleur-blanche);
}

.modale--alerte .modale__titre {
    color: var(--couleur-blanche);
}

.modale--alerte .modale__bouton-fermer {
    color: var(--couleur-blanche);
    background: rgba(255, 255, 255, 0.2);
}

.modale--alerte .modale__bouton-fermer:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Modale de chargement */
.modale--chargement {
    pointer-events: none;
}

.modale--chargement .modale__contenu {
    background: transparent;
    box-shadow: none;
    max-width: 200px;
}

.modale--chargement .modale__corps {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--espacement-xl);
    background: var(--couleur-blanche);
    border-radius: var(--rayon-bordure);
    box-shadow: var(--ombre);
}

.modale__spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--gris-300);
    border-top: 4px solid var(--couleur-primaire);
    border-radius: var(--rayon-bordure-rond);
    animation: rotation var(--duree-transition-normale) linear infinite;
    margin-bottom: var(--espacement-md);
}

.modale__message-chargement {
    color: var(--gris-700);
    font-size: var(--taille-police-sm);
    text-align: center;
}

/* ========================================
   MODALES SPÉCIFIQUES MAPSTER
   ======================================== */

/* Modale d'ajout de lieu */
.modale--lieu {
    --largeur-modale: 600px;
}

.modale--lieu .modale__contenu {
    max-width: var(--largeur-modale);
}

/* Modale Google Maps import */
.modale--google-maps {
    --largeur-modale: var(--largeur-modale-grande);
}

.modale--google-maps .modale__contenu {
    max-width: var(--largeur-modale);
}

/* Modale de galerie d'images */
.modale--galerie .modale__contenu {
    max-width: 90vw;
    max-height: 90vh;
}

.modale--galerie .modale__corps {
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Modale de profil utilisateur */
.modale--profil .modale__en-tete {
    background: linear-gradient(135deg, var(--couleur-primaire), var(--couleur-primaire-sombre));
    color: var(--couleur-blanche);
}

.modale--profil .modale__titre {
    color: var(--couleur-blanche);
}

.modale--profil .modale__bouton-fermer {
    color: var(--couleur-blanche);
    background: rgba(255, 255, 255, 0.2);
}

.modale--profil .modale__bouton-fermer:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   RESPONSIVE MOBILE
   ======================================== */

@media (max-width: 768px) {
    .modale {
        padding: var(--espacement-sm);
        align-items: flex-end;
    }
    
    .modale__contenu {
        max-width: none;
        width: 100%;
        max-height: 85vh;
        border-radius: var(--rayon-bordure) var(--rayon-bordure) 0 0;
        transform: translateY(100%);
        /* Optimisation tactile */
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    .modale--visible .modale__contenu {
        transform: translateY(0);
    }
    
    /* Indicateur de swipe pour fermer */
    .modale__contenu::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--gris-400);
        border-radius: 2px;
        opacity: 0.6;
        transition: opacity 0.2s ease;
    }
    
    .modale__contenu:hover::before {
        opacity: 1;
    }
    
    .modale__en-tete {
        padding: var(--espacement-md);
        padding-top: calc(var(--espacement-md) + 16px); /* Espace pour l'indicateur */
        position: sticky;
        top: 0;
        z-index: 1;
        /* Zone tactile élargie pour faciliter le swipe */
        min-height: 56px;
    }
    
    .modale__corps {
        padding: var(--espacement-md);
        /* Prévenir le bounce scroll sur iOS */
        overscroll-behavior: contain;
    }
    
    .modale__pied {
        padding: var(--espacement-md);
        flex-direction: column;
        gap: var(--espacement-sm);
        position: sticky;
        bottom: 0;
        background: var(--couleur-blanche);
        z-index: 1;
    }
    
    .modale__pied .bouton {
        width: 100%;
        /* Taille tactile optimisée */
        min-height: 48px;
    }
    
    /* Modale plein écran sur mobile */
    .modale--mobile-plein-ecran .modale__contenu {
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    
    /* Styles pour le swipe en cours */
    .modale__contenu.swipe-active {
        transition: none !important;
        will-change: transform;
    }
    
    .modale.swipe-active {
        transition: none !important;
        will-change: opacity;
    }
    
    /* Amélioration de l'accessibilité tactile */
    .modale__bouton-fermer {
        min-width: 44px;
        min-height: 44px;
        /* Zone tactile élargie */
        position: relative;
    }
    
    .modale__bouton-fermer::after {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        /* Zone tactile invisible élargie */
    }
}

/* Très petit écran */
@media (max-width: 480px) {
    .modale {
        padding: 0;
    }
    
    .modale__contenu {
        border-radius: 0;
        max-height: 100vh;
        height: 100vh;
    }
    
    .modale__titre {
        font-size: var(--taille-police-lg);
    }
}

/* ========================================
   ACCESSIBILITÉ
   ======================================== */

/* Focus trap - premier et dernier élément focusable */
.modale__focus-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
}

/* Mode contraste élevé */
@media (prefers-contrast: high) {
    .modale {
        background: rgba(0, 0, 0, 0.8);
    }
    
    .modale__contenu {
        border: 2px solid var(--gris-900);
    }
    
    .modale__en-tete {
        border-bottom-width: 2px;
    }
    
    .modale__pied {
        border-top-width: 2px;
    }
}

/* Mode mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .modale,
    .modale__contenu {
        transition: none;
    }
    
    .modale__contenu {
        transform: none;
    }
    
    .modale__spinner {
        animation: none;
    }
    
    .modale__spinner::before {
        content: '⏳';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: var(--taille-police-lg);
    }
}

/* ========================================
   CLASSES UTILITAIRES MODALES
   ======================================== */

/* État de chargement de modale */
.modale--en-chargement .modale__corps {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Modale sans animation */
.modale--sans-animation,
.modale--sans-animation .modale__contenu {
    transition: none;
}

/* Modale avec backdrop flou */
.modale--flou {
    backdrop-filter: blur(8px);
}

/* Modale sombre */
.modale--sombre {
    background: rgba(0, 0, 0, 0.8);
}

/* Modale avec overlay transparent */
.modale--overlay-transparent {
    background: transparent;
}

/* Empêcher le défilement du body quand modale ouverte */
.body--modale-ouverte {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Stack de modales */
.modale--stack-niveau-2 {
    z-index: calc(var(--z-index-modale) + 1);
}

.modale--stack-niveau-3 {
    z-index: calc(var(--z-index-modale) + 2);
}