/* ══════════════════════════════════════════════════════════════════════════
   Refonte — Connexion / Création de compte (maquette_login.html)

   Les deux pages sont servies par AuthController (/connexion et
   /connexion?create_account=1) et partagent le même body
   (id="authentication", classe .page-authentication) : un seul fichier, scopé
   #authentication, couvre les panneaux #panel-login et #panel-register.

   Chargé par customer/authentication.tpl et customer/registration.tpl via
   {block name='stylesheets' append}, donc après variables.css : à spécificité
   égale il gagne sur le SCSS compilé de theme.css. Les règles legacy à battre
   ici sont « .page-authentication #content » (max-width 640px),
   « .page-customer-account #content » (couleur / taille de police),
   « label { text-align: right } », « .input-group { display: table } »,
   « .btn-primary { text-transform: uppercase } » et « .alert-danger ».
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cadre de page (maquette) ── */

#authentication .auth-wrap {
  display: flex;
  /* La maquette centre la carte sur la hauteur restante sous le header
     (calc(100vh - 158px)). En vh relatif plutôt qu'en soustrayant une hauteur
     de header qui varie selon la largeur et le bandeau promo. */
  min-height: 60vh;
}

/* #content est conservé (CSS legacy et modules le ciblent) et porte .auth-panel.
   Deux id pour battre « .page-authentication #content { max-width: 640px } ». */
#authentication #content.auth-panel {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  max-width: none;
  padding: 48px 24px;
  margin: 0;
  font-size: 1rem;
  color: var(--text-color);
  background: #fff;
}

#authentication .auth-card {
  width: 100%;
  max-width: 380px;
}

/* ── Onglets Connexion / Créer un compte (maquette) ──
   Deux liens vers les deux pages, là où la maquette bascule deux panneaux. */

#authentication .auth-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 28px;
  border-bottom: 1.5px solid var(--gray-200);
}

#authentication .auth-tab {
  position: relative;
  flex: 1;
  padding: 0 0 14px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--gray-500);
  text-align: center;
  text-decoration: none;
  transition: color .2s;
}

#authentication .auth-tab::after {
  position: absolute;
  right: 0;
  bottom: -1.5px;
  left: 0;
  height: 2px;
  content: '';
  background: var(--primary);
  transform: scaleX(0);
  transition: transform .2s;
}

#authentication .auth-tab:hover,
#authentication .auth-tab.active {
  color: var(--primary);
  text-decoration: none;
}

#authentication .auth-tab.active::after {
  transform: scaleX(1);
}

/* ── Titres ── */

#authentication .auth-title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: #1a1a2e;
  text-transform: none;
}

#authentication .auth-subtitle {
  margin: 0 0 24px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--gray-500);
}

/* ── Formulaire ──
   Le markup des champs vient de customer/_partials/auth-form-fields.tpl :
   .form-group / .form-group-header / .field-hint / .checkbox-block de la
   maquette, sans la grille Bootstrap de _partials/form-fields.tpl. */

#authentication .auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#authentication .form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

#authentication .form-group-header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

#authentication .form-group > label,
#authentication .form-group-header > label {
  padding: 0;
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  color: #333;
  letter-spacing: .01em;
  /* legacy : label { text-align: right } */
  text-align: left;
}

#authentication .form-group > .checkbox-label{
    font-weight: 400;
}

#authentication .optional-tag {
  font-size: .68rem;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

#authentication .form-group input:not([type="checkbox"]):not([type="radio"]),
#authentication .form-group select {
  width: 100%;
  height: auto;
  padding: 13px 16px;
  font-family: inherit;
  font-size: .9rem;
  color: #1a1a1a;
  background: #fafbfc;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  outline: none;
  box-shadow: none;
  transition: border-color .2s, background .2s;
}

#authentication .form-group input:focus,
#authentication .form-group select:focus {
  background: #fff;
  border-color: var(--accent);
  outline: none;
}

#authentication .form-group input::placeholder {
  color: #aaa;
}

#authentication .field-hint {
  margin-top: 1px;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--gray-500);
}

/* Date de naissance en trois <select> (type « birthday » du formatteur) : non
   utilisée par le formulaire actuel, qui sort un champ texte + placeholder. */
#authentication .date-select-group {
  display: flex;
  gap: 8px;
}

/* ── Mot de passe ──
   .input-group est en « display: table » dans le legacy : on repasse en flex
   pour positionner le bouton œil comme .input-with-icon de la maquette. */

#authentication .input-with-icon {
  position: relative;
  display: flex;
  width: 100%;
}

