/* ================================================================
   SWEETALERT2 (swal3) — Refonte UI/UX — inspiré Sonner / shadcn
   Sources: emilkowal.ski/ui/building-a-toast-component
            ui.shadcn.com/docs/components/radix/sonner
            carbondesignsystem.com/patterns/notification-pattern
   ================================================================ */

/* --- Popups / modals (fond thème) --- */
div:where(.swal3-container) div:where(.swal3-popup),
div:where(.swal3-container) .swal3-range,
div:where(.swal3-container) .swal3-radio,
div:where(.swal3-container) .swal3-checkbox {
  background-color: var(--bkg-color1) !important;
}

.swal3-popup.swal3-toast .swal3-select,
.swal3-popup.swal3-toast .swal3-actions {
  display: none !important;
}

/* ================================================================
   TOAST — CONTENEUR  (haut-droite)
   ================================================================ */

.swal3-container.swal3-top-end,
.swal3-container.swal3-top-right {
  top: 1.25rem !important;
  right: 1.25rem !important;
  bottom: auto !important;
  left: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  z-index: 9999 !important;
}

/* ================================================================
   TOAST — CARTE
   ================================================================ */

.swal3-popup.swal3-toast {
  /* Reset layout SweetAlert */
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;

  width: 360px !important;
  min-width: 280px !important;
  max-width: 420px !important;
  padding: 0.75rem 0.875rem 0.5rem 1.125rem !important;
  margin: 0 !important;

  background: #FFFFFF !important;
  border-radius: 14px !important;
  border: 1px solid #E9ECF0 !important;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.07) !important;

  /* Animation entrée — slide depuis le haut */
  animation: toastIn 0.36s cubic-bezier(0.21, 1.02, 0.73, 1) forwards !important;

  position: relative !important;
  overflow: hidden !important;
  cursor: default;
}

@keyframes toastIn {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Sortie */
.swal3-popup.swal3-toast.swal3-hide {
  animation: toastOut 0.2s ease-in forwards !important;
}

@keyframes toastOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 120px;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    max-height: 0;
  }
}

/* Accessibilité : supprime les animations si l'utilisateur le préfère */
@media (prefers-reduced-motion: reduce) {
  .swal3-popup.swal3-toast,
  .swal3-popup.swal3-toast.swal3-hide {
    animation: none !important;
    transition: opacity 0.15s ease !important;
  }
}

/* ================================================================
   TOAST — ICÔNE  (colonne 1)
   ================================================================ */

.swal3-popup.swal3-toast .swal3-icon {
  /* Placement dans la grille */
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 0.75rem 0 0 !important;
  flex-shrink: 0 !important;
  border-width: 2px !important;
  font-size: 0.7rem !important;
  border: none !important;
}

/* Couleurs icône selon type */
.swal3-popup.swal3-toast .swal3-icon.swal3-success {
  color: #16A34A !important;
}
.swal3-popup.swal3-toast .swal3-icon.swal3-success [class^='swal3-success-line'] {
  background-color: #16A34A !important;
}
.swal3-popup.swal3-toast .swal3-icon.swal3-success .swal3-success-ring {
  border-color: rgba(22, 163, 74, 0.3) !important;
}
.swal3-popup.swal3-toast .swal3-icon.swal3-success .swal3-success-fix {
  background-color: transparent !important;
}

.swal3-popup.swal3-toast .swal3-icon.swal3-error {
  color: #DC2626 !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
}
.swal3-popup.swal3-toast .swal3-icon.swal3-error [class^='swal3-x-mark-line'] {
  background-color: #DC2626 !important;
}

.swal3-popup.swal3-toast .swal3-icon.swal3-warning {
  color: #D97706 !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
}
.swal3-popup.swal3-toast .swal3-icon.swal3-warning .swal3-icon-content {
  color: #D97706 !important;
}

