/* ─── LES ÉCRANS D'AUTHENTIFICATION : /login, /change-password, /profiles ───────────────────
   Chargée par le gabarit `Auth.astro`, APRÈS `rail.css` (dont elle lit les jetons `--ray-*`,
   `--paper`, et l'avatar de profil).

   Les trois écrans portaient chacun sa copie de la même carte — page à halos, carte blanche,
   marque Ilypsis, champs de 42 px, bouton de 44 px, bandeau d'échec —, recopiée de `login.astro`
   dans `change-password.astro` puis dans `profiles.astro`. Trois copies d'un même dessin divergent
   au premier réglage : c'est ce qui était arrivé à `change-password` avant le lot C1 (resté sur
   l'ancienne palette pendant que la connexion passait à la refonte). La charte vit ICI, une fois ;
   chaque page ne garde que ce qui n'appartient qu'à elle (la grille et le pavé de /profiles).

   Les valeurs sont celles de `login.astro` au lot C1 — elles-mêmes portées de la maquette
   « Refonte A » (écran `login`) —, sauf là où un commentaire dit le contraire. */

/* Les deux teintes de champ que la coquille n'expose sous aucun nom, préfixées `--auth-` pour ne
   pas se faire passer pour du vocabulaire partagé. */
.auth-page {
  --auth-field-line: var(--ray-field);
  --auth-field-bg: oklch(0.985 0.006 75);
}

/* ── L'écran ──
   Écran plein : ni rail, ni en-tête de module (la maquette exclut les écrans d'authentification
   des deux). Le gabarit (`Auth.astro`) ne fournit que la SURFACE ; c'est la page qui centre sa carte.
   `width: 100%` est AFFIRMÉ : s'en remettre à la largeur automatique d'un bloc, c'est laisser le
   prochain gabarit décider à notre place (mesuré : `main.auth-page` à 370 px dans une fenêtre de
   1821, quand le gabarit centrait en grille). Seule description de cet écran : `Auth.astro` en
   portait une copie, retirée au lot C2. */
.auth-page {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px 52px;
  background: var(--paper);
}

/* Les deux halos radiaux du fond, en pseudo-éléments : deux nœuds de moins pour un lecteur
   d'écran que les deux `<div>` vides de la maquette.
   ⚠ `z-index: 0` n'est pas décoratif. Un pseudo-élément en `position: absolute` peint AU-DESSUS du
   contenu en flux normal, quel que soit l'ordre du markup : au téléphone, où le halo bleu croise la
   carte, le cercle passait DEVANT le formulaire. La carte est remontée à `z-index: 1`. */
