/* ============================================================
   Espace d'édition — écrans de connexion et d'historique
   ============================================================ */

:root{
  --ink:#05080A; --ink-2:#080D10;
  --jade:#5FE3C0; --jade-soft:#96F2DC; --jade-deep:#1E7A66;
  --coral:#FF8B5C;
  --paper:#EAF2EF; --muted:#7C918D; --muted-2:#536662;
  --line:rgba(150,242,220,.14); --line-2:rgba(150,242,220,.3);
  --display:'Instrument Serif', serif;
  --body:'Newsreader', Georgia, serif;
  --mono:'Azeret Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

body.gate{
  margin:0;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:2rem 1.25rem;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(30,122,102,.22), transparent 62%),
    radial-gradient(90% 60% at 50% 115%, rgba(255,139,92,.14), transparent 60%),
    var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  line-height:1.65;
}

.gate__card{
  width:min(30rem,100%);
  padding:clamp(1.8rem,4vw,2.8rem);
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(165deg, rgba(11,18,20,.9), rgba(6,10,12,.9));
  box-shadow:0 50px 120px -60px #000;
}
.gate--wide .gate__card{ width:min(42rem,100%); }

.gate__eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--jade);
  margin:0 0 1.6rem;
}
.gate__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--jade);
  box-shadow:0 0 12px var(--jade);
}

.gate__title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,6vw,2.9rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 1rem;
}
.gate__title em{ font-style:italic; color:var(--jade); }

.gate__lede{
  color:#B7C7C2;
  font-size:.98rem;
  margin:0 0 1.8rem;
}

.gate__error,.gate__ok{
  margin:0 0 1.4rem;
  padding:.75rem 1rem;
  border-radius:4px;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.04em;
  line-height:1.6;
}
.gate__error{ border:1px solid rgba(255,139,92,.4); background:rgba(255,139,92,.08); color:#FFC0A5; }
.gate__ok{ border:1px solid var(--line-2); background:rgba(95,227,192,.08); color:var(--jade-soft); }

.gate__form{ display:grid; gap:1.1rem; }

.field{ display:grid; gap:.45rem; }
.field__label{
  font-family:var(--mono);
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.field input{
  width:100%;
  padding:.85rem 1rem;
  border:1px solid var(--line-2);
  border-radius:4px;
  background:rgba(4,8,10,.7);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.95rem;
  letter-spacing:.06em;
}
.field input:focus{
  outline:none;
  border-color:var(--jade);
  box-shadow:0 0 0 3px rgba(95,227,192,.14);
}

.gate__btn{
  margin-top:.4rem;
  padding:.95rem 1.4rem;
  border:0; border-radius:99px;
  background:var(--jade);
  color:#04120E;
  font-family:var(--mono);
  font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:transform .3s, box-shadow .3s;
  box-shadow:0 10px 40px -14px rgba(95,227,192,.8);
}
.gate__btn:hover{ transform:translateY(-2px); box-shadow:0 16px 50px -14px rgba(95,227,192,.95); }

.gate__foot{
  display:flex; flex-wrap:wrap; gap:1.4rem;
  margin:2rem 0 0;
  font-family:var(--mono);
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
}
.gate__foot a{ color:var(--muted); text-decoration:none; }
.gate__foot a:hover{ color:var(--jade); }

/* ---------- Historique ---------- */
.vlist{ list-style:none; margin:0 0 1rem; padding:0; }
.vlist__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--line);
}
.vlist__when{
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--paper);
}
.vlist__when b{
  display:inline-block;
  margin-left:.6rem;
  padding:.15rem .5rem;
  border-radius:99px;
  background:rgba(95,227,192,.12);
  color:var(--jade);
  font-weight:400;
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.vlist__btn{
  padding:.5rem .9rem;
  border:1px solid var(--line-2);
  border-radius:99px;
  background:transparent;
  color:var(--paper);
  font-family:var(--mono);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .3s, background .3s;
}
.vlist__btn:hover{ border-color:var(--jade); background:rgba(95,227,192,.08); }
.vlist form{ margin:0; }