/*
 * Page de connexion Nexus — thème sombre « guilde » (cf. maquette).
 * Image de fond fondue (ovale) à gauche + carte centrée à deux panneaux :
 * formulaire (2/3) | accueil (1/3). Réutilise fragments, actions, assets.
 * Bordures qui suivent les découpes via DOUBLE-COUCHE (élément = liseré + clip ;
 * ::before inséré = fond). Classes `lg-*` → aucun conflit avec auth.css.
 */

.lg {
  /* 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: polygon(50% 5%, 87.6% 27.5%, 87.6% 72.5%, 50% 95%, 12.4% 72.5%, 12.4% 27.5%);
  /* Bouton hexagonal à DEUX POINTES (gauche / droite). */
  --hex-btn: polygon(0 50%, 15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%);
  /* Tuile « nid d'abeille » (flat-top) pour la mosaïque de l'aside. */
  --hex-tile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22225%22%20height%3D%22129.904%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.4%22%3E%3Cpath%20d%3D%22M75%200L37.5%2064.952L-37.5%2064.952L-75%200L-37.5%20-64.952L37.5%20-64.952Z%22%2F%3E%3Cpath%20d%3D%22M75%20129.904L37.5%20194.856L-37.5%20194.856L-75%20129.904L-37.5%2064.952L37.5%2064.952Z%22%2F%3E%3Cpath%20d%3D%22M187.5%2064.952L150%20129.904L75%20129.904L37.5%2064.952L75%200L150%200Z%22%2F%3E%3Cpath%20d%3D%22M300%200L262.5%2064.952L187.5%2064.952L150%200L187.5%20-64.952L262.5%20-64.952Z%22%2F%3E%3Cpath%20d%3D%22M300%20129.904L262.5%20194.856L187.5%20194.856L150%20129.904L187.5%2064.952L262.5%2064.952Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  --lg-bg: #040c14;
  --lg-gold: #d8b15a;
  --lg-blue: #617bfb;
  --lg-text: #e8edf7;
  --lg-dim: #8b97ae;
  /* Liserés un peu « néon » (bleu lumineux) pour mieux ressortir. */
  --lg-line: rgba(125, 165, 255, 0.7);
  --lg-line-soft: rgba(125, 165, 255, 0.38);
  --lg-glow: color-mix(in srgb, var(--lg-blue) 60%, transparent);
  --lg-bnet: #2f80d6;
  --lg-discord: #617bfb;
  /* Taille commune emblème bleu (aside) + wordmark (mêmes dimensions). */
  --lg-crest: 80px;

  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lg-bg);
  color: var(--lg-text);
}

