/* ═══════════ Web et logiciel, création de sites : motion design ═══════════
   État final par défaut (sans JS, reduced-motion). Boucles en
   transform/opacity uniquement, jouées seulement à l'écran. */

/* ── Héros ── */
.sw-hero__grid,.wb-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,5vw,72px);align-items:center}
.sw-title{font-size:clamp(38px,4.6vw,70px);line-height:1.05}
.sw-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.5vh,34px)}
.sw-promise{list-style:none;margin:clamp(24px,4vh,36px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.sw-promise li{display:flex;flex-direction:column}
.sw-promise b{font-family:var(--font-display);font-size:clamp(22px,2.2vw,28px);letter-spacing:-0.03em;color:var(--yellow)}
.sw-promise span{font-size:13px;color:var(--muted-2)}

/* Le navigateur qui se construit */
.sw-browser{position:relative;border-radius:16px;background:#121212;border:1px solid rgba(255,255,255,0.1);box-shadow:0 30px 70px rgba(0,0,0,0.45)}
.sw-browser__bar,.wb-code__bar{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.07)}
.sw-browser__bar i,.wb-code__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.16)}
.sw-browser__bar span,.wb-code__bar span{margin-left:10px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,0.05);font-size:11.5px;color:var(--muted-2)}
.sw-browser__view{position:relative;padding:18px 20px 22px;display:grid;gap:18px;overflow:hidden;border-radius:0 0 16px 16px}
.sw-browser__view span{display:block;transform-origin:0 50%}
.sw-b-nav{display:flex;align-items:center;gap:10px}
.sw-b-logo{width:56px;height:12px;border-radius:4px;background:var(--yellow);margin-right:auto}
.sw-b-link{width:34px;height:7px;border-radius:4px;background:rgba(255,255,255,0.22)}
.sw-b-hero{display:grid;gap:10px;padding:16px 0 4px}
.sw-b-eyebrow{width:30%;height:6px;border-radius:3px;background:var(--yellow)}
.sw-b-h{width:82%;height:18px;border-radius:5px;background:rgba(245,243,239,0.88)}
.sw-b-h--2{width:58%}
.sw-b-p{width:70%;height:8px;border-radius:4px;background:rgba(255,255,255,0.22)}
.sw-b-cta{position:relative;justify-self:start;margin-top:6px;padding:9px 16px;border-radius:999px;background:var(--yellow);color:#141414;font-size:12px;font-weight:700}
.sw-b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sw-b-cards span{height:66px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08)}
.sw-b-cursor{position:absolute;left:96px;top:178px;width:20px;height:20px;fill:#fff;stroke:#141414;stroke-width:1.2;opacity:0}
.sw-b-ripple{position:absolute;left:72px;top:162px;width:30px;height:30px;border-radius:50%;border:2px solid var(--yellow);opacity:0}
.sw-browser__view .sw-b-ripple{display:block}
.sw-toast{position:absolute;right:-16px;top:64px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#fafaf7;color:#141414;box-shadow:0 20px 40px rgba(0,0,0,0.45)}
.sw-toast__ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#5fbf7d;color:#fff;font-weight:700;font-size:14px}
.sw-toast b{display:block;font-size:13.5px}
.sw-toast i{display:block;font-style:normal;font-size:12px;color:rgba(20,20,20,0.6)}

/* ── Bandeau clients ── */
.sw-proof{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sw-proof__row{display:flex;width:max-content}
.sw-proof__track{display:flex;margin:0;padding:0;list-style:none}
.sw-proof__track li{display:flex;align-items:center;gap:28px;padding-right:28px;font-family:var(--font-display);font-weight:600;font-size:clamp(18px,1.8vw,24px);letter-spacing:-0.02em;color:var(--muted-2);white-space:nowrap}
.sw-proof__track li::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow)}

/* ── Onglets ── */
.sw-tabs__list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.sw-tabs__list[hidden]{display:none}
.sw-tabs__list button{padding:12px 20px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted-2);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background 0.3s var(--ease),color 0.3s var(--ease),border-color 0.3s var(--ease)}
.sw-tabs__list button:hover{border-color:#3a3a3a;color:var(--text)}
.sw-tabs__list button[aria-selected="true"]{background:var(--yellow);border-color:var(--yellow);color:#141414}
.sw-tabs__list button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.sw-panel{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:stretch;padding:clamp(24px,3vw,40px);border-radius:20px;border:1px solid var(--border);background:var(--surface)}
.sw-panel+.sw-panel{margin-top:14px}
.sw-tabs.is-ready .sw-panel+.sw-panel{margin-top:0}
.sw-panel[hidden]{display:none}
.sw-panel h3{margin:0 0 16px;font-size:clamp(22px,2.2vw,30px);letter-spacing:-0.03em}
.sw-panel p{margin:0 0 14px;font-size:15.5px;line-height:1.65;color:var(--muted-2)}
.sw-panel p b{display:block;margin-bottom:2px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.sw-panel__ans{padding-left:16px;border-left:3px solid var(--yellow)}
.sw-panel__ans b{color:var(--yellow)!important}
.sw-panel__ex a{color:var(--yellow);font-weight:600}
.sw-panel__price{display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border-radius:16px;background:var(--yellow);color:#141414}
.sw-panel__price span{font-size:13px;font-weight:600;opacity:0.75}
.sw-panel__price b{font-family:var(--font-display);font-size:clamp(26px,2.6vw,36px);letter-spacing:-0.03em;line-height:1.1}

/* ── Prix ── */
.sw-prices{display:grid;gap:8px}
.sw-axis{position:relative;height:20px;margin-left:calc(40% + 24px);font-size:11.5px;color:var(--muted)}
.sw-axis span{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);white-space:nowrap}
.sw-axis span:first-child{transform:none}
.sw-axis span:last-child{transform:translateX(-100%)}
.sw-price{display:grid;grid-template-columns:40% minmax(0,1fr);gap:24px;align-items:center;padding:18px 0;border-top:1px solid var(--border)}
.sw-price__t b{display:block;font-family:var(--font-display);font-size:19px;letter-spacing:-0.02em;color:var(--text)}
.sw-price__t span{display:block;margin-top:4px;font-size:14px;line-height:1.55;color:var(--muted-2)}
.sw-price__bar{position:relative;height:46px;background:linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px) 0 0/33.333% 100%}
.sw-price__bar i{position:absolute;left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);bottom:6px;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--yellow),#ffd36a);transform-origin:0 50%}
.sw-price__bar em{position:absolute;left:calc(var(--a) * 100%);top:2px;font-style:normal;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--yellow);white-space:nowrap}
.sw-maint{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 30px;margin-top:18px;padding:22px 26px;border-radius:16px;border:1px solid rgba(250,181,18,0.45);background:rgba(250,181,18,0.06)}
.sw-maint b{display:block;font-family:var(--font-display);font-size:19px;color:var(--text)}
.sw-maint span{display:block;max-width:60ch;margin-top:4px;font-size:14px;line-height:1.55;color:var(--muted-2)}
.sw-maint__p{text-align:right}
.sw-maint__p b{font-size:clamp(24px,2.4vw,30px);color:var(--yellow)}

