/* ============================================================
   japanadspro — habillage moderne 2026 (surcouche de style.css)
   Palette : bleu royal #153fa6 / #3b6ef5  +  or #ffc31a
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Fira+Sans:wght@400;500&display=swap');

:root{
  --jap-blue-900:#0d2a73;
  --jap-blue-700:#153fa6;
  --jap-blue-500:#234eb6;
  --jap-blue-400:#3b6ef5;
  --jap-gold:#ffc31a;
  --jap-gold-dark:#f5a800;
  --jap-ink:#22315e;
  --jap-muted:#61729f;
  --jap-bg:#f6f8fd;
  --jap-radius:20px;
  --jap-shadow-sm:0 4px 14px rgba(21,63,166,.08);
  --jap-shadow-md:0 12px 30px rgba(21,63,166,.14);
  --jap-shadow-lg:0 24px 60px rgba(13,42,115,.22);
}

/* ---------- base ---------- */
body{
  background:var(--jap-bg);
  color:var(--jap-muted);
}
h1,h2,h3,h4,.title,.entry-title{
  font-family:'Outfit','Fira Sans',sans-serif !important;
  letter-spacing:-.01em;
}
h2.title{color:var(--jap-blue-700);}
::selection{background:var(--jap-gold);color:var(--jap-blue-900);}
html{scroll-behavior:smooth;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#e8edf8;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--jap-blue-400),var(--jap-blue-700));border-radius:99px;}

/* ---------- animations ---------- */
@keyframes japFadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes japFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-22px) scale(1.04);}}
@keyframes japShine{0%{transform:translateX(-130%) skewX(-18deg);}100%{transform:translateX(230%) skewX(-18deg);}}
@keyframes japPulse{0%,100%{box-shadow:0 10px 28px rgba(255,195,26,.35);}50%{box-shadow:0 10px 40px rgba(255,195,26,.6);}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
}

/* ---------- barre de navigation ---------- */
nav.navbar{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(21,63,166,.08), var(--jap-shadow-sm);
}
nav.navbar .nav-link{
  font-weight:500;color:var(--jap-ink);
  border-radius:12px;
  transition:color .2s ease, background .2s ease, transform .2s ease;
}
nav.navbar .nav-link:hover{color:var(--jap-blue-500);transform:translateY(-1px);}
nav.navbar .nav-item.register .nav-link{
  background:linear-gradient(135deg,var(--jap-gold),var(--jap-gold-dark));
  color:var(--jap-blue-900) !important;
  font-weight:700;
  box-shadow:0 6px 18px rgba(245,168,0,.35);
  border-radius:14px;
}
nav.navbar .nav-item.register .nav-link:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(245,168,0,.45);}
nav.navbar .nav-item.login .nav-link{
  border:2px solid rgba(21,63,166,.25);border-radius:14px;
}
nav.navbar .nav-item.login .nav-link:hover{border-color:var(--jap-blue-500);background:rgba(35,78,182,.06);}

/* ---------- héros de la page d'accueil ---------- */
.index-header{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(59,110,245,.55), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(255,195,26,.18), transparent 55%),
    linear-gradient(160deg,#0d2a73 0%, #153fa6 55%, #234eb6 100%) !important;
  padding:70px 0 110px !important;
}
.index-header::before,
.index-header::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 65%);
}
.index-header::before{width:420px;height:420px;top:-140px;right:6%;animation:japFloat 9s ease-in-out infinite;}
.index-header::after{width:260px;height:260px;bottom:-90px;left:4%;animation:japFloat 12s ease-in-out infinite reverse;}
.index-header .title{
  font-size:3rem;font-weight:800;
  text-shadow:0 4px 24px rgba(0,0,0,.25);
  animation:japFadeUp .7s ease both;
}
.index-header p,.index-header .subtitle{
  color:#c9d7ff !important;
  animation:japFadeUp .7s .15s ease both;
}
.index-header .btn{animation:japFadeUp .7s .3s ease both;}

/* ---------- boutons ---------- */
.btn{border-radius:14px !important;transition:transform .2s ease, box-shadow .25s ease, filter .2s ease;}
.btn.btn-primary,.btn.btn-secondary{
  background:linear-gradient(135deg,var(--jap-blue-400),var(--jap-blue-700)) !important;
  border:none !important;
  box-shadow:0 10px 26px rgba(21,63,166,.35);
  font-weight:600;
}
.btn.btn-primary:hover,.btn.btn-secondary:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(21,63,166,.45);}
.btn.btn-white{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--jap-gold),var(--jap-gold-dark)) !important;
  color:var(--jap-blue-900) !important;
  font-weight:800;border:none !important;
  padding:14px 34px;
  animation:japFadeUp .7s .3s ease both, japPulse 3.2s 1.2s ease-in-out infinite;
}
.btn.btn-white::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:japShine 3.4s 1s ease-in-out infinite;
}
.btn.btn-white:hover{transform:translateY(-3px) scale(1.02);}

/* CTA du héros : or, lisible sur fond bleu */
.index-header .btn,
.index-header .btn.btn-primary,
.index-header .btn.btn-secondary{
  background:linear-gradient(135deg,var(--jap-gold),var(--jap-gold-dark)) !important;
  color:var(--jap-blue-900) !important;
  font-weight:800;
  padding:14px 34px;
  box-shadow:0 10px 28px rgba(255,195,26,.35);
}
.index-header .btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(255,195,26,.5);}

