/* VENSA - Configurateur : page de connexion. Aucun contenu du projet ici. */
:root{
  --bg:#23262b; --panel:#2b2f35; --panel2:#343941; --line:#3f444d; --line2:#4d525c;
  --ink:#f3f2ee; --ink2:#d6d8dc; --muted:#a3a8b1; --gold:#c9a227; --gold2:#e8c766; --red:#d9666f;
}
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Be Vietnam Pro',system-ui,'Segoe UI',Roboto,Arial,sans-serif;font-size:14px;
  -webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
.serif{font-family:'Playfair Display',Georgia,'Times New Roman',serif}

.porte{min-height:100%;display:flex;align-items:center;justify-content:center;padding:28px 18px;position:relative;overflow:hidden}
.porte__halo{position:absolute;inset:auto;left:50%;top:-180px;width:760px;height:560px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(201,162,39,.16),transparent 72%);pointer-events:none}

.carte{position:relative;width:min(430px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:26px 26px 20px;box-shadow:0 26px 70px rgba(0,0,0,.5)}
.carte__langs{display:flex;justify-content:flex-end;margin-bottom:12px}
.langs{display:flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.langs button{border:0;background:transparent;color:var(--muted);padding:5px 11px;font-size:12px;font-weight:700;letter-spacing:.4px}
.langs button+button{border-left:1px solid var(--line2)}
.langs button:hover{background:var(--panel2);color:var(--ink)}
.langs button[aria-pressed="true"]{background:var(--gold);color:#23262b}

.carte__kicker{margin:0 0 6px;font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--gold)}
.carte__titre{margin:0 0 8px;font-size:25px;font-weight:700;line-height:1.2}
.carte__sous{margin:0 0 20px;font-size:13px;color:var(--muted);line-height:1.5}

.form{display:flex;flex-direction:column;gap:13px}
.champ__label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:5px;letter-spacing:.2px}
.champ__wrap{position:relative}
.champ__input{width:100%;border:1px solid var(--line2);background:var(--bg);border-radius:9px;
  padding:11px 12px;color:var(--ink);transition:border-color .15s}
.champ__input:focus{outline:0;border-color:var(--gold)}
.champ__oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--muted);padding:6px;border-radius:7px;display:flex}
.champ__oeil:hover{color:var(--ink)}

.erreur{margin:0;font-size:12.5px;color:var(--red);background:rgba(217,102,111,.1);
  border:1px solid rgba(217,102,111,.35);border-radius:8px;padding:9px 11px;line-height:1.45}

.valider{margin-top:3px;border:0;border-radius:9px;background:var(--gold);color:#23262b;
  padding:12px 14px;font-weight:700;font-size:14px;transition:background .15s}
.valider:hover{background:var(--gold2)}
.valider:disabled{opacity:.55;cursor:not-allowed}

.note{margin:18px 0 0;font-size:11px;color:#7d848e;line-height:1.5;border-top:1px solid var(--line);padding-top:14px}
.pied{margin-top:14px;display:flex;align-items:center;gap:9px;font-size:10.5px;color:#7d848e}
.pied__logo{height:17px;width:auto;opacity:.85}

@media (max-width:420px){ .carte{padding:20px 18px 16px} .carte__titre{font-size:22px} }
