/* PRATINIUM v278 — Connexion fintech premium
   Objectif : rendre /connexion plus attrayante, rassurante et premium, tout
   en conservant les corrections v271-v277 : largeur cartes, mode téléphone,
   onglets E-mail/Téléphone, œil mot de passe et responsive. */

body#authentication{
  --pf-ink:#07152f;
  --pf-ink-2:#102447;
  --pf-muted:#667085;
  --pf-line:rgba(15,35,70,.11);
  --pf-blue:#12a8e8;
  --pf-blue-2:#1c6fd1;
  --pf-gold:#f7c84b;
  --pf-card:#ffffff;
  --pf-soft:#f6fbff;
  background:
    radial-gradient(circle at 8% 18%, rgba(18,168,232,.18), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(247,200,75,.24), transparent 32%),
    linear-gradient(135deg,#f7fbff 0%,#ffffff 46%,#fff8e4 100%)!important;
  color:var(--pf-ink)!important;
}

body#authentication #wrapper{
  position:relative!important;
  overflow:hidden!important;
  padding:28px 16px 34px!important;
  background:transparent!important;
}
body#authentication #wrapper:before,
body#authentication #wrapper:after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:0!important;
  border-radius:999px!important;
  filter:blur(.2px)!important;
}
body#authentication #wrapper:before{
  width:420px!important;height:420px!important;
  left:-170px!important;top:90px!important;
  background:radial-gradient(circle,rgba(18,168,232,.16),transparent 66%)!important;
}
body#authentication #wrapper:after{
  width:360px!important;height:360px!important;
  right:-140px!important;bottom:30px!important;
  background:radial-gradient(circle,rgba(247,200,75,.20),transparent 66%)!important;
}
body#authentication #wrapper>.container,
body#authentication #content-wrapper,
body#authentication #main,
body#authentication .breadcrumb,
body#authentication .page-header,
body#authentication #content{position:relative!important;z-index:1!important;}

body#authentication .breadcrumb{
  max-width:1180px!important;
  margin:0 auto 12px!important;
  font-size:13px!important;
  font-weight:700!important;
  opacity:.72!important;
}

body#authentication .page-header{
  width:100%!important;
  max-width:1180px!important;
  min-height:164px!important;
  height:auto!important;
  margin:0 auto!important;
  padding:34px 44px 30px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-bottom:0!important;
  border-radius:30px 30px 0 0!important;
  background:
    linear-gradient(135deg,rgba(7,21,47,.96),rgba(16,50,94,.94) 48%,rgba(12,127,179,.88)),
    radial-gradient(circle at 85% 18%,rgba(247,200,75,.34),transparent 35%)!important;
  box-shadow:0 26px 80px rgba(7,21,47,.14)!important;
}
body#authentication .page-header:before{
  content:""!important;
  position:absolute!important;
  right:44px!important;top:24px!important;
  width:156px!important;height:156px!important;
  border-radius:42px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 1px,transparent 1px 12px)!important;
  transform:rotate(8deg)!important;
  opacity:.82!important;
}
body#authentication .page-header:after{
  content:"Accès sécurisé • Investissement • Marketplace"!important;
  position:relative!important;
  display:inline-flex!important;
  margin-top:18px!important;
  padding:8px 13px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.88)!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  backdrop-filter:blur(10px)!important;
}
body#authentication .page-header h1,
body#authentication h1.page-title,
body#authentication h1{
  max-width:660px!important;
  color:#fff!important;
  font-size:34px!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
  font-weight:900!important;
  text-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}
body#authentication .page-header h1:after{
  content:"Connectez-vous à votre espace PRATINIUM avec une expérience plus fluide, rassurante et professionnelle."!important;
  display:block!important;
  max-width:620px!important;
  margin-top:12px!important;
  color:rgba(255,255,255,.78)!important;
  font-size:15px!important;
  line-height:1.55!important;
  letter-spacing:0!important;
  font-weight:600!important;
  text-shadow:none!important;
}

body#authentication #content,
body#authentication div#content.page-content.card.card-block{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto 26px!important;
  padding:34px 38px 36px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  border-top:0!important;
  border-radius:0 0 30px 30px!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 28px 80px rgba(7,21,47,.12)!important;
  backdrop-filter:blur(18px)!important;
}

@media (min-width:992px){
  body#authentication #content,
  body#authentication div#content.page-content.card.card-block{
    display:grid!important;
    grid-template-columns:640px minmax(360px,440px)!important;
    gap:0 64px!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body#authentication.pratinium-auth-phone-mode #content,
  body#authentication.pratinium-auth-phone-mode div#content.page-content.card.card-block{
    grid-template-columns:640px minmax(360px,460px)!important;
    column-gap:86px!important;
    gap:0 86px!important;
    max-width:1280px!important;
  }
}

body#authentication section.login-form,
body#authentication .login-form,
body#authentication section.login-form:has(> form#login-form),
body#authentication section.login-form:has(> form.pratinium-phone-main-form),
body#authentication section.login-form:has(> form.pl-phone-login-form){
  position:relative!important;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,rgba(18,168,232,.34),rgba(247,200,75,.42)) border-box!important;
  border:1px solid transparent!important;
  border-radius:28px!important;
  box-shadow:0 24px 60px rgba(7,21,47,.10), inset 0 1px 0 rgba(255,255,255,.95)!important;
}
body#authentication section.login-form:before,
body#authentication .login-form:before{
  content:""!important;
  position:absolute!important;
  top:16px!important;right:18px!important;
  width:42px!important;height:42px!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,rgba(18,168,232,.13),rgba(247,200,75,.20))!important;
}

