/*
 * HubSpot Multistep — Formoz
 * Maquettes Figma : fichier « Formoz » (formulaire de contact en 3 étapes).
 *
 * Le thème du site embarque une ancienne « peau » HubSpot (.hs-form-formoz) qui impose
 * display:flex, rayons, polices et couleurs en !important : les règles ci-dessous qui
 * doivent la battre utilisent !important et une spécificité plus forte.
 *
 * Isolation : toutes les règles sont attachées à form.hs-form.is-multistep, classe
 * posée uniquement par le JS sur un formulaire réellement transformé. Un formulaire
 * exclu (no-multistep) n'est jamais touché.
 */

/* ------------------------------------------------------------
   Variables (valeurs relevées dans Figma)
   ------------------------------------------------------------ */
form.hs-form.is-multistep {
  --hsmz-coral: #ed7366;            /* corail Formoz 100 % */
  --hsmz-coral-hover: #e45f51;      /* non maquetté : à confirmer */
  --hsmz-coral-5: rgba(237, 115, 102, 0.05);
  --hsmz-coral-ring: rgba(237, 115, 102, 0.28);
  --hsmz-navy: #1c2340;             /* bleu foncé Formoz 100 % */
  --hsmz-navy-75: rgba(28, 35, 64, 0.75);
  --hsmz-navy-50: rgba(28, 35, 64, 0.5);
  --hsmz-navy-10: rgba(28, 35, 64, 0.1);
  --hsmz-navy-5: rgba(28, 35, 64, 0.05);
  --hsmz-white: #fff;
  --hsmz-error: #c62828;            /* non maquetté : à confirmer */
}

/* ------------------------------------------------------------
   Carte
   ------------------------------------------------------------ */
form.hs-form.is-multistep {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 40px;
  border: 1px solid var(--hsmz-navy-10);
  border-radius: 24px;
  color: var(--hsmz-navy);
  background-color: var(--hsmz-white);
  font-family: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 21px;
}

form.hs-form.is-multistep *,
form.hs-form.is-multistep *::before,
form.hs-form.is-multistep *::after {
  box-sizing: border-box;
}

/*
 * Hauteur homogène des étapes sur ordinateur (maquettes : cadre de 680 px).
 * Le formulaire est une colonne : le contenu de l'étape s'étire et la navigation
 * reste en bas. Avec un reCAPTCHA, la navigation finale est un enfant du formulaire,
 * placée après lui : le contenu cesse alors de s'étirer à la dernière étape.
 */
form.hs-form.is-multistep {
  display: flex;
  flex-direction: column;
}

@media (min-width: 641px) {
  form.hs-form.is-multistep {
    min-height: 680px;
  }
}

form.hs-form.is-multistep .hs-multistep {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 32px;
}

form.hs-form.is-multistep.has-captcha.is-last-step .hs-multistep {
  flex: 0 0 auto;
}

/* Annonce pour lecteurs d'écran */
form.hs-form.is-multistep .hs-multistep__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

