/* Écran d'authentification : un seul bloc visible, aucun défilement. */
html body #screenAuth.screen,
html.is-android #screenAuth.screen,
html.is-ios #screenAuth.screen{
  position:fixed!important;inset:0!important;width:100%!important;
  overflow:hidden!important;
  height:100vh!important;height:100dvh!important;
  max-height:100vh!important;max-height:100dvh!important;
  overscroll-behavior:none!important;
  -webkit-overflow-scrolling:auto;
  touch-action:none}
html body #screenAuth input,
html body #screenAuth button,
html body #screenAuth label,
html body #screenAuth textarea,
html body #screenAuth select{
  touch-action:manipulation}
html body #screenAuth .auth-wrap{
  flex:1 1 auto;min-height:0;max-height:100%;
  width:92%!important;max-width:420px!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  padding:30px 0 calc(8px + env(safe-area-inset-bottom,0px))!important;
  margin-left:auto!important;margin-right:auto!important}
html body #screenAuth .auth-card,
html body #screenAuth .field,
html body #screenAuth .field input,
html body #screenAuth .btn-gold{
  width:100%;max-width:none}
html body #screenAuth .auth-card{
  padding:12px 14px 28px!important;
  margin-bottom:0;flex-shrink:0}
html body #screenAuth .brand-lockup{gap:2px;flex-shrink:0;margin-top:0}
html body #screenAuth .logo-mark{width:40px;height:40px}
html body #screenAuth .brand-xl{font-size:1.42rem;line-height:1.05}
html body #screenAuth .brand-domain{font-size:.5rem;letter-spacing:.18em}
html body #screenAuth .brand-sub{margin:2px 0 18px;font-size:.62rem}
html body #screenAuth .auth-tabs{margin-bottom:8px;padding:3px;gap:4px}
html body #screenAuth .auth-tab{padding:6px;min-height:46px!important;font-size:.8rem}
html body #screenAuth .field{gap:3px;margin-bottom:16px!important}
html body #screenAuth .field label{font-size:.58rem;letter-spacing:.05em;line-height:1.15}
html body #screenAuth .field input{
  padding:14px 16px!important;min-height:52px!important;font-size:16px!important;line-height:1.15;
  margin-bottom:16px!important}
html body #screenAuth .pass-toggle{min-width:44px;min-height:44px;padding:8px}
html body #screenAuth .check-row{margin:4px 0 8px;font-size:.64rem;line-height:1.25;gap:8px}
html body #screenAuth .link-forgot{margin:0 0 8px;font-size:.64rem}
html body #screenAuth .btn-gold{
  min-height:54px!important;padding:10px 14px;
  margin-top:18px!important;margin-bottom:16px!important;
  font-size:16px!important;font-weight:700!important}
html body #screenAuth .legal{margin-top:6px;font-size:.5rem;flex-shrink:0}
html body #screenAuth .auth-crypto-line{margin:6px 0 0;gap:3px}
html body #screenAuth .auth-crypto-line .coin-svg,
html body #screenAuth .auth-coin-ring .coin-svg{width:18px;height:18px}
html body #screenAuth .auth-coin-ring{padding:3px}
html body #screenAuth .auth-crypto-line span[data-i18n="authInstant"]{font-size:.56rem;line-height:1.2}
html body #formRegister,
html body #formLogin{padding-bottom:0;margin-bottom:0}
html body #screenAuth .auth-crypto-in-form{
  display:flex!important;flex-direction:column!important;align-items:center;
  margin-top:6px!important;margin-bottom:0;padding-bottom:0;gap:3px}
html body #screenAuth .auth-crypto-after-card{display:none!important}
html body #screenAuth .auth-crypto-marquee{width:min(240px,88%)}
@media (max-height:740px){
  html body #screenAuth .logo-mark{width:34px;height:34px}
  html body #screenAuth .brand-xl{font-size:1.3rem}
  html body #screenAuth .brand-sub{margin:1px 0 16px}
}

@media (min-width:1024px){
  html:not(.is-android) body #screenAuth .auth-wrap{
    width:92%!important;max-width:420px!important;
    justify-content:center!important;
    padding:18px 0 calc(14px + env(safe-area-inset-bottom,0px))!important}
  html:not(.is-android) body #screenAuth .auth-card{padding:16px 18px 28px!important}
  html:not(.is-android) body #screenAuth .logo-mark{width:48px;height:48px}
  html:not(.is-android) body #screenAuth .brand-xl{font-size:1.8rem;line-height:1.1}
  html:not(.is-android) body #screenAuth .brand-domain{font-size:.58rem}
  html:not(.is-android) body #screenAuth .brand-sub{margin:4px 0 18px;font-size:.72rem}
  html:not(.is-android) body #screenAuth .auth-tabs{margin-bottom:10px}
  html:not(.is-android) body #screenAuth .auth-tab{min-height:46px!important;padding:8px;font-size:.88rem}
  html:not(.is-android) body #screenAuth .field{margin-bottom:16px!important;gap:4px}
  html:not(.is-android) body #screenAuth .field input{min-height:52px!important;padding:14px 16px!important}
  html:not(.is-android) body #screenAuth .btn-gold{min-height:54px!important;padding:12px 16px}
}
@media (max-width:480px){
  html.is-ios body #screenAuth .auth-wrap,
  html.is-android body #screenAuth .auth-wrap{
    width:92%!important;max-width:420px!important;
    margin-left:auto!important;margin-right:auto!important;
    padding:16px 0 calc(24px + env(safe-area-inset-bottom,0px))!important}
  html.is-ios body #screenAuth .auth-card{padding:10px 12px 16px!important}
  html.is-android body #screenAuth .auth-card{padding:10px 12px 12px!important}
  html.is-ios body #screenAuth .auth-tabs,
  html.is-android body #screenAuth .auth-tabs{margin-bottom:7px}
  html.is-ios body #screenAuth .legal,
  html.is-android body #screenAuth .legal{
    margin-top:8px!important;margin-bottom:0!important;
    padding-bottom:4px!important;flex-shrink:0}
}