/* ---- Illustration de fond (centre à gauche + fondu ovale) ----------------- */
.lg__art {
  position: absolute;
  inset: 0;
  z-index: 1; /* AU-DESSUS du fond hexagonal animé (z-index 0) */
  /* L'image se décale vers la gauche quand la fenêtre rétrécit (cf. media). */
  background: url('/assets/img/img.png') 24% center / cover no-repeat;
  /* Dégradé plus prononcé : cœur net RÉDUIT (~-25%), recentré, fondu plus étalé. */
  -webkit-mask: radial-gradient(ellipse 42% 62% at 28% 50%, #000 0%, #000 8%, transparent 92%);
  mask: radial-gradient(ellipse 42% 62% at 28% 50%, #000 0%, #000 8%, transparent 92%);
}

/* Fond hexagonal animé : au-dessus du #040C14, SOUS l'image et la carte. */
.lg > .nx-hex-backdrop {
  position: absolute;
  z-index: 0;
}

/* ---- Scène (carte centrée, grande) --------------------------------------- */
.lg__stage {
  position: relative;
  z-index: 2; /* au-dessus de l'image (1) et du fond hexa (0) */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Marges minimales → la carte occupe presque toute la place. */
  padding: clamp(10px, 2vh, 26px) clamp(8px, 1.5vw, 24px);
}

/* ---- Carte à deux panneaux (2/3 formulaire | 1/3 accueil) ----------------- */
/* Réinitialisation box-sizing : les largeurs %/padding ne débordent plus. */
.lg, .lg *, .lg *::before, .lg *::after { box-sizing: border-box; }

/* Carte : VRAIE bordure biseautée (corner-shape) → toujours visible, coins
   compris (le masque précédent ne traçait pas les diagonales des coins).
   Repli : coins arrondis propres si `corner-shape` non supporté.
   La bordure étant hors de la zone de contenu, les panneaux (top/left:0,
   positionnés dans la padding-box) ne la recouvrent jamais. */
.lg-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: min(1400px, 92vw, calc(86vh * 16 / 9));
  border: 1.5px solid var(--lg-line);
  border-radius: 22px;
  corner-shape: bevel;
  background: var(--lg-bg);
  box-shadow: 0 30px 80px rgba(2, 5, 12, 0.6), 0 0 16px var(--lg-glow);
}

/* Deux formulaires fixés à leur côté (connexion à GAUCHE, inscription à DROITE) ;
   l'accueil (aside) GLISSE par-dessus pour couvrir l'inactif → bascule animée. */
.lg-card__form {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 44px 52px;
  overflow-y: auto;
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lg-card__form > * { width: 100%; max-width: 500px; }
.lg-form--signin {
  left: 0;
  background: radial-gradient(125% 110% at 0% 0%, rgba(97, 123, 251, 0.16) 0%, transparent 56%);
}
.lg-form--signup {
  right: 0;
  background: radial-gradient(125% 110% at 100% 0%, rgba(97, 123, 251, 0.16) 0%, transparent 56%);
}
/* Formulaire ACTIF : visible, en place. */
.lg--signin .lg-form--signin,
.lg--signup .lg-form--signup { opacity: 1; transform: none; }
/* Formulaire INACTIF : masqué, légèrement décalé (anime à l'entrée/sortie). */
.lg--signin .lg-form--signup,
.lg--signup .lg-form--signin {
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  pointer-events: none;
}

/* Panneau accueil : calque OPAQUE qui glisse (droite en connexion, gauche en
   inscription) et couvre le formulaire inactif. */
.lg-card__aside {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 6px;
  padding: 44px 46px;
  background: var(--lg-bg);
  transition: transform 0.55s cubic-bezier(0.55, 0.05, 0.25, 1);
}
.lg--signin .lg-card__aside { transform: translateX(150%); }  /* à DROITE */
.lg--signup .lg-card__aside { transform: translateX(0); }     /* à GAUCHE */

/* Volet d'accueil : on n'affiche que le message correspondant à l'état. */
.lg-aside__pane { transition: opacity 0.4s ease; }
.lg--signin .lg-pane--signup,
.lg--signup .lg-pane--signin { display: none; }

/* Séparation lumineuse bleue sur le bord de l'aside FACE au formulaire. */
.lg-card__aside::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, var(--lg-blue) 50%, transparent 100%);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--lg-blue) 55%, transparent);
}
.lg--signin .lg-card__aside::before { left: 0; right: auto; }
.lg--signup .lg-card__aside::before { left: auto; right: 0; }

