/*
 * Pages d'accès (connexion, inscription, vérification de l'email,
 * consentements) : même écran que la connexion du
 * cockpit (csm-offre1, refonte du 23/10/2026), pour que le passage d'un outil
 * à l'autre ne se voie pas. Valeurs reprises telles quelles des jetons du
 * cockpit (`globals.css`, `design-tokens.ts`) : changer l'une, c'est changer
 * l'autre.
 */

.auth {
  --navy-900: #0c1023;
  --navy-800: #111530;
  --navy-deep: #0a0e1f;
  --gold-500: #b8923e;
  --gold-400: #c8a766;
  --gold-300: #d9be86;
  --gold-grad: linear-gradient(
    135deg,
    var(--gold-400) 0%,
    var(--gold-500) 100%
  );
  --on-accent: #2a2008;
  --on-navy-1: #ffffff;
  --on-navy-2: rgba(255, 255, 255, 0.72);
  --on-navy-3: rgba(255, 255, 255, 0.46);
  --on-navy-line: rgba(255, 255, 255, 0.1);
  --accent-soft: rgba(184, 146, 62, 0.14);
  --accent-line: rgba(184, 146, 62, 0.3);
  --border-gold: rgba(184, 146, 62, 0.22);
  --gold-glow: rgba(184, 146, 62, 0.25);
  --error: #e05d5d;
  --error-soft: rgba(224, 93, 93, 0.12);
  --error-text: #f0a3a3;
  --text-1: #0c1023;
  --border-1: rgba(12, 16, 35, 0.1);
  --elev-1: 0 1px 2px rgba(12, 16, 35, 0.05), 0 1px 3px rgba(12, 16, 35, 0.04);
  --elev-2: 0 4px 14px rgba(12, 16, 35, 0.08);
  --elev-3: 0 10px 28px rgba(12, 16, 35, 0.1);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--navy-900);
  background-image: radial-gradient(
    120% 90% at 50% 18%,
    var(--navy-800) 0%,
    var(--navy-900) 48%,
    var(--navy-900) 100%
  );
  color: var(--on-navy-1);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 400;
}

/* `hidden` l'emporte toujours (les boutons d'icône sont en flex) */
.auth [hidden] {
  display: none !important;
}

/* ── En-tête : logo officiel souligné d'un filet ─────────────────────────── */
.auth-header {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--on-navy-line);
}
.auth-header img {
  height: 48px;
  width: auto;
  display: block;
}

/* ── Colonne ─────────────────────────────────────────────────────────────── */
.auth-colonne {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 24px 48px;
  box-sizing: border-box;
  flex: 1;
}

/* Le robot de Cercle IA au-dessus du titre (connexion, inscription ; auth-robot.js) : sa
   place est gardée avant qu'il arrive, rien ne bouge ; aligné sur le titre, le vide du
   dessin rattrapé à gauche */
.auth-robot {
  display: flex;
  height: 80px;
  margin: -24px 0 12px -8px;
}
.auth-robot .cia-robot-hote {
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.auth-titre {
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--on-navy-1);
}
.auth-titre .large {
  display: none;
}

.auth-sous-titre {
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-navy-2);
}

/* ── Liens ───────────────────────────────────────────────────────────────── */
.auth-lien {
  color: var(--gold-400);
  font-weight: 600;
  /* Soulignement fin et un peu en retrait, sous les jambages : il souligne
     le texte sans le manger */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(200, 167, 102, 0.6);
  text-decoration-skip-ink: auto;
  transition:
    color 0.2s var(--ease),
    text-decoration-color 0.2s var(--ease);
}
.auth-lien:hover {
  color: var(--gold-300);
  text-decoration-color: var(--gold-300);
}
/* Lien vers un autre site : flèche ↗ qui sort en haut à droite au survol pendant
   qu'une seconde arrive d'en bas à gauche, et l'inverse quand la souris s'en va */
