/* ============================================================
   PAGE EXTRANET LOGIN « Identifiez-vous »  (mobile-first)
   Route login_extranet — /espace-client/login
   Figma kG4rKsWuIraGwBuBYCxyA1 :
     desktop vide 998-11702 | rempli 998-11809 | erreur 998-11920
     mobile  vide 998-14788 | erreur 998-14656
   Étend front/basev2.html.twig. Réutilise le header opaque beige
   (dark-on-light) du fragment headerv2 + le système de gouttières
   .container (repris du DS v2). Toutes les classes sont préfixées
   xl- (eXtranet Login) pour éviter les collisions.
   Tokens : fond #efece9 · encre #0f1b24 · sauge #9f9a7c ·
   placeholder #999 · erreur #e90000 · séparateur #c3c3c3.
============================================================ */

/* ============================================================
   0. GOUTTIÈRES  (.container) — système DS v2, mobile-first.
   mobile   : padding latéral 30
   tablette : 769–1100 → padding latéral 40
   desktop  : ≥1101 → largeur min(1166px, calc(100% - 200px)) centrée
   Le blocs full-bleed (titre / formulaire) utilisent 100px de padding
   latéral en desktop ; leur contenu reste borné par ce .container.
============================================================ */
.xl-page .container {
  width: 100%;
  max-width: 100%;
  padding: 0 30px;
  margin-inline: auto;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  .xl-page .container { padding: 0 40px; }
}
@media (min-width: 1101px) {
  .xl-page .container {
    max-width: min(1166px, calc(100% - 200px));
    padding: 0;
  }
}

/* ============================================================
   1. HEADER — barre opaque beige (dark-on-light), en flux.
   topbar.css garde .header-transparant en display:none (sticky au
   scroll) : on le passe en display:block → barre en flux qui pousse
   le contenu vers le bas et affiche le texte/logo en foncé sur le
   beige. Règles reprises telles quelles du DS v2 (notreHistoire /
   responsable). Le fond #EFECE9 est déjà posé par topbar.css.
============================================================ */
.header-transparant { display: block; }
@media (min-width: 1100px) {
  .header-transparant { display: block; }

  .header-transparant .menu,
  .header-transparant .destinations-menu { color: #0f1b24; }
  .header-transparant .menu { margin-right: 0; }
  .header-transparant .topbar_top .image-logo { width: 373px; height: 27px; }
  .header-transparant .btn-quote_request { white-space: nowrap; }

  .header-transparant .right-menu { align-items: center; }
  .header-transparant .right-menu > * { flex-shrink: 0; }
  .header-transparant .right-menu > a:last-child {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .header-transparant .right-menu > a:last-child img {
    width: 20px;
    height: 20px;
    display: block;
  }
}

/* ============================================================
   2. BLOC TITRE
   Fond #efece9. Mobile : padding 20 30, gap 30, CENTRÉ.
   Desktop : padding 40 100, gap 20, aligné à gauche.
   Figma titre 26/33 mobile → 50/1 desktop (Asul).
============================================================ */
.xl-title {
  background-color: #efece9;
  /* Padding VERTICAL uniquement : la gouttière horizontale est portée par
     le .container interne (évite le cumul section + container). */
  padding: 20px 0;
}
.xl-title .container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: center;
}
.xl-title__heading {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 33px;
  color: #0f1b24;
  margin: 0;
}
.xl-title__subtitle {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 30px;
  color: #0f1b24;
  margin: 0;
}

/* ============================================================
   3. BLOC FORMULAIRE
   Fond #efece9, border-top 0.7px #c3c3c3 PLEINE LARGEUR (le trait
   traverse l'écran ; le contenu reste dans le .container).
   Mobile : padding 40 30. Desktop : padding vertical 40, gap 40.
============================================================ */
.xl-form-section {
  background-color: #efece9;
  border-top: 0.7px solid #c3c3c3;
  /* Padding VERTICAL uniquement (cf. .xl-title). Le border-top reste
     pleine largeur car la section est en width:100%. */
  padding: 40px 0;
}
.xl-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Rangée des 2 champs : mobile empilée (gap 50), desktop côte à côte. */
.xl-fields {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Champ = colonne label + input souligné, gap 20 */
.xl-field {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
.xl-field__label {
  font-family: 'Lexend Peta', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  text-transform: uppercase;
  color: #0f1b24;
}

/* Input « souligné » : conteneur à border-bottom, input transparent. */
.xl-field__control {
  border-bottom: 0.7px solid #0f1b24;
  height: 42px;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.xl-field__input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.xl-field__input:focus { outline: 0; }
.xl-field__input::placeholder { color: #999999; opacity: 1; }
.xl-field__input:-ms-input-placeholder { color: #999999; }
/* Neutralise le fond jaune de l'autofill Chrome sur fond beige. */
.xl-field__input:-webkit-autofill,
.xl-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f1b24;
  transition: background-color 5000s ease-in-out 0s;
}

/* ============================================================
   4. MESSAGE D'ERREUR — sous les champs, au-dessus de la checkbox.
   Lexend Light 15/24, couleur #e90000.
============================================================ */
.xl-error {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #e90000;
  margin: 0;
}

/* ============================================================
   5. CHECKBOX « Se souvenir de mon mot de passe »
   Case RONDE personnalisée : input natif masqué, cercle 17px bordé
   sauge ; coché → point/cercle plein sauge. Toute la ligne cliquable.
============================================================ */
.xl-remember {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.xl-remember__native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.xl-remember__circle {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid #9f9a7c;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.xl-remember__circle::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #9f9a7c;
  transform: scale(0);
  transition: transform 0.15s ease;
}
.xl-remember__native:checked + .xl-remember__circle::after {
  transform: scale(1);
}
.xl-remember__native:focus-visible + .xl-remember__circle {
  outline: 2px solid #9f9a7c;
  outline-offset: 2px;
}
.xl-remember__label {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
}

/* ============================================================
   6. BOUTON « Envoyer » — CTA outline sauge, inline (pas full-width)
============================================================ */
.xl-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 142px;
  padding: 13px 17px;
  border: 1px solid #9f9a7c;
  border-radius: 30px;
  background: transparent;
  color: #9f9a7c;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.xl-submit:hover,
.xl-submit:focus {
  background-color: #9f9a7c;
  color: #ffffff;
}

/* ============================================================
   7. NOTE « Les champs marqués avec une * sont obligatoires »
============================================================ */
.xl-note {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0;
}

/* ============================================================
   8. BLOC VISUEL — pleine largeur edge-to-edge, hauteur 480, cover.
============================================================ */
.xl-visual {
  width: 100%;
  height: 480px;
  overflow: hidden;
}
.xl-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   DESKTOP  (≥ 769px)
   Titre aligné à gauche 50/1, gap 20, padding 40 100.
   Champs côte à côte (gap 50). Formulaire : padding vertical 40.
============================================================ */
@media (min-width: 769px) {
  .xl-title {
    padding: 40px 0;
  }
  .xl-title .container {
    gap: 20px;
    text-align: left;
  }
  .xl-title__heading {
    font-size: 50px;
    line-height: 1;
  }

  .xl-form-section {
    padding: 40px 0;
  }
  .xl-fields {
    flex-direction: row;
    gap: 50px;
  }
}