/* =============================================================
   MNEMO — 01 — UTILITY
   Helpers réutilisables : typo, boutons, toast, animations.
   ============================================================= */

/* ------ Typographie utilitaire ------------------------------ */

.display {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.mono {
  font-family: 'Space Mono', monospace;
  /* Space Mono n'existe qu'en 400 et 700 : un 600 serait une fausse graisse. */
  font-weight: 700;
  letter-spacing: 0.02em;
}


/* ------ Boutons --------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s;
  white-space: nowrap;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--grad-primary);
  color: var(--sur-grad);
  box-shadow: var(--glow-pink);
  width: 100%;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); box-shadow:  0 1px 11px rgba(var(--ombre-rgb), 0.3); }

.btn-ghost {
  background: rgba(var(--encre-rgb), 0.05);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(var(--encre-rgb), 0.1); border-color: rgba(var(--encre-rgb), 0.2); }

.btn-danger {
  background: rgba(var(--tampon-rgb), 0.12);
  border: 1px solid rgba(var(--tampon-rgb), 0.4);
  color: var(--danger);
}
.btn-danger:hover { background: rgba(var(--tampon-rgb), 0.2); }

/* Action secondaire : encouragée, mais subordonnée au .btn-primary (gradient).
   Même structure que .btn-danger (fond teinté + bordure teintée + texte teinté)
   déclinée sur le néon cyan. À distinguer de .btn-ghost, qui reste neutre pour
   les actions de retrait (annuler, se déconnecter).
   Volontairement sans `width` : les conteneurs qui l'utilisent gèrent déjà la
   largeur (.no-event-actions .btn, .profile-events-actions .btn, .rgpd-actions
   .btn), donc la géométrie reste identique quelle que soit la variante. */
.btn-secondary {
  background: rgba(var(--bleue-rgb), 0.1);
  border: 1px solid rgba(var(--bleue-rgb), 0.35);
  color: var(--cyan);
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(var(--bleue-rgb), 0.18);
  border-color: rgba(var(--bleue-rgb), 0.55);
}

.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: calc(10px * var(--r-k)); }

.auth-error {
  background: rgba(var(--tampon-rgb), 0.12);
  border: 1px solid rgba(var(--tampon-rgb), 0.4);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 16px;
}

.auth-info {
  background: rgba(var(--bleue-rgb), 0.08);
  border: 1px solid rgba(var(--bleue-rgb), 0.3);
  color: var(--cyan);
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 13px;
  margin-bottom: 16px;
}


/* ------ Toast / notifications ------------------------------- */

.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: var(--bg-3);
  border: 1px solid var(--cyan);
  border-radius: calc(999px * var(--r-k));
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan);
  box-shadow: var(--glow-cyan);
  z-index: 200;
  animation: toastIn 0.3s;
}
.toast.error { border-color: var(--danger); color: var(--danger); box-shadow:  0 1px 7px rgba(var(--ombre-rgb), 0.22); }
@keyframes toastIn {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}


/* ------ Utilitaires ----------------------------------------- */

.hidden { display: none !important; }


/* ============================================================
   TAMPONS — signalétique unifiée des annonces
   ============================================================
   Un seul jeu de règles pour les quatre surfaces (carte de feed, story, vue
   détail, aperçu de l'éditeur). Voir announcementStamps() dans
   01d-announcements.js pour le calcul des états.
   Rendu « tampon encreur » : encadré fin, fond papier, mono en capitales —
   plutôt qu'une pastille pleine, qui masquerait la photo. */

.tampon-row {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: calc(100% - 20px);
  pointer-events: none;
}

.tampon {
  display: inline-block;
  padding: 3px 7px;
  border: 1.2px solid currentColor;
  border-radius: calc(2px * var(--r-k));
  background: var(--papier);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.15;
}

.tampon-sm { padding: 2px 5px; font-size: 7.5px; letter-spacing: 0.07em; }

.tampon-tampon { color: var(--tampon); }
.tampon-bleue  { color: var(--bleue); }
.tampon-encre  { color: var(--encre); }
/* État passé : encre délavée + légère rotation, comme un tampon apposé après
   coup sur un document classé. */
.tampon-passe {
  color: var(--text-dim);
  transform: rotate(-4deg);
  background: rgba(var(--papier-rgb), 0.85);
}

/* Média d'une annonce dont le créneau est dépassé : délavé vers le papier.
   Cet état n'existait qu'en story ; il est désormais rendu partout, faute de
   quoi un créneau passé est indiscernable d'un créneau à venir dans le feed. */
.ann-past-media {
  filter: saturate(0.35) brightness(1.12) contrast(0.82);
}