/* AZ.GRAPHIK — fx.css : marquee infini + effets */
.fx-marquee{position:relative;padding:clamp(56px,9vw,110px) 0;overflow:hidden;background:var(--dark);z-index:1}
.fx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:0 var(--px) 36px}
.fx-head h2{font-size:clamp(30px,6vw,76px);font-weight:800;letter-spacing:-.035em;line-height:.98}
.fx-head h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.fx-tag{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue2)}
.fx-hint{font-size:12px;color:var(--muted);letter-spacing:.08em}
.fx-row{display:flex;width:max-content;gap:16px;margin-bottom:16px;will-change:transform}
.fx-item{position:relative;flex:none;display:block;width:clamp(170px,19vw,290px);aspect-ratio:1/1;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:var(--navy);transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .4s}
.fx-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.fx-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(21,18,31,.85),transparent 55%);opacity:0;transition:opacity .4s}
.fx-item b{position:absolute;left:14px;bottom:12px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.fx-item:hover{transform:scale(1.07);z-index:3;border-color:var(--blue2);box-shadow:0 18px 50px rgba(28,92,244,.35)}
.fx-item:hover img{transform:scale(1.12)}
.fx-item:hover::after,.fx-item:hover b{opacity:1}
.fx-item:hover b{transform:none}
.fx-marquee::before,.fx-marquee::after{content:'';position:absolute;top:0;bottom:0;width:clamp(40px,10vw,160px);z-index:4;pointer-events:none}
.fx-marquee::before{left:0;background:linear-gradient(to right,var(--dark),transparent)}
.fx-marquee::after{right:0;background:linear-gradient(to left,var(--dark),transparent)}
[data-magnetic]{will-change:transform}
@media(prefers-reduced-motion:reduce){.fx-row{transform:none!important}.fx-marquee{overflow-x:auto}}

/* ═════ FX 2 : hero fragments, progress, clip reveal, tilt, label curseur ═════ */
.hero>.hero-badge,.hero>.hero-title,.hero>.hero-sub,.hero>.hero-actions{position:relative;z-index:2}
.fx-frag{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-frag i{position:absolute;display:block;width:calc(var(--s)*1px);aspect-ratio:1/1;border-radius:14px;opacity:0;animation:fxIn 1.2s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(3.4s + var(--d)*.12s);will-change:transform}
.fx-frag img{width:100%;height:100%;object-fit:cover;border-radius:inherit;border:1px solid rgba(246,246,246,.12);box-shadow:0 20px 60px rgba(0,0,0,.45);animation:fxFloat 7s ease-in-out infinite;animation-delay:calc(var(--d)*-1.3s)}
@keyframes fxIn{from{opacity:0;transform:scale(.6)}to{opacity:.55}}
@keyframes fxFloat{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-16px) rotate(calc(var(--r) + 3deg))}}
@media(max-width:700px){.fx-frag i{width:calc(var(--s)*.55px)}.fx-frag i:nth-child(n+6){display:none}}
.fx-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;z-index:150;pointer-events:none}
.fx-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.fx-clip.in{clip-path:inset(0 0 0 0)}
.project-card{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s;transform-style:preserve-3d}
.fx-label{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;padding:8px 14px;border-radius:100px;background:var(--grad);color:var(--dark);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:0;scale:.6;transition:opacity .25s,scale .3s cubic-bezier(.16,1,.3,1)}
.fx-label.on{opacity:1;scale:1}
@media(hover:none){.fx-label{display:none}}
@media(prefers-reduced-motion:reduce){.fx-frag i{animation:none;opacity:.5}.fx-frag img{animation:none}.fx-clip{clip-path:none}}

