/*
 * Page « Créer un compte » de 2027.velox.fr — même mise en page que l'étape 1 de la commande (proposition D),
 * planche « Données personnelles dans les formulaires » validée par Rémy le 24/10/2026.
 * Panneau de la largeur de celui de la commande, centré ; bandeau marine ; bascule « Créer un compte / Connexion » ;
 * champs sur trois colonnes ; une seule ligne d'aide pour prénom et nom ; « Enregistrer » à hauteur des cases ;
 * texte d'information sur les données personnelles sous le formulaire. Chargée par templates/customer/registration.tpl.
 */
#registration {
  --vx-marine: #223047;
  --vx-orange: #FE5000;
  --vx-gris: #6b7380;
  --vx-bord: #d9dde3;
  --vx-titre: 700 13px/1 "Archivo", "Public Sans", system-ui, sans-serif;
}

/* ---------- 1. Panneau ---------- */
#registration #main { max-width: 1057px; margin: 0 auto; }
#registration #content.page-content { margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
#registration .vx-reg-titre {
  display: flex; align-items: center; height: 44px; margin: 0; padding: 0 16px;
  background: var(--vx-marine); color: #fff; font: var(--vx-titre); text-transform: uppercase; letter-spacing: .06em;
}
#registration .register-form { margin: 0; padding: 18px 16px 20px; border: 1px solid var(--vx-bord); border-top: 0; background: #fff; }

/* Créer un compte / Connexion : boutons accolés, comme « Commander en tant qu'invité / Connexion » */
#registration .vx-bascule { display: inline-flex; margin: 0 0 18px; border: 1px solid var(--vx-marine); }
#registration .vx-bascule > * {
  display: flex; align-items: center; height: 30px; margin: 0; padding: 0 14px; background: #fff; color: var(--vx-marine);
  font: 600 12px/1 "Public Sans", sans-serif; white-space: nowrap; text-decoration: none;
}
#registration .vx-bascule > .vx-actif { background: var(--vx-marine); color: #fff; }
#registration .vx-bascule > a:hover { background: var(--vx-orange); color: #fff; }

/* ---------- 2. Champs ---------- */
#registration #customer-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; align-items: start; margin: 0 !important; }
#registration #customer-form > div { display: contents; }
#registration #customer-form .form-group { position: relative; display: block; margin: 0 0 12px; grid-column: 1 / -1; }
#registration #customer-form .form-group > [class*="col-"] { flex: none; float: none; width: auto; max-width: none; margin-left: 0; padding: 0; }
#registration #customer-form .form-control-label {
  display: block; margin: 0 0 6px; padding: 0; text-align: left;
  color: var(--vx-marine); font: 600 13px/19px "Public Sans", sans-serif;
}
#registration #customer-form .form-control-label.required::after { content: " *"; color: #e2231a; }
#registration #customer-form .form-group > .form-control-comment {
  position: absolute; top: 0; right: 0; color: var(--vx-gris); font: italic 11px/19px "Public Sans", sans-serif;
}
#registration #customer-form .form-control-comment:empty { display: none; }
#registration #customer-form .form-group span.form-control-comment { display: block; margin: 4px 0 0; color: var(--vx-gris); font-size: 11px; line-height: 1.3; }
#registration #customer-form .form-group:has([name="firstname"]) span.form-control-comment,
#registration #customer-form .form-group:has([name="lastname"]) span.form-control-comment { display: none; }
#registration #customer-form .form-control {
  height: 40px; padding: 0 12px; border: 1px solid #c9ced6; border-radius: 0; background: #fff; color: #222; font-size: 14px; box-shadow: none;
}
#registration #customer-form .form-control:focus { border-color: var(--vx-marine); outline: 0; }
#registration #customer-form .input-group-btn .btn {
  height: 40px; padding: 0 14px; border: 0; border-radius: 0; background: var(--vx-marine); color: #fff;
  font: 600 12px/1 "Public Sans", sans-serif; text-transform: none; white-space: nowrap;
}

