/* ══════════════════════════════════════════════════════════════════════
   auth.css — connexion et mots de passe, Nuit & Jour × Wizz (2026-10)
   Source unique pour staff-login, staff-verify, reset-password, setup-*,
   et pour l'écran de connexion d'admin.html et de superadmin.html.
   Chargé EN DERNIER sur ces surfaces.

   Tout est rangé sous .auth-stage : rien ne fuit dans l'app admin ou
   superadmin (leur connexion est un calque). La scène porte son rôle :
     .auth-gold   → organisateur (admin, co-admin, staff Klarrro)
     .auth-rose   → équipe de soirée et compte participant
     .auth-violet → superadmin (outil interne, un seul accent)

   Règles : aucune couleur en dur hors des jetons --auth-violet-* (absents
   de base.css) ; un seul lavis par écran (projecteur en Nuit, aurore en
   Jour) posé sur un calque fixe qui ne défile pas ; aucun backdrop-filter ;
   animations en transform / opacity, coupées en reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 0. JETONS DE RÔLE ═════════════════════════════════════════════════ */
.auth-rose {
  --auth-fill: var(--rose-fill);          /* fond du bouton principal */
  --auth-on-fill: var(--on-rose);         /* texte sur ce fond */
  --auth-ink: var(--rose-ink);            /* texte accent, focus, liens */
  --auth-display: var(--display-accent);  /* mot de l'affiche, « rrr » */
  --auth-wash: var(--hero-wash);          /* projecteur (Nuit) / aurore (Jour) */
  --auth-shadow: var(--shadow-cta);
}
.auth-gold {
  --auth-fill: var(--gold-fill);
  --auth-on-fill: var(--on-gold);
  --auth-ink: var(--gold-ink);
  --auth-display: var(--display-accent-gold);
  --auth-wash: var(--hero-wash-gold);
  --auth-shadow: var(--shadow-cta-gold);
}
/* Violet superadmin : jetons locaux, absents de base.css */
.auth-violet {
  --auth-violet-fill: #7C3AED;      /* blanc dessus 5,70:1 */
  --auth-violet-ink: #C4B5FD;       /* 9,60:1 sur --surface Nuit */
  --auth-violet-display: #A78BFA;   /* 7,30:1 sur --bg Nuit */
  --auth-violet-wash: radial-gradient(120% 70% at 50% -10%, rgba(124,58,237,.34), rgba(124,58,237,0) 60%);
  --auth-violet-shadow: 0 8px 28px rgba(124,58,237,.30);
  --auth-fill: var(--auth-violet-fill);
  --auth-on-fill: var(--on-rose);
  --auth-ink: var(--auth-violet-ink);
  --auth-display: var(--auth-violet-display);
  --auth-wash: var(--auth-violet-wash);
  --auth-shadow: var(--auth-violet-shadow);
}
[data-theme="light"] .auth-violet {
  --auth-violet-fill: #6D28D9;      /* blanc dessus 7,10:1 */
  --auth-violet-ink: #6D28D9;       /* 6,77:1 sur --bg Jour, 5,31:1 sur l'aurore */
  --auth-violet-display: #6D28D9;
  --auth-violet-wash: linear-gradient(150deg, #E3DAFB 0%, #EFE9FB 50%, #F7D9E2 100%);
  --auth-violet-shadow: var(--shadow-cta);
}
.auth-rose, .auth-gold, .auth-violet {
  --auth-soft: color-mix(in srgb, var(--auth-fill) 14%, transparent);
  --auth-line: color-mix(in srgb, var(--auth-fill) 42%, transparent);
  --auth-font: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --auth-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --auth-gutter: 16px;
  --auth-qr-paper: #FFFFFF;   /* fond du QR 2FA : blanc dans les deux thèmes pour le scan */
}

/* ══ 1. SCÈNE ══════════════════════════════════════════════════════════
   Calque fixe qui défile lui-même (formulaires longs sur téléphone) ;
   la colonne est centrée par margin:auto, jamais coupée en haut. */
.auth-stage {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: calc(24px + var(--safe-top, 0px)) calc(var(--auth-gutter) + var(--safe-right, 0px))
           calc(24px + var(--safe-bottom, 0px)) calc(var(--auth-gutter) + var(--safe-left, 0px));
  background: var(--bg);
  color: var(--text);
  font-family: var(--auth-font);
  -webkit-font-smoothing: antialiased;
}
/* superadmin.css pose son propre fond (deux halos) en !important : un seul lavis ici */
.auth-stage.login-screen { background: var(--bg) !important; }

/* Lavis unique : calque fixe, hors du flux, qui ne défile pas */
.auth-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--auth-wash);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 34%, transparent 82%);
          mask-image: linear-gradient(to bottom, black 0%, black 34%, transparent 82%);
}

