/* ============================================================
   KREOVYA — design system
   De l'idée à l'impact.
   ============================================================ */

:root {
  --noir: #050509;
  --obsidienne: #090A10;
  --surface: #0D0E16;
  --surface-elevee: #12131E;
  --violet: #7C2CFF;
  --bleu: #176BFF;
  --cyan: #24C7FF;
  --blanc: #F7F8FC;
  --argent: #A7ACBA;
  --argent-att: #6B7080;
  --ligne: rgba(167,172,186,0.14);
  --ligne-forte: rgba(167,172,186,0.26);
  --grad-signature: linear-gradient(90deg, var(--violet) 0%, var(--bleu) 55%, var(--cyan) 100%);
  --grad-radial: radial-gradient(circle at 30% 20%, rgba(124,44,255,.25), transparent 55%), radial-gradient(circle at 75% 70%, rgba(36,199,255,.16), transparent 50%);
  --radius: 4px;
  --radius-lg: 18px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--noir)}
body{
  background:var(--noir);
  color:var(--blanc);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none), (pointer:coarse){ body{ cursor:auto } }

h1,h2,h3,h4{
  font-family:'Unbounded',sans-serif;
  font-weight:600;
  line-height:1.08;
  color:var(--blanc);
  text-wrap:balance;
  letter-spacing:-.5px;
}
h1{font-size:clamp(38px,6.2vw,92px)}
h2{font-size:clamp(30px,4.4vw,58px)}
h3{font-size:clamp(19px,2vw,26px);letter-spacing:-.2px}
p{color:var(--argent)}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button{font-family:inherit;cursor:none;background:none;border:none;color:inherit}
@media (hover:none), (pointer:coarse){ button,a{cursor:auto} }

.grad-text{
  background:var(--grad-signature);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.section{position:relative;padding:clamp(90px,12vw,170px) 0}

.eyebrow{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:11.5px;letter-spacing:3.4px;text-transform:uppercase;font-weight:600;
  color:var(--cyan);
}
.eyebrow-line{display:inline-flex;align-items:center;gap:12px}
.eyebrow-line::before{content:'';width:28px;height:1px;background:var(--grad-signature)}

.section-head{max-width:720px;margin:0 auto 64px;text-align:center}
.section-head h2{margin-top:16px}
.lede{color:var(--argent);font-size:16.5px;margin-top:18px;max-width:56ch}

/* ---------------- Boutons ---------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:17px 36px;overflow:hidden;
  font-size:12.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;
  background:var(--grad-signature);color:var(--blanc);
  border-radius:100px;isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(124,44,255,.35)}
.btn .sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover .sheen{transform:translateX(120%)}

.btn-outline{
  display:inline-flex;align-items:center;gap:12px;padding:16px 34px;
  font-size:12.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--blanc);border:1px solid var(--ligne-forte);border-radius:100px;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.btn-outline:hover{border-color:var(--cyan);background:rgba(36,199,255,.06)}

.btn-ghost{
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--argent);
  display:inline-flex;align-items:center;gap:8px;transition:color .3s var(--ease),gap .3s var(--ease);
}
.btn-ghost:hover{color:var(--blanc);gap:12px}

/* ---------------- Curseur premium ---------------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9000;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-dot{width:6px;height:6px;background:var(--blanc)}
.cursor-ring{width:40px;height:40px;border:1px solid rgba(247,248,252,.4);transition:width .3s var(--ease),height .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.cursor-ring.is-active{width:76px;height:76px;border-color:var(--cyan);background:rgba(36,199,255,.08)}
.cursor-ring .label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;opacity:0;transition:opacity .25s var(--ease)}
.cursor-ring.is-active .label{opacity:1}
@media (hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{display:none} }

/* ---------------- Intro cinématique ---------------- */
.intro{position:fixed;inset:0;z-index:5000;background:var(--noir);display:flex;align-items:center;justify-content:center;transition:opacity .9s var(--ease)}
.intro.is-hidden{opacity:0;pointer-events:none}
.intro canvas{position:absolute;inset:0;width:100%;height:100%}
.intro-wordmark{position:relative;z-index:2;text-align:center;opacity:0}
.intro-wordmark img{height:clamp(46px,7vw,74px);margin:0 auto 18px}
.intro-wordmark .tag{font-size:11px;letter-spacing:3.6px;text-transform:uppercase;color:var(--argent)}
.intro-skip{
  position:absolute;right:max(28px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));z-index:3;
  font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--argent);
  border:1px solid var(--ligne-forte);padding:12px 24px;border-radius:100px;
  opacity:0;animation:introFade .6s var(--ease) 1.4s forwards;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.intro-skip:hover{border-color:var(--cyan);color:var(--blanc)}
