/* ==========================================================================
   Formulaire de satisfaction — location de toilettes sèches
   Page : /satisfaction-ts/ (id 30073, template0-page)
   Chargé depuis functions.php, conditionnellement à cette page.

   PORTÉE
   Toutes les règles sont préfixées par .form-satisfaction, classe à ajouter
   au conteneur du formulaire (Elementor → Avancé → Classes CSS).
   Les autres formulaires JetFormBuilder du site ne sont pas affectés.

   SPÉCIFICITÉ
   Les titres sont préfixés par #contenuPage, car le thème cible déjà
   « #contenuPage h3.wp-block-heading » : sans l'ID, la règle perdrait.

   Classes JetFormBuilder relevées sur la page en ligne le 31/07/2026.
   ========================================================================== */


.form-satisfaction {
  /* Couleurs reprises de theme-base.css (charte Accueil T0-1) */
  --ts-accent: var(--charteBold-bg-color, #496628);
  --ts-accent-soft: var(--charteOpacity-color, #a8c57250);

  /* Pour basculer sur le vert Toilette Chouette, décommenter : */
  --ts-accent: #0b5f41;
  --ts-accent-soft: rgba(11, 95, 65, .12);
 
}


/* --------------------------------------------------------------------------
   1. LIBELLÉS DE QUESTIONS
   21 px gras sur 36 questions écrasait la hiérarchie : les libellés pesaient
   autant que les titres de section, et rallongeaient beaucoup la page.
   -------------------------------------------------------------------------- */
.form-satisfaction .jet-form-builder__label-text {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  padding-bottom: 8px;
}


/* --------------------------------------------------------------------------
   2. TITRES DE SECTION
   -------------------------------------------------------------------------- */
#contenuPage .form-satisfaction h3.wp-block-heading {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--ts-accent-soft);
}

/* premier titre d'une étape : il ouvre l'écran, il n'a rien à séparer */
#contenuPage .form-satisfaction h3.wp-block-heading:first-child {
  margin-top: 1rem;
  padding-top: 0;
  border-top: 0;
}


/* --------------------------------------------------------------------------
   3. TEXTES D'AIDE
   -------------------------------------------------------------------------- */
.form-satisfaction .jet-form-builder__desc {
  font-size: .9em;
  opacity: .7;
  margin-top: .4em;
}


/* --------------------------------------------------------------------------
   4. ÉCHELLES 1-5 EN LIGNE
   Le sélecteur vise les groupes contenant une option de valeur « 3 » :
   seules les échelles en ont une, les autres radios ont des valeurs texte.
   -------------------------------------------------------------------------- */
.form-satisfaction .jet-form-builder__fields-group.checkradio-wrap:has(input[type="radio"][value="3"]) {
  gap: 0;
  max-width: 440px;
}

.form-satisfaction .jet-form-builder__fields-group.checkradio-wrap:has(input[type="radio"][value="3"]) .radio-wrap {
  flex: 1 1 0;
}


/* --------------------------------------------------------------------------
   5. ZONES CLIQUABLES
   Un chiffre seul est une cible trop petite au doigt : 44 px est le minimum
   recommandé pour une cible tactile.
   -------------------------------------------------------------------------- */
.form-satisfaction .jet-form-builder__field-label.for-radio,
.form-satisfaction .jet-form-builder__field-label.for-checkbox {
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  padding: .3em .5em;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s ease;
}

.form-satisfaction .jet-form-builder__fields-group.checkradio-wrap:has(input[type="radio"][value="3"])
  .jet-form-builder__field-label.for-radio {
  justify-content: center;
  gap: .3em;
}

.form-satisfaction .jet-form-builder__field-label.for-radio:hover,
.form-satisfaction .jet-form-builder__field-label.for-checkbox:hover {
  background-color: var(--ts-accent-soft);
}

.form-satisfaction .jet-form-builder__fields-group.checkradio-wrap {
  padding-top: 10px;
}

/* CASES ET BOUTONS RADIO
   JetFormBuilder masque l'input natif (opacity: 0, position: absolute) et
   dessine un décorateur en span::before. accent-color s'appliquait donc à un
   élément invisible : c'est le décorateur qu'il faut colorer. */