/* ══ 2. COLONNE + MARQUE ═══════════════════════════════════════════════ */
.auth-stage .auth-box,
.auth-stage .login-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px; margin: auto;
  display: flex; flex-direction: column; gap: 20px;
}

.auth-brand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  text-align: left;
}
.auth-brand-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
}

/* Logo : « Kla » et « o » en texte, « rrr » en accent du rôle, secoués toutes les 2,8 s */
.auth-wordmark {
  margin: 0;
  display: inline-flex; align-items: baseline;
  font-family: var(--auth-serif); font-weight: 900;
  font-size: 1.75rem; line-height: 1; letter-spacing: -.02em;
  color: var(--text);
}
.auth-wordmark .rrr { display: inline-flex; color: var(--auth-display); }
.auth-wordmark .rrr i {
  font-style: normal; display: inline-block; color: inherit;
  animation: auth-grr 2.8s ease-in-out infinite;
}
.auth-wordmark .rrr i:nth-child(2) { animation-delay: .09s; }
.auth-wordmark .rrr i:nth-child(3) { animation-delay: .18s; }
@keyframes auth-grr {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  4%       { transform: translate(-1.5px, 1px) rotate(-3deg); }
  8%       { transform: translate(1.5px, -1px) rotate(3deg); }
  12%      { transform: translate(-1px, 1.5px) rotate(-2deg); }
  16%      { transform: translate(1px, -.5px) rotate(2deg); }
  20%      { transform: translate(-.5px, .5px) rotate(-1deg); }
  22%, 98% { transform: translate(0, 0) rotate(0deg); }
}

/* Eyebrow : l'espace concerné (équipe, organisateur, superadmin…) */
.auth-role {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 0;
  font-family: var(--auth-font); font-size: max(12px, .75rem); font-weight: 700;
  line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
  color: var(--auth-ink);
  background: none; border: 0;
}
.auth-role svg { width: 14px; height: 14px; flex: none; stroke-width: 2; fill: none; stroke: currentColor; }

/* ══ 3. AFFICHE ════════════════════════════════════════════════════════ */
.auth-title {
  margin: 4px 0 0;
  font-family: var(--auth-font); font-weight: 900;
  font-size: clamp(2.5rem, 11.5vw, 3.6rem); line-height: .9; letter-spacing: -.025em;
  text-transform: uppercase; text-wrap: pretty;
  color: var(--text);
}
/* Mot d'accent : mot-sticker (règle commune dans base.css) — rose participant, or organisateur (.auth-gold).
   Le superadmin (outil interne, .auth-violet) garde son mot en Playfair italique. */
.auth-violet .auth-title em {
  display: inline; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; rotate: none;
  font-family: var(--auth-serif); font-style: italic; font-weight: 800;
  font-size: 1.06em; line-height: 1; letter-spacing: -.01em; text-transform: none;
  color: var(--auth-display);
}
.auth-lede {
  margin: 0; max-width: 38ch;
  font-size: 1rem; line-height: 1.5; color: var(--text2);
}

/* Révélation lettre par lettre (auth-display.js). Amélioration progressive :
   le masquage n'existe que sous html.auth-motion, posé par le script ; l'état
   de base reste opacity:1, seule l'animation part de 0. Filet : le script
   retire la classe au bout de 3 s. */
