/* ============================================================
   TRCK — Composants Bootstrap absents de /css/app.css
   ------------------------------------------------------------
   /css/app.css est un build AdminKit partiel : les composants
   « modal » et « alert » n'y figurent pas (vérifié : 0 règle
   `.modal`, 0 règle `.alert` sur 1444 règles). Conséquences
   constatées en production :

     • les 3 modales de l'app (envoi d'un email de test, création
       d'un jeton API, suppression de compte RGPD) se rendaient
       `position: static` en fin de flux — soit ~420 px de vide
       invisible sur /member/profile, et un formulaire hors écran
       derrière un voile sombre quand on cliquait pour l'ouvrir ;
     • les messages flash `.alert` s'affichaient en texte brut,
       succès et erreur devenant indiscernables, sur les gabarits
       qui ne chargent pas custom.css (admin, auth, public).

   Ce fichier ne redéfinit QUE le strict manquant, avec une
   spécificité minimale : il se charge après app.css mais avant
   custom.css et admin-dark.css, qui gardent donc le dernier mot.
   ============================================================ */

/* ── Alertes ────────────────────────────────────────── */
.alert {
    position: relative;
    padding: 14px 18px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    border: 1px solid transparent;
    border-radius: 10px;
}

.alert-success { background-color: #ecfdf3; color: #067647; border-color: #a7f3d0; }
.alert-danger  { background-color: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert-warning { background-color: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert-info    { background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.alert-light   { background-color: #f8f9fa; color: #495057; border-color: #dee2e6; }
.alert-secondary { background-color: #f1f3f5; color: #495057; border-color: #dee2e6; }

.alert-link { font-weight: 600; color: inherit; text-decoration: underline; }

/* Croix de fermeture : sans ce positionnement elle se colle au texte. */
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.05rem 1.15rem;
}

/* ── Modales ────────────────────────────────────────── */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;          /* Bootstrap passe à `block` à l'ouverture. */
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;   /* seuls les enfants captent les clics */
}

.modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); }
.modal.show .modal-dialog { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog { transition: none; }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    outline: 0;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-title { margin-bottom: 0; line-height: 1.5; }
.modal-body  { position: relative; flex: 1 1 auto; padding: 1rem; }

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.modal-header.border-0, .modal-footer.border-0 { border: 0; }

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 0.5; }

/* Bootstrap pose cette classe sur <body> pour bloquer le défilement. */
.modal-open { overflow: hidden; }

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
    .modal-dialog-centered { min-height: calc(100% - 3.5rem); }
    .modal-sm { max-width: 300px; }
}

@media (min-width: 992px) {
    .modal-lg, .modal-xl { max-width: 800px; }
}

@media (min-width: 1200px) {
    .modal-xl { max-width: 1140px; }
}