/* ── Inclus ── */
.sw-inc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,80px);align-items:start}
.sw-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sw-ticks li{position:relative;padding:18px 20px 18px 62px;border-radius:14px;border:1px solid var(--border);background:var(--surface);font-size:16px;line-height:1.5;color:var(--text)}
.sw-ticks li::before{content:"";position:absolute;left:20px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--yellow)}
.sw-ticks li::after{content:"";position:absolute;left:29px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid #141414;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* ── Planning ── */
.sw-gantt{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sw-gantt li{display:grid;grid-template-columns:40% minmax(0,1fr);gap:24px;align-items:center;padding:18px 0;border-top:1px solid var(--border)}
.sw-gantt__t b{display:block;font-family:var(--font-display);font-size:19px;letter-spacing:-0.02em;color:var(--text)}
.sw-gantt__t span{display:block;margin-top:4px;font-size:14px;line-height:1.55;color:var(--muted-2)}
.sw-gantt__lane{position:relative;height:46px;border-radius:8px;background:rgba(255,255,255,0.03)}
.sw-gantt__lane i{position:absolute;left:calc(var(--s) * 100%);width:max(10px,calc(var(--w) * 100%));bottom:8px;height:14px;border-radius:7px;background:var(--yellow);transform-origin:0 50%}
.sw-gantt__lane em{position:absolute;left:calc(var(--s) * 100%);top:4px;font-style:normal;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--yellow);white-space:nowrap}
.sw-gantt li:last-child .sw-gantt__lane em{left:auto;right:0}

/* ── Hub : éditeur de code ── */
.wb-code{border-radius:16px;background:#121212;border:1px solid rgba(255,255,255,0.1);box-shadow:0 30px 70px rgba(0,0,0,0.45);overflow:hidden}
.wb-code__lines{margin:0;padding:18px 20px 6px 54px;list-style:none;counter-reset:ln;font-family:var(--font-mono);font-size:clamp(12.5px,1.1vw,14px);line-height:2;color:#dcd9d2}
.wb-code__lines li{position:relative;counter-increment:ln;white-space:nowrap}
.wb-code__lines li::before{content:counter(ln);position:absolute;left:-34px;width:20px;text-align:right;color:#555}
.wb-code__lines li::after{content:"";position:absolute;left:-2px;top:0;bottom:0;right:-10px;background:#121212;transform-origin:100% 50%;transform:scaleX(0)}
.wb-code .k{color:#c792ea}
.wb-code .f{color:var(--yellow)}
.wb-code .s{color:#8fd6a4}
.wb-code .v{color:#82aaff}
.wb-code__status{display:flex;align-items:center;gap:8px;margin:8px 20px 18px;padding:8px 12px;width:max-content;border-radius:999px;background:rgba(95,191,125,0.12);border:1px solid rgba(95,191,125,0.4);color:#8fd6a4;font-size:12.5px;font-weight:600}
.wb-code__status i{width:8px;height:8px;border-radius:50%;background:#5fbf7d}

/* ── Hub : trois métiers ── */
.wb-tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.wb-track{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.6vw,32px);border-radius:20px;border:1px solid var(--border);background:var(--surface);text-decoration:none;overflow:hidden;transition:border-color 0.35s var(--ease),transform 0.35s var(--ease)}
.wb-track::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;transition:transform 0.5s var(--ease)}
.wb-track:hover{border-color:#3a3a3a;transform:translateY(-5px)}
.wb-track:hover::after{transform:none}
.wb-track:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.wb-track--site{border-color:rgba(250,181,18,0.5)}
.wb-track__vis{display:flex;flex-direction:column;justify-content:center;gap:7px;height:86px;margin-bottom:20px;padding:14px;border-radius:12px;background:#151515;border:1px solid rgba(255,255,255,0.06)}
.wb-track--site .wb-track__vis i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,0.2);transform-origin:0 50%}
.wb-track--site .wb-track__vis i:nth-child(1){width:34%;background:var(--yellow)}
.wb-track--site .wb-track__vis i:nth-child(2){width:86%;height:12px;background:rgba(245,243,239,0.8)}
.wb-track--site .wb-track__vis i:nth-child(3){width:64%}
.wb-track--site .wb-track__vis i:nth-child(4){width:40%}
.wb-track--app .wb-track__vis{align-items:center}
.wb-track--app .wb-track__vis b{font-family:var(--font-mono);font-size:34px;color:var(--yellow)}
.wb-track--care .wb-track__vis svg{width:100%;height:40px}
.wb-track--care polyline{fill:none;stroke:#5fbf7d;stroke-width:2;stroke-linejoin:round}
.wb-track__n{font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;color:var(--yellow)}
.wb-track__h{margin:8px 0 10px;font-family:var(--font-display);font-weight:700;font-size:clamp(21px,2vw,26px);letter-spacing:-0.03em;line-height:1.15;color:var(--text)}
.wb-track__p{font-size:14.5px;line-height:1.6;color:var(--muted-2)}
.wb-track__price{margin-top:16px;font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--text)}
.wb-track__go{margin-top:auto;padding-top:20px;font-weight:600;font-size:15px;color:var(--yellow)}
.wb-track__go span{display:inline-block;transition:transform 0.3s var(--ease)}
.wb-track:hover .wb-track__go span{transform:translateX(5px)}

/* ── Animations ── */
@media (prefers-reduced-motion:no-preference){
  .sw-in{opacity:0;transform:translateY(16px);animation:swIn 0.7s var(--ease) var(--d,0s) forwards}

  /* Navigateur : cycle de 8 s */
  .sw-b-logo,.sw-b-link,.sw-b-eyebrow,.sw-b-h,.sw-b-p,.sw-b-cards span{animation:swBuild 8s var(--ease) 1s infinite both}
  .sw-b-link{animation-delay:1.1s}
  .sw-b-eyebrow{animation-delay:1.25s}
  .sw-b-h{animation-delay:1.35s}
  .sw-b-h--2{animation-delay:1.45s}
  .sw-b-p{animation-delay:1.55s}
  .sw-b-cards span:nth-child(1){animation-delay:1.7s}
  .sw-b-cards span:nth-child(2){animation-delay:1.8s}
  .sw-b-cards span:nth-child(3){animation-delay:1.9s}
  .sw-b-cta{animation:swCta 8s var(--ease) 1s infinite both}
  .sw-b-cursor{animation:swCursor 8s var(--ease) 1s infinite both}
  .sw-b-ripple{animation:swRipple 8s ease-out 1s infinite both}
  .sw-toast{animation:swToast 8s var(--ease) 1s infinite both}
  .sw-browser.is-paused *{animation-play-state:paused}

  .sw-proof__track{animation:swMarquee 38s linear infinite}
  .sw-proof.is-paused .sw-proof__track,.sw-proof:hover .sw-proof__track{animation-play-state:paused}

  .sw-panel.is-enter{animation:swPanel 0.5s var(--ease)}

  .sw-prices .sw-price__bar i{transform:scaleX(0)}
  .sw-prices .sw-price__bar em{opacity:0}
  .sw-prices.is-visible .sw-price__bar i{transform:none;transition:transform 1s var(--ease);transition-delay:calc(0.2s + var(--n,0)*0.15s)}
  .sw-prices.is-visible .sw-price__bar em{opacity:1;transition:opacity 0.5s var(--ease);transition-delay:calc(0.7s + var(--n,0)*0.15s)}

  .sw-ticks[data-armed] li{opacity:0;transform:translateX(18px)}
  .sw-ticks[data-armed] li::before{transform:scale(0)}
  .sw-ticks[data-armed] li::after{opacity:0}
  .sw-ticks[data-armed] li.is-in{opacity:1;transform:none;transition:opacity 0.5s var(--ease),transform 0.5s var(--ease)}
  .sw-ticks[data-armed] li.is-in::before{transform:none;transition:transform 0.45s cubic-bezier(0.34,1.6,0.5,1) 0.2s}
  .sw-ticks[data-armed] li.is-in::after{opacity:1;transition:opacity 0.3s var(--ease) 0.45s}

  .sw-gantt .sw-gantt__lane i{transform:scaleX(0)}
  .sw-gantt .sw-gantt__lane em{opacity:0}
  .sw-gantt.is-visible li .sw-gantt__lane i{transform:none;transition:transform 0.8s var(--ease)}
  .sw-gantt.is-visible li .sw-gantt__lane em{opacity:1;transition:opacity 0.4s var(--ease)}
  .sw-gantt.is-visible li:nth-child(1) .sw-gantt__lane i,.sw-gantt.is-visible li:nth-child(1) .sw-gantt__lane em{transition-delay:0.2s}
  .sw-gantt.is-visible li:nth-child(2) .sw-gantt__lane i,.sw-gantt.is-visible li:nth-child(2) .sw-gantt__lane em{transition-delay:0.55s}
  .sw-gantt.is-visible li:nth-child(3) .sw-gantt__lane i,.sw-gantt.is-visible li:nth-child(3) .sw-gantt__lane em{transition-delay:0.9s}
  .sw-gantt.is-visible li:nth-child(4) .sw-gantt__lane i,.sw-gantt.is-visible li:nth-child(4) .sw-gantt__lane em{transition-delay:1.25s}
  .sw-gantt.is-visible li:nth-child(5) .sw-gantt__lane i,.sw-gantt.is-visible li:nth-child(5) .sw-gantt__lane em{transition-delay:1.9s}

  .wb-code[data-armed] .wb-code__lines li::after{transform:scaleX(1)}
  .wb-code[data-armed] .wb-code__lines li.is-typed::after{transform:scaleX(0);transition:transform 0.7s steps(14)}
  .wb-code[data-armed] .wb-code__status{opacity:0;transform:translateY(6px);transition:opacity 0.4s var(--ease),transform 0.4s var(--ease)}
  .wb-code[data-armed].is-live .wb-code__status{opacity:1;transform:none}
  .wb-code.is-live .wb-code__status i{animation:swPulse 1.6s ease-in-out infinite}

  .wb-tracks .wb-track--site .wb-track__vis i{animation:wbBar 3.2s var(--ease) infinite}
  .wb-tracks .wb-track--site .wb-track__vis i:nth-child(2){animation-delay:0.15s}
  .wb-tracks .wb-track--site .wb-track__vis i:nth-child(3){animation-delay:0.3s}
  .wb-tracks .wb-track--site .wb-track__vis i:nth-child(4){animation-delay:0.45s}
  .wb-tracks .wb-track--app .wb-track__vis b{animation:wbCode 2.4s ease-in-out infinite}
  .wb-tracks .wb-track--care polyline{stroke-dasharray:0.3 0.7;animation:wbBeat 2.2s linear infinite}
  .wb-tracks.is-paused *{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .sw-proof{-webkit-mask-image:none;mask-image:none}
  .sw-proof__row{width:auto;justify-content:center}
  .sw-proof__track{flex-wrap:wrap;justify-content:center;row-gap:8px}
  .sw-proof__track[aria-hidden]{display:none}
  .sw-b-cursor,.sw-b-ripple{display:none}
}
@keyframes swIn{to{opacity:1;transform:none}}
@keyframes swBuild{0%{transform:scaleX(0);opacity:1}10%{transform:none;opacity:1}88%{transform:none;opacity:1}95%,100%{transform:none;opacity:0}}
@keyframes swCta{0%,12%{transform:scale(0.6);opacity:0}18%{transform:none;opacity:1}46%{transform:none}49%{transform:scale(0.92)}52%{transform:none}88%{opacity:1}95%,100%{opacity:0}}
@keyframes swCursor{0%,22%{opacity:0;transform:translate(150px,90px)}26%{opacity:1;transform:translate(150px,90px)}46%{transform:translate(0,0)}49%{transform:translate(0,0) scale(0.85)}52%{transform:translate(0,0)}80%{opacity:1;transform:translate(0,0)}86%,100%{opacity:0;transform:translate(0,0)}}
@keyframes swRipple{0%,48%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(0.5)}62%,100%{opacity:0;transform:scale(2.2)}}
@keyframes swToast{0%,52%{opacity:0;transform:translateY(-12px) scale(0.96)}57%{opacity:1;transform:none}86%{opacity:1;transform:none}93%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes swMarquee{to{transform:translateX(-100%)}}
@keyframes swPanel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes swPulse{0%,100%{opacity:1;transform:none}50%{opacity:0.4;transform:scale(1.5)}}
@keyframes wbBar{0%{transform:scaleX(0.2)}30%,80%{transform:none}100%{transform:scaleX(0.2)}}
@keyframes wbCode{0%,100%{transform:none}50%{transform:translateY(-4px) scale(1.05)}}
@keyframes wbBeat{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ── Responsive ── */
@media (max-width:1100px){.wb-tracks{grid-template-columns:1fr}.wb-track__vis{max-width:420px}}
@media (max-width:980px){
  .sw-hero__grid,.wb-hero__grid,.sw-inc{grid-template-columns:1fr}
  .sw-browser,.wb-code{max-width:560px}
  .sw-toast{right:10px}
}
@media (max-width:760px){
  .sw-panel{grid-template-columns:1fr}
  .sw-axis{margin-left:0}
  .sw-price,.sw-gantt li{grid-template-columns:1fr;gap:10px}
  .sw-maint__p{text-align:left}
  .sw-tabs__list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .sw-tabs__list button{flex:0 0 auto}
  .sw-toast{top:auto;bottom:-18px;right:10px}
}
.sw-promise b,.sw-panel__price b,.sw-price__bar em,.sw-maint__p b,.wb-track__price{font-variant-numeric:tabular-nums}