/* ============================================
   FICHIER : assets/css/ui-kit.css
   VERSION : 2026.09.29
   OBJET   : Styles du kit UI commun (toasts, modale de confirmation,
             boutons) + socle d'accessibilité (focus visible).
   CHARGÉ PAR : ReZoo.html, proposals.html, admin.html, auth.html
   ============================================ */

/* ---------- Accessibilité : focus toujours visible au clavier ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid #4a9eff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Les éléments décoratifs (emojis d'icônes) ne doivent pas être lus 2 fois.
   ⚠️ Volontairement CIBLÉ (et non global) : une règle `[aria-hidden]` globale
   désactiverait les clics sur n'importe quel élément décoratif de l'application. */
.rezoo-toast__icone[aria-hidden="true"] {
  pointer-events: none;
}

/* ---------- Zone de notifications ---------- */
.rezoo-toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  max-width: min(92vw, 420px);
}

.rezoo-toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border-left: 5px solid #4a9eff;
  background: #ffffff;
  color: #1b1b1b;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  font-size: 0.94em;
  line-height: 1.35;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.rezoo-toast.is-visible { opacity: 1; transform: translateY(0); }

.rezoo-toast--success { border-left-color: #1e7e34; }
.rezoo-toast--error   { border-left-color: #cc0000; }
.rezoo-toast--warn    { border-left-color: #b45309; }

.rezoo-toast__icone { flex: 0 0 auto; }
.rezoo-toast__txt   { flex: 1 1 auto; word-break: break-word; }

/* Thème sombre : la page pose data-theme sur <body> */
body[data-theme="dark"] .rezoo-toast {
  background: #24282e;
  color: #f2f2f2;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

/* ---------- Modale de confirmation ---------- */
.rezoo-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10001;
}

.rezoo-modal__boite {
  background: #ffffff;
  color: #1b1b1b;
  border-radius: 14px;
  padding: 20px 22px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  border-top: 6px solid #4a9eff;
}

.rezoo-modal__boite--danger { border-top-color: #cc0000; }

.rezoo-modal__titre {
  margin: 0 0 8px 0;
  font-size: 1.15em;
}

.rezoo-modal__texte {
  margin: 0 0 18px 0;
  font-size: 0.95em;
  line-height: 1.45;
}

.rezoo-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body[data-theme="dark"] .rezoo-modal__boite {
  background: #24282e;
  color: #f2f2f2;
}

/* ---------- Boutons du kit ---------- */
.rezoo-btn {
  font: inherit;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  transition: filter 0.15s ease, transform 0.05s ease;
}

.rezoo-btn:hover { filter: brightness(1.08); }
.rezoo-btn:active { transform: translateY(1px); }

.rezoo-btn--primary { background: #1e7e34; color: #fff; }
.rezoo-btn--danger  { background: #b30000; color: #fff; }
.rezoo-btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  opacity: 0.8;
}

/* ---------- Compteur « N jeux affichés » (ligne 2 du bandeau) ---------- */
/* ✅ 2026.09.30 : l'ancienne barre d'outils affichée au milieu de la page a
   été remplacée par la ligne 2 du bandeau (voir header.css). Seul le compteur
   garde un style propre ; il est neutre (il hérite des couleurs du bandeau). */
.rezoo-toolbar__compte {
  opacity: 0.75;
  font-style: italic;
  white-space: nowrap;
}