/* =========================================================================
   ETAPE 3 � "Your personalized selections are ready" (.is-direction-result)
   SOURCE UNIQUE pour le CONTENU de l'ecran.
   Le MENU DU BAS n'est PAS gere ici : il est pilote globalement par
   catalogue.css (position:fixed; bottom:0) comme sur Home / Catalogue /
   Favorites. On se contente d'organiser le contenu au-dessus du menu fixe,
   en laissant l'ecran defiler normalement (padding-bottom global = place du menu).
   ========================================================================= */

/* =========================================================================
   ECRAN DE PREPARATION (shortlist-preparing-screen) : meme correctif que
   l'Etape 3. phone-template.css coupe le scroll (.analysis-loading-screen
   overflow-y:hidden) ; on le reactive et on borne la hauteur au cadre du
   telephone pour pouvoir defiler jusqu'au bas sans etre couvert par le menu.
   ========================================================================= */
#app > .screen.analysis-loading-screen.shortlist-preparing-screen {
  height: var(--prototype-layout-height) !important;   /* cadre du template */
  min-height: 0 !important;
  max-height: var(--prototype-layout-height) !important;
  overflow-y: auto !important;        /* reactive le scroll coupe par le template */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: 24px !important;    /* petit degagement ; plus de note en bas */
  box-sizing: border-box !important;
}
/* ---- Conteneur : flux normal, defilable (on ne combat pas le systeme global) */
#app > .screen.analysis-loading-screen.is-direction-result {
  display: block !important;
  /* La hauteur est geree par phone-template.css (674px, zoom). On ne la combat PAS. */
  overflow-y: auto !important;       /* reactive le scroll coupe par phone-template.css ligne 6 */
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 72px !important;   /* = hauteur du menu fixe, degage la note au scroll */
  box-sizing: border-box !important;
}

/* ---- Titre principal (centre) ------------------------------------------- */
#app > .screen.is-direction-result > h1 {
  margin: 4px 0 8px !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

/* ---- Bloc selfie (ancre de la pastille) --------------------------------- */
#app > .screen.is-direction-result .analysis-photo {
  position: relative !important;
  width: min(100%, 332px) !important;
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
  /* Clippe TOUS les calques (photo + overlay de scan + vignette + canvas) au
     rayon arrondi : sinon l'overlay de scan carre reapparait aux coins. */
  overflow: hidden !important;
  background: #101617 !important;
}
/* Ceinture + bretelles : l'overlay de scan et le canvas heritent aussi du
   rayon, au cas ou un ancetre ne clipperait pas. */
#app > .screen.is-direction-result .analysis-photo .face-scan-visual,
#app > .screen.is-direction-result .analysis-photo .face-landmark-canvas {
  border-radius: 18px !important;
  overflow: hidden !important;
}
#app > .screen.is-direction-result .analysis-photo > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;   /* fallback si pas de focus yeux */
  border-radius: 18px !important;
}
/* =========================================================================
   Recadrage sur les yeux � VIGNETTES / THUMBNAILS UNIQUEMENT.
   IMPORTANT : l'ecran 2 (capture) et l'ecran 3 / ecran d'analyse ne sont PAS
   concernes : le selfie y reste ENTIER et non retouche.
   Chaque regle n'agit que si la classe .has-eye-focus est presente (posee par
   JS quand un centre des yeux est connu). Sinon le cadrage d'origine reste.
   ========================================================================= */
/* Ecran de loading des tryons � portrait circulaire (thumbnail) */
#app .shortlist-preparing-portrait img.has-eye-focus {
  object-position: var(--eye-x, 50%) var(--eye-y, 50%) !important;
}
/* Fallback VTO en attente (vignette affichant le selfie brut) */
#app .suggestion-tryon-image.is-pending.has-eye-focus {
  object-position: var(--eye-x, 50%) var(--eye-y, 50%) !important;
}

/* =========================================================================
   ECRAN 6 � TOP 5 : zoomer les vignettes VTO sur la zone lunettes/yeux.
   Les vignettes utilisaient object-fit:contain -> image entiere -> trop
   dezoomee (on voit le torse/fond). On passe en cover + cadrage haut pour
   remplir la tuile avec le visage et bien voir la monture.
   ========================================================================= */