/* ═════ FX 3 : nouveau carrousel plein écran, bandeau géant, titres, spotlight ═════ */
.fxc{position:fixed;inset:0;z-index:600;display:flex;flex-direction:column;background:rgba(8,6,15,.97);backdrop-filter:blur(24px);opacity:0;pointer-events:none;transition:opacity .5s}
.fxc.on{opacity:1;pointer-events:auto}
.fxc-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px var(--px)}
.fxc-title{font-size:clamp(20px,3.2vw,36px);font-weight:800;letter-spacing:-.025em}
.fxc-count{margin-left:auto;font-weight:700;letter-spacing:.14em;color:var(--blue2);font-variant-numeric:tabular-nums}
.fxc-x,.fxc-arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:rgba(246,246,246,.04);color:var(--white);font-size:16px;font-family:var(--font);cursor:none;transition:background .25s,border-color .25s,transform .25s}
.fxc-x:hover,.fxc-arrow:hover{background:rgba(28,92,244,.25);border-color:var(--blue2)}
.fxc-stage{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:pan-y;user-select:none}
.fxc-track{display:flex;height:100%;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.fxc-slide{flex:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 clamp(24px,9vw,150px)}
.fxc-slide img{max-width:100%;max-height:100%;border-radius:18px;pointer-events:none;box-shadow:0 30px 110px rgba(28,92,244,.28);transform:scale(.82) rotate(-1.5deg);opacity:.15;filter:blur(6px);transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s,filter .7s}
.fxc-slide.on img{transform:none;opacity:1;filter:none}
.fxc-arrow{position:absolute;top:50%;margin-top:-23px;z-index:3}
.fxc-l{left:clamp(10px,2.5vw,36px)}.fxc-r{right:clamp(10px,2.5vw,36px)}
.fxc-film{display:flex;gap:8px;justify-content:center;padding:14px var(--px) 18px;overflow-x:auto;scrollbar-width:none}
.fxc-film img{flex:none;width:58px;height:58px;object-fit:cover;border-radius:10px;border:1px solid transparent;opacity:.4;cursor:none;transition:opacity .3s,transform .3s,border-color .3s}
.fxc-film img.on{opacity:1;border-color:var(--blue2);transform:translateY(-5px)}
.fxc-bar{height:2px;background:var(--grad);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.fx-big{overflow:hidden;padding:clamp(28px,5vw,64px) 0;background:var(--dark);position:relative;z-index:1}
.fx-big div{display:flex;width:max-content;font-size:clamp(64px,13vw,200px);font-weight:900;letter-spacing:-.03em;line-height:1.05;white-space:nowrap;will-change:transform}
.fx-big div:first-child{color:rgba(246,246,246,.09)}
.fx-big div:last-child{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em}
.fx-w>span{display:inline-block;transform:translateY(112%);transition:transform .95s cubic-bezier(.16,1,.3,1) calc(var(--i)*75ms)}
.in .fx-w>span{transform:none}
.service-card::before,.shop-card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,221,252,.13),transparent 60%)}
.service-card:hover::before,.shop-card:hover::after{opacity:1}

