/**
 * Sélecteur de profession.
 *
 * Reprend les jetons du thème : $secondary #3A5BA7 pour le texte, $primary
 * #C74D96 pour l'accent, $border-color #BAC2C8, $br-size 8px. Le bouton hérite
 * des classes .btn / .btn--secondary du thème et n'est pas restylé ici.
 */

.cptsmv-choix-profession {
  margin: 0 0 2rem;
}

.cptsmv-choix-profession__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.cptsmv-choix-profession__label {
  color: #3a5ba7;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.cptsmv-choix-profession__select {
  appearance: none;
  background-color: #fff;
  /* Chevron en SVG inline : évite une requête et suit la couleur du thème. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath fill='none' stroke='%233A5BA7' stroke-width='2' d='M1 1l7 7 7-7'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 0.875rem;
  border: 1px solid #bac2c8;
  border-radius: 8px;
  color: #3a5ba7;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  max-width: 100%;
  padding: 0.875rem 3rem 0.875rem 1rem;
  width: 100%;
}

.cptsmv-choix-profession__select:hover {
  border-color: #3a5ba7;
}

.cptsmv-choix-profession__select:focus-visible {
  border-color: #c74d96;
  outline: 2px solid #c74d96;
  outline-offset: 2px;
}

.cptsmv-choix-profession__erreur {
  background-color: #fdeef6;
  border-left: 3px solid #c74d96;
  color: #3a5ba7;
  margin: 0;
  padding: 0.875rem 1rem;
}

/* Le bouton du thème occupe toute la largeur sur mobile, comme le select. */
@media (max-width: 500px) {
  .cptsmv-choix-profession__bouton {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * Formulaires d'adhésion Gravity Forms.
 *
 * Gravity Forms pose la classe déclarée sur le <form>, et la même suffixée de
 * « _wrapper » sur le conteneur : c'est ce dernier qu'on vise. Ses propres
 * règles étant qualifiées par `.gform_wrapper.gravity-theme`, il faut reprendre
 * ces deux classes pour passer devant, sinon rien de ce qui suit ne s'applique.
 *
 * Portée aux six formulaires d'adhésion :
 * les formulaires de contact et de newsletter gardent leur apparence.
 * Jetons repris du thème : $secondary #3A5BA7, $primary #C74D96,
 * $border-color #BAC2C8, $neutral-light #F3F3F3, $emergency #E61D48.
 * ------------------------------------------------------------------------- */

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper {
  color: #3a5ba7;
  /* Un formulaire de soixante questions se lit mal sur toute la largeur du
     conteneur du thème : on le ramène à une colonne de lecture confortable. */
  margin: 0 auto;
  max-width: 46rem;
}

/* L'espacement natif de Gravity Forms - 16px - tasse des questions dont
   plusieurs tiennent sur deux lignes de libellé. */
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_fields {
  grid-row-gap: 1.75rem;
  row-gap: 1.75rem;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield {
  margin: 0;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .ginput_container {
  margin-top: 0;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_description {
  display: block;
  color: #3a5ba7;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 70ch;
  white-space: pre-line;
}

/* --- Fil des étapes --- */

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gf_page_steps {
  border-bottom: 1px solid #bac2c8;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gf_step {
  color: #737373;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  opacity: 1;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gf_step_active {
  color: #c74d96;
  font-weight: 700;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gf_step_number {
  font-variant-numeric: tabular-nums;
  margin-right: 0.375rem;
}

/* --- Champs --- */

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield_label {
  color: #3a5ba7;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.375rem;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield_required {
  color: #c74d96;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield_description {
  color: #737373;
  font-size: 0.875rem;
  line-height: 1.5;
  padding-top: 0.25rem;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper input[type="text"],
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper input[type="email"],
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper input[type="url"],
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper input[type="tel"],
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper select,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper textarea {
  background-color: #fff;
  border: 1px solid #bac2c8;
  border-radius: 8px;
  color: #3a5ba7;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.75rem 1rem;
  width: 100%;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper textarea {
  min-height: 7rem;
  resize: vertical;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper input:hover,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper select:hover,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper textarea:hover {
  border-color: #3a5ba7;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper input:focus-visible,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper select:focus-visible,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper textarea:focus-visible {
  border-color: #c74d96;
  outline: 2px solid #c74d96;
  outline-offset: 2px;
}

/* --- Choix multiples --- */

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield_radio,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield_checkbox {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gchoice {
  align-items: flex-start;
  display: flex;
  gap: 0.625rem;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gchoice input {
  accent-color: #c74d96;
  flex: 0 0 auto;
  margin-top: 0.25rem;
  width: auto;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gchoice label {
  color: #3a5ba7;
  font-size: 1rem;
  line-height: 1.45;
}

/* Les cases de consentement portent un texte long : on l'aère. */
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield--type-checkbox .gchoice label {
  font-size: 0.9375rem;
}

/* --- Rappel de portée en tête d'étape réservée --- */

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .cptsmv-form__portee {
  background-color: #f3f3f3;
  border-left: 3px solid #00aebd;
  color: #3a5ba7;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
  padding: 0.875rem 1rem;
}

/* --- Boutons --- */

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_page_footer {
  border-top: 1px solid #bac2c8;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_button.button,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_next_button.button,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_previous_button.button {
  border: 1px solid #3a5ba7;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.75rem 1.75rem;
  transition: background-color 0.15s ease, color 0.15s ease;
  width: auto;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_button.button,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_next_button.button {
  background-color: #3a5ba7;
  color: #fff;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_button.button:hover,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_next_button.button:hover {
  background-color: #c74d96;
  border-color: #c74d96;
}

/* Le retour en arrière ne doit pas peser autant que l'avancée. */
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_previous_button.button {
  background-color: transparent;
  color: #3a5ba7;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_previous_button.button:hover {
  background-color: #f3f3f3;
}

/* --- Erreurs de validation --- */

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield_error input,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield_error select,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield_error textarea {
  border-color: #e61d48;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gfield_validation_message,
.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .validation_message {
  background-color: transparent;
  border: 0;
  border-left: 3px solid #e61d48;
  color: #e61d48;
  font-size: 0.875rem;
  padding: 0.25rem 0 0.25rem 0.75rem;
}

.gform_wrapper.gravity-theme.cptsmv-adhesion-form_wrapper .gform_validation_errors {
  background-color: #fdeef6;
  border: 0;
  border-left: 3px solid #e61d48;
  border-radius: 0;
  box-shadow: none;
  color: #3a5ba7;
  padding: 1rem 1.25rem;
}

/* --- Confirmation --- */

.gform_confirmation_wrapper .gform_confirmation_message {
  background-color: #f3f3f3;
  border-left: 3px solid #00aebd;
  color: #3a5ba7;
  padding: 1.5rem;
}

/*
 * Remontée de page au clic sur un libellé de case à cocher.
 *
 * Le thème masque la vraie case en la sortant du flux
 * (scss/base/_forms.scss : « position: absolute; left: 0; opacity: .01 »)
 * et dessine la case visible sur le libellé, en ::before. Faute d'ancêtre
 * positionné, ces cases invisibles s'empilent en haut du formulaire : cliquer
 * un libellé situé bas dans la page donne le focus à une case restée tout en
 * haut, et le navigateur y remonte de lui-même. C'est invisible sur un
 * formulaire court, très gênant sur nos formulaires à étapes.
 *
 * Chaque choix devient son propre repère de positionnement : la case reste
 * derrière son libellé, le focus ne déplace plus rien.
 */
.cptsmv-adhesion-form .gchoice,
.cptsmv-adhesion-form .ginput_container_consent {
  position: relative;
}