/* PRATINIUM v286 — Récupération mot de passe fintech premium
   Objectif : aligner /recuperation-mot-de-passe avec le rendu premium de /connexion,
   sans toucher aux pages connexion/inscription ni aux templates PrestaShop. */

body#password,
body.page-password,
body[class*="password"]{
  --pp-ink:#07152f;
  --pp-ink-2:#102447;
  --pp-muted:#667085;
  --pp-blue:#12a8e8;
  --pp-blue-2:#0b6fd3;
  --pp-gold:#f7c84b;
  background:
    radial-gradient(circle at 8% 14%,rgba(18,168,232,.18),transparent 34%),
    radial-gradient(circle at 92% 8%,rgba(247,200,75,.22),transparent 32%),
    linear-gradient(135deg,#f7fbff 0%,#ffffff 48%,#fff8e4 100%)!important;
  color:var(--pp-ink)!important;
}

body#password #wrapper,
body.page-password #wrapper,
body[class*="password"] #wrapper{
  position:relative!important;
  overflow:hidden!important;
  padding:28px 16px 42px!important;
  background:transparent!important;
}
body#password #wrapper:before,
body.page-password #wrapper:before,
body[class*="password"] #wrapper:before,
body#password #wrapper:after,
body.page-password #wrapper:after,
body[class*="password"] #wrapper:after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:0!important;
  border-radius:999px!important;
}
body#password #wrapper:before,
body.page-password #wrapper:before,
body[class*="password"] #wrapper:before{
  width:420px!important;height:420px!important;
  left:-180px!important;top:120px!important;
  background:radial-gradient(circle,rgba(18,168,232,.15),transparent 66%)!important;
}
body#password #wrapper:after,
body.page-password #wrapper:after,
body[class*="password"] #wrapper:after{
  width:380px!important;height:380px!important;
  right:-150px!important;bottom:80px!important;
  background:radial-gradient(circle,rgba(247,200,75,.18),transparent 66%)!important;
}

body#password #wrapper>.container,
body#password #content-wrapper,
body#password #main,
body#password .breadcrumb,
body#password .page-header,
body#password #content,
body.page-password #wrapper>.container,
body.page-password #content-wrapper,
body.page-password #main,
body.page-password .breadcrumb,
body.page-password .page-header,
body.page-password #content,
body[class*="password"] #wrapper>.container,
body[class*="password"] #content-wrapper,
body[class*="password"] #main,
body[class*="password"] .breadcrumb,
body[class*="password"] .page-header,
body[class*="password"] #content{
  position:relative!important;
  z-index:1!important;
}

body#password .breadcrumb,
body.page-password .breadcrumb,
body[class*="password"] .breadcrumb{
  max-width:1180px!important;
  margin:0 auto 12px!important;
  font-size:13px!important;
  font-weight:700!important;
  opacity:.72!important;
}

body#password .page-header,
body.page-password .page-header,
body[class*="password"] .page-header{
  width:100%!important;
  max-width:1180px!important;
  min-height:132px!important;
  height:auto!important;
  margin:0 auto!important;
  padding:34px 44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!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 84% 20%,rgba(247,200,75,.34),transparent 35%)!important;
  box-shadow:0 26px 80px rgba(7,21,47,.14)!important;
}
body#password .page-header:before,
body.page-password .page-header:before,
body[class*="password"] .page-header:before{
  content:""!important;
  position:absolute!important;
  right:46px!important;top:18px!important;
  width:132px!important;height:132px!important;
  border-radius:38px!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:.72!important;
}
body#password .page-header h1,
body#password h1.page-title,
body#password h1,
body.page-password .page-header h1,
body.page-password h1.page-title,
body.page-password h1,
body[class*="password"] .page-header h1,
body[class*="password"] h1.page-title,
body[class*="password"] h1{
  position:relative!important;
  width:100%!important;
  max-width:760px!important;
  margin:0 auto!important;
  color:#fff!important;
  font-size:34px!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
  font-weight:900!important;
  text-align:center!important;
  text-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}

body#password #content,
body#password div#content.page-content,
body.page-password #content,
body.page-password div#content.page-content,
body[class*="password"] #content,
body[class*="password"] div#content.page-content{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto 26px!important;
  padding:42px 38px 40px!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,.86)!important;
  box-shadow:0 28px 80px rgba(7,21,47,.12)!important;
  backdrop-filter:blur(18px)!important;
}

body#password #content > p,
body#password .page-content > p,
body.page-password #content > p,
body.page-password .page-content > p,
body[class*="password"] #content > p,
body[class*="password"] .page-content > p{
  max-width:900px!important;
  margin:0 auto 34px!important;
  padding:24px 28px!important;
  border:1px solid rgba(18,168,232,.20)!important;
  border-radius:22px!important;
  background:linear-gradient(135deg,rgba(18,168,232,.08),rgba(247,200,75,.10))!important;
  color:#33415f!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:1.55!important;
  text-align:center!important;
  box-shadow:0 18px 44px rgba(7,21,47,.06)!important;
}

