/* =====================================================================
   ANIMATIONS — tout est conditionné par html.anim (ajouté par animations.js
   seulement si le visiteur n'a PAS demandé de "réduire les animations").
   ===================================================================== */
:root{--ease:cubic-bezier(.2,.8,.2,1);--ease-io:cubic-bezier(.77,0,.18,1)}
html{scroll-padding-top:84px;--t0:.15s}
html.anim:not(.no-loader){--t0:1.75s}

/* Intro */
.loader{display:none}
html.anim:not(.no-loader) .loader{position:fixed;inset:0;z-index:1000;background:var(--noir);display:grid;place-items:center;overflow:hidden;pointer-events:none;animation:ld-out .65s var(--ease-io) 1.5s forwards}
.ld-core{display:grid;justify-items:center;gap:30px}
.ld-mark{width:60px;height:60px;background:var(--rouge);border-radius:22% 22% 22% 6px;transform:rotate(38deg) scale(0);animation:ld-mark 1.5s var(--ease-io) forwards}
.ld-brand{font-family:var(--font-display);color:var(--blanc);font-size:1.15rem;letter-spacing:.5em;padding-left:.5em;opacity:0;animation:ld-brand 1.5s var(--ease) forwards}
.ld-brand b{color:var(--rouge-vif);font-weight:400}
.ld-bar{width:140px;height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.ld-bar i{display:block;height:100%;background:var(--rouge-vif);transform:scaleX(0);transform-origin:left;animation:ld-bar .75s var(--ease-io) .15s forwards}
@keyframes ld-mark{0%{transform:rotate(-52deg) scale(0)}35%{transform:rotate(38deg) scale(1)}62%{transform:rotate(38deg) scale(1)}100%{transform:rotate(38deg) scale(70)}}
@keyframes ld-brand{0%{opacity:0;letter-spacing:.8em;translate:0 10px}25%{opacity:0}42%{opacity:1;letter-spacing:.38em;translate:0 0}60%{opacity:1}72%,100%{opacity:0}}
@keyframes ld-bar{to{transform:scaleX(1)}}
@keyframes ld-out{to{transform:translateY(-100%);visibility:hidden}}

/* Barre de progression */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--rouge-sombre),var(--rouge-vif));transform:scaleX(0);transform-origin:0 50%;z-index:1001;pointer-events:none}

/* Header */
html.anim header{transition:transform .45s var(--ease),box-shadow .3s ease,background .3s ease}
html.anim header.scrolled{box-shadow:0 10px 34px rgba(0,0,0,.07)}
html.anim header.hide{transform:translateY(-100%)}
.brand img{transition:transform .7s var(--ease)}
.brand:hover img{transform:rotate(180deg) scale(1.08)}
@media (min-width:761px){
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--rouge);scale:0 1;transform-origin:right;transition:scale .4s var(--ease)}
nav a:hover::after,nav a.active::after{scale:1 1;transform-origin:left}
}
nav a.active{color:var(--rouge-vif)}

/* Hero */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
html.anim .hero h1:not(.sp){opacity:0}
.sp .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.09em .02em;margin:-.09em -.02em}
.sp .c{display:inline-block}
html.anim .sp-hero .c{translate:0 120%;rotate:7deg;animation:ch 1s var(--ease) both;animation-delay:calc(var(--t0) + .08s + var(--i)*17ms)}
@keyframes ch{from{translate:0 120%;rotate:7deg}to{translate:0 0;rotate:0deg}}
html.anim .hero-kicker,html.anim .hero p.lead,html.anim .hero-actions,html.anim .hero-tags{opacity:0;translate:0 26px;animation:up .95s var(--ease) both;animation-delay:calc(var(--t0) + var(--hd,0s))}
html.anim .hero p.lead{--hd:.75s}
html.anim .hero-actions{--hd:.92s}
html.anim .hero-tags{--hd:1.08s}
@keyframes up{to{opacity:1;translate:0 0}}
.hero-kicker::before{animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(209,14,43,.55)}70%,100%{box-shadow:0 0 0 11px rgba(209,14,43,0)}}
html.anim .hero .deco,html.anim .cta-panel .deco{animation-name:dpop,dfloat;animation-duration:1.3s,14s;animation-delay:calc(var(--t0) - .25s),0s;animation-timing-function:var(--ease),ease-in-out;animation-iteration-count:1,infinite;animation-direction:normal,alternate;animation-fill-mode:backwards,none}
html.anim .hero .deco.d2{animation-duration:1.3s,10s;animation-direction:normal,alternate-reverse}
html.anim .hero .deco.d3{animation-duration:1.3s,8s}
html.anim .cta-panel .deco.fill{animation-duration:1.3s,11s;animation-direction:normal,alternate-reverse}
@keyframes dpop{from{scale:0;opacity:0}}
@keyframes dfloat{from{rotate:-8deg}to{rotate:12deg}}