.auth-lien-fleche {
  white-space: nowrap;
}
.auth-lien-fleche .fleche {
  position: relative;
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 3px;
  overflow: hidden;
  vertical-align: -0.05em;
}
.auth-lien-fleche .fleche svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0; /* pas celui de .auth-erreur svg */
  transition: transform 0.32s var(--ease);
}
.auth-lien-fleche .fleche svg + svg {
  transform: translate(-110%, 110%);
}
.auth-lien-fleche:hover .fleche svg:first-child,
.auth-lien-fleche:focus-visible .fleche svg:first-child {
  transform: translate(110%, -110%);
}
.auth-lien-fleche:hover .fleche svg + svg,
.auth-lien-fleche:focus-visible .fleche svg + svg {
  transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .auth-lien-fleche .fleche svg {
    transition: none;
  }
  .auth-lien-fleche:hover .fleche svg:first-child,
  .auth-lien-fleche:focus-visible .fleche svg:first-child {
    transform: none;
  }
  .auth-lien-fleche .fleche svg + svg {
    visibility: hidden;
  }
}
button.auth-lien {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ── Champs ──────────────────────────────────────────────────────────────── */
.auth-champ {
  margin-bottom: 16px;
}
.auth-libelle {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-navy-1);
}
.auth-libelle .requis {
  margin-left: 2px;
  color: var(--gold-400);
}

.auth-saisie {
  position: relative;
}
.auth-input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--on-navy-line);
  background: var(--navy-deep);
  color: #fff;
  font:
    400 15px "Inter",
    sans-serif;
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.auth-input::placeholder {
  color: var(--on-navy-3);
}
.auth-input:hover {
  border-color: var(--border-gold);
}
.auth-input:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 16px -6px var(--gold-glow);
}
.auth-input[aria-invalid="true"] {
  border-color: var(--error);
}
.auth-input.avec-icone {
  padding-right: 48px;
}
/* Saisie automatique du navigateur : rester sur le navy */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px var(--navy-deep) inset;
  caret-color: #fff;
}

/* E-mail reconnu : rangée verrouillée, crayon pour revenir en arrière */
.auth-input[readonly] {
  background: var(--navy-900);
  color: var(--on-navy-2);
  font-size: 14px;
  cursor: default;
}
.auth-input[readonly]:hover {
  border-color: var(--on-navy-line);
}
.auth-input[readonly]:focus {
  border-color: var(--on-navy-line);
  box-shadow: none;
}

.auth-icone {
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: 6px;
  color: var(--on-navy-3);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.auth-icone:hover {
  color: var(--gold-400);
}
.auth-icone.crayon {
  color: var(--gold-400);
}
.auth-icone.crayon:hover {
  opacity: 0.8;
}

.auth-aide {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--on-navy-3);
}
.auth-sous-champ {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-navy-2);
}

/* Téléphone : drapeau et indicatif à gauche, séparés du numéro par un filet.
   C'est un bouton : il ouvre le menu des pays (telephone.css). */
.auth-indicatif {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 14px;
  border: none;
  border-right: 1px solid var(--on-navy-line);
  border-radius: 8px 0 0 8px;
  background: none;
  color: var(--on-navy-2);
  font: 400 15px "Inter", sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition:
    color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}
.auth-indicatif:hover {
  color: var(--on-navy-1);
  background: rgba(255, 255, 255, 0.04);
}
.auth-indicatif:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: -2px;
}
.auth-indicatif .drapeau {
  display: block;
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.auth-indicatif .chevron {
  margin-left: -2px;
  opacity: 0.7;
  transition: transform 0.2s var(--ease);
}
.auth-indicatif[aria-expanded="true"] {
  color: var(--on-navy-1);
}
.auth-indicatif[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}
.auth-input.avec-indicatif {
  padding-left: 112px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* L'aide s'efface quand une erreur s'affiche (comme le cockpit) */
.auth-champ:has(.auth-erreur.visible) .auth-aide {
  display: none;
}

/* Erreur sous un champ : apparaît en douceur (hauteur + opacité) */
.auth-erreur {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  overflow: hidden;
  max-height: 0;
  margin: 0;
  opacity: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--error-text);
  transition:
    max-height 0.2s var(--ease),
    margin-top 0.2s var(--ease),
    opacity 0.2s var(--ease);
}
.auth-erreur.visible {
  max-height: 80px;
  margin-top: 12px;
  opacity: 1;
}
.auth-erreur svg {
  flex: none;
  margin-top: 1px;
}

/* Case à cocher */
.auth-case {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 14px;
  color: var(--on-navy-2);
  cursor: pointer;
}
.auth-case input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gold-500);
  cursor: pointer;
}

