/* =========================================================================
   Le seuil — assistant de démarrage et écran de connexion.
   =========================================================================
   Les deux seuls écrans que l'on voit avant d'avoir la moindre raison de
   faire confiance à l'application. Ils reçoivent donc plus de soin que le
   reste : un halo lent qui respire, une seule question à l'écran, et des
   entrées en cascade qui donnent le sentiment que quelque chose s'ouvre.
   ========================================================================= */

.seuil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--e3);
  background: var(--plan);
  overflow-y: auto;
  /* Explicitement `hidden`, et non `visible`.
     En CSS, dès qu'un axe vaut `auto`, l'autre ne peut plus valoir `visible` :
     il devient `auto` à son tour. Le halo, qui déborde volontairement de 20 %
     de chaque côté, entrait donc dans la largeur défilable — et la mise au
     point automatique du premier champ faisait glisser tout l'assistant de
     cent trente pixels vers la gauche, texte coupé.

     `clip` serait plus sûr — il rend l'axe inerte au lieu de masquer la barre —
     mais la spécification l'interdit en face d'un `auto` sur l'autre axe : il
     retombe en `hidden`. La vraie parade est plus bas : le halo est désormais
     découpé dans sa propre boîte et n'élargit plus rien. */
  overflow-x: hidden;
}

/* ── Le halo ─────────────────────────────────────────────────────────────
   Deux taches de couleur très diluées, qui dérivent lentement. C'est le
   seul ornement purement décoratif de toute l'application : il est ici
   parce qu'un écran de connexion sur fond plat est un écran administratif,
   et qu'on n'y confie pas ses comptes de gaieté de cœur. */

/* Le halo tient exactement dans l'écran et découpe ce qui dépasse. Sa couleur
   vient d'un pseudo-élément qui, lui, déborde de 20 % — mais à l'intérieur
   d'une boîte qui le coupe. Sans cette boîte, le débordement s'ajoutait à la
   largeur défilable de `.seuil` : une mise au point automatique suffisait
   ensuite à faire glisser tout l'assistant hors de l'écran. */
.seuil-halo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.seuil-halo::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 42% at 22% 28%, var(--accent-halo), transparent 70%),
    radial-gradient(34% 38% at 78% 72%, color-mix(in oklab, var(--serie-5) 16%, transparent), transparent 70%);
  filter: blur(24px);
  animation: derive 26s ease-in-out infinite alternate;
}
@keyframes derive {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .seuil-halo::before { animation: none; }
}

/* ── Le panneau ──────────────────────────────────────────────────────────*/

.seuil-panneau {
  position: relative;
  width: min(560px, 100%);
  padding: var(--e5);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-3);
  animation: seuil-entree var(--v-long) var(--sortie);
}
@keyframes seuil-entree {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
}

/* Un refus de code : le panneau tremble une fois. Court, sec, sans rouge
   agressif — l'erreur se voit sans humilier. */
.seuil-panneau.refus { animation: tremblement 400ms var(--sortie); }
@keyframes tremblement {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

@media (max-width: 560px) {
  .seuil-panneau { padding: var(--e4) var(--e3); }
}

/* ── L'en-tête ───────────────────────────────────────────────────────────*/

.seuil-marque {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.seuil-marque .marque-sceau { width: 44px; height: 44px; border-radius: 14px; }
.seuil-nom {
  font-size: var(--t-moyen);
  font-weight: var(--graisse-forte);
  letter-spacing: -.02em;
}
.seuil-sous { font-size: var(--t-petit); color: var(--encre-tenue); }

/* ── Le contenu d'une étape ──────────────────────────────────────────────*/

.seuil-etape { display: flex; flex-direction: column; gap: var(--e2); }
.seuil-etape.entrante > * {
  animation: cascade var(--v-long) var(--sortie) backwards;
}
/* Cascade : chaque élément entre juste après le précédent. L'œil suit la
   descente au lieu de recevoir le bloc entier d'un coup. */
.seuil-etape.entrante > *:nth-child(1) { animation-delay: 0ms; }
.seuil-etape.entrante > *:nth-child(2) { animation-delay: 50ms; }
.seuil-etape.entrante > *:nth-child(3) { animation-delay: 100ms; }
.seuil-etape.entrante > *:nth-child(4) { animation-delay: 150ms; }
.seuil-etape.entrante > *:nth-child(5) { animation-delay: 200ms; }
.seuil-etape.entrante > *:nth-child(6) { animation-delay: 250ms; }
@keyframes cascade {
  from { opacity: 0; transform: translateY(10px); }
}

.seuil-question {
  font-size: var(--t-titre);
  font-weight: var(--graisse-forte);
  letter-spacing: -.025em;
  line-height: 1.22;
  margin: 0;
  text-wrap: balance;
}
.seuil-appui {
  color: var(--encre-douce);
  max-width: 46ch;
  margin-bottom: var(--e2);
}
.seuil-note {
  font-size: var(--t-petit);
  color: var(--encre-tenue);
  line-height: 1.5;
  margin-top: var(--e2);
}
.seuil-apercu {
  font-size: var(--t-petit);
  color: var(--accent);
  min-height: 1.4em;
}

/* ── Les grandes cartes de choix ─────────────────────────────────────────*/

.seuil-choix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--e2);
  margin-top: var(--e2);
}
.choix-carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--e3);
  text-align: left;
  background: var(--surface-creuse);
  border: 1.5px solid transparent;
  border-radius: var(--r-grand);
  transition: border-color var(--v-court) var(--sortie),
              transform var(--v-court) var(--sortie),
              background var(--v-court) var(--sortie);
}
.choix-carte:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: var(--accent-voile);
}
.choix-carte:active { transform: translateY(0); }
.choix-icone {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--accent-voile);
  color: var(--accent);
}
.choix-titre { font-weight: var(--graisse-forte); font-size: var(--t-moyen); }
.choix-detail { font-size: var(--t-petit); color: var(--encre-douce); line-height: 1.45; }