/* Rubans défilants */
.marquee{position:relative;height:210px;margin-top:-26px;overflow:hidden;z-index:3;pointer-events:none}
.mq-ribbon{position:absolute;left:-8vw;width:116vw;top:50%;height:68px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;--rot:-1.8deg;--sk:0deg;transform:translateY(-50%) rotate(var(--rot)) skewX(var(--sk))}
.mq-a{background:var(--noir);color:var(--blanc);z-index:2;box-shadow:0 14px 40px rgba(0,0,0,.18)}
.mq-b{background:var(--rouge);--rot:1.8deg;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.95)}
.mq-track{display:flex;flex:none;will-change:transform}
.mq-item{display:flex;align-items:center;font-family:var(--font-display);font-size:1.7rem;line-height:1;text-transform:uppercase;letter-spacing:.05em;padding-left:28px}
.mq-item::after{content:"";width:10px;height:10px;margin-left:28px;background:var(--rouge-vif);border-radius:2px;transform:rotate(45deg)}
.mq-b .mq-item::after{background:var(--blanc)}

/* Apparition au scroll */
html.anim :is(.section-eyebrow,.section-sub,.service-item,.process-item,.about>div:first-child>p,.domaine-pill,.stat,.cta-inner>p,.cta-inner>.btn,.contact-info>p,.contact-line,#contactForm .field){transition:opacity .85s var(--ease) calc(var(--d,0)*1ms),translate .85s var(--ease) calc(var(--d,0)*1ms)}
html.anim :is(.section-eyebrow,.section-sub,.service-item,.process-item,.about>div:first-child>p,.domaine-pill,.stat,.cta-inner>p,.cta-inner>.btn,.contact-info>p,.contact-line,#contactForm .field):not(.in){opacity:0;translate:0 38px}
html.anim :is(.section-title,.cta-inner h2):not(.sp){opacity:0}
html.anim .sp:not(.sp-hero) .c{translate:0 120%;transition:translate .9s var(--ease) calc(var(--i)*15ms)}
html.anim .sp.in:not(.sp-hero) .c{translate:0 0}
html.anim .section-eyebrow::before{scale:0 1;transform-origin:left;transition:scale .7s var(--ease) .25s}
html.anim .section-eyebrow.in::before{scale:1 1}

/* Services */
.service-item{position:relative;overflow:hidden}
.service-item>*{position:relative;z-index:1}
.service-item::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(209,14,43,.11),transparent 62%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.service-item:hover::before{opacity:1}
.service-item::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--rouge);scale:0 1;transform-origin:left;transition:scale .5s var(--ease)}
.service-item:hover::after{scale:1 1}
.service-mark{transition:transform .7s cubic-bezier(.3,1.7,.5,1),border-radius .5s ease}
.service-item:hover .service-mark{transform:rotate(225deg) scale(1.3);border-radius:50% 50% 50% 8px}
.service-item h3{transition:translate .4s var(--ease),color .3s ease}
.service-item:hover h3{translate:8px 0;color:var(--rouge)}
html.anim .service-item{transition:opacity .85s var(--ease) calc(var(--d,0)*1ms),translate .85s var(--ease) calc(var(--d,0)*1ms),background .2s ease}

/* Process */
.process-item::after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--rouge);scale:1 0;transform-origin:top;transition:scale 1s var(--ease) calc(var(--d,0)*1ms + 250ms)}
.process-item.in::after{scale:1 1}
.process-num{display:inline-block;transition:translate .4s var(--ease)}
.process-item:hover .process-num{translate:8px 0}

/* Stats */
.stat{position:relative}
.stat b{font-variant-numeric:tabular-nums}
html.anim .stat{transition:opacity .85s var(--ease) calc(var(--d,0)*1ms),translate .85s var(--ease) calc(var(--d,0)*1ms),transform .3s var(--ease),box-shadow .3s ease}
.stat.tilt{z-index:2;box-shadow:0 22px 44px rgba(0,0,0,.13)}

/* Pills */
html.anim .domaine-pill{transition:opacity .85s var(--ease) calc(var(--d,0)*1ms),translate .85s var(--ease) calc(var(--d,0)*1ms),background .25s ease,color .25s ease,border-color .25s ease,rotate .3s ease,scale .3s ease}
.domaine-pill:hover{background:var(--rouge);border-color:var(--rouge);color:var(--blanc);rotate:-2deg;scale:1.07}

/* Boutons */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);translate:-130% 0;transition:translate .75s var(--ease);pointer-events:none}
.btn:hover::after{translate:130% 0}
html.anim .btn{transition:transform .15s ease,background .2s ease,border-color .2s ease,color .2s ease,translate .35s var(--ease)}

/* Formulaire */
.field label{transition:color .25s ease}
.field:focus-within label{color:var(--rouge)}
.field input:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(209,14,43,.1)}
.form-status.show{animation:pop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}}

/* Curseur */
.cur,.cur-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:1002;opacity:0;transition:opacity .3s ease}
.cur.on,.cur-dot.on{opacity:1}
.cur i{display:block;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--rouge);border-radius:22% 22% 22% 6px;transform:rotate(38deg);transition:transform .4s var(--ease),background .3s ease}
.cur.link i{transform:rotate(128deg) scale(1.65);background:rgba(209,14,43,.12)}
.cur.down i{transform:rotate(38deg) scale(.7)}
.cur.text{opacity:0!important}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--rouge);border-radius:1px;rotate:45deg}

/* Confettis */
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:998;pointer-events:none}

@media (max-width:760px){
.marquee{height:170px}
.mq-ribbon{height:54px}
.mq-item{font-size:1.25rem;padding-left:20px}
.mq-item::after{margin-left:20px}
}