:root{
  --bg:#070b18;
  --bg-2:#0a0f22;
  --panel:#0d142b;
  --panel-2:#101a38;
  --border:rgba(120,140,255,.10);
  --border-strong:rgba(120,140,255,.22);
  --txt:#eef1fb;
  --muted:#9aa3c4;
  --muted-2:#6b7398;
  --blue:#3b82f6;
  --blue-2:#60a5fa;
  --violet:#7c5cff;
  --violet-2:#a78bff;
  --grad:linear-gradient(135deg,#4f7cff 0%,#7c5cff 55%,#a855f7 100%);
  --grad-text:linear-gradient(120deg,#5b8cff,#9b7bff);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}

/* ambient glow */
.glow{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5;pointer-events:none;z-index:0}

/* ===== NAV ===== */
header{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);background:rgba(7,11,24,.65);border-bottom:1px solid var(--border)}
nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.14em;font-size:18px}
.logo-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--grad);box-shadow:0 6px 22px rgba(99,102,241,.4)}
.logo-mark svg{width:20px;height:20px}
.nav-links{display:flex;gap:34px;font-size:14.5px;color:var(--muted);font-weight:500}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--txt)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;border:none;cursor:pointer;font-family:inherit;border-radius:30px;transition:transform .2s,box-shadow .25s,opacity .2s}
.btn-primary{background:var(--grad);color:#fff;padding:12px 24px;box-shadow:0 8px 26px rgba(99,102,241,.36)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(99,102,241,.5)}
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--border-strong);color:var(--txt);padding:12px 22px}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.menu-toggle{display:none;background:none;border:none;color:var(--txt);cursor:pointer}

/* ===== HERO ===== */
.hero{padding:78px 0 60px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:7px 14px;border-radius:30px;background:rgba(124,92,255,.12);border:1px solid var(--border-strong);color:var(--violet-2);margin-bottom:26px}
h1{font-size:clamp(38px,5vw,62px);line-height:1.04;font-weight:800;letter-spacing:-.02em;margin-bottom:22px}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p.lead{color:var(--muted);font-size:17px;max-width:430px;margin-bottom:26px}
.hero-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin-bottom:34px;max-width:430px}
.check{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#c3cae6}
.check .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(124,92,255,.16);flex-shrink:0}
.check .dot svg{width:11px;height:11px;stroke:var(--violet-2)}
.hero-cta{display:flex;align-items:center;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:12px;color:var(--txt);font-weight:600;font-size:14.5px;background:none;border:none;cursor:pointer;font-family:inherit}
.play .ring{width:46px;height:46px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;transition:.25s}
.play:hover .ring{border-color:var(--violet);background:rgba(124,92,255,.1)}
.trust-line{font-size:13px;color:var(--muted-2)}

/* hero visual */
.hero-visual{position:relative;perspective:1400px}
.mock{border-radius:18px;overflow:hidden;border:1px solid var(--border-strong);transform:rotateY(-16deg) rotateX(6deg) rotateZ(2deg);box-shadow:0 40px 90px rgba(40,30,120,.5);background:linear-gradient(160deg,#121a38,#0c1228)}
.mock-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.mock-body{padding:22px}
.mock-hero{height:120px;border-radius:10px;background:var(--grad);opacity:.85;margin-bottom:14px;position:relative;overflow:hidden}
.mock-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.25),transparent 60%)}
.mock-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mock-card{height:78px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid var(--border)}
.mock-lines{margin-top:14px;display:grid;gap:8px}
.mock-lines span{height:7px;border-radius:5px;background:rgba(255,255,255,.07)}
.mock-lines span:nth-child(1){width:80%}
.mock-lines span:nth-child(2){width:60%}
.mock-lines span:nth-child(3){width:70%}

