/*
 * Notifications communes aux modules du CdC (js/cdc-notifications.js, gabarit gabarits/notifications.php).
 * Fichier unique dans cdcapps/Commun : ne dépend d'aucune autre feuille de style.
 * Fenêtres superposées en haut au centre, au-dessus du contenu (elles ne décalent pas la page).
 * Types : succes (vert), info (bleu), avertissement (jaune), erreur (rouge), urgent (rouge clignotant).
 * Thème sombre : data-theme="dark" sur <html>, ou thème du système si l'attribut est absent.
 */
.cdc-notifications {
    --cdc-n-fond: #fff;
    --cdc-n-texte: #1f2328;
    --cdc-n-ombre: rgba(0, 0, 0, 0.25);
    --cdc-n-succes: #1e7b34;
    --cdc-n-succes-fond: #e5f4e8;
    --cdc-n-info: #1d5fa8;
    --cdc-n-info-fond: #e6f0fb;
    --cdc-n-avertissement: #7a4d00;
    --cdc-n-avertissement-fond: #fff4d6;
    --cdc-n-erreur: #b3261e;
    --cdc-n-erreur-fond: #fde8e7;
    position: fixed;
    top: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: max-content;
    max-width: min(40rem, calc(100vw - 2rem));
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.45;
    pointer-events: none;
}
.cdc-notifications:empty { display: none; }
:root[data-theme="dark"] .cdc-notifications {
    --cdc-n-fond: #26262b;
    --cdc-n-texte: #ececf1;
    --cdc-n-ombre: rgba(0, 0, 0, 0.6);
    --cdc-n-succes: #7fd18f;
    --cdc-n-succes-fond: #12301a;
    --cdc-n-info: #8cbcf2;
    --cdc-n-info-fond: #13263c;
    --cdc-n-avertissement: #f2c66b;
    --cdc-n-avertissement-fond: #3a2c0c;
    --cdc-n-erreur: #ff8a80;
    --cdc-n-erreur-fond: #3a1616;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .cdc-notifications {
        --cdc-n-fond: #26262b;
        --cdc-n-texte: #ececf1;
        --cdc-n-ombre: rgba(0, 0, 0, 0.6);
        --cdc-n-succes: #7fd18f;
        --cdc-n-succes-fond: #12301a;
        --cdc-n-info: #8cbcf2;
        --cdc-n-info-fond: #13263c;
        --cdc-n-avertissement: #f2c66b;
        --cdc-n-avertissement-fond: #3a2c0c;
        --cdc-n-erreur: #ff8a80;
        --cdc-n-erreur-fond: #3a1616;
    }
}

.cdc-notification {
    position: relative;
    margin: 0;
    padding: 0.8rem 2.4rem 0.8rem 1.2rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: var(--cdc-n-fond);
    color: var(--cdc-n-texte);
    box-shadow: 0 6px 24px var(--cdc-n-ombre);
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.4s;
}
.cdc-notification[hidden] { display: none; }
.cdc-notification.cdc-notification-sortie { opacity: 0; }
.cdc-notification ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.cdc-notification p { margin: 0; }
.cdc-notification-succes { background: var(--cdc-n-succes-fond); color: var(--cdc-n-succes); }
.cdc-notification-info { background: var(--cdc-n-info-fond); color: var(--cdc-n-info); }
.cdc-notification-avertissement { background: var(--cdc-n-avertissement-fond); color: var(--cdc-n-avertissement); }
.cdc-notification-erreur { background: var(--cdc-n-erreur-fond); color: var(--cdc-n-erreur); }
.cdc-notification-urgent {
    background: #c62828;
    color: #fff;
    border-color: #7f0000;
    animation: cdc-notification-pulsation 1.2s ease-in-out infinite;
}
@keyframes cdc-notification-pulsation {
    0%, 100% { box-shadow: 0 6px 24px var(--cdc-n-ombre); }
    50% { box-shadow: 0 0 0 6px rgba(198, 40, 40, 0.35), 0 6px 24px var(--cdc-n-ombre); }
}
@media (prefers-reduced-motion: reduce) {
    .cdc-notification-urgent { animation: none; }
}
.cdc-notification-fermer {
    position: absolute;
    top: 0.25rem;
    right: 0.35rem;
    padding: 0 0.35rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
}
.cdc-notification-fermer:hover,
.cdc-notification-fermer:focus-visible { opacity: 1; }

/* Icône de rappel : dans le bandeau (cloche), ou en haut à droite de la page sans bandeau visible. */
.cdc-header .cdc-header-icon.cdc-header-notifications[hidden],
.cdc-notifications-rappel[hidden] { display: none; }
.cdc-header-notifications,
.cdc-notifications-rappel { position: relative; }
/* Erreur masquée (et aucune urgence) : cloche jaune. La cloche prend l'état du message masqué le plus important :
   urgent (rouge clignotant) > erreur (jaune) > info ou avertissement (normale). Commun 1.13.2. */
.cdc-header-notifications.cdc-avec-erreur { color: #ffd54f; opacity: 1; }
.cdc-notifications-rappel {
    position: fixed;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    background: #2f2f33;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.cdc-notifications-rappel.cdc-avec-erreur { background: #f9c934; color: #3a2c0c; }
/* Urgence masquée : la cloche pulse en surbrillance rouge jusqu'à ce que le message soit réaffiché ou fermé. */
.cdc-header .cdc-header-icon.cdc-header-notifications.cdc-avec-urgent,
.cdc-notifications-rappel.cdc-avec-urgent {
    background: #c62828;
    color: #fff;
    opacity: 1;
    animation: cdc-rappel-urgent 1.2s ease-in-out infinite;
}
@keyframes cdc-rappel-urgent {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.75); background-color: #c62828; }
    50% { box-shadow: 0 0 0 6px rgba(255, 82, 82, 0); background-color: #ff5252; }
}
@media (prefers-reduced-motion: reduce) {
    .cdc-header .cdc-header-icon.cdc-header-notifications.cdc-avec-urgent,
    .cdc-notifications-rappel.cdc-avec-urgent { animation: none; }
}
.cdc-notifications-nombre {
    position: absolute;
    top: -0.2rem;
    right: -0.25rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 0.55rem;
    background: #c62828;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}
.cdc-notifications-rappel .cdc-notifications-nombre { background: #fff; color: #b3261e; }

@media print {
    .cdc-notifications, .cdc-notifications-rappel { display: none !important; }
}