/* ==========================================================================
   RETOURS À L'UTILISATEUR : notification temporaire et boîte de confirmation
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Notification temporaire (toast)
   --------------------------------------------------------------------------
   Message court après une action réussie ou échouée.
   Le conteneur porte aria-live="polite" : les lecteurs d'écran annoncent
   la notification sans interrompre ce qui est en cours de lecture.
   -------------------------------------------------------------------------- */
.notifications {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Sur mobile, en bas et sur toute la largeur : à portée du pouce. */
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  pointer-events: none;
}

.notification {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
  pointer-events: auto;
  animation: notification-entree 150ms ease;
}

@keyframes notification-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.notification__texte {
  flex: 1;
}

.notification__fermer {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  cursor: pointer;
}

.notification__fermer:hover {
  background-color: var(--surface-2);
  color: var(--text);
}

/* La couleur du liseré gauche et de l'icône porte le sens du message. */
.notification--succes { border-left-color: var(--success); }
.notification--succes .notification__icone { color: var(--success); }

.notification--erreur { border-left-color: var(--danger); }
.notification--erreur .notification__icone { color: var(--danger); }

.notification--info { border-left-color: var(--info); }
.notification--info .notification__icone { color: var(--info); }

.notification--attention { border-left-color: var(--warning); }
.notification--attention .notification__icone { color: var(--warning); }

/* Sur ordinateur, les notifications passent en bas à droite. */
@media (min-width: 900px) {
  .notifications {
    left: auto;
    right: var(--space-6);
    bottom: var(--space-6);
    width: 380px;
  }
}

/* --------------------------------------------------------------------------
   2. Boîte de confirmation
   --------------------------------------------------------------------------
   Construite avec la balise <dialog> du HTML : le navigateur gère le
   voile, le piège à focus (la tabulation reste dans la boîte) et la touche
   Échap. Quelques lignes de JavaScript suffisent à l'ouvrir.
   -------------------------------------------------------------------------- */
.boite {
  width: min(440px, calc(100vw - var(--space-8)));
  padding: var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  color: var(--text);
}

.boite::backdrop {
  background-color: rgba(15, 15, 18, 0.5);
}

.boite__entete {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.boite__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-full);
  background-color: var(--danger-soft);
  color: var(--danger);
}

.boite__titre {
  font-size: var(--text-lg);
  margin-top: var(--space-1);
}

.boite__texte {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.boite__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   3. Indicateur de chargement HTMX
   --------------------------------------------------------------------------
   HTMX ajoute la classe « htmx-request » pendant qu'une requête est en
   cours. On s'en sert pour estomper légèrement la zone concernée : la page
   signale qu'elle travaille, sans rien faire sauter.
   -------------------------------------------------------------------------- */
.htmx-request.zone-chargeable,
.htmx-request .zone-chargeable {
  opacity: 0.6;
  transition: opacity var(--transition);
}