.elementor-35 .elementor-element.elementor-element-d4e757d{margin:48px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}/* Start custom CSS for shortcode, class: .elementor-element-d4e757d */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   MANA Plus — habillage du formulaire Gravity Forms #2
   Portée limitée à #gform_wrapper_2.
   ============================================================ */
#gform_wrapper_2 {
  --mana-pink: #C52A59;        /* rose principal (boutons, accents)   */
  --mana-red: #AB053E;         /* rouge foncé (état actif/sélectionné)*/
  --mana-red-soft: rgba(171, 5, 62, 0.30); /* rouge atténué (étape faite) */
  --mana-text: #000000;        /* texte principal                     */
  --mana-muted: #525252;       /* descriptions                        */
  --mana-placeholder: #7D7D7D; /* placeholders, « par utilisateur »   */
  --mana-border: #D0D0D0;      /* bordure des cartes                  */
  --mana-divider: #C4C4C4;     /* séparateurs                         */
  --mana-track: #E2E2E2;       /* barre d'étape inactive              */
  --mana-radius-input: 6px;
  --mana-radius-card: 14px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--mana-text);
  max-width: 480px;
  margin: 0 auto;
}

#gform_wrapper_2 * { font-family: inherit; box-sizing: border-box; }

/* ---------- Libellés ---------- */
#gform_wrapper_2 .gfield_label,
#gform_wrapper_2 .gfield_label.gform-field-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--mana-text);
  margin-bottom: 8px;
}
#gform_wrapper_2 .gfield_required { color: var(--mana-pink); margin-left: 2px; }
#gform_wrapper_2 .gform_required_legend { display: none; } /* « * indique les champs… » */

/* ---------- En-têtes de section ---------- */
#gform_wrapper_2 .gsection,
#gform_wrapper_2 .gfield--type-section {
  border: none;
  margin: 12px 0 -4px;   /* respiration avant chaque section (s'ajoute au row-gap) */
  padding: 0;
}
#gform_wrapper_2 .gform_fields > .gfield--type-section:first-child { margin-top: 0; }
#gform_wrapper_2 .gsection_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mana-text);
}

/* ---------- Champs texte / email / select / mot de passe ----------
   Champs blancs sans bordure (look maquette) ; le focus est signalé
   par un anneau rose. Le reset de bordure est limité aux champs texte
   pour ne PAS effacer la bordure des cases/pastilles personnalisées. */
#gform_wrapper_2 input[type="text"],
#gform_wrapper_2 input[type="email"],
#gform_wrapper_2 input[type="password"],
#gform_wrapper_2 input[type="tel"],
#gform_wrapper_2 input[type="number"],
#gform_wrapper_2 select,
#gform_wrapper_2 .gfield_select {
  height: 44px;
  width: 100%;
  background: #ffffff;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--mana-radius-input);
  padding: 0 14px;
  font-size: 15px;
  color: var(--mana-text);
  transition: box-shadow .15s ease;
}
#gform_wrapper_2 select { height: 40px !important; }
#gform_wrapper_2 input::placeholder { color: var(--mana-placeholder); }
#gform_wrapper_2 input:focus,
#gform_wrapper_2 select:focus {
  outline: none;
}
#gform_wrapper_2 .gfield_description,
#gform_wrapper_2 .gsection_description {
  font-size: 14px;
  color: var(--mana-muted);
  margin-top: 6px;
}

/* Mot de passe : deux champs côte à côte */
#gform_wrapper_2 .ginput_container_password { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#gform_wrapper_2 .ginput_container_password .gfield_password_strength { grid-column: 1 / -1; }

/* ============================================================
   « Votre rôle » — cartes radio (2 colonnes)
   ============================================================ */
