.selfie-screen{height:643px;min-height:643px;padding:0 15px;background:radial-gradient(circle at 50% 18%,#fff 0,#fafafa 58%,#f2f2f2 100%);overflow:hidden}
.selfie-screen .step-header{height:45px;margin:0 -1px;grid-template-columns:70px 1fr 70px}
.selfie-screen .step-nav{width:68px;height:30px;padding:0 9px;display:flex;align-items:center;justify-content:center;gap:4px;border:0;border-radius:999px;background:#fff;color:#17191a;font-size:7px;font-weight:650;box-shadow:none}
.selfie-screen .step-next{justify-self:end}.selfie-screen .step-icon{width:12px;height:12px;display:grid;place-items:center;font-size:12px}.selfie-screen .step-icon svg{width:12px;height:12px}.selfie-screen .step-label{white-space:nowrap}
.selfie-screen .steps{font-size:8px;color:#323435}.selfie-screen .step-count{display:block}.selfie-screen .steps-line{width:84px;margin:6px auto 0;gap:0}.selfie-screen .steps-line i{height:2px;border-radius:0;background:#e6e0da}.selfie-screen .steps-line i:first-child{border-radius:3px 0 0 3px}.selfie-screen .steps-line i:last-child{border-radius:0 3px 3px 0}.selfie-screen .steps-line i.active{background:#141718}
.selfie-screen>h1{margin:11px 0 5px;font-size:29px;line-height:1.12;letter-spacing:-.045em;text-align:center;color:#101213}
.selfie-screen>.selfie-lead{margin:0 auto 11px;max-width:none;font-size:11px;line-height:1.35;text-align:center;color:#343737}
.selfie-screen .capture{width:188px;height:145px;margin:14px auto 8px;border:1px solid #e8e8e8;border-radius:11px;background:#f4f4f4;overflow:hidden}
.selfie-screen .capture.empty::after{display:none}.selfie-screen .capture img{width:100%;height:100%;object-fit:cover}
.selfie-placeholder{position:absolute;inset:0;overflow:hidden}.placeholder-head{position:absolute;left:50%;top:23px;width:51px;height:65px;transform:translateX(-50%);border-radius:48% 48% 43% 43%;background:#e8e8e8}.placeholder-body{position:absolute;left:50%;bottom:-20px;width:116px;height:91px;transform:translateX(-50%);border-radius:52% 52% 0 0;background:#e8e8e8}
.selfie-screen .corner{width:17px;height:17px;border-color:#2d3132}.selfie-screen .corner.tl{left:10px;top:10px}.selfie-screen .corner.tr{right:10px;top:10px}.selfie-screen .corner.bl{left:10px;bottom:10px}.selfie-screen .corner.br{right:10px;bottom:10px}
.selfie-actions{width:236px;margin:0 auto;display:grid;gap:10px}.selfie-screen .selfie-button{width:236px;height:43px;min-height:43px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:7px;font-size:14px;font-weight:670}.selfie-screen .selfie-button.primary{background:#101314;color:#fff}.selfie-screen .selfie-button.secondary{height:42px;min-height:42px;background:#f2f2f2;color:#161819}.selfie-button-icon{width:23px;height:23px;display:grid;place-items:center;font-size:23px}.selfie-button-icon svg{width:22px;height:22px}.selfie-button-label{display:block;white-space:nowrap}
.selfie-screen .tips-title{height:26px;margin:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:780;color:#17191a}.selfie-screen .tips{height:82px;display:grid;grid-template-columns:repeat(3,1fr);font-size:9px;text-align:center}.selfie-screen .tip-item{min-width:0;display:flex;flex-direction:column;align-items:center;padding:2px 5px 0}.selfie-screen .tip-item+ .tip-item{border-left:1px solid #ececec}.selfie-screen .tip-icon{width:42px;height:42px;margin:0 auto 5px;display:grid;place-items:center;border:0;border-radius:50%;background:#f2f2f2;font-size:25px}.selfie-screen .tip-icon svg{width:26px;height:26px;stroke-width:1.45}.selfie-screen .tip-label{font-size:9px;line-height:1.25;color:#252829}
.selfie-screen .selfie-security{width:281px;height:96px;min-height:96px;margin:8px auto 0;padding:8px 11px;display:grid;grid-template-columns:23px 1fr;grid-template-rows:44px 32px;align-items:center;gap:4px 7px;border-radius:9px;background:#f4f4f4;color:#242728}.selfie-screen .security-icon{grid-column:1;grid-row:2;width:20px;height:22px;display:grid;place-items:center;font-size:20px}.selfie-screen .security-icon svg{width:18px;height:18px;stroke-width:1.7}.selfie-screen .security-text{grid-column:2;grid-row:2;font-size:11px;line-height:1.2}.selfie-screen .security-action{grid-column:1/-1;grid-row:1;width:100%;height:42px;min-height:42px;margin:0;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;font-size:12px;white-space:nowrap}.selfie-screen .security-action:disabled{background:#d0d0d0;color:#fff;opacity:1}.selfie-screen .security-action-icon{width:18px;height:18px;display:grid;place-items:center}.selfie-screen .security-action-icon svg{width:16px;height:16px}.selfie-screen .home-indicator{width:108px;height:4px;margin:7px auto 0;border-radius:99px;background:#050606}
.selfie-screen .security-action{transition:background-color .22s ease,box-shadow .22s ease,opacity .22s ease,transform .18s ease}.selfie-screen .security-action:disabled{background:#d0d0d0;color:rgba(255,255,255,.76);box-shadow:none;opacity:.72;cursor:not-allowed}.selfie-screen .security-action:not(:disabled){background:#141414;color:#fff;box-shadow:0 5px 13px rgba(0,0,0,.18);opacity:1}.selfie-screen .security-action:not(:disabled):active{transform:scale(.97)}
@media(min-width:700px){#app:has(.selfie-screen){width:311px}.selfie-screen{border-radius:0}}

/* UI imported from the reference prototype; behaviour remains the live demo flow. */
.selfie-screen{min-height:100vh;height:auto;padding:0 14px 8px;display:flex;flex-direction:column}
.selfie-screen .step-header{height:42px;margin:0;grid-template-columns:70px 1fr 70px}
.selfie-screen>h1{margin:5px auto 3px;max-width:320px;font-size:27px;line-height:1.04}
.selfie-screen .selfie-capture-frame{flex:0 0 auto;width:min(100%,332px);height:348px;min-height:348px;margin:8px auto 7px;border:1px solid #e8e8e8;border-radius:18px;background:#f4f4f4;overflow:hidden;position:relative}
.selfie-screen .selfie-capture-frame.empty::after{content:none;display:none}
.selfie-screen .selfie-capture-frame img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.selfie-screen .selfie-placeholder{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.selfie-screen .placeholder-head{position:static;width:112px;height:124px;margin-bottom:-8px;transform:none;border-radius:999px 999px 48px 48px;background:#e8e8e8}
.selfie-screen .placeholder-body{position:static;width:245px;height:180px;transform:none;border-radius:52% 52% 0 0;background:#e8e8e8}
.selfie-screen .corner{width:22px;height:22px}.selfie-screen .corner.tl{left:12px;top:12px}.selfie-screen .corner.tr{right:12px;top:12px}.selfie-screen .corner.bl{left:12px;bottom:12px}.selfie-screen .corner.br{right:12px;bottom:12px}
.selfie-screen .tips-title{margin:0 0 3px;height:auto;font-size:12px;line-height:1.1}.selfie-screen .tips{height:auto;min-height:54px;margin:0 0 8px}.selfie-screen .tip-item{padding:0 5px}.selfie-screen .tip-icon{width:31px;height:31px;margin:0 auto 3px}.selfie-screen .tip-icon svg{width:19px;height:19px}.selfie-screen .tip-label{font-size:8.5px;line-height:1.14}
.selfie-screen .selfie-bottom-stack{width:100%;margin-top:auto}.selfie-screen .selfie-actions{width:100%;max-width:336px;margin:0 auto 8px;grid-template-columns:1fr 1fr;gap:8px}.selfie-screen .selfie-button{width:100%;height:42px;min-height:42px;padding:0 10px;gap:7px;border-radius:12px;font-size:11.5px}.selfie-button-icon{width:19px;height:19px}.selfie-button-icon svg{width:18px;height:18px}
.selfie-screen .selfie-start-action{width:100%;min-height:44px;margin:0 0 7px;border-radius:14px;background:#141414;color:#fff;border:1px solid #141414;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.selfie-screen .selfie-start-action:disabled{background:#cfcfcf;border-color:#cfcfcf;box-shadow:none}.selfie-screen .selfie-security{width:100%;min-height:34px;margin:0;padding:7px 12px;display:flex;align-items:center;gap:10px;border-radius:14px}.selfie-screen .security-icon{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center}.selfie-screen .security-text{font-size:9px;line-height:1.06}.selfie-screen .home-indicator{margin:4px auto 0}
@media(min-width:700px){#app:has(.selfie-screen){width:390px}}

/* Keep the reference composition legible on compact laptop/mobile viewports. */
#app>.selfie-screen{overflow-y:auto}
.selfie-screen .selfie-button{min-width:0;text-align:center}
.selfie-screen .selfie-button-label{min-width:0;white-space:normal;line-height:1.08;text-wrap:balance}
.selfie-screen .selfie-start-action{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;text-align:center}
.selfie-screen .analysis-preferences-label{min-width:0;line-height:1.1;text-wrap:balance}

/* Step 1 reference: a balanced portrait placeholder and more legible tip copy. */
.selfie-screen .selfie-placeholder .placeholder-head{
  width:128px;
  height:142px;
  margin-bottom:-9px;
  border-radius:50% 50% 46% 46%;
}
.selfie-screen .selfie-placeholder .placeholder-body{
  width:286px;
  height:198px;
  border-radius:52% 52% 0 0;
}
.selfie-screen .tip-label{
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:600!important;
  color:#202324!important;
}
.selfie-screen .step-nav.selfie-back-button{
  width:50px!important;
  height:30px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:#141414!important;
  color:#fff!important;
  box-shadow:none!important;
}
.selfie-screen .step-nav.selfie-back-button .step-back-label{display:grid!important;place-items:center!important;color:#17191a!important;}
.selfie-screen .step-nav.selfie-back-button .step-back-label svg{width:20px!important;height:20px!important;}

/* Locked Step 1 repair: keep actions inside the phone frame and keep both portrait buttons visible. */
.selfie-screen .step-header{grid-template-columns:72px 1fr 72px!important;}
.selfie-screen .step-nav.selfie-back-button{width:50px!important;height:30px!important;background:#141414!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important;}
.selfie-screen .step-nav.selfie-back-button .step-back-label{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;color:#fff!important;}
.selfie-screen .step-nav.selfie-back-button .step-back-label svg{display:block!important;width:22px!important;height:22px!important;stroke:currentColor!important;}
.selfie-screen .selfie-bottom-stack{width:100%!important;max-width:336px!important;margin:0 auto!important;}
.selfie-screen .selfie-actions{width:100%!important;max-width:336px!important;margin:0 auto 8px!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important;}
.selfie-screen .selfie-actions .selfie-button{display:flex!important;width:100%!important;min-width:0!important;max-width:none!important;box-sizing:border-box!important;overflow:hidden!important;}
.selfie-screen .selfie-button-label{display:block!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important;text-align:center!important;}
.selfie-screen .selfie-button-label{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;text-align:left!important;}
.selfie-screen .selfie-button-label svg{width:24px!important;height:24px!important;flex:0 0 24px!important;stroke-width:2!important;}
.selfie-screen .selfie-button{justify-content:flex-start!important;padding-left:28px!important;}
.selfie-screen .selfie-button-label{white-space:nowrap!important;flex-wrap:nowrap!important;}

/* Keep both selfie actions visually centered, including the beige upload action. */
.selfie-screen .selfie-actions .selfie-button,
.selfie-screen .selfie-actions .selfie-button-label {
  justify-content:center!important;
  text-align:center!important;
}
.selfie-screen .selfie-actions .selfie-button { padding-left:10px!important; }
.selfie-screen .selfie-actions .selfie-button.secondary .selfie-button-label {
  font-size:11.5px!important;
  gap:4px!important;
  letter-spacing:-.15px!important;
}
.selfie-screen .selfie-actions .selfie-button.secondary .selfie-button-label svg {
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
}

/* Manual upload-button positioning. Adjust these two values when needed:
   --upload-content-x moves icon + label together;
   --upload-icon-x fine-tunes only the icon. */
.selfie-screen {
  --upload-content-x: 0px;
  --upload-icon-x: 0px;
}
.selfie-screen .selfie-actions .selfie-button.secondary .selfie-button-label {
  transform:translateX(var(--upload-content-x));
}
.selfie-screen .selfie-actions .selfie-button.secondary .selfie-button-label svg {
  transform:translateX(var(--upload-icon-x));
}
.selfie-screen .selfie-start-action{width:100%!important;max-width:336px!important;margin:0 auto 7px!important;box-sizing:border-box!important;}

/* Locked Step back arrows: orange back buttons must always show the white arrow. */
.selfie-screen .step-nav.selfie-back-button,
.analysis-loading-screen .step-nav.step-previous,
.analysis-result-screen .step-nav.step-previous,
.recommendations-screen .recommendation-nav.recommendation-close{
  background:#141414!important;
  color:#fff!important;
}
.selfie-screen .step-nav.selfie-back-button .step-back-label,
.analysis-loading-screen .step-nav.step-previous .step-back-label,
.analysis-result-screen .step-nav.step-previous .step-back-label,
.recommendations-screen .recommendation-nav.recommendation-close .recommendation-back-label{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  color:#fff!important;
}
.selfie-screen .step-nav.selfie-back-button svg,
.analysis-loading-screen .step-nav.step-previous svg,
.analysis-result-screen .step-nav.step-previous svg,
.recommendations-screen .recommendation-nav.recommendation-close svg{
  display:block!important;
  width:22px!important;
  height:22px!important;
  stroke:currentColor!important;
}

/* journey back arrow color fix */
.screen .global-journey-header .step-nav.step-previous,
.selfie-screen .global-journey-header .step-nav.selfie-back-button,
.analysis-loading-screen .global-journey-header .step-nav.step-previous,
.analysis-result-screen .global-journey-header .step-nav.step-previous,
.recommendations-screen .global-journey-header .step-nav.step-previous{
  background:#141414!important;
  color:#fff!important;
}
.screen .global-journey-header .step-nav.step-previous .step-back-label,
.screen .global-journey-header .step-nav.step-previous svg{
  color:#fff!important;
  stroke:#fff!important;
}


/* NOTE: le style des tips de l'ecran 2 (taille + espacement) est pilote dans
   analysis-direction.css, qui est charge APRES selfie.css et gagne donc en
   cascade. Voir la section "Tips agrandis" la-bas. */

/* --- Bloc capture selfie repense (sans tips, actions dans le bloc) --------- */
/* Le bouton "Take a selfie" couvre tout le bloc capture vide : le placeholder
   sert de fond, le CTA (icone + texte) est centre par-dessus. */
.selfie-screen .selfie-capture-take{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  padding:0; border:0; background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.selfie-screen .selfie-take-cta{
  position:relative; z-index:3;
  display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:10px;
  padding:13px 26px;
  border-radius:999px;
  background:rgba(16,19,20,.92);
  color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.selfie-screen .selfie-take-cta svg{ width:22px; height:22px; stroke-width:1.8; flex:0 0 auto; }
.selfie-screen .selfie-take-cta b{ font-size:15px; font-weight:750; white-space:nowrap; }
/* Petit bouton "Upload a selfie" en overlay bas-gauche. Remonte au-dessus du
   coin noir (corner.bl a bottom:12px + ~22px) pour ne pas le chevaucher. */
.selfie-screen .selfie-upload-corner{
  position:absolute; z-index:4; left:44px; bottom:12px;
  min-height:34px; padding:0 13px;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #e5e5e5; border-radius:999px;
  background:rgba(255,255,255,.94); color:#161819;
  font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.selfie-screen .selfie-upload-corner svg{ width:15px; height:15px; stroke-width:1.8; }

/* Bouton "Change photo" (overlay coin bas-droit) quand un selfie est affiche :
   recycle un autre portrait de demo a chaque clic (option B). */
.selfie-screen .selfie-change-corner{
  position:absolute; z-index:4; right:12px; bottom:12px;
  min-height:34px; padding:0 13px;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(255,255,255,.5); border-radius:999px;
  background:rgba(20,20,20,.82); color:#fff;
  font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.22);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.selfie-screen .selfie-change-corner svg{ width:15px; height:15px; stroke-width:1.9; }