/* =====================================================================
   VIGIE — les messages passagers (toasts) et les erreurs de champ.

   UNE SEULE MATIÈRE POUR TOUS LES ÉCRANS (directeur, 16/10/2026 :
   « regarde comment les toasts s'affichent, et aussi l'erreur de champ
   — tout ça doit être personnalisé »). Chaque page qui charge vigie.js
   charge aussi cette feuille — un test y veille : le 20/08/2026, la
   boîte des toasts est devenue un « popover », remise à zéro dans
   vigie.css seulement, et l'écran de connexion, qui ne charge pas
   vigie.css, l'a montrée encadrée de blanc au milieu de l'écran.

   Les couleurs sont écrites ici, pas empruntées aux jetons de coque.css :
   les écrans d'entrée ne chargent pas la coque. Le vert est celui de la
   marque, et la carte sombre se lit sur les fonds clairs comme sombres.
   ===================================================================== */

/* --- la boîte ------------------------------------------------------- */

/* LE NAVIGATEUR HABILLE TOUT POPOVER : fond, bordure, rembourrage, et
   « inset: 0 ; margin: auto », qui le CENTRE. Chaque remise à zéro
   ci-dessous défait l'une de ces règles — « inset » avant « bottom » et
   « left », sans quoi il les écraserait. */
.toasts {
  position: fixed;
  inset: auto;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  height: auto;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 90;
  pointer-events: none;
}

/* --- le toast ------------------------------------------------------- */
/* UNE CARTE CLAIRE D'UNE LIGNE, AUX BOUTS ARRONDIS (directeur,
   19/10/2026 : « A, mais avec les extrémités arrondies comme ceux de la
   proposition B »). Le signe rond dit la nature du message avant qu'on
   le lise — coche verte pour ce qui est fait, point d'exclamation rouge
   pour ce qui a échoué — et une croix le ferme. La nuit, la carte passe
   au sombre (plus bas). */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  padding: 8px 8px 8px 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #090909;
  font: 500 14px/1.4 "Inter", system-ui, sans-serif;
  box-shadow: 0 10px 28px rgba(20, 30, 10, .16), 0 0 0 1px #e4e6e4;
  animation: toast-entre .28s cubic-bezier(.22, 1, .36, 1) both;
  pointer-events: auto;
}
.toast::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #88c73b no-repeat center / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4 5.8 10 11 4.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.toast-erreur::before {
  background-color: #e5484d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.2v4.6' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.6' r='1.2' fill='white'/%3E%3C/svg%3E");
}
.toast-texte { flex: 1 1 auto; min-width: 0; padding-right: 2px; }
.toast-fermer {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6f7469;
  font: 400 18px/1 "Inter", system-ui, sans-serif;
  cursor: pointer;
}
.toast-fermer:hover { background: rgba(9, 9, 9, .07); color: #090909; }
.toast-fermer:focus-visible { outline: 2px solid #88c73b; outline-offset: 1px; }
/* LA NUIT : la même carte, sombre, plus claire que les fenêtres (comme
   les menus flottants) et cernée d'un liseré qui se voit. */
:root[data-theme="sombre"] .toast {
  background: #2a2f24;
  color: #f4f6f1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .14);
}
:root[data-theme="sombre"] .toast-fermer { color: #b3baab; }
:root[data-theme="sombre"] .toast-fermer:hover { background: rgba(255, 255, 255, .1); color: #ffffff; }
.toast-sortant { opacity: 0; transform: translateY(8px);
                 transition: opacity .25s ease, transform .25s ease; }

@keyframes toast-entre {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* SOUS 1000 PIXELS, LA BARRE D'ICÔNES DU LOGICIEL DESCEND EN BAS DE
   L'ÉCRAN (coque.css) : le message se pose au-dessus d'elle, jamais
   dessus — vu à 390 pixels le 16/10/2026. Les écrans d'entrée n'ont
   pas cette barre : la règle ne les touche pas. */
@media (max-width: 1000px) {
  body:has(.rail) .toasts { bottom: 100px; }
}

/* --- l'erreur de champ ---------------------------------------------- */

/* LE CHAMP FAUTIF SE MONTRE EN ROUGE, et le message se pose juste
   dessous — à la place de la bulle du navigateur, qui n'avait ni le
   dessin, ni toujours la langue de Vigie (vigie.js la retire). Le rouge
   suit le thème quand la coque le définit ; sinon, celui du panneau
   clair des écrans d'entrée. */
/* UN SEUL ANNEAU ROUGE : la bordure propre au champ (verte au focus sur
   les écrans d'entrée) s'efface derrière lui, sinon les deux couleurs
   se chevauchent. Au focus, un halo s'ajoute — on voit toujours où
   l'on tape. */
input[aria-invalid="true"], select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: transparent;
  box-shadow: 0 0 0 2px #e5484d;
}
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  border-color: transparent;
  outline: none;
  box-shadow: 0 0 0 2px #e5484d, 0 0 0 6px rgba(229, 72, 77, .22);
}
.erreur-champ {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0 6px;
  font: 500 13px/1.4 "Inter", system-ui, sans-serif;
  color: var(--rouge-texte, #b42318);
  text-align: left;
  animation: erreur-entre .2s ease-out both;
}
.erreur-champ::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e5484d no-repeat center / 10px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.2v4.6' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='10.6' r='1.4' fill='white'/%3E%3C/svg%3E");
}

@keyframes erreur-entre {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Le mouvement se coupe quand la personne le refuse, comme dans la
   coque — l'information, elle, reste. */
@media (prefers-reduced-motion: reduce) {
  .toast, .erreur-champ { animation: none; }
  .toast-sortant { transition: none; }
}