/* PRATINIUM v378 — formulaire /inscription compact, sans opt-in marketing,
   avec un seul bouton d'affichage du mot de passe parfaitement intégré. */

body#registration,
body.page-registration,
body.pratinium-registration-page-v378 {
  --pi378-label-width: 250px;
  --pi378-field-height: 46px;
  --pi378-radius: 14px;
  --pi378-line: #cedae8;
  --pi378-ink: #0d203c;
  --pi378-muted: #71829c;
}

/* Réduit la hauteur excessive des cartes/champs sans perdre le rendu premium. */
body#registration #customer-form > section,
body#registration form.js-customer-form > section,
body.page-registration #customer-form > section,
body.pratinium-registration-page-v378 #customer-form > section {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

body#registration #customer-form .form-group,
body#registration #customer-form .form-group.row,
body#registration form.js-customer-form .form-group,
body#registration form.js-customer-form .form-group.row,
body.page-registration #customer-form .form-group,
body.pratinium-registration-page-v378 #customer-form .form-group {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--pi378-label-width) minmax(0, 1fr) !important;
  column-gap: 22px !important;
  row-gap: 5px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 14px 22px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

body#registration #customer-form .form-group.pi358-no-label,
body#registration form.js-customer-form .form-group.pi358-no-label,
body.page-registration #customer-form .form-group.pi358-no-label {
  grid-template-columns: minmax(0, 1fr) !important;
}

body#registration #customer-form .pi358-label-cell,
body#registration form.js-customer-form .pi358-label-cell,
body.page-registration #customer-form .pi358-label-cell,
body.pratinium-registration-page-v378 #customer-form .pi358-label-cell {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  color: var(--pi378-ink) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: left !important;
}

body#registration #customer-form .pi358-control-cell,
body#registration form.js-customer-form .pi358-control-cell,
body.page-registration #customer-form .pi358-control-cell,
body.pratinium-registration-page-v378 #customer-form .pi358-control-cell {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body#registration #customer-form .pi358-no-label .pi358-control-cell,
body#registration form.js-customer-form .pi358-no-label .pi358-control-cell,
body.page-registration #customer-form .pi358-no-label .pi358-control-cell {
  grid-column: 1 / -1 !important;
}

/* Neutralise définitivement les anciennes colonnes Bootstrap et les limites
   de largeur qui rendaient certains champs plus courts que les autres. */
body#registration #customer-form .form-group > [class*="col-"],
body#registration form.js-customer-form .form-group > [class*="col-"],
body.page-registration #customer-form .form-group > [class*="col-"] {
  float: none !important;
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body#registration #customer-form .pi358-control-cell input.form-control,
body#registration #customer-form .pi358-control-cell select.form-control,
body#registration #customer-form .pi358-control-cell textarea.form-control,
body#registration #customer-form .pi358-control-cell .custom-select,
body#registration form.js-customer-form .pi358-control-cell input.form-control,
body#registration form.js-customer-form .pi358-control-cell select.form-control,
body.page-registration #customer-form .pi358-control-cell input.form-control,
body.page-registration #customer-form .pi358-control-cell select.form-control,
body.pratinium-registration-page-v378 #customer-form .pi358-control-cell input.form-control {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--pi378-field-height) !important;
  min-height: var(--pi378-field-height) !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid var(--pi378-line) !important;
  border-radius: var(--pi378-radius) !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}

body#registration #customer-form .pi358-field-note,
body#registration form.js-customer-form .pi358-field-note,
body.page-registration #customer-form .pi358-field-note {
  width: 100% !important;
  max-width: 100% !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--pi378-muted) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

body#registration #customer-form .pi358-choice-field,
body#registration form.js-customer-form .pi358-choice-field,
body.page-registration #customer-form .pi358-choice-field {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 18px !important;
}

/* Masquage immédiat des deux consentements marketing facultatifs. Le JS v378
   complète cette règle par détection de leur libellé si un module change le nom. */
