/* =============================================================================
   Notifications de la vitrine
   =============================================================================
   L'interface d'administration a deja son systeme (init/toast.php). Il n'est
   pas reutilise ici pour deux raisons : il pese une trentaine de kilo-octets
   avec ses dependances, et sa palette est sombre alors que la vitrine est
   claire depuis vitrine-clair.css. Ce module reprend la meme API — Toast.show,
   Toast.success, Toast.error — pour que les appels s'ecrivent partout pareil.

   La pile est en haut a droite sur grand ecran, et pleine largeur en haut sur
   telephone : un message de confirmation de formulaire doit etre vu sans avoir
   a chercher, et les coins d'un petit ecran sont justement ce qu'on ne
   regarde pas.
   ========================================================================== */

.vt-pile {
    position: fixed;
    top: 84px;                    /* sous la barre de navigation collante */
    right: 20px;
    z-index: 9500;                /* au-dessus du contenu, sous le rideau */
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(380px, calc(100vw - 40px));
    pointer-events: none;         /* la pile ne bloque pas les clics */
}

.vt-toast {
    pointer-events: auto;         /* mais chaque message reste cliquable */
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(24, 48, 96, .12);
    border-left: 4px solid var(--vt-teinte, #183060);
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(10, 22, 40, .16);
    font-family: inherit;
    overflow: hidden;

    opacity: 0;
    transform: translateX(24px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
}
.vt-toast.est-visible { opacity: 1; transform: translateX(0); }
.vt-toast.est-sortant { opacity: 0; transform: translateX(24px); }

.vt-toast--success { --vt-teinte: #15803d; }
.vt-toast--error   { --vt-teinte: #b91c1c; }
.vt-toast--warning { --vt-teinte: #b45309; }
.vt-toast--info    { --vt-teinte: #1d4ed8; }

.vt-toast__icone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--vt-teinte);
    color: #fff;
}
.vt-toast__icone svg { width: 14px; height: 14px; }

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

.vt-toast__titre {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vt-teinte);
    line-height: 1.3;
}
.vt-toast__texte {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #1e293b;
    overflow-wrap: anywhere;      /* un message d'erreur peut etre un long mot */
}

.vt-toast__fermer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: -3px -5px 0 0;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.vt-toast__fermer:hover { background: rgba(24, 48, 96, .08); color: #0f172a; }
.vt-toast__fermer:focus-visible { outline: 2px solid var(--vt-teinte); outline-offset: 1px; }
.vt-toast__fermer svg { width: 14px; height: 14px; }

/* Jauge de temps restant : elle dit pourquoi le message va disparaitre, ce
   qui evite de croire a un bug d'affichage. */
.vt-toast__jauge {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    background: var(--vt-teinte);
    opacity: .35;
    transition-property: transform;
    transition-timing-function: linear;
}

@media (max-width: 700px) {
    .vt-pile {
        top: 72px;
        left: 12px;
        right: 12px;
        width: auto;
    }
    .vt-toast { transform: translateY(-16px); }
    .vt-toast.est-visible { transform: translateY(0); }
    .vt-toast.est-sortant { transform: translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
    .vt-toast { transition: opacity .01s linear; transform: none; }
    .vt-toast.est-visible,
    .vt-toast.est-sortant { transform: none; }
    .vt-toast__jauge { display: none; }
}