/* ═══ WAKTI STUDIO v3 — BASE CSS ═══ */
:root {
  --n:#0F172A; --n2:#1E293B; --n3:#0B1120;
  --g:#22C55E; --em:#059669; --go:#D4AF37; --go2:#B8960D;
  --w:#fff; --ink:#0B1220; --mu:#94A3B8;
  --gl:rgba(255,255,255,.04); --gl2:rgba(255,255,255,.08);
  --gg:rgba(34,197,94,.2); --gog:rgba(212,175,55,.18);
  --r:12px; --rs:8px; --rl:20px;
  --sh:0 4px 24px rgba(0,0,0,.15); --sh-lg:0 12px 48px rgba(0,0,0,.3);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:'Inter',system-ui,sans-serif; background:var(--n); color:#fff; overflow-x:hidden; line-height:1.7 }
h1,h2,h3,h4 { font-family:'Manrope',system-ui,sans-serif; line-height:1.1; font-weight:800; letter-spacing:-.02em }
h1 { font-size:clamp(36px,5.5vw,64px) }
h2 { font-size:clamp(28px,3.5vw,46px) }
h3 { font-size:clamp(17px,2vw,21px); font-weight:700; letter-spacing:-.01em }
h4 { font-size:15px; font-weight:700 }
a { text-decoration:none; color:inherit }
ul,ol { list-style:none }
em { font-style:normal; color:var(--g) }
.ctr { max-width:1080px; margin:0 auto; padding:0 28px }
.sec { padding:96px 0 }
.sh  { text-align:center; margin-bottom:64px }
.stag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px }
.stit { margin-bottom:14px }
.sdesc { font-size:16px; color:rgba(255,255,255,.55); max-width:500px; margin:0 auto; line-height:1.7 }

/* ── BUTTONS ── */
.bg {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--g),var(--em));
  color:var(--ink); font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
  padding:13px 26px; border-radius:var(--rs); border:none; cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.bg::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,.15); opacity:0; transition:opacity .2s }
.bg:hover { transform:translateY(-2px); box-shadow:0 0 32px var(--gg); filter:brightness(1.06) }
.bg:hover::before { opacity:1 }
.bg.lg { padding:16px 34px; font-size:16px }
.bgo {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--go),var(--go2));
  color:var(--ink); font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
  padding:13px 26px; border-radius:var(--rs); border:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.bgo:hover { transform:translateY(-2px); box-shadow:0 0 32px var(--gog) }
.bgo.lg { padding:16px 34px; font-size:16px }
.bgh {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gl); color:rgba(255,255,255,.8);
  font-family:'Inter',sans-serif; font-size:15px; font-weight:500;
  padding:13px 26px; border-radius:var(--rs);
  border:1px solid var(--gl2); cursor:pointer;
  transition:background .2s, border-color .2s;
}
.bgh:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2) }
.bnav {
  display:inline-flex; align-items:center;
  background:linear-gradient(135deg,var(--g),var(--em));
  color:var(--ink); font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
  padding:10px 20px; border-radius:var(--rs); border:none; cursor:pointer;
  transition:filter .2s, transform .15s;
}
.bnav:hover { filter:brightness(1.08); transform:translateY(-1px) }

