/*
 * Habillage global des modales Bootstrap pour SecuFlow.
 * Chargé après bootstrap.min.css dans les deux templates de base : relève le
 * rendu par défaut (plat, anguleux) de TOUTES les modales du site en une seule
 * fois, sans toucher aux ~130 templates qui en contiennent une.
 *
 * Les en-têtes déjà coloriés explicitement (bg-danger/bg-success/bg-warning/
 * bg-info/bg-primary/bg-dark/bg-secondary, déjà utilisés par plusieurs
 * modales de confirmation) sont exclus du dégradé par défaut pour ne pas
 * écraser un choix de couleur déjà fait — ils héritent quand même de la
 * forme (rayon, ombre, typographie) définie ici.
 */

:root {
    --sf-modal-radius: 20px;
}

@media (prefers-reduced-motion: no-preference) {
    .modal.fade .modal-dialog {
        transform: translateY(28px) scale(.96);
        transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .24s ease;
    }
    .modal.show .modal-dialog {
        transform: translateY(0) scale(1);
    }
}

.modal-backdrop {
    background: linear-gradient(135deg, rgba(8, 28, 18, .92), rgba(16, 48, 32, .82));
}
.modal-backdrop.show {
    opacity: .78;
}
@supports (backdrop-filter: blur(1px)) {
    .modal-backdrop.show {
        backdrop-filter: blur(3px);
        opacity: .68;
    }
}

.modal-content {
    border: none;
    border-radius: var(--sf-modal-radius);
    box-shadow: 0 28px 64px -16px rgba(9, 30, 20, .38), 0 2px 8px rgba(9, 30, 20, .08);
    overflow: hidden;
}

.modal-header {
    align-items: center;
    gap: .85rem;
    padding: 1.35rem 1.75rem;
    border-bottom: none;
}
.modal-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-dark):not(.bg-secondary):not(.bg-light) {
    background: linear-gradient(135deg, var(--primary-green, var(--sf-brand-800, #1B6535)), var(--secondary-green, var(--sf-brand-700, #2d8659)));
    color: #fff;
}
.modal-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-dark):not(.bg-secondary):not(.bg-light) .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .85;
}
.modal-header:not(.bg-danger):not(.bg-success):not(.bg-warning):not(.bg-info):not(.bg-primary):not(.bg-dark):not(.bg-secondary):not(.bg-light) .btn-close:hover {
    opacity: 1;
}
.modal-header .btn-close {
    transition: transform .15s ease, opacity .15s ease;
    border-radius: 50%;
    padding: .5rem;
}
.modal-header .btn-close:hover {
    transform: rotate(90deg);
}

.modal-title {
    font-weight: 800;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.modal-title i:first-child,
.modal-title svg:first-child {
    font-size: .92em;
    opacity: .95;
}

.modal-body {
    padding: 1.6rem 1.75rem;
    color: #2b3a33;
}
.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-body .form-control,
.modal-body .form-select {
    border-radius: 11px;
    border-color: #dde4e0;
    padding: .55rem .85rem;
}
.modal-body .form-control:focus,
.modal-body .form-select:focus {
    border-color: var(--secondary-green, var(--sf-brand-700, #2d8659));
    box-shadow: 0 0 0 .2rem rgba(var(--sf-brand-700-rgb, 45, 134, 89), .16);
}
.modal-body .form-label {
    font-weight: 600;
    font-size: .88rem;
    color: #45534c;
}

.modal-footer {
    padding: 1.1rem 1.75rem;
    border-top: 1px solid rgba(9, 30, 20, .07);
    background: #fafbfa;
    gap: .6rem;
}

.modal-footer .btn,
.modal-body .btn {
    border-radius: 50px;
    padding-inline: 1.25rem;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease;
}
.modal-footer .btn:hover,
.modal-body .btn:hover {
    transform: translateY(-1px);
}
.modal-footer .btn-success,
.modal-footer .btn-primary {
    box-shadow: 0 8px 18px -6px rgba(var(--sf-brand-800-rgb, 27, 101, 53), .45);
}
.modal-footer .btn-danger {
    box-shadow: 0 8px 18px -6px rgba(220, 53, 69, .4);
}

.modal-dialog.modal-lg .modal-content,
.modal-dialog.modal-xl .modal-content {
    border-radius: calc(var(--sf-modal-radius) + 4px);
}

@media (max-width: 576px) {
    .modal-header { padding: 1.1rem 1.25rem; }
    .modal-body { padding: 1.25rem; }
    .modal-footer { padding: .9rem 1.25rem; }
}