/* ==========================================================================
   emg-toast — message flottant en bas d'écran (snackbar)
   --------------------------------------------------------------------------
   Créé au sous-lot 7.7 pour le verrou d'édition, et écrit pour SERVIR AILLEURS :
   le portail n'avait aucun composant de message réutilisable — `alerte()`
   (lib/form/fenetre.php) rend des classes `.alert` du Bootstrap 4 résiduel, que
   les conventions §4 proscrivent en code neuf, et la zone `#modpro-msg` de la
   modale « professionnel » porte son CSS en dur dans du PHP.

   🔑 **Pourquoi flottant et non en tête de page.** Le formulaire de saisie fait
   95 champs : un bandeau posé au-dessus du <form> est hors écran dès que
   l'utilisateur descend, c'est-à-dire précisément quand il faut l'avertir. Le
   toast reste visible où qu'on en soit.

   Nommage : préfixe de domaine `emg-` (conventions §4). Surtout PAS `.toast`
   ni `.alert`, tous deux déjà pris par le Bootstrap 4 du CDN.

   Le pilote JS est public/js/fiche_lock.js. Il remplit le contenu en
   `textContent` : rien de ce qui vient du serveur n'est injecté en HTML.
   ========================================================================== */

/* ==========================================================================
   Voile derrière le toast — met le message en valeur sur un formulaire de 95 champs.
   Deux natures, posées par public/js/fiche_lock.js selon la variante du toast :
     · --doux (décompte) : ne bloque RIEN (`pointer-events:none`). C'est le moment où
       l'utilisateur doit pouvoir écrire/cliquer/tabuler pour garder la main — un voile
       bloquant y empêcherait le geste qui sauve la saisie.
     · --bloquant (fiche occupée) : l'écran est réellement inerte, le voile le dit.
   Sous le toast (1080), au-dessus du reste.
   ========================================================================== */
.emg-toast-voile {
    position: fixed;
    z-index: 1075;
    inset: 0;
    animation: emg-voile-apparait .18s ease-out;
}

.emg-toast-voile--doux {
    background: rgba(0, 0, 0, .35);
    pointer-events: none; /* 🔑 ne jamais capturer le clic ni la frappe pendant le décompte */
}

.emg-toast-voile--bloquant {
    background: rgba(0, 0, 0, .55);
    pointer-events: auto; /* l'écran est inerte : le voile absorbe les clics */
}

@keyframes emg-voile-apparait {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .emg-toast-voile {
        animation: none;
    }
}

.emg-toast {
    position: fixed;
    z-index: 1080; /* au-dessus des modales Bootstrap résiduelles (1050) */
    right: 1.5rem;
    bottom: 1.5rem;
    left: auto;
    display: flex;
    gap: .9rem;
    align-items: flex-start;

    box-sizing: border-box;
    max-width: 42rem;
    padding: 1.1rem 1.3rem;

    font-size: 1.4rem;
    line-height: 1.45;
    color: var(--color-fg);

    background: var(--background-light, #fff);
    border: 1px solid var(--color-border);
    /* Le liseré de gauche porte la variante : il tient la couleur même quand le
       fond reste blanc, ce qui garde le texte lisible quel que soit le thème. */
    border-left-width: .5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);

    animation: emg-toast-apparait .18s ease-out;
}

/* Le décompte du verrou : ce qui presse, sans crier. */
.emg-toast--alerte {
    border-left-color: var(--color-warning);
}

/* Fiche occupée, ou de nouveau libre : une information, pas une alarme. */
.emg-toast--info {
    border-left-color: var(--color-info);
}

.emg-toast__icone {
    flex: 0 0 auto;
    margin-top: .1rem;
    font-size: 1.8rem;
    line-height: 1;
}

.emg-toast--alerte .emg-toast__icone {
    color: var(--color-warning);
}

.emg-toast--info .emg-toast__icone {
    color: var(--color-info);
}

.emg-toast__corps {
    flex: 1 1 auto;
    min-width: 0;
}

.emg-toast__titre {
    margin: 0 0 .2rem;
    font-size: 1.5rem;
    font-weight: bold;
}

.emg-toast__texte {
    margin: 0;
}

/* Bouton d'action facultatif (« Ouvrir la fiche »). `BUTTON` est déjà stylé par
   le foncier gPage : on ne fait que le poser et l'espacer. */
.emg-toast__action {
    margin-top: .8rem;
}

@keyframes emg-toast-apparait {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Même égard que pour les zones conditionnées du formulaire (reporting_saisie.css) :
   une apparition qui glisse peut gêner, et n'apporte rien à l'information. */
@media (prefers-reduced-motion: reduce) {
    .emg-toast {
        animation: none;
    }
}

/* Sur un téléphone, le toast prend la largeur : à 42rem il déborderait, et le
   coller à un seul bord le rendrait moins lisible qu'un bandeau plein. */
@media (max-width: 640px) {
    .emg-toast {
        right: .8rem;
        bottom: .8rem;
        left: .8rem;
        max-width: none;
    }
}

/* ==========================================================================
   Message de retour sur la liste, après expiration de la saisie.
   Rendu côté serveur par reporting_verrou_message_html() (modules/fx/reporting.php),
   dans la zone_avant de la liste des reportings : c'est un bloc dans le flux, pas
   un toast — l'utilisateur vient d'arriver sur la page, il le voit forcément.
   ========================================================================== */

.emg-saisie-expiree {
    display: flex;
    gap: .6rem;
    align-items: baseline;

    margin: 0 0 1.2rem;
    padding: .9rem 1.2rem;

    font-size: 1.4rem;
    line-height: 1.45;

    background: #fdf6e6;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
}

.emg-saisie-expiree .bi {
    color: var(--color-warning);
}