/* ---------- cartes "features" ---------- */
.features .box{
  background:#fff;border:1px solid rgba(21,63,166,.08);
  border-radius:var(--jap-radius);
  box-shadow:var(--jap-shadow-sm);
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.features .box:hover{
  transform:translateY(-8px);
  box-shadow:var(--jap-shadow-md);
  border-color:rgba(59,110,245,.35);
}
.features .box img{filter:drop-shadow(0 10px 18px rgba(21,63,166,.25));transition:transform .3s ease;}
.features .box:hover img{transform:scale(1.07) rotate(-2deg);}
.features h4{color:var(--jap-blue-700);}

/* ---------- statistiques ---------- */
.site-stats{
  border-radius:24px !important;
  box-shadow:var(--jap-shadow-md);
  border:1px solid rgba(21,63,166,.07);
}
.site-stats p strong{
  font-family:'Outfit',sans-serif;font-size:2.3rem;font-weight:800;
  background:linear-gradient(135deg,var(--jap-blue-400),var(--jap-blue-900));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.site-stats i{color:var(--jap-gold-dark);}

/* ---------- bandeau "get started" ---------- */
.get-started{
  position:relative;overflow:hidden;
  background:
    radial-gradient(700px 380px at 90% 20%, rgba(255,195,26,.22), transparent 55%),
    linear-gradient(135deg,#153fa6, #0d2a73) !important;
}
.get-started::before{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  top:-120px;left:-80px;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.14), transparent 65%);
  animation:japFloat 10s ease-in-out infinite;
}
.get-started .title,.get-started h2{color:#fff !important;}
.get-started p{color:#c9d7ff !important;}

/* ---------- page premium : cartes de prix ---------- */
.premium-page .plan{padding:12px;}
.premium-page .plan-inner{
  background:#fff;border-radius:var(--jap-radius);
  border:1px solid rgba(21,63,166,.10);
  box-shadow:var(--jap-shadow-sm);
  overflow:visible;
  transition:transform .25s ease, box-shadow .3s ease, border-color .25s ease;
}
.premium-page .plan-inner:hover{
  transform:translateY(-10px);
  box-shadow:var(--jap-shadow-lg);
  border-color:rgba(59,110,245,.45);
}
.premium-page .entry-title{border-radius:var(--jap-radius) var(--jap-radius) 0 0;}
.premium-page .entry-title>h3{border-radius:var(--jap-radius) var(--jap-radius) 0 0;}
/* la carte vedette (classe .basic = plan 60 jours doré) */
.premium-page .plan.basic .plan-inner{
  border:2px solid var(--jap-gold);
  box-shadow:0 18px 44px rgba(245,168,0,.28);
}
/* prix : blanc sur les pastilles foncées, comme a l'origine */
.premium-page .plan .price{
  font-family:'Outfit',sans-serif;font-weight:800;color:#fff;
}
/* ruban "Best choice" */
.premium-page .hot{
  background:linear-gradient(135deg,#ff5757,#d91f1f) !important;
  border-radius:99px !important;
  padding:5px 14px !important;
  top:-14px !important;right:10px !important;
  box-shadow:0 8px 18px rgba(217,31,31,.45);
  letter-spacing:.03em;
}

/* ---------- formulaires (login, mot de passe…) ---------- */
.form-control{
  border-radius:12px !important;
  border:1.5px solid rgba(21,63,166,.18) !important;
  transition:border-color .2s ease, box-shadow .2s ease !important;
}
.form-control:focus{
  border-color:var(--jap-blue-400) !important;
  box-shadow:0 0 0 4px rgba(59,110,245,.15) !important;
}
.auth-form{
  background:#fff;padding:34px;border-radius:var(--jap-radius);
  border:1px solid rgba(21,63,166,.08);
  box-shadow:var(--jap-shadow-md);
  animation:japFadeUp .5s ease both;
}

/* ---------- espace membre ---------- */
.widget{
  border-radius:var(--jap-radius) !important;
  background:#fff !important;
  border:1px solid rgba(21,63,166,.10) !important;
  box-shadow:var(--jap-shadow-sm);
  transition:transform .25s ease, box-shadow .3s ease;
}
.widget:hover{transform:translateY(-4px);box-shadow:var(--jap-shadow-md);}
.widget .price{color:var(--jap-blue-700);font-family:'Outfit',sans-serif;font-weight:800;}
.nav-pills .nav-link{border-radius:12px;transition:background .2s ease,color .2s ease;}
.nav-pills .nav-link.active{
  background:linear-gradient(135deg,var(--jap-blue-400),var(--jap-blue-700)) !important;
  box-shadow:0 8px 20px rgba(21,63,166,.3);
}

/* ---------- pied de page ---------- */
.footer{
  background:linear-gradient(180deg,#0f2f83,#0b2158) !important;
  color:#aebcde;
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,var(--jap-blue-400),var(--jap-gold)) 1;
}
.footer h4{color:#fff !important;}
.footer .menu li a{
  color:#aebcde;transition:color .2s ease, transform .2s ease;display:inline-block;
}
.footer .menu li a:hover{color:var(--jap-gold);transform:translateX(4px);text-decoration:none;}
.footer .copyrights{color:#7e93c9;}
.footer .logo img{filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}