/* ── CSS vars locaux ─────────────────────────────────────────────────────── */
    :root {
      --auth-alarm:   oklch(0.52 0.16 28);
      --auth-approve: oklch(0.55 0.08 145);
      --auth-warn:    oklch(0.72 0.13 75);
    }

    /* ── Fond global ─────────────────────────────────────────────────────────── */
    html, body {
      min-height: 100%;
      margin: 0;
      background: oklch(0.10 0.003 250) !important;
      color: oklch(0.97 0.004 85);
    }

    /* ── Grain ───────────────────────────────────────────────────────────────── */
    .grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.045;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 300px 300px;
    }

    /* ── Nav ─────────────────────────────────────────────────────────────────── */
    .nav {
      position: relative;
      z-index: 100;
      background: transparent !important;
      border-bottom: 1px solid oklch(1 0 0 / 0.08);
    }

    /* ── Wrapper principal (équivalent du div 100vw/100vh en JSX) ────────────── */
    .auth-page {
      position: relative;
      z-index: 1;
      min-height: calc(100vh - 65px);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
      padding: 32px 20px;
      box-sizing: border-box;
    }

    /* ── Conteneur intérieur (width:400, gap:28, padding:'32px 0') ───────────── */
    .auth-inner {
      width: 400px;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 28px;
      padding: 32px 0;
    }

    /* ── Logo (flexDirection:column, alignItems:center, gap:12) ──────────────── */
    .auth-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }
    .auth-logo-name {
      font-family: 'Cinzel', serif;
      font-size: 22px;
      font-weight: 500;
      letter-spacing: 0.22em;
      color: oklch(0.97 0.004 85);
    }

    /* ── Card (border, bg, padding:32px 36px, flex col, gap:24) ─────────────── */
    .auth-card {
      border: 1px solid oklch(1 0 0 / 0.35);
      background: oklch(1 0 0 / 0.05);
      padding: 32px 36px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      box-sizing: border-box;
    }

    /* ── Tabs wrapper (display:flex, borderBottom) ───────────────────────────── */
    .auth-tabs {
      display: flex;
      border-bottom: 1px solid oklch(1 0 0 / 0.35);
    }

    /* ── Tab button (all:unset + styles JSX exacts) ──────────────────────────── */
    .auth-tab {
      /* all: unset */
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
      padding: 10px 0;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      outline: none;

      cursor: pointer;
      flex: 1;
      text-align: center;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: oklch(1 0 0 / 0.40);
      margin-bottom: -1px;
      transition: color 120ms, border-color 120ms, background 120ms;
    }
    .auth-tab.active {
      color: oklch(0.97 0.004 85);
      border-bottom-color: oklch(0.97 0.004 85);
      background: oklch(1 0 0 / 0.07);
    }
    .auth-tab:hover:not(.active) { color: oklch(1 0 0 / 0.65); }

    /* ── Titre vue forgot ────────────────────────────────────────────────────── */
    .auth-forgot-title {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.18em;
      color: oklch(1 0 0 / 0.55);
      text-transform: uppercase;
    }

    /* ── Form (display:flex, flexDirection:column, gap:16) ───────────────────── */
    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* ── Field (display:flex, flexDirection:column, gap:6) ───────────────────── */
    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* ── Label ───────────────────────────────────────────────────────────────── */
    .auth-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.20em;
      text-transform: uppercase;
      color: oklch(1 0 0 / 0.65);
    }

    /* ── Input (inputStyle JSX exact) ────────────────────────────────────────── */
    .auth-input {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 14px;
      border: 1px solid oklch(1 0 0 / 0.45);
      background: oklch(1 0 0 / 0.07);
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 14px;
      color: oklch(0.97 0.004 85);
      outline: none;
      transition: border-color 140ms;
    }
    .auth-input:focus { border-color: oklch(1 0 0 / 0.75); }
    .auth-input::placeholder { color: oklch(1 0 0 / 0.22); }

    /* ── Jauge mot de passe (5 barres) ───────────────────────────────────────── */
    .pwd-strength {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .pwd-bars { display: flex; gap: 3px; }
    .pwd-bar { flex: 1; height: 2px; background: oklch(1 0 0 / 0.15); transition: background 200ms; }
    .pwd-meta { display: flex; justify-content: space-between; align-items: center; }
    .pwd-lbl  { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; }
    .pwd-hint { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: oklch(1 0 0 / 0.4); letter-spacing: 0.08em; }

    /* ── Bouton "mot de passe oublié ?" ─────────────────────────────────────── */
    .btn-forgot {
      -webkit-appearance: none; appearance: none;
      border: none; background: none; padding: 0; margin: 0;
      cursor: pointer;
      align-self: flex-end;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px;
      letter-spacing: 0.12em;
      color: oklch(1 0 0 / 0.4);
      text-transform: uppercase;
      transition: color 120ms;
    }
    .btn-forgot:hover { color: oklch(1 0 0 / 0.7); }

    /* ── Case confidentialité ────────────────────────────────────────────────── */
    .auth-privacy {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
    }
    .auth-privacy input[type="checkbox"] {
      margin-top: 2px;
      flex-shrink: 0;
      accent-color: oklch(0.97 0.004 85);
      width: 14px;
      height: 14px;
    }
    .auth-privacy-text {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      color: oklch(1 0 0 / 0.55);
      line-height: 1.6;
    }
    .auth-privacy-text a { color: oklch(1 0 0 / 0.8); text-decoration: underline; cursor: pointer; }

    /* ── Messages feedback ───────────────────────────────────────────────────── */
    .auth-error {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--auth-alarm);
      letter-spacing: 0.06em;
    }
    .auth-success {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--auth-approve);
      letter-spacing: 0.06em;
      line-height: 1.6;
    }

    /* ── Submit (all:unset + styles JSX) ─────────────────────────────────────── */
    .auth-submit {
      -webkit-appearance: none; appearance: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 14px;
      background: oklch(0.97 0.004 85);
      color: oklch(0.08 0.003 250);
      font-family: 'Cinzel', serif;
      font-size: 13px;
      letter-spacing: 0.22em;
      transition: background 140ms, color 140ms;
      box-sizing: border-box;
    }
    .auth-submit:hover:not(:disabled) { background: oklch(0.90 0.004 85); }
    .auth-submit:disabled { background: oklch(1 0 0 / 0.10); color: oklch(1 0 0 / 0.30); cursor: not-allowed; }

    /* ── Lien retour (vue forgot) ────────────────────────────────────────────── */
    .btn-back {
      -webkit-appearance: none; appearance: none;
      border: none; background: none; padding: 0; margin: 0;
      cursor: pointer;
      width: 100%;
      text-align: center;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px;
      letter-spacing: 0.12em;
      color: oklch(1 0 0 / 0.4);
      text-transform: uppercase;
      transition: color 120ms;
    }
    .btn-back:hover { color: oklch(1 0 0 / 0.7); }

    /* ── Footer ──────────────────────────────────────────────────────────────── */
    .auth-footer {
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .auth-footer-tagline {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 13px;
      color: oklch(1 0 0 / 0.5);
    }
    .auth-footer-privacy {
      -webkit-appearance: none; appearance: none;
      border: none; background: none; padding: 0; margin: 0;
      cursor: pointer;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px;
      letter-spacing: 0.12em;
      color: oklch(1 0 0 / 0.3);
      text-transform: uppercase;
      transition: color 120ms;
    }
    .auth-footer-privacy:hover { color: oklch(1 0 0 / 0.6); }

    /* ── Panel connecté ──────────────────────────────────────────────────────── */
    .auth-panel-name  { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 500; color: oklch(0.97 0.004 85); }
    .auth-panel-email { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: oklch(1 0 0 / 0.40); letter-spacing: 0.08em; margin-top: -12px; }
    .auth-panel-plan  {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600;
      letter-spacing: 0.20em; text-transform: uppercase;
      padding: 5px 10px;
      border: 1px solid oklch(1 0 0 / 0.20);
      color: oklch(1 0 0 / 0.55);
    }
    .auth-panel-btn {
      padding: 11px; background: none; border: 1px solid oklch(1 0 0 / 0.18);
      color: oklch(1 0 0 / 0.55); cursor: pointer;
      font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase;
      transition: border-color 140ms, color 140ms;
    }
    .auth-panel-btn:hover { border-color: oklch(1 0 0 / 0.45); color: oklch(0.97 0.004 85); }
    .auth-panel-btn.danger { color: oklch(0.52 0.16 28 / 0.70); border-color: oklch(0.52 0.16 28 / 0.18); }
    .auth-panel-btn.danger:hover { color: oklch(0.52 0.16 28); border-color: oklch(0.52 0.16 28 / 0.45); }

    /* ── Utilitaire ──────────────────────────────────────────────────────────── */
    [hidden] { display: none !important; }

/* ── Logo SVG couleur (anciennement style="color:..." inline) ─── */
.auth-logo-svg { color: oklch(0.97 0.004 85); }

/* ── Fallback noscript (anciennement style="" inline dans <noscript>) ─── */
.noscript-msg {
  text-align: center;
  color: #fff;
  padding: 32px;
  font-family: Georgia, serif;
}
.noscript-link { color: #c8bfa8; }