/* ============================================================================
   Thème SOMBRE / MODERNE — appliqué à TOUTES les pages d'authentification
   basées sur le fragment `shell` (inscription, vérif e-mail, mot de passe,
   liaisons Battle.net/Discord…). Surcharge auth.css (clair) et s'aligne sur la
   page de login (login.css). Chargé en DERNIER → priorité.
   Bordures qui suivent les découpes : double-couche (élément = liseré + clip ;
   ::before inséré = fond, en z-index -1 grâce à `isolation: isolate`).
   ============================================================================ */

:root {
  /* Découpes réutilisables. */
  --bevel: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  --bevel-card: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  --hex-btn: polygon(0 50%, 15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%);
  --hex: polygon(50% 5%, 87.6% 27.5%, 87.6% 72.5%, 50% 95%, 12.4% 72.5%, 12.4% 27.5%);

  /* Palette sombre : bascule des variables d'auth.css. */
  --bg: #040c14;
  --card-bg: #0a1322;
  --text: #e8edf7;
  --text-muted: #8b97ae;
  --field-bg: #0b1320;
  --navy: #3a63cf;
  --navy-2: #5b8def;
  --navy-hover: #2b54aa;
  --accent: #617bfb;
  --accent-2: #5b8def;
  --accent-hover: #3a63cf;
  --accent-soft: rgba(97, 123, 251, 0.14);
  /* Coral (CTA dynamiques) repointé sur le bleu. */
  --coral: #5b8def;
  --coral-hover: #3a63cf;
  --coral-soft: rgba(97, 123, 251, 0.14);
  --error-bg: rgba(220, 70, 86, 0.16);
  --error-text: #f0a9b2;
  --success-bg: rgba(70, 200, 130, 0.16);
  --success-text: #9be3bd;
  --shadow: 0 30px 80px rgba(2, 5, 12, 0.6);

  --dk-line: rgba(150, 175, 240, 0.5);
  --dk-line-soft: rgba(150, 175, 240, 0.24);
}

body {
  background: var(--bg);
  color: var(--text);
}

/* ---- Carte (panneau) ----------------------------------------------------- */
.container {
  isolation: isolate;
  background: var(--dk-line); /* liseré clair */
  border-radius: 0;
  clip-path: var(--bevel-card);
  box-shadow: var(--shadow);
}
.container::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--bevel-card);
  background: var(--card-bg);
}

/* ---- Titres / textes ----------------------------------------------------- */
.form-title { color: var(--text); font-weight: 600; letter-spacing: 0.02em; }
.info-text, .form-hint, .form-link { color: var(--text-muted); }
.verify-email-address { color: var(--accent); }

/* ---- Champs -------------------------------------------------------------- */
.input-group {
  isolation: isolate;
  background: var(--dk-line-soft); /* liseré complet (biseaux compris) */
  border-radius: 0;
  clip-path: var(--bevel);
  box-shadow: none;
}
.input-group::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--bevel);
  background: var(--field-bg);
}
.input-group:focus-within {
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: none;
}
.input-group input { background: transparent; color: var(--text); }
.input-group input::placeholder { color: var(--text-muted); }
.input-group .input-icon { color: var(--text-muted); }

/* ---- Bouton principal (CTA) : MÊME style que « Se connecter » ------------- */
.btn-pill {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  clip-path: var(--hex-btn);
  background: linear-gradient(90deg, #617bfb 0%, #0b80c5 50%, #617bfb 100%); /* bordure */
  color: #eaf0ff;
  font-weight: 500;
  letter-spacing: 0.18em;
  box-shadow: none;
  overflow: visible;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease;
}
.btn-pill::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--hex-btn);
  background: linear-gradient(180deg, #024b9d 0%, #01458c 50%, #01458c 50%, #024b9d 100%);
  box-shadow: inset 0 0 10px #b6b6b6;
}
.btn-pill:hover {
  transform: translateY(-2px) scale(1.01);
  filter: drop-shadow(0 10px 26px rgba(11, 128, 197, 0.6))
          drop-shadow(0 0 36px rgba(97, 123, 251, 0.55)) brightness(1.1);
}
.btn-pill:active { transform: translateY(0); }

