/* ============================================================
   Modal — Style "Néo-classique"
   ============================================================ */

.modal-dialog {
    margin: auto;
    padding: 0;
    border: none;
    background: transparent;
    max-width: 28rem;
    width: calc(100% - 2rem);
}

.modal-dialog .modal-content {
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
                0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.modal-dialog::backdrop {
    background-color: rgb(0 0 0 / 0.4);
}

/* Animation slide-in douce à l'ouverture */
.modal-dialog[open] {
    animation: modal-slide-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-dialog[open]::backdrop {
    animation: modal-backdrop-fade-in 0.2s ease-out;
}

@keyframes modal-slide-in {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modal-backdrop-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   Form Modal — Variante pour les modales-formulaires
   ============================================================
   - Largeur 32rem (vs 28rem pour les confirmations) car les
     formulaires demandent plus d'espace (champs, autocomplete, errors)
   - Bouton de fermeture en haut à droite (icône SVG inline)
   ============================================================ */

.form-modal-dialog {
    max-width: 32rem;
    max-height: 90vh;
}

.form-modal-content {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 90vh;
    scrollbar-gutter: stable;
}

.form-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: var(--color-text);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.form-modal-close:hover {
    opacity: 1;
    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.form-modal-close:focus-visible {
    opacity: 1;
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.form-modal-close-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}