/* 12-notifications.css — lignes 654-762 de l'ancien style.css unique, contenu inchangé */

/* ===========================
   NOTIFICATIONS
=========================== */

.notification{

padding:var(--space-5);

border-radius:var(--radius-lg);

margin-top:var(--space-5);

display:flex;

align-items:center;

gap:var(--space-4);

font-weight:600;

}

#zoneNotifications{

    position:fixed;

    top:25px;

    right:25px;

    z-index:99999;

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

    max-width:360px;

}

#zoneNotifications .notification{

    margin-top:0;

    box-shadow:var(--shadow);

    animation:notifApparait .2s ease;

}

@keyframes notifApparait{

    from{ opacity:0; transform:translateX(20px); }

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

}

.notification-fermer{

    background:none;

    border:none;

    cursor:pointer;

    font-size:20px;

    line-height:1;

    color:inherit;

    opacity:.6;

    padding:0 0 0 10px;

}

.notification-fermer:hover{

    opacity:1;

}

.success{

background:var(--surface-success);

color:var(--texte-success);

}

.info{

background:var(--surface-info);

color:var(--texte-info);

}

.warning{

background:var(--surface-warning);

color:var(--texte-warning);

}

/* ---------------------------------------------------------------------
   Pastille de messages non lus, sur la cloche du bandeau.
   --------------------------------------------------------------------- */
#boutonNotifications{ position:relative; }

.pastille-notifications{
    position:absolute;
    top:0;
    right:0;
    transform:translate(35%,-35%);
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:flex;
    align-items:center;
    justify-content:center;
    /* --danger-fond, pas --danger : le rouge d'accent porte 3,76:1 sous
       du blanc, sous le seuil AA. Le token du Cycle 25 existe pour ça. */
    background:var(--danger-fond);
    color:var(--encre-bouton-plein);
    font-size:11px;
    font-weight:700;
    line-height:1;
    border-radius:var(--radius-full);
}

.pastille-notifications[hidden]{ display:none; }

/* ---------------------------------------------------------------------
   Historique des notifications.
   --------------------------------------------------------------------- */
.entete-liste{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    flex-wrap:wrap;
    margin-bottom:var(--space-4);
}

.actions-liste{ display:flex; gap:var(--space-2); }
.actions-liste .secondary-button{ width:auto; }

.liste-notifications{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
}

.entree-notification{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    padding:var(--space-3);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface);
}

/* Une entrée non lue se distingue par un liseré latéral, pas par un fond
   coloré : sur une liste longue, une succession de blocs teintés fatigue
   et cesse de signaler quoi que ce soit. */
.entree-notification.non-lue{
    border-left:3px solid var(--primary);
}

.entree-notification .puce{
    width:8px;
    height:8px;
    margin-top:var(--space-1);
    border-radius:var(--radius-circle);
    flex-shrink:0;
    background:var(--text-light);
}

.entree-notification[data-type="success"] .puce{ background:var(--success); }
.entree-notification[data-type="warning"] .puce{ background:var(--warning); }
.entree-notification[data-type="error"] .puce{ background:var(--danger); }
.entree-notification[data-type="info"] .puce{ background:var(--secondary); }

.entree-notification .corps{ flex:1; }
.entree-notification .texte{ font-size:14px; line-height:1.5; }
.entree-notification .quand{ font-size:12px; color:var(--text-light); margin-top:var(--space-1); }