form.hs-form.is-multistep fieldset {
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

form.hs-form.is-multistep .hs-multistep__step[hidden] {
  display: none;
}

form.hs-form.is-multistep .hs-multistep__step {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* ------------------------------------------------------------
   En-tête : étape, durée estimée, progression
   ------------------------------------------------------------ */
form.hs-form.is-multistep .hs-multistep__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

form.hs-form.is-multistep .hs-multistep__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

form.hs-form.is-multistep .hs-multistep__counter {
  margin: 0;
  color: var(--hsmz-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

form.hs-form.is-multistep .hs-multistep__estimate {
  margin: 0;
  color: var(--hsmz-navy-75);
  font-size: 13px;
  font-weight: 400;
  line-height: 21px;
  text-align: right;
}

form.hs-form.is-multistep .hs-multistep__progress {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

form.hs-form.is-multistep .hs-multistep__progress-item {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* Barre de 4 px : corail pour l'étape active et les étapes terminées */
form.hs-form.is-multistep .hs-multistep__progress-bar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background-color: var(--hsmz-navy-10);
  transition: background-color 0.2s ease;
}

form.hs-form.is-multistep .hs-multistep__progress-item.is-active .hs-multistep__progress-bar,
form.hs-form.is-multistep .hs-multistep__progress-item.is-completed .hs-multistep__progress-bar {
  background-color: var(--hsmz-coral);
}

/* Libellé : bouton sans apparence de bouton */
form.hs-form.is-multistep .hs-multistep__progress-bullet {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: var(--hsmz-navy-75);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: default;
  appearance: none;
}

form.hs-form.is-multistep .hs-multistep__progress-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Étape terminée : « ✓  Libellé » en bleu foncé */
form.hs-form.is-multistep .hs-multistep__progress-item.is-completed .hs-multistep__progress-bullet {
  color: var(--hsmz-navy);
}

/* Étape active : « 2  Libellé » en Medium 14 */
form.hs-form.is-multistep .hs-multistep__progress-item.is-active .hs-multistep__progress-bullet {
  color: var(--hsmz-navy);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/*
 * Le thème peut imposer couleur et fond sur button:hover / :focus : on fige
 * l'apparence de chaque état, sinon le libellé change de couleur au survol.
 */
form.hs-form.is-multistep .hs-multistep__progress-bullet:hover,
form.hs-form.is-multistep .hs-multistep__progress-bullet:focus,
form.hs-form.is-multistep .hs-multistep__progress-bullet:active {
  background: transparent !important;
  color: var(--hsmz-navy-75) !important;
}

form.hs-form.is-multistep .hs-multistep__progress-item.is-completed .hs-multistep__progress-bullet:hover,
form.hs-form.is-multistep .hs-multistep__progress-item.is-completed .hs-multistep__progress-bullet:focus,
form.hs-form.is-multistep .hs-multistep__progress-item.is-active .hs-multistep__progress-bullet:hover,
form.hs-form.is-multistep .hs-multistep__progress-item.is-active .hs-multistep__progress-bullet:focus,
form.hs-form.is-multistep .hs-multistep__progress-item.is-active .hs-multistep__progress-bullet:active {
  color: var(--hsmz-navy) !important;
}

/* Étape déverrouillée (autre que l'active) : cliquable, sans changement de mise en page */
form.hs-form.is-multistep .hs-multistep__progress-item.is-unlocked:not(.is-active) .hs-multistep__progress-bullet {
  cursor: pointer;
}

form.hs-form.is-multistep .hs-multistep__progress-item.is-unlocked:not(.is-active) .hs-multistep__progress-bullet:hover .hs-multistep__progress-label {
  text-decoration: underline;
}

/* Étape non déverrouillée : aucune interaction */
form.hs-form.is-multistep .hs-multistep__progress-bullet:disabled {
  pointer-events: none;
  cursor: default;
}

form.hs-form.is-multistep .hs-multistep__progress-bullet:focus-visible {
  outline: 3px solid var(--hsmz-coral);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   Introduction de l'étape
   ------------------------------------------------------------ */
form.hs-form.is-multistep .hs-multistep__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

form.hs-form.is-multistep .hs-multistep__title {
  margin: 0;
  color: var(--hsmz-navy);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

form.hs-form.is-multistep .hs-multistep__description {
  margin: 0;
  color: var(--hsmz-navy-75);
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
}

/* ------------------------------------------------------------
   Champs : 2 colonnes, écart de 16 px
   ------------------------------------------------------------ */
form.hs-form.is-multistep .hs-multistep__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/*
 * Les fieldsets HubSpot sont aplatis : leurs champs se placent deux par deux,
 * quelle que soit la façon dont HubSpot (ou le thème) les regroupe.
 */
form.hs-form.is-multistep .hs-multistep__fields fieldset,
form.hs-form.is-multistep .hs-multistep__fields .hs-dependent-field {
  display: contents !important;
}

form.hs-form.is-multistep .hs-multistep__fields .hs-form-field {
  float: none !important;
  flex: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Zone de texte, cases à cocher : toute la largeur */
form.hs-form.is-multistep .hs-multistep__fields .hs-form-field:has(textarea),
form.hs-form.is-multistep .hs-multistep__fields .hs-fieldtype-textarea,
form.hs-form.is-multistep .hs-multistep__fields .hs-fieldtype-booleancheckbox,
form.hs-form.is-multistep .hs-multistep__fields .hs-richtext {
  grid-column: 1 / -1;
}

/* Le champ « role » d'origine reste dans le DOM (valeur soumise) mais n'est pas affiché */
form.hs-form.is-multistep .hs-multistep__role-source,
form.hs-form.is-multistep .hs-multistep__step[data-kind="contact"] .hs-form-field:has(select[name="role"]) {
  display: none !important;
}

form.hs-form.is-multistep .hs-multistep__fields .hs-form-field > label:not(.hs-error-msg),
form.hs-form.is-multistep .hs-multistep__fields .hs-form-field > legend {
  display: block;
  width: 100%;
  margin: 0 0 8px !important;
  color: var(--hsmz-navy) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

form.hs-form.is-multistep .hs-multistep__fields .hs-form-field > label .hs-form-required {
  color: inherit;
}

/*
 * Étape « Votre besoin » : le titre de l'étape dit déjà « Décrivez votre besoin ».
 * Le libellé du champ est masqué visuellement (répétition dans la maquette) mais
 * reste dans le DOM pour les lecteurs d'écran.
 */
form.hs-form.is-multistep .hs-multistep__step[data-kind="message"] .hs-multistep__fields .hs-form-field:has(textarea) > label:not(.hs-error-msg) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px !important;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

form.hs-form.is-multistep .hs-form-field .input {
  margin: 0;
}

/* Champs de saisie : 48 px, bordure bleu foncé 50 %, rayon 8 px */
form.hs-form.is-multistep .hs-multistep__fields .hs-input:not([type="checkbox"]):not([type="radio"]) {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0;
  padding: 0 16px !important;
  border: 1px solid var(--hsmz-navy-50) !important;
  border-radius: 8px !important;
  color: var(--hsmz-navy) !important;
  background-color: var(--hsmz-white) !important;
  box-shadow: none;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
}

form.hs-form.is-multistep .hs-multistep__fields textarea.hs-input:not([type="checkbox"]):not([type="radio"]) {
  height: 112px !important;
  min-height: 112px !important;
  padding: 16px !important;
  resize: vertical;
}

form.hs-form.is-multistep .hs-input::placeholder {
  color: var(--hsmz-navy-75);
  opacity: 1;
}

form.hs-form.is-multistep .hs-multistep__fields .hs-input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--hsmz-navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--hsmz-coral-ring);
}

/* Liste : flèche de la maquette */
form.hs-form.is-multistep .hs-multistep__fields select.hs-input:not([type="checkbox"]):not([type="radio"]) {
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M6.29609 7.70703C6.68672 8.09766 7.32109 8.09766 7.71172 7.70703L13.7117 1.70703C14.1023 1.31641 14.1023 0.682031 13.7117 0.291406C13.3211 -0.0992188 12.6867 -0.0992188 12.2961 0.291406L7.00234 5.58516L1.70859 0.294531C1.31797 -0.0960938 0.683594 -0.0960938 0.292969 0.294531C-0.0976562 0.685156 -0.0976562 1.31953 0.292969 1.71016L6.29297 7.71016L6.29609 7.70703Z' fill='%231C2340'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

form.hs-form.is-multistep .hs-multistep__fields select.hs-input.is-placeholder:not([type="checkbox"]):not([type="radio"]) {
  color: var(--hsmz-navy-75) !important;
}

/* Cases à cocher / radios HubSpot : taille native lisible */
form.hs-form.is-multistep .hs-input[type="checkbox"],
form.hs-form.is-multistep .hs-input[type="radio"] {
  width: auto;
  height: auto;
  margin-right: 8px;
  accent-color: var(--hsmz-coral);
}

/* Erreurs HubSpot (couleur non maquettée) */
form.hs-form.is-multistep .hs-multistep__fields .hs-input.invalid.error,
form.hs-form.is-multistep .hs-multistep__fields .hs-input[aria-invalid="true"] {
  border-color: var(--hsmz-error) !important;
}

form.hs-form.is-multistep .hs-error-msgs {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

form.hs-form.is-multistep .hs-error-msgs label,
form.hs-form.is-multistep .hs-error-msg {
  display: block;
  margin: 0;
  color: var(--hsmz-error);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------
   Étape 1 : cartes de profil (choix unique)
   ------------------------------------------------------------ */
form.hs-form.is-multistep select[data-choice-enhanced="true"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

form.hs-form.is-multistep .hs-choice-select {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

form.hs-form.is-multistep .hs-choice-select__option {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--hsmz-navy-10);
  border-radius: 16px;
  color: var(--hsmz-navy);
  background-color: var(--hsmz-white);
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

form.hs-form.is-multistep .hs-choice-select__text {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

/* Pastille de choix : cercle de 20 px (maquette « Choix ») */
form.hs-form.is-multistep .hs-choice-select__radio {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--hsmz-navy-50);
  border-radius: 50%;
  background-color: var(--hsmz-white);
}

form.hs-form.is-multistep .hs-choice-select__radio::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--hsmz-coral);
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Survol (non maquetté) */
form.hs-form.is-multistep .hs-choice-select__option:hover {
  border-color: var(--hsmz-navy-50);
  color: var(--hsmz-navy);
  background-color: var(--hsmz-white);
}

/* Sélectionné : bordure corail de 1,5 px, fond corail 5 %, libellé corail */
form.hs-form.is-multistep .hs-choice-select__option.is-selected,
form.hs-form.is-multistep .hs-choice-select__option.is-selected:hover {
  border-color: var(--hsmz-coral);
  color: var(--hsmz-coral);
  background-color: var(--hsmz-coral-5);
  box-shadow: inset 0 0 0 0.5px var(--hsmz-coral);
}

form.hs-form.is-multistep .hs-choice-select__option.is-selected .hs-choice-select__radio {
  border-color: var(--hsmz-coral);
}

form.hs-form.is-multistep .hs-choice-select__option.is-selected .hs-choice-select__radio::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

form.hs-form.is-multistep .hs-choice-select__option:focus-visible {
  outline: 3px solid var(--hsmz-coral);
  outline-offset: 2px;
}

form.hs-form.is-multistep .hs-choice-select.is-invalid .hs-choice-select__option:not(.is-selected) {
  border-color: var(--hsmz-error);
}

/* ------------------------------------------------------------
   Texte légal et reCAPTCHA
   ------------------------------------------------------------ */
form.hs-form.is-multistep .legal-consent-container {
  margin: 0;
  color: var(--hsmz-navy-75);
  font-size: 12px;
  line-height: 18px;
}

form.hs-form.is-multistep .legal-consent-container a {
  color: var(--hsmz-coral);
  text-decoration: underline;
}

form.hs-form.is-multistep .hs_recaptcha,
form.hs-form.is-multistep .hs-recaptcha {
  margin: 0;
  padding: 0;
}

/* reCAPTCHA visible uniquement à la dernière étape (le JS pose has-captcha / is-last-step) */
form.hs-form.is-multistep.has-captcha:not(.is-last-step) .hs_recaptcha,
form.hs-form.is-multistep.has-captcha:not(.is-last-step) .hs-recaptcha,
form.hs-form.is-multistep.has-captcha:not(.is-last-step) > .hs-multistep__navigation.is-detached {
  display: none;
}

form.hs-form.is-multistep.has-captcha > .hs_recaptcha,
form.hs-form.is-multistep.has-captcha > .hs-recaptcha {
  margin-top: 24px;
}

form.hs-form.is-multistep > .hs-multistep__navigation.is-detached {
  margin-top: auto;
  padding-top: 32px;
}

/* ------------------------------------------------------------
   Navigation et boutons
   ------------------------------------------------------------ */
form.hs-form.is-multistep .hs-multistep__navigation {
  display: flex;
  min-height: 53px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: auto 0 0;
}

form.hs-form.is-multistep .hs-multistep__nav-start,
form.hs-form.is-multistep .hs-multistep__nav-actions {
  display: flex;
  align-items: center;
}

form.hs-form.is-multistep .hs-multistep__nav-actions {
  margin-left: auto;
}

/* Bouton principal : Continuer / Envoyer ma demande (flèche de 24 px à droite) */
form.hs-form.is-multistep .hs-multistep__next {
  display: inline-flex;
  min-width: 120px;
  max-width: 350px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  color: var(--hsmz-white);
  background-color: var(--hsmz-coral);
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 25.5px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

form.hs-form.is-multistep .hs-multistep__next::after {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5L13.59 6.41L18.17 11H2V13H18.17L13.58 17.59L15 19L22 12L15 5Z' fill='white'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
  content: "";
}

/* « Envoyer ma demande » : bouton HubSpot (input) → flèche en image de fond */
form.hs-form.is-multistep .hs_submit .actions input.hs-button,
form.hs-form.is-multistep .hs_submit .actions button.hs-button {
  display: inline-block !important;
  min-width: 120px;
  max-width: 350px;
  margin: 0 !important;
  padding: 12px 52px 12px 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: var(--hsmz-white) !important;
  background-color: var(--hsmz-coral) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5L13.59 6.41L18.17 11H2V13H18.17L13.58 17.59L15 19L22 12L15 5Z' fill='white'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
  background-size: 24px 24px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 25.5px !important;
  letter-spacing: 0;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

form.hs-form.is-multistep .hs_submit {
  margin: 0 !important;
  padding: 0;
  text-align: left !important;
}

form.hs-form.is-multistep .hs_submit .actions {
  margin: 0;
  padding: 0;
}

/* Le thème peut imposer couleur et fond sur :hover / :focus : on fige l'apparence. */
form.hs-form.is-multistep .hs-multistep__next:focus,
form.hs-form.is-multistep .hs_submit .actions input.hs-button:focus,
form.hs-form.is-multistep .hs_submit .actions button.hs-button:focus {
  color: var(--hsmz-white) !important;
  background-color: var(--hsmz-coral) !important;
}

form.hs-form.is-multistep .hs-multistep__next:hover,
form.hs-form.is-multistep .hs_submit .actions input.hs-button:hover,
form.hs-form.is-multistep .hs_submit .actions button.hs-button:hover {
  color: var(--hsmz-white) !important;
  background-color: var(--hsmz-coral-hover) !important;
}

form.hs-form.is-multistep .hs-multistep__next:disabled,
form.hs-form.is-multistep .hs_submit .actions .hs-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

form.hs-form.is-multistep .hs-multistep__next.is-validating,
form.hs-form.is-multistep .hs_submit .actions .hs-button.is-loading {
  cursor: wait;
}

/* Retour : contour bleu foncé de 1,5 px, fond blanc */
form.hs-form.is-multistep .hs-multistep__previous {
  display: inline-flex;
  min-width: 120px;
  max-width: 350px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 20px;
  border: 1.5px solid var(--hsmz-navy);
  border-radius: 10px;
  color: var(--hsmz-navy);
  background-color: var(--hsmz-white);
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 25.5px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

form.hs-form.is-multistep .hs-multistep__previous:hover,
form.hs-form.is-multistep .hs-multistep__previous:focus {
  color: var(--hsmz-navy) !important;
  background-color: var(--hsmz-navy-5) !important;
}

form.hs-form.is-multistep .hs-multistep__button:focus-visible,
form.hs-form.is-multistep .hs_submit .actions .hs-button:focus-visible {
  outline: 3px solid var(--hsmz-coral);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  form.hs-form.is-multistep {
    padding: 24px 20px;
    border-radius: 20px;
  }

  form.hs-form.is-multistep .hs-multistep {
    gap: 24px;
  }

  form.hs-form.is-multistep .hs-multistep__fields,
  form.hs-form.is-multistep .hs-choice-select {
    grid-template-columns: minmax(0, 1fr);
  }

  form.hs-form.is-multistep .hs-multistep__meta {
    flex-direction: column;
    gap: 2px;
  }

  form.hs-form.is-multistep .hs-multistep__estimate {
    text-align: left;
  }

  /*
   * Progression mobile : les barres sont sur une rangée, et seul l'intitulé de
   * l'étape active est affiché dessous, sur toute la largeur.
   */
  form.hs-form.is-multistep .hs-multistep__progress {
    display: grid;
    grid-template-columns: repeat(var(--hsmz-steps, 3), minmax(0, 1fr));
    gap: 12px 8px;
  }

  form.hs-form.is-multistep .hs-multistep__progress-item {
    display: contents;
  }

  form.hs-form.is-multistep .hs-multistep__progress-bar {
    grid-row: 1;
  }

  form.hs-form.is-multistep .hs-multistep__progress-item:nth-child(1) > .hs-multistep__progress-bar { grid-column: 1; }
  form.hs-form.is-multistep .hs-multistep__progress-item:nth-child(2) > .hs-multistep__progress-bar { grid-column: 2; }
  form.hs-form.is-multistep .hs-multistep__progress-item:nth-child(3) > .hs-multistep__progress-bar { grid-column: 3; }
  form.hs-form.is-multistep .hs-multistep__progress-item:nth-child(4) > .hs-multistep__progress-bar { grid-column: 4; }

  form.hs-form.is-multistep .hs-multistep__progress-bullet {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  form.hs-form.is-multistep .hs-multistep__progress-item:not(.is-active) .hs-multistep__progress-bullet {
    display: none;
  }

  form.hs-form.is-multistep .hs-multistep__next,
  form.hs-form.is-multistep .hs-multistep__previous {
    min-width: 0;
    padding-right: 16px;
    padding-left: 16px;
  }

  form.hs-form.is-multistep .hs_submit .actions input.hs-button,
  form.hs-form.is-multistep .hs_submit .actions button.hs-button {
    min-width: 0;
    padding: 12px 48px 12px 16px !important;
    background-position: right 14px center !important;
  }
}

/* ------------------------------------------------------------
   Variante compacte — conteneur .hs-multistep--compact

   Prévue pour un formulaire placé dans une colonne étroite ou un aside.
   La classe est ajoutée au conteneur Elementor, jamais au formulaire HubSpot.
   ------------------------------------------------------------ */
.hs-multistep--compact form.hs-form.is-multistep.is-compact {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  font-size: 14px;
  line-height: 20px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep {
  gap: 24px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__step {
  gap: 20px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__header {
  gap: 12px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__meta {
  flex-direction: column;
  gap: 2px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__estimate {
  font-size: 12px;
  line-height: 18px;
  text-align: left;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__counter {
  font-size: 13px;
  line-height: 18px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__progress {
  display: grid;
  grid-template-columns: repeat(var(--hsmz-steps, 3), minmax(0, 1fr));
  gap: 10px 6px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__progress-item {
  display: contents;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__progress-bar {
  grid-row: 1;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__progress-item:nth-child(1) > .hs-multistep__progress-bar { grid-column: 1; }
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__progress-item:nth-child(2) > .hs-multistep__progress-bar { grid-column: 2; }
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__progress-item:nth-child(3) > .hs-multistep__progress-bar { grid-column: 3; }
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__progress-item:nth-child(4) > .hs-multistep__progress-bar { grid-column: 4; }

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__progress-bullet {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 18px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__progress-item:not(.is-active) .hs-multistep__progress-bullet {
  display: none;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__title {
  font-size: 18px;
  line-height: 22px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__description {
  font-size: 14px;
  line-height: 20px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__fields {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* Étapes 1 et 2 : deux colonnes de même largeur. */
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__step[data-step="1"] .hs-multistep__fields,
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__step[data-step="2"] .hs-multistep__fields,
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__step[data-step="1"] .hs-choice-select {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Liste verticale de choix, sans effet de carte volumineux. */
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-choice-select {
  gap: 6px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-choice-select__option {
  min-height: 44px;
  gap: 10px;
  padding: 9px 10px;
  border-color: transparent;
  border-radius: 8px;
  background-color: transparent;
  font-size: 13px;
  line-height: 18px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-choice-select__option:hover {
  border-color: transparent;
  background-color: var(--hsmz-navy-5);
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-choice-select__option.is-selected,
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-choice-select__option.is-selected:hover {
  border-color: transparent;
  color: var(--hsmz-coral);
  background-color: var(--hsmz-coral-5);
  box-shadow: none;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-choice-select__radio {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-choice-select__radio::after {
  width: 8px;
  height: 8px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__fields .hs-form-field > label:not(.hs-error-msg),
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__fields .hs-form-field > legend {
  margin-bottom: 6px !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__fields .hs-input:not([type="checkbox"]):not([type="radio"]) {
  height: 44px !important;
  min-height: 44px !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  font-size: 13px !important;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__fields textarea.hs-input:not([type="checkbox"]):not([type="radio"]) {
  height: 96px !important;
  min-height: 96px !important;
  padding: 12px !important;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .legal-consent-container {
  font-size: 11px;
  line-height: 16px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__navigation {
  min-height: 44px;
  flex-wrap: wrap;
  gap: 10px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__nav-start,
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__nav-actions {
  min-width: 0;
  flex: 1 1 120px;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__nav-actions {
  margin-left: 0;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__next,
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__previous,
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs_submit .actions input.hs-button,
.hs-multistep--compact form.hs-form.is-multistep.is-compact .hs_submit .actions button.hs-button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  font-size: 13px !important;
}

.hs-multistep--compact form.hs-form.is-multistep.is-compact > .hs-multistep__navigation.is-detached {
  padding-top: 24px;
}

/* Sur mobile, les étapes compactes repassent sur une seule colonne. */
@media (max-width: 640px) {
  .hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__step[data-step="1"] .hs-multistep__fields,
  .hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__step[data-step="2"] .hs-multistep__fields,
  .hs-multistep--compact form.hs-form.is-multistep.is-compact .hs-multistep__step[data-step="1"] .hs-choice-select {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------
   Mouvement réduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  form.hs-form.is-multistep *,
  form.hs-form.is-multistep *::before,
  form.hs-form.is-multistep *::after {
    transition: none !important;
  }
}