/* =====================================================================
   KIOVYSE — portail d'accès

   Même registre que la marque : noir profond, hors-blanc, un seul accent
   bleu froid. Rien ne clignote, rien ne vend. Une porte, pas une vitrine.

   Sommaire
     1. Jetons
     2. Base
     3. Fond
     4. Cadre
     5. Carte
     6. Champs
     7. Action
     8. Pied
     9. Adaptatif
   ===================================================================== */


/* ---- 1. Jetons ------------------------------------------------------ */
:root {
  --bg:      #0a0a0b;
  --bg-1:    #101012;
  --bg-2:    #141416;

  --line:    rgba(255, 255, 255, .065);
  --line-2:  rgba(255, 255, 255, .11);
  --line-3:  rgba(255, 255, 255, .19);

  --ink:     #f1f1f2;
  --ink-2:   #9b9ba2;
  --ink-3:   #6a6a72;

  --accent:      #9db5d8;
  --accent-soft: rgba(157, 181, 216, .09);
  --accent-line: rgba(157, 181, 216, .24);

  --warn:      #d89d9d;
  --warn-soft: rgba(216, 157, 157, .08);
  --warn-line: rgba(216, 157, 157, .26);

  --serif: "Instrument Serif", "Iowan Old Style", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --s-1: 8px;  --s-2: 16px; --s-3: 24px;
  --s-4: 32px; --s-5: 48px; --s-6: 72px;

  --r:   14px;   /* rayon de la carte */
  --r-s: 9px;    /* rayon des champs */

  --ease: cubic-bezier(.22, .61, .36, 1);
}


/* ---- 2. Base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Socle commun au portail et à l'espace privé : les deux pages chargent
   ce fichier, le fond et l'encre ne doivent donc dépendre d'aucune classe. */
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Le portail, lui seul, centre sa carte dans la fenêtre. */
body.portal {
  display: grid;
  place-items: center;
  padding: var(--s-5) clamp(20px, 6vw, 40px);
}

::selection { background: var(--accent-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ---- 3. Fond -------------------------------------------------------- */
/* Deux halos immobiles et un grain : de la profondeur sans mouvement,
   pour que la page reste calme pendant qu'on tape un mot de passe. */
.veil {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.halo--a {
  width: 46vmax; height: 46vmax;
  top: -18vmax; left: -12vmax;
  background: radial-gradient(circle, rgba(157, 181, 216, .085), transparent 68%);
}

.halo--b {
  width: 38vmax; height: 38vmax;
  right: -14vmax; bottom: -16vmax;
  background: radial-gradient(circle, rgba(157, 181, 216, .05), transparent 70%);
}

/* Grain : bruit fractal en SVG encodé, aucun fichier image à charger. */
.grain {
  position: absolute;
  inset: -50%;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.85'%20numOctaves='3'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23n)'%20opacity='.42'/%3E%3C/svg%3E");
}


/* ---- 4. Cadre ------------------------------------------------------- */
.gate {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 408px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Le nom en grand, centré au-dessus de la carte : c'est la première chose
   qu'une VA voit en arrivant, autant qu'elle sache où elle est. */
.gate__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.mark {
  font-family: var(--serif);
  font-size: clamp(46px, 11vw, 72px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
  /* Halo très dilué : décolle le nom du noir sans l'éclairer. */
  text-shadow: 0 0 44px rgba(157, 181, 216, .3);
}

/* Le filet passe d'une ligne de fuite à un trait court, centré sous le nom. */
.mark__rule {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}


/* ---- 5. Carte ------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5) clamp(22px, 5vw, 36px) var(--s-4);

  /* Un seul liseré clair en haut : la lumière tombe d'en haut, pas de
     double ombre portée, pas d'effet vitrine. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 24px 60px -28px rgba(0, 0, 0, .9);
}

.card__head { margin-bottom: var(--s-5); }

.card__head h1 {
  margin: 0 0 var(--s-1);
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .005em;
}

.card__head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.card__foot {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}


/* ---- 6. Champs ------------------------------------------------------ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field__wrap { position: relative; display: flex; }

.field input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}

.field__wrap input { padding-right: 44px; }

.field input::placeholder { color: var(--ink-3); }

.field input:hover { border-color: var(--line-3); }

.field input:focus {
  outline: none;
  background: rgba(255, 255, 255, .038);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Autofill Chrome : on annule le bleu système, qui casse tout le registre. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset;
  caret-color: var(--ink);
}

/* Œil */
.peek {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 33px; height: 33px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 7px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}

.peek:hover { color: var(--ink-2); background: rgba(255, 255, 255, .04); }

.peek .peek__shut { opacity: 0; transition: opacity .16s var(--ease); }
.peek[aria-pressed="true"] .peek__shut { opacity: 1; }

/* Verrouillage majuscules */
.caps {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--warn);
}

/* Erreur */
.alert {
  margin: 0;
  padding: 10px 13px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-s);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--warn);
}

.alert[hidden], .caps[hidden] { display: none; }


/* ---- 7. Action ------------------------------------------------------ */
.submit {
  position: relative;
  margin-top: var(--s-1);
  padding: 13px 20px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-s);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}

.submit:hover:not(:disabled) { opacity: .9; }
.submit:active:not(:disabled) { transform: translateY(1px); }

.submit:disabled { cursor: default; opacity: .55; }

.submit__label { transition: opacity .14s var(--ease); }

.submit__spin {
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border: 1.6px solid rgba(10, 10, 11, .25);
  border-top-color: var(--bg);
  border-radius: 50%;
  opacity: 0;
  animation: spin .62s linear infinite;
}

/* En cours d'envoi : le libellé s'efface, la roue prend sa place. */
.submit.is-busy .submit__label { opacity: 0; }
.submit.is-busy .submit__spin  { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }


/* ---- 8. Pied -------------------------------------------------------- */
.gate__foot {
  display: flex;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-3);
}

.dot { opacity: .5; }


/* ---- 9. Adaptatif --------------------------------------------------- */
@media (max-width: 420px) {
  .card { padding-left: 20px; padding-right: 20px; }
  .card__head h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .submit__spin { animation: none; border-top-color: transparent; }
}