.auth-page::before,
.auth-page::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.auth-page::before {
  left: -160px; top: -160px; width: 520px; height: 520px;
  background: radial-gradient(circle at 40% 40%, oklch(0.93 0.02 75), transparent 70%);
}
.auth-page::after {
  right: -200px; bottom: -220px; width: 620px; height: 620px;
  background: radial-gradient(circle at 40% 40%, #d9e7f3, transparent 70%);
  opacity: 0.8;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid var(--ray-line);
  border-radius: var(--ray-r);
  padding: 28px 28px 26px;
  box-shadow: 0 24px 50px -30px rgba(40, 30, 15, 0.35), 0 2px 6px rgba(40, 30, 15, 0.04);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* La grille des profils : une rangée de tuiles demande plus que les 400 px d'un formulaire. 780 px :
   CINQ tuiles de front (5 × 132 + 4 × 14 = 716 px sur 722 utiles) — à 720, la cinquième passait
   seule sur une seconde rangée (relevé en capture, cinq profils d'épreuve). */
.auth-card.auth-card-large { max-width: 780px; }

/* ── Marque (icône d'application de la charte + nom du compte ; logo horizontal sur les pages Ilypsis) ── */
.auth-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.auth-logo {
  width: 40px; height: 40px; flex-shrink: 0; display: block;
  background: url('/assets/marque/icone-app.svg') center / contain no-repeat;
}
/* Le logo horizontal (src/assets/marque/logo-horizontal.svg, copie à l'octet de la charte) : texte vectorisé, jamais recomposé en police.
   Charte : 100 px de large au minimum ; la zone de protection (moitié de la hauteur du symbole) est
   tenue par la marge basse et l'écart avec le sous-titre (10 + 6 = 16 px pour un symbole d'environ
   32 px de haut). */
.auth-logo-horizontal { display: block; width: 160px; max-width: 100%; height: auto; margin-bottom: 10px; }
.auth-head-logo { display: grid; gap: 6px; justify-items: start; }
.auth-brand { display: grid; line-height: 1.25; min-width: 0; }
.auth-brand-name { font-size: var(--fs-lg); font-weight: 600; color: var(--ray-navy); overflow-wrap: anywhere; }
.auth-brand-sub { font-size: var(--fs-sm); font-weight: 400; color: var(--ray-muted); overflow-wrap: anywhere; }

/* ── Intro ── */
.auth-intro { display: grid; gap: 4px; }
.auth-intro h1 {
  margin: 0; font-size: var(--fs-2xl); font-weight: 600;
  letter-spacing: -0.02em; color: var(--ray-navy); line-height: 1.2;
}
.auth-intro p { margin: 0; font-size: var(--fs-base); color: var(--ray-muted); }
.auth-intro p strong { color: var(--ray-ink); font-weight: 600; }

/* ── Formulaire ── */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field.stacked { display: flex; flex-direction: column; gap: 6px; }
.auth-form .field.stacked .hint {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ray-muted-2);
  text-transform: none; letter-spacing: 0;
}
.auth-form .field.stacked input {
  width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid var(--auth-field-line); border-radius: var(--ray-r-sm);
  background: var(--auth-field-bg); font-size: var(--fs-md); color: var(--ray-ink);
  transition: background 0.15s ease;
}
/* AUCUNE marque de focus sur un champ : décision d'atelier (rail.css, « LES CHAMPS »). Le fond
   passe au blanc — ce n'est ni un contour ni un halo, et le champ actif reste repérable. */
.auth-form .field.stacked input:focus-visible { background: #fff; }
.auth-form .field.stacked input:disabled { opacity: 0.6; }

/* ── Boutons ── */
.auth-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; margin-top: 6px; padding: 0 16px;
  background: var(--ray-accent-2); color: #fff;
  border: 1px solid var(--ray-accent-2); border-radius: var(--ray-r-sm);
  font-size: var(--fs-md); font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.auth-submit i { font-size: var(--fs-base); }
.auth-submit:hover { background: var(--ray-accent); border-color: var(--ray-accent); }
.auth-submit:focus-visible { outline: 2px solid var(--ray-accent); outline-offset: 2px; }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { opacity: 0.72; cursor: progress; transform: none; }

/* Le bouton SECOND (Retour), à côté du principal : même hauteur, filet au lieu de l'aplat. */
.auth-second {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: var(--ray-r-sm);
  border: 1px solid var(--ray-line); background: #fff; color: var(--ray-ink);
  font-size: var(--fs-md); font-weight: 600; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.auth-second:hover { border-color: var(--ray-accent-2); color: var(--ray-accent); }
.auth-second:focus-visible { outline: 2px solid var(--ray-accent); outline-offset: 2px; }
.auth-second:disabled { opacity: 0.6; cursor: not-allowed; }

/* Le lien discret du pied de carte (se déconnecter, revenir). 44 px de haut au moins : deux liens
   repliés l'un sous l'autre au téléphone (/profiles) se touchaient à 4 px d'écart — deux cibles au
   doigt collées, dont l'une DÉCONNECTE le compte. */
.auth-lien {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 6px 10px; border: 0; border-radius: var(--ray-r-sm); background: none;
  font: inherit; font-size: var(--fs-base); color: var(--ray-muted); text-decoration: none; cursor: pointer;
}
.auth-lien:hover { color: var(--ray-accent); }
.auth-lien.danger:hover { color: var(--ray-danger); }
.auth-lien:focus-visible { outline: 2px solid var(--ray-accent); outline-offset: 2px; }

/* ── Bandeaux ──
   L'échec : vocabulaire de danger du rail. Le message reste UNIQUE côté serveur (la connexion ne
   dit pas lequel des deux champs est en cause). L'avertissement : les jetons d'avertissement de la
   refonte (`--ray-warn*`, ceux de la maquette), à la forme du bandeau d'échec. */
.auth-page .form-error {
  margin: 0; font-size: var(--fs-base); color: var(--ray-danger);
  padding: 9px 11px; background: var(--ray-danger-soft);
  border: 1px solid #e0a49e; border-left-width: 3px; border-radius: var(--ray-r-sm);
}
.auth-page .form-warn {
  margin: 0; display: flex; align-items: flex-start; gap: 8px;
  color: var(--ray-warn); font-size: var(--fs-base); line-height: 1.45;
  padding: 9px 11px; background: var(--ray-warn-soft);
  border: 1px solid #ecdcb4; border-left-width: 3px; border-radius: var(--ray-r-sm);
}
.auth-page .form-warn i { margin-top: 2px; font-size: var(--fs-sm); }

.auth-help { margin: 0; font-size: var(--fs-sm); color: var(--ray-muted); text-align: center; }

.auth-footer {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1;
  text-align: center; font-size: var(--fs-sm); color: var(--ray-muted);
}

/* Sous 420 px la carte touche presque les bords : on lui rend de la marge en réduisant son propre
   rembourrage. Ajout à la maquette, qui ne décrit pas ce cas. */
@media (max-width: 420px) {
  .auth-page { padding: 24px 16px 48px; }
  .auth-card { padding: 24px 20px 22px; }
}