/* IMPORTANT : l'image VTO (960x1280, ratio 3:4) a quasiment le meme ratio que
   les tuiles -> object-fit:cover ne cree AUCUN debordement, donc ni
   object-position ni transform-origin ne suffisent a viser les yeux.
   Methode fiable en CSS pur, independante de la taille de tuile :
     1) l'image remplit la tuile (cover), yeux a ~--eye-y de la hauteur ;
     2) translateY = (50 - eyeY)% de la HAUTEUR DE L'IMAGE (= hauteur tuile),
        ce qui AMENE les yeux au centre vertical de la tuile ;
     3) scale() zoome autour du centre -> les yeux restent centres.
   translate% etant relatif a la taille de l'element (= tuile), ca marche
   pour la grande comme pour les petites vignettes. */
/* IMPORTANT : le --eye-y capture sur le SELFIE (ecran 1) ne s'applique PAS aux
   images VTO du Top 5 : ces images ont un cadrage serveur different (960x1280,
   les yeux y sont a une hauteur QUI DEPEND de la photo. --vto-eye-y est donc
   mesure DYNAMIQUEMENT par image (MediaPipe via measureEyeFocus) et pose par JS.
   FALLBACK DESACTIVE VOLONTAIREMENT (demande utilisateur) : tant qu'aucune
   mesure n'a reussi, on NE cadre PAS (image telle quelle) pour voir clairement
   quand la mesure marche ou non. Un echec affiche une bordure rouge (debug). */
/* La tuile est PAYSAGE (ratio ~1.62) et l'image PORTRAIT (0.75) : object-fit
   cover cree deja un GROS debordement vertical (~172px). Inutile de zoomer :
   il suffit de piloter object-position:Y avec le --vto-eye-y MESURE pour
   afficher la ligne des yeux au bon endroit. C'est fait pour ca. */
/* La tuile est un GRID avec place-items:center (recommendations.css) : sans
   ceci l'image n'est pas etiree et garde sa taille intrinseque (elle deborde
   la tuile -> on ne voit que le haut). On force l'image a REMPLIR la cellule. */
#app .ai-shortlist-top5-thumb.is-tryon {
  place-items: stretch !important;
}
#app .ai-shortlist-top5-thumb.is-tryon img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  object-fit: cover !important;
  /* Fallback sur : sur un portrait recadre en tuile paysage, les yeux sont
     dans le tiers haut -> 38% evite d'afficher bouche/menton avant la mesure. */
  object-position: 50% 38% !important;
  border-radius: 14px !important;
  transform: none !important;
}
/* Cadrage applique UNIQUEMENT quand la mesure a reussi : la ligne des yeux
   (--vto-eye-y de l'IMAGE) est affichee au CENTRE de la tuile.
   + zoom de 20% centre sur les yeux (transform-origin sur --vto-eye-y) pour
   voir la monture/les yeux d'un peu plus pres. Tuile en overflow:hidden. */
#app .ai-shortlist-top5-thumb.is-tryon img.vto-eye-measured {
  object-position: 50% var(--vto-eye-y, 50%) !important;
  transform-origin: 50% var(--vto-eye-y, 50%) !important;
  transform: scale(1.2) !important;
}
/* DEBUG : mesure echouee -> bordure rouge visible (pas de cadrage devine). */
#app .ai-shortlist-top5-thumb.is-tryon img.vto-eye-failed {
  outline: 3px solid #e5484d !important;
  outline-offset: -3px !important;
}

