/* 18-modal.css — lignes 1071-1153 de l'ancien style.css unique, contenu inchangé */

/* ===========================
   MODAL
=========================== */
.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    align-items:center;
    justify-content:center;
    z-index:1000;
}

.modal.active{
    display:flex;
}

.modal-content{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    width:min(90%,480px);
    max-height:85vh;
    overflow:auto;
    display:flex;
    flex-direction:column;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 30px;
    border-bottom:1px solid var(--border);
}

.modal-header h2{
    font-size:20px;
}

.modal-header button{
    border:none;
    background:none;
    cursor:pointer;
    font-size:18px;
    color:var(--text-light);
}

.modal-body{
    padding:var(--space-8);
    line-height:1.6;
    color:var(--text);
}

.modal-footer{
    padding:20px 30px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:flex-end;
    /* La modale accueille désormais deux boutons (Annuler / Confirmer) :
       sans gap, ils se touchaient. */
    gap:var(--space-3);
}

body.dark .modal-content{
    background:#1e293b;
    color:white;
}

body.dark .modal-header,
body.dark .modal-footer{
    border-color:#334155;
}
/* L'écran de connexion n'est plus une page à part : c'est un voile posé
   sur l'application, qu'on aperçoit floutée derrière. Le flou est obtenu par
   backdrop-filter sur le voile, jamais par filter sur #app — filtrer tout
   l'arbre de l'application forcerait son rendu complet à chaque image.

   ⚠ Le flou n'est pas une occultation. Ce que montre l'arrière-plan doit
   être vide de toute donnée de compte : c'est afficherConnexion()
   (core/app.js) qui en répond, pas ce fichier. */
#authScreen{
    position: fixed;
    inset: 0;

    /* Masqué par défaut, affiché par afficherConnexion() qui repose le
       display en flex. Auparavant le voile était opaque et couvrait le
       loader (z-index 9999 contre 10000) ; translucide, il aurait laissé
       voir le spinner flouté derrière le formulaire pendant une seconde. */
    display: none;

    justify-content: center;
    align-items: center;
    background:var(--overlay-auth);
    backdrop-filter: blur(var(--blur-auth)) saturate(120%);
    -webkit-backdrop-filter: blur(var(--blur-auth)) saturate(120%);
    z-index: 10000;

    /* Le voile est posé sous le loader et se révèle avec lui : quand le
       loader s'efface, l'écran de connexion est déjà en place. Aucune
       étape où l'application apparaît nue avant d'être floutée. */
    opacity:0;
    transition:opacity .28s ease;
}

#authScreen.visible{
    opacity:1;
}

/* Navigateur sans backdrop-filter : on retombe sur le voile opaque
   d'avant, c'est-à-dire sur le comportement historique. Aucune régression,
   seulement l'effet en moins. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    #authScreen{
        background:var(--surface-muted);
    }
}

/* Tant que le voile est là, la page derrière ne défile pas. */
body.auth-verrouillee{
    overflow:hidden;
}

.auth-panel{
    width:420px;
}