/* ── ANNOUNCEMENT BAR (pill flottante bas-centre) ── */
.ann-bar {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:rgba(10,14,26,.97); backdrop-filter:blur(20px);
  border:1px solid rgba(99,102,241,.22);
  border-radius:99px; padding:10px 44px 10px 16px;
  display:flex; align-items:center; gap:10px;
  z-index:1001; white-space:nowrap;
  box-shadow:0 8px 40px rgba(0,0,0,.55),0 0 0 1px rgba(99,102,241,.08);
  animation:annin .5s cubic-bezier(.16,1,.3,1);
}
@keyframes annin { from{transform:translateX(-50%) translateY(20px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
.ann-in { display:flex; align-items:center; gap:9px; font-size:13px; color:rgba(255,255,255,.7) }
.ann-dot { width:6px; height:6px; background:#a5b4fc; border-radius:50%; animation:lp 1.5s infinite; flex-shrink:0 }
.ann-cta { color:#a5b4fc; font-weight:600; font-size:13px; white-space:nowrap; transition:opacity .2s }
.ann-cta:hover { opacity:.75 }
.ann-x { position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:rgba(255,255,255,.3); font-size:16px; cursor:pointer; line-height:1; padding:4px; transition:color .2s }
.ann-x:hover { color:#fff }
@media(max-width:640px){
  .ann-bar { left:16px; right:16px; bottom:16px; transform:none; border-radius:14px; white-space:normal; padding:12px 42px 12px 14px }
  @keyframes annin { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
}

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .3s, backdrop-filter .3s;
}
.nav.scrolled {
  background:rgba(15,23,42,.96); backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 20px rgba(0,0,0,.2);
}
.nav-in {
  max-width:1080px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:24px; height:68px;
}
.logo { display:flex; align-items:center; gap:10px }
.logo-text { display:flex; flex-direction:column; line-height:1.1 }
.lw { font-family:'Manrope',sans-serif; font-weight:800; font-size:18px; color:#fff; letter-spacing:-.02em }
.ls { font-family:'Manrope',sans-serif; font-weight:600; font-size:10px; color:var(--go); letter-spacing:.1em; text-transform:uppercase }
.nl { display:flex; gap:22px; margin-left:auto }
.nl a { font-size:14px; color:rgba(255,255,255,.55); transition:color .22s,transform .22s; white-space:nowrap; position:relative; display:inline-block }
.nl a::after { content:''; position:absolute; bottom:-3px; left:50%; right:50%; height:1.5px; background:var(--g); border-radius:99px; transition:left .22s,right .22s }
.nl a:hover { color:var(--g); transform:scale(1.1) }
.nl a:hover::after { left:0; right:0 }
.nl a.act { color:var(--g) }
.nl a.act::after { left:0; right:0 }

/* ── LANG SWITCHER ── */
.lang-sw {
  display:flex; align-items:center; gap:3px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:99px; padding:3px;
}
.lb {
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px;
  border:none; background:transparent; color:rgba(255,255,255,.45);
  cursor:pointer; transition:all .2s; font-family:'Inter',sans-serif;
}
.lb.on { background:linear-gradient(135deg,var(--g),var(--em)); color:var(--ink) }

/* ── BURGER ── */
.brg { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; margin-left:8px }
.brg span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:.3s }
.mm { display:none; position:fixed; top:68px; left:0; right:0; z-index:999; background:var(--n2); border-bottom:1px solid rgba(255,255,255,.08); padding:20px 28px; flex-direction:column; gap:14px }
.mm.open { display:flex }
.mml { font-size:16px; color:rgba(255,255,255,.8); font-weight:500 }
.mml.act { color:var(--g) }

/* ── REVEAL ANIMATIONS ── */
.rev,.revc { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease }
.rev.on,.revc.on { opacity:1; transform:none }
.revc:nth-child(2) { transition-delay:.08s }
.revc:nth-child(3) { transition-delay:.16s }
.revc:nth-child(4) { transition-delay:.1s }
.revc:nth-child(5) { transition-delay:.18s }
.revc:nth-child(6) { transition-delay:.26s }

/* ── FOOTER ── */
.footer { background:var(--ink); padding:64px 0 28px; border-top:1px solid rgba(255,255,255,.06) }
.ft { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px }
.fb p { font-size:14px; color:rgba(255,255,255,.35); margin-top:14px; line-height:1.6 }
.fc h4 { font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; color:rgba(255,255,255,.8); margin-bottom:16px }
.fc a { display:block; font-size:13px; color:rgba(255,255,255,.35); margin-bottom:10px; transition:color .2s }
.fc a:hover { color:rgba(255,255,255,.7) }
.fb2 { display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.06); padding-top:24px; font-size:13px; color:rgba(255,255,255,.25) }
.fl { display:flex; gap:20px }
.fl a { color:rgba(255,255,255,.25); transition:color .2s }
.fl a:hover { color:rgba(255,255,255,.55) }

/* ── PAGE HERO BASE ── */
.page-hero { min-height:100vh; padding:100px 28px 60px; display:flex; align-items:center; position:relative; overflow:hidden }
.page-hero-in { position:relative; z-index:1; max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; width:100% }
.pb { display:inline-flex; align-items:center; gap:8px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:var(--g); font-size:12px; font-weight:600; padding:5px 14px; border-radius:99px; margin-bottom:20px; text-transform:uppercase; letter-spacing:.06em }
.pbdot { width:7px; height:7px; background:var(--g); border-radius:50%; animation:pbpulse 2s infinite }
@keyframes pbpulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.5);opacity:.6} }
.pb-go { background:rgba(212,175,55,.1); border-color:rgba(212,175,55,.25); color:var(--go) }
.pbdot-go { background:var(--go) }

/* ── MODULE GRID ── */
.mgrd { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.mcard { background:var(--gl); border:1px solid var(--gl2); border-radius:var(--r); padding:22px; transition:border-color .25s, transform .2s }
.mcard:hover { border-color:rgba(34,197,94,.3); transform:translateY(-2px) }
.mcard-ic { font-size:24px; margin-bottom:12px }
.mcard h4 { color:#fff; margin-bottom:7px }
.mcard p { font-size:13px; color:rgba(255,255,255,.47); line-height:1.55 }

/* ── BENEFITS ── */
.ben-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
.blist { display:flex; flex-direction:column; gap:18px }
.bi { display:flex; gap:14px; align-items:flex-start }
.bi-ic { width:38px; height:38px; border-radius:9px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--g); font-size:16px }
.bi h4 { color:#fff; margin-bottom:4px }
.bi p { font-size:13px; color:rgba(255,255,255,.47); line-height:1.55 }
.stats-vis { background:var(--gl); border:1px solid var(--gl2); border-radius:var(--rl); padding:28px }
.sv-title { font-family:'Manrope',sans-serif; font-size:17px; font-weight:700; color:#fff; margin-bottom:22px }
.bar-item { margin-bottom:18px }
.bar-lbl { display:flex; justify-content:space-between; font-size:13px; color:rgba(255,255,255,.58); margin-bottom:7px }
.bar-v { color:var(--g); font-weight:600 }
.bar-track { height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden }
.bar-fill { height:100%; background:linear-gradient(90deg,var(--g),var(--em)); border-radius:3px; width:0; transition:width 1.4s cubic-bezier(.16,1,.3,1) }

/* ── CTA BOX ── */
.ctabox { position:relative; overflow:hidden; background:var(--gl); border:1px solid var(--gl2); border-radius:var(--rl); padding:72px 56px; text-align:center }
.cta-halos { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none }
.ch1 { position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(34,197,94,.1),transparent 65%); top:-200px; right:-100px; filter:blur(80px) }
.ch2 { position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(212,175,55,.08),transparent 65%); bottom:-100px; left:5%; filter:blur(80px) }
.ctac { position:relative; z-index:1 }
.ctac h2 { margin-bottom:14px }
.ctac>p { font-size:16px; color:rgba(255,255,255,.52); margin-bottom:36px; max-width:440px; margin-left:auto; margin-right:auto; line-height:1.7 }
.cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; align-items:center }
.cta-mail { display:inline-flex; align-items:center; gap:7px; font-size:15px; color:rgba(255,255,255,.45); transition:color .2s }
.cta-mail:hover { color:#fff }
.trust { display:flex; gap:24px; justify-content:center; flex-wrap:wrap }
.ti { display:flex; align-items:center; gap:7px; font-size:13px; color:rgba(255,255,255,.38) }
.td { width:6px; height:6px; background:var(--g); border-radius:50% }

/* ── PRICING (partagé home + tarifs) ── */
.price-sec { background:var(--n) }
.price-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.price-card { background:var(--gl); border:1px solid var(--gl2); border-radius:var(--r); padding:28px; display:flex; flex-direction:column; position:relative; transition:border-color .25s,transform .2s,box-shadow .3s }
.price-card:hover { border-color:rgba(34,197,94,.3); transform:translateY(-2px) }
.price-card.pop { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.04); animation:popGlow 3s ease-in-out infinite }
@keyframes popGlow { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.08)} 50%{box-shadow:0 0 28px 4px rgba(34,197,94,.12)} }
.price-pop-tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--g),var(--em)); color:var(--ink); font-size:10px; font-weight:700; padding:3px 12px; border-radius:99px; white-space:nowrap; letter-spacing:.04em; animation:popTagFloat 2.5s ease-in-out infinite }
@keyframes popTagFloat { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-3px)} }
.price-name { font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; color:#fff; margin-bottom:6px }
.price-from { font-size:11px; color:rgba(255,255,255,.35); margin-bottom:2px }
.price-amount { font-family:'Manrope',sans-serif; font-size:32px; font-weight:800; letter-spacing:-.02em; margin-bottom:20px; background:linear-gradient(90deg,var(--g) 0%,rgba(34,197,94,.7) 50%,var(--g) 100%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:priceShimmer 4s linear infinite }
@keyframes priceShimmer { 0%{background-position:0%} 100%{background-position:200%} }
.price-feats { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:24px; flex:1 }
.price-feats li { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.6) }
.price-feats li::before { content:'✓'; color:var(--g); font-weight:700; flex-shrink:0 }
.price-note { text-align:center; font-size:12px; color:rgba(255,255,255,.3); margin-top:28px; line-height:1.7 }
/* stagger entrance */
.price-grid .price-card.revc:nth-child(1){transition-delay:.04s}
.price-grid .price-card.revc:nth-child(2){transition-delay:.1s}
.price-grid .price-card.revc:nth-child(3){transition-delay:.16s}
.price-grid .price-card.revc:nth-child(4){transition-delay:.22s}

/* ── FAQ (partagé home + tarifs) ── */
.faq-sec { background:var(--n2) }
.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column }
.faq-item { border-bottom:1px solid rgba(255,255,255,.07) }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; cursor:pointer; font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:rgba(255,255,255,.85); transition:color .2s; background:none; border:none; width:100%; text-align:left }
.faq-q:hover { color:#fff }
.faq-q .faq-arr { font-size:18px; color:rgba(255,255,255,.3); transition:transform .3s,color .2s; flex-shrink:0 }
.faq-item.open .faq-arr { transform:rotate(45deg); color:var(--g) }
.faq-item.open .faq-q { color:var(--g) }
.faq-a { display:none; padding:0 0 20px; font-size:14px; color:rgba(255,255,255,.55); line-height:1.75 }
.faq-item.open .faq-a { display:block }

/* ── PORTFOLIO SEPARATOR ── */
.pgrid-sep { grid-column:1/-1; display:flex; align-items:center; gap:16px; padding:12px 0 8px }
.pgrid-sep-line { flex:1; height:1px; background:rgba(255,255,255,.08) }
.pgrid-sep-label { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(99,102,241,.75); background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.18); padding:3px 12px; border-radius:99px; white-space:nowrap }

