.screen .step-header{height:45px;margin:0 -1px;padding:0;display:grid;grid-template-columns:70px 1fr 70px;align-items:center}
.screen .step-nav{width:68px;height:30px;padding:0;display:grid;place-items:center;border:0;border-radius:999px;background:#fff;color:#151718;box-shadow:none}
.screen .step-next{justify-self:end}.screen .step-icon{width:15px;height:15px;display:grid;place-items:center;font-size:15px}.screen .step-icon svg{width:15px;height:15px;stroke-width:1.7}
.screen .step-header-spacer{grid-column:3;width:42px;height:42px;justify-self:end}
.screen .steps{display:block;text-align:center;font-size:10px;line-height:1.15;color:#2a2d2e}.screen .step-count{display:block;white-space:nowrap}.screen .steps-line{width:101px;height:2px;margin:7px auto 0;display:flex;gap:0;background:#e0e0e0;border-radius:99px;overflow:hidden}.screen .steps-line i{height:2px;flex:1;border-radius:0;background:transparent}.screen .steps-line i.active{background:#151718}.screen .steps-line i:first-child{border-radius:99px 0 0 99px}.screen .steps-line i:last-child{border-radius:0 99px 99px 0}

/* global journey guide */
/* Option 2 : header sur 2 lignes. Ligne 1 = bouton back (a gauche).
   Ligne 2 = barre de progression, CENTREE sur l'ecran. Aucun chevauchement
   possible entre le back et les labels. */
.screen .global-journey-header{
  position:relative;
  margin:0 -1px 8px;
  padding:6px 0 8px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  overflow:visible;
}
.screen .global-journey-header .step-nav{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  margin-left:4px;
  width:50px!important;
  height:30px!important;
  border-radius:999px!important;
  background:#141414!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  box-shadow:none!important;
}
.screen .global-journey-header .step-back-label,
.screen .global-journey-header .step-back-label svg{color:#fff!important;stroke:#fff!important;}
.screen .global-journey-header .step-back-label svg{width:20px!important;height:20px!important;display:block!important;}
.screen .global-journey-header .step-header-spacer{display:none;}
.journey-guide{
  /* Barre placee A DROITE du back, dans le flux : back + barre forment un bloc
     aligne a gauche (ils bougent ensemble, aucun chevauchement). */
  position:relative;
  flex:0 0 auto;
  z-index:1;
  width:166px;
  max-width:166px;
  display:grid;
  gap:6px;
  justify-items:center;
  pointer-events:none;
}
.journey-guide-track{
  width:154px;
  display:grid;
  grid-template-columns:10px 1fr 10px 1fr 10px;
  align-items:center;
}
.journey-dot{
  position:relative;
  z-index:2;
  width:10px;
  height:10px;
  border:2px solid #d0d0d0;
  border-radius:999px;
  background:#f2f2f2;
  box-sizing:border-box;
}
.journey-dot.is-active,
.journey-dot.is-done{border-color:#101719;background:#101719;}
.journey-guide-line{
  position:relative;
  z-index:1;
  display:block;
  height:2px;
  width:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#101719 0 calc(var(--journey-fill,0) * 100%),#e0e0e0 calc(var(--journey-fill,0) * 100%) 100%);
}
/* Les labels reprennent EXACTEMENT la grille du track (10px 1fr 10px 1fr 10px)
   pour que chaque label soit centre pile sous son point (colonnes 1, 3, 5). */
.journey-guide-labels{
  position:relative;
  width:154px;
  display:grid;
  grid-template-columns:10px 1fr 10px 1fr 10px;
  align-items:start;
}
.journey-guide-label{
  /* Boite de largeur nulle centree sur la colonne du point. Le texte (b) est
     centre par-dessus via translateX(-50%) : centrage fiable sous le point,
     independant de la largeur du texte. */
  position:relative;
  width:0;
  min-width:0;
  justify-self:center;
  height:14px;
  color:#9a9a9a;
  font-size:11px;
  line-height:1.1;
  font-weight:850;
  letter-spacing:0;
}
.journey-guide-label b{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  display:block;
  white-space:nowrap;
  font-weight:inherit;
}
.journey-guide-label:nth-child(1){ grid-column:1; }
.journey-guide-label:nth-child(2){ grid-column:3; }
.journey-guide-label:nth-child(3){ grid-column:5; }
.journey-guide-label.is-active,
.journey-guide-label.is-done{color:#6a6a6a;}
.journey-guide-label.is-active b{color:#101719;}
@media (max-width:390px){
  .journey-guide{width:166px;max-width:166px;}
  .journey-guide-track{width:154px;}
  .journey-guide-labels{width:154px;}
  .journey-guide-label{font-size:10.5px;}
}







/* Filet de securite : AUCUNE ombre sur les boutons back du header de parcours,
   quelle que soit la classe (step-nav / step-previous / selfie-back-button). */
.screen .step-header .step-nav,
.screen .global-journey-header .step-nav,
.screen .step-nav.step-previous,
.screen .step-nav.selfie-back-button{ box-shadow:none!important; }