/* #845 — LA croix de fermeture, style UNIQUE (voir close-button.js).
   Gabarit repris de la pastille posée en #843 (popin Pricing plein écran) :
   rond 40×40, fond surface, ombre chip, icône Lucide `x`.
   Survol : ROTATION 90° + accent. REVERT #845 = supprimer ce fichier, son
   <link> et les appels closeButtonHtml(). */
.ui-x {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-full, 999px);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-chip, 0 2px 8px rgba(20, 30, 50, .06));
  color: var(--text-muted-admin, #8a93a3);
  cursor: pointer; padding: 0;
  transition: transform .22s ease, color .14s, background .14s;
}
.ui-x svg { width: 18px; height: 18px; display: block; }
.ui-x:hover {
  transform: rotate(90deg);
  color: var(--text-fg, #1d2330);
  background: color-mix(in srgb, var(--colo-fresh, #6c63ff) 8%, var(--surface, #fff));
}
.ui-x:active { transform: rotate(90deg) scale(.94); }
.ui-x:focus-visible { outline: 2px solid var(--colo-fresh, #6c63ff); outline-offset: 2px; }
/* Variante sombre (popin / plein écran sur fond nuit) — #845 Pacte, #971 souvenirs fullscreen. */
.ui-x--dark {
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
  color: #9aa3b5;
}
.ui-x--dark:hover {
  background: rgba(255, 255, 255, .16);
  color: #e8eaf2;
}
/* Respect des préférences système : pas de rotation si l'utilisateur limite les
   animations (l'accent de couleur, lui, reste). */
@media (prefers-reduced-motion: reduce) {
  .ui-x, .ui-x:hover, .ui-x:active { transition: color .14s, background .14s; transform: none; }
}