/* Mosaïque d'hexagones, confinée à une zone CIRCULAIRE (fondu radial). */
.lg-card__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--lg-blue);
  opacity: 0.3;
  -webkit-mask: var(--hex-tile) 50% 40% / 52px auto repeat,
    radial-gradient(circle at 50% 40%, #000 0%, #000 24%, transparent 70%);
  -webkit-mask-composite: source-in;
  mask: var(--hex-tile) 50% 40% / 52px auto repeat,
    radial-gradient(circle at 50% 40%, #000 0%, #000 24%, transparent 70%);
  mask-composite: intersect;
}

/* ---- Pages d'étape (fragment `shell`) : carte STATIQUE à deux panneaux ----
   Réutilise .lg-card / .lg-card__form / .lg-card__aside mais SANS le glissement
   (pas de positionnement absolu) : simple grille formulaire | accueil. */
.lg-card--single { display: grid; grid-template-columns: 3fr 2fr; }
/* `relative` (et non static) : l'aside reste le repère de sa séparation
   lumineuse (::before) et de sa mosaïque (::after) ; le formulaire ancre ses
   éventuels enfants positionnés. */
.lg-card--single .lg-card__form {
  position: relative;
  inset: auto;
  width: auto;
  opacity: 1;
  pointer-events: auto;
  background: radial-gradient(125% 110% at 0% 0%, rgba(97, 123, 251, 0.16) 0%, transparent 56%);
}
.lg-card--single .lg-card__aside {
  position: relative;
  inset: auto;
  width: auto;
  transform: none;
}
/* Séparation lumineuse bleue sur le bord GAUCHE de l'aside (face au formulaire). */
.lg-card--single .lg-card__aside::before {
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: 1px;
}
/* Titre/texte de l'aside (injectés par th:replace → ciblés par élément). */
.lg-card__aside h1,
.lg-card__aside h2 {
  margin: 4px 0 10px;
  font-size: 21px;
  font-weight: 600;
  color: var(--lg-text);
}
.lg-card__aside p {
  margin: 0 0 6px;
  max-width: 30ch;
  color: var(--lg-dim);
  font-size: 13px;
  line-height: 1.7;
}
/* Contenu de page (.form-inner) dans le panneau : pas de double cadre/padding. */
.lg-card__form .form-inner {
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  text-align: center;
}

/* ---- En-tête de formulaire (emblème + titres + social) : centré, AGRANDI -- */
.lg-form__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: 6px;
}

/* ---- Emblèmes : logo affiché DIRECTEMENT (sans hexagone) ------------------ */
/* Logo du formulaire (guilde) : IMAGE directe (comme l'aside), pas d'hexagone,
   `height:auto` → ne déborde jamais vers le bas. */
.lg-form__logo {
  display: block;
  width: 88px;
  height: auto;
  object-fit: contain;
}
/* Logo de l'aside : image directe, même largeur que le wordmark. */
.lg-aside__logo {
  display: block;
  width: var(--lg-crest);
  height: auto;
  object-fit: contain;
}
/* Volet d'accueil (message + bouton), centré. */
.lg-aside__pane {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Titres -------------------------------------------------------------- */
.lg-title {
  margin: 0;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lg-tagline {
  margin: -8px 0 0;
  color: var(--lg-dim);
  font-size: 14.5px;
}

/* ---- Boutons sociaux hexagonaux (agrandis) -------------------------------- */
.lg-social {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}
.lg-social__btn {
  --brand: var(--lg-blue);
  position: relative;
  inline-size: 74px;
  block-size: 74px;
  display: grid;
  place-items: center;
  clip-path: var(--hex);
  background: color-mix(in srgb, var(--brand) 60%, transparent); /* liseré */
  text-decoration: none;
  transition: transform 0.12s ease;
}
.lg-social__btn::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: var(--hex);
  background: color-mix(in srgb, var(--brand) 18%, #05080f);
  transition: background 0.15s ease;
}
.lg-social__btn:hover { transform: translateY(-2px); }
.lg-social__btn:hover::before { background: color-mix(in srgb, var(--brand) 30%, #05080f); }
.lg-social__btn .icon {
  position: relative;
  z-index: 1;
  inline-size: 26px;
  block-size: 26px;
  background-color: var(--brand);
}
.lg-social__btn--bnet { --brand: var(--lg-bnet); }
.lg-social__btn--discord { --brand: var(--lg-discord); }
.lg-social__btn .icon-battlenet {
  -webkit-mask: url('/assets/img/battle-net-logo.svg') center / contain no-repeat;
  mask: url('/assets/img/battle-net-logo.svg') center / contain no-repeat;
}
.lg-social__btn .icon-discord {
  -webkit-mask: url('/assets/img/discord-logo.svg') center / contain no-repeat;
  mask: url('/assets/img/discord-logo.svg') center / contain no-repeat;
}

/* ---- Séparateur « OU » --------------------------------------------------- */
.lg-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 16px;
  color: var(--lg-dim);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lg-or::before,
.lg-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lg-line-soft);
}

/* ---- Champs (biseau + bordure qui suit la découpe) ----------------------- */
.lg-field {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  clip-path: var(--bevel);
  background: var(--lg-line-soft); /* liseré complet (biseaux compris) */
  transition: background 0.15s ease;
}
.lg-field::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  clip-path: var(--bevel);
  background: #07101c;
}
.lg-field:focus-within { background: color-mix(in srgb, var(--lg-blue) 85%, transparent); }
.lg-field > * { position: relative; z-index: 1; }
.lg-field .input-icon {
  flex: 0 0 auto;
  margin: 0 4px 0 14px;
  color: var(--lg-dim);
  font-size: 20px;
}
.lg-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lg-text);
  font-size: 14px;
  padding: 14px 12px;
}
.lg-field input::placeholder { color: var(--lg-dim); }
.lg-field .pw-toggle {
  flex: 0 0 auto;
  margin-right: 10px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--lg-dim);
  cursor: pointer;
}
.lg-field .pw-toggle:hover { color: var(--lg-text); }