/* ── Bandeaux (application d'origine, erreur serveur, info) ──────────────── */
.auth-bandeau {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 24px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-navy-2);
}
.auth-bandeau strong {
  font-weight: 500;
  color: var(--gold-400);
}
.auth-bandeau .point {
  flex: none;
  width: 0.6em;
  height: 0.6em;
  margin-top: 6px;
  border-radius: 50%;
  border: 1.7px solid var(--gold-400);
}
.auth-bandeau .icone {
  flex: none;
  margin-top: 2px;
  color: var(--gold-400);
}
.auth-bandeau.erreur {
  border-color: var(--error);
  background: var(--error-soft);
  color: var(--error-text);
}
.auth-bandeau.erreur .point {
  border-color: var(--error-text);
}
.auth-bandeau.succes {
  border-color: var(--on-navy-line);
  background: var(--navy-900);
}

/* ── Boutons (pilules du cockpit) ────────────────────────────────────────── */
.auth-bouton {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font:
    600 16px/24px "Inter",
    sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease),
    opacity 0.2s var(--ease);
}
.auth-bouton:active {
  transform: translateY(0) scale(0.985);
}
.auth-bouton.primaire {
  margin-top: 8px;
  background-color: var(--gold-500);
  background-image: var(--gold-grad);
  color: var(--on-accent);
}
.auth-bouton.primaire:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-3);
}
/* Bouton discret (« Créer un compte ») : transparent, texte or souligné ;
   au survol, un voile gris translucide */
.auth-bouton.secondaire {
  margin-top: 12px;
  background: transparent;
  color: var(--gold-400);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(200, 167, 102, 0.6);
  text-decoration-skip-ink: auto;
  /* Centrage optique : le soulignement alourdit le bas, le texte remonte d'un cheveu */
  padding-top: 8px;
  padding-bottom: 12px;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    text-decoration-color 0.2s var(--ease);
}
.auth-bouton.secondaire:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold-300);
  text-decoration-color: var(--gold-300);
}
.auth-bouton:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

/* Chargement : le texte s'efface, le spinner prend sa place au même endroit
   (le bouton garde sa taille) ; réussite : la coche se trace. Fondu croisé. */
.auth-pile {
  display: grid;
  place-items: center;
}
.auth-pile > * {
  grid-area: 1 / 1;
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.auth-bouton .spinner,
.auth-bouton .coche {
  display: block;
  opacity: 0;
  transform: scale(0.6);
}
.auth-bouton[data-state="loading"] .texte,
.auth-bouton[data-state="success"] .texte {
  opacity: 0;
  transform: scale(0.96);
}
.auth-bouton[data-state="loading"] .spinner {
  opacity: 1;
  transform: scale(1);
}
.auth-bouton[data-state="loading"] .spinner circle,
.auth-bouton[data-state="loading"] .spinner path {
  transform-origin: center;
  animation: auth-tourne 1s linear infinite;
}
.auth-bouton[data-state="success"] .coche {
  opacity: 1;
  transform: scale(1);
}
.auth-bouton[data-state="success"] .coche path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: auth-trace 0.35s ease-out 0.05s forwards;
}
.auth-bouton[data-state="loading"],
.auth-bouton[data-state="success"] {
  cursor: wait;
  transform: none;
  box-shadow: none;
}
@keyframes auth-tourne {
  to {
    transform: rotate(360deg);
  }
}
@keyframes auth-trace {
  to {
    stroke-dashoffset: 0;
  }
}

/* Prénom et nom côte à côte */
.auth-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}

/* ── Fenêtre (mention importante) ────────────────────────────────────────── */
.auth-modale {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  animation: auth-voile 0.22s ease-out both;
}
.auth-modale-carte {
  position: relative;
  width: 100%;
  max-width: 384px;
  box-sizing: border-box;
  padding: 28px;
  border-radius: 14px;
  border: 1px solid var(--on-navy-line);
  background: var(--navy-800);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: auth-ouvre 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.auth-modale-carte > .auth-icone {
  top: 8px;
  right: 8px;
}
.auth-modale-titre {
  margin: 0 0 12px;
  padding-right: 32px;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--on-navy-1);
}