/* Variantes fournisseurs : MÊME style que « Se connecter » + logo en filigrane. */
.btn-pill.btn-battlenet,
.btn-pill.btn-discord { color: #eaf0ff; }
.btn-pill.btn-battlenet::after,
.btn-pill.btn-discord::after {
  z-index: -1; /* AU-DESSUS du fond (::before), SOUS le texte (isolation) */
  opacity: 0.22;
}

/* ---- Bouton secondaire (contour bleu, hexagone à 2 pointes) --------------- */
.btn-ghost-dark {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  clip-path: var(--hex-btn);
  background: var(--accent); /* liseré */
  color: var(--accent);
  font-weight: 500;
  transition: filter 0.2s ease, transform 0.16s ease;
}
.btn-ghost-dark::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--hex-btn);
  background: var(--card-bg);
}
.btn-ghost-dark:hover {
  background: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 14px rgba(97, 123, 251, 0.4));
}
.btn-ghost-dark:hover::before { background: color-mix(in srgb, var(--accent) 14%, var(--card-bg)); }

/* Bouton fantôme du panneau overlay (signup coulissant) → bleu. */
.btn-ghost {
  border: 1px solid var(--accent);
  color: #fff;
}
.btn-ghost:hover { background: rgba(97, 123, 251, 0.16); }

/* ---- Liens --------------------------------------------------------------- */
.form-link:hover, .card-footer a { color: var(--accent); }

/* ---- Alertes ------------------------------------------------------------- */
.alert { border-radius: 0; clip-path: var(--bevel); }
.alert-info { background: var(--accent-soft); color: #c7d4ff; }

/* ---- Erreurs de champ ---------------------------------------------------- */
.field-error { color: var(--error-text); }

/* ---- Séparateur « ou » (panneau connexion du signup) --------------------- */
.divider { color: var(--text-muted); }
.divider::before, .divider::after { background: var(--dk-line-soft); }

/* ---- Pastilles sociales rondes (panneau connexion) ----------------------- */
.social-btn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.social-btn .icon { background-color: var(--accent); }

/* ---- Stepper (progression d'inscription) --------------------------------- */
/* Pastilles HEXAGONALES BORDÉES (style du bouton social bnet du login) :
   fond foncé dérivé + liseré coloré (double-couche) + lueur sur l'active.
   2× plus grandes (32 → 64px). */
.stepper-bullet {
  position: relative;
  isolation: isolate;
  z-index: 1;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 0;
  clip-path: var(--hex);
  background: var(--dk-line-soft); /* liseré (état à venir) */
  color: var(--text-muted);
  box-shadow: none;
  transition: color 0.2s ease, filter 0.2s ease, background 0.2s ease;
}
.stepper-bullet::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: var(--hex);
  background: #07101c; /* fond foncé */
}
.stepper-bullet .material-symbols-outlined { font-size: 30px; }
.stepper-bullet .step-logo { width: 28px; height: 28px; }