/* ===== LOGOS / STATS ===== */
.confiance{margin-top:54px}
.panel{background:linear-gradient(180deg,var(--panel),rgba(13,20,43,.6));border:1px solid var(--border);border-radius:var(--radius)}
.confiance-inner{padding:30px 34px}
.logos-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--border)}
.conf-label{font-size:12px;line-height:1.4;color:var(--muted);font-weight:600;max-width:120px}
.cli-logo{font-family:'Cormorant Garamond',serif;font-size:18px;letter-spacing:.12em;color:#aab2d6;opacity:.75;text-align:center;text-transform:uppercase}
.cli-logo small{display:block;font-size:8px;letter-spacing:.2em;opacity:.7}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:26px;text-align:center}
.stat .num{font-size:34px;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .lbl{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ===== SECTION HEADERS ===== */
.sec{padding:88px 0}
.kicker{text-align:center;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-2);margin-bottom:16px}
.sec-title{text-align:center;font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-bottom:16px}
.sec-sub{text-align:center;color:var(--muted);max-width:540px;margin:0 auto 50px;font-size:16px}

/* ===== SERVICES ===== */
.services-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.svc{padding:26px 22px;background:linear-gradient(180deg,var(--panel),rgba(12,18,40,.5));border:1px solid var(--border);border-radius:var(--radius);transition:.3s;position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:.3s;z-index:-1}
.svc:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 20px 44px rgba(40,30,120,.35)}
.svc-ico{width:46px;height:46px;border-radius:12px;background:rgba(124,92,255,.14);border:1px solid var(--border-strong);display:grid;place-items:center;margin-bottom:18px}
.svc-ico svg{width:22px;height:22px;stroke:var(--violet-2)}
.svc h3{font-size:16.5px;font-weight:700;margin-bottom:10px}
.svc p{font-size:13.5px;color:var(--muted);margin-bottom:16px;line-height:1.55}
.svc-link{font-size:13px;font-weight:600;color:var(--violet-2);display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.svc:hover .svc-link{gap:11px}

/* ===== REALISATIONS ===== */
.real-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:42px;flex-wrap:wrap}
.real-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.real-head .kicker{text-align:left;margin-bottom:14px}
.real-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.proj{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--panel);transition:.3s}
.proj:hover{transform:translateY(-6px);border-color:var(--border-strong)}
.proj-img{height:230px;background-size:cover;background-position:center;position:relative}
.proj-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,11,24,.85),transparent 55%)}
.proj-meta{padding:16px 18px}
.proj-meta .tag{font-size:11px;color:var(--violet-2);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.proj-meta h4{font-size:16px;font-weight:700;margin-top:4px}

/* ===== METHODE ===== */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.method::before{content:"";position:absolute;top:30px;left:11%;right:11%;height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),var(--border-strong),transparent)}
.step{text-align:center;position:relative}
.step-ico{width:62px;height:62px;margin:0 auto 22px;border-radius:50%;background:var(--bg);border:1px solid var(--border-strong);display:grid;place-items:center;position:relative;z-index:1}
.step-ico svg{width:24px;height:24px;stroke:var(--violet-2)}
.step .n{font-size:13px;font-weight:700;color:var(--violet-2);letter-spacing:.1em;margin-bottom:8px}
.step h4{font-size:16px;font-weight:700;margin-bottom:10px}
.step p{font-size:13.5px;color:var(--muted);max-width:230px;margin:0 auto;line-height:1.55}

