/* ─── Le seuil ──────────────────────────────────────────────────────────
   Page autonome, sans la feuille de style de l'admin : ses tokens
   entreraient en conflit avec ceux-ci. Une bande verticale de couleur
   pleine porte l'identite, le reste respire sur du creme. Les champs sont
   des lignes de tableau, pas des boites, et le bouton n'est pas un objet
   mais un mot precede d'un trait. */
* { box-sizing: border-box; }
:root {
  --prune:#530B3C; --bourgogne:#7A0B36; --carmin:#B60E29; --orange:#ED4516;
  --calcaire:#ECDFD7; --creme:#FCFAF7; --encre:#241019; --gris:#6B5A60;
  --trait:rgba(83, 11, 60, .18);
}
html, body {
  margin:0; min-height:100%;
  font-family:'DM Sans', system-ui, sans-serif;
  color:var(--encre); background:var(--creme);
  -webkit-font-smoothing:antialiased;
}
.seuil { display:grid; grid-template-columns:92px 1fr; min-height:100vh; min-height:100svh; }

.bande { background:var(--prune); display:flex; align-items:center; justify-content:center; position:relative; }
.bande span {
  writing-mode:vertical-rl;
  font-family:'DM Mono', monospace;
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(236, 223, 215, .82);
}
.bande::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--orange); }

.corps { padding:56px 60px; display:flex; flex-direction:column; justify-content:center; max-width:720px; }
.marque { margin-bottom:40px; }
.marque img { height:54px; width:auto; display:block; transition:opacity .2s; }
h1 {
  font-family:'Fraunces', serif;
  font-size:clamp(1.75rem, 3.6vw, 2.25rem);
  line-height:1.1; letter-spacing:-.03em; margin:0 0 10px; font-weight:600;
}
.sous { font-size:14px; color:var(--gris); margin:0 0 34px; max-width:400px; }

form { max-width:440px; }
.champs { border-top:1px solid var(--trait); }
.champ { display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--trait); transition:border-color .18s; }
.champ:focus-within { border-bottom-color:var(--bourgogne); }
.champ label {
  font-family:'DM Mono', monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); width:104px; flex:none; padding:15px 2px;
}
.champ input {
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-family:'DM Sans', sans-serif; font-size:15px; color:var(--encre); padding:15px 2px;
}
.champ input::placeholder { color:rgba(36, 16, 25, .3); }

.entrer {
  margin-top:30px; background:none; border:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:15px;
  font-family:'Fraunces', serif; font-size:1.32rem; font-weight:600; color:var(--prune);
}
.entrer .trait { display:block; width:52px; height:2px; background:var(--carmin); transition:width .28s cubic-bezier(.16,1,.3,1); }
.entrer:hover .trait, .entrer:focus-visible .trait { width:82px; }
.entrer:focus-visible { outline:2px solid var(--bourgogne); outline-offset:5px; }

.erreur {
  background:#FDECEC; border-left:3px solid var(--carmin);
  padding:11px 15px; margin-bottom:26px; font-size:13.5px; color:#7F1D1D; max-width:440px;
}
.aide { margin:26px 0 0; font-size:12.5px; color:var(--gris); max-width:440px; }
.retour { display:inline-block; margin-top:22px; font-size:12.5px; color:var(--gris); text-decoration:none; }
.retour:hover { color:var(--bourgogne); }
.pied {
  margin-top:46px;
  font-family:'DM Mono', monospace;
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--gris);
}

@media (max-width:700px) {
  .seuil { grid-template-columns:1fr; grid-template-rows:52px 1fr; }
  .bande { justify-content:flex-start; padding-left:22px; }
  .bande span { writing-mode:horizontal-tb; font-size:9.5px; }
  .bande::after { top:auto; bottom:0; height:4px; }
  .corps { padding:34px 22px 44px; }
  .marque { margin-bottom:28px; }
  .marque img { height:40px; }
  .champ label { width:106px; font-size:9.5px; letter-spacing:.1em; }
  .pied { margin-top:34px; }
}
@media (prefers-reduced-motion: reduce) { .entrer .trait { transition:none; } }

/* Signature Nomad et liens d'aide, communs a la connexion et au mot de passe */
.aide a { color:var(--bourgogne); font-weight:500; text-decoration:none; border-bottom:1px solid rgba(122,11,54,.3); }
.aide a:hover { border-bottom-color:var(--bourgogne); }
.aide + .aide { margin-top:8px; }
.signature { margin-top:46px; display:flex; align-items:center; gap:14px; }
.signature img { height:46px; width:auto; display:block; }
.signature span {
  font-family:'DM Mono', monospace; font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gris); line-height:1.6; max-width:190px;
}
.succes {
  background:#EEF7F1; border-left:3px solid #10B981;
  padding:11px 15px; margin-bottom:26px; font-size:13.5px; color:#14532D; max-width:440px;
}
@media (max-width:700px) { .signature { margin-top:34px; } .signature img { height:38px; } }