/* ---- Rangee titre "Criteria" + pastille (chevauche le bas du selfie) ----- */
#app > .screen.is-direction-result .analysis-section-row {
  position: relative !important;
  display: block !important;
  margin: -30px 0 10px !important;
  padding-top: 38px !important;
}
/* Option A : encadre "en-tete de section" (badge dore + kicker + titre). */
#app > .screen.is-direction-result .analysis-criteria-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff, #f4f4f4) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06) !important;
  text-align: left !important;
}
#app > .screen.is-direction-result .analysis-criteria-badge {
  flex: 0 0 auto !important;
  width: 40px !important; height: 40px !important;
  display: grid !important; place-items: center !important;
  border-radius: 12px !important;
  background: #141414 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18) !important;
}
#app > .screen.is-direction-result .analysis-criteria-badge svg { width: 20px !important; height: 20px !important; }
#app > .screen.is-direction-result .analysis-criteria-copy { flex: 1 1 auto !important; min-width: 0 !important; }
#app > .screen.is-direction-result .analysis-criteria-kicker {
  display: block !important;
  font-size: 9.5px !important; font-weight: 800 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: #c08a3e !important;
}
#app > .screen.is-direction-result .analysis-section-title {
  display: block !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.18 !important;
  font-weight: 820 !important;
  color: #221c15 !important;
  white-space: normal !important;
  text-align: left !important;
}
#app > .screen.is-direction-result .analysis-details-trigger {
  position: absolute !important;
  z-index: 4 !important;
  left: 50% !important;
  top: 0 !important;
  transform: translate(-50%, -50%) !important;
  min-height: 36px !important;
  padding: 8px 15px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 999px !important;
  background: #f4f4f4 !important;
  color: #4a4a4a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 16px rgba(17, 24, 25, .18) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#app > .screen.is-direction-result .analysis-details-trigger svg { width: 15px !important; height: 15px !important; }

/* ---- Les 3 cartes : empilees, lisibles ---------------------------------- */
#app > .screen.is-direction-result .analysis-types.recommendation-directions {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 0 8px !important;
}
#app > .screen.is-direction-result .direction-card {
  display: grid !important;
  grid-template-columns: 34px 64px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 11px 14px !important;
  border: 1px solid #b9edcb !important;
  border-radius: 16px !important;
  background: #fbfffc !important;
  text-align: left !important;
}
#app > .screen.is-direction-result .direction-card .analysis-type-icon {
  grid-column: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
}
#app > .screen.is-direction-result .direction-card .analysis-type-icon svg { width: 24px !important; height: 24px !important; }
#app > .screen.is-direction-result .direction-card .analysis-type-copy { display: contents !important; }
#app > .screen.is-direction-result .direction-card .analysis-type-label {
  grid-column: 2 !important;
  align-self: center !important;
  margin: 0 !important;
  color: #77706a !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.05 !important;
  text-align: left !important;
}
#app > .screen.is-direction-result .direction-card .analysis-type-value {
  grid-column: 3 !important;
  align-self: center !important;
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
  color: #151718 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

/* ---- CTA (label reduit, icones sans chevauchement) ---------------------- */
#app > .screen.is-direction-result .analysis-preferences-action {
  position: relative !important;
  display: block !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 0 8px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #111517 !important;
  color: #fff !important;
}
#app > .screen.is-direction-result .analysis-preferences-label {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 62px 0 40px !important;   /* plus d'espace a droite -> texte decale vers la gauche */
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  text-align: center !important;
}
#app > .screen.is-direction-result .analysis-preferences-icon {
  position: absolute !important; left: 15px !important; top: 50% !important;
  transform: translateY(-50%) !important; display: grid !important; place-items: center !important;
}
#app > .screen.is-direction-result .analysis-preferences-arrow {
  position: absolute !important; right: 15px !important; top: 50% !important;
  transform: translateY(-50%) !important; display: grid !important; place-items: center !important;
}
#app > .screen.is-direction-result .analysis-preferences-icon svg,
#app > .screen.is-direction-result .analysis-preferences-arrow svg { width: 18px !important; height: 18px !important; }

/* ---- Note de securite ---------------------------------------------------- */
#app > .screen.is-direction-result .analysis-security {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 9px !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 0 22px !important;   /* petit espace vide pour decoller du menu du bas */
  padding: 9px 14px !important;
  border-radius: 13px !important;
  background: #f2f2f2 !important;
  color: #5c5e60 !important;
  box-sizing: border-box !important;
}
#app > .screen.is-direction-result .analysis-security-icon {
  display: grid !important; place-items: center !important;
  width: 18px !important; height: 18px !important; color: #151718 !important;
}
#app > .screen.is-direction-result .analysis-security-icon svg { width: 16px !important; height: 16px !important; }
#app > .screen.is-direction-result .analysis-security-text {
  font-size: 11px !important; line-height: 1.2 !important; text-align: left !important; white-space: normal !important;
}

