/* ==========================================================================
   WHEREAT · Le parcours de compte
   --------------------------------------------------------------------------
   Cinq écrans qui se suivent : se connecter, créer un compte, demander un
   code, le saisir, confirmer son adresse. Ils partagent une colonne, un
   titrage, un pied — on doit sentir qu'on avance dans un même parcours, pas
   qu'on saute de page en page.

   Rien ici n'invente de couleur, de rayon ni d'ombre : tout vient des jetons
   de whereat.css. Cette feuille ne décrit que l'assemblage propre au compte.

   Trois règles tenues d'un écran à l'autre :
   · une seule action par écran, en pleine largeur, en bas du formulaire ;
   · le champ dit lui-même ce qui cloche, pendant la saisie, jamais après
     un aller-retour serveur ;
   · le rouge de marque ne sert qu'à ce qui appelle une action. Ce qui va
     bien est vert, ce qui bloque est rouge d'erreur, le reste est de l'encre.

   Sommaire
   01 La colonne          05 Le code à 6 chiffres
   02 Le titrage          06 Rester connecté
   03 Les champs          07 Le pied de page
   04 Le mot de passe     08 L'aparté du grand écran
                          09 Google et Apple
   ========================================================================== */

/* ==========================================================================
   01 · LA COLONNE
   Sur téléphone : une page pleine, le pied poussé en bas de l'écran.
   Au-delà, la même colonne devient une carte posée sur le papier.
   ========================================================================== */
.au {
  position: relative; z-index: 1;
  width: 100%; max-width: 424px; margin: 0 auto;
  padding: 0 var(--pad) calc(var(--safe-b) + 28px);
}

.au__panel {
  display: flex; flex-direction: column;
  min-height: calc(100dvh - var(--nav-h) - 28px);
}

/* ==========================================================================
   02 · LE TITRAGE
   Une étiquette courte pour situer l'étape, un titre, une phrase. Rien de
   plus : la barre du haut porte déjà la marque, on ne la répète pas ici.
   ========================================================================== */
.au__top { padding: 24px 0; }

.au__k {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-text);
  margin-bottom: 10px;
}
.au__k i { font-size: .9rem; }

.au__title {
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(1.8rem, 7.5vw, 2.1rem);
  line-height: 1.04; letter-spacing: -.038em; color: var(--t-1);
}
.au__sub {
  margin-top: 10px; max-width: 42ch;
  font-size: .93rem; line-height: 1.55; color: var(--t-2);
}
.au__sub strong { font-weight: 600; color: var(--t-1); }

/* Le fil des étapes — seulement là où il y en a vraiment plusieurs.
   Il dit où l'on en est, il ne se clique pas : on n'y revient qu'en
   repartant du début. */
