/* ═══════════════════════════════════════════════════════════
   CŒUR ASTRAL - NUIT ÉDITORIALE AUTH PAGES (ALS-1056)
   ═══════════════════════════════════════════════════════════

   Signup, signin and the utility account pages (password reset and
   change, email confirmation): page column, card, head, consents, links,
   signin layout and the decor positions of A-Accueil-Desktop,
   A-Inscription-Mobile and spec A « Connexion ».

   Loaded from each page's extra_css block, after shell.css. Every
   selector starts with `.ui-v2 ` and targets .ca-auth or its children, so
   no other page or global selector is restyled. Colours, radii, spacing and motion come
   from tokens.css; the spec's card width and padding are declared once on
   .ca-auth. The spinner reuses ca-btn-spin from components.css.

   Script hooks styled inside .ca-auth, because the pages' inline scripts
   drive them: .form-field.valid / .form-field.error (signup
   validation script), .btn-loader (signin submit script),
   .recaptcha-client-error (reCAPTCHA widget script), and the <ul> of
   Django's password help in .ca-field__help.

   style.css:73-120 sets font, colour and margins on p, span and a: rules
   below set them explicitly on what they style.

   Mobile-first breakpoints: 600px and 1024px. */

/* ─────────────────────────────────────────────────────────────
   PAGE - centred column under the guest band
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-auth {
  --ca-auth-card-max: 480px;
  --ca-auth-card-pad-x: 40px;
  /* Consent errors align with the label text: 22px box plus its gap. */
  --ca-auth-check-indent: calc(22px + var(--sp-12));
  padding: var(--sp-8) var(--gutter) var(--sp-48);
}

/* Signup and signin are guest-only: their decor host starts at the page
   top, under the transparent guest band (z-index 1), so the halo fades out
   at the page edge instead of being cut along the band's lower edge by
   .ca-decor-host's clip. Decor offsets are then page-relative, as in the
   mockups. */
.ui-v2 .ca-auth--signup,
.ui-v2 .ca-auth--signin {
  margin-top: calc(-1 * var(--ca-guest-header-height));
  padding-top: calc(var(--ca-guest-header-height) + var(--sp-8));
}

@media (min-width: 600px) {
  .ui-v2 .ca-auth {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-64);
  }

  .ui-v2 .ca-auth--signup,
  .ui-v2 .ca-auth--signin {
    padding-top: calc(var(--ca-guest-header-height) + var(--sp-12));
  }
}

/* Utility pages (password, email confirmation): the page header sits at
   the spec's page top under the masthead or guest band, as onboarding. */
.ui-v2 .ca-auth--utility {
  padding-top: var(--page-top);
}

.ui-v2 .ca-auth__stage {
  position: relative;
  max-width: var(--ca-auth-card-max);
  margin: 0 auto;
}

.ui-v2 .ca-auth--utility .ca-auth__stage {
  max-width: var(--container-form);
}

/* ─────────────────────────────────────────────────────────────
   CARD - flat on phones, framed surface from 600px
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-auth__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}

@media (min-width: 600px) {
  .ui-v2 .ca-auth__card {
    padding: var(--sp-32) var(--ca-auth-card-pad-x) var(--sp-24);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background-color: var(--surface-1);
    box-shadow: var(--shadow-swipe);
  }

  /* Gold ornament on the top edge, inset by the card padding. */
  .ui-v2 .ca-auth__card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: var(--ca-auth-card-pad-x);
    right: var(--ca-auth-card-pad-x);
    height: 1px;
    background: var(--rule-ornament);
  }
}

/* ─────────────────────────────────────────────────────────────
   HEAD - title, subtitle, time chip
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-auth__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-12);
}

@media (min-width: 600px) {
  .ui-v2 .ca-auth--signup .ca-auth__head {
    align-items: center;
    gap: var(--sp-16);
    text-align: center;
  }
}

.ui-v2 .ca-auth--utility .ca-auth__head {
  align-items: flex-start;
  text-align: left;
}

/* Sits with .ca-display-2, which brings the family, weight 500 and colour;
   the spec keeps 40/44 at every width. */
.ui-v2 .ca-auth__title {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.ui-v2 .ca-auth__subtitle {
  margin: 0;
  color: var(--ivory-300);
  font: 400 16px/24px var(--font-ui);
}

@media (min-width: 600px) {
  .ui-v2 .ca-auth__subtitle {
    font-size: 15px;
    line-height: 22px;
  }
}

/* Gold pill on phones (A-Inscription-Mobile), neutral outline from 600px
   (A-Accueil-Desktop). */
.ui-v2 .ca-auth__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 30px;
  margin: 0;
  padding: 0 var(--sp-12);
  border: 1px solid var(--frame-gold);
  border-radius: var(--r-pill);
  background-color: var(--gold-wash);
  color: var(--gold-400);
  font: 600 12px/16px var(--font-ui);
  letter-spacing: 0.02em;
}