.swal3-popup.swal3-toast .swal3-icon.swal3-info {
  color: #2563EB !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}
.swal3-popup.swal3-toast .swal3-icon.swal3-info .swal3-icon-content {
  color: #2563EB !important;
}

.swal3-popup.swal3-toast .swal3-icon.swal3-question {
  color: #7C3AED !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
}
.swal3-popup.swal3-toast .swal3-icon.swal3-question .swal3-icon-content {
  color: #7C3AED !important;
}

/* ================================================================
   TOAST — TITRE / MESSAGE  (colonne 2)
   ================================================================ */

.swal3-popup.swal3-toast .swal3-title {
  grid-column: 2 !important;
  grid-row: 1 !important;

  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #0F172A !important;
  word-break: break-word !important;
  white-space: normal !important;
  letter-spacing: -0.01em;
}

.swal3-popup.swal3-toast .swal3-html-container {
  grid-column: 2 !important;
  grid-row: 2 !important;

  padding: 0.15rem 0 0 !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #6B7280 !important;
}

/* ================================================================
   TOAST — BOUTON FERMER  (colonne 3)
   ================================================================ */

.swal3-popup.swal3-toast .swal3-close {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: flex-start !important;

  position: relative !important;
  top: auto !important;
  right: auto !important;
  /* Cible tactile mini 40×40 (WCAG 2.5.5). Le glyphe « × » reste petit via
     font-size, c'est le padding qui élargit la zone cliquable. */
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 0 0 0.25rem !important;
  padding: 0 !important;
  flex-shrink: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: #9CA3AF !important;
  font-size: 1.125rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  opacity: 0.7 !important;
}

@media (hover: hover){.swal3-popup.swal3-toast .swal3-close:hover{
  background: #F3F4F6 !important;
  color: #374151 !important;
  opacity: 1 !important;
}}

/* ================================================================
   TOAST — BARRE DE PROGRESSION (fil coloré en bas)
   ================================================================ */

.swal3-popup.swal3-toast .swal3-timer-progress-bar-container {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: transparent !important;
  border-radius: 0 0 12px 12px !important;
  overflow: hidden !important;
}

.swal3-popup.swal3-toast .swal3-timer-progress-bar {
  height: 2px !important;
  background: #D1D5DB !important;
  border-radius: 0 0 12px 12px !important;
}

/* Couleur de la barre selon type */
.swal3-popup.swal3-toast:has(.swal3-success) .swal3-timer-progress-bar {
  background: #16A34A !important;
  opacity: 0.5;
}
.swal3-popup.swal3-toast:has(.swal3-error) .swal3-timer-progress-bar {
  background: #DC2626 !important;
  opacity: 0.5;
}
.swal3-popup.swal3-toast:has(.swal3-warning) .swal3-timer-progress-bar {
  background: #D97706 !important;
  opacity: 0.5;
}
.swal3-popup.swal3-toast:has(.swal3-info) .swal3-timer-progress-bar {
  background: #2563EB !important;
  opacity: 0.5;
}

/* ================================================================
   TOAST — INDICATEUR COLORÉ GAUCHE (petit point discret)
   Inspiré de Vercel / Linear — subtil, pas une bande épaisse
   ================================================================ */

.swal3-popup.swal3-toast::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  min-height: 24px;
  border-radius: 0 3px 3px 0;
  opacity: 0.85;
}