.auth-split .auth-lw { white-space: nowrap; }
.auth-split .auth-lc,
.auth-split .auth-lc-block { display: inline-block; }
html.auth-motion .auth-title[data-auth-split]:not(.is-split) { opacity: 0; }
html.auth-motion .auth-title.is-split .auth-lc {
  animation: auth-letter .55s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 24ms + 80ms);
}
@keyframes auth-letter { from { opacity: 0; transform: translateY(.35em); } }

/* ══ 4. CARTE ══════════════════════════════════════════════════════════
   Aplat : pas de verre (la carte défile), pas de bordure animée. */
.auth-stage .auth-card,
.auth-stage .login-box .card {
  position: relative; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(20px, 5.5vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--text);
}
.auth-stage .auth-card:hover { border-color: var(--border2); }
.auth-stage form,
.auth-stage .auth-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.auth-card-title {
  margin: 0;
  font-family: var(--auth-serif); font-weight: 800; font-size: 1.375rem; line-height: 1.15;
  color: var(--text);
}
.auth-card-sub { margin: -8px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--text2); }
.auth-stage .auth-note { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--text2); }
.auth-stage .auth-note strong { color: var(--text); font-weight: 700; }

/* ══ 5. CHAMPS ═════════════════════════════════════════════════════════ */
.auth-stage .field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.auth-stage .field label,
.auth-stage .auth-label {
  display: block; margin: 0;
  font-family: var(--auth-font); font-size: max(12px, .75rem); font-weight: 700;
  line-height: 1.2; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text2);
}
.auth-stage input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  width: 100%; min-height: 48px; margin: 0;
  padding: 12px 14px;
  font-family: var(--auth-font); font-size: 16px; font-weight: 500; line-height: 1.25; /* 16 px : pas de zoom iOS */
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color 160ms ease, outline-color 160ms ease;
}
.auth-stage input::placeholder { color: var(--muted); opacity: 1; }
.auth-stage input:focus,
.auth-stage input:focus-visible {
  outline: 2px solid var(--auth-ink) !important;
  outline-offset: 1px;
  border-color: var(--auth-ink) !important;
  box-shadow: none !important;
  background: var(--surface2);
}
.auth-stage input[aria-invalid="true"] { border-color: var(--danger); }
.auth-stage input:disabled,
.auth-stage input[readonly] {
  color: var(--text2); background: var(--bg2);
  border-style: dashed; opacity: 1; cursor: not-allowed;
  -webkit-text-fill-color: var(--text2);
}
.auth-stage input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--surface2) inset;
          box-shadow: 0 0 0 100px var(--surface2) inset;
}
/* Code à 6 chiffres */
.auth-stage .auth-code {
  text-align: center; font-size: 1.375rem !important; font-weight: 700;
  letter-spacing: .4em; padding-left: calc(14px + .4em);
  font-variant-numeric: tabular-nums;
}

/* ══ 6. BOUTONS ════════════════════════════════════════════════════════
   Aplat plein, rayon 12 px, ressort au press (transform seulement). */