.ui-v2 .ca-auth__chip > span {
  font: inherit;
}

@media (min-width: 600px) {
  .ui-v2 .ca-auth__chip {
    height: 28px;
    border-color: var(--rule-chip);
    background-color: transparent;
    color: var(--ivory-300);
    font-weight: 500;
    letter-spacing: normal;
  }
}

/* Error summary: the text starts level with the icon. */
.ui-v2 .ca-auth__errors .ca-notice__text:first-child {
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────
   FORM - fields, script validation states, consents
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  margin: 0;
}

/* Error text keeps the error type over style.css span { 1rem/1.5 }. */
.ui-v2 .ca-auth .ca-field__error span {
  font: inherit;
}

/* The signup script sets .valid or .error on .form-field after a check:
   ✓ in success green, ✗ in danger red with a red border. */
.ui-v2 .ca-auth .form-field.valid .ca-field__status--valid,
.ui-v2 .ca-auth .form-field.error .ca-field__status--invalid {
  display: inline-flex;
}

.ui-v2 .ca-auth .ca-field__status--invalid {
  color: var(--danger-text);
}

.ui-v2 .ca-auth .form-field.error .ca-field__control {
  border-color: var(--danger-line);
}

/* The script's message for its check, always in the DOM inside a polite
   live region: shown only while the field is .error and no server error
   (.ca-field--error) is on screen. Hidden, the region pulls back the
   .ca-field gap it would otherwise add. */
.ui-v2 .ca-auth .ca-auth__live {
  margin-top: calc(-1 * var(--sp-8));
}

.ui-v2 .ca-auth .ca-auth__client-error {
  display: none;
}

.ui-v2 .ca-auth .form-field.error:not(.ca-field--error) .ca-auth__live {
  margin-top: 0;
}

.ui-v2 .ca-auth .form-field.error:not(.ca-field--error) .ca-auth__client-error {
  display: flex;
}

/* Password box with both a status icon and the reveal button: the status
   moves left of the 44px button and the text stops before both. */
.ui-v2 .ca-auth .ca-field__box:has(.ca-field__toggle):has(.ca-field__status) .ca-field__control {
  padding-right: 80px;
}

.ui-v2 .ca-auth .ca-field__box:has(.ca-field__toggle):has(.ca-field__status) .ca-field__status {
  right: 50px;
}

/* Django password help is a list; beats Materialize ul:not(.browser-default). */
.ui-v2 .ca-auth .ca-field__help ul {
  margin: 0;
  padding-left: 18px;
}

.ui-v2 .ca-auth .ca-field__help li {
  list-style-type: disc;
}

