/* ==========================================================================
Alertes du site public —
Un bandeau à l'image du `.bo-banner-warning` du backoffice, transposé côté
public en respectant la charte graphique du tenant. Icône à gauche, bordure
gauche 4px de la couleur de l'état, fond soft calculé au vol par
`color-mix()` sur le jeton `--fo-alert-`.
Les couleurs viennent des jetons `--fo-alert-*` que `site_app.blade.php`
injecte dans le à partir des couleurs backoffice réglées par le
tenant dans Paramètres graphiques → Backoffice
(`bo_success` / `bo_warning` / `bo_info` / `bo_danger`). Les fallbacks
ci-dessous couvrent le cas où l'injection ne se fait pas (tenant qui n'a
rien réglé, ou incident au layout) : le tenant garde toujours des alertes
lisibles, avec les couleurs par défaut du socle backoffice.
========================================================================== */
:root {
--fo-alert-success: #2ecc71;
--fo-alert-warning: #f5a623;
--fo-alert-info: #4fa3ff;
--fo-alert-danger: #e05c70;
--fo-alert-radius: 8px;
--fo-alert-padding: 14px 18px;
--fo-alert-gap: 14px;
--fo-alert-max: 100%;
}
.fo-alert {
display: flex;
align-items: flex-start;
gap: var(--fo-alert-gap);
flex-wrap: wrap;
padding: var(--fo-alert-padding);
border-radius: var(--fo-alert-radius);
border: 1px solid transparent;
border-left-width: 4px;
margin: 0 0 16px;
font-size: 14px;
line-height: 1.5;
max-width: var(--fo-alert-max);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
animation: fo-alert-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.fo-alert.fo-alert--hiding {
animation: fo-alert-out 0.24s cubic-bezier(0.4, 0, 1, 1) forwards;
pointer-events: none;
}
@keyframes fo-alert-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fo-alert-out {
to { opacity: 0; transform: translateY(-6px); }
}
/* Les utilisateurs qui ont demandé « moins de mouvement » n'entendent plus
l'animation d'entrée — un bandeau qui pousse le contenu déclenche mal des
sensibilités vestibulaires. Le message reste visible instantanément. */
@media (prefers-reduced-motion: reduce) {
.fo-alert,
.fo-alert.fo-alert--hiding {
animation: none;
}
}
/* L'icône à gauche : taille lisible, alignée sur le premier titre / la
première ligne du message, sans grossir avec le texte. */
.fo-alert__icon {
font-size: 1.4rem;
line-height: 1.4;
flex-shrink: 0;
margin-top: 1px;
}
.fo-alert__body {
flex: 1;
min-width: 240px;
color: inherit;
}
.fo-alert__title {
font-weight: 700;
font-size: 14px;
margin: 0 0 4px;
color: inherit;
}
.fo-alert__message {
font-size: 14px;
margin: 0;
color: inherit;
word-wrap: break-word;
overflow-wrap: break-word;
}
.fo-alert__message > p {
margin: 0 0 8px;
}
.fo-alert__message > p:last-child {
margin-bottom: 0;
}
/* Bouton d'action : plein, texte contrasté sur la couleur de l'état.
`--fo-alert-action-fg` défaut blanc, mais chaque variante peut le passer
au noir si sa couleur de fond est trop claire pour rester lisible. */
.fo-alert__action {
background: var(--fo-alert-tone, currentColor);
color: var(--fo-alert-action-fg, #fff);
font-weight: 600;
font-size: 13px;
padding: 8px 16px;
border: none;
border-radius: 6px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: filter 0.15s ease, transform 0.1s ease;
flex-shrink: 0;
align-self: center;
display: inline-flex;
align-items: center;
gap: 6px;
}
.fo-alert__action:hover {
filter: brightness(1.08);
color: var(--fo-alert-action-fg, #fff);
text-decoration: none;
}
.fo-alert__action:focus-visible {
outline: 2px solid var(--fo-alert-tone, currentColor);
outline-offset: 2px;
}
.fo-alert__action:active {
transform: scale(0.97);
}
/* Bouton de fermeture : discret par défaut, cible tactile au pointer coarse.
Un `!important` sur `color` : certains thèmes public héritent une couleur
d'accent sur les