body#registration #customer-form .form-group:has(input[name="optin"]),
body#registration #customer-form .form-group:has(input[name="newsletter"]),
body#registration #customer-form .form-group:has(#field-optin),
body#registration #customer-form .form-group:has(#field-newsletter),
body.page-registration #customer-form .form-group:has(input[name="optin"]),
body.page-registration #customer-form .form-group:has(input[name="newsletter"]) {
  display: none !important;
}

/* Un seul œil : masque l'icône native Edge/IE et tous les anciens boutons. */
body#registration input[type="password"]::-ms-reveal,
body#registration input[type="password"]::-ms-clear,
body.page-registration input[type="password"]::-ms-reveal,
body.page-registration input[type="password"]::-ms-clear {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body#registration #customer-form .pi358-password-legacy,
body#registration #customer-form .input-group-btn,
body#registration #customer-form .input-group-append,
body#registration #customer-form button[data-action="show-password"]:not(.pi378-password-toggle),
body#registration #customer-form a[data-action="show-password"],
body#registration #customer-form .js-show-password:not(.pi378-password-toggle),
body#registration #customer-form .pl-password-toggle:not(.pi378-password-toggle),
body#registration #customer-form .pratinium-v349-password-eye,
body#registration #customer-form .pratinium-v350-password-eye,
body.page-registration #customer-form .pi358-password-legacy,
body.page-registration #customer-form .input-group-btn,
body.page-registration #customer-form .input-group-append {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body#registration #customer-form .pi358-password-shell,
body#registration form.js-customer-form .pi358-password-shell,
body.page-registration #customer-form .pi358-password-shell,
body.pratinium-registration-page-v378 #customer-form .pi358-password-shell {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--pi378-field-height) !important;
  min-height: var(--pi378-field-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--pi378-line) !important;
  border-radius: var(--pi378-radius) !important;
  background: linear-gradient(180deg, #fff 0%, #f7faff 100%) !important;
  box-sizing: border-box !important;
}

body#registration #customer-form .pi358-password-shell > input,
body#registration form.js-customer-form .pi358-password-shell > input,
body.page-registration #customer-form .pi358-password-shell > input {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 58px 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  box-sizing: border-box !important;
}

body#registration #customer-form .pi358-password-toggle.pi378-password-toggle,
body#registration form.js-customer-form .pi358-password-toggle.pi378-password-toggle,
body.page-registration #customer-form .pi358-password-toggle.pi378-password-toggle,
body.pratinium-registration-page-v378 #customer-form .pi358-password-toggle.pi378-password-toggle {
  position: absolute !important;
  z-index: 3 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--pi378-line) !important;
  border-radius: 0 var(--pi378-radius) var(--pi378-radius) 0 !important;
  background: linear-gradient(180deg, #eef3f8 0%, #e4ebf3 100%) !important;
  color: #334155 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

body#registration #customer-form .pi358-password-toggle.pi378-password-toggle::before,
body#registration #customer-form .pi358-password-toggle.pi378-password-toggle::after,
body.page-registration #customer-form .pi358-password-toggle.pi378-password-toggle::before,
body.page-registration #customer-form .pi358-password-toggle.pi378-password-toggle::after {
  content: none !important;
  display: none !important;
}

body#registration #customer-form .pi358-password-toggle.pi378-password-toggle svg,
body#registration form.js-customer-form .pi358-password-toggle.pi378-password-toggle svg,
body.page-registration #customer-form .pi358-password-toggle.pi378-password-toggle svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}

@media (max-width: 860px) {
  body#registration,
  body.page-registration,
  body.pratinium-registration-page-v378 {
    --pi378-label-width: 190px;
  }
}

@media (max-width: 700px) {
  body#registration #customer-form .form-group,
  body#registration #customer-form .form-group.row,
  body.page-registration #customer-form .form-group {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 12px 14px !important;
  }

  body#registration #customer-form .pi358-label-cell,
  body#registration #customer-form .pi358-control-cell,
  body.page-registration #customer-form .pi358-label-cell,
  body.page-registration #customer-form .pi358-control-cell {
    grid-column: 1 !important;
  }
}