.ui-v2 .ca-auth__consents {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ALS-1188: the whole row is the checkbox's label, at least 44px tall
   (.ca-check), so a tap anywhere but the link toggles it; the copy wraps. */
.ui-v2 .ca-auth__consents .ca-check {
  align-items: flex-start;
  padding: 2px 0;
  cursor: pointer;
}

.ui-v2 .ca-auth__consents .ca-check__label {
  min-width: 0;
}

.ui-v2 .ca-auth__consents .ca-field__error {
  padding-left: var(--ca-auth-check-indent);
}

.ui-v2 .ca-auth .ca-check__label a {
  color: var(--violet-400);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ui-v2 .ca-auth .ca-check__label a:hover {
  color: var(--ivory-100);
}

.ui-v2 .ca-auth .ca-check--error .ca-check__input {
  border-color: var(--danger-line);
}

/* ─────────────────────────────────────────────────────────────
   SUBMIT - brand button, signin busy state
   The signin script disables the button while it submits: it keeps the
   brand look under the spinner instead of the grey disabled state.
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-auth__submit:disabled {
  --ca-btn-fg: var(--ivory-100);
  background-image: var(--gradient-brand);
  box-shadow: var(--gradient-brand-edge);
  cursor: progress;
}

.ui-v2 .ca-auth .btn-loader {
  line-height: 0;
}

.ui-v2 .ca-auth__spinner {
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ca-btn-spin var(--dur-spin) linear infinite;
}

/* Google's notice under the submit button. */
.ui-v2 .ca-auth__recaptcha {
  margin: 0;
  color: var(--ivory-500);
  font: 500 12px/18px var(--font-ui);
  text-align: center;
}

.ui-v2 .ca-auth__recaptcha a {
  font: inherit;
}

/* Injected by the reCAPTCHA widget script when api.js is blocked; its
   inline colour stays. */
.ui-v2 .ca-auth .recaptcha-client-error {
  margin: 0;
  font: 500 13px/20px var(--font-ui);
}

/* ─────────────────────────────────────────────────────────────
   LINKS - switch to the other auth page, forgot password
   « Mot de passe oublié ? » sits in the signin form, right under the
   password field (spec A « Connexion »): its 44px target already spaces
   it, so it pulls up into the form gap.
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-auth__switch {
  margin: 0;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--rule-soft);
  color: var(--ivory-300);
  font: 500 14px/20px var(--font-ui);
  text-align: center;
}

.ui-v2 .ca-auth__switch .ca-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  font: inherit;
  font-weight: 600;
}

.ui-v2 .ca-auth__links {
  margin: calc(-1 * var(--sp-12)) 0 0;
  font: 500 14px/20px var(--font-ui);
  text-align: right;
}

.ui-v2 .ca-auth__links .ca-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: inherit;
}

/* ─────────────────────────────────────────────────────────────
   UTILITY PAGES - body text and action stack
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-auth__text {
  margin: 0;
  color: var(--ivory-300);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-ui);
}

.ui-v2 .ca-auth__text a {
  color: var(--violet-400);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ui-v2 .ca-auth__text a:hover {
  color: var(--ivory-100);
}

.ui-v2 .ca-auth__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin: 0;
}

/* Native <details> (email confirmation: fix the address): 44px summary
   target, which also spaces the form below it. */
.ui-v2 .ca-auth__details summary {
  padding: var(--sp-12) 0;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────
   SIGNIN LAYOUT - stacked, then intro left and card right from 1024px
   ───────────────────────────────────────────────────────────── */
.ui-v2 .ca-auth__layout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  max-width: var(--ca-auth-card-max);
  margin: 0 auto;
}

.ui-v2 .ca-auth__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.ui-v2 .ca-auth__logo {
  display: none;
}

@media (min-width: 1024px) {
  .ui-v2 .ca-auth__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ca-auth-card-max);
    gap: var(--sp-64);
    align-items: center;
    max-width: var(--container-content);
    padding-top: var(--sp-48);
  }

  .ui-v2 .ca-auth__logo {
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: var(--sp-12);
  }

  .ui-v2 .ca-auth--signin .ca-display-lede {
    max-width: 36ch;
    text-wrap: pretty;
  }
}

/* ─────────────────────────────────────────────────────────────
   DECOR - one halo and one constellation per page, through the
   base.css custom properties
   ───────────────────────────────────────────────────────────── */

/* Signup halo behind the top of the card: a wide ellipse. */
.ui-v2 .ca-auth--signup .ca-auth__halo {
  --halo-x: 130px;
  --halo-y: 110px;
  --halo-size-mobile: 452px;
  aspect-ratio: 452 / 300;
}

/* Signup constellation: Balance cropped by the bottom-right corner on
   phones, in the free band under « Déjà un compte ? », clear of the guest
   band buttons and of every line of copy; Gémeaux by the right edge from
   600px. */
.ui-v2 .ca-auth--signup .ca-auth__constellation {
  --constellation-size: 160px;
  --constellation-rotate: 10deg;
  --constellation-opacity: 0.26;
  bottom: -100px;
  right: -60px;
}

/* Signin halo on the title: top right on phones and tablets, top left of
   the intro from 1024px. */
.ui-v2 .ca-auth--signin .ca-auth__halo {
  --halo-x: calc(100% - 60px);
  --halo-y: 40px;
}

/* Signin constellation: Lion cropped by the bottom-left corner, in the
   free band under the last line of copy (« Pas encore de compte ? »
   while stacked), so no line or star crosses text. */
.ui-v2 .ca-auth--signin .ca-auth__constellation {
  --constellation-size: 200px;
  --constellation-rotate: 12deg;
  --constellation-opacity: 0.24;
  bottom: -100px;
  left: -60px;
}

@media (min-width: 600px) {
  .ui-v2 .ca-auth--signup .ca-auth__halo {
    --halo-x: 50%;
    --halo-y: 130px;
    --halo-size: 860px;
    aspect-ratio: 860 / 560;
  }

  .ui-v2 .ca-auth--signup .ca-auth__constellation {
    --constellation-size: 420px;
    --constellation-rotate: -8deg;
    --constellation-opacity: 0.3;
    top: 150px;
    right: -150px;
    bottom: auto;
  }
}

@media (min-width: 1024px) {
  .ui-v2 .ca-auth--signin .ca-auth__halo {
    --halo-x: 60px;
    --halo-y: 60px;
    --halo-size: 480px;
  }

  /* Under the lede, clear of it from 1024px (where the lede wraps most). */
  .ui-v2 .ca-auth--signin .ca-auth__constellation {
    --constellation-size: 360px;
    --constellation-opacity: 0.28;
    bottom: -150px;
    left: -60px;
  }
}