/* ---- Ligne « se souvenir » / « mot de passe oublié » --------------------- */
.lg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 24px;
  font-size: 13px;
}
.lg-check {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--lg-dim);
  cursor: pointer;
  user-select: none;
}
.lg-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lg-check__box {
  position: relative;
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 auto;
  clip-path: var(--hex);
  background: var(--lg-line-soft);
  transition: background 0.15s ease;
}
.lg-check__box::before {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: var(--hex);
  background: #07101c;
  transition: background 0.15s ease;
}
.lg-check__box::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 8.5px;
  top: 4px;
  inline-size: 6px;
  block-size: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg) scale(0);
  transition: transform 0.15s ease;
}
/* `~` (et non `+`) : th:field insère un <input hidden> entre la case et le box. */
.lg-check input:checked ~ .lg-check__box { background: var(--lg-blue); }
.lg-check input:checked ~ .lg-check__box::before { background: color-mix(in srgb, var(--lg-blue) 55%, #07101c); }
.lg-check input:checked ~ .lg-check__box::after { transform: rotate(40deg) scale(1); }
.lg-check input:focus-visible ~ .lg-check__box { outline: 2px solid var(--lg-blue); outline-offset: 2px; }

.lg-link {
  color: var(--lg-blue);
  text-decoration: none;
}
.lg-link:hover { text-decoration: underline; }

/* =========================================================================
   Bouton « Se connecter » — double-couche, hexagone à 2 pointes.
   - élément  = BORDURE : dégradé HORIZONTAL 617BFB · 0B80C5(centre) · 617BFB ;
   - ::before = FOND     : dégradé VERTICAL 617BFB · #040C14(centre, ~50%) · 617BFB.
   `isolation` contient le ::before (z-index -1) au-dessus de la bordure et sous
   le texte. Survol premium : élévation + halo lumineux multi-couches.
   ========================================================================= */
.lg-btn {
  position: relative;
  isolation: isolate;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 50px;
  border: 0;
  cursor: pointer;
  color: #eaf0ff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: var(--hex-btn);
  background: linear-gradient(90deg, #136bbf 0%, #1793ed 50%, #136bbf 100%);
  transition: transform 0.18s ease, filter 0.25s ease;
  filter: drop-shadow(0 0 10px #2d9eef);
}
.lg-btn::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: var(--hex-btn);
  background: linear-gradient(180deg, #024B9D 0%, #01366c 50%, #024B9D 100%);
  box-shadow: inset 0 0 10px #024B9D;
}
.lg-btn:hover {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 12px 28px rgba(11, 128, 197, 0.65))
          drop-shadow(0 0 42px rgba(97, 123, 251, 0.6))
          brightness(1.14) saturate(1.08);
}
.lg-btn:active { transform: translateY(-1px) scale(1); }

/* ---- Panneau accueil ----------------------------------------------------- */
.lg-wordmark { width: var(--lg-crest); height: auto; margin: 16px 0 2px; opacity: 0.92; }
/* Séparateur style nx-separator : ──⬡── */
.lg-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 56%;
  margin: 12px 0;
  color: color-mix(in srgb, var(--lg-blue) 75%, transparent);
}
/* Barre gauche : un peu moins clair (extérieur) → clair (centre). */
.lg-sep::before {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 35%, transparent), currentColor);
}
/* Barre droite : clair (centre) → un peu moins clair (extérieur). */
.lg-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, currentColor, color-mix(in srgb, currentColor 35%, transparent));
}
/* Losange proportionné à la barre sur une échelle logarithmique. */
.lg-sep__hex {
  inline-size: 13px;
  inline-size: calc(2.4px * log(260));
  block-size: auto;
  flex: 0 0 auto;
  color: var(--lg-blue);
}
.lg-welcome {
  margin: 4px 0 10px;
  font-size: 21px;
  font-weight: 600;
}
.lg-welcome-text {
  margin: 0 0 24px;
  max-width: 30ch;
  color: var(--lg-dim);
  font-size: 13px;
  line-height: 1.7;
}
/* Bouton fantôme : même hexagone à 2 pointes, contour bleu. */
.lg-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 14px 34px;
  cursor: pointer;
  color: var(--lg-blue);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: var(--hex-btn);
  /* Bordure UNIE 617BFB (contour sombre via ::before). */
  background: var(--lg-blue);
  transition: filter 0.2s ease, transform 0.14s ease, background 0.2s ease;
}
.lg-ghost::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  clip-path: var(--hex-btn);
  background: var(--lg-bg);
  transition: background 0.2s ease;
}
.lg-ghost > * { position: relative; z-index: 1; }
/* Survol premium : remplissage léger + halo doux. */
.lg-ghost:hover {
  transform: translateY(-3px) scale(1.015);
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--lg-blue) 50%, transparent))
          drop-shadow(0 0 30px color-mix(in srgb, var(--lg-blue) 35%, transparent))
          brightness(1.12);
}
.lg-ghost:active { transform: translateY(-1px) scale(1); }
.lg-ghost:hover::before { background: color-mix(in srgb, var(--lg-blue) 18%, var(--lg-bg)); }

