/* ════════════════════════════════
   TOASTS / FLASHES - Identité Aperitiu
   Crème, bande gradient haute (rappel hero/cookie/modals), Erica One uppercase
   pour les titres, icône en cercle coloré, close en pilule qui tourne au hover.
════════════════════════════════ */

:root {
    --toast-cream:     #f3e9d7;
    --toast-cream-2:   #fbf4e9;
    --toast-orange:    #ffa200;
    --toast-orange-2:  #f3a63c;
    --toast-red:       #e85a28;
    --toast-red-dark:  #b22222;
    --toast-green:     #4caf6f;
    --toast-green-2:   #2e7e4a;
    --toast-blue:      #4a8fb8;
    --toast-dark:      #242323;
    --toast-muted:     #7a6b58;

    --toast-font-display: 'Erica One', 'Anton', Impact, sans-serif;
    --toast-font-body:    'DM Sans', 'Poppins', system-ui, sans-serif;
}

/* ── Container ── */
#toast-container {
    position: fixed;
    top: 88px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 9999;
    pointer-events: none;
    width: 380px;
}

/* ── Base toast ── */
.toast {
    width: 100%;
    pointer-events: all;
    background: var(--toast-cream-2);
    border: 1.5px solid rgba(36, 35, 35, 0.12);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(36, 35, 35, 0.18);
    padding: 18px 16px 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    overflow: hidden;
    font-family: var(--toast-font-body);
    animation: toastIn .42s cubic-bezier(.22, .68, 0, 1.2) both;
}

.toast.removing {
    animation: toastOut .32s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(36px) rotate(2deg); }
    to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(0) scale(1); max-height: 180px; margin-bottom: 0; }
    to   { opacity: 0; transform: translateX(40px) scale(.94); max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-top: -14px; }
}

/* ── Bande gradient en haut (rappel hero/cookie/modals) ── */
.toast::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    border-radius: 18px 18px 0 0;
}
.toast.t-success::before { background: linear-gradient(90deg, var(--toast-green-2) 0%, var(--toast-green) 50%, var(--toast-green-2) 100%); }
.toast.t-error::before   { background: linear-gradient(90deg, var(--toast-red-dark) 0%, var(--toast-red) 50%, var(--toast-red-dark) 100%); }
.toast.t-warning::before { background: linear-gradient(90deg, var(--toast-red) 0%, var(--toast-orange) 50%, var(--toast-red) 100%); }
.toast.t-info::before    { background: linear-gradient(90deg, var(--toast-orange-2) 0%, var(--toast-orange) 50%, var(--toast-orange-2) 100%); }

/* ── Icône en cercle coloré ── */
.toast-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    box-shadow: 0 6px 14px rgba(36, 35, 35, 0.10);
}
.toast-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #fff;
}

.toast.t-success .toast-icon { background: var(--toast-green); box-shadow: 0 6px 14px rgba(76, 175, 111, 0.30); }
.toast.t-error   .toast-icon { background: var(--toast-red); box-shadow: 0 6px 14px rgba(232, 90, 40, 0.30); }
.toast.t-warning .toast-icon { background: var(--toast-orange-2); box-shadow: 0 6px 14px rgba(243, 166, 60, 0.30); }
.toast.t-info    .toast-icon { background: var(--toast-orange); box-shadow: 0 6px 14px rgba(255, 162, 0, 0.30); }

/* ── Texte ── */
.toast-body {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.toast-title {
    font-family: var(--toast-font-display);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--toast-dark);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 4px;
}

.toast-msg {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--toast-dark);
    line-height: 1.5;
    font-family: var(--toast-font-body);
    word-break: break-word;
}

/* Couleur d'accent du titre selon le type */
.toast.t-success .toast-title { color: var(--toast-green-2); }
.toast.t-error   .toast-title { color: var(--toast-red-dark); }
.toast.t-warning .toast-title { color: var(--toast-red); }
.toast.t-info    .toast-title { color: var(--toast-red); }

/* ── Bouton fermer (rond, rotate au hover) ── */
.toast-close {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(36, 35, 35, 0.06);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
    margin-top: 2px;
}
.toast-close svg {
    width: 12px;
    height: 12px;
    stroke: var(--toast-dark);
    fill: none;
    stroke-width: 2.2;
    transition: stroke .2s ease;
}
.toast-close:hover {
    background: var(--toast-red);
    transform: rotate(90deg);
}
.toast-close:hover svg { stroke: #fff; }

/* ── Progress bar en bas ── */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 18px 18px;
    animation: toastProgress linear forwards;
    opacity: .85;
}
.toast.t-success .toast-progress { background: var(--toast-green); }
.toast.t-error   .toast-progress { background: var(--toast-red); }
.toast.t-warning .toast-progress { background: var(--toast-orange); }
.toast.t-info    .toast-progress { background: var(--toast-orange); }

@keyframes toastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ── Pause au survol (UX courante) ── */
.toast:hover .toast-progress { animation-play-state: paused; }

/* ── Responsive ── */
@media (max-width: 600px) {
    #toast-container {
        top: 76px;
        right: 12px;
        left: 12px;
        width: auto;
    }
    .toast {
        padding: 16px 14px 16px 18px;
        border-radius: 16px;
    }
    .toast::before { border-radius: 16px 16px 0 0; }
    .toast-progress { border-radius: 0 0 16px 16px; }
    .toast-title { font-size: 0.98rem; }
    .toast-msg { font-size: 0.82rem; }
    .toast-icon { width: 36px; height: 36px; }
    .toast-icon svg { width: 16px; height: 16px; }
}