.form-satisfaction input[type="checkbox"],
.form-satisfaction input[type="radio"] {
  accent-color: var(--ts-accent); /* utile si le décorateur est désactivé */
}

/* !important assumé ici : JetFormBuilder injecte ses propres styles de
   décorateur après notre feuille (bleu #0B76EF à l'état coché). */

/* décorateur au repos */
.form-satisfaction label.for-checkbox span::before,
.form-satisfaction label.for-radio span::before {
  border: 2px solid var(--charteMedium-bg-color, #a8c572) !important;
  background-color: #fff !important;
  transition: background-color .15s ease, border-color .15s ease;
}

/* décorateur coché */
.form-satisfaction label.for-checkbox input:checked + span::before,
.form-satisfaction label.for-radio input:checked + span::before {
  background-color: var(--ts-accent) !important;
  border-color: var(--ts-accent) !important;
}

/* la coche ou la pastille centrale, selon le type */
.form-satisfaction label.for-checkbox input:checked + span::after,
.form-satisfaction label.for-radio input:checked + span::after {
  border-color: #fff !important;
  background-color: #fff !important;
}

/* survol du décorateur */
.form-satisfaction label.for-checkbox:hover span::before,
.form-satisfaction label.for-radio:hover span::before {
  border-color: var(--ts-accent);
}


/* --------------------------------------------------------------------------
   6. CURSEUR DE RECOMMANDATION
   Sans repère, « 7 » ne veut rien dire : on affiche les deux bornes.
   Ordre : curseur pleine largeur, puis la ligne de repères dessous.
   -------------------------------------------------------------------------- */
.form-satisfaction .jet-form-builder__field-wrap.range-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em .8em;
  max-width: 100%;
}

/* Le curseur est entièrement redessiné : piste (la ligne) + poignée.
   Sur Chrome et Safari, ::-webkit-slider-thumb n'est appliqué QUE si
   -webkit-appearance vaut none — sans quoi la poignée reste native et nos
   règles sont ignorées. C'est ce qui la rendait visible sur Firefox seulement. */
.form-satisfaction .range-wrap .range-field {
  order: 1;
  flex: 1 1 100%;
  margin: 0;
  height: 26px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* !important nécessaire : sans lui, ces déclarations sont écrasées et le
   curseur devient totalement invisible sur Chrome — appearance:none supprime
   le rendu natif, et rien ne vient le remplacer. Vérifié en direct. */

/* la ligne, sous le curseur */
.form-satisfaction .range-wrap .range-field::-webkit-slider-runnable-track {
  height: 8px !important;
  border-radius: 4px !important;
  background: var(--charteMedium-bg-color, #a8c572) !important;
}

.form-satisfaction .range-wrap .range-field::-moz-range-track {
  height: 8px !important;
  border-radius: 4px !important;
  background: var(--charteMedium-bg-color, #a8c572) !important;
}

/* Firefox colore en plus la portion parcourue. Chrome n'a pas d'équivalent :
   la piste y reste d'une seule couleur, ce n'est pas un oubli. */
.form-satisfaction .range-wrap .range-field::-moz-range-progress {
  height: 8px !important;
  border-radius: 4px !important;
  background: var(--ts-accent) !important;
}

/* la poignée : assez grande pour se voir et s'attraper au doigt.
   margin-top = (hauteur piste − hauteur poignée) / 2, pour la centrer. */
.form-satisfaction .range-wrap .range-field::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  margin-top: -8px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: var(--ts-accent) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35) !important;
  cursor: pointer;
}

.form-satisfaction .range-wrap .range-field::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: var(--ts-accent) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35) !important;
  cursor: pointer;
}

.form-satisfaction .range-wrap::before { content: "0 — pas du tout";  order: 2; }
.form-satisfaction .range-wrap::after  { content: "10 — sans hésiter"; order: 4; }

.form-satisfaction .range-wrap::before,
.form-satisfaction .range-wrap::after {
  font-size: .82em;
  opacity: .6;
}

.form-satisfaction .range-wrap .range-value {
  order: 3;
  margin-inline: auto;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid gray;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--ts-accent);
}