@keyframes introFade{to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .intro{transition:opacity .3s}
  .intro-skip{animation:none;opacity:1}
}

/* ---------------- Page transition sweep ---------------- */
.page-sweep{position:fixed;inset:0;z-index:6000;background:var(--grad-signature);transform:scaleX(0);transform-origin:left;pointer-events:none}
.page-sweep.is-active{animation:sweepAcross .8s var(--ease-soft) forwards}
@keyframes sweepAcross{
  0%{transform:scaleX(0);transform-origin:left}
  50%{transform:scaleX(1);transform-origin:left}
  50.01%{transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}

/* ---------------- Header ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(20px,5vw,56px);
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-solid{background:rgba(5,5,9,.78);backdrop-filter:blur(14px);padding-top:16px;padding-bottom:16px;border-color:var(--ligne)}
.brand-mark img{height:30px;transition:height .3s var(--ease)}
.nav-links{display:flex;gap:38px;align-items:center}
.nav-links a{font-size:12.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--argent);position:relative;padding:6px 0;transition:color .3s var(--ease)}
.nav-links a:hover,.nav-links a.is-active{color:var(--blanc)}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad-signature);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:22px}
.nav-cta .btn{padding:13px 26px;font-size:11px}
.nav-burger{display:none;flex-direction:column;gap:5px}
.nav-burger span{width:24px;height:1.5px;background:var(--blanc)}

.services-mega{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);width:min(760px,90vw);background:rgba(9,10,16,.92);backdrop-filter:blur(20px);border:1px solid var(--ligne);border-radius:var(--radius-lg);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.nav-services:hover .services-mega,.services-mega:hover{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.services-mega a{display:block;padding:14px 16px;border-radius:var(--radius);transition:background .25s var(--ease)}
.services-mega a:hover{background:rgba(124,44,255,.1)}
.services-mega .num{font-size:10.5px;color:var(--cyan);letter-spacing:1.6px}
.services-mega .name{display:block;font-family:'Unbounded',sans-serif;font-size:14.5px;margin-top:6px;color:var(--blanc)}
.services-mega .desc{display:block;font-size:12.5px;color:var(--argent-att);margin-top:4px}

.mobile-menu{position:fixed;inset:0;z-index:1200;background:var(--noir);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transform:translateY(-100%);transition:transform .55s var(--ease)}
.mobile-menu.is-open{transform:translateY(0)}
.mobile-menu a{font-family:'Unbounded',sans-serif;font-size:26px}
.mobile-menu .close-btn{position:absolute;top:26px;right:26px;font-size:13px;letter-spacing:1px;color:var(--argent)}
@media (max-width:900px){ .nav-links{display:none} .nav-burger{display:flex} .nav-cta .btn{display:none} }

/* ---------------- Hero ---------------- */
.hero{position:relative;height:100svh;min-height:680px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--noir)}
.hero::before{content:'';position:absolute;inset:0;background:var(--grad-radial);pointer-events:none}
.hero-canvas{position:absolute;inset:0;z-index:1}
.hero-content{position:relative;z-index:3;padding:0 clamp(20px,5vw,72px)}
.hero-content .eyebrow{display:block;margin-bottom:26px}
.hero-content h1{max-width:14ch}
.hero-content .sub{color:var(--argent);font-size:clamp(15px,1.5vw,18px);max-width:46ch;margin:26px 0 40px}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap}
.hero-scroll-cue{position:absolute;bottom:36px;left:clamp(20px,5vw,72px);z-index:3;display:flex;align-items:center;gap:12px;color:var(--argent-att);font-size:10px;letter-spacing:2.4px;text-transform:uppercase}
.hero-scroll-cue .line{width:38px;height:1px;background:var(--grad-signature);animation:cuePulse 2.4s ease-in-out infinite}
@keyframes cuePulse{0%,100%{opacity:.35;width:24px}50%{opacity:1;width:44px}}