/* ---- Alertes ------------------------------------------------------------- */
.lg-alert {
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 13px;
  clip-path: var(--bevel);
}
.lg-alert--error { background: rgba(220, 70, 86, 0.16); color: #f0a9b2; }
.lg-alert--success { background: rgba(70, 200, 130, 0.16); color: #9be3bd; }
.lg-alert--info { background: rgba(97, 123, 251, 0.14); color: #c7d4ff; }

/* ---- Espacement uniforme du formulaire (le `gap` gère le rythme) --------- */
.lg-card__form .lg-field { margin-bottom: 0; }
.lg-card__form .lg-or { margin: 2px 0; }
.lg-card__form .lg-row { margin: 0; }
.lg-card__form .lg-btn { margin-top: 4px; }

/* ---- Spécifique INSCRIPTION (page /register en thème .lg) ----------------- */
/* Mot de passe + confirmation sur la MÊME ligne. */
.lg-pw-row { display: flex; gap: 12px; }
.lg-pw-row .lg-field { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* Le formulaire d'inscription : mêmes 500px. */
.lg-form--signup > * { max-width: 500px; }
/* Le formulaire défile si trop haut (popover des règles déplié, etc.). */
.lg-card__form { overflow-y: auto; }
/* Erreurs de champ : petit texte rouge, aligné à gauche, marge serrée. */
.lg-card__form .field-error {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: stretch;
  margin: 2px 0 0;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  color: #ffc6cf;
  background: rgba(239, 91, 110, 0.12);
  clip-path: var(--bevel);
}
.lg-card__form .field-error::before {
  content: "warning";
  font-family: "Material Symbols Outlined";
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
  color: #ef5b6e;
}
/* Règles de mot de passe (popover en flux) : sombre, biseauté, bordure qui
   suit les coins (double-couche : liseré + fond inséré). */
.lg-card__form .pw-popover {
  position: relative;
  isolation: isolate;
  color: var(--lg-dim);
  clip-path: var(--bevel);
  background: var(--lg-line-soft);
  box-shadow: none;
}
.lg-card__form .pw-popover::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: var(--bevel);
  background: #0b1320;
}
.lg-card__form .pw-rules li.met { color: var(--lg-text); }
/* Case « J'accepte les CGU » : alignée en haut, texte multiligne à gauche. */
.lg-check--terms { align-items: flex-start; }
.lg-terms {
  text-align: left;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lg-dim);
}
.lg-terms a { color: var(--lg-blue); text-decoration: none; }
.lg-terms a:hover { text-decoration: underline; }

/* ---- Langue + pied de page (fixés aux coins de la PAGE) ------------------- */
.lg__stage .lang-switcher { position: fixed; top: 24px; right: 28px; z-index: 5; }
.lg__stage .legal-footer { position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; z-index: 5; }

/* ---- Image : se décale vers la GAUCHE à mesure que la fenêtre rétrécit ----- */
@media (max-width: 1300px) { .lg__art { background-position: 12% center; } }
@media (max-width: 1080px) { .lg__art { background-position: 0% center; } }
@media (max-width: 960px)  { .lg__art { background-position: -12% center; } }

/* ---- Responsive : empilement vertical sur tablette / mobile --------------- */
@media (max-width: 860px) {
  .lg { align-items: flex-start; }
  .lg__stage { align-items: flex-start; padding: 16px 12px 88px; }
  /* Image : fond plein écran, fondu doux, derrière la carte. */
  .lg__art {
    background-position: center 28%;
    -webkit-mask: radial-gradient(ellipse 130% 58% at 50% 16%, #000 0%, #000 22%, transparent 80%);
    mask: radial-gradient(ellipse 130% 58% at 50% 16%, #000 0%, #000 22%, transparent 80%);
  }

  /* Carte : pile verticale, hauteur auto, presque pleine largeur. */
  .lg-card,
  .lg-card--single {
    aspect-ratio: auto;
    width: min(460px, 96vw);
    display: flex;
    flex-direction: column;
  }

  /* Formulaire ACTIF statique et pleine largeur ; inactif masqué (pas de slide). */
  .lg-card__form {
    position: static;
    width: 100%;
    padding: 30px 24px;
  }
  .lg-card__form > * { max-width: 100%; }
  .lg--signin .lg-form--signup,
  .lg--signup .lg-form--signin { display: none; }
  .lg--signin .lg-form--signin,
  .lg--signup .lg-form--signup { display: flex; opacity: 1; transform: none; }

  /* Mots de passe empilés. */
  .lg-pw-row { flex-direction: column; gap: 0; }
  .lg-pw-row .lg-field { margin-bottom: 12px; }

  /* Aside compact SOUS le formulaire : on garde le volet (bouton bascule),
     on masque le décor (logo / marque / séparateur / mosaïque). */
  .lg-card__aside {
    position: static;
    width: 100%;
    transform: none;
    padding: 22px 24px 26px;
    border-top: 1.5px solid var(--lg-line-soft);
  }
  .lg-card__aside::before,
  .lg-card__aside::after,
  .lg-aside__logo,
  .lg-card__aside .lg-wordmark,
  .lg-sep { display: none; }
  .lg-welcome { font-size: 18px; margin: 0 0 6px; }
  .lg-welcome-text { font-size: 12.5px; margin: 0 0 14px; }

  /* En-tête un peu plus compact. */
  .lg-form__head { gap: 12px; }
  .lg-form__logo { width: 74px; }
  .lg-title { font-size: 24px; }
  .lg-social__btn { inline-size: 62px; block-size: 62px; }
}

@media (max-width: 420px) {
  .lg__stage { padding: 12px 8px 84px; }
  .lg-card__form { padding: 26px 18px; }
  .lg-title { font-size: 21px; letter-spacing: 0.1em; }
  .lg-social__btn { inline-size: 56px; block-size: 56px; }
  .lg-social__btn .icon { inline-size: 22px; block-size: 22px; }
  .lg-row { flex-wrap: wrap; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-btn, .lg-ghost, .lg-social__btn, .lg-check__box, .lg-check__box::after { transition: none; }
  .lg-btn:hover, .lg-ghost:hover { animation: none; }
}