#gform_wrapper_2 .mana-role-cards .gfield_radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
#gform_wrapper_2 .mana-role-cards .gchoice { position: relative; }
/* La carte EST le <label> : toute la surface devient cliquable. */
#gform_wrapper_2 .mana-role-cards .gchoice label {
  position: relative;
  display: block;
  min-height: 90px;
  border: 1px solid var(--mana-border);
  border-radius: var(--mana-radius-card);
  padding: 16px 16px 16px 44px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mana-text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
#gform_wrapper_2 .mana-role-cards .gchoice:has(.gfield-choice-input:checked) label {
  border-color: var(--mana-red);
  background: rgba(197, 42, 89, 0.10);
}
/* Descriptions injectées sous chaque titre (par index de choix) */
#gform_wrapper_2 .mana-role-cards .gchoice label::after {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mana-muted);
}
#gform_wrapper_2 .gchoice_2_12_0 label::after { content: "Je souhaite accompagner mon enfant."; }
#gform_wrapper_2 .gchoice_2_12_1 label::after { content: "Je suis membre actif d'un comité."; }
#gform_wrapper_2 .gchoice_2_12_2 label::after { content: "J'interviens en milieu scolaire."; }
#gform_wrapper_2 .gchoice_2_12_3 label::after { content: "Professionnel·le ou intervenant·e."; }

/* ============================================================
   « Forfaits disponibles » — cartes de prix (1 colonne)
   ============================================================ */
#gform_wrapper_2 .mana-plan-cards .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#gform_wrapper_2 .mana-plan-cards .gchoice { position: relative; }
#gform_wrapper_2 .mana-plan-cards .gchoice label {
  position: relative;
  display: block;
  min-height: 90px;
  border: 1px solid var(--mana-border);
  border-radius: var(--mana-radius-card);
  padding: 18px 130px 18px 44px;  /* marge droite pour le prix */
  font-size: 14px;
  font-weight: 500;
  color: var(--mana-text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
#gform_wrapper_2 .mana-plan-cards .gchoice:has(.gfield-choice-input:checked) label {
  border-color: var(--mana-red);
  background: rgba(197, 42, 89, 0.10);
}
/* Description sous le titre (injectée par index de choix) */
#gform_wrapper_2 .mana-plan-cards .gchoice label::after {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mana-muted);
  max-width: 230px;
}
#gform_wrapper_2 .gchoice_2_4_0 label::after { content: "Accès complet pour parents et enfants, tous les modules, mises à jour incluses."; }
#gform_wrapper_2 .gchoice_2_4_1 label::after { content: "Réservé aux clients de la Clinique MANA. Même accès complet, prix réduit."; }
#gform_wrapper_2 .gchoice_2_4_2 label::after { content: "Pour les enseignant·e·s, comités et établissements, accès géré par votre organisation."; }
/* Prix (coin supérieur droit, DANS le label => cliquable) */
#gform_wrapper_2 .mana-plan-cards .gchoice label::before {
  position: absolute;
  top: 18px;
  right: 16px;
  text-align: right;
  white-space: pre-line;
  font-size: 16px;
  font-weight: 500;
  color: var(--mana-text);
  line-height: 1.45;
}
#gform_wrapper_2 .gchoice_2_4_0 label::before { content: "249$\A par utilisateur"; }
#gform_wrapper_2 .gchoice_2_4_1 label::before { content: "249$\A par utilisateur"; }
#gform_wrapper_2 .gchoice_2_4_2 label::before { content: "Code requis"; font-size: 13px; }

/* ---------- Pastilles radio personnalisées (rôle + forfaits) ---------- */
#gform_wrapper_2 .mana-role-cards .gfield-choice-input,
#gform_wrapper_2 .mana-plan-cards .gfield-choice-input {
  position: absolute;
  top: 18px;
  left: 16px;
  z-index: 2;            /* au-dessus du label-carte */
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--mana-border);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease;
}
#gform_wrapper_2 .mana-role-cards .gfield-choice-input:checked,
#gform_wrapper_2 .mana-plan-cards .gfield-choice-input:checked {
  border-color: var(--mana-pink);
  box-shadow: inset 0 0 0 4px #fff;
}
/* neutralise le glyphe ::before injecté par le thème GF sur les radios */
#gform_wrapper_2 input[type="radio"]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before {
  background-color: var(--mana-pink);
}
/* marge interne des libellés de choix annulée */
#gform_wrapper_2 .gform-field-label--type-inline { --gf-local-margin-x: 0px; --gf-local-margin-y: 0px; }