/* ---------------- Reveal ---------------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal-scale.is-in{opacity:1;transform:scale(1)}
.stagger>*{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.stagger.is-in>*{opacity:1;transform:none}
.stagger.is-in>*:nth-child(1){transition-delay:.05s}
.stagger.is-in>*:nth-child(2){transition-delay:.15s}
.stagger.is-in>*:nth-child(3){transition-delay:.25s}
.stagger.is-in>*:nth-child(4){transition-delay:.35s}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-scale,.stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------------- Parcours (journey) ---------------- */
.journey{position:relative;background:var(--obsidienne)}
.journey-pin{height:600vh;position:relative}
.journey-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.journey-canvas{position:absolute;inset:0;z-index:1}
.journey-copy{position:relative;z-index:2;width:100%;padding:0 clamp(20px,5vw,72px);text-align:center}
.journey-copy .step-num{font-family:'Unbounded',sans-serif;font-size:13px;color:var(--cyan);letter-spacing:3px;margin-bottom:18px;display:block}
.journey-copy h2{font-size:clamp(36px,7vw,110px);margin:0 auto;max-width:16ch}
.journey-step{display:none;opacity:0;transition:opacity .5s var(--ease)}
.journey-step.is-active{display:block;opacity:1}
.journey-progress{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.journey-progress span{width:26px;height:2px;background:var(--ligne-forte);transition:background .4s var(--ease)}
.journey-progress span.is-active{background:var(--grad-signature)}

/* ---------------- Expertises (4 services) ---------------- */
.expertise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ligne)}
.expertise-card{
  position:relative;background:var(--surface);padding:clamp(36px,3.6vw,54px);min-height:320px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
.expertise-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.expertise-card:nth-child(1)::before{background:radial-gradient(circle at 20% 20%,rgba(124,44,255,.28),transparent 60%)}
.expertise-card:nth-child(2)::before{background:radial-gradient(circle at 80% 20%,rgba(23,107,255,.28),transparent 60%)}
.expertise-card:nth-child(3)::before{background:radial-gradient(circle at 20% 80%,rgba(36,199,255,.24),transparent 60%)}
.expertise-card:nth-child(4)::before{background:radial-gradient(circle at 80% 80%,rgba(124,44,255,.24),transparent 60%)}
.expertise-card:hover::before{opacity:1}
.expertise-card .num{position:relative;z-index:1;font-family:'Unbounded',sans-serif;font-size:13px;color:var(--argent-att);letter-spacing:2px;margin-bottom:auto;padding-bottom:40px}
.expertise-card h3{position:relative;z-index:1;margin-bottom:14px;font-size:clamp(20px,2.2vw,28px)}
.expertise-card p{position:relative;z-index:1;font-size:14px;max-width:42ch}
.expertise-card .visual{position:absolute;top:0;right:0;width:220px;height:220px;opacity:.5;pointer-events:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.expertise-card:hover .visual{opacity:.85;transform:scale(1.06)}
@media (max-width:800px){ .expertise-grid{grid-template-columns:1fr} }

/* ---------------- Portfolio cinématique ---------------- */
.portfolio-rail{position:relative;background:var(--noir)}
.portfolio-pin{height:400vh;position:relative}
.portfolio-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.portfolio-track{display:flex;will-change:transform;height:100%;align-items:center}
.portfolio-slide{position:relative;width:100vw;height:100%;flex:none;display:flex;align-items:center;justify-content:center;padding:0 clamp(20px,6vw,90px)}
.project-frame{position:relative;width:min(1200px,92vw);aspect-ratio:16/9.2;border-radius:20px;overflow:hidden;border:1px solid var(--ligne-forte);box-shadow:0 60px 120px rgba(5,5,9,.6);background:var(--surface)}
.project-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.project-frame .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,9,.92) 0%,rgba(5,5,9,.15) 45%,transparent 70%)}
.project-frame .chrome{position:absolute;top:0;left:0;right:0;height:38px;background:rgba(9,10,16,.9);display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid var(--ligne)}
.project-frame .chrome span{width:8px;height:8px;border-radius:50%;background:var(--argent-att)}
.project-meta{position:absolute;left:32px;right:32px;bottom:28px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.project-meta .index{font-family:'Unbounded',sans-serif;font-size:12px;color:var(--cyan);letter-spacing:2px;margin-bottom:10px;display:block}
.project-meta h3{font-size:clamp(22px,3vw,36px);margin-bottom:8px}
.project-meta .cat{font-size:12.5px;color:var(--argent);letter-spacing:.4px}
.portfolio-progress{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;display:flex;gap:10px}
.portfolio-progress span{width:30px;height:2px;background:var(--ligne-forte);transition:background .4s var(--ease)}
.portfolio-progress span.is-active{background:var(--grad-signature)}
.portfolio-hint{position:absolute;right:clamp(20px,5vw,60px);bottom:26px;z-index:5;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--argent-att)}
@media (max-width:760px){
  .portfolio-pin{height:auto}
  .portfolio-stage{position:relative;height:auto;overflow-x:auto;scroll-snap-type:x mandatory}
  .portfolio-track{transform:none!important}
  .portfolio-slide{scroll-snap-align:center;padding:40px 24px}
  .project-frame{aspect-ratio:4/5}
}