.link-terms,button.link-terms{
  background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;
  color:#F59E0B;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.help-terms,#helpModal button.link-terms.help-terms{
  display:block;width:100%;text-align:center;margin:8px 0 0;
  font:inherit;font-size:.62rem!important;font-weight:700;line-height:1.35;color:#94A3B8}
.help-terms.link-terms,#helpModal button.link-terms.help-terms{color:#F59E0B}

#termsModal .terms-box{
  position:relative;
  width:94vw!important;max-width:850px!important;
  height:88vh!important;max-height:88vh!important;
  border-radius:16px!important;
  display:flex;flex-direction:column;
  overflow:hidden!important;
  padding:16px 16px 14px;background:rgba(10,14,22,.97);
  border:1px solid #1E2638;box-sizing:border-box}
#termsModal .terms-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  margin:0 0 14px;flex-shrink:0;min-width:0;padding-right:40px;position:static}
#termsModal .btn-close,
#termsModal .terms-head .btn-close,
#termsModal #closeTerms{
  position:absolute!important;top:8px!important;right:8px!important;
  left:auto!important;bottom:auto!important;
  width:28px;height:28px;min-width:28px;min-height:28px;
  margin:0!important;padding:0;flex:none;z-index:95;
  color:#E8EEF9}
#termsModal .modal-title,
#termsModal .terms-head .modal-title{
  display:block;flex:1 1 auto;min-width:0;max-width:100%;box-sizing:border-box;
  margin:0;padding:8px 10px;
  font-size:.62rem;letter-spacing:0;line-height:1.3;
  text-transform:none;font-weight:800;color:#F8FAFC;text-align:center;
  white-space:normal;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;hyphens:manual;
  border:1px solid rgba(245,158,11,.38);border-radius:10px;
  background:rgba(245,158,11,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
#termsModal .terms-body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  color:#CBD5E1;font-size:.76rem;font-weight:400;line-height:1.62;
  padding:0 8px 8px 0;letter-spacing:.01em}
#termsModal .terms-body h3{
  margin:16px 0 6px;color:#E8EEF9;font-size:.66rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}
#termsModal .terms-body p{margin:0 0 10px;color:#94A3B8;text-align:justify}
#termsModal .terms-body h3:first-child{margin-top:0}

html:not(.is-android):not(.is-ios) body #screenAuth .field{
  margin-bottom:16px!important}
html:not(.is-android):not(.is-ios) body #screenAuth .field input[type="text"],
html:not(.is-android):not(.is-ios) body #screenAuth .field input[type="email"],
html:not(.is-android):not(.is-ios) body #screenAuth .field input[type="password"],
html:not(.is-android):not(.is-ios) body #screenAuth .field input:not([type]){
  min-height:52px!important;
  padding:14px 16px!important;
  margin-bottom:16px!important;
  font-size:16px!important}
html:not(.is-android):not(.is-ios) body #screenAuth .btn-gold{
  min-height:54px!important;
  margin-top:18px!important;
  margin-bottom:16px!important;
  font-size:16px!important;
  font-weight:700!important}
html:not(.is-android):not(.is-ios) body #screenAuth .auth-tab{
  min-height:46px!important}
html:not(.is-android):not(.is-ios) body #screenAuth .auth-card{
  padding-bottom:28px!important}

html.is-android body #screenAuth .field{
  margin-bottom:10px!important}
html.is-android body #screenAuth .field input[type="text"],
html.is-android body #screenAuth .field input[type="email"],
html.is-android body #screenAuth .field input[type="password"],
html.is-android body #screenAuth .field input:not([type]),
html.is-android body #screenAuth .field input{
  min-height:44px!important;
  padding:10px 14px!important;
  margin-bottom:10px!important;
  font-size:16px!important}
html.is-android body #screenAuth .btn-gold{
  min-height:46px!important;
  margin-top:12px!important;
  margin-bottom:10px!important;
  font-size:16px!important;
  font-weight:700!important}
html.is-android body #screenAuth .auth-crypto-in-form{
  margin-top:4px!important;margin-bottom:0!important;gap:2px!important}
html.is-android body #screenAuth .legal{
  margin-top:4px!important}
