/* Radar — page de connexion. Complète style.css. */

body.cx {
  display: grid; place-items: center; min-height: 100vh;
  padding: 24px; background: var(--fond);
}

.boite {
  width: 100%; max-width: 380px; padding: 32px 30px 26px;
  border: 1px solid var(--bord); border-radius: 14px;
  background: var(--surface); box-shadow: var(--ombre-f);
}

.bm { text-align: center; margin-bottom: 26px; }

.bl {
  display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 14px;
  border-radius: 12px; background: var(--accent-bg); color: var(--accent);
}
.bl svg { width: 25px; height: 25px; }

.bm h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.015em; }
.bm p  { margin: 3px 0 0; font-size: 13px; color: var(--texte-3); }

.cf { margin-bottom: 14px; }
.cf label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--texte-2);
}
.cf input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--bord-fort); border-radius: var(--r-s);
  background: var(--surface); color: var(--texte); font: inherit; font-size: 14px;
}
.cf input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.cf input[readonly] { background: var(--surface-2); color: var(--texte-3); }

#code {
  letter-spacing: .32em; text-align: center;
  font-variant-numeric: tabular-nums; font-size: 17px;
}
#code::placeholder { letter-spacing: .32em; color: var(--bord-fort); }

.err {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--r-s);
  background: var(--rouge-bg); color: var(--rouge); font-size: 13px;
}

.b.pleine { width: 100%; justify-content: center; padding: 11px; font-size: 14px; }

.bp {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--bord);
  font-size: 12px; color: var(--texte-3); text-align: center;
}