.auth-stage .btn-primary,
.auth-stage .btn-purple,
.auth-stage .btn-gold,
.auth-stage .auth-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; margin: 0;
  padding: 14px 20px;
  font-family: var(--auth-font); font-size: 1rem; font-weight: 800; line-height: 1.2;
  letter-spacing: .01em; text-align: center; white-space: normal; text-decoration: none;
  color: var(--auth-on-fill) !important;
  background: var(--auth-fill) !important;
  border: 0; border-radius: var(--r-md);
  box-shadow: var(--auth-shadow) !important;
  filter: none; transform: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 420ms var(--ease-spring), filter 160ms ease;
}
.auth-stage .btn-primary:hover,
.auth-stage .btn-purple:hover,
.auth-stage .btn-gold:hover,
.auth-stage .auth-btn:hover { filter: brightness(1.06); transform: none; }
.auth-stage .btn-primary:active,
.auth-stage .btn-purple:active,
.auth-stage .btn-gold:active,
.auth-stage .auth-btn:active { transform: scale(.96); filter: none; transition-duration: 90ms; }
.auth-stage .btn-primary:disabled,
.auth-stage .btn-purple:disabled,
.auth-stage .btn-gold:disabled,
.auth-stage .auth-btn:disabled { opacity: .6; cursor: progress; transform: none; filter: none; }
.auth-stage .btn:focus-visible,
.auth-stage a:focus-visible,
.auth-stage button:focus-visible {
  outline: 2px solid var(--auth-ink); outline-offset: 3px;
}
.auth-stage .btn svg { width: 18px; height: 18px; flex: none; }
.auth-stage .btn-primary::after,
.auth-stage .btn-purple::after,
.auth-stage .btn-gold::after { content: none; }

/* Secondaire : contour, texte plein */
.auth-stage .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; margin: 0; padding: 12px 18px;
  font-family: var(--auth-font); font-size: 1rem; font-weight: 700; line-height: 1.2;
  color: var(--text); background: transparent;
  border: 0; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform 420ms var(--ease-spring), background-color 160ms ease;
}
.auth-stage .btn-ghost:hover { background: var(--auth-soft); filter: none; transform: none; }
.auth-stage .btn-ghost:active { transform: scale(.97); transition-duration: 90ms; }
/* Retour discret (setup 2FA, staff-login) */
.auth-stage .btn-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 12px; margin: 0;
  font-family: var(--auth-font); font-size: .9375rem; font-weight: 600;
  color: var(--text2); background: transparent; border: 0; border-radius: var(--r-md);
  box-shadow: none; cursor: pointer;
}
.auth-stage .btn-back:hover { color: var(--text); filter: none; transform: none; }
.auth-stage .btn-back svg { width: 16px; height: 16px; }

/* Lien texte (retour à la connexion, retour à l'app) */
.auth-stage .auth-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 700; color: var(--auth-ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.auth-stage .auth-link:hover { text-decoration-thickness: 2px; }

/* ══ 7. MESSAGES ═══════════════════════════════════════════════════════
   Erreur lisible (≥ 4,5:1 sur la carte dans les deux thèmes), avec icône :
   la couleur n'est pas le seul signal. */
.auth-stage .err,
.auth-stage .status.is-error {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 12px 14px;
  font-family: var(--auth-font); font-size: .9375rem; font-weight: 600; line-height: 1.4;
  text-align: left;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
}
.auth-stage .err::before,
.auth-stage .status.is-error::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.5v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth-stage .err.hidden, .auth-stage .err:empty, .auth-stage .hidden { display: none; }
.auth-stage .status {
  margin: 0; min-height: 0; text-align: left;
  font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--text2);
}
.auth-stage .status:empty { display: none; }
.auth-stage .status.is-ok { color: var(--success); }

/* ══ 8. CONFIANCE, LANGUE, RÉSEAUX ═════════════════════════════════════ */
.auth-trust {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  margin: 0;
  font-family: var(--auth-font); font-size: .8125rem; line-height: 1.4; color: var(--text2);
}
.auth-trust svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; flex: none; }
.auth-trust b { color: var(--text); font-weight: 700; }

.auth-lang { display: flex; gap: 4px; justify-content: flex-start; flex-wrap: wrap; }
.auth-lang button {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  font-family: var(--auth-font); font-size: .8125rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text2); background: transparent;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border2);
  transition: background-color 160ms ease, color 160ms ease;
}
.auth-lang button:hover { color: var(--text); }
.auth-lang button.active,
.auth-lang button[aria-pressed="true"] { color: var(--bg); background: var(--text); box-shadow: none; }

.auth-social {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 44px;
  font-family: var(--auth-font); font-size: .875rem; font-weight: 600;
  color: var(--text2); text-decoration: none;
}
.auth-social:hover { color: var(--auth-ink); }
.auth-social svg { width: 16px; height: 16px; flex: none; }