/* =========================================================================
   Dialogue "Face analysis summary" (VLM details) : centre, scrollable.
   ========================================================================= */
#app > .analysis-loading-screen.is-direction-result .vlm-details-backdrop {
  position: fixed !important;
  top: 6px !important; right: auto !important; bottom: auto !important; left: 50% !important;
  width: min(100vw, 390px) !important; height: auto !important;
  transform: translateX(-50%) !important; padding: 6px !important; display: block !important; overflow-y: auto !important;
}
#app > .analysis-loading-screen.is-direction-result .vlm-details-modal {
  max-height: calc(100dvh - 12px) !important; overflow-y: auto !important; margin: 0 auto !important;
}
#app > .vlm-details-backdrop {
  position: fixed !important; inset: 0 auto 0 50% !important; width: min(100vw, 390px) !important;
  transform: translateX(-50%) !important; padding: 6px 6px 0 !important; display: grid !important;
  place-items: end center !important; overflow: hidden !important;
}
#app > .vlm-details-backdrop .vlm-details-modal {
  width: 100% !important; max-height: calc(100dvh - 18px) !important; margin: 0 !important; overflow-y: auto !important;
}
#app > .vlm-details-backdrop .vlm-details-modal h2 { font-size: 22px !important; }
#app > .vlm-details-backdrop .vlm-details-lead { font-size: 12px !important; line-height: 1.35 !important; }
#app > .vlm-details-backdrop .vlm-detail-card small { font-size: 11px !important; }
#app > .vlm-details-backdrop .vlm-detail-card b { font-size: 16px !important; }
#app > .vlm-details-backdrop .vlm-detail-card p { font-size: 12.5px !important; line-height: 1.35 !important; }
/* Moins d'espace vide sous le dernier element (la note a ete retiree). */
/* Neutralise l'override recommendations.css (.shortlist-preparing-screen
   min-height:calc(100vh+180px); height:auto; padding-bottom:220px) qui
   cassait le scroll interne : on borne la hauteur au cadre du telephone. */
#app > .screen.analysis-loading-screen.shortlist-preparing-screen {
  min-height: 0 !important;
  height: var(--prototype-layout-height) !important;
  max-height: var(--prototype-layout-height) !important;
  padding-bottom: 24px !important;
}
/* La section interne doit LAISSER COULER son contenu (pas de clip, pas de
   centrage vertical, pas de min-height enorme) pour que l'ecran scrolle. */
#app > .shortlist-preparing-screen .shortlist-preparing {
  overflow: visible !important;      /* etait overflow:hidden -> clippait le bas */
  justify-content: flex-start !important;
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 80px !important;   /* degage le dernier element du menu du bas */
}

/* =========================================================================
   ECRAN 6 � Selections personnalisees (recommendations-screen) :
   reduire l'espace vide sous la derniere carte (Style Stretch), tout en
   gardant la carte depliable et lisible au-dessus du menu du bas fixe.
   ========================================================================= */
#app > .screen.recommendations-screen {
  padding-bottom: 90px !important;   /* = hauteur du menu fixe (au lieu de 150px global) */
}
#app > .screen.recommendations-screen .recommendation-list {
  padding-bottom: 8px !important;    /* plus de gros vide en bas de la liste */
}

/* =========================================================================
   ECRAN 6 � CTA "Explore frame selection" sur chaque carte repliee.
   Deplie la carte (data-recommendation) sans ouvrir le VTO. Masque une fois
   la carte depliee (le Top 5 prend le relais).
   ========================================================================= */