.swal3-popup.swal3-toast:has(.swal3-success)::after  { background: #16A34A; }
.swal3-popup.swal3-toast:has(.swal3-error)::after    { background: #DC2626; }
.swal3-popup.swal3-toast:has(.swal3-warning)::after  { background: #D97706; }
.swal3-popup.swal3-toast:has(.swal3-info)::after     { background: #2563EB; }
.swal3-popup.swal3-toast:has(.swal3-question)::after { background: #7C3AED; }

/* ================================================================
   TOAST — THÈME SOMBRE  (suit le thème de l'app)
   ================================================================ */

:root.dark .swal3-popup.swal3-toast {
  background: #1C1C1E !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

:root.dark .swal3-popup.swal3-toast .swal3-title {
  color: #F9FAFB !important;
}

:root.dark .swal3-popup.swal3-toast .swal3-html-container {
  color: #9CA3AF !important;
}

@media (hover: hover){:root.dark .swal3-popup.swal3-toast .swal3-close:hover{
  background: rgba(255, 255, 255, 0.08) !important;
  color: #E5E7EB !important;
}}

/* ================================================================
   TOAST — HOVER  (pause sur survol, léger feedback visuel)
   ================================================================ */

@media (hover: hover){.swal3-popup.swal3-toast:hover{
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.13),
    0 20px 40px -8px rgba(0, 0, 0, 0.10) !important;
  transform: translateY(-1px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}}

/* ================================================================
   TOAST — MOBILE  (bas-centre, pleine largeur)
   ================================================================ */

@media (max-width: 480px) {
  .swal3-container.swal3-top-end,
  .swal3-container.swal3-top-right {
    top: 0.75rem !important;
    right: 0.75rem !important;
    left: 0.75rem !important;
    width: auto !important;
    max-width: calc(100% - 1.5rem) !important;
    bottom: auto !important;
    align-items: stretch !important;
  }

  .swal3-popup.swal3-toast {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    border-radius: 12px !important;
  }
}

/* ================================================================
   MODALES (non-toast) — THÈME SOMBRE
   Le fichier ne couvrait que les toasts ; les modales swal3 gardaient
   titre et contenu en blanc sur fond blanc (les défauts du lib bundle
   priment quand --bkg-color1 ne touche que le conteneur). On aligne
   sur les variables --eb-* utilisées partout ailleurs.
   ================================================================ */

:root.dark .swal3-popup:not(.swal3-toast) {
  background-color: var(--eb-surface, #1C1C1C) !important;
  color: var(--eb-text, #E2E8F0) !important;
}

:root.dark .swal3-popup:not(.swal3-toast) .swal3-title,
:root.dark .swal3-popup:not(.swal3-toast) .swal3-html-container,
:root.dark .swal3-popup:not(.swal3-toast) .swal3-content {
  color: var(--eb-text, #E2E8F0) !important;
}

:root.dark .swal3-popup:not(.swal3-toast) .swal3-close {
  color: var(--eb-text-secondary, #94A3B8) !important;
}

:root.dark .swal3-popup:not(.swal3-toast) .swal3-input,
:root.dark .swal3-popup:not(.swal3-toast) .swal3-textarea,
:root.dark .swal3-popup:not(.swal3-toast) .swal3-select {
  background-color: var(--eb-surface-hover, #252525) !important;
  color: var(--eb-text, #E2E8F0) !important;
  border-color: var(--eb-border, #333) !important;
}

/* SweetAlert2 (swal2-) — html container manquait en dark.
   Le titre est géré par dashboard-modern.css. */
:root.dark .swal2-popup .swal2-html-container,
:root.dark .swal2-popup .swal2-content {
  color: var(--eb-text, #E2E8F0) !important;
}

/* ================================================================
   TOAST EMPILABLE (système maison — .eb-toast)
   SweetAlert ne gère qu'une instance à la fois : les toasts ne
   s'empilaient pas (le nouveau remplaçait l'ancien). Ce système
   indépendant les empile verticalement, le plus récent en haut.
   Mêmes couleurs / look que les toasts swal3 ci-dessus.
   ================================================================ */

.eb-toast-stack {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  bottom: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 99999;
  pointer-events: none; /* le conteneur laisse passer, chaque toast réactive */
  max-width: 420px;
}

.eb-toast {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;

  width: 360px;
  min-width: 280px;
  max-width: 420px;
  padding: 0.75rem 0.875rem 0.75rem 1.125rem;

  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid #E9ECF0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.07);

  overflow: hidden;
  cursor: default;
  animation: eb-toast-in 0.36s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

@keyframes eb-toast-in {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.eb-toast.eb-toast--hide {
  animation: eb-toast-out 0.22s ease-in forwards;
}

@keyframes eb-toast-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); max-height: 140px; margin-bottom: 0; }
  100% { opacity: 0; transform: translateY(-8px) scale(0.97); max-height: 0; margin-bottom: -0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-toast,
  .eb-toast.eb-toast--hide {
    animation: none;
    transition: opacity 0.15s ease;
  }
}

/* Hover : pause + léger feedback (le timer JS est mis en pause en parallèle) */
@media (hover: hover){.eb-toast:hover{
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.13),
    0 20px 40px -8px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}}

/* Icône (colonne 1) */
.eb-toast__icon {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin-right: 0.75rem;
  font-size: 1.05rem;
  line-height: 1;
}
.eb-toast--success  .eb-toast__icon { color: #16A34A; }
.eb-toast--error    .eb-toast__icon { color: #DC2626; }
.eb-toast--warning  .eb-toast__icon { color: #D97706; }
.eb-toast--info     .eb-toast__icon { color: #2563EB; }
.eb-toast--question .eb-toast__icon { color: #7C3AED; }
.eb-toast__icon:empty { display: none; }

/* Message (colonne 2) */
.eb-toast__body {
  grid-column: 2;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: #0F172A;
  word-break: break-word;
  white-space: normal;
  letter-spacing: -0.01em;
}
.eb-toast__body a { color: inherit; text-decoration: underline; }
/* Bouton d'action dans un toast (ex. « Cette adresse mail est bien valide ») */
.eb-toast-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
}
@media (hover: hover){.eb-toast-btn:hover{ background: rgba(0, 0, 0, 0.06); }}
@media (hover: hover){:root.dark .eb-toast-btn:hover{ background: rgba(255, 255, 255, 0.12); }}
/* Le bouton est aussi posé sur un <a> (bannière « données de démonstration ») :
   `.eb-toast__body a` souligne tous les liens du toast et l'emporte en
   spécificité sur `.eb-toast-btn` — il faut neutraliser le soulignement ici. */
a.eb-toast-btn,a.eb-toast-btn:focus{ text-decoration: none; color: inherit; }
@media (hover: hover){a.eb-toast-btn:hover{ text-decoration: none; color: inherit; }}

/* Même chose pour un bouton Bootstrap placé dans un toast (« Reconnecter
   HelloAsso », index_d.php) : le soulignement barrait le libellé au milieu
   d'un aplat vert. `color: inherit` serait faux ici — la couleur du texte
   vient de la variante du bouton (btn-success = blanc). */
.eb-toast__body a.btn,.eb-toast__body a.btn:focus{ text-decoration: none; }
@media (hover: hover){.eb-toast__body a.btn:hover{ text-decoration: none; }}

/* Toast activité : contenu riche avec actions. Les styles vivent ici, avec le
   système de toast, pour éviter un rendu texte si dashboard-modern.css arrive
   trop tard ou n'est pas chargé sur une page. */
.eb-toast.eb-toast--activity {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.eb-toast.eb-toast--activity .eb-toast__icon {
  display: none;
}
.eb-toast.eb-toast--activity .eb-toast__body {
  grid-column: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
}
.eb-toast.eb-toast--activity .eb-toast__close {
  grid-column: 2;
}
.eb-toast .eb-activity-toast {
  text-align: left;
  line-height: 1.35;
  min-width: 240px;
}
.eb-toast .eb-activity-toast__head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--eb-primary, #2563EB);
  margin-bottom: 4px;
}
.eb-toast .eb-activity-toast__title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
  word-break: break-word;
}
.eb-toast .eb-activity-toast__meta {
  font-size: 12px;
  color: #475569;
  margin-top: 2px;
}
.eb-toast .eb-activity-toast__meta i {
  width: 14px;
  margin-right: 4px;
  opacity: 0.8;
}
.eb-toast .eb-activity-toast__actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.eb-toast .eb-activity-toast__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  min-height: 36px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
}
.eb-toast .eb-activity-toast__btn:focus{
  transform: translateY(-1px);
  text-decoration: none !important;
}
@media (hover: hover){.eb-toast .eb-activity-toast__btn:hover{
  transform: translateY(-1px);
  text-decoration: none !important;
}}
.eb-toast .eb-activity-toast__btn--primary {
  background: var(--eb-primary, #2563EB);
  color: #ffffff !important;
}
.eb-toast .eb-activity-toast__btn--primary:focus{
  background: #1d4ed8;
}
@media (hover: hover){.eb-toast .eb-activity-toast__btn--primary:hover{
  background: #1d4ed8;
}}
.eb-toast .eb-activity-toast__btn--ghost {
  background: #f1f5f9;
  color: #0f172a !important;
  border: 1px solid #e2e8f0;
}
.eb-toast .eb-activity-toast__btn--ghost:focus{
  background: #e2e8f0;
}
@media (hover: hover){.eb-toast .eb-activity-toast__btn--ghost:hover{
  background: #e2e8f0;
}}

/* Bouton fermer (colonne 3) — cible tactile 40×40 (WCAG 2.5.5) */
.eb-toast__close {
  grid-column: 3;
  align-self: flex-start;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: -0.25rem -0.25rem -0.25rem 0.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #9CA3AF;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  opacity: 0.7;
}
@media (hover: hover){.eb-toast__close:hover{
  background: #F3F4F6;
  color: #374151;
  opacity: 1;
}}

/* Indicateur coloré gauche (subtil, façon Vercel / Linear) */
.eb-toast::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  min-height: 24px;
  border-radius: 0 3px 3px 0;
  opacity: 0.85;
}
.eb-toast--success::after  { background: #16A34A; }
.eb-toast--error::after    { background: #DC2626; }
.eb-toast--warning::after  { background: #D97706; }
.eb-toast--info::after     { background: #2563EB; }
.eb-toast--question::after { background: #7C3AED; }

/* Barre de progression (auto-fermeture) */
.eb-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
}
.eb-toast__progress > span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  opacity: 0.5;
  animation: eb-toast-progress var(--eb-toast-duration, 3000ms) linear forwards;
}
.eb-toast--paused .eb-toast__progress > span { animation-play-state: paused; }
.eb-toast--success  .eb-toast__progress > span { background: #16A34A; }
.eb-toast--error    .eb-toast__progress > span { background: #DC2626; }
.eb-toast--warning  .eb-toast__progress > span { background: #D97706; }
.eb-toast--info     .eb-toast__progress > span { background: #2563EB; }
.eb-toast--question .eb-toast__progress > span { background: #7C3AED; }

@keyframes eb-toast-progress {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* Thème sombre */
:root.dark .eb-toast {
  background: #1C1C1E;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.5);
}
:root.dark .eb-toast__body { color: #F9FAFB; }
@media (hover: hover){:root.dark .eb-toast__close:hover{
  background: rgba(255, 255, 255, 0.08);
  color: #E5E7EB;
}}
:root.dark .eb-toast .eb-activity-toast__title { color: #f1f5f9; }
:root.dark .eb-toast .eb-activity-toast__meta { color: #cbd5e1; }
:root.dark .eb-toast .eb-activity-toast__btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #f1f5f9 !important;
  border-color: rgba(255,255,255,0.14);
}
:root.dark .eb-toast .eb-activity-toast__btn--ghost:focus{
  background: rgba(255,255,255,0.16);
}
@media (hover: hover){:root.dark .eb-toast .eb-activity-toast__btn--ghost:hover{
  background: rgba(255,255,255,0.16);
}}

/* Mobile : pleine largeur, et TOUS LES TOASTS AU MEME ENDROIT — EN HAUT.

   Cette pile porte deux objets qui n'ont rien a voir :
     - les toasts ephemeres (« Sauvegarde », « Impossible de joindre le
       serveur ») : quelques secondes, puis ils s'effacent seuls ;
     - les bandeaux d'etat (donnees de demonstration, agrement expire,
       abonnement, droits modifies, connexion HelloAsso a retablir, activite en
       cours) : ils ne partent QUE si on les ferme.

   HISTORIQUE — quatre placements en quatre jours, un signalement a chaque fois.
   d7dc33cc3 puis 69b3390cf ont ancre TOUTE la pile EN BAS parce qu'en haut les
   bandeaux persistants recouvraient la barre de navigation et, chaque carte
   retablissant `pointer-events: auto`, la rendaient intouchable indefiniment.
   d18ff9a42 a separe les deux groupes — ephemeres en haut, persistants en bas —
   parce qu'un toast ephemere pousse par les bandeaux flottait au milieu de
   l'ecran. 9afead355 (26/08/2026) a tout ramene en haut sur decision produit.
   3ae9e6db8 a redescendu les persistants en bas parce que le bandeau
   « activite en cours » couchait sur la barre d'onglets de l'ecran.

   SIGNALE A NOUVEAU LE 28/08/2026, capture de l'app Android a l'appui : « le
   toast apparait au milieu ». Mesure locale a 412x759 (la WebView de l'app),
   bandeau « activite en cours » seul avec un toast ephemere : le bandeau tombait
   a y 493-656 sur 759, centre a 76 % de la hauteur. Il ne s'agissait pas d'un
   defaut de calcul : c'est ce que produit MECANIQUEMENT un `bottom` + une marge
   automatique. La pile occupait toute la hauteur utile (60 -> 671) et le
   `margin-top: auto` du premier persistant le collait EN BAS DE CETTE BOITE,
   c'est-a-dire en plein milieu de l'ecran des que la boite est plus haute que
   la carte.

   DECISION (Joseph, 28/08/2026) : « en haut dans TOUS LES CAS sur mobile ». On
   revient donc a UN SEUL point d'ancrage — le meme qu'au bureau — pour les
   ephemeres comme pour les persistants.

   🔴 CE QUI REND LE HAUT STRUCTUREL, ET PAS SEULEMENT DECLARE : la pile n'a
   PLUS DE `bottom`. Sa hauteur redevient AUTOMATIQUE (bornee par `max-height`,
   qui laisse le defilement interne quand les bandeaux s'accumulent), donc il
   n'y a plus UN SEUL PIXEL d'espace libre a distribuer. Une marge automatique —
   celle d'hier, ou celle qu'une regle future reintroduirait — n'a alors plus
   rien a pousser et se resout a zero. Un simple `top:` se laisse defaire par un
   `margin-top: auto`; une boite sans espace libre, non. Le garde-fou explicite
   ci-dessous dit la meme chose une seconde fois, et scripts/test_toast_mobile_en_haut.php
   refuse le retour du `bottom` et de la marge automatique.

   ⚠️ CE QUI RESTE DU GARDE-FOU D'ORIGINE : le `top` decale la pile SOUS la barre
   du haut (48px : menu, notifications, ajout rapide), qui restait masquee quand
   la pile montait a 12px du bord.

   ⚠️ LE COMPROMIS ASSUME : un bandeau persistant recouvre de nouveau la rangee
   qui suit la barre du haut (onglets, ligne de recherche) tant qu'il est ouvert
   — c'est ce qui avait motive 3ae9e6db8. Sa croix de fermeture, elle, reste
   toujours atteignable, et la fermeture est retenue jusqu'a la fin de
   l'activite. Rendre cette rangee visible sans deplacer le bandeau demanderait
   de RESERVER la hauteur du groupe persistant en tete de contenu
   (`#space-left`), pas de redescendre la pile.

   #12461 — LA LARGEUR SEULE NE DESIGNE PAS UN TELEPHONE. Ancre au seul
   `max-width: 767.98px`, ce decalage sautait des qu'on TOURNAIT l'appareil :
   un iPhone 13/14/15/16 en paysage mesure 844 a 956px, la pile repassait a
   12px du haut et remasquait la barre. `(hover: none)` designe l'appareil sans
   souris dans les DEUX orientations et couvre aussi la tablette tactile. Le
   rendu bureau ne bouge pas. */
@media (max-width: 767.98px), (hover: none) {
  .eb-toast-stack {
    /* Sous la barre du haut (48px en portrait, 52 au-dela de 768), ephemeres et
       persistants confondus. Le conteneur reste `pointer-events: none`. */
    top: calc(3.75rem + var(--eb-safe-top, env(safe-area-inset-top, 0px)));
    /* 🔴 NE PAS REMETTRE DE `bottom` ICI (cf. le bloc ci-dessus) : il rendrait
       a la pile une hauteur pleine, donc de l'espace libre, donc de quoi
       repousser les cartes vers le bas. La borne passe par `max-height`, qui
       plafonne sans jamais etirer. */
    bottom: auto;
    /* Meme fenetre utile qu'avant — on s'arrete au-dessus du bouton flottant et
       de la barre de navigation (5.5rem) — mais en PLAFOND, pas en ancrage. La
       pile reste defilable si les bandeaux s'accumulent. */
    max-height: calc(100% - 9.25rem
                     - var(--eb-safe-top, env(safe-area-inset-top, 0px))
                     - var(--eb-safe-bottom, env(safe-area-inset-bottom, 0px)));
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Garde-fou explicite : aucune carte ne redescend, quel que soit son groupe.
     Redondant avec la hauteur automatique ci-dessus — et c'est voulu : les deux
     regles ont ete perdues tour a tour, celle-ci nomme l'intention. L'espacement
     vient du `gap` de la pile, jamais d'une marge de carte. */
  .eb-toast-stack > .eb-toast {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* « TOUS LES TOASTS AU MEME ENDROIT » compte aussi les derniers toasts
     sweetalert : deux appels vivent encore hors de la pile maison
     (bilan_victime_admin.php et js/adminMessageToast.js — les autres passent par
     `toast()`, donc par la pile) et le bundle les pose a 12px du bord,
     c'est-a-dire PAR-DESSUS la barre du haut.
     On leur donne le meme ancrage qu'a la pile — sans quoi « en haut » veut dire
     deux choses selon le toast. Le decalage du bas reste `auto` : ces toasts
     n'ont jamais eu de `bottom`, ils ne peuvent donc pas redescendre. */
  .swal3-container.swal3-top-end,
  .swal3-container.swal3-top-right,
  .swal2-container.swal2-top-end,
  .swal2-container.swal2-top-right {
    top: calc(3.75rem + var(--eb-safe-top, env(safe-area-inset-top, 0px))) !important;
    bottom: auto !important;
  }
}

/* La pile est BORNEE en hauteur sur telephone (`max-height` ci-dessus). Sans ce
   `flex: 0 0 auto`, le `flex-shrink: 1` par defaut ecrasait les cartes des que
   leur total depassait cette hauteur : texte tronque et bouton de fermeture
   coupe, au lieu du defilement voulu. Inoffensif sur la pile a hauteur
   automatique du bureau. */
.eb-toast { flex: 0 0 auto; }

/* La PLEINE LARGEUR, elle, reste conditionnee a l'ecran etroit — et pas au
   tactile. Etendue au paysage d'un telephone (844px de large, 390 de haut),
   elle faisait traverser toute la page a la pile : mesuree a 820px de large,
   elle passait par-dessus la barre laterale et rendait six commandes
   intouchables (sous-menus, envoi de message, champ de recherche), soit plus
   que le defaut qu'on corrigeait. Au-dela de 768px la pile reprend sa largeur
   de bureau, calee a droite, ou il n'y a que le bouton flottant — que le
   `max-height` ci-dessus enjambe deja. */
@media (max-width: 767.98px) {
  .eb-toast-stack {
    right: 0.75rem;
    left: 0.75rem;
    max-width: calc(100% - 1.5rem);
    align-items: stretch;
  }
  .eb-toast {
    width: 100%;
    max-width: 100%;
    min-width: unset;
    border-radius: 12px;
  }
  .eb-toast .eb-activity-toast {
    min-width: 0;
  }
}

/* ==========================================================================
   #12461 — LE FOND DÉFILAIT DERRIÈRE LA MODALE, SUR IPHONE SEULEMENT.

   Le bundle sweetalert embarque un correctif iOS : quand l'User-Agent est un
   iPhone/iPad — et uniquement là — il pose la classe `swal3-iosfix` sur le
   <body> et y écrit un décalage, en comptant sur une règle CSS `position:fixed`
   pour figer la page. Cette règle n'existait dans AUCUNE feuille du produit :
   le correctif était inerte. Mesuré : `body.position` restait `static` et le
   fond passait de 400 à 700px de défilement, modale ouverte.

   ⚠ NE PAS écrire `.swal3-iosfix { position: fixed }`, la voie qui semble
   évidente. Le bundle lit `document.body.scrollTop` pour calculer son décalage,
   or en mode standard c'est `documentElement.scrollTop` qui porte la valeur :
   il écrit donc toujours `top: 0px`. Rendre le body fixed à ce moment-là fait
   SAUTER la page en haut à chaque ouverture de modale (mesuré : 400 → 0).

   On bloque donc le défilement là où il a lieu — l'élément racine — sans rien
   déplacer. La position est conservée à la fermeture, et la modale garde son
   propre défilement interne (`.swal2-container` est en overflow-y:auto), donc
   une modale plus haute que l'écran reste lisible jusqu'en bas. Vérifié sur
   iPhone et sur bureau, modale courte et modale de 3193px. */
html:has(body.swal2-shown),
html:has(body.swal3-shown) {
    overflow: hidden;
}