/* Bascule de thème posée dans la scène (setup-password) */
.auth-stage .theme-toggle { flex: none; padding: 2px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border2); }
.auth-stage .theme-toggle-btn { width: 44px; height: 44px; color: var(--text2); }
.auth-stage .theme-toggle-btn:hover { color: var(--text); }
.auth-stage .theme-toggle-btn.active { background: var(--text); color: var(--bg); box-shadow: none; }

/* ══ 9. JAUGE DE MOT DE PASSE ══════════════════════════════════════════
   password.js pose data-level (0 à 5) et la largeur ; la couleur vient d'ici. */
.auth-stage .strength-bar,
.auth-stage .pw-strength-bar {
  height: 6px; margin: 2px 0 0; overflow: hidden;
  border-radius: var(--r-full);
  background: var(--surface2);
  box-shadow: inset 0 0 0 1px var(--border2);
}
.auth-stage .strength-fill,
.auth-stage .pw-strength-bar > div {
  height: 100%; width: 0; border-radius: inherit;
  background: var(--muted);
  transition: width 300ms var(--ease-out), background-color 300ms ease;
}
.auth-stage [data-level="1"] { background: var(--danger); }
.auth-stage [data-level="2"] { background: var(--warning); }
.auth-stage [data-level="3"] { background: var(--info); }
.auth-stage [data-level="4"],
.auth-stage [data-level="5"] { background: var(--success); }

/* ══ 10. ENCARTS (compte, invitation) ══════════════════════════════════ */
.auth-stage .email-badge,
.auth-stage .info-badge {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 12px 14px;
  font-size: .9375rem; line-height: 1.4; color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r-md);
}
.auth-stage .email-badge svg,
.auth-stage .info-badge svg { width: 16px; height: 16px; stroke: var(--auth-ink); stroke-width: 2; fill: none; flex: none; }
.auth-stage .email-badge strong { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.auth-stage .info-badge { flex-direction: column; align-items: flex-start; gap: 6px; }
.auth-stage .info-badge .ev-name,
.auth-stage .info-badge .ev-email { display: flex; align-items: center; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.auth-stage .info-badge .ev-name { color: var(--text); font-weight: 700; font-size: 1rem; }
.auth-stage .info-badge .ev-email { color: var(--text2); font-size: .9375rem; }

/* ══ 11. ÉTATS (succès, erreur, verrou) ════════════════════════════════ */
/* Hors scène (2FA et accès révoqué d'admin.html) l'icône reste centrée ; dans la scène, alignée à gauche */
.auth-state-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.auth-state-icon svg { width: 28px; height: 28px; stroke-width: 2; fill: none; stroke: currentColor; }
.auth-state-icon--ok   { background: var(--success-bg); color: var(--success); }
.auth-state-icon--err  { background: var(--danger-bg); color: var(--danger); }
.auth-state-icon--lock { background: var(--auth-soft); color: var(--auth-ink); }
.auth-stage .auth-state-icon { margin: 0 0 4px; }

.auth-stage .success-screen,
.auth-stage .error-screen {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin: 0; padding: 4px 0; text-align: left;
}
.auth-stage .success-screen h2,
.auth-stage .error-screen h2 {
  margin: 0;
  font-family: var(--auth-serif); font-weight: 800; font-size: 1.5rem; line-height: 1.15;
  color: var(--text);
}
.auth-stage .success-screen p,
.auth-stage .error-screen p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--text2); }
.auth-stage .error-screen p strong { color: var(--text); }
/* Lien de retour glissé dans un texte traduit (setup.error.body) : cible de 44 px */
.auth-stage .error-screen p a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--auth-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-stage .success-screen .btn-primary { margin-top: 6px; }

.auth-stage .loader {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 0; font-size: .9375rem; color: var(--text2);
}
.auth-stage .loader::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--border3); border-top-color: var(--auth-ink);
  animation: auth-spin .8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ══ 12. SÉLECTEUR DE SOIRÉES (staff-login) ════════════════════════════ */