/* ===== TEMOIGNAGES ===== */
.tmoignages{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tm{padding:28px 26px;background:linear-gradient(180deg,var(--panel),rgba(12,18,40,.5));border:1px solid var(--border);border-radius:var(--radius)}
.tm .stars{color:#7c5cff;font-size:14px;letter-spacing:3px;margin-bottom:16px}
.tm p{font-size:14.5px;color:#c8cee6;font-style:italic;line-height:1.6;margin-bottom:22px}
.tm-author{display:flex;align-items:center;gap:12px}
.tm-av{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff}
.tm-author .name{font-size:14px;font-weight:700}
.tm-author .role{font-size:12px;color:var(--muted)}

/* ===== CTA FINAL ===== */
.cta-final{padding:60px 0}
.cta-box{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--border-strong);background:radial-gradient(120% 140% at 0% 0%,rgba(124,92,255,.22),transparent 50%),linear-gradient(180deg,var(--panel-2),var(--panel));padding:54px}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;position:relative;z-index:2}
.cta-box h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;line-height:1.12;margin-bottom:18px;letter-spacing:-.02em}
.cta-box p{color:var(--muted);margin-bottom:22px;font-size:15.5px}
.cta-perks{display:grid;gap:12px}
.cta-watermark{position:absolute;left:-20px;bottom:-50px;font-size:200px;font-weight:800;opacity:.06;line-height:1;z-index:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.form{display:grid;gap:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form textarea,.form select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border-strong);border-radius:12px;padding:13px 16px;color:var(--txt);font-family:inherit;font-size:14px;transition:.2s}
.form input::placeholder,.form textarea::placeholder{color:var(--muted-2)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--violet);background:rgba(124,92,255,.07)}
.form textarea{min-height:96px;resize:vertical}
.form .btn-primary{justify-content:center;padding:14px}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--border);padding:60px 0 30px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{font-size:13.5px;color:var(--muted);max-width:240px;margin-bottom:20px}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--grad);border-color:transparent;transform:translateY(-2px)}
.socials svg{width:16px;height:16px;fill:var(--muted)}
.socials a:hover svg{fill:#fff}
.foot-col h5{font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:18px}
.foot-col ul{list-style:none;display:grid;gap:11px}
.foot-col li a{font-size:13.5px;color:var(--muted);transition:color .2s}
.foot-col li a:hover{color:var(--txt)}
.foot-col .ico-line{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:11px}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:46px;padding-top:24px;border-top:1px solid var(--border);font-size:12.5px;color:var(--muted-2)}
.foot-bottom .links{display:flex;gap:22px}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .nav-links,.btn.nav-cta{display:none}
  .menu-toggle{display:block}
  .hero-grid{grid-template-columns:1fr;gap:50px}
  .hero-visual{order:-1}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .real-grid{grid-template-columns:repeat(2,1fr)}
  .method{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .method::before{display:none}
  .tmoignages{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr);gap:28px}
  .cta-grid,.foot-grid{grid-template-columns:1fr}
  .cta-box{padding:36px 26px}
}
@media(max-width:560px){
  .hero-checks,.hero-grid{grid-template-columns:1fr}
  .services-grid,.real-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .logos-row{justify-content:center}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   PAGE SERVICES
   ============================================================ */

/* breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--violet-2);transition:color .2s}
.breadcrumb a:hover{color:var(--txt)}
.breadcrumb svg{width:13px;height:13px;stroke:var(--muted-2)}

/* hero services : texte à gauche, visuel à droite (réutilise .hero / .hero-grid) */
.hero-services h1{font-size:clamp(40px,5.2vw,60px)}
.hero-services .lead{max-width:440px}
.hero-pills{display:flex;flex-wrap:wrap;gap:22px;margin-top:30px}
.pill{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#c3cae6}
.pill .pico{width:30px;height:30px;border-radius:9px;background:rgba(124,92,255,.14);border:1px solid var(--border-strong);display:grid;place-items:center;flex-shrink:0}
.pill .pico svg{width:15px;height:15px;stroke:var(--violet-2)}

/* visuel devices */
.devices{position:relative}
.devices .laptop{border-radius:14px;overflow:hidden;border:1px solid var(--border-strong);background:linear-gradient(160deg,#10183a,#0a1026);box-shadow:0 40px 90px rgba(40,30,120,.5)}
.devices .laptop .scr{aspect-ratio:16/10;background:radial-gradient(120% 120% at 70% 20%,rgba(124,92,255,.4),transparent 55%),linear-gradient(160deg,#141d44,#0b1128);position:relative;overflow:hidden}
.devices .laptop .scr::after{content:"";position:absolute;inset:14px;border-radius:8px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(124,92,255,.18),transparent)}
.devices .laptop .base{height:12px;background:linear-gradient(180deg,#1a2350,#0c1330);border-top:1px solid var(--border-strong)}
.devices .phone{position:absolute;right:-6px;bottom:-14px;width:88px;height:178px;border-radius:18px;border:1px solid var(--border-strong);background:linear-gradient(160deg,#161f48,#0a1026);box-shadow:0 24px 50px rgba(20,15,80,.6);overflow:hidden}
.devices .phone::after{content:"";position:absolute;inset:8px;border-radius:11px;background:radial-gradient(120% 120% at 50% 0%,rgba(124,92,255,.4),transparent 60%),#0e1430}

/* services grid : 3 colonnes, icône + texte côte à côte */
.svc-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc2{display:flex;gap:18px;padding:28px 26px;background:linear-gradient(180deg,var(--panel),rgba(12,18,40,.5));border:1px solid var(--border);border-radius:var(--radius);transition:.3s}
.svc2:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 20px 44px rgba(40,30,120,.35)}
.svc2 .svc-ico{margin-bottom:0;flex-shrink:0}
.svc2 h3{font-size:17px;font-weight:700;margin-bottom:10px}
.svc2 p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.svc2 .svc-link{font-size:13px;font-weight:600;color:var(--violet-2);display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.svc2:hover .svc-link{gap:11px}

/* CTA milieu de page (bandeau avec logo W) */
.cta-mid{margin:30px 0}
.cta-mid-box{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;padding:38px 44px;border-radius:22px;border:1px solid var(--border-strong);background:radial-gradient(120% 160% at 0% 0%,rgba(124,92,255,.22),transparent 55%),linear-gradient(180deg,var(--panel-2),var(--panel))}
.cta-mid-logo{width:96px;height:96px;display:grid;place-items:center;flex-shrink:0}
.cta-mid-logo svg{width:84px;height:84px;filter:drop-shadow(0 8px 26px rgba(99,102,241,.55))}
.cta-mid h2{font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin-bottom:10px}
.cta-mid p{color:var(--muted);font-size:14.5px;max-width:430px}

/* stats bar (sans panel, séparateurs verticaux) */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:46px 0}
.statbar .si{display:flex;align-items:center;gap:16px;justify-content:center;padding:6px 0;position:relative}
.statbar .si:not(:last-child)::after{content:"";position:absolute;right:0;top:10%;height:80%;width:1px;background:var(--border)}
.statbar .si-ico{width:50px;height:50px;border-radius:14px;background:rgba(124,92,255,.14);border:1px solid var(--border-strong);display:grid;place-items:center;flex-shrink:0}
.statbar .si-ico svg{width:24px;height:24px;stroke:var(--violet-2)}
.statbar .num{font-size:30px;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.statbar .lbl{font-size:12.5px;color:var(--muted);margin-top:3px}

/* FAQ : 2 colonnes (accordéon + bloc "vous ne trouvez pas") */
.faq-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.faq-head .kicker{text-align:left;margin-bottom:14px}
.faq-head h2{font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;margin-bottom:28px}
.acc{display:grid;gap:12px}
.acc-item{border:1px solid var(--border);border-radius:12px;background:rgba(13,20,43,.5);overflow:hidden;transition:border-color .25s}
.acc-item.open{border-color:var(--border-strong)}
.acc-q{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--txt);list-style:none}
.acc-q::-webkit-details-marker{display:none}
.acc-q .chev{width:18px;height:18px;stroke:var(--violet-2);transition:transform .25s;flex-shrink:0}
.acc-item.open .chev{transform:rotate(180deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 18px;font-size:13.5px;color:var(--muted);line-height:1.6}
.acc-item.open .acc-a{max-height:240px;padding:0 18px 18px}

.faq-aside{padding:40px 34px;border-radius:18px;border:1px solid var(--border-strong);background:radial-gradient(120% 140% at 100% 0%,rgba(124,92,255,.2),transparent 55%),linear-gradient(180deg,var(--panel-2),var(--panel));text-align:left}
.faq-aside .bubble{width:120px;height:96px;margin-bottom:24px;display:grid;place-items:center}
.faq-aside .bubble svg{width:110px;height:90px;filter:drop-shadow(0 10px 26px rgba(99,102,241,.45))}
.faq-aside h3{font-size:22px;font-weight:800;line-height:1.2;margin-bottom:12px}
.faq-aside p{color:var(--muted);font-size:14px;margin-bottom:22px;max-width:260px}

/* responsive page services */
@media(max-width:980px){
  .svc-grid-3{grid-template-columns:1fr}
  .cta-mid-box{grid-template-columns:1fr;text-align:center;justify-items:center;gap:20px}
  .cta-mid p{margin:0 auto}
  .statbar{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .statbar .si:nth-child(2)::after{display:none}
  .faq-grid{grid-template-columns:1fr}
  .faq-head .kicker,.faq-head h2{text-align:left}
}
@media(max-width:560px){
  .statbar{grid-template-columns:1fr;gap:22px}
  .statbar .si::after{display:none!important}
  .hero-pills{gap:14px}
}

/* ============================================================
   PAGE REALISATIONS
   ============================================================ */

/* hero : visuel "stack" de screenshots en perspective */
.showcase{position:relative;perspective:1600px;min-height:340px}
.showcase .shot{position:absolute;border-radius:12px;overflow:hidden;border:1px solid var(--border-strong);background:linear-gradient(160deg,#141d44,#0b1128);box-shadow:0 30px 70px rgba(30,20,90,.55)}
.showcase .shot::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 70% 10%,rgba(124,92,255,.28),transparent 55%)}
.showcase .s1{width:78%;height:300px;top:10px;left:0;transform:rotateY(-18deg) rotateX(5deg);z-index:3;background-size:cover;background-position:center}
.showcase .s2{width:40%;height:240px;top:36px;right:8%;transform:rotateY(-18deg) rotateX(5deg);z-index:2;background-size:cover;background-position:center}
.showcase .s3{width:26%;height:180px;bottom:0;right:0;transform:rotateY(-18deg) rotateX(5deg);z-index:1;background-size:cover;background-position:center}

/* filtres (onglets) */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:8px 0 44px}
.filter{padding:11px 22px;border-radius:30px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:.25s}
.filter:hover{color:var(--txt);border-color:var(--border-strong)}
.filter.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(99,102,241,.35)}

/* grille projets (4 col) */
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.work{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,var(--panel),rgba(12,18,40,.5));transition:transform .3s,border-color .3s,box-shadow .3s}
.work:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 22px 46px rgba(40,30,120,.35)}
.work.hide{display:none}
.work-thumb{height:200px;background-size:cover;background-position:center;position:relative}
.work-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,11,24,.55),transparent 55%)}
.work-go{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(7,11,24,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:.25s}
.work-go svg{width:17px;height:17px;stroke:#fff;transition:transform .25s}
.work:hover .work-go{background:var(--grad);border-color:transparent}
.work:hover .work-go svg{transform:translate(2px,-2px)}
.work-body{padding:20px 20px 22px}
.work-body .tag{font-size:11px;color:var(--violet-2);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.work-body h4{font-size:17px;font-weight:700;margin:6px 0 10px}
.work-body p{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.work-body .svc-link{font-size:13px;font-weight:600;color:var(--violet-2);display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.work:hover .work-body .svc-link{gap:11px}
.work-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;font-size:14.5px}

/* bandeau CTA rocket */
.cta-rocket{margin:50px 0 30px}
.cta-rocket-box{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;padding:36px 44px;border-radius:22px;border:1px solid var(--border-strong);background:radial-gradient(120% 160% at 0% 0%,rgba(124,92,255,.2),transparent 55%),linear-gradient(180deg,var(--panel-2),var(--panel))}
.rocket-badge{width:92px;height:92px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex-shrink:0;box-shadow:0 16px 40px rgba(99,102,241,.5)}
.rocket-badge svg{width:42px;height:42px;stroke:#fff;fill:none}
.cta-rocket h2{font-size:clamp(22px,2.8vw,30px);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin-bottom:10px}
.cta-rocket p{color:var(--muted);font-size:14.5px;max-width:420px}

/* bande logos clients */
.clients{padding:30px 0 10px}
.clients h3{text-align:center;font-size:clamp(20px,2.6vw,28px);font-weight:800;margin-bottom:40px}
.clients-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.clients-row .cli-logo{font-size:20px}

/* responsive realisations */
@media(max-width:980px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .cta-rocket-box{grid-template-columns:1fr;text-align:center;justify-items:center;gap:20px}
  .cta-rocket p{margin:0 auto}
  .showcase{min-height:280px;margin-top:20px}
  .clients-row{justify-content:center;gap:30px}
}
@media(max-width:560px){
  .work-grid{grid-template-columns:1fr}
  .filters{gap:8px}
  .filter{padding:9px 16px;font-size:13px}
}