/* ═══════════════════════════════════════════════════════════════════════════
   Couleur d'une notification dans la cloche, par type d'alerte.

   ICI LE TYPE PASSE PAR LA PUCE, PAS PAR LE LISERÉ — et c'est l'inverse du
   Campus. Le liseré gauche du Studio porte déjà un sens : `.header-notif-row
   .unread` le colore pour dire « non lu ». Le reprendre pour le type aurait
   effacé ce signal-là, et sa spécificité (0,2,0) l'aurait de toute façon
   emporté sur la nôtre. On ajoute une information, on n'en remplace aucune.

   Les encres sont claires : le panneau du Studio est sur fond blanc mais le
   socle est sombre ; ces quatre-là tiennent 4,5:1 sur les deux.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La puce redit le type pour qui ne distingue pas les couleurs : une mention
   réservée aux lecteurs d'écran le donne aussi en toutes lettres. */
.na-dot {
    display       : inline-block;
    width         : 7px;
    height        : 7px;
    margin-right  : 6px;
    border-radius : 50%;
    flex          : 0 0 7px;
    vertical-align: baseline;
}

.na-item--info    .na-dot { background: #2f7fd0; }
.na-item--success .na-dot { background: #1f8f52; }
.na-item--warning .na-dot { background: #a06a00; }
.na-item--danger  .na-dot { background: #c0392b; }

/* ═══════════════════════════════════════════════════════════════════════════
   Bouton lue / non lue : le même dans la cloche et dans l'historique (onglet 9).
   Il vit ici parce que cette feuille est chargée par les deux gabarits du site,
   quel que soit le thème de couleur.
   ═══════════════════════════════════════════════════════════════════════════ */
.notif-read-toggle {
    flex           : 0 0 auto;
    align-self     : center;
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 36px;
    height         : 36px;
    padding        : 0;
    border         : 1px solid var(--primary-color, #E05C70);
    border-radius  : 50%;
    background     : #fff;
    color          : var(--primary-enhanced-color, #ab2546);
    font-size      : 14px;
    line-height    : 1;
    cursor         : pointer;
    transition     : background 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
}

.notif-read-toggle:hover {
    background     : var(--primary-enhanced-color, #ab2546);
    border-color   : var(--primary-enhanced-color, #ab2546);
    color          : #fff;
}

/* Accusé de réception immédiat : un clic sans réponse visible en appelle un second. */
.notif-read-toggle:active {
    transform      : scale(0.94);
}

/* Anneau en ombre, pas en contour : megamenu.css efface tout `outline` du site
   (`* { outline: 0 !important }`), l'anneau n'apparaîtrait jamais. */
.notif-read-toggle:focus-visible {
    box-shadow     : 0 0 0 2px #fff, 0 0 0 4px var(--primary-enhanced-color, #ab2546);
}

.notif-read-toggle[aria-disabled="true"] {
    opacity        : 0.6;
    cursor         : progress;
}

/* 36 px au pointeur fin, 44 px au doigt. */
@media (pointer: coarse) {
    .notif-read-toggle { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .notif-read-toggle { transition: none; }
    .notif-read-toggle:active { transform: none; }
}