/* ── FORM ELEMENTS ── */
.fgrp { display:flex; flex-direction:column; gap:6px; margin-bottom:16px }
.fgrp label { font-size:13px; font-weight:500; color:rgba(255,255,255,.7) }
.fgrp input,.fgrp select,.fgrp textarea {
  padding:12px 16px; border-radius:var(--rs); border:1.5px solid rgba(255,255,255,.1);
  font-family:'Inter',sans-serif; font-size:14px; color:#fff;
  background:rgba(255,255,255,.05); transition:border-color .2s, box-shadow .2s; outline:none; resize:vertical;
}
.fgrp input:focus,.fgrp select:focus,.fgrp textarea:focus { border-color:var(--g); box-shadow:0 0 0 3px rgba(34,197,94,.1) }
.fgrp select option { background:var(--n2) }
.fgrp input::placeholder,.fgrp textarea::placeholder { color:rgba(255,255,255,.25) }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:14px }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .page-hero-in { grid-template-columns:1fr; gap:40px }
  .ben-grid { grid-template-columns:1fr }
  .ft { grid-template-columns:1fr 1fr }
  .ctr { padding:0 24px }
  .sec { padding:80px 0 }
}
@media (max-width:768px) {
  .nav-in { gap:16px }
  .nl a { font-size:13px }
  .ctr { padding:0 20px }
  .sec { padding:64px 0 }
  .sh { margin-bottom:48px }
  .ben-grid { grid-template-columns:1fr }
  .mgrd { grid-template-columns:1fr 1fr }
  .ft { grid-template-columns:1fr 1fr }
  .ctabox { padding:52px 36px }
  .trust { gap:16px }
}
@media (max-width:900px) {
  .nl,.bnav { display:none }
  .brg { display:flex }
  .ft { grid-template-columns:1fr }
  .fb2 { flex-direction:column; gap:12px; text-align:center }
  .ctabox { padding:36px 20px }
  .frow { grid-template-columns:1fr }
  .sec { padding:52px 0 }
  .sh { margin-bottom:36px }
  .stit { font-size:clamp(22px,6vw,36px) }
}
@media (max-width:480px) {
  .ctr { padding:0 16px }
  .mgrd { grid-template-columns:1fr }
  .ctabox { padding:28px 16px }
  .trust { flex-direction:column; align-items:center; gap:10px }
  .cta-btns { flex-direction:column; align-items:center }
}