.ai-shortlist-screen .ai-shortlist-explore {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 10px 0 2px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #111517 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.ai-shortlist-screen .ai-shortlist-explore b { font-weight: 800 !important; }
.ai-shortlist-screen .ai-shortlist-explore svg { width: 16px !important; height: 16px !important; }
.ai-shortlist-screen .ai-shortlist-card.is-expanded .ai-shortlist-explore { display: none !important; }

/* =========================================================================
   ECRAN 6 � Afficher l'explication courte de la selection DES l'etat replie
   (le doc la place en deplie, mais on la veut visible sur la carte fermee).
   Neutralise la regle recommendations.css qui la masque en replie.
   ========================================================================= */
/* =========================================================================
   ECRAN 6 � LAYOUT 2 COLONNES UNIFIE des cartes de selection (etat replie).
   Reference : screenshot fourni par l'utilisateur.
     [ colonne gauche ]  photo (avec pastille de rang en overlay)
     [ colonne droite ]  1) macaron vert (en haut)   .recommendation-match
                         2) phrase explicative        .recommendation-role-copy
                         3) bouton "Explore..."       .ai-shortlist-explore
   Objectif : rendu IDENTIQUE sur les 5 cartes + carte plus compacte
   (verticalite reduite vs colonne unique). On surcharge la grille eparpillee.
   ========================================================================= */
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded).recommendation-card,
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded).recommendation-card-1,
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded).recommendation-card-2,
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded).recommendation-card-3,
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded).recommendation-card-4,
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded).recommendation-card-5 {
  display: grid !important;
  grid-template-columns: 40% minmax(0, 1fr) !important;
  /* rangee 1 = photo (gauche) + bloc texte (droite) ; rangee 2 = bouton (droite) */
  grid-template-rows: 1fr auto !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  column-gap: 14px !important;
  row-gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

/* Colonne gauche : la photo occupe TOUTE la hauteur (les 2 rangees) */
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded) .ai-shortlist-frame-visual {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 190px !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded) .ai-shortlist-frame-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Colonne droite RANGEE 1 : bloc texte (macaron -> phrase) */
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded) .ai-shortlist-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 2px 0 0 !important;
  text-align: left !important;
}

/* 1) Macaron vert en haut a droite */
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded) .recommendation-match {
  order: 1 !important;
  position: static !important;
  align-self: flex-start !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-content: center !important;
}

/* 2) Phrase explicative sous le macaron (visible des l'etat replie).
   Style volontairement different du macaron : plus fin, plus doux, aere. */
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded) .recommendation-role-copy {
  display: block !important;   /* neutralise le masquage historique en replie */
  order: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #6a635b !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  /* MEME style que l'etat deplie (recommendations.css lock) : 11px / 760 /
     line-height 1.32 -> texte plus discret, coherent replie/deplie. */
  font-size: 11px !important;
  line-height: 1.32 !important;
  font-weight: 760 !important;
  letter-spacing: normal !important;
  text-align: left !important;
}

/* Colonne droite RANGEE 2 : bouton "Explore frame selection" SOUS la phrase */
.ai-shortlist-screen .ai-shortlist-card:not(.is-expanded) .ai-shortlist-explore {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: end !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 44px !important;
}

/* =========================================================================
   ECRAN 6 � Masquer le bouton "Refine selection" (hors V1 selon le doc).
   ========================================================================= */
.ai-shortlist-screen .ai-shortlist-refine-style {
  display: none !important;
}

/* =========================================================================
   HEADER DE PARCOURS IDENTIQUE SUR TOUS LES ECRANS (selfie / faux scan /
   resultats d'analyse). Ce fichier est charge en DERNIER parmi les feuilles
   qui touchent ces ecrans -> ces regles gagnent la cascade et suppriment le
   "saut" de position du bloc back + barre de progression d'un ecran a l'autre.
   ========================================================================= */
#app > .screen.selfie-screen,
#app > .screen.analysis-loading-screen.is-running,
#app > .screen.analysis-loading-screen.is-direction-result{
  padding-top: 10px !important;
}
/* Header : meme hauteur, meme marge, meme layout partout. */
.selfie-screen .step-header,
.analysis-loading-screen.is-running .step-header,
.analysis-loading-screen.is-direction-result .step-header,
.screen .global-journey-header{
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
}