/* grille : prénom, nom, e-mail / aide / mot de passe, date de naissance / cases / Turnstile / information */
#registration #customer-form .form-group:has([name="firstname"]) { grid-row: 1; grid-column: 1; }
#registration #customer-form .form-group:has([name="lastname"]) { grid-row: 1; grid-column: 2; }
#registration #customer-form .form-group:has([name="email"]) { grid-row: 1; grid-column: 3; }
#registration #customer-form .vx-aide-nom { grid-row: 2; grid-column: 1 / -1; margin: -6px 0 14px; color: var(--vx-gris); font-size: 11px; line-height: 1.3; }
#registration #customer-form .form-group:has([name="password"]) { grid-row: 3; grid-column: 1; }
#registration #customer-form .form-group:has([name="birthday"]) { grid-row: 3; grid-column: 2; }
#registration #customer-form .form-group:has([type="checkbox"]) { grid-column: 1 / 3; margin: 0 0 8px; }
#registration #customer-form .form-group:has([name="newsletter"]) { grid-row: 4; }
#registration #customer-form .form-group:has([name="optin"]) { grid-row: 5; }
#registration #customer-form .form-group:has([name="cf-turnstile-response"]) { grid-row: 6; grid-column: 1 / 3; margin: 4px 0 8px; }
#registration #customer-form .form-group:has([name="cf-turnstile-response"]) .form-control-label { display: none; }
#registration #customer-form .vx-info { grid-row: 7; grid-column: 1 / 3; margin: 0; color: var(--vx-gris); font: 11.5px/1.55 "Public Sans", sans-serif; }
#registration #customer-form .vx-info a { color: var(--vx-marine); font-weight: 700; text-decoration: underline; }
#registration #customer-form .vx-info a:hover { color: var(--vx-orange); }

/* cases à cocher : carré de 18 px bordé, 10 px avant le texte, marine une fois cochées (comme la commande) */
#registration #customer-form .form-group:has([type="checkbox"]) .form-control-label { display: none; }
#registration #customer-form .form-group:has([type="checkbox"]) label { margin: 0; color: #333; font-size: 13px; line-height: 20px; }
#registration #customer-form .custom-checkbox { display: flex; align-items: center; gap: 10px; }
#registration #customer-form .custom-checkbox > input { width: 18px; height: 18px; top: 1px; }
#registration #customer-form .custom-checkbox > span {
  display: flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; margin: 0;
  border: 1px solid #9aa3af; border-radius: 0; background: #fff;
}
#registration #customer-form .custom-checkbox > input:checked + span { background: var(--vx-marine); border-color: var(--vx-marine); }
#registration #customer-form .custom-checkbox > input:checked + span .checkbox-checked { color: #fff; font-size: 16px; margin: 0; }
#registration #customer-form .custom-checkbox > input:focus-visible + span { outline: 2px solid var(--vx-orange); outline-offset: 1px; }

/* « Enregistrer » à droite, à hauteur des cases, comme « Continuer » */
#registration #customer-form > .form-footer { grid-column: 3; grid-row: 4 / span 4; align-self: center; justify-self: end; margin: 0; padding: 0; }
#registration #customer-form > .form-footer button {
  float: none; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 22px;
  border: 0; border-radius: 0; background: var(--vx-marine); color: #fff;
  font: 600 13px/1 "Public Sans", sans-serif; text-transform: none; white-space: nowrap;
}
#registration #customer-form > .form-footer button:hover { background: var(--vx-orange); color: #fff; }

/* ---------- 3. Écrans plus étroits ---------- */
@media (max-width: 767.98px) {
  #registration #customer-form { grid-template-columns: minmax(0, 1fr); }
  #registration #customer-form .form-group, #registration #customer-form .vx-aide-nom, #registration #customer-form .vx-info,
  #registration #customer-form > .form-footer { grid-row: auto !important; grid-column: 1 !important; justify-self: stretch; }
  #registration #customer-form > .form-footer { margin-top: 14px; }
}