/* ============================================================
   Consentement (case à cocher)
   ============================================================ */
#gform_wrapper_2 .mana-consent .gfield_label { display: none; }
#gform_wrapper_2 .gfield--type-consent .gfield_consent_label,
#gform_wrapper_2 .mana-consent label { font-size: 14px; color: var(--mana-text); }
#gform_wrapper_2 .mana-consent a { color: var(--mana-text); text-decoration: underline; }
#gform_wrapper_2 .gfield--type-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--mana-border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  vertical-align: top;
  margin-right: 10px;
  position: relative;
}
#gform_wrapper_2 .gfield--type-consent input[type="checkbox"]:checked {
  background: var(--mana-red);
  border-color: var(--mana-red);
}
#gform_wrapper_2 .gfield--type-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* neutralise le glyphe ::before injecté par le thème GF sur les cases */
#gform_wrapper_2 input[type="checkbox"]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before {
  color: transparent !important;
}

/* ============================================================
   Accès organisation — encadré (code + nom fusionnés)
   ============================================================ */
#gform_wrapper_2 .mana-org-box {
  border: 1px solid var(--mana-divider);
  border-radius: var(--mana-radius-card);
  padding: 20px;
}
#gform_wrapper_2 .mana-org-box + .mana-org-box {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -18px;
}
#gform_wrapper_2 .mana-org-box:has(+ .mana-org-box) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---------- Coupon ---------- */
#gform_wrapper_2 .ginput_container_coupon { display: flex; gap: 10px; flex-wrap: wrap; }
#gform_wrapper_2 .gf_coupon_code { flex: 1; min-width: 200px; }
#gform_wrapper_2 .ginput_container_coupon input[type="button"],
#gform_wrapper_2 .gf_coupon_button {
  height: 44px;
  border: none;
  border-radius: var(--mana-radius-input);
  background: var(--mana-pink);
  color: #fff;
  padding: 0 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
#gform_wrapper_2 .gf_coupon_button:hover { background: var(--mana-red); }
#gform_wrapper_2 .gf_coupon_button:disabled { opacity: .5; cursor: default; }
/* Coupon appliqué (remplace le tableau brut de GF) */
#gform_wrapper_2 [id^="gf_coupon_info"] { width: 100%; margin-top: 12px; }
#gform_wrapper_2 [id^="gf_coupon_info"] table { width: 100%; border-collapse: collapse; }
#gform_wrapper_2 [id^="gf_coupon_info"] td {
  border: none;
  padding: 12px 16px;
  background: rgba(197, 42, 89, 0.08);
  font-size: 14px;
  color: var(--mana-text);
  vertical-align: middle;
}
#gform_wrapper_2 [id^="gf_coupon_info"] tr td:first-child { border-radius: 8px 0 0 8px; }
#gform_wrapper_2 [id^="gf_coupon_info"] tr td:last-child {
  border-radius: 0 8px 8px 0;
  text-align: right;
  font-weight: 600;
  color: var(--mana-red);
  white-space: nowrap;
}
#gform_wrapper_2 [id^="gf_coupon_info"] a { color: var(--mana-pink); text-decoration: none; font-weight: 500; margin-right: 8px; }
#gform_wrapper_2 [id^="gf_coupon_info"] a:hover { text-decoration: underline; }

/* ============================================================
   Total
   ============================================================ */
#gform_wrapper_2 .mana-total .ginput_total { font-size: 20px; font-weight: 600; color: var(--mana-text); border: none; padding: 0; }
#gform_wrapper_2 .gfield--type-total input { background: transparent !important; }