/* --------------------------------------------------------------------------
   7. ZONES DE TEXTE
   150 px × 5 champs facultatifs = 750 px de vide à faire défiler.
   -------------------------------------------------------------------------- */
.form-satisfaction textarea.jet-form-builder__field {
  min-height: 96px;
  height: auto;
}


/* --------------------------------------------------------------------------
   7 bis. COLONNES GUTENBERG DANS LE FORMULAIRE

   JetFormBuilder rend le formulaire hors du pipeline de blocs de WordPress :
   le balisage .wp-block-columns est bien présent, mais la feuille du bloc
   core/columns n'est jamais mise en file d'attente sur cette page. Résultat,
   les colonnes héritent de « flex: 0 1 auto » et se contentent de la largeur
   de leur contenu au lieu de se partager la place.

   S'y ajoute JetStyleManager, qui enveloppe chaque bloc dans un
   div.jet-sm-gb-wrapper. Les éléments flexibles ne sont donc PAS les colonnes
   mais ces wrappers intermédiaires : viser .wp-block-column directement reste
   sans effet. On cible les enfants directs du conteneur, quels qu'ils soient.
   -------------------------------------------------------------------------- */
.form-satisfaction .wp-block-columns {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}

/* On efface le wrapper de la mise en page avec display: contents : il reste
   dans le DOM et garde ses classes, mais ne forme plus de boîte. Les
   .wp-block-column redeviennent donc les enfants flexibles directs du
   conteneur — et les largeurs réglées dans l'éditeur, posées en style inline
   sur ces colonnes, retrouvent leur effet.

   Contrepartie à connaître : un fond, une bordure ou une marge appliqués au
   wrapper via JetStyleManager ne s'afficheraient plus. Styler la colonne
   elle-même, pas son enveloppe. */
.form-satisfaction .wp-block-columns > .jet-sm-gb-wrapper {
  display: contents;
}

/* comportement WordPress natif, rétabli sur la colonne */
.form-satisfaction .wp-block-column {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;          /* sans ça, un champ large empêche la colonne de rétrécir */
  word-break: break-word;
}

/* une colonne dont tu as fixé la largeur dans l'éditeur la conserve :
   son flex-basis en style inline l'emporte sur la règle ci-dessus, et
   flex-grow: 0 l'empêche d'absorber l'espace restant. */
.form-satisfaction .wp-block-column[style*="flex-basis"] {
  flex-grow: 0;
}

/* empilement sur petit écran — seuil WordPress */
@media (max-width: 781px) {
  .form-satisfaction .wp-block-columns {
    flex-wrap: wrap;
    gap: 0;
  }

  .form-satisfaction .wp-block-column {
    flex-basis: 100% !important;
    flex-grow: 1;
  }
}


/* --------------------------------------------------------------------------
   8. JAUGE DE PROGRESSION
   Seule l'étape en cours est mise en avant : une jauge où tout brille
   ne renseigne sur rien.
   -------------------------------------------------------------------------- */
.form-satisfaction .jet-form-builder-progress-pages {
  margin: 2rem 0 2.5rem;
}

/* JetFormBuilder colore la jauge avec ses propres sélecteurs, préfixés par
   .jfb-progress-type--default : un turquoise #34D7A1 pour l'étape en cours
   et un bleu #617BE5 pour les étapes franchies. Aucun des deux n'est charté.
   On reprend exactement leur structure de sélecteur, précédée de notre classe :
   la spécificité passe devant sans recourir à !important. */

/* étape à venir : cercle vide mais bien dessiné.
   La bordure translucide de la version précédente le rendait invisible :
   on prend le vert moyen de la charte, opaque, et le chiffre en vert foncé. */