/* ── LOGO OFFICIEL ── */
.logo { display:flex; align-items:center; gap:0; text-decoration:none; }
.logo-inner { display:flex; align-items:center; gap:10px; }
.logo-text { display:flex; flex-direction:column; line-height:1.1; margin-left:2px; }
.lw { font-family:'Manrope',sans-serif; font-weight:800; font-size:18px; color:#fff; letter-spacing:-.02em; }
.ls { font-family:'Manrope',sans-serif; font-weight:600; font-size:10px; color:var(--go); letter-spacing:.1em; text-transform:uppercase; }

/* ── COOKIE BANNER RGPD ── */
.cookie-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:9000;
  background:var(--n2); border-top:1px solid rgba(255,255,255,.1);
  padding:16px 28px; animation:slideup .4s ease;
}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cookie-content { max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cookie-content p { font-size:14px; color:rgba(255,255,255,.65); flex:1; line-height:1.5; }
.cookie-btns { display:flex; gap:10px; flex-shrink:0; }
.cookie-refuse { background:transparent; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6); font-family:'Inter',sans-serif; font-size:14px; font-weight:500; padding:9px 18px; border-radius:var(--rs); cursor:pointer; transition:border-color .2s; }
.cookie-refuse:hover { border-color:rgba(255,255,255,.4); color:#fff; }

/* ── LOGO FIXES ── */
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-text { display:flex; flex-direction:column; line-height:1.1; }
.lw { font-family:'Manrope',sans-serif; font-weight:800; font-size:18px; color:#fff; letter-spacing:-.02em; }
.ls { font-family:'Manrope',sans-serif; font-weight:600; font-size:10px; color:var(--go); letter-spacing:.1em; text-transform:uppercase; }

/* ── FORMULAIRE SUCCESS / ERROR ── */
.form-msg { display:none; text-align:center; padding:20px 0; }
.form-msg.show { display:block; animation:fadeIn .4s ease; }
.form-msg-success .msg-ico { font-size:56px; margin-bottom:16px; animation:pop .5s cubic-bezier(.16,1,.3,1); }
.form-msg-success h3 { font-family:'Manrope',sans-serif; font-size:22px; color:#fff; margin-bottom:8px; }
.form-msg-success p { font-size:15px; color:rgba(255,255,255,.55); margin-bottom:20px; line-height:1.7; }
.form-msg-error { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); border-radius:var(--r); padding:16px 20px; color:#FCA5A5; font-size:14px; }
@keyframes pop { from{transform:scale(.3);opacity:0}80%{transform:scale(1.1)}to{transform:scale(1);opacity:1} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }