/*
 * PiloteCSE – ODJ – Progression Forminator stabilisée
 * Version: 1.5.6
 * Package plugin: 1.6.11.13
 *
 * Objectifs :
 * - conserver l’indicateur natif Forminator ;
 * - éviter le doublonnage des points observé en 1.6.11.4 ;
 * - rendre les points/traits lisibles côté admin et côté adhérent ;
 * - afficher un repère de navigation avec le titre de la section active ;
 * - compacter l’espace au-dessus des points ;
 * - différencier visuellement le repère de navigation des cartes de contenu ;
 * - aligner le repère et les points sur le bord réel de la carte ODJ active ;
 * - v1.5.5 : intégrer la correction validée en console : largeur 103% + marge gauche -14px sur le repère.
 */

/* Variables locales */
:is(#forminator-module-2426, #forminator-module-6561),
#forminator-module-147,
form.pcse-odj-form,
.pcse-odj-form{
  --pcse-odj-blue: #087cad;
  --pcse-odj-blue-dark: #005f8f;
  --pcse-odj-muted: #747b73;
  --pcse-odj-line: #8f9690;
  --pcse-odj-white: #ffffff;
  --pcse-odj-border: #cfe2f3;
  --pcse-odj-soft: #f5f9fd;
}

/* Compaction de la zone située entre le bloc d’introduction ODJ et les points.
   Le grand espace observé provenait surtout des marges hautes Forminator et
   de l'espace conservé par le bloc d’introduction WordPress. */
.pcse-odj-intro{
  margin-bottom: 8px !important;
}

:is(#forminator-module-2426, #forminator-module-6561).forminator-ui,
#forminator-module-147.forminator-ui,
form.pcse-odj-form.forminator-ui,
.pcse-odj-form.forminator-ui{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination,
#forminator-module-147 .forminator-pagination,
form.pcse-odj-form .forminator-pagination,
.pcse-odj-form .forminator-pagination{
  margin-top: -30px !important;
  padding-top: 0 !important;
}

@media (max-width: 900px){
  :is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination,
  #forminator-module-147 .forminator-pagination,
  form.pcse-odj-form .forminator-pagination,
  .pcse-odj-form .forminator-pagination{
    margin-top: -18px !important;
  }
}

/* Remettre la zone de progression dans le flux normal. */
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps,
#forminator-module-147 .forminator-pagination-steps,
form.pcse-odj-form .forminator-pagination-steps,
.pcse-odj-form .forminator-pagination-steps,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-progress,
#forminator-module-147 .forminator-progress,
form.pcse-odj-form .forminator-progress,
.pcse-odj-form .forminator-progress{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 22px !important;
  max-height: none !important;
  overflow: visible !important;
}

:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps,
#forminator-module-147 .forminator-pagination-steps,
form.pcse-odj-form .forminator-pagination-steps,
.pcse-odj-form .forminator-pagination-steps{
  align-items: center !important;
  width: 100% !important;
  margin: 4px 0 8px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Les traits entre les points. Selon les versions Forminator, le trait est
   parfois porté par .forminator-break, parfois par un pseudo-élément. */
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-break,
#forminator-module-147 .forminator-pagination-steps .forminator-break,
form.pcse-odj-form .forminator-pagination-steps .forminator-break,
.pcse-odj-form .forminator-pagination-steps .forminator-break{
  display: block !important;
  flex: 1 1 auto !important;
  height: 2px !important;
  min-width: 16px !important;
  background: var(--pcse-odj-line) !important;
  border: 0 !important;
  opacity: .75 !important;
  visibility: visible !important;
}

:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-break::before,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-break::after,
#forminator-module-147 .forminator-pagination-steps .forminator-break::before,
#forminator-module-147 .forminator-pagination-steps .forminator-break::after,
form.pcse-odj-form .forminator-pagination-steps .forminator-break::before,
form.pcse-odj-form .forminator-pagination-steps .forminator-break::after,
.pcse-odj-form .forminator-pagination-steps .forminator-break::before,
.pcse-odj-form .forminator-pagination-steps .forminator-break::after{
  background: var(--pcse-odj-line) !important;
  border-color: var(--pcse-odj-line) !important;
  opacity: .75 !important;
  visibility: visible !important;
}

/* Les étapes. On ne transforme plus span:first-child en point : c’est ce qui
   produisait les doubles points. Un éventuel point sans classe est marqué par
   le JS avec .pcse-odj-dot-fallback. */
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step,
#forminator-module-147 .forminator-pagination-steps .forminator-step,
form.pcse-odj-form .forminator-pagination-steps .forminator-step,
.pcse-odj-form .forminator-pagination-steps .forminator-step{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  color: var(--pcse-odj-muted) !important;
  background: transparent !important;
}

:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step-dot,
#forminator-module-147 .forminator-pagination-steps .forminator-step-dot,
form.pcse-odj-form .forminator-pagination-steps .forminator-step-dot,
.pcse-odj-form .forminator-pagination-steps .forminator-step-dot,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .pcse-odj-dot-fallback,
#forminator-module-147 .forminator-pagination-steps .pcse-odj-dot-fallback,
form.pcse-odj-form .forminator-pagination-steps .pcse-odj-dot-fallback,
.pcse-odj-form .forminator-pagination-steps .pcse-odj-dot-fallback{
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  border-radius: 999px !important;
  background: var(--pcse-odj-muted) !important;
  border: 0 !important;
  box-shadow: 0 0 0 3px var(--pcse-odj-white) !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
}

/* Étape courante / étapes actives. On couvre plusieurs noms de classes
   utilisés selon les versions de Forminator. */
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-dot,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step.forminator-active .forminator-step-dot,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-current .forminator-step-dot,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-active .forminator-step-dot,
#forminator-module-147 .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-dot,
#forminator-module-147 .forminator-pagination-steps .forminator-step.forminator-active .forminator-step-dot,
#forminator-module-147 .forminator-pagination-steps .forminator-current .forminator-step-dot,
#forminator-module-147 .forminator-pagination-steps .forminator-active .forminator-step-dot,
form.pcse-odj-form .forminator-pagination-steps .forminator-current .forminator-step-dot,
form.pcse-odj-form .forminator-pagination-steps .forminator-active .forminator-step-dot,
.pcse-odj-form .forminator-pagination-steps .forminator-current .forminator-step-dot,
.pcse-odj-form .forminator-pagination-steps .forminator-active .forminator-step-dot,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step.forminator-current .pcse-odj-dot-fallback,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step.forminator-active .pcse-odj-dot-fallback,
#forminator-module-147 .forminator-pagination-steps .forminator-step.forminator-current .pcse-odj-dot-fallback,
#forminator-module-147 .forminator-pagination-steps .forminator-step.forminator-active .pcse-odj-dot-fallback,
form.pcse-odj-form .forminator-pagination-steps .forminator-current .pcse-odj-dot-fallback,
form.pcse-odj-form .forminator-pagination-steps .forminator-active .pcse-odj-dot-fallback,
.pcse-odj-form .forminator-pagination-steps .forminator-current .pcse-odj-dot-fallback,
.pcse-odj-form .forminator-pagination-steps .forminator-active .pcse-odj-dot-fallback{
  background: var(--pcse-odj-blue) !important;
  box-shadow: 0 0 0 3px var(--pcse-odj-white), 0 0 0 5px rgba(8,124,173,.16) !important;
}

/* Libellés natifs éventuels : on évite le blanc sur blanc sans forcer une
   ligne de 20 titres illisible. Le repère PilotCSE ci-dessous porte le titre
   de la section active ; chaque point reçoit aussi un title/aria-label via JS. */
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step-label,
#forminator-module-147 .forminator-pagination-steps .forminator-step-label,
form.pcse-odj-form .forminator-pagination-steps .forminator-step-label,
.pcse-odj-form .forminator-pagination-steps .forminator-step-label{
  color: var(--pcse-odj-muted) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 700 !important;
}

/* Alignement dynamique : le JS pose ces classes/variables pour que
   l’indicateur et le repère aient la même largeur que la carte de section
   active, et non la largeur interne parfois décalée de Forminator. */
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps.pcse-odj-progress-aligned,
#forminator-module-147 .forminator-pagination-steps.pcse-odj-progress-aligned,
form.pcse-odj-form .forminator-pagination-steps.pcse-odj-progress-aligned,
.pcse-odj-form .forminator-pagination-steps.pcse-odj-progress-aligned,
.pcse-odj-progress-caption.pcse-odj-progress-aligned{
  /* v1.5.5 : la mesure dynamique reste calée sur le contenu interne Forminator.
     D’après les tests visuels, le bord externe réel de la carte ODJ est encore
     environ 15px plus à gauche que le correctif précédent. On applique donc
     un retrait total de 30px et on compense la largeur pour conserver le bord droit. */
  width: calc(var(--pcse-odj-align-width, 100%) + 60px) !important;
  margin-left: calc(var(--pcse-odj-align-left, 0px) - 30px) !important;
  margin-right: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Repère de navigation ajouté sous l’indicateur.
   Volontairement différencié des cartes : bandeau compact, fond très léger,
   angle plus sobre, pas d’effet “carte question”. */
.pcse-odj-progress-caption{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 103%;
  box-sizing: border-box;
  margin: 14px 14px 14px -14px !important;
  padding: 7px 12px !important;
  border: 0 !important;
  border-left: 5px solid var(--pcse-odj-blue, #087cad) !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg, rgba(8,124,173,.12) 0%, rgba(8,124,173,.045) 55%, rgba(8,124,173,.018) 100%) !important;
  color: #183b56;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: none !important;
}

/* v1.5.5 — Correction validée via DevTools :
   le repère de navigation doit légèrement sortir du conteneur interne Forminator
   pour s'aligner visuellement sur le bord externe de la carte ODJ.
   On cible aussi l'état .pcse-odj-progress-aligned pour éviter que le calcul JS
   ne reprenne le dessus sur la valeur testée manuellement. */
.pcse-odj-progress-caption.pcse-odj-progress-aligned{
  width: 103% !important;
  margin: 14px 14px 14px -14px !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.pcse-odj-progress-caption__label{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pcse-odj-blue-dark, #005f8f);
  white-space: nowrap;
}

.pcse-odj-progress-caption__label::after{
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-left: 10px;
  background: rgba(8,124,173,.28);
}

.pcse-odj-progress-caption__title{
  font-weight: 800;
  color: #12324a;
}


.pcse-odj-progress-caption__link{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(8,124,173,.30);
  border-radius: 999px;
  background: #fff;
  color: var(--pcse-odj-blue-dark, #005f8f) !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none !important;
  white-space: nowrap;
}

.pcse-odj-progress-caption__link:hover,
.pcse-odj-progress-caption__link:focus{
  border-color: var(--pcse-odj-blue, #087cad);
  background: #f8fcff;
  color: var(--pcse-odj-blue, #087cad) !important;
  text-decoration: none !important;
}

.pcse-odj-progress-caption__link[hidden]{
  display: none !important;
}

/* Titre au survol d’un point : utile sans rendre la ligne illisible. */
.pcse-odj-form .forminator-pagination-steps .forminator-step[data-pcse-title]::after,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step[data-pcse-title]::after,
#forminator-module-147 .forminator-pagination-steps .forminator-step[data-pcse-title]::after{
  content: attr(data-pcse-title);
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  z-index: 10;
  display: none;
  width: max-content;
  max-width: 240px;
  padding: 6px 8px;
  border: 1px solid var(--pcse-odj-border, #cfe2f3);
  border-radius: 10px;
  background: #fff;
  color: #183b56;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  white-space: normal;
}

.pcse-odj-form .forminator-pagination-steps .forminator-step[data-pcse-title]:hover::after,
.pcse-odj-form .forminator-pagination-steps .forminator-step[data-pcse-title]:focus-within::after,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step[data-pcse-title]:hover::after,
:is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step[data-pcse-title]:focus-within::after,
#forminator-module-147 .forminator-pagination-steps .forminator-step[data-pcse-title]:hover::after,
#forminator-module-147 .forminator-pagination-steps .forminator-step[data-pcse-title]:focus-within::after{
  display: block;
}

/* Si Forminator est réglé en « Barre de progression », on garantit aussi un
   rendu lisible de cette barre, sans remplacer le choix fait dans Forminator. */
:is(#forminator-module-2426, #forminator-module-6561) .forminator-progress,
#forminator-module-147 .forminator-progress,
form.pcse-odj-form .forminator-progress,
.pcse-odj-form .forminator-progress{
  margin: 10px 0 10px !important;
  color: var(--pcse-odj-muted) !important;
}

:is(#forminator-module-2426, #forminator-module-6561) .forminator-progress-bar,
#forminator-module-147 .forminator-progress-bar,
form.pcse-odj-form .forminator-progress-bar,
.pcse-odj-form .forminator-progress-bar{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 6px !important;
  background: rgba(8,124,173,.15) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

:is(#forminator-module-2426, #forminator-module-6561) .forminator-progress-bar span,
#forminator-module-147 .forminator-progress-bar span,
form.pcse-odj-form .forminator-progress-bar span,
.pcse-odj-form .forminator-progress-bar span{
  display: block !important;
  min-height: 6px !important;
  background: var(--pcse-odj-blue) !important;
  border-radius: 999px !important;
}

@media (max-width: 700px){
  :is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps,
  #forminator-module-147 .forminator-pagination-steps,
  form.pcse-odj-form .forminator-pagination-steps,
  .pcse-odj-form .forminator-pagination-steps{
    margin: 4px 0 8px !important;
  }

  :is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .forminator-step-dot,
  #forminator-module-147 .forminator-pagination-steps .forminator-step-dot,
  form.pcse-odj-form .forminator-pagination-steps .forminator-step-dot,
  .pcse-odj-form .forminator-pagination-steps .forminator-step-dot,
  :is(#forminator-module-2426, #forminator-module-6561) .forminator-pagination-steps .pcse-odj-dot-fallback,
  #forminator-module-147 .forminator-pagination-steps .pcse-odj-dot-fallback,
  form.pcse-odj-form .forminator-pagination-steps .pcse-odj-dot-fallback,
  .pcse-odj-form .forminator-pagination-steps .pcse-odj-dot-fallback{
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
  }

  .pcse-odj-progress-caption{
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px !important;
    font-size: 13px;
  }

  .pcse-odj-progress-caption__link{
    margin-left: 0;
  }

  .pcse-odj-progress-caption__label::after{
    display: none;
  }
}