html.is-android body #screenAuth .check-row{
  margin:4px 0 6px!important}
html.is-android body #screenAuth .auth-card{
  padding-bottom:12px!important}

html.is-ios body #screenAuth .auth-card{
  padding-bottom:16px!important}

@media (max-width:480px){
  html.is-ios body #screenAuth .legal,
  html.is-android body #screenAuth .legal{
    margin-top:8px!important;margin-bottom:0!important;padding-bottom:4px!important}
}

#formReset .btn-gold.is-waiting,
#formPassword .btn-gold.is-waiting{
  opacity:.55;cursor:default;pointer-events:none}

@media (max-width:859px){
  #termsModal .terms-head{position:static!important;padding-right:32px}
  #termsModal .terms-head .modal-title{padding-right:8px}
  #termsModal .btn-close,
  #termsModal .terms-head .btn-close,
  #termsModal #closeTerms,
  html.is-android #termsModal .btn-close,
  html.is-android #termsModal .terms-head .btn-close,
  html.is-ios #termsModal .btn-close,
  html.is-ios #termsModal .terms-head .btn-close,
  html.is-android .modal-backdrop.active #termsModal .btn-close{
    position:absolute!important;top:4px!important;right:4px!important;left:auto!important;bottom:auto!important;
    width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;
    margin:0!important;padding:0!important;flex:none!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    border-radius:50%!important;border:1px solid rgba(245,158,11,.65)!important;
    background:rgba(12,16,26,.96)!important;color:#F8FAFC!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.4)!important;
    font-size:.7rem!important;line-height:1!important;z-index:90!important;transform:none!important}
}

/* Inscription sur petits écrans (petits Android, iPhone SE / 8…) : on garde la taille des
   cases, on réduit seulement le vide ENTRE elles, pour que « Créer mon compte », les logos
   et « © 2026 OROLADO · 18+ » restent visibles sans défiler. La connexion ne change pas. */
@media (max-height:760px){
  html body #screenAuth #formRegister .field{margin-bottom:6px!important;gap:3px!important}
  html body #screenAuth #formRegister .field input,
  html body #screenAuth #formRegister .field input[type="text"],
  html body #screenAuth #formRegister .field input[type="email"],
  html body #screenAuth #formRegister .field input[type="password"]{margin-bottom:4px!important}
  html body #screenAuth #formRegister .check-row{margin:2px 0 4px!important}
  html body #screenAuth #formRegister .btn-gold{margin-top:8px!important;margin-bottom:8px!important}
  html body #screenAuth .brand-sub{margin-bottom:12px!important}
}
@media (max-height:640px){
  html body #screenAuth #formRegister .field input,
  html body #screenAuth #formRegister .field input[type="text"],
  html body #screenAuth #formRegister .field input[type="email"],
  html body #screenAuth #formRegister .field input[type="password"]{min-height:46px!important;padding:11px 14px!important}
  html body #screenAuth #formRegister .btn-gold{min-height:48px!important}
  html body #screenAuth .auth-wrap{padding-top:12px!important}
}
@media (max-height:600px){
  html body #screenAuth .auth-wrap{padding-top:6px!important}
  html body #screenAuth .logo-mark{width:22px!important;height:22px!important}
  html body #screenAuth .brand-xl{font-size:1rem!important}
  html body #screenAuth .brand-sub{margin:0 0 8px!important}
  html body #screenAuth .auth-tab{min-height:40px!important}
  html body #screenAuth #formRegister .field{margin-bottom:4px!important}
  html body #screenAuth #formRegister .field input,
  html body #screenAuth #formRegister .field input[type="text"],
  html body #screenAuth #formRegister .field input[type="email"],
  html body #screenAuth #formRegister .field input[type="password"]{min-height:42px!important;padding:9px 12px!important;margin-bottom:2px!important}
  html body #screenAuth #formRegister .btn-gold{min-height:44px!important;margin-top:6px!important;margin-bottom:6px!important}
  html body #screenAuth .auth-card{padding-bottom:8px!important}
}
/* Titre OROLADO.COM : plus grand, il respire (écart avec le logo), « TRADING » un peu plus bas. */
html body #screenAuth .brand-lockup{gap:9px!important}
html body #screenAuth .brand-xl{font-size:1.62rem!important;line-height:1.1!important}
html body #screenAuth .brand-sub{margin:9px 0 18px!important}
@media (max-height:740px){
  html body #screenAuth .brand-lockup{gap:7px!important}
  html body #screenAuth .brand-xl{font-size:1.46rem!important}
  html body #screenAuth .brand-sub{margin:7px 0 14px!important}
}
@media (min-width:1024px){
  html:not(.is-android) body #screenAuth .brand-xl{font-size:2.05rem!important}
  html:not(.is-android) body #screenAuth .brand-sub{margin:10px 0 20px!important}
}
@media (max-height:600px){
  html body #screenAuth .brand-lockup{gap:4px!important}
  html body #screenAuth .brand-xl{font-size:1.15rem!important}
  html body #screenAuth .brand-sub{margin:3px 0 8px!important}
}