/* Pages d'authentification — complements du design system okz-
   ------------------------------------------------------------------
   Le CSS de base (public/okz/assets/redesign.okz.css) definit deja
   .okz-page-card, .okz-alert (+ variantes okz-info/okz-err/okz-warn/
   okz-ok), .okz-chk, .okz-btn / .okz-btn-p / .okz-btn-s,
   .okz-btn-full, .okz-hint, .okz-err, .okz-lnk, .okz-inp-group et
   toute la section .okz-auth-* (main, var, sep, social, ic, tel...).

   En revanche les styles de CHAMPS (.okz-fld, .okz-inp, .okz-sel)
   et de TITRE de carte (.okz-page-card .okz-ttl / .okz-sub) sont
   scopes `.okz-adm` : ils ne s'appliquent pas aux pages d'auth.
   On les redit ici, scopes .okz-auth-main, pour que le patron
   d'authentification soit autonome du back-office.
   ------------------------------------------------------------------ */

.okz-auth-main {
  padding: 44px 0 72px;
}

/* ---------- Carte ---------- */
.okz-auth-main .okz-page-card .okz-ttl {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.7px;
  margin-bottom: 7px;
}

.okz-auth-main .okz-page-card .okz-sub {
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ---------- Champs ---------- */
.okz-auth-main .okz-fld {
  margin-bottom: 16px;
}

.okz-auth-main .okz-fld > label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.okz-auth-main .okz-fld > label .okz-req {
  color: var(--red);
  margin-inline-start: 2px;
}

.okz-auth-main .okz-inp,
.okz-auth-main .okz-sel {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;
}

.okz-auth-main .okz-inp::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.okz-auth-main .okz-inp:focus,
.okz-auth-main .okz-sel:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(10, 102, 255, .10);
}

.okz-auth-main .okz-inp[readonly] {
  background: var(--bg);
  color: var(--ink-3);
  cursor: not-allowed;
}

.okz-auth-main .okz-inp.okz-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(229, 72, 77, .10);
}

/* Champ avec icone a gauche (email, mot de passe...) */
.okz-auth-main .okz-fld-ico {
  position: relative;
}

.okz-auth-main .okz-fld-ico > i {
  position: absolute;
  inset-inline-start: 13px;
  top: 12px;
  color: var(--ink-3);
  font-size: 14px;
  pointer-events: none;
}

.okz-auth-main .okz-fld-ico .okz-inp {
  padding-inline-start: 36px;
}

/* ---------- Type de compte (inscription) ---------- */
.okz-auth-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.okz-auth-type {
  position: relative;
  display: block;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.okz-auth-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.okz-auth-type i {
  font-size: 20px;
  color: var(--ink-3);
  display: block;
  margin-bottom: 6px;
}

.okz-auth-type b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
}

.okz-auth-type small {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.okz-auth-type:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-050);
}

.okz-auth-type:has(input:checked) i,
.okz-auth-type:has(input:checked) b {
  color: var(--brand);
}

/* La variante boutique n'est pas encore ouverte : on la neutralise
   mais on conserve le libelle et l'info « bientot » de l'ancien
   formulaire. */
.okz-auth-type.is-off {
  opacity: .5;
  cursor: not-allowed;
  background: var(--bg);
}

/* ---------- Pied de carte ---------- */
.okz-auth-main .okz-page-card .okz-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

.okz-auth-main .okz-page-card .okz-foot a {
  color: var(--brand);
  font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .okz-auth-main {
    padding: 28px 0 52px;
  }

  .okz-auth-main .okz-page-card {
    padding: 26px 20px;
    border-radius: 16px;
  }

  .okz-auth-main .okz-page-card .okz-ttl {
    font-size: 20px;
  }

  .okz-auth-main .okz-page-card .okz-sub {
    font-size: 13.5px;
    margin-bottom: 20px;
  }

  .okz-auth-types {
    grid-template-columns: 1fr;
  }
}