.au-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 18px; list-style: none; }
.au-steps li {
  display: flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 600; color: var(--t-3);
}
.au-steps li + li::before {
  content: ''; width: 14px; height: 1px; background: var(--line-2); margin-right: 1px;
}
.au-steps b {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .67rem; font-weight: 700;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--t-3);
}
.au-steps b i { font-size: .8rem; }
.au-steps .is-done { color: var(--t-2); }
.au-steps .is-done b { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.au-steps .is-on { color: var(--t-1); }
.au-steps .is-on b { background: var(--ink-block, #1A1815); border-color: var(--ink-block, #1A1815); color: #FFFFFF; }

/* ==========================================================================
   03 · LES CHAMPS
   On garde .mk-input / .mk-label du système : ici, seulement les états et
   les petites mécaniques que le compte est seul à demander.
   ========================================================================== */
.au__form { display: grid; gap: 16px; }

/* Le bouton de ces écrans est désactivé dès l'arrivée : on n'a encore rien
   saisi. L'opacité générale du système (.45) est faite pour un bouton qui
   s'éteint de temps en temps, pas pour un bouton qui commence éteint —
   elle délavait le rouge en rose et le blanc du libellé passait sous le
   fond. Désactivé, il devient donc une surface neutre à l'encre atténuée :
   on lit ce qu'il fera, on voit qu'il n'est pas encore prêt. */
.au__form .mk-btn:disabled {
  opacity: 1;
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--t-3);
}

.au-f.is-ok  .mk-input { border-color: var(--ok); }
.au-f.is-bad .mk-input { border-color: var(--bad); }
.au-f.is-bad .mk-input:focus { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }

/* Une ligne réservée sous le champ : le message apparaît sans faire sauter
   le formulaire sous les doigts. */
/* Vide, elle disparaît. Réserver la ligne « au cas où » sous chaque champ
   revenait à empiler trois blancs sous le mot de passe (message, mot de la
   jauge, alerte Verr. Maj) : l'écart entre deux champs n'était plus le même
   d'un champ à l'autre, alors que la grille du formulaire, elle, l'est. */
.au-msg {
  margin-top: 7px;
  font-size: .78rem; font-weight: 500; line-height: 1.35; color: var(--bad);
}
.au-msg:empty { display: none; }
.au-msg--warn { color: var(--warn); }

/* Libellé à gauche, lien de secours à droite, sur la même ligne. */
.au-f__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.au-link { font-size: .8rem; font-weight: 600; color: var(--brand-text); white-space: nowrap; }
@media (hover: hover) { .au-link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ==========================================================================
   04 · LE MOT DE PASSE
   Il se juge pendant la saisie : on ne renvoie personne en arrière pour une
   majuscule manquante.
   ========================================================================== */
.au-pw { position: relative; }
.au-pw .mk-input { padding-right: 48px; }
.au-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--t-3); font-size: 1.15rem; cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
@media (hover: hover) { .au-eye:hover { color: var(--t-1); background: var(--surface-2); } }
.au-eye:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Quatre segments, un mot. La barre seule ne dit pas ce qu'il manque —
   la liste juste en dessous s'en charge. */
.au-str { margin-top: 10px; }
.au-str__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.au-str__bars span {
  height: 4px; border-radius: var(--r-pill); background: var(--line);
  transition: background var(--t-med);
}
.au-str__t { margin-top: 7px; font-size: .77rem; font-weight: 600; color: var(--t-3); }
.au-str__t:empty { display: none; }

.au-str[data-score="1"] .au-str__bars span:nth-child(-n+1),
.au-str[data-score="2"] .au-str__bars span:nth-child(-n+2) { background: var(--bad); }
.au-str[data-score="3"] .au-str__bars span:nth-child(-n+3) { background: var(--warn); }
.au-str[data-score="4"] .au-str__bars span                 { background: var(--ok); }
.au-str[data-score="1"] .au-str__t,
.au-str[data-score="2"] .au-str__t { color: var(--bad); }
.au-str[data-score="3"] .au-str__t { color: var(--warn); }
.au-str[data-score="4"] .au-str__t { color: var(--ok); }

/* Ce qu'il faut au mot de passe. Trois conditions sur quatre suffisent :
   c'est ce que le serveur vérifie, autant le dire ici aussi. */
/* Elle vit dans le champ du mot de passe, pas à côté : posée en frère du
   champ dans la grille, elle flottait à égale distance du mot de passe et
   de la confirmation, sans qu'on sache lequel des deux elle décrivait. */
.au-rules {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px;
  margin-top: 12px; padding: 13px 14px; list-style: none;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
}
.au-rules li {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 500; color: var(--t-3);
  transition: color var(--t-fast);
}
.au-rules i { font-size: .95rem; flex-shrink: 0; }
.au-rules .is-ok { color: var(--ok); font-weight: 600; }
.au-rules__n {
  grid-column: 1 / -1; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: .76rem; font-weight: 500; color: var(--t-3);
}
@media (max-width: 380px) { .au-rules { grid-template-columns: 1fr; } }

/* ==========================================================================
   05 · LE CODE À 6 CHIFFRES
   Six cases, un seul champ. Le champ réel couvre les cases : le collage,
   le remplissage automatique et le clavier numérique marchent comme sur
   n'importe quel input, mais on voit son code se poser case par case.
   ========================================================================== */
.au-otp { position: relative; }
.au-otp__cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.au-otp__cells span {
  height: 56px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface);
  font-family: var(--disp); font-size: 1.3rem; font-weight: 700;
  color: var(--t-1); font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.au-otp__cells span.is-set { border-color: var(--line-3); }
.au-otp.is-live .au-otp__cells span.is-at {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.au-f.is-bad .au-otp__cells span { border-color: var(--bad); }
.au-f.is-ok  .au-otp__cells span.is-set { border-color: var(--ok); }

/* Le champ réel : posé sur les cases, invisible. C'est lui qui garde le
   focus, le collage, le code reçu par mail et le clavier numérique. */
.au-otp__in {
  position: absolute; inset: 0;
  width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: transparent;
  color: transparent; caret-color: transparent;
  font-size: 16px;              /* sous 16 px, iOS zoome à la mise au point */
  outline: none; -webkit-appearance: none; -webkit-text-fill-color: transparent;
}
.au-otp__in::selection { background: transparent; }

/* Le repli, quand les cases ne sont pas posées — script absent, en retard,
   ou d'une autre version que cette feuille. Il se déclenche sur l'état réel
   du DOM (le conteneur des cases est vide) et non sur une classe qu'un
   script devrait ajouter : sinon un cache décalé laisse un second champ,
   bien visible, sous les six cases. Sans cases, le champ redevient un
   champ ordinaire — on voit ce qu'on tape. */
.au-otp__cells:empty + .au-otp__in {
  position: static;
  height: 56px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface);
  color: var(--t-1); caret-color: auto; -webkit-text-fill-color: currentColor;
  font-family: var(--disp); font-size: 1.3rem; font-weight: 700;
  letter-spacing: .4em; text-indent: .4em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.au-otp__cells:empty + .au-otp__in:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}

@media (max-width: 360px) {
  .au-otp__cells { gap: 6px; }
  .au-otp__cells span { height: 50px; font-size: 1.15rem; }
}

/* ==========================================================================
   06 · RESTER CONNECTÉ
   Un interrupteur, pas une case à cocher : c'est un réglage d'appareil.
   Allumé, il prend l'encre — le rouge de marque reste au bouton d'action.
   ========================================================================== */
.au-keep {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--surface);
  cursor: pointer; transition: border-color var(--t-fast);
}
@media (hover: hover) { .au-keep:hover { border-color: var(--line-3); } }
.au-keep__t { font-size: .9rem; font-weight: 600; color: var(--t-1); }
.au-keep__t span { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; color: var(--t-3); }

.au-sw { position: relative; flex-shrink: 0; }
.au-sw input { position: absolute; opacity: 0; pointer-events: none; }
.au-sw__tr {
  display: block; width: 46px; height: 28px; border-radius: var(--r-pill);
  background: var(--line-3); transition: background var(--t-med);
}
.au-sw__tr::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--t-med);
}
.au-sw input:checked + .au-sw__tr { background: var(--ink-block, #1A1815); }
.au-sw input:checked + .au-sw__tr::after { transform: translateX(18px); }
.au-sw input:focus-visible + .au-sw__tr { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ==========================================================================
   07 · LE PIED DE PAGE
   Le passage vers l'autre écran, et rien qui ressemble à une seconde action
   principale : c'est un lien, pas un bouton.
   ========================================================================== */
/* Une précision qui rassure, sous le bouton : elle n'a pas le poids d'un
   encart, seulement celui d'une note de bas de page. */
.au-fine { margin-top: 16px; text-align: center; font-size: .8rem; line-height: 1.45; color: var(--t-3); }

.au__foot { margin-top: auto; padding-top: 26px; text-align: center; }
.au__swap { font-size: .9rem; color: var(--t-2); }
.au__swap a { color: var(--brand-text); font-weight: 600; }
@media (hover: hover) { .au__swap a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.au__legal { margin-top: 13px; font-size: .77rem; line-height: 1.5; color: var(--t-3); }
.au__legal a { color: var(--t-2); text-decoration: underline; text-underline-offset: 3px; }

/* Renvoyer le code : le bouton s'éteint le temps du délai et se rallume
   tout seul, plutôt que d'annoncer l'attente après coup. */
/* Le lien de renvoi vit dans son propre <form> (il poste une autre action) :
   aucun sélecteur de voisinage ne l'atteint depuis le formulaire principal.
   Il porte donc sa marge lui-même, sinon il se collait sous le bouton. */
.au-resend { margin-top: 18px; text-align: center; font-size: .85rem; color: var(--t-2); }
.au-resend button {
  padding: 0; color: var(--brand-text);
  font: inherit; font-weight: 600; cursor: pointer;
}
.au-resend button:disabled { color: var(--t-3); cursor: default; }
@media (hover: hover) { .au-resend button:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; } }

/* ==========================================================================
   08 · L'APARTÉ DU GRAND ÉCRAN
   Sous 1040 px, le formulaire occupe l'écran seul — c'est le cas de presque
   tout le trafic. Au-delà, une colonne d'encre l'accompagne : elle dit à
   quoi sert le compte, sans jamais rien demander.

   C'est la seule surface inversée du parcours, et une surface inversée est
   le seul endroit où un jeton manquant rend le texte invisible : un var()
   sans repli invalide la déclaration, le fond retombe sur transparent et la
   couleur sur l'héritage — soit de l'encre sur de l'encre, soit du blanc sur
   du papier. Les couleurs de ce bloc portent donc toutes leur repli en dur.
   ========================================================================== */
.au__aside { display: none; }

@media (min-width: 720px) {
  .au { max-width: 456px; padding: 40px var(--pad) 64px; }
  .au__panel {
    min-height: 0; padding: 30px 32px 32px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-xl); box-shadow: var(--sh-3);
  }
  .au__top { padding: 0 0 24px; }
  .au__foot { margin-top: 0; }
}

@media (min-width: 1040px) {
  /* La rangée est centrée dans la page (align-content), et chaque colonne
     ne fait que la hauteur de son contenu : ni l'aside ni la carte ne
     s'etire sur celle de l'autre. Sur « creer un compte », le formulaire est
     long — un aside etire dessus donnait une dalle sombre de 900 px avec un
     grand vide au-dessus et en dessous des trois arguments. */
  .au {
    max-width: var(--col-wide);
    display: grid; grid-template-columns: minmax(0, 1fr) 440px;
    gap: 40px;
    align-content: center; align-items: center;
    min-height: calc(100dvh - var(--nav-h)); padding: 40px var(--pad) 56px;
  }
  .au__panel { width: 100%; align-self: stretch; }
  .au__foot { margin-top: auto; }

  .au__aside {
    position: relative; overflow: hidden;
    /* align-self: center — l'aside se cale sur son propre contenu et reste
       centre face au formulaire, quelle que soit la longueur de celui-ci. */
    align-self: center;
    display: flex; flex-direction: column; gap: 30px;
    padding: 46px 42px;
    border-radius: var(--r-xl, 24px);
    background: var(--ink-block, #1A1815);
    color: var(--t-on-dark, #FFFFFF);
  }

  /* Une seule lueur, ancree dans l'angle du titre : elle donne du relief au
     bloc sans y ajouter d'element a regarder. */
  .au__aside::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(78% 58% at 0% 0%, rgba(220, 60, 36, .20), transparent 62%),
      radial-gradient(64% 50% at 100% 100%, rgba(255, 255, 255, .05), transparent 60%);
  }
  .au__aside > * { position: relative; }

  .au__aside h2 {
    font-family: var(--disp); font-size: clamp(1.65rem, 2.1vw, 1.95rem); font-weight: 800;
    letter-spacing: -.036em; line-height: 1.12; max-width: 14ch;
    color: var(--t-on-dark, #FFFFFF);
  }
  .au__aside h2 em { font-style: normal; color: var(--brand, #DC3C24); }

  .au__pts { display: grid; gap: 20px; list-style: none; }
  .au__pt { display: flex; align-items: flex-start; gap: 14px; }
  .au__pt > i {
    width: 38px; height: 38px; flex-shrink: 0;
    display: grid; place-items: center; border-radius: 11px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .09);
    color: #FFFFFF; font-size: 1.1rem;
  }
  .au__pt b {
    display: block; font-size: .93rem; font-weight: 600; line-height: 1.35;
    color: var(--t-on-dark, #FFFFFF);
  }
  .au__pt span {
    display: block; margin-top: 3px; font-size: .84rem; line-height: 1.55;
    max-width: 34ch; color: var(--t-on-dark-2, rgba(255, 255, 255, .68));
  }

  .au__aside footer {
    display: inline-flex; align-items: center; gap: 8px;
    padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .10);
    font-size: .82rem; color: var(--t-on-dark-2, rgba(255, 255, 255, .68));
  }
  .au__aside footer::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand, #DC3C24); flex: 0 0 auto;
  }
}

/* Au-dela de 1240 px, la colonne d'encre gagne un peu d'air plutot que de
   s'etirer : la carte du formulaire, elle, garde sa largeur de lecture. */
@media (min-width: 1240px) {
  .au { gap: 56px; }
  .au__aside { padding: 54px 48px; gap: 34px; }
}

/* ==========================================================================
   09 · GOOGLE ET APPLE
   Deux entrées posées avant le formulaire, puis un « ou » qui sépare. Elles
   ne concurrencent pas l'action principale de l'écran : même hauteur que le
   bouton du bas, mais un fond neutre — le rouge de marque reste réservé à
   « Se connecter ».

   C'est le seul endroit de cette feuille où des couleurs ne viennent pas des
   jetons : chaque marque impose son habillage (le G en quatre couleurs sur
   blanc, la pomme blanche sur noir), et on n'a pas le droit de le réécrire.
   ========================================================================== */
.au-sso { display: grid; gap: 10px; }

.au-sso__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--t-1);
  font-family: var(--body); font-size: .95rem; font-weight: 600;
  line-height: 1; white-space: nowrap; user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.au-sso__btn:active { transform: scale(.985); }
.au-sso__btn svg { width: 19px; height: 19px; flex-shrink: 0; }
@media (hover: hover) {
  .au-sso__btn:hover { background: var(--surface-2); border-color: var(--line-3); }
}

.au-sso__btn--apple { background: #000000; border-color: #000000; color: #FFFFFF; }
.au-sso__btn--apple svg { fill: #FFFFFF; }
@media (hover: hover) {
  .au-sso__btn--apple:hover { background: #1A1815; border-color: #1A1815; }
}

/* Le « ou » est un trait, pas un titre : il marque une bifurcation entre
   deux façons d'entrer, également valables. */
.au-sso__or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--t-3);
}
.au-sso__or::before,
.au-sso__or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line-2); }

/* La mention d'acceptation, sous les deux boutons : une note de bas de page,
   pas un encart — mais lisible avant le geste, puisque c'est ce geste-là qui
   crée le compte. */
.au-sso__legal {
  margin-top: 12px;
  font-size: .78rem; line-height: 1.5; text-align: center; color: var(--t-3);
}
.au-sso__legal a { color: var(--t-2); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .au-sso__legal a:hover { color: var(--t-1); } }