body#authentication .form-control,
body#authentication input[type="text"],
body#authentication input[type="email"],
body#authentication input[type="password"],
body#authentication input[type="tel"],
body#authentication select{
  min-height:50px!important;
  border:1px solid rgba(16,36,71,.14)!important;
  border-radius:15px!important;
  background:#fbfdff!important;
  color:var(--pf-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92)!important;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease!important;
}
body#authentication .form-control:focus,
body#authentication input:focus,
body#authentication select:focus{
  border-color:rgba(18,168,232,.72)!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(18,168,232,.12)!important;
  outline:0!important;
}
body#authentication label,
body#authentication .form-control-label{
  color:#243654!important;
  font-weight:800!important;
  font-size:13px!important;
}

body#authentication .btn-primary,
body#authentication button[type="submit"],
body#authentication input[type="submit"]{
  min-height:50px!important;
  border:0!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#0b6fd3 0%,#12a8e8 58%,#64d2ff 100%)!important;
  color:#fff!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  box-shadow:0 18px 34px rgba(18,112,211,.25)!important;
  transform:translateZ(0)!important;
}
body#authentication .btn-primary:hover,
body#authentication button[type="submit"]:hover,
body#authentication input[type="submit"]:hover{
  filter:saturate(1.06) brightness(1.02)!important;
  box-shadow:0 22px 42px rgba(18,112,211,.31)!important;
}

body#authentication .pratinium-auth-tabs,
body#authentication .pl-login-tabs,
body#authentication .nav-tabs,
body#authentication [role="tablist"]{
  border-radius:18px!important;
  background:#f3f8fc!important;
  border:1px solid rgba(16,36,71,.08)!important;
  padding:6px!important;
}
body#authentication .pratinium-auth-tabs a,
body#authentication .pl-login-tabs a,
body#authentication .nav-tabs a,
body#authentication [role="tab"]{
  border-radius:13px!important;
  font-weight:850!important;
  color:#52627a!important;
}
body#authentication .pratinium-auth-tabs .active,
body#authentication .pl-login-tabs .active,
body#authentication .nav-tabs .active,
body#authentication [role="tab"][aria-selected="true"]{
  background:#fff!important;
  color:#0b6fd3!important;
  box-shadow:0 8px 20px rgba(16,36,71,.09)!important;
}

body#authentication .pratinium-auth-premium-side{
  display:block!important;
  width:100%!important;
  max-width:430px!important;
  align-self:stretch!important;
  justify-self:start!important;
}
body#authentication .pratinium-auth-premium-card{
  height:100%!important;
  min-height:320px!important;
  padding:28px!important;
  border-radius:28px!important;
  border:1px solid rgba(16,36,71,.10)!important;
  background:
    radial-gradient(circle at 82% 8%,rgba(247,200,75,.22),transparent 30%),
    linear-gradient(145deg,#07152f,#102447 55%,#0a7fbd)!important;
  color:#fff!important;
  box-shadow:0 24px 60px rgba(7,21,47,.16)!important;
  overflow:hidden!important;
}
body#authentication .pratinium-auth-premium-kicker{
  display:inline-flex!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  font-size:12px!important;
  font-weight:850!important;
  color:rgba(255,255,255,.86)!important;
}
body#authentication .pratinium-auth-premium-card h2{
  margin:20px 0 12px!important;
  color:#fff!important;
  font-size:25px!important;
  line-height:1.12!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
body#authentication .pratinium-auth-premium-card p{
  margin:0 0 20px!important;
  color:rgba(255,255,255,.76)!important;
  font-size:14px!important;
  line-height:1.55!important;
  font-weight:600!important;
}
body#authentication .pratinium-auth-premium-list{display:grid!important;gap:11px!important;margin-top:18px!important;}
body#authentication .pratinium-auth-premium-item{
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:12px!important;border-radius:16px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:rgba(255,255,255,.88)!important;
  font-size:13px!important;font-weight:750!important;
}
body#authentication .pratinium-auth-premium-dot{
  flex:0 0 24px!important;width:24px!important;height:24px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,var(--pf-gold),#fff2ad)!important;
  box-shadow:0 0 0 5px rgba(247,200,75,.12)!important;
}

@media (max-width:991.98px){
  body#authentication #wrapper{padding:16px 10px 24px!important;}
  body#authentication .page-header{
    min-height:0!important;
    padding:26px 20px 24px!important;
    border-radius:24px 24px 0 0!important;
  }
  body#authentication .page-header h1,
  body#authentication h1.page-title,
  body#authentication h1{font-size:26px!important;}
  body#authentication .page-header h1:after{font-size:14px!important;}
  body#authentication .page-header:after{font-size:11px!important;margin-top:14px!important;}
  body#authentication #content,
  body#authentication div#content.page-content.card.card-block{
    display:block!important;
    padding:18px!important;
    border-radius:0 0 24px 24px!important;
  }
  body#authentication section.login-form,
  body#authentication .login-form{
    border-radius:22px!important;
    padding:26px 18px 24px!important;
  }
  body#authentication .pratinium-auth-premium-side{max-width:100%!important;margin-top:18px!important;}
  body#authentication .pratinium-auth-premium-card{min-height:0!important;padding:22px!important;border-radius:22px!important;}
  body#authentication .pratinium-auth-premium-card h2{font-size:21px!important;}
}