@layer pages {
/* ============================================================================
   CONNEXION / INSCRIPTION — un ECRAN, pas une page.
   Ni header ni pied de page : une image de fond, le texte, et la zone de
   connexion au centre. Le seul chemin de sortie est le logo, cliquable.
   ========================================================================= */

.auth-screen {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* `svh` et non `vh` : sur mobile, `vh` compte la barre d'adresse retractee
     et ferait deborder l'ecran. `min-height` et non `height` : le formulaire
     d'inscription est plus haut que l'ecran, la page doit pouvoir defiler. */
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--sp-10) var(--sp-gutter);
}

.auth-screen__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--c-bg) url('/img/hero/hero-transition.jpg') center 40% / cover no-repeat;
  opacity: .30;
  filter: grayscale(.4) contrast(1.1);
}
.auth-screen__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(68% 58% at 50% 45%, rgb(11 11 14 / .86) 0%, rgb(11 11 14 / .62) 68%, rgb(11 11 14 / .78) 100%),
    linear-gradient(180deg, rgb(11 11 14 / .55) 0%, transparent 30%, transparent 70%, rgb(11 11 14 / .7) 100%);
}
/* Durees premieres entre elles (23 s / 31 s) : les deux halos ne repassent jamais ensemble par leur point de depart. */
.auth-screen .glow--a {
  top: -22rem; right: -10rem;
  --glow-size: 38rem; --glow-op: .22; --glow-blur: 150px;
  --glow-dx: -8%; --glow-dy: 10%; --glow-dur: 23s;
}
.auth-screen .glow--b {
  bottom: -20rem; left: -12rem;
  --glow-c: var(--c-red-500); --glow-size: 28rem; --glow-op: .20;
  --glow-dx: 18%; --glow-dy: -12%; --glow-dur: 31s;
}

.auth-screen__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  max-width: 34rem;
}

.auth-screen__brand { display: block; }
.auth-screen__brand img { height: 76px; width: auto; }

.auth-screen__back a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: var(--t-color);
}
.auth-screen__back a:hover { color: var(--c-accent); }
.auth-screen__back svg { fill: currentColor; }

/* ---- La carte centrale -------------------------------------------------- */
.auth-card { width: 100%; display: flex; flex-direction: column; gap: var(--sp-6); }
.auth-card__intro { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; }
/* Capitale initiale seulement : les h1-h3 du socle sont en capitales, on annule ici comme partout dans la refonte. */
.auth-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  line-height: .95;
  letter-spacing: var(--ls-tightest);
  text-transform: none;
  color: var(--c-text);
}
.auth-card__lead { max-width: 34ch; font-size: var(--fs-md); color: var(--c-text-muted); }

.auth__panel {
  background: var(--c-surface);
  border: var(--bw-hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-4);
  overflow: hidden;
}

.tabs { display: flex; border-bottom: var(--bw-hair) solid var(--c-border); }
.tabs__btn {
  flex: 1;
  padding: var(--sp-5) var(--sp-3);
  min-height: var(--hit-target);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-bottom: 3px solid transparent;
  transition: var(--t-color);
}
.tabs__btn:hover { color: var(--c-text); }
.tabs__btn.is-selected { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.auth__form { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-6); }
.auth__help {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  padding-top: var(--sp-4);
  border-top: var(--bw-hair) solid var(--c-border);
}

/* Champ mot de passe avec bouton afficher/masquer. */
.input-reveal { position: relative; display: flex; }
.input-reveal .input { padding-right: 5.5rem; }
.input-reveal__btn {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  padding: .35rem .7rem;
  min-height: 34px;
  border-radius: var(--r-sm);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-link);
}
.input-reveal__btn:hover { background: var(--c-surface-2); }
}