.form-satisfaction .jfb-progress-type--default
  .jet-form-builder-progress-pages__item--circle {
  background-color: #fff;
  border: 2px solid var(--charteMedium-bg-color, #a8c572);
  color: var(--ts-accent);
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease;
}

/* les libellés d'étape héritaient d'une police et d'une couleur hors charte */
.form-satisfaction .jfb-progress-type--default
  .jet-form-builder-progress-pages__item--label {
  font-family: var(--font-body);
  font-size: .82em;
  font-weight: 400;
  line-height: 1.25;
  color: var(--charteText-grey-color, #3b3b3b);
  opacity: .55;
}

/* étape en cours : pleine, dans la couleur de la charte */
.form-satisfaction .jfb-progress-type--default
  .jet-form-builder-progress-pages__item--wrapper.active-page
  .jet-form-builder-progress-pages__item--circle {
  background-color: var(--ts-accent);
  border: 2px solid var(--ts-accent);
  color: #fff;
}

.form-satisfaction .jfb-progress-type--default
  .jet-form-builder-progress-pages__item--wrapper.active-page {
  color: var(--ts-accent);
}

.form-satisfaction .jfb-progress-type--default
  .jet-form-builder-progress-pages__item--wrapper.active-page
  .jet-form-builder-progress-pages__item--label {
  opacity: 1;
  font-weight: 600;
  color: var(--ts-accent);
}

/* étape franchie : cercle plein mais atténué, pour la distinguer de l'étape en cours */
.form-satisfaction .jfb-progress-type--default
  .jet-form-builder-progress-pages__item--wrapper.passed-page
  .jet-form-builder-progress-pages__item--circle {
  background-color: var(--charteMedium-bg-color, #a8c572);
  border: 2px solid var(--charteMedium-bg-color, #a8c572);
  color: #fff;
}

/* traits de liaison : gris par défaut, verts une fois l'étape franchie */
.form-satisfaction .jfb-progress-type--default
  .jet-form-builder-progress-pages__separator {
  background: var(--ts-accent-soft);
}

.form-satisfaction .jfb-progress-type--default
  .jet-form-builder-progress-pages__item--wrapper.active-page
  .jet-form-builder-progress-pages__item + .jet-form-builder-progress-pages__separator,
.form-satisfaction .jfb-progress-type--default
  .jet-form-builder-progress-pages__item--wrapper.passed-page
  .jet-form-builder-progress-pages__item + .jet-form-builder-progress-pages__separator {
  background-color: var(--ts-accent);
  height: 3px;
}


/* --------------------------------------------------------------------------
   9. BOUTONS DE NAVIGATION ET D'ENVOI
   « Continuer » est l'action principale, « Retour » reste discret :
   deux boutons de même poids font hésiter.
   -------------------------------------------------------------------------- */
.form-satisfaction .jet-form-builder__next-page,
.form-satisfaction .jet-form-builder__prev-page,
.form-satisfaction .jet-form-builder__submit {
  min-height: 50px;
  padding-inline: 1.8em;
  border-radius: 6px;
  font-size: 1.02em;
  cursor: pointer;
  /* bordure de même épaisseur partout, même quand elle est invisible :
     sans ça, les boutons n'ont pas la même hauteur et sautent au survol */
  border: 2px solid transparent;
  transform: none;
}

/* CE QUI FAISAIT BOUGER LES BOUTONS
   Une règle du kit Elementor applique « border-style: none » au survol.
   Nos boutons ayant une bordure de 2 px, ils perdaient 4 px de large et de
   haut en un instant : d'où le sursaut. On verrouille donc la bordure dans
   les deux états, plutôt que de neutraliser un transform qui n'existait pas. */
.form-satisfaction .jet-form-builder__next-page,
.form-satisfaction .jet-form-builder__next-page:hover,
.form-satisfaction .jet-form-builder__next-page:focus,
.form-satisfaction .jet-form-builder__prev-page,
.form-satisfaction .jet-form-builder__prev-page:hover,
.form-satisfaction .jet-form-builder__prev-page:focus,
.form-satisfaction .jet-form-builder__submit,
.form-satisfaction .jet-form-builder__submit:hover,
.form-satisfaction .jet-form-builder__submit:focus {
  border-style: solid !important;
  border-width: 2px !important;
  transform: none !important;
  top: 0 !important;
  margin-top: 0;
  margin-bottom: 0;
}

/* la bordure reste invisible sur les boutons pleins : elle ne sert
   qu'à réserver la place, pour que rien ne bouge */
.form-satisfaction .jet-form-builder__next-page,
.form-satisfaction .jet-form-builder__next-page:hover,
.form-satisfaction .jet-form-builder__submit,
.form-satisfaction .jet-form-builder__submit:hover {
  border-color: transparent !important;
}

/* « Retour » héritait d'un texte blanc sur fond transparent : illisible sur
   le fond clair de la page. Texte et bordure dans la couleur d'accent. */
.form-satisfaction .jet-form-builder__prev-page {
  background: transparent;
  color: var(--ts-accent);
  border: 2px solid var(--ts-accent);
  font-weight: 600;
  opacity: 1;
  order: -1;               /* Retour toujours à gauche de Continuer */
  margin-right: .8em;
}

.form-satisfaction .jet-form-builder__prev-page:hover,
.form-satisfaction .jet-form-builder__prev-page:focus {
  background: var(--ts-accent);
  color: #fff;
  border-color: var(--ts-accent);
}


/* --------------------------------------------------------------------------
   10. MOBILE
   La majorité des clientes répondront depuis leur téléphone.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {

  .form-satisfaction .jet-form-builder__label-text { font-size: 16px; }

  #contenuPage .form-satisfaction h3.wp-block-heading {
    font-size: 1.35em;
    margin-top: 2.2rem;
    padding-top: 1.1rem;
  }

  .form-satisfaction .jet-form-builder__fields-group.checkradio-wrap:has(input[type="radio"][value="3"]),
  .form-satisfaction .jet-form-builder__field-wrap.range-wrap {
    max-width: none;
  }

  /* les listes déroulantes à 50 % deviennent trop étroites */
  .form-satisfaction .jet-form-builder__field.select-field,
  .form-satisfaction .jet-form-builder__field-wrap select {
    width: 100% !important;
    max-width: none !important;
  }

  /* JAUGE SUR MOBILE
     Cinq libellés ne tiennent pas côte à côte, et même le seul libellé actif
     déborde de son cercle. On les masque tous : le nom de l'étape est déjà
     donné par le titre de section juste en dessous. La jauge ne sert plus
     qu'à situer la progression — cinq pastilles compactes suffisent. */
  .form-satisfaction .jfb-progress-type--default
    .jet-form-builder-progress-pages__item--label {
    display: none !important;
  }

  /* La jauge est en flex-wrap: wrap : dès que la place manque, les étapes
     passent à la ligne et l'ensemble part de travers. On l'interdit, et on
     autorise les blocs à se comprimer — chaque étape est en min-width: auto,
     ce qui l'empêche de descendre sous la taille de son contenu. */
  .form-satisfaction .jet-form-builder-progress-pages {
    flex-wrap: nowrap !important;
    align-items: center;
    margin: 1.2rem 0 1.8rem;
  }

  .form-satisfaction .jfb-progress-type--default
    .jet-form-builder-progress-pages__item--wrapper {
    min-width: 0 !important;
  }

  .form-satisfaction .jfb-progress-type--default
    .jet-form-builder-progress-pages__item {
    min-width: 0;
  }

  .form-satisfaction .jfb-progress-type--default
    .jet-form-builder-progress-pages__item--circle {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    flex: 0 0 28px;
    font-size: .8em;
    border-width: 2px !important;
  }

  /* les traits de liaison se réduisent en premier, jusqu'à presque rien */
  .form-satisfaction .jfb-progress-type--default
    .jet-form-builder-progress-pages__separator {
    height: 2px !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    margin-inline: 5px;
  }
}


/* --------------------------------------------------------------------------
   11. TRÈS PETITS ÉCRANS
   En dessous de 400 px, on gagne encore quelques pixels sur les pastilles.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {

  .form-satisfaction .jfb-progress-type--default
    .jet-form-builder-progress-pages__item--circle {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    flex: 0 0 24px;
    font-size: .72em;
  }

  .form-satisfaction .jfb-progress-type--default
    .jet-form-builder-progress-pages__separator {
    margin-inline: 3px;
  }

  /* boutons pleine largeur, plus faciles à viser */
  .form-satisfaction .jet-form-builder__next-page,
  .form-satisfaction .jet-form-builder__prev-page,
  .form-satisfaction .jet-form-builder__submit {
    width: 100%;
    margin-right: 0;
    margin-bottom: .6em;
  }
}