/* ═════ FX 4 ═════ */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.hero-title{line-height:1.06}
.hero-line{padding:.1em 0 .16em;margin:-.1em 0 -.12em}
.reveal{filter:none!important;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.orb{filter:none;opacity:1}
.orb-1,.orb-3{background:radial-gradient(circle,rgba(28,92,244,.10),transparent 68%)}
.orb-2{background:radial-gradient(circle,rgba(0,221,252,.08),transparent 68%)}
.shop-preview.has-img .shop-preview-content,.shop-preview.has-img .shop-preview-bg{opacity:0}
.fx-shop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.shop-card:hover .fx-shop{transform:scale(1.08)}
.fx-sw{opacity:.2;transition:opacity .45s,color .45s}
.fx-sw.on{opacity:1;color:var(--white)}
@media(prefers-reduced-motion:reduce){.fx-sw{opacity:1}}

/* ═════ FX 5 : fix du titre « Stratégie » ═════ */
.hero-title:not(.fx-ready) .hero-line-inner{visibility:hidden}
.hero-line-inner{animation:none!important}
.hero-line-inner>span{padding:.14em .03em .2em;margin:-.14em -.03em -.2em}
.hero-bg-text{color:rgba(246,246,246,.012)}

/* ═════ FX 6 : warp, étoiles filantes, halo, anneau 3D ═════ */
.fx-warp{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.fx-halo{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:1;will-change:transform;background:radial-gradient(circle,hsla(var(--fh,225),95%,58%,.15),hsla(calc(var(--fh,225) - 30),95%,60%,.05) 42%,transparent 68%)}
.fx-comet{position:fixed;left:0;top:0;height:2px;z-index:3;pointer-events:none;opacity:0;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(0,221,252,.55),#fff);will-change:transform,opacity}
.fx-comet::after{content:'';position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px rgba(0,221,252,.75)}
.fx-ring-sec{position:relative;z-index:2;padding:clamp(56px,9vw,110px) 0;background:var(--dark);overflow:hidden}
.fx-ring-wrap{position:relative;perspective:1500px;height:clamp(380px,54vw,620px);display:flex;align-items:center;justify-content:center;touch-action:pan-y;user-select:none;cursor:grab}
.fx-ring-wrap::before{content:'';position:absolute;inset:8% 12%;border-radius:50%;background:radial-gradient(ellipse,rgba(28,92,244,.18),transparent 65%);pointer-events:none}
.fx-ring{position:relative;width:clamp(150px,22vw,260px);aspect-ratio:1/1;transform-style:preserve-3d;will-change:transform}
.fx-ring a{position:absolute;inset:0;border-radius:16px;overflow:hidden;border:1px solid rgba(246,246,246,.14);background:var(--navy);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.fx-ring img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.fx-ring b{position:absolute;left:12px;bottom:10px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 10px #000}
@media(prefers-reduced-motion:reduce){.fx-warp,.fx-comet{display:none}}

/* ═════ FX 7 : section Services animée ═════ */
.fx-svc{border-top:1px solid var(--border)}
.fx-s{position:relative;border-bottom:1px solid var(--border);opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*70ms)}
.fx-s.in{opacity:1;transform:none}
.fx-s::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,92,244,.14),rgba(0,221,252,.04) 60%,transparent);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.16,1,.3,1);pointer-events:none}
.fx-s:hover::before,.fx-s.open::before{transform:scaleX(1)}
.fx-s-head{position:relative;width:100%;display:grid;grid-template-columns:clamp(40px,6vw,80px) 1fr auto;align-items:center;gap:16px;padding:clamp(20px,3vw,32px) 8px;background:none;border:0;color:var(--white);font-family:var(--font);text-align:left;cursor:none}
.fx-s-num{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--blue2)}
.fx-s-title{font-size:clamp(24px,4.8vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1.05;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.fx-s:hover .fx-s-title{transform:translateX(12px)}
.fx-s.open .fx-s-title{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.fx-s-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--blue2);transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.fx-s:hover .fx-s-arrow{border-color:var(--blue2)}
.fx-s.open .fx-s-arrow{transform:rotate(45deg);background:rgba(28,92,244,.25)}
.fx-s-body{position:relative;display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.16,1,.3,1)}
.fx-s.open .fx-s-body{grid-template-rows:1fr}
.fx-s-body>div{min-height:0;overflow:hidden}
.fx-s-in{display:grid;grid-template-columns:1fr 220px;gap:32px;align-items:center;padding:4px 8px 34px clamp(56px,7.5vw,96px)}
.fx-s-in p{color:var(--muted);font-size:15px;line-height:1.75;max-width:520px;margin-bottom:18px}
.fx-s-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.fx-s-tags span{padding:7px 14px;border:1px solid var(--border);border-radius:100px;font-size:12px;font-weight:600;background:rgba(246,246,246,.03)}
.fx-s-cta{padding:12px 22px;border-radius:100px;border:0;background:var(--grad);color:var(--dark);font:700 13px var(--font);cursor:none}
.fx-viz{position:relative;height:150px;display:flex;align-items:center;justify-content:center}
.fx-viz *,.fx-viz::after{animation-play-state:paused}.fx-s.open .fx-viz *,.fx-s.open .fx-viz::after{animation-play-state:running}
.fx-viz i{display:block}
.k1 i{position:absolute;left:50%;top:50%;width:140px;height:140px;translate:-50% -50%;border:1.5px solid var(--blue2);border-radius:50%;opacity:0;animation:fxRing 3.2s cubic-bezier(.2,.6,.3,1) infinite}
.k1 i:nth-child(2){animation-delay:.8s}.k1 i:nth-child(3){animation-delay:1.6s}.k1 i:nth-child(4){animation-delay:2.4s}
@keyframes fxRing{from{transform:scale(.1);opacity:.9}to{transform:scale(1);opacity:0}}
.k2 i:first-child{width:92px;height:92px;background:var(--grad);animation:fxMorph 5s ease-in-out infinite}.k2 i:nth-child(n+2),.k6 i{display:none}
@keyframes fxMorph{0%{border-radius:50%;rotate:0deg}33%{border-radius:14% 50% 14% 50%;rotate:120deg}66%{border-radius:0;rotate:240deg}100%{border-radius:50%;rotate:360deg}}
.k3{gap:12px;align-items:flex-end;padding-bottom:14px}.k3 i{width:22px;height:20%;border-radius:6px;background:var(--grad);animation:fxBar 1.4s ease-in-out infinite alternate}
.k3 i:nth-child(2){animation-delay:.25s}.k3 i:nth-child(3){animation-delay:.5s}.k3 i:nth-child(4){animation-delay:.75s}
@keyframes fxBar{to{height:90%}}
.k4 i{position:absolute}.k4 i:nth-child(1){left:6%;top:24%;width:44%;height:16px;border-radius:5px;background:rgba(28,92,244,.6)}
.k4 i:nth-child(2){left:38%;top:60%;width:52%;height:16px;border-radius:5px;background:rgba(0,221,252,.45)}
.k4 i:nth-child(3){left:6%;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 12px var(--blue2);animation:fxPlay 2.8s linear infinite}.k4 i:nth-child(4){display:none}
@keyframes fxPlay{to{left:94%}}
.k5 i{position:absolute;border-radius:50%;animation:fxDrift 6s ease-in-out infinite}
.k5 i:nth-child(1){width:96px;height:96px;left:14%;top:8%;background:radial-gradient(circle at 30% 30%,#7feaff,#1C5CF4)}
.k5 i:nth-child(2){width:74px;height:74px;right:12%;top:38%;background:radial-gradient(circle at 30% 30%,#c7a8ff,#6b21a8);animation-delay:-2s}
.k5 i:nth-child(3){width:54px;height:54px;left:42%;bottom:2%;background:radial-gradient(circle at 30% 30%,#fff,#00DDFC);animation-delay:-4s}.k5 i:nth-child(4){display:none}
@keyframes fxDrift{50%{transform:translate(14px,-16px) scale(1.08)}}
.k6::before{content:'</>';font-size:68px;font-weight:900;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.k6::after{content:'';width:4px;height:56px;margin-left:8px;background:var(--blue2);animation:fxCaret 1s steps(1) infinite}
@keyframes fxCaret{50%{opacity:0}}
@media(max-width:700px){.fx-s-in{grid-template-columns:1fr;padding-left:8px}.fx-viz{height:110px;order:-1}.fx-s-head{grid-template-columns:34px 1fr auto}}
@media(prefers-reduced-motion:reduce){.fx-s{opacity:1;transform:none;transition:none}.fx-viz *,.fx-viz::after{animation:none!important}}