/* ---------------- Placeholder capture (Salle 906) ---------------- */
.capture-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,rgba(124,44,255,.14),rgba(36,199,255,.1));text-align:center;padding:20px}
.capture-placeholder .tag{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)}
.capture-placeholder p{font-size:12.5px;color:var(--argent-att);max-width:32ch}

/* ---------------- Pourquoi KREOVYA ---------------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);margin-top:56px}
.why-card{background:var(--surface);padding:40px 28px}
.why-card .glyph{width:34px;height:34px;border-radius:50%;background:var(--grad-signature);margin-bottom:22px}
.why-card h3{font-size:16px;margin-bottom:10px}
.why-card p{font-size:13.5px}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .why-grid{grid-template-columns:1fr} }

/* ---------------- Business journey (accompagnement) ---------------- */
.biz-flow{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:0;margin-top:56px}
.biz-node{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 26px}
.biz-node .dot{width:12px;height:12px;border-radius:50%;background:var(--grad-signature);box-shadow:0 0 20px rgba(124,44,255,.5)}
.biz-node span{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--argent)}
.biz-connector{width:52px;height:1px;background:linear-gradient(90deg,var(--ligne-forte),var(--ligne-forte));position:relative}
.biz-connector::after{content:'';position:absolute;inset:0;background:var(--grad-signature);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.biz-flow.is-in .biz-connector::after{transform:scaleX(1)}
@media (max-width:760px){ .biz-connector{width:24px} .biz-node{padding:0 10px} }

/* ---------------- Témoignages ---------------- */
.testi-card{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--radius-lg);padding:44px;text-align:center;max-width:640px;margin:0 auto}
.testi-card .quote-mark{font-family:'Unbounded',sans-serif;font-size:40px;color:var(--violet);margin-bottom:6px}
.testi-card p{font-size:15px;font-style:italic}
.testi-card .who{margin-top:22px;font-size:12.5px;letter-spacing:.6px;color:var(--argent-att)}

/* ---------------- CTA final ---------------- */
.final-cta{position:relative;padding:clamp(120px,16vw,220px) 0;text-align:center;overflow:hidden;background:var(--noir)}
.final-cta .glow{position:absolute;inset:0;background:var(--grad-radial);opacity:0;transition:opacity 1.2s var(--ease)}
.final-cta.is-near .glow{opacity:1}
.final-cta h2{position:relative;z-index:1;max-width:18ch;margin:0 auto}
.final-cta .lede{position:relative;z-index:1;margin:24px auto 44px}
.final-cta .hero-ctas{position:relative;z-index:1;justify-content:center}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--obsidienne);padding:90px 0 0;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:44px;padding-bottom:60px;border-bottom:1px solid var(--ligne)}
.footer-brand img{height:26px;margin-bottom:20px}
.footer-brand p{color:var(--argent-att);font-size:13.5px;max-width:30ch}
.site-footer h5{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--argent-att);margin-bottom:20px}
.site-footer a{display:block;font-size:13.5px;color:var(--argent);margin-bottom:13px;transition:color .3s var(--ease)}
.site-footer a:hover{color:var(--blanc)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:26px 0;font-size:12px;color:var(--argent-att)}
.footer-word{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(80px,16vw,240px);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--ligne-forte);text-align:center;letter-spacing:-2px;padding:20px 0 0;user-select:none}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr} }

