/* ============================================================
   landing.css — Page login/register (landing Vikinger)
   ============================================================ */

/* ---- Background optimisé WebP + fallback JPG ---------------- */
.landing {
  background-color: #0b0b1a;
  background-image: url("/vikinger/img/landing/landing-background.jpg");
  background-image: -webkit-image-set(
    url("/vikinger/img/landing/landing-background.webp") type("image/webp"),
    url("/vikinger/img/landing/landing-background.jpg")  type("image/jpeg")
  );
  background-image: image-set(
    url("/vikinger/img/landing/landing-background.webp") type("image/webp"),
    url("/vikinger/img/landing/landing-background.jpg")  type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ---- Ancrage vertical des panneaux (login / register / reset) -
   Vikinger centre via top:50% + margin-top négatif sur :first/:last
   child. L'ajout du formulaire reset cassait le register (2e enfant).
   Les panneaux login/register vivent dans .landing-form-panels. */
.landing-form > .landing-form-panels {
  position: absolute;
  top: 0;
  left: 0;
  width: 484px;
  height: 100%;
}

.landing-form-panels .form-box {
  top: 50%;
  left: 0;
  margin-top: 0 !important;
}

.landing-form-panels .form-box:first-child {
  margin-top: -280px !important;
}

.landing-form-panels .form-box:last-child {
  margin-top: -360px !important;
}

.landing-form > #form-box-reset {
  top: 50%;
  left: 0;
  margin-top: -240px !important;
}

/* Pas de scroll interne sur les formulaires */
.landing .form-box {
  max-height: none;
  overflow: visible;
}

/* ---- Register : formulaire compact, tient dans le viewport ------ */
.landing .form-box--register {
  padding: 32px 40px 28px;
}

.landing .form-box--register .form-box-title {
  font-size: 1.375rem;
}

.landing .form-box--register .form {
  margin-top: 32px;
}

.landing .form-box--register .form-row + .form-row {
  margin-top: 12px;
}

.landing .form-box--register .form-input input[type="text"],
.landing .form-box--register .form-input input[type="email"],
.landing .form-box--register .form-input input[type="password"],
.landing .form-box--register .form-input input[type="date"] {
  height: 44px;
  padding: 0 14px;
  font-size: 0.9375rem;
}

.landing .form-box--register .password-actions {
  gap: 10px;
}

.landing .form-box--register .password-actions .button {
  height: 40px;
  line-height: 40px;
  font-size: 0.6875rem;
}

.landing .form-box--register .password-generator-feedback {
  min-height: 0;
  margin-top: 6px;
  font-size: 0.75rem;
}

.landing .form-box--register .checkbox-wrap label {
  font-size: 0.8125rem;
  line-height: 1.25;
}

.landing .form-box--register .button.medium {
  height: 46px;
  line-height: 46px;
}

.landing .form-box--register .form-text {
  margin-top: 14px;
  font-size: 0.75rem;
  line-height: 1.35;
}

.landing .form-box--register .form-box-message {
  margin: 16px 0 -8px;
  padding: 10px 14px;
  font-size: 0.8125rem;
}

/* Écrans peu hauts : compaction supplémentaire sans scroll */
@media screen and (max-height: 820px) {
  .landing .form-box--register {
    padding: 24px 36px 22px;
  }

  .landing .form-box--register .form {
    margin-top: 24px;
  }

  .landing .form-box--register .form-row + .form-row {
    margin-top: 10px;
  }

  .landing .form-box--register .form-input input[type="text"],
  .landing .form-box--register .form-input input[type="email"],
  .landing .form-box--register .form-input input[type="password"],
  .landing .form-box--register .form-input input[type="date"] {
    height: 40px;
  }

  .landing .form-box--register .form-text {
    margin-top: 10px;
  }

  .landing-form-panels .form-box:last-child {
    margin-top: -330px !important;
  }
}

/* ---- Mobile : reprendre le flux statique Vikinger -------------- */
@media screen and (max-width: 1365px) {
  .landing-form > .landing-form-panels {
    position: static;
    width: 100%;
    height: auto;
  }

  .landing-form-panels .form-box,
  .landing-form > #form-box-reset {
    position: static;
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 500px) {
  .landing .form-box--register {
    padding: 28px 24px 24px;
  }
}