.auth-stage .auth-views-head { display: flex; align-items: center; gap: 10px; }
.auth-stage .staff-back {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: var(--text2); background: var(--surface2);
  border: 1px solid var(--border2); border-radius: var(--r-md);
}
.auth-stage .staff-back:hover { color: var(--text); }
.auth-stage .staff-back svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.auth-stage .event-list { display: flex; flex-direction: column; gap: 8px; }
.auth-stage .event-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 12px 14px; margin: 0;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
  background: var(--surface2);
  border: 1px solid var(--border2); border-radius: var(--r-md);
  transition: transform 420ms var(--ease-spring), border-color 160ms ease;
}
.auth-stage .event-card:hover { border-color: var(--auth-line); }
.auth-stage .event-card:active { transform: scale(.98); transition-duration: 90ms; }
.auth-stage .event-card-info { flex: 1; min-width: 0; }
.auth-stage .event-card-name { font-weight: 700; font-size: 1rem; color: var(--text); }
.auth-stage .event-card-meta { margin-top: 2px; font-size: .8125rem; color: var(--text2); }
.auth-stage .event-card-role {
  flex: none; padding: 4px 10px; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--auth-ink); background: var(--auth-soft);
}
.auth-stage .event-empty { padding: 24px 0; font-size: .9375rem; color: var(--text2); }

/* ══ 13. VÉRIFICATION STAFF (staff-verify) ═════════════════════════════ */
.auth-stage .sv-head { display: flex; align-items: center; gap: 14px; }
.auth-stage .sv-avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--auth-serif); font-weight: 800; font-size: 1.75rem;
  color: var(--auth-ink); background: var(--auth-soft);
  box-shadow: inset 0 0 0 2px var(--auth-line);
}
.auth-stage .sv-name { margin: 0; font-family: var(--auth-serif); font-weight: 800; font-size: 1.5rem; line-height: 1.15; color: var(--text); }
.auth-stage .sv-level {
  margin: 4px 0 0; font-size: max(12px, .75rem); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--auth-ink);
}
.auth-stage .sv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.auth-stage .sv-tag {
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: .8125rem; font-weight: 600; color: var(--text);
  background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border2);
}
.auth-stage .sv-status {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px;
  border-radius: var(--r-md); font-weight: 700; font-size: 1rem;
}
.auth-stage .sv-status svg { width: 20px; height: 20px; flex: none; }
.auth-stage .sv-status--ok { color: var(--success); background: var(--success-bg); border: 1px solid var(--success-border); }
.auth-stage .sv-status--off { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-border); }
.auth-stage .sv-info { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface2); }
.auth-stage .sv-info div { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .9375rem; }
.auth-stage .sv-info dt { color: var(--text2); }
.auth-stage .sv-info dd { margin: 0; font-weight: 700; color: var(--text); }
.auth-stage .sv-foot { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--text2); }

/* ══ 14. GRANDS ÉCRANS ═════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .auth-rose, .auth-gold, .auth-violet { --auth-gutter: 32px; }
  .auth-wordmark { font-size: 2rem; }
  .auth-title { font-size: 4rem; }
}

/* ══ 15. MOUVEMENT RÉDUIT ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .auth-wordmark .rrr i,
  .auth-stage .loader::before { animation: none; }
  html.auth-motion .auth-title[data-auth-split]:not(.is-split) { opacity: 1; }
  html.auth-motion .auth-title.is-split .auth-lc { animation: none; }
  .auth-stage .btn-primary, .auth-stage .btn-purple, .auth-stage .btn-gold,
  .auth-stage .auth-btn, .auth-stage .btn-ghost, .auth-stage .event-card { transition: none; }
  .auth-stage .btn-primary:active, .auth-stage .btn-purple:active, .auth-stage .btn-gold:active,
  .auth-stage .auth-btn:active, .auth-stage .btn-ghost:active, .auth-stage .event-card:active { transform: none; }
}