/* La fenêtre naît sur place : fondu et carte à peine plus petite au départ, rien ne glisse */
@keyframes auth-ouvre {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes auth-voile {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-modale,
  .auth-modale-carte {
    animation: none;
  }
}

/* ── Pied : mentions ─────────────────────────────────────────────────────── */
.auth-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  padding: 0 24px 24px;
  font-size: 13px;
}
.auth-pied a {
  color: var(--on-navy-3);
  text-decoration: none;
}
.auth-pied a:hover {
  color: var(--on-navy-2);
  text-decoration: underline;
}

/* ── Mouvement ───────────────────────────────────────────────────────────── */
/* Apparition échelonnée au chargement (80 ms entre deux blocs, comme le cockpit) */
.auth-apparition {
  opacity: 0;
  transform: translateY(14px);
  animation: auth-monte 0.5s var(--ease) forwards;
  animation-delay: calc(0.05s + var(--i, 0) * 0.08s);
}
@keyframes auth-monte {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Passage e-mail → mot de passe : rien ne sort de l'écran, le champ se déplie
   sous l'e-mail et la hauteur suit (aucune impression de rechargement) */
.auth-hauteur.anime {
  overflow: hidden;
  transition: height 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.auth-deplie {
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease);
}
.auth-deplie.replie {
  opacity: 0;
  transform: translateY(-6px);
}

/* ── Écrans larges ───────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .auth-header {
    height: 96px;
    padding: 0 48px;
  }
  .auth-header img {
    height: 60px;
  }
  .auth-colonne {
    padding: 80px 16px 48px;
  }
  .auth-robot {
    justify-content: center;
    margin: -40px 0 16px;
  }
  .auth-titre {
    margin-bottom: 12px;
    font-size: 32px;
    text-align: center;
  }
  .auth-titre .court {
    display: none;
  }
  .auth-titre .large {
    display: inline;
  }
  .auth-sous-titre {
    margin-bottom: 40px;
    font-size: 16px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-apparition {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .auth-deplie,
  .auth-hauteur.anime,
  .auth-erreur,
  .auth-bouton {
    transition: none;
  }
  .auth-bouton:hover,
  .auth-bouton:active {
    transform: none;
  }
  .auth-pile > * {
    transition: none;
  }
  .auth-bouton[data-state="loading"] .spinner path {
    animation-duration: 2s;
  }
  .auth-bouton[data-state="success"] .coche path {
    animation: none;
    stroke-dashoffset: 0;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── D'une page d'accès à l'autre : pas de rechargement visible ──────────── */
/* Transition native du navigateur entre deux pages qui chargent auth.css :
   l'en-tête et le pied restent en place, la colonne glisse en fondu. */
@view-transition {
  navigation: auto;
}
.auth-header {
  view-transition-name: auth-entete;
}
.auth-pied {
  view-transition-name: auth-pied;
}
.auth-colonne {
  view-transition-name: auth-colonne;
}
::view-transition-old(auth-colonne) {
  animation: auth-vt-sort 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
::view-transition-new(auth-colonne) {
  animation: auth-vt-entre 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) 0.06s both;
}
::view-transition-group(auth-colonne) {
  animation-duration: 0.32s;
}
@keyframes auth-vt-sort {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes auth-vt-entre {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* Arrivée par transition, ou retour du cockpit : l'écran est déjà là, pas d'apparition échelonnée */
.auth-par-transition .auth-apparition,
.auth-sans-apparition .auth-apparition {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ── Vers le chat : le fond navy se rétracte dans la barre latérale ──────── */
/* Fond posé par auth-passage.js juste avant de partir ; il porte le même nom
   que la barre latérale du chat, et le logo celui du logo de la barre.
   L'animation elle-même est décrite côté chat (components/entree-app.php). */
.auth-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--navy-900);
  background-image: radial-gradient(
    120% 90% at 50% 18%,
    var(--navy-800) 0%,
    var(--navy-900) 48%,
    var(--navy-900) 100%
  );
  view-transition-name: cercle-scene;
}
.auth-header img {
  view-transition-name: cercle-logo;
}
/* Coche posée d'un coup (la page part, l'animation n'aurait pas le temps) */
.auth-bouton.coche-posee .auth-pile > * {
  transition: none;
}
.auth-bouton.coche-posee .coche path {
  animation: none;
  stroke-dashoffset: 0;
}

/* ── Depuis le chat (déconnexion) : la barre latérale s'étend en écran de connexion ── */
/* L'inverse de l'arrivée : le chat reste en place, la barre navy grandit jusqu'à
   couvrir l'écran, le logo regagne l'en-tête, puis le formulaire apparaît.
   Le chat nomme sa barre et son logo au départ (components/entree-app.php). */
html.sortie-app .auth {
  view-transition-name: cercle-scene;
}
html.sortie-app::view-transition-old(root) {
  animation: none;
}
html.sortie-app::view-transition-new(root) {
  display: none;
}
html.sortie-app::view-transition-group(cercle-scene),
html.sortie-app::view-transition-group(cercle-logo) {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.2, 1);
}
html.sortie-app::view-transition-image-pair(cercle-scene) {
  isolation: auto;
}
html.sortie-app::view-transition-old(cercle-scene),
html.sortie-app::view-transition-new(cercle-scene) {
  height: 100%;
  mix-blend-mode: normal;
}
/* La barre, à sa taille, s'efface sous le navy qui la recouvre en grandissant */
html.sortie-app::view-transition-old(cercle-scene) {
  animation: none;
  object-fit: none;
  object-position: left top;
}
html.sortie-app::view-transition-new(cercle-scene) {
  object-fit: fill;
  /* Court : la barre n'a presque pas grandi quand le navy est déjà opaque (sinon un liseré gris) */
  animation: auth-vt-fondu 0.12s linear both;
}
/* Barre hors de l'écran (mobile) : le navy arrive de la gauche */
html.sortie-app::view-transition-new(cercle-scene):only-child {
  animation: auth-vt-rideau 0.7s cubic-bezier(0.65, 0, 0.2, 1) both;
}
html.sortie-app::view-transition-new(auth-colonne) {
  animation: auth-vt-entre 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s both;
}
html.sortie-app::view-transition-new(auth-entete),
html.sortie-app::view-transition-new(auth-pied) {
  animation: auth-vt-fondu 0.3s ease-out 0.5s both;
}
@keyframes auth-vt-fondu {
  from {
    opacity: 0;
  }
}
@keyframes auth-vt-rideau {
  from {
    transform: translateX(-100%);
  }
}

/* ── Vérification de l'email ─────────────────────────────────────────────── */
.auth-pastille {
  width: 64px;
  height: 64px;
  margin: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border-gold);
  background: var(--accent-soft);
  color: var(--gold-400);
}
.auth-email {
  color: var(--on-navy-1);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.auth-boutons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.auth-boutons .auth-bouton {
  margin-top: 0;
}
.auth-bouton.contour {
  border-color: var(--on-navy-line);
  background: transparent;
  color: var(--on-navy-1);
  font-weight: 500;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.auth-bouton.contour:hover {
  border-color: var(--border-gold);
  background: rgba(255, 255, 255, 0.04);
}
.auth-bouton .detail {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}
/* Discret, sous le reste : se met à jour seul quand l'email est validé */
.auth-veille {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--on-navy-3);
}
.auth-veille .pouls {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
  animation: auth-pouls 2.4s ease-in-out infinite;
}
@keyframes auth-pouls {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Consentements : une rangée par document ─────────────────────────────── */
.auth-documents {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.auth-document {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--on-navy-line);
  background: var(--navy-deep);
  cursor: pointer;
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}
.auth-document:hover {
  border-color: var(--border-gold);
}
.auth-document:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.auth-document:has(input:focus-visible) {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}
.auth-document input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gold-500);
  cursor: pointer;
}
.auth-document .nom {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--on-navy-1);
}
.auth-document .lire {
  flex: none;
  font-size: 13px;
}
.auth-bouton:disabled:not([data-state="loading"]):not([data-state="success"]) {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (min-width: 640px) {
  .auth-centre {
    text-align: center;
  }
  .auth-centre .auth-pastille {
    margin: 0 auto 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-veille .pouls {
    animation: none;
  }
}

/* ── Mot de passe oublié : code reçu par e-mail ──────────────────────────── */
.auth-input.code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.auth-input.code::placeholder {
  letter-spacing: 0.16em;
}
button.auth-lien:disabled {
  color: var(--on-navy-2);
  text-decoration: none;
  cursor: default;
}