/* =============================================================
   webroot/css/alerts.css — alertes (chargé sur TOUTES les pages, dans le layout)
   Bandeau du site, page « Alertes et sécurité », cartes d'alerte.
   La gravité est toujours écrite en toutes lettres : la couleur n'est qu'un repère.
   ============================================================= */

/* ── Bandeau en haut de page ── */
.site-alert { color: #fff; }
.site-alert--info   { background: #0b5ed7; }
.site-alert--yellow { background: #ffe066; color: #3d2e00; }
.site-alert--orange { background: #c2410c; }
.site-alert--red    { background: #b91c1c; }
.site-alert--purple { background: #6b21a8; }
.site-alert--grey   { background: #4b5563; }
.site-alert + .site-alert { border-top: 1px solid rgba(255, 255, 255, .35); }
.site-alert__inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.site-alert__icon { font-size: 1.25rem; flex: 0 0 auto; }
.site-alert__text { margin: 0; flex: 1 1 auto; }
.site-alert__link {
    flex: 0 0 auto;
    padding: .25rem .7rem;
    border: 2px solid currentColor;
    border-radius: .375rem;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.site-alert__link:hover,
.site-alert__link:focus-visible { background: rgba(255, 255, 255, .2); color: inherit; }
.site-alert__link:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* ── Carte d'alerte (fiche de lieu et page Alertes) ── */
.place-alert {
    display: flex;
    gap: .8rem;
    margin-bottom: .6rem;
    padding: .8rem 1rem;
    border-left: 6px solid #0b5ed7;
    border-radius: .375rem;
    background: #e7f1ff;
    color: #212529;
}
.place-alert--yellow { border-color: #c99700; background: #fff8db; }
.place-alert--orange { border-color: #c2410c; background: #ffedd5; }
.place-alert--red    { border-color: #b91c1c; background: #fde8e8; }
.place-alert--purple { border-color: #6b21a8; background: #f3e8ff; }
.place-alert--grey   { border-color: #4b5563; background: #f3f4f6; }
.place-alert__icon { margin-top: .2rem; font-size: 1.4rem; }
.place-alert__type {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.place-alert__title { margin: .1rem 0 .3rem; font-size: 1.1rem; font-weight: 800; }
.place-alert__message { margin: 0 0 .3rem; }
.place-alert__meta { margin: 0; font-size: .85rem; }

/* ── Page « Alertes et sécurité » ── */
.alerts-page__intro { font-size: 1.05rem; }
.alerts-page__none { padding: .8rem 1rem; border-radius: .375rem; background: #e8f5e9; }
.place-alert__title { scroll-margin-top: 6rem; }
.alerts-levels { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.alerts-levels dt { font-weight: 700; }
.alerts-levels dd { margin: 0; }
.alerts-dot {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin-right: .4rem;
    border: 1px solid #555;
    border-radius: 50%;
    vertical-align: baseline;
}
.alerts-dot--yellow { background: #ffe066; }
.alerts-dot--orange { background: #c2410c; }
.alerts-dot--red    { background: #b91c1c; }
.alerts-dot--purple { background: #6b21a8; }
.alerts-dot--grey   { background: #6b7280; }

/* Numéros d'urgence (mêmes classes que la fiche de lieu) */
.place-emergency { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.place-emergency__link {
    display: flex; align-items: center; gap: .5rem; min-height: 44px;
    padding: .3rem .7rem; border: 1px solid #b45309; border-radius: .375rem;
    background: #fff; color: #212529; text-decoration: none;
}
.place-emergency__link:hover,
.place-emergency__link:focus-visible { background: #fff7ed; }
.place-emergency__number { font-size: 1.15rem; font-weight: 800; color: #9a3412; }
.place-emergency__service { font-size: .85rem; }

@media (max-width: 575.98px) {
    .site-alert__inner { flex-wrap: wrap; }
    .alerts-levels { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
    .site-alert, .place-alert { border: 2px solid CanvasText; }
}