#authentication .input-with-icon input {
  flex: 1;
  width: auto;
  padding-right: 44px;
}

#authentication .toggle-pw {
  position: absolute;
  top: 50%;
  right: 4px;
  display: flex;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  cursor: pointer;
  background: none;
  border: 0;
  transform: translateY(-50%);
}

#authentication .toggle-pw:hover {
  color: var(--primary);
}

#authentication .toggle-pw svg {
  width: 18px;
  height: 18px;
}

/* Bascule de l'icône (la classe .is-visible est posée par assets/js/theme.js). */
#authentication .toggle-pw .toggle-pw-off,
#authentication .toggle-pw.is-visible .toggle-pw-on {
  display: none;
}

#authentication .toggle-pw.is-visible .toggle-pw-off {
  display: block;
}

/* ── Civilité (radios) ── */

#authentication .radio-group {
  display: flex;
  gap: 28px;
}

#authentication .radio-label {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  font-size: .86rem;
  font-weight: 600;
  color: #333;
  text-align: left;
  cursor: pointer;
}

#authentication .radio-label input[type="radio"] {
  width: 19px;
  height: 19px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

/* ── Cases à cocher (newsletter, CGV / psgdpr) ── */

#authentication .checkbox-block {
  gap: 6px;
}

#authentication .checkbox-label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: .8rem;
  font-weight: 400;
  color: #525252;
  text-align: left;
  cursor: pointer;
}

#authentication .checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--primary);
}

#authentication .checkbox-text {
  line-height: 1.5;
}

/* Le libellé de la newsletter (paramétrable en back-office) contient
   « <br><em>Vous pouvez vous désinscrire…</em> » : rendu comme le
   .field-hint.is-italic de la maquette. */
#authentication .checkbox-text br {
  display: none;
}

#authentication .checkbox-text em {
  display: block;
  margin-top: 4px;
  font-size: .74rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--gray-500);
}

#authentication .checkbox-text a {
  font-weight: 700;
  color: var(--primary);
}

/* ── Lien « Mot de passe oublié ? » ──
   La maquette l'apparie avec « Se souvenir de moi », que PrestaShop n'expose
   pas : le lien reste seul, aligné à droite. */

#authentication .form-row-between {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: -4px;
}

#authentication .auth-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

#authentication .auth-link:hover {
  color: var(--accent);
}

/* ── Bouton d'envoi ──
   .btn-primary (custom.css, avec ses paliers responsive) fournit fond, couleur,
   rayon, taille et rembourrage — comme sur la maquette. Ne restent ici que la
   pleine largeur, « text-transform: uppercase » (theme.css) et
   « .page-customer-account .btn-primary { line-height: 30px } ». */

#authentication .auth-submit {
  display: block;
  width: 100%;
  margin-top: 4px;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  cursor: pointer;
  border: none;
}

/* advancedemailguard (reCAPTCHA v3) désactive le bouton le temps de récupérer
   son jeton, puis le réactive et le clique. */
#authentication .auth-submit:disabled {
  cursor: wait;
}

#authentication .form-footer {
  margin: 0;
}

/* ── Pied de carte ── */

#authentication .auth-footer-text {
  margin: 24px 0 0;
  font-size: .82rem;
  color: var(--gray-500);
  text-align: center;
}

#authentication .auth-footer-text .auth-link-strong {
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

#authentication .auth-footer-text .auth-link-strong:hover {
  color: var(--accent);
}

/* ── Erreurs (.auth-error de la maquette) ──
   _partials/form-errors.tpl (partagé, non modifié) sort
   « .help-block > ul > li.alert.alert-danger » : le bloc rouge est porté par
   .help-block, et le style Bootstrap des <li> est neutralisé. Même rendu pour
   #sponsorship_result.help-block, injecté par allinone_rewards. */

#authentication .help-block {
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: .8rem;
  font-weight: 600;
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f5c2c0;
  border-radius: var(--radius);
}

#authentication .form-group .help-block {
  margin: 0;
}

#authentication .help-block ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#authentication .help-block li {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
}

#authentication .form-group.has-error input:not([type="checkbox"]):not([type="radio"]),
#authentication .form-group.has-error select {
  border-color: #f5c2c0;
}

/* ── Responsive ── */

@media (max-width: 860px) {
  #authentication #content.auth-panel {
    padding: 32px 24px;
  }
}

@media (max-width: 767px) {
  /* .container apporte déjà 16px de gouttière à cette largeur. */
  #authentication #content.auth-panel {
    padding: 28px 0;
  }

  #authentication .radio-group {
    gap: 20px;
  }
}