/* Styles généraux pour toutes les modales - DESKTOP ET MOBILE */
.modal-dialog {
    max-height: 90vh; /* Limite la hauteur maximale */
    margin: 1rem auto; /* Réduit les marges desktop */
}

.modal-content {
    max-height: 90vh; /* Empêche le débordement */
    display: flex;
    flex-direction: column;
}

.modal-body {
    overflow-y: auto; /* Scroll interne si nécessaire */
    flex: 1;
    max-height: calc(90vh - 120px); /* Espace pour header/footer */
}

/* Styles généraux pour toutes les modales sur mobile */
@media (max-width: 767.98px) {
    .modal {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .modal-dialog {
        margin: 0.5rem auto;
        max-width: 95%;
        max-height: 95vh; /* Réduit encore plus sur mobile */
    }
    
    .modal-content {
        border-radius: 0.5rem;
        max-height: 95vh;
    }
    
    .modal-header, .modal-footer {
        padding: 0.75rem; /* Réduit de 1rem */
    }
    
    .modal-body {
        padding: 0.75rem; /* Réduit de 1rem */
        font-size: 0.9rem;
        max-height: calc(95vh - 100px); /* Ajusté */
    }
    
    .modal-title {
        font-size: 1.1rem;
    }
    
    .btn-close {
        font-size: 0.75rem;
    }
}

/* Styles spécifiques pour la gameModal */
.modal-xl .modal-dialog {
    max-width: 85%; /* Réduit de 90% sur desktop */
    max-height: 90vh;
}

@media (max-width: 767.98px) {
    #gameModal.modal-xl .modal-dialog {
        max-width: 100%;
        margin: 0;
        height: 95vh; /* Réduit de 100vh */
    }
    
    #gameModal .modal-content {
        height: 95vh; /* Réduit de 100% */
        border-radius: 0;
    }
    
    #gameModal .modal-body.p-0 {
        overflow-y: auto;
        max-height: calc(95vh - 80px); /* Très réduit */
    }
    
    #sponsoredContent, #gameContent {
        padding: 0.25rem; /* Très réduit de 0.5rem */
    }
    
    .sponsored-header h4,
    .game-header h3 {
        font-size: 1.1rem; /* Réduit de 1.2rem */
    }
    
    #gameQuestion {
        font-size: 1rem; /* Réduit de 1.1rem */
    }
    
    #gameImage {
        max-height: 120px !important; /* Réduit de 150px */
    }
    
    .answers-grid {
        grid-template-columns: 1fr !important;
        gap: 0.25rem; /* Réduit de 0.5rem */
    }
    
    .game-timer, .sponsored-timer {
        font-size: 0.8rem; /* Réduit de 0.9rem */
    }
}

/* Styles spécifiques pour la participantFormModal */
.modal-lg .modal-dialog {
    max-width: 75%; /* Réduit de 80% sur desktop */
    max-height: 85vh;
}

@media (max-width: 767.98px) {
    #participantFormModal .modal-dialog {
        max-width: 95%;
        max-height: 90vh; /* Limite la hauteur */
    }
    
    #participantFormModal .modal-body {
        max-height: calc(90vh - 120px); /* Scroll interne */
    }
    
    #participantFormModal .form-label {
        font-size: 0.85rem; /* Réduit de 0.9rem */
        margin-bottom: 0.25rem; /* Réduit l'espacement */
    }
    
    #participantFormModal .form-control {
        padding: 0.25rem 0.5rem; /* Réduit le padding */
        font-size: 0.85rem; /* Réduit de 0.9rem */
        margin-bottom: 0.5rem; /* Réduit l'espacement */
    }
    
    #participantFormModal .form-check {
        margin-bottom: 0.25rem; /* Réduit l'espacement */
    }
    
    #participantFormModal .form-check-label {
        font-size: 0.8rem; /* Réduit de 0.85rem */
    }
    
    #participantFormModal .btn {
        padding: 0.375rem 0.75rem; /* Réduit le padding */
        font-size: 0.85rem; /* Réduit de 0.9rem */
    }
    
    /* Espacement réduit entre les champs */
    #participantFormModal .mb-3 {
        margin-bottom: 0.75rem !important;
    }
}

/* Styles spécifiques pour la resultModal */
.modal-md .modal-dialog {
    max-width: 65%; /* Réduit de 70% sur desktop */
    max-height: 80vh;
}

@media (max-width: 767.98px) {
    #resultModal .modal-dialog {
        max-width: 90%;
        max-height: 85vh; /* Limite la hauteur */
    }
    
    #resultModal .modal-content {
        max-height: 85vh;
    }
    
    #resultModal .modal-header {
        padding: 0.5rem 0.75rem; /* Très réduit */
    }
    
    #resultModal .modal-body {
        padding: 0.75rem;
        max-height: calc(85vh - 100px);
    }
    
    #resultIcon {
        font-size: 1.5rem !important; /* Réduit de 2rem */
    }
    
    #resultTitle {
        font-size: 1.1rem; /* Réduit de 1.2rem */
        margin-bottom: 0.5rem;
    }
    
    #resultBody p {
        margin-bottom: 0.25rem; /* Très réduit de 0.5rem */
        font-size: 0.85rem; /* Réduit de 0.9rem */
    }
}

/* Améliorations pour les petits écrans (moins de 576px) */
@media (max-width: 575.98px) {
    .modal-dialog {
        max-width: 100%;
        margin: 0.1rem auto; /* Très réduit */
        max-height: 98vh;
    }
    
    .modal-content {
        border-radius: 0;
        max-height: 98vh;
    }
    
    .modal-header, .modal-footer {
        padding: 0.5rem; /* Très réduit */
    }
    
    .modal-body {
        padding: 0.5rem;
        max-height: calc(98vh - 80px);
    }
    
    #gameModal .modal-body.p-0 {
        max-height: calc(98vh - 60px); /* Très optimisé */
    }
    
    #participantFormModal .modal-dialog {
        max-width: 100%;
        margin: 0;
        height: 98vh;
    }
    
    #participantFormModal .modal-content {
        height: 98vh;
        border-radius: 0;
    }
    
    #participantFormModal .modal-body {
        overflow-y: auto;
        max-height: calc(98vh - 80px); /* Très optimisé */
        padding: 0.5rem;
    }
    
    /* Espacement ultra-réduit pour très petits écrans */
    #participantFormModal .form-control {
        padding: 0.2rem 0.4rem;
        margin-bottom: 0.25rem;
    }
    
    #participantFormModal .mb-3 {
        margin-bottom: 0.5rem !important;
    }
    
    #participantFormModal .form-label {
        margin-bottom: 0.1rem;
    }
}

/* Optimisations spéciales pour éviter le scroll sur desktop */
@media (min-width: 768px) {
    /* GameModal - Desktop */
    #gameModal.modal-xl .modal-dialog {
        max-width: 80%; /* Encore plus compact */
        max-height: 85vh;
    }
    
    #gameModal .modal-content {
        max-height: 85vh;
    }
    
    #gameModal .modal-body {
        max-height: calc(85vh - 60px);
    }
    
    /* ParticipantFormModal - Desktop */
    #participantFormModal .modal-dialog {
        max-width: 70%;
        max-height: 80vh;
    }
    
    #participantFormModal .modal-body {
        max-height: calc(80vh - 120px);
        overflow-y: auto;
    }
    
    /* ResultModal - Desktop */
    #resultModal .modal-dialog {
        max-width: 60%;
        max-height: 75vh;
    }
    
    #resultModal .modal-body {
        max-height: calc(75vh - 100px);
    }
}