:root{--prototype-phone-width:393px;--prototype-phone-height:852px;--prototype-layout-width:311px;--prototype-layout-height:674px;--prototype-layout-scale:1.2636656}
/* La PAGE ne scrolle plus : on epingle le viewport et on centre le telephone.
   Ainsi le seul scroll possible est le scroll INTERNE de l'ecran du telephone
   (#app>.screen{overflow-y:auto}). Fini le "scroll de l'espace de travail" qui
   revelait du vide sous le contenu. Sur une fenetre plus petite que le
   telephone, #app devient scrollable en secours. */
html{height:100%}
/* Alignement vertical : on ancre le telephone en HAUT (avec une petite marge)
   plutot que centre. A 100% de zoom, quand la fenetre est un peu plus courte
   que le telephone (852px), le centrage rognait le BAS de l'ecran ; en
   l'ancrant en haut on decale l'appareil legerement vers le haut et le bas
   redevient visible. A 90% (plus de place) le rendu reste propre. */
body{min-height:100vh;height:100vh;margin:0;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;box-sizing:border-box}
#app,#app:has(.home-screen),#app:has(.selfie-screen){width:var(--prototype-phone-width);height:var(--prototype-phone-height);min-height:var(--prototype-phone-height);max-height:var(--prototype-phone-height);flex:0 0 auto;margin-left:auto;margin-right:auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
#app>.screen,#app>.vto-screen{width:var(--prototype-layout-width)!important;height:var(--prototype-layout-height)!important;min-height:var(--prototype-layout-height)!important;max-height:var(--prototype-layout-height)!important;zoom:var(--prototype-layout-scale);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#app>.screen::-webkit-scrollbar,#app>.vto-screen::-webkit-scrollbar{display:none}
/* Scroll interne autorise sur TOUS les ecrans : la regle generale
   #app>.screen{overflow-y:auto} s'applique partout. (Ancienne exception
   overflow-y:hidden sur home/selfie/analysis-loading/swipe retiree pour
   permettre de defiler le contenu en survolant l'ecran du telephone.) */
#app .overlay-screen{height:100%;max-height:100%}
.selfie-screen .home-indicator{margin-top:auto;margin-bottom:4px}.analysis-result-screen .result-security{margin-top:auto}
@supports(padding-bottom:max(0px)){
  #app>.swipe-screen{padding-bottom:max(18px,calc(8px + env(safe-area-inset-bottom)))}
  #app>.recommendations-screen{padding-bottom:max(10px,calc(6px + env(safe-area-inset-bottom)))}
  #app>.product-page-screen .product-bottom-nav,
  #app>.home-screen .bottom-nav{padding-bottom:max(5px,env(safe-area-inset-bottom))}
  #app>.vto-screen .premium-vto-bottom{padding-bottom:max(9px,env(safe-area-inset-bottom))}
  #app>.vto-screen .suggestions-sheet{padding-bottom:max(18px,calc(8px + env(safe-area-inset-bottom)))}
}
@media(min-width:700px){#app,#app:has(.home-screen),#app:has(.selfie-screen){width:var(--prototype-phone-width);height:var(--prototype-phone-height);min-height:var(--prototype-phone-height);max-height:var(--prototype-phone-height)}#app>.screen,#app>.vto-screen{border-radius:22px}}
@media(max-width:392px) and (min-width:376px){:root{--prototype-phone-width:390px;--prototype-phone-height:844px;--prototype-layout-height:673px;--prototype-layout-scale:1.2540193}}
@media(max-width:375px){:root{--prototype-phone-width:375px;--prototype-phone-height:812px;--prototype-layout-height:673px;--prototype-layout-scale:1.2057878}}