/* Les alertes du bas (vertes, rouges, bulles d'aide blanches, confirmations) : un seul fichier pour tous les sites et pour le site commun (hub). Les thèmes y ajoutent leur habillage dans leur style.css. */
/* ===== Notifications : un message qui arrive d'en bas, par-dessus tout (même les pop-in), vert pour ce qui a marché, rouge pour ce qui n'a pas marché ===== */
:root{--t-rayon:14px;--t-bordure:2px solid;--t-police:var(--texte,system-ui,sans-serif);--t-ombre:0 16px 34px -12px rgba(0,0,0,.5);
  --t-ok-fond:color-mix(in srgb,#2FA865 17%,var(--surface));--t-ok-bord:#1E8A4D;--t-ok-texte:color-mix(in srgb,#0B4A27 70%,var(--encre));
  --t-err-fond:color-mix(in srgb,#E04848 13%,var(--surface));--t-err-bord:#C62828;--t-err-texte:color-mix(in srgb,#6A1111 70%,var(--encre));
  --t-info-fond:var(--surface);--t-info-bord:var(--marque);--t-info-texte:var(--encre)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--t-ok-fond:#123A26;--t-ok-bord:#55D58F;--t-ok-texte:#DDF8E8;--t-err-fond:#471616;--t-err-bord:#FF8A8A;--t-err-texte:#FFE3E3}}
:root[data-theme="dark"]{--t-ok-fond:#123A26;--t-ok-bord:#55D58F;--t-ok-texte:#DDF8E8;--t-err-fond:#471616;--t-err-bord:#FF8A8A;--t-err-texte:#FFE3E3}
.toasts{position:fixed;z-index:100000;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);right:16px;left:auto;width:min(460px,calc(100% - 32px));display:grid;justify-items:end;gap:8px;padding:0;pointer-events:none}
.toast{--f:var(--t-info-fond);--b:var(--t-info-bord);--c:var(--t-info-texte);pointer-events:auto;position:relative;overflow:hidden;width:min(100%,540px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 8px 13px 14px;background:var(--f);color:var(--c);border:var(--t-bordure) var(--b);border-radius:var(--t-rayon);box-shadow:var(--t-ombre);font:600 15px/1.35 var(--t-police);animation:toast-entree .22s cubic-bezier(.2,.9,.3,1.1) both}
.toast--ok{--f:var(--t-ok-fond);--b:var(--t-ok-bord);--c:var(--t-ok-texte)}
.toast--erreur{--f:var(--t-err-fond);--b:var(--t-err-bord);--c:var(--t-err-texte)}
.toast__icone{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--b);color:var(--f)}
.toast__icone svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.toast__texte{margin:0;text-wrap:pretty}
.toast__fermer{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:inherit;font:400 26px/1 sans-serif;cursor:pointer}
.toast__fermer:hover{background:color-mix(in srgb,var(--b) 20%,transparent)}
.toast::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--b);transform-origin:left;animation:toast-barre var(--duree,6s) linear forwards}
.toast--pause::after{animation-play-state:paused}
.toast--sortie{animation:toast-sortie .16s ease-in both}
@keyframes toast-entree{from{transform:translateY(140%);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-sortie{to{transform:translateY(140%);opacity:0}}
@keyframes toast-barre{to{transform:scaleX(0)}}
@keyframes toast-fondu{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.toast{animation:toast-fondu .15s both}.toast--sortie{animation:none;opacity:0}.toast::after{display:none}}
.toast__lien{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.toast--confirmer{align-items:flex-start;pointer-events:auto}
.toast__corps{display:grid;gap:10px;min-width:0}
.toast__actions{display:flex;flex-wrap:wrap;gap:8px}
.toast--confirmer .btn{min-height:40px;white-space:normal}
.toast--aide{--f:var(--surface,#fff);--b:var(--marque,#2F5BD6);--c:var(--encre,#1B2230);border-color:var(--brume,rgba(0,0,0,.15))}
.toast--aide .toast__corps{gap:8px}
.toast__compris{justify-self:start;min-height:34px}
.toast{align-items:start}
.toast__icone{align-self:start}
.toast__fermer{align-self:start}

/* Les alertes se posent en bas : à droite sur ordinateur ; sur mobile, sur toute la largeur, au-dessus du menu du bas quand il y en a un (les bulles d'aide comprises) */
@media (max-width:779px){
  .toasts{left:12px;right:12px;width:auto;justify-items:center;bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  body:has(.nav-bas) .toasts{bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}
}
.toast__compris{min-height:40px}
.toast__lien--texte{white-space:normal;text-decoration-thickness:1px}