.stepper-item.is-active .stepper-bullet,
.stepper-item.is-done .stepper-bullet { background: var(--accent); color: #fff; }
.stepper-item.is-active .stepper-bullet::before { background: color-mix(in srgb, var(--accent) 26%, #05080f); }
.stepper-item.is-done .stepper-bullet::before { background: color-mix(in srgb, var(--accent) 40%, #05080f); }
/* Lueur sur l'étape active (comme le survol du bouton bnet). */
.stepper-item.is-active .stepper-bullet {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 60%, transparent));
}

.stepper-label { color: var(--text-muted); }
.stepper-item.is-active .stepper-label { color: var(--text); }

/* Connecteurs RECENTRÉS sur les pastilles de 64px (centre vertical 32px ;
   départ/fin = demi-pastille 32px + petit espace). */
.stepper-item:not(:last-child)::after {
  top: 31px;
  left: calc(50% + 36px);
  right: calc(-50% + 36px);
  background: var(--dk-line-soft);
}
.stepper-item.is-done:not(:last-child)::after { background: var(--accent); }

/* ---- Popover des règles de mot de passe (biseauté, bordure suivant les coins) */
.pw-rules, .pw-popover { color: var(--text-muted); }
.pw-popover {
  position: relative;
  isolation: isolate;
  background: var(--dk-line-soft); /* liseré */
  border-radius: 0;
  clip-path: var(--bevel);
  box-shadow: none;
}
.pw-popover::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--bevel);
  background: var(--card-bg);
}

/* ---- Case à cocher (CGU / divers) ---------------------------------------- */
.terms-check { color: var(--text-muted); }
.terms-check a { color: var(--accent); }

/* ---- Emblème hexagonal d'étape (habille les pages /register/**) ---------- */
.step-emblem {
  display: inline-grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  width: 88px;
  height: 88px;
  margin: 4px auto 16px;
  clip-path: var(--hex);
  background: var(--accent);
  color: #dbe7ff;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 55%, transparent));
}
.step-emblem::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: var(--hex);
  background: color-mix(in srgb, var(--accent) 20%, #05080f);
}
.step-emblem .material-symbols-outlined { font-size: 42px; line-height: 1; }

/* ---- Étapes d'inscription : code, progression, identité, réassurance ----- */
/* Saisie du code : cases en losange (parallélogramme). La cellule porte le
   liseré penché (fond = couleur de bordure), son ::before en retrait dessine le
   fond du champ ; l'<input> transparent vit par-dessus. */
.code-cell {
  background: var(--dk-line-soft);
}
.code-cell::before {
  background: var(--field-bg);
}
.code-cell:focus-within {
  background: var(--accent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent));
}
.code-cell.is-filled {
  background: color-mix(in srgb, var(--accent) 70%, var(--dk-line-soft));
}

/* Barre de progression : la forme (penchée, comme les cases) vient de auth.css ;
   on ne surcharge ici que la couleur. */
.progress-track {
  background: rgba(255, 255, 255, 0.06);
}
.progress-bar { background: linear-gradient(90deg, #5b8def, #3a63cf); border-radius: 0; }
.code-countdown.is-low .progress-bar { background: linear-gradient(90deg, #e0b450, #ef5b6e); }

/* Carte d'identité (confirmation de liaison). Liseré biseauté en double-couche :
   un inset box-shadow resterait rectangulaire et serait rogné par le clip-path,
   laissant les coins biseautés sans bordure. La carte porte donc la couleur du
   liseré, et un ::before en retrait de 1px dessine le fond (coins compris). */
.identity-card {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  clip-path: var(--bevel);
  background: var(--dk-line-soft);
  box-shadow: none;
}
.identity-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--bevel);
  background: var(--field-bg);
}
.identity-info, .identity-info * { color: var(--text); }
/* Pastille fournisseur : hexagone sombre + liseré de marque (comme le login). */
.identity-badge {
  border: 0;
  border-radius: 0;
  clip-path: var(--hex);
  background: color-mix(in srgb, var(--brand) 18%, #05080f);
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* Bloc de réassurance : encadré sombre biseauté (double-couche, coins nets). */
.reassurance {
  position: relative;
  isolation: isolate;
  color: var(--text-muted);
  border: 0;
  border-radius: 0;
  clip-path: var(--bevel);
  background: var(--dk-line-soft);
}
.reassurance::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--bevel);
  background: var(--field-bg);
}
.reassurance p { color: var(--text-muted); }

/* ---- Sélecteur de langue + pied ------------------------------------------ */
.lang-switcher a { color: rgba(231, 236, 246, 0.7); }
.lang-switcher a.active { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .btn-pill, .btn-ghost-dark { transition: none; }
}