.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(29, 29, 27, 0.7); /* Opacité basée sur var(--text) */
    display: flex;
    align-items: center;
    /* « safe center » retombe sur « start » dès que le contenu déborde. Sans lui,
       une boîte centrée plus haute que son conteneur voit son haut sortir par
       au-dessus, hors d'atteinte du défilement : c'est le comportement historique
       de la centration flex. Les deux déclarations sont volontaires — la première
       sert de repli aux navigateurs qui ignorent le mot-clé. */
    align-items: safe center;
    justify-content: center;
    /* Sans ce défilement, une modale plus haute que la fenêtre rendait ses
       boutons de pied inatteignables, souris comme clavier — dès 150 % de zoom.
       Cinq composants portaient un max-height: 70vh en rustine locale. */
    overflow-y: auto;
    z-index: 1050;
    padding: 24px;
}

@media (max-width: 480px) {
    .modal-overlay {
        padding: 8px;
    }
}

.modal-content {
    background-color: #ffffff;
    width: 100%;
    max-width: 800px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    /* L'overlay défile désormais : le panneau ne doit pas être écrasé par flex
       en dessous de sa hauteur naturelle, sinon son contenu est tronqué. */
    flex-shrink: 0;
}

.modal-header {
    background-color: var(--primary);
    color: #ffffff;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body {
    padding: 32px;
}

/* Bouton de fermeture (croix) posé sur le fond sombre du header */
.modal-header .toast-close {
    color: #ffffff;
}

/* Le titre du dialogue est un <h2> depuis 2026-08-25 : sous le <h1> de la page,
   c'est la section de premier rang du dialogue. Le niveau exprime la structure,
   la taille reste celle d'avant (défaut d'un <h3>) pour ne rien changer au rendu. */
.modale-titre {
    font-size: 1.17rem;
}

.modal-footer {
    padding: 24px;
    background-color: var(--background);
    border-top: 1px solid var(--tertiary);
    display: flex;
    justify-content: flex-end;
    /* Les pieds portent jusqu'à trois boutons : sans repli, ils débordaient. */
    flex-wrap: wrap;
    gap: 16px;
}

@media (max-width: 768px) {
    .modal-header,
    .modal-footer {
        padding: 16px;
    }

    .modal-body {
        padding: 20px 16px;
    }

    /* Les boutons du pied prennent toute la largeur plutôt que de se serrer. */
    .modal-footer .btn {
        width: 100% !important;
    }
}