/* ---------------- Starter modal (multi-step) ---------------- */
.starter{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.starter.is-open{opacity:1;pointer-events:auto}
.starter-backdrop{position:absolute;inset:0;background:rgba(5,5,9,.85);backdrop-filter:blur(10px)}
.starter-panel{position:relative;z-index:1;width:min(680px,100%);max-height:88vh;overflow-y:auto;background:var(--surface-elevee);border:1px solid var(--ligne);border-radius:var(--radius-lg);padding:clamp(30px,4vw,54px);transform:translateY(24px);transition:transform .4s var(--ease)}
.starter.is-open .starter-panel{transform:translateY(0)}
.starter-close{position:absolute;top:24px;right:24px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--argent)}
.starter-progress{display:flex;gap:6px;margin-bottom:34px}
.starter-progress span{height:2px;flex:1;background:var(--ligne-forte);border-radius:2px;overflow:hidden;position:relative}
.starter-progress span::after{content:'';position:absolute;inset:0;background:var(--grad-signature);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.starter-progress span.is-done::after,.starter-progress span.is-active::after{transform:scaleX(1)}
.starter-step{display:none}
.starter-step.is-active{display:block;animation:stepIn .5s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.starter-step h3{font-size:clamp(22px,3vw,30px);margin-bottom:28px;max-width:16ch}
.starter-options{display:grid;gap:12px}
.starter-option{
  display:flex;align-items:center;justify-content:space-between;padding:18px 22px;
  border:1px solid var(--ligne);border-radius:var(--radius);text-align:left;font-size:14.5px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.starter-option:hover,.starter-option.is-selected{border-color:var(--cyan);background:rgba(36,199,255,.06)}
.starter-option .arrow{opacity:0;transition:opacity .3s var(--ease)}
.starter-option:hover .arrow,.starter-option.is-selected .arrow{opacity:1}
.starter-field{margin-bottom:18px}
.starter-field label{display:block;font-size:12px;color:var(--argent-att);margin-bottom:8px;letter-spacing:.4px}
.starter-field input,.starter-field textarea{
  width:100%;background:var(--surface);border:1px solid var(--ligne);color:var(--blanc);
  padding:14px 16px;font-size:14.5px;font-family:'Plus Jakarta Sans',sans-serif;border-radius:var(--radius);
}
.starter-field input:focus,.starter-field textarea:focus{outline:none;border-color:var(--cyan)}
.starter-field textarea{resize:vertical;min-height:110px}
.starter-nav{display:flex;justify-content:space-between;align-items:center;margin-top:32px}
.starter-back{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--argent-att)}
.starter-confirm{text-align:center;padding:20px 0}
.starter-confirm .glyph{width:56px;height:56px;border-radius:50%;background:var(--grad-signature);margin:0 auto 26px}

/* ---------------- Formulaires simples (contact) ---------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.form-grid label{display:block;font-size:12px;color:var(--argent-att);margin-bottom:8px}
.form-grid input,.form-grid textarea{
  width:100%;background:var(--surface);border:1px solid var(--ligne);color:var(--blanc);
  padding:14px 16px;font-size:14.5px;border-radius:var(--radius);font-family:inherit;
}
.form-grid input:focus,.form-grid textarea:focus{outline:none;border-color:var(--cyan)}
.form-grid textarea{resize:vertical;min-height:120px}

/* ---------------- Sous-pages : hero éditorial ---------------- */
.page-hero{padding:calc(clamp(70px,10vw,140px) + 70px) 0 20px}
.page-hero .eyebrow{display:block;margin-bottom:20px}
.page-hero h1{max-width:16ch}
.page-hero.center{text-align:center}
.page-hero.center h1{margin:0 auto}

/* ---------------- Process (comment ça marche) ---------------- */
.process-list{max-width:780px;margin:0 auto}
.process-item{display:grid;grid-template-columns:70px 1fr;gap:26px;padding:32px 0;border-top:1px solid var(--ligne)}
.process-item:last-child{border-bottom:1px solid var(--ligne)}
.process-num{font-family:'Unbounded',sans-serif;color:var(--cyan);font-size:20px}
.process-item h3{margin-bottom:8px}
.process-item p{font-size:14px}

/* ---------------- Page service détaillée ---------------- */
.service-hero{position:relative;padding:calc(clamp(70px,10vw,140px) + 70px) 0 clamp(60px,8vw,100px);overflow:hidden}
.service-hero::before{content:'';position:absolute;inset:0;background:var(--grad-radial);opacity:.7;pointer-events:none}
.service-hero .wrap{position:relative;z-index:1}
.service-hero .num-big{font-family:'Unbounded',sans-serif;font-size:13px;color:var(--cyan);letter-spacing:3px;margin-bottom:22px;display:block}
.service-hero h1{max-width:16ch}
.service-hero .sub{max-width:56ch;margin-top:24px;font-size:16.5px}
.includes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ligne)}
.includes-card{background:var(--surface);padding:32px 30px}
.includes-card h3{font-size:15.5px;margin-bottom:10px;color:var(--blanc)}
.includes-card p{font-size:13.5px}
@media (max-width:760px){ .includes-grid{grid-template-columns:1fr} }
.service-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:36px 0;border-top:1px solid var(--ligne)}
.service-nav a{font-size:13px;letter-spacing:.4px;color:var(--argent);transition:color .3s var(--ease)}
.service-nav a:hover{color:var(--blanc)}