body#password form,
body#password .forgotten-password,
body#password .forgotten-password form,
body.page-password form,
body.page-password .forgotten-password,
body.page-password .forgotten-password form,
body[class*="password"] form,
body[class*="password"] .forgotten-password,
body[class*="password"] .forgotten-password form{
  max-width:940px!important;
  margin:0 auto!important;
}

body#password form .form-fields,
body#password form .form-group,
body#password .forgotten-password form,
body.page-password form .form-fields,
body.page-password form .form-group,
body.page-password .forgotten-password form,
body[class*="password"] form .form-fields,
body[class*="password"] form .form-group,
body[class*="password"] .forgotten-password form{
  border-radius:24px!important;
}

body#password form .form-group,
body.page-password form .form-group,
body[class*="password"] form .form-group{
  display:grid!important;
  grid-template-columns:190px minmax(260px,1fr) auto!important;
  gap:18px!important;
  align-items:center!important;
  padding:28px 32px!important;
  border:1px solid rgba(15,35,70,.10)!important;
  background:linear-gradient(180deg,#fff,#fbfdff)!important;
  box-shadow:0 18px 50px rgba(7,21,47,.08)!important;
}
body#password form .form-control-label,
body#password label,
body.page-password form .form-control-label,
body.page-password label,
body[class*="password"] form .form-control-label,
body[class*="password"] label{
  color:#182842!important;
  font-size:14px!important;
  font-weight:900!important;
}
body#password input[type="email"],
body#password input[type="text"],
body#password .form-control,
body.page-password input[type="email"],
body.page-password input[type="text"],
body.page-password .form-control,
body[class*="password"] input[type="email"],
body[class*="password"] input[type="text"],
body[class*="password"] .form-control{
  min-height:54px!important;
  border:1px solid rgba(16,36,71,.14)!important;
  border-radius:16px!important;
  background:#fbfdff!important;
  color:var(--pp-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92)!important;
  font-weight:650!important;
}
body#password input:focus,
body.page-password input:focus,
body[class*="password"] input: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#password .btn-primary,
body#password button[type="submit"],
body#password input[type="submit"],
body.page-password .btn-primary,
body.page-password button[type="submit"],
body.page-password input[type="submit"],
body[class*="password"] .btn-primary,
body[class*="password"] button[type="submit"],
body[class*="password"] input[type="submit"]{
  min-height:54px!important;
  padding:0 24px!important;
  white-space:nowrap!important;
  border:0!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,#0b6fd3 0%,#12a8e8 58%,#64d2ff 100%)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:-.01em!important;
  box-shadow:0 18px 34px rgba(18,112,211,.25)!important;
}
body#password .btn-primary:hover,
body#password button[type="submit"]:hover,
body.page-password .btn-primary:hover,
body.page-password button[type="submit"]:hover,
body[class*="password"] .btn-primary:hover,
body[class*="password"] button[type="submit"]:hover{
  filter:saturate(1.06) brightness(1.02)!important;
  box-shadow:0 22px 42px rgba(18,112,211,.31)!important;
}

body#password a[href*="connexion"],
body#password a[href*="login"],
body.page-password a[href*="connexion"],
body.page-password a[href*="login"],
body[class*="password"] a[href*="connexion"],
body[class*="password"] a[href*="login"]{
  color:#12a8e8!important;
  font-weight:800!important;
  text-decoration:none!important;
}

@media (max-width:991px){
  body#password .page-header,
  body.page-password .page-header,
  body[class*="password"] .page-header{min-height:118px!important;padding:28px 22px!important;border-radius:24px 24px 0 0!important;}
  body#password .page-header h1,
  body.page-password .page-header h1,
  body[class*="password"] .page-header h1{font-size:30px!important;}
  body#password #content,
  body.page-password #content,
  body[class*="password"] #content{padding:28px 18px 30px!important;border-radius:0 0 24px 24px!important;}
  body#password form .form-group,
  body.page-password form .form-group,
  body[class*="password"] form .form-group{display:block!important;padding:22px 18px!important;}
  body#password form .form-control-label,
  body.page-password form .form-control-label,
  body[class*="password"] form .form-control-label{display:block!important;margin-bottom:10px!important;}
  body#password .btn-primary,
  body#password button[type="submit"],
  body.page-password .btn-primary,
  body.page-password button[type="submit"],
  body[class*="password"] .btn-primary,
  body[class*="password"] button[type="submit"]{width:100%!important;margin-top:14px!important;}
}