/* ============================================================================
   Notifications — habillage de Toastr aux couleurs Togo Réformes
   Design moderne avec fond coloré, coins arrondis et icônes vectorielles.
   ========================================================================== */

#toast-container {
    --n-vert:   #0F8A5F;
    --n-bleu:   #2B6CB0;
    --n-orange: #B7791F;
    --n-rouge:  #C53030;
    --n-encre:  #14243D;

    font-family: 'Poppins', 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* Position : sous l'en-tête fixe, pas collée au bord */
#toast-container.toast-top-right {
    top: 1.25rem;
    right: 1.25rem;
}

#toast-container > div {
    background-image: none !important;

    display: flex;
    align-items: flex-start;
    gap: .75rem;

    width: 22.5rem;
    max-width: calc(100vw - 2.5rem);
    padding: .95rem 2.5rem .95rem 1rem;

    border-radius: 14px;
    color: #FFFFFF;

    box-shadow: 0 10px 30px rgba(20, 36, 61, .13),
                0 2px 6px rgba(20, 36, 61, .06);
    opacity: 1 !important;

    animation: n-entree .32s cubic-bezier(.22, 1, .36, 1) both;
}

#toast-container > div:hover {
    box-shadow: 0 14px 38px rgba(20, 36, 61, .18);
    transform: translateY(-1px);
    transition: box-shadow .2s, transform .2s;
}

@keyframes n-entree {
    from { opacity: 0; transform: translateX(1.5rem) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ── Icône, dessinée en CSS ── */
#toast-container > div::before {
    content: '';
    flex: 0 0 1.4rem;
    height: 1.4rem;
    margin-top: .1rem;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: .8rem;
}

/* La règle
   `#toast-container > div { background-image: none !important; }`
   ci-dessus (sélecteur avec ID, donc plus spécifique) annulait le
   `background-image` du dégradé posé ici via le raccourci `background:` —
   qui, du même coup, remettait aussi `background-color` à sa valeur
   initiale (transparente), un raccourci réinitialisant toujours les
   sous-propriétés non précisées. Un fichier tiers (css/components/toastr.css,
   retiré par ailleurs) comblait jusqu'ici ce vide avec des couleurs plates
   en secours ; sans lui, plus aucune couleur de fond ne s'appliquait — d'où
   les toasts « à contour seul ». Corrigé en ciblant #toast-container avec
   au moins autant de spécificité que la règle de réinitialisation, et en
   fixant `background-image` explicitement (plutôt que le raccourci
   `background`) pour ne plus jamais dépendre de l'ordre des fichiers. */
#toast-container > div.toast-success { background-color: #0F8A5F; background-image: linear-gradient(135deg, #0F8A5F 0%, #0A7A52 100%) !important; }
.toast-success::before{ background-color: rgba(255,255,255,0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }

#toast-container > div.toast-info { background-color: #2B6CB0; background-image: linear-gradient(135deg, #2B6CB0 0%, #1E5A9E 100%) !important; }
.toast-info::before   { background-color: rgba(255,255,255,0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 10v7M12 6.5v.01'/%3E%3C/svg%3E"); }

#toast-container > div.toast-warning { background-color: #B7791F; background-image: linear-gradient(135deg, #B7791F 0%, #A36B1A 100%) !important; }
.toast-warning::before{ background-color: rgba(255,255,255,0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17v.01'/%3E%3C/svg%3E"); }

#toast-container > div.toast-error { background-color: #C53030; background-image: linear-gradient(135deg, #C53030 0%, #B02A2A 100%) !important; }
.toast-error::before  { background-color: rgba(255,255,255,0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }

/* ── Textes ── */
#toast-container .toast-title {
    margin: 0 0 .15rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

#toast-container .toast-message {
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    word-break: break-word;
}

/* ── Fermeture ── */
#toast-container .toast-close-button {
    position: absolute;
    top: .55rem;
    right: .6rem;

    width: 1.4rem;
    height: 1.4rem;

    font-size: 0;
    text-shadow: none;
    opacity: .7;
    color: #FFFFFF;

    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/.7rem no-repeat;
    border-radius: 4px;
}

#toast-container .toast-close-button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.15);
}

/* ── Barre de progression ── */
#toast-container .toast-progress {
    height: 3px;
    bottom: 0;
    left: 0;
    opacity: .85;
    border-radius: 0 0 0 14px;
    background: rgba(255, 255, 255, 0.3);
}

.toast-success .toast-progress { background: rgba(255, 255, 255, 0.35); }
.toast-info    .toast-progress { background: rgba(255, 255, 255, 0.35); }
.toast-warning .toast-progress { background: rgba(255, 255, 255, 0.35); }
.toast-error   .toast-progress { background: rgba(255, 255, 255, 0.35); }

/* ── Mobile : pleine largeur, en bas — plus accessible au pouce ── */
@media (max-width: 576px) {
    #toast-container.toast-top-right {
        top: auto;
        bottom: .75rem;
        left: .75rem;
        right: .75rem;
    }

    #toast-container > div {
        width: 100%;
        border-radius: 14px;
    }

    @keyframes n-entree {
        from { opacity: 0; transform: translateY(1rem); }
        to   { opacity: 1; transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    #toast-container > div { animation: none; }
    #toast-container > div:hover { transform: none; }
}