/* ============================================================
   Boutons de navigation (Continuer / Activer / Précédent)
   ============================================================ */
#gform_wrapper_2 .gform_page_footer,
#gform_wrapper_2 .gform_footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
#gform_wrapper_2 .gform_next_button,
#gform_wrapper_2 .gform_button,
#gform_wrapper_2 input[type="submit"].gform_button {
  background: var(--mana-pink);
  color: #fff;
  border: none;
  border-radius: 25px;
  height: 50px;
  padding: 0 36px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease;
}
#gform_wrapper_2 .gform_next_button::after,
#gform_wrapper_2 .gform_button::after { content: " →"; }
#gform_wrapper_2 .gform_next_button:hover,
#gform_wrapper_2 .gform_button:hover { background: var(--mana-red); }
/* Bouton « Précédent / Retour à mon profil » : style lien, sous le bouton principal */
#gform_wrapper_2 .gform_previous_button {
  background: none;
  border: none;
  color: var(--mana-text);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  padding: 4px;
  order: 2;
}

/* ============================================================
   Indicateur d'étapes (Profil / Abonnement / Paiement)
   Style « onglets » : barre supérieure + libellé centré.
   S'adapte automatiquement au nombre de pages du formulaire.
   ============================================================ */
#gform_wrapper_2 .gf_progressbar_wrapper,
#gform_wrapper_2 .gf_page_steps {
  display: flex;
  gap: 14px;
  margin: 0 0 30px;
  padding: 0;
  border: none;
  background: none;
}
#gform_wrapper_2 .gf_step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;     /* libellé centré sous la barre */
  gap: 12px;
  margin: 0;
  padding: 14px 0 0;
  position: relative;
  opacity: 1;              /* GF grise les étapes inactives : on annule */
}
/* barre supérieure (segment d'onglet) */
#gform_wrapper_2 .gf_step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 3px;
  background: var(--mana-track);          /* étape à venir */
}
#gform_wrapper_2 .gf_step_completed::before { background: var(--mana-red-soft); } /* étape faite (rouge atténué) */
#gform_wrapper_2 .gf_step_active::before    { background: var(--mana-red); height: 5px; } /* étape active (rouge plein) */
/* on masque les pastilles numérotées par défaut */
#gform_wrapper_2 .gf_step_number { display: none; }
/* libellés */
#gform_wrapper_2 .gf_step_label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mana-placeholder);         /* étape à venir */
}
#gform_wrapper_2 .gf_step_completed .gf_step_label { color: var(--mana-muted); }   /* étape faite : gris foncé + ✓ */
#gform_wrapper_2 .gf_step_active .gf_step_label    { color: var(--mana-red); font-weight: 600; } /* étape active : rouge */
/* coche (cercle + ✓) après le libellé de l'étape complétée */
#gform_wrapper_2 .gf_step_completed .gf_step_label::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.4 4.6-5'/%3E%3C/svg%3E");
}
/* (mode pourcentage éventuel) */
#gform_wrapper_2 .gf_progressbar_title { display: none; }

/* ============================================================
   Validation
   ============================================================ */
#gform_wrapper_2 .gfield_error input,
#gform_wrapper_2 .gfield_error select { box-shadow: 0 0 0 2px var(--mana-pink) !important; }
#gform_wrapper_2 .gfield_validation_message,
#gform_wrapper_2 .validation_message { color: var(--mana-pink); font-size: 13px; }

/* ============================================================
   Espacement général des champs
   ============================================================ */
#gform_wrapper_2 .gform_fields {
  row-gap: 18px !important;
  column-gap: 16px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 540px) {
  #gform_wrapper_2 .mana-role-cards .gfield_radio { grid-template-columns: 1fr; }
  #gform_wrapper_2 .ginput_container_password { grid-template-columns: 1fr; }
}

#gform_wrapper_2 input {
    box-shadow: none!important;
}/* End custom CSS */