/* ---------------- Étude de cas ---------------- */
.case-hero{position:relative;height:78vh;min-height:520px;display:flex;align-items:flex-end;overflow:hidden}
.case-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-hero .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,9,.94) 5%,rgba(5,5,9,.2) 60%)}
.case-hero .copy{position:relative;z-index:2;padding:0 clamp(20px,5vw,72px) 56px;width:100%}
.case-hero .industry{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:16px}
.case-hero h1{font-size:clamp(34px,5.4vw,64px)}
.case-hero .visit{margin-top:26px;display:inline-flex}
.case-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne);margin:0 0 clamp(50px,7vw,80px)}
.case-meta-grid .cell{background:var(--surface);padding:34px 30px}
.case-meta-grid .cell h5{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--argent-att);margin-bottom:12px}
.case-meta-grid .cell p{font-size:14.5px;color:var(--blanc)}
.case-block{max-width:760px;margin:0 auto clamp(70px,9vw,120px)}
.case-block .eyebrow{display:block;margin-bottom:18px}
.case-block h2{margin-bottom:22px;font-size:clamp(26px,3.2vw,38px)}
.case-block p{font-size:16px;line-height:1.9;margin-bottom:18px}
.case-gallery{display:grid;grid-template-columns:1.4fr 1fr;gap:2px;background:var(--ligne)}
.case-gallery img{width:100%;height:100%;object-fit:cover;display:block}
.case-gallery .tall{grid-row:span 2}
@media (max-width:760px){ .case-gallery{grid-template-columns:1fr} .case-gallery .tall{grid-row:auto} }
.case-nextprev{display:flex;justify-content:space-between;padding:44px 0;border-top:1px solid var(--ligne)}
.case-nextprev a{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--argent);transition:color .3s var(--ease)}
.case-nextprev a:hover{color:var(--blanc)}

/* ---------------- Réalisations : grille + filtres ---------------- */
.port-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:48px}
.port-filters button{padding:11px 24px;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;border:1px solid var(--ligne);border-radius:100px;color:var(--argent);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.port-filters button.is-active,.port-filters button:hover{background:var(--grad-signature);border-color:transparent;color:var(--blanc)}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ligne)}
.case-card{position:relative;aspect-ratio:5/4;overflow:hidden;display:block}
.case-card img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1s var(--ease)}
.case-card:hover img{transform:scale(1)}
.case-card .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,9,.9) 0%,rgba(5,5,9,.1) 50%)}
.case-card .info{position:absolute;left:26px;right:26px;bottom:24px;z-index:2}
.case-card .info .index{font-size:11px;color:var(--cyan);letter-spacing:1.6px;display:block;margin-bottom:8px}
.case-card .info h3{font-size:clamp(19px,2.2vw,26px)}
.case-card .info .cat{font-size:12.5px;color:var(--argent)}
@media (max-width:760px){ .case-grid{grid-template-columns:1fr} }

/* ---------------- Démarrer un projet — page autonome ---------------- */
.starter-page{padding:calc(clamp(70px,10vw,140px) + 70px) 0 120px}
.starter.starter-standalone{position:static;opacity:1;pointer-events:auto;padding:0}
.starter.starter-standalone .starter-backdrop,.starter.starter-standalone .starter-close{display:none}
.starter.starter-standalone .starter-panel{transform:none;max-height:none;width:100%;max-width:680px;margin:0 auto}

/* ---------------- Toast ---------------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--surface-elevee);border:1px solid var(--ligne-forte);color:var(--blanc);padding:14px 26px;border-radius:100px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:7000}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}