/* ── Les champs ──────────────────────────────────────────────────────────*/

.seuil-champs { display: flex; flex-direction: column; gap: var(--e1); }
.seuil-ligne { display: flex; align-items: center; gap: var(--e2); }
.seuil-ligne .champ { flex: 1; }
.seuil-ligne .jeton-membre { width: 34px; height: 34px; font-size: var(--t-base); }
.seuil-ajouter { align-self: flex-start; padding-inline: 0; }

/* ── Connexion ───────────────────────────────────────────────────────────*/

.seuil-portraits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-block: var(--e2);
}
.portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--e2);
  border-radius: var(--r-grand);
  border: 1.5px solid transparent;
  transition: border-color var(--v-court) var(--sortie),
              background var(--v-court) var(--sortie),
              transform var(--v-court) var(--ressort);
}
.portrait:hover { background: var(--surface-creuse); }
.portrait[aria-pressed="true"] {
  border-color: var(--teinte);
  background: color-mix(in oklab, var(--teinte) 10%, transparent);
  transform: scale(1.03);
}
.portrait-jeton {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--teinte) 20%, var(--surface));
  color: var(--teinte);
  border: 2px solid color-mix(in oklab, var(--teinte) 40%, transparent);
  font-size: var(--t-moyen);
  font-weight: var(--graisse-forte);
}
.portrait-nom { font-size: var(--t-petit); font-weight: var(--graisse-moyenne); }

.seuil-formulaire {
  display: flex;
  gap: var(--e1);
  margin-top: var(--e2);
}
.seuil-code { flex: 1; min-height: 48px; font-size: var(--t-moyen); }
.seuil-valider { min-height: 48px; padding-inline: var(--e3); }

/* ── Les thèmes ──────────────────────────────────────────────────────────*/

.seuil-themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: var(--e1);
  margin-block: var(--e2);
}
.theme-carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: var(--e2);
  border-radius: var(--r-moyen);
  border: 1.5px solid var(--trait);
  text-align: left;
  transition: border-color var(--v-court) var(--sortie), transform var(--v-court) var(--sortie);
}
.theme-carte:hover { transform: translateY(-2px); }
.theme-carte[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-voile);
}
.theme-apercu {
  width: 100%;
  height: 42px;
  border-radius: var(--r-petit);
  border: 1px solid var(--trait);
}
.theme-nom { font-weight: var(--graisse-moyenne); font-size: var(--t-petit); }
.theme-detail { font-size: var(--t-micro); color: var(--encre-tenue); line-height: 1.35; }

/* ── Pied et progression ─────────────────────────────────────────────────*/

.seuil-pied {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--e1);
  flex-wrap: wrap;
  margin-top: var(--e3);
}
.seuil-pied .bouton-fantome { margin-right: auto; }
.seuil-lancer { min-height: 46px; padding-inline: var(--e4); }

.seuil-progression {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--e4);
}
.seuil-point {
  width: 6px; height: 6px;
  border-radius: var(--r-plein);
  background: var(--trait-marque);
  transition: width var(--v-moyen) var(--sortie), background var(--v-moyen) var(--sortie);
}
.seuil-point.actif { width: 22px; background: var(--accent); }
.seuil-point.franchi { background: var(--accent-clair); }