/* ============================================================
   POLICES AUTO-HÉBERGÉES
   Servies depuis publimea.fr et non depuis Google Fonts :
   aucune adresse IP de visiteur n'est transmise à un tiers,
   et la page s'affiche sans attendre un serveur externe.
   ============================================================ */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/bebas-neue-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/inter-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:italic;font-weight:300;font-display:swap;src:url('assets/fonts/inter-latin-300-italic.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/lora-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/lora-latin-700-normal.woff2') format('woff2')}

/* ============================================================
   PUBLIMEA — Shared stylesheet (landing + sub-pages)
   ============================================================ */
:root{--y:#F5C400;--ylogo:#FFD700;--yd:#C49800;--b:#0a0a0a;--bm:#141414;--bs:#1c1c1c;--w:#F0EDE8;--g:#585852;--gd:#383832}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--b);color:var(--w);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;scroll-behavior:smooth}
body{overflow-x:hidden}
a,button{text-decoration:none;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--y);color:var(--b)}

/* CURSOR — custom cursor disabled (native cursor for reliable, precise clicks) */
#cur,#cur-ring,#cur-label{display:none!important}

/* LOADER */
#loader{position:fixed;inset:0;background:var(--b);z-index:200000;display:flex;flex-direction:column;align-items:center;justify-content:center}
#ldr-logo{opacity:0;transform:translateY(24px)}
#ldr-pct{font-family:'Bebas Neue',sans-serif;font-size:clamp(5rem,18vw,14rem);line-height:1;color:var(--y);margin-top:1rem;letter-spacing:-.02em;opacity:0}
#ldr-bar{position:absolute;bottom:0;left:0;height:2px;background:var(--y);width:0}
#ldr-tagline{position:absolute;bottom:3rem;left:5%;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--g);opacity:0}
#loader.out{pointer-events:none}

/* ============================================================
   BRAND LOGO (vector recreation — gold "M" emblem)
   Text uses currentColor → white on dark header, dark on light footer.
   ============================================================ */
.brand{display:inline-flex;align-items:center;gap:.02em;font-family:'Lora',Georgia,serif;font-weight:700;line-height:1;letter-spacing:.005em;position:relative;z-index:1;color:var(--w);white-space:nowrap}
.brand-txt{font-size:1.3rem;display:inline-block;transform:translateY(.02em)}
.brand-mark{height:1.42em;width:auto;display:block;margin:0 .005em;flex-shrink:0}
.brand-mark .bm-gold{fill:var(--y)}
.hdr .brand{font-size:1.3rem}
#ldr-logo{display:inline-block}
#ldr-logo .brand{font-size:2rem;color:var(--w)}
footer .brand{color:var(--b)}

/* HEADER */
.hdr{position:fixed;top:0;left:0;width:100%;padding:1.75rem 5%;display:flex;justify-content:space-between;align-items:center;z-index:9500}
.hdr-inner{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.9) 0%,transparent 100%);opacity:0;transition:opacity .4s;backdrop-filter:blur(0px);z-index:-1}
.hdr.solid .hdr-inner{opacity:1;backdrop-filter:blur(16px)}
.hdr .brand{opacity:0;transition:opacity .5s}
.hdr .brand.v{opacity:1}
.hdr-right{display:flex;align-items:center;gap:2.25rem}
.hdr-nav{display:flex;gap:2.25rem;align-items:center}
.hdr-nav a{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,237,232,.45);opacity:0;transform:translateY(-12px);transition:color .3s,opacity .5s,transform .6s cubic-bezier(.19,.91,.16,1)}
.hdr-nav a.v{opacity:1;transform:translateY(0)}
.hdr-nav a:hover{color:var(--w)}
.hdr-nav a.active{color:var(--y)}
.hdr-cta{background:var(--y) !important;color:var(--b) !important;padding:.55rem 1.3rem;font-weight:700 !important;position:relative;overflow:hidden}
.hdr-cta::after{content:'';position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.19,.91,.16,1)}
.hdr-cta:hover::after{transform:scaleX(1)}
.hdr-cta span{position:relative;z-index:1}
body.menu-open .hdr-nav{opacity:0;pointer-events:none;transition:opacity .25s}

/* BURGER — now lives inside the header flow (no overlap with CTA) */
.burger{position:relative;width:46px;height:46px;z-index:10000;cursor:pointer;opacity:0;transition:opacity .5s;flex-shrink:0}
.burger.v{opacity:1}
.burger-box{width:100%;height:100%;position:relative;perspective:120px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.19,.91,.16,1)}
.burger-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;backface-visibility:hidden;transition:background .3s}
.burger-front{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.burger-front:hover{background:rgba(245,196,0,.12);border-color:rgba(245,196,0,.4)}
.burger-back{background:var(--y);transform:rotateY(180deg);gap:0}
.burger-back span{font-family:'Bebas Neue',sans-serif;font-size:.95rem;color:var(--b);letter-spacing:.04em}
.bl{width:20px;height:1.5px;background:var(--w);display:block;transform-origin:center;transition:transform .35s,opacity .35s,background .3s}
.menu-open .burger-box{transform:rotateY(180deg)}

/* FULLSCREEN MENU */
#menu{position:fixed;inset:0;z-index:9000;pointer-events:none}
#menu-bg{position:absolute;inset:0;background:var(--b)}
.menu-col{position:absolute;top:0;bottom:0;width:16.666%;transform-origin:top;transform:scaleY(0)}
.menu-col:nth-child(1){left:0;background:var(--bm)}
.menu-col:nth-child(2){left:16.666%;background:#111}
.menu-col:nth-child(3){left:33.333%;background:var(--bm)}
.menu-col:nth-child(4){left:50%;background:#111}
.menu-col:nth-child(5){left:66.666%;background:var(--bm)}
.menu-col:nth-child(6){left:83.333%;background:#111}
#menu-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:5rem 8%;opacity:0}
.mnav-item{overflow:hidden;margin:.1rem 0;line-height:1}
.mnav-link{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.6rem,9vw,8.5rem);line-height:.92;text-transform:uppercase;letter-spacing:.01em;color:var(--w);display:inline-flex;align-items:baseline;gap:1.5rem;transform:translateY(105%);transition:transform .8s cubic-bezier(.19,.91,.16,1),color .3s}
.mnav-link:hover{color:var(--y)}
.mnav-num{font-family:'Inter',sans-serif;font-size:clamp(.6rem,.9vw,.8rem);font-weight:500;color:var(--g);letter-spacing:.1em;transform:translateY(-4px)}
.menu-info{margin-top:3rem;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
.menu-info span{font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--g);margin-right:2rem;display:inline-block}

/* WEBGL CANVAS */
#gl-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.7}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;padding:9rem 5% 5rem;position:relative;z-index:10;overflow:hidden}
.hero-right{position:absolute;right:0;top:0;bottom:0;width:36%;background:rgba(20,20,20,.6);clip-path:polygon(15% 0,100% 0,100% 100%,0% 100%)}
.hero-pills{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 2.5rem 0 7rem;gap:1rem}
.hpill{background:rgba(245,196,0,.06);border:1px solid rgba(245,196,0,.15);color:rgba(245,196,0,.65);font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .9rem;width:fit-content;opacity:0;transform:translateX(40px);transition:opacity .6s,transform .6s,background .3s,color .3s}
.hpill:hover{background:rgba(245,196,0,.12);color:var(--y)}
.hero-content{position:relative;z-index:2;width:64%}
.hero-eyebrow{display:flex;align-items:center;gap:.8rem;margin-bottom:3rem;overflow:hidden}
.hero-eyebrow-inner{display:flex;align-items:center;gap:.8rem;transform:translateY(100%);transition:transform .7s .3s cubic-bezier(.19,.91,.16,1)}
.hero-eyebrow-inner.v{transform:translateY(0)}
.hero-dot{width:6px;height:6px;border-radius:50%;background:var(--y);flex-shrink:0}
.hero-eyebrow span{font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--y)}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,10vw,11rem);line-height:.87;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4rem;will-change:transform}
.tl{overflow:hidden;display:block}
.tw{display:inline-block;transform:translateY(110%);transition:transform .95s cubic-bezier(.19,.91,.16,1)}
.tw.v{transform:translateY(0)}
.tl:nth-child(1) .tw{transition-delay:.4s}
.tl:nth-child(2) .tw{transition-delay:.52s;color:var(--y)}
.tl:nth-child(3) .tw{transition-delay:.64s;color:var(--w)}
.hero-sub{display:flex;gap:4rem}
.hero-desc{max-width:400px;font-size:.97rem;line-height:1.9;color:rgba(240,237,232,.55);font-weight:300;opacity:0;transform:translateY(24px);transition:opacity .8s .85s,transform .8s .85s ease}
.hero-desc.v{opacity:1;transform:translateY(0)}
.hero-desc strong{color:var(--w);font-weight:500}
.hero-taglist{display:flex;flex-direction:column;gap:.5rem}
.htag{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g);display:flex;align-items:center;gap:.55rem;opacity:0;transform:translateX(-16px);transition:opacity .5s,transform .5s,color .2s}
.htag::before{content:'';width:16px;height:1px;background:var(--y);flex-shrink:0}
.htag:hover{color:var(--y)}
.scroll-ind{position:absolute;bottom:3.5rem;left:5%;display:flex;align-items:center;gap:1rem;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--g);opacity:0;transition:opacity .6s 1.4s;z-index:2}
.scroll-ind.v{opacity:1}
.scroll-ind-line{width:48px;height:1px;background:var(--y);transform-origin:left;animation:sline 2.2s ease-in-out infinite}
@keyframes sline{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.15)}}

/* PAGE HERO (sub-pages) */
.phero{position:relative;z-index:10;padding:10rem 5% 4rem;overflow:hidden}
.phero::after{content:'';position:absolute;bottom:0;left:5%;right:5%;height:1px;background:rgba(255,255,255,.07)}
.phero-bgword{position:absolute;right:-3%;top:42%;transform:translateY(-50%);font-family:'Bebas Neue',sans-serif;font-size:clamp(9rem,26vw,26rem);color:rgba(245,196,0,.04);line-height:1;pointer-events:none;white-space:nowrap;letter-spacing:-.02em}
.phero-eyebrow{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.8rem;font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--y)}
.phero-eyebrow .hero-dot{margin:0}
.phero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.2rem,9vw,8rem);line-height:.88;text-transform:uppercase;letter-spacing:.02em;color:var(--w);max-width:14ch}
.phero-title .acc{color:var(--y)}
.phero-lead{margin-top:2rem;max-width:560px;font-size:1rem;line-height:1.85;color:rgba(240,237,232,.55);font-weight:300}
.phero-lead strong{color:var(--w);font-weight:500}
.crumb{display:flex;align-items:center;gap:.6rem;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g);margin-bottom:2.5rem}
.crumb a{color:var(--g);transition:color .25s}
.crumb a:hover{color:var(--y)}
.crumb span{color:var(--y)}
.ph-rev{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.19,.91,.16,1),transform .85s cubic-bezier(.19,.91,.16,1)}
.ph-rev.v{opacity:1;transform:translateY(0)}

/* MARQUEE */
.mq{background:var(--y);padding:1rem 0;overflow:hidden;position:relative;z-index:10}
.mq-track{display:flex;white-space:nowrap;animation:mqanim 25s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-item{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.1em;text-transform:uppercase;color:var(--b);padding:0 1.5rem;display:flex;align-items:center;gap:1.5rem}
.mq-sep{width:5px;height:5px;border-radius:50%;background:rgba(10,10,10,.25);flex-shrink:0}
@keyframes mqanim{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SECTIONS */
.sec{padding:6.5rem 5%;position:relative;z-index:10}
.lbl{display:inline-flex;align-items:center;gap:.4rem;background:var(--y);color:var(--b);font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:.22rem .55rem;margin-bottom:2rem;opacity:0;transform:translateX(-20px);transition:opacity .5s,transform .5s ease}
.lbl.v{opacity:1;transform:translateX(0)}
.stitle{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,5.5vw,5.5rem);line-height:.9;text-transform:uppercase;letter-spacing:.02em;color:var(--w);margin-bottom:2.5rem}
.stitle .acc{color:var(--y)}
.stitle .out{color:var(--y)}
.reveal-line{overflow:hidden;display:block}
.reveal-inner{display:block;transform:translateY(110%);transition:transform .85s cubic-bezier(.19,.91,.16,1)}
.reveal-inner.v{transform:translateY(0)}

/* INTRO */
.intro-sec{background:var(--bm);position:relative;overflow:hidden}
.intro-sec::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--y) 0,var(--y) 20px,transparent 20px,transparent 32px)}
.intro-bg-word{position:absolute;right:-5%;bottom:-15%;font-family:'Bebas Neue',sans-serif;font-size:clamp(10rem,28vw,28rem);color:rgba(245,196,0,.03);line-height:1;pointer-events:none;letter-spacing:-.02em;white-space:nowrap}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:7rem;align-items:center}
.intro-text{font-size:clamp(1.2rem,2vw,1.85rem);font-weight:300;line-height:1.6;color:var(--w)}
.intro-text strong{font-weight:600;color:var(--y)}
.intro-text em{font-style:italic;color:rgba(240,237,232,.55)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.stat-item{border-left:2px solid var(--y);padding-left:1.25rem;opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s ease}
.stat-item.v{opacity:1;transform:translateY(0)}
.stat-num{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,4vw,3.2rem);line-height:1;color:var(--y)}
.stat-lbl{font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--g);margin-top:.2rem}

/* DATA CARDS */
.data-sec{background:var(--b)}
.data-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--bs);border:1.5px solid var(--bs);margin-top:4rem}
.data-card{background:var(--b);padding:4rem 3rem;position:relative;overflow:hidden;opacity:0;transform:translateY(50px);transition:opacity .7s,transform .7s ease,background .3s}
.data-card.v{opacity:1;transform:translateY(0)}
.data-card:hover{background:var(--bm)}
.data-pct{font-family:'Bebas Neue',sans-serif;font-size:clamp(4.5rem,8vw,7rem);line-height:1;color:var(--y);margin-bottom:1rem;transition:transform .3s}
.data-card:hover .data-pct{transform:scale(1.04)}
.data-txt{font-size:.86rem;line-height:1.85;color:rgba(240,237,232,.5);font-weight:300}
.data-txt strong{color:var(--w)}
.data-bot{position:absolute;bottom:0;left:0;height:2px;background:var(--y);width:0;transition:width .5s ease}
.data-card:hover .data-bot{width:100%}
.data-num-ghost{position:absolute;right:-5%;top:50%;transform:translateY(-50%);font-family:'Bebas Neue',sans-serif;font-size:clamp(8rem,18vw,16rem);color:rgba(245,196,0,.04);line-height:1;pointer-events:none;transition:color .3s}
.data-card:hover .data-num-ghost{color:rgba(245,196,0,.07)}

/* SERVICES */
.svc-sec{background:var(--bm)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--bs);border:1.5px solid var(--bs);margin-top:4rem}
.svc-card{position:relative;opacity:0;transform:translateY(42px);transition:opacity .8s cubic-bezier(.19,.91,.16,1),transform .8s cubic-bezier(.19,.91,.16,1);perspective:1000px;will-change:transform}
.svc-card.v{opacity:1;transform:translateY(0)}

.svc-num{font-family:'Bebas Neue',sans-serif;font-size:3rem;line-height:1;color:rgba(245,196,0,.09);margin-bottom:.75rem;transition:color .3s,transform .4s}
.svc-card:hover .svc-num{color:rgba(245,196,0,.22);transform:scale(1.1) translateX(4px)}
.svc-title{font-family:'Bebas Neue',sans-serif;font-size:1.55rem;letter-spacing:.03em;text-transform:uppercase;color:var(--w);margin-bottom:.75rem;transition:color .3s,transform .4s cubic-bezier(.19,.91,.16,1)}
.svc-card:hover .svc-title{color:var(--y);transform:translateX(8px)}
.svc-desc{font-size:.83rem;line-height:1.8;color:var(--g);font-weight:300;transition:color .3s}
.svc-card:hover .svc-desc{color:rgba(240,237,232,.55)}
.svc-bot{position:absolute;bottom:0;left:0;height:2px;background:var(--y);width:0;transition:width .5s ease}
.svc-card:hover .svc-bot{width:100%}
.svc-arr{position:absolute;top:2rem;right:2rem;width:30px;height:30px;background:var(--y);display:flex;align-items:center;justify-content:center;opacity:0;transform:translate(8px,-8px) rotate(-45deg);transition:opacity .35s,transform .35s cubic-bezier(.19,.91,.16,1)}
.svc-card:hover .svc-arr{opacity:1;transform:translate(0,0) rotate(0)}
.svc-arr svg{width:11px;fill:var(--b)}
.svc-tag{margin-top:1.25rem;display:inline-flex;align-items:center;gap:.45rem;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,196,0,.7);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s,color .3s}
.svc-card:hover .svc-tag{opacity:1;transform:translateY(0)}
.svc-tag svg{width:11px;fill:currentColor}

/* VALUES */
.val-sec{background:var(--b);position:relative;overflow:hidden}
.val-sec::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--y) 0,var(--y) 20px,transparent 20px,transparent 32px)}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid rgba(255,255,255,.05);margin-top:4rem}
.val-card{padding:4rem 3rem;border-right:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden;opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s ease}
.val-card.v{opacity:1;transform:translateY(0)}
.val-card:last-child{border-right:none}
.val-fill{position:absolute;inset:0;background:var(--y);transform:translateY(102%);transition:transform .55s cubic-bezier(.19,.91,.16,1);z-index:0}
.val-card:hover .val-fill{transform:translateY(0)}
.val-card>*:not(.val-fill){position:relative;z-index:1}
.val-n{position:absolute;top:2rem;right:2rem;font-family:'Bebas Neue',sans-serif;font-size:5rem;line-height:1;color:rgba(245,196,0,.06);pointer-events:none;z-index:1;transition:color .3s}
.val-card:hover .val-n{color:rgba(14,14,14,.07)}
.val-icon{width:42px;height:42px;border:1px solid rgba(245,196,0,.3);display:flex;align-items:center;justify-content:center;margin-bottom:1.75rem;transition:border-color .3s,background .3s}
.val-icon svg{width:18px;fill:var(--y);transition:fill .3s}
.val-card:hover .val-icon{border-color:var(--b);background:rgba(0,0,0,.1)}
.val-card:hover .val-icon svg{fill:var(--b)}
.val-title{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.03em;text-transform:uppercase;color:var(--w);margin-bottom:.75rem;transition:color .3s}
.val-desc{font-size:.83rem;line-height:1.8;color:var(--g);transition:color .3s}
.val-card:hover .val-title,.val-card:hover .val-desc{color:var(--b)}

/* CTA BAND */
.cta-band{background:var(--y);padding:7rem 5%;position:relative;overflow:hidden}
.cta-bg-text{position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-family:'Bebas Neue',sans-serif;font-size:clamp(6rem,20vw,20rem);color:rgba(0,0,0,.06);line-height:1;pointer-events:none;white-space:nowrap;transition:transform .1s ease-out}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:3rem;position:relative;z-index:1}
.cta-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,5.5vw,5.5rem);line-height:.92;text-transform:uppercase;letter-spacing:.02em;color:var(--b)}
.cta-title em{display:block;font-style:normal;color:var(--b)}
.btn{display:inline-flex;align-items:center;gap:.9rem;background:var(--b);color:var(--w);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:1.1rem 2.2rem;white-space:nowrap;flex-shrink:0;position:relative;overflow:hidden}
.btn-inner{position:relative;z-index:1;display:flex;align-items:center;gap:.9rem}
.btn-bg{position:absolute;inset:0;background:rgba(255,255,255,.12);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.19,.91,.16,1)}
.btn:hover .btn-bg{transform:scaleX(1)}
.btn svg{width:12px;fill:currentColor;transition:transform .35s cubic-bezier(.19,.91,.16,1)}
.btn:hover svg{transform:translate(4px,-4px)}
.btn-ghost{background:transparent;border:1px solid rgba(245,196,0,.35);color:var(--y)}
.btn-ghost .btn-bg{background:rgba(245,196,0,.12)}

/* CLIENTS — light cards holding real client logos */
.cli-sec{background:var(--bm);padding:6rem 5%}
.cli-top{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end;margin-bottom:3rem}
.cli-intro{font-size:.9rem;line-height:1.9;color:rgba(240,237,232,.45);font-weight:300}
.cli-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cli-cell{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;padding:1.4rem 1.5rem;opacity:0;transform:scale(.92);transition:opacity .5s,transform .5s ease,box-shadow .3s;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.cli-cell.v{opacity:1;transform:scale(1)}
.cli-cell:hover{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 2px var(--y)}
.cli-cell img{width:100%;height:100%;max-height:60px;object-fit:contain;filter:saturate(1)}

/* PROCESS */
.proc-sec{background:var(--b)}
.proc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.05);margin-top:5rem}
.proc-step{padding:3.5rem 2.5rem;border-right:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden;opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s ease}
.proc-step.v{opacity:1;transform:translateY(0)}
.proc-step:last-child{border-right:none}
.proc-fill{position:absolute;bottom:0;left:0;right:0;height:0;background:rgba(245,196,0,.04);transition:height .4s ease}
.proc-step:hover .proc-fill{height:100%}
.proc-n{font-family:'Bebas Neue',sans-serif;font-size:4.5rem;line-height:1;color:rgba(245,196,0,.09);margin-bottom:1.5rem;transition:color .3s,transform .4s}
.proc-step:hover .proc-n{color:rgba(245,196,0,.25);transform:scale(1.05)}
.proc-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:.03em;color:var(--w);margin-bottom:.75rem;position:relative;z-index:1}
.proc-desc{font-size:.82rem;line-height:1.8;color:var(--g);position:relative;z-index:1}
.proc-bot{position:absolute;bottom:0;left:0;height:2px;background:var(--y);width:0;transition:width .5s ease}
.proc-step:hover .proc-bot{width:100%}

/* CONTACT */
.contact-sec{background:var(--y);padding:6.5rem 5%;position:relative;overflow:hidden}
.contact-bg{position:absolute;bottom:-10%;right:-3%;font-family:'Bebas Neue',sans-serif;font-size:clamp(8rem,24vw,24rem);color:rgba(0,0,0,.06);line-height:1;pointer-events:none;white-space:nowrap}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:6rem;align-items:start;position:relative;z-index:1}
.contact-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.5rem,5vw,5rem);line-height:.92;text-transform:uppercase;letter-spacing:.02em;color:var(--b);margin-bottom:1.5rem}
.contact-title em{font-style:normal;color:var(--b);display:block}
.contact-sub{font-size:.92rem;line-height:1.85;color:rgba(14,14,14,.55);font-weight:300;margin-bottom:2.5rem;max-width:320px}
.contact-links{display:flex;flex-direction:column;gap:1rem}
.clink{font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--b);display:flex;align-items:center;gap:.7rem;transition:opacity .25s}
.clink:hover{opacity:.6}
.clink-dot{width:5px;height:5px;border-radius:50%;background:var(--b);flex-shrink:0}
.lbl-dark{background:var(--b);color:var(--y)}
.form{display:flex;flex-direction:column;gap:.85rem}
.form input,.form textarea{background:rgba(14,14,14,.08);border:1px solid rgba(14,14,14,.18);color:var(--b);font-family:'Inter',sans-serif;font-size:.87rem;padding:.9rem 1.1rem;width:100%;outline:none;-webkit-appearance:none;transition:border-color .25s,background .25s}
.form input::placeholder,.form textarea::placeholder{color:rgba(14,14,14,.38)}
.form input:focus,.form textarea:focus{border-color:var(--b);background:rgba(14,14,14,.12)}
.form textarea{height:118px;resize:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.form-btn{background:var(--b);color:#fff;font-family:'Inter',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:1rem;border:none;cursor:pointer;position:relative;overflow:hidden}
.form-btn-bg{position:absolute;inset:0;background:var(--bm);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.19,.91,.16,1)}
.form-btn:hover .form-btn-bg{transform:scaleX(1)}
.form-btn span{position:relative;z-index:1}

/* FOOTER */
footer{background:var(--w);color:var(--b);padding:5.5rem 5% 2.5rem;position:relative;z-index:10}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:4rem;margin-bottom:4rem}
.foot-brand{margin-bottom:1.5rem;color:var(--b)}
.foot-tag{font-size:.84rem;line-height:1.85;color:rgba(14,14,14,.45);max-width:240px}
.foot-col-h{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b);margin-bottom:1.2rem}
.foot-links{display:flex;flex-direction:column;gap:.5rem}
.foot-links a{font-size:.83rem;color:rgba(14,14,14,.45);transition:color .25s}
.foot-links a:hover{color:var(--b)}
.foot-info{font-size:.83rem;color:rgba(14,14,14,.45);line-height:1.9}
.foot-info a{color:var(--b);font-weight:500}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid rgba(14,14,14,.1);gap:1rem;flex-wrap:wrap}
.foot-copy{font-size:.72rem;color:rgba(14,14,14,.3)}
.foot-soc{display:flex;gap:2rem}
.foot-soc a{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(14,14,14,.35);transition:color .25s;position:relative}
.foot-soc a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--yd);transition:width .3s}
.foot-soc a:hover{color:var(--b)}
.foot-soc a:hover::after{width:100%}

/* MAGNETIC BTN */
.mag{display:inline-block;transition:transform .3s cubic-bezier(.19,.91,.16,1)}

/* ============================================================
   SERVICE MODAL — photo carousel
   ============================================================ */
#svc-modal{position:fixed;inset:0;z-index:150000;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);opacity:0;pointer-events:none;transition:opacity .4s}
#svc-modal.open{opacity:1;pointer-events:auto}
.svm-backdrop{position:absolute;inset:0;background:rgba(5,5,5,.84);backdrop-filter:blur(10px)}
.svm-dialog{position:relative;z-index:1;width:min(940px,100%);max-height:92vh;display:flex;flex-direction:column;background:var(--bm);border:1px solid rgba(245,196,0,.18);box-shadow:0 40px 120px rgba(0,0,0,.6);transform:translateY(34px) scale(.97);transition:transform .55s cubic-bezier(.19,.91,.16,1);overflow:hidden}
#svc-modal.open .svm-dialog{transform:translateY(0) scale(1)}
.svm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;padding:1.6rem 1.9rem 1.2rem}
.svm-eyebrow{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--y);margin-bottom:.5rem;display:block}
.svm-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.7rem,4vw,2.6rem);line-height:.95;text-transform:uppercase;letter-spacing:.02em;color:var(--w)}
.svm-close{flex-shrink:0;width:42px;height:42px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s;cursor:pointer}
.svm-close:hover{background:var(--y);border-color:var(--y)}
.svm-close svg{width:15px;stroke:var(--w);stroke-width:2;fill:none}
.svm-close:hover svg{stroke:var(--b)}
.svm-stage{position:relative;background:var(--b);overflow:hidden}
.svm-track{display:flex;transition:transform .6s cubic-bezier(.19,.91,.16,1)}
.svm-slide{min-width:100%;aspect-ratio:16/9;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.svm-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}
.svm-ph-num{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,11vw,7rem);line-height:1;color:rgba(245,196,0,.16)}
.svm-ph-tag{font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(240,237,232,.32)}
.svm-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svm-cap{position:relative;z-index:2;width:100%;padding:2.5rem 1.6rem 1.2rem;font-size:.8rem;font-weight:500;letter-spacing:.03em;color:var(--w);background:linear-gradient(to top,rgba(10,10,10,.88),transparent)}
.svm-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;background:rgba(10,10,10,.5);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;z-index:3;transition:background .3s,border-color .3s;cursor:pointer}
.svm-arrow:hover{background:var(--y);border-color:var(--y)}
.svm-arrow svg{width:15px;stroke:var(--w);stroke-width:2;fill:none}
.svm-arrow:hover svg{stroke:var(--b)}
.svm-prev{left:1rem}.svm-next{right:1rem}
.svm-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.9rem 1.4rem}
.svm-dots{display:flex;gap:.5rem}
.svm-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,transform .3s;cursor:pointer}
.svm-dot.active{background:var(--y);transform:scale(1.35)}
.svm-count{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g)}
.svm-count b{color:var(--y);font-weight:700}

/* ============================================================
   SERVICES PAGE — detailed expertise rows
   ============================================================ */
.xp-row{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:6rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.xp-row:nth-child(even) .xp-media{order:2}
.xp-num{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--y);letter-spacing:.1em;margin-bottom:1rem;display:flex;align-items:center;gap:.7rem}
.xp-num::after{content:'';width:40px;height:1px;background:rgba(245,196,0,.4)}
.xp-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:.95;text-transform:uppercase;letter-spacing:.02em;color:var(--w);margin-bottom:1.3rem}
.xp-desc{font-size:.95rem;line-height:1.9;color:rgba(240,237,232,.55);font-weight:300;margin-bottom:1.8rem;max-width:480px}
.xp-feats{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.xp-feat{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,196,0,.7);border:1px solid rgba(245,196,0,.2);padding:.4rem .8rem;transition:background .3s,color .3s}
.xp-feat:hover{background:rgba(245,196,0,.1)}
.xp-media{position:relative;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.08);overflow:hidden;cursor:pointer;background:var(--bm)}
.xp-media .svm-ph{position:absolute}
.xp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-media-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 1.4rem .9rem;background:linear-gradient(to top,rgba(10,10,10,.85),transparent);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--w)}
.xp-media-bar .pill{display:inline-flex;align-items:center;gap:.45rem;color:var(--y)}
.xp-media-bar svg{width:13px;fill:var(--y)}
.xp-media::after{content:'';position:absolute;inset:0;background:rgba(245,196,0,0);transition:background .3s;z-index:1}
.xp-media:hover::after{background:rgba(245,196,0,.08)}

/* ============================================================
   REALISATIONS — portfolio grid + filters
   ============================================================ */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;margin-bottom:3.5rem}
.filter{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,237,232,.5);border:1px solid rgba(255,255,255,.12);padding:.55rem 1.1rem;transition:background .3s,color .3s,border-color .3s;cursor:pointer}
.filter:hover{color:var(--w);border-color:rgba(245,196,0,.5)}
.filter.active{background:var(--y);color:var(--b);border-color:var(--y)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--bs);border:1.5px solid var(--bs)}
.gal-item{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--bm);cursor:pointer;opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s}
.gal-item.v{opacity:1;transform:translateY(0)}
.gal-item.hide{display:none}
.gal-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.19,.91,.16,1)}
.gal-item:hover img{transform:scale(1.06)}
.gal-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;transition:transform .6s cubic-bezier(.19,.91,.16,1);background:radial-gradient(circle at 32% 28%,rgba(245,196,0,.09),transparent 60%),linear-gradient(135deg,#15150f,#101010)}
.gal-item:hover .gal-ph{transform:scale(1.06)}
.gal-ph-num{font-family:'Bebas Neue',sans-serif;font-size:clamp(3rem,7vw,5rem);color:rgba(245,196,0,.14);line-height:1}
.gal-over{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;background:linear-gradient(to top,rgba(10,10,10,.9) 0%,rgba(10,10,10,0) 55%);opacity:0;transition:opacity .4s}
.gal-item:hover .gal-over{opacity:1}
.gal-cat{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--y);margin-bottom:.35rem}
.gal-name{font-family:'Bebas Neue',sans-serif;font-size:1.45rem;text-transform:uppercase;letter-spacing:.02em;color:var(--w);line-height:1}
.gal-plus{position:absolute;top:1.2rem;right:1.2rem;width:30px;height:30px;background:var(--y);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .35s,transform .35s}
.gal-item:hover .gal-plus{opacity:1;transform:scale(1)}
.gal-plus svg{width:13px;stroke:var(--b);stroke-width:2.5}

/* ABOUT — timeline */
.tl-wrap{margin-top:4rem;border-top:1px solid rgba(255,255,255,.07)}
.tl-row{display:grid;grid-template-columns:160px 1fr;gap:2.5rem;padding:2.6rem 0;border-bottom:1px solid rgba(255,255,255,.07);position:relative;opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.tl-row.v{opacity:1;transform:translateY(0)}
.tl-year{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--y)}
.tl-h{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:.03em;color:var(--w);margin-bottom:.5rem}
.tl-p{font-size:.9rem;line-height:1.85;color:rgba(240,237,232,.5);font-weight:300;max-width:560px}
/* ABOUT — team */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--bs);border:1.5px solid var(--bs);margin-top:4rem}
.team-card{background:var(--bm);padding:0;position:relative;overflow:hidden;opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s}
.team-card.v{opacity:1;transform:translateY(0)}
.team-photo{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;background:var(--bs);overflow:hidden}
.team-photo .svm-ph-num{color:rgba(245,196,0,.13)}
.team-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team-info{padding:1.4rem 1.5rem 1.6rem}
.team-name{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;text-transform:uppercase;letter-spacing:.03em;color:var(--w)}
.team-role{font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--y);margin-top:.3rem}

/* NOISE overlay */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");pointer-events:none;z-index:99990;opacity:.55}

/* ============================================================
   FIXES (retours client)
   ============================================================ */
/* Masquer les grands mots de fond qui débordaient / chevauchaient le texte */
.phero-bgword,.intro-bg-word,.contact-bg,.cta-bg-text{display:none !important}
/* Boutons filtres : fond transparent (sinon fond gris/blanc par défaut du navigateur) */
.filter{background:transparent;color:rgba(240,237,232,.72)}
/* Menu ouvert : retirer le bandeau flou de l'en-tête qui masquait « Accueil » */
body.menu-open .hdr-inner{opacity:0 !important;backdrop-filter:none !important}
body.menu-open .hdr{background:transparent}
/* Valeurs : le numéro passe en filigrane à gauche, derrière l'icône (plus de chevauchement) */
.val-card{padding-top:5.5rem}
.val-n{font-size:3.4rem;top:1.6rem;left:3rem;right:auto;z-index:0}
.val-icon{position:relative;z-index:2}
/* Vrai logo (image) — header / loader / footer */
.hdr-logo-link{display:inline-flex;align-items:center;position:relative;z-index:1;opacity:0;transition:opacity .5s}
.hdr-logo-link.v{opacity:1}
.hdr-logo{height:30px;width:auto;display:block}
#ldr-logo img{height:46px;width:auto;display:block}
.foot-logo{height:30px;width:auto;margin-bottom:1.4rem}
@media(max-width:760px){.hdr-logo{height:26px}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .intro-grid,.cli-top,.cta-inner,.contact-grid,.foot-top{grid-template-columns:1fr;gap:3rem}
  .data-grid,.svc-grid,.val-grid,.proc-steps{grid-template-columns:1fr}
  .val-card,.proc-step{border-right:none;border-bottom:1px solid rgba(255,255,255,.05)}
  .cli-grid{grid-template-columns:repeat(3,1fr)}
  .hdr-nav{display:none}
  .hero-right{display:none}
  .hero-content{width:100%}
  .form-row{grid-template-columns:1fr}
  body{cursor:auto}
  a,button,.form-btn,.svm-close,.svm-arrow,.svm-dot,.filter,.xp-media,.gal-item{cursor:pointer}
  #cur,#cur-ring,#cur-label{display:none}
  .xp-row{grid-template-columns:1fr;gap:2rem;padding:4rem 0}
  .xp-row:nth-child(even) .xp-media{order:0}
  .cta-inner{align-items:flex-start}
  /* Fill outlined titles → far more legible on phones */
  .stitle .out{-webkit-text-stroke:0;color:var(--y)}
  .cta-title em{-webkit-text-stroke:0;color:var(--b)}
  .contact-title em{-webkit-text-stroke:0;color:var(--b)}
  .tl:nth-child(3) .tw{-webkit-text-stroke:0;color:var(--w)}
}
@media(max-width:760px){
  .sec{padding:6rem 5%}
  .phero{padding:9.5rem 5% 4rem}
  .cli-sec{padding:6rem 5%}
  .contact-sec,.cli-sec{padding:6rem 5%}
  .tl-row{grid-template-columns:1fr;gap:.6rem;padding:2rem 0}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .foot-bot{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .svm-foot{flex-wrap:wrap}
  .hdr{padding:1.15rem 5%}
  .brand-txt{font-size:1.15rem}
}
@media(max-width:560px){
  .cli-grid{grid-template-columns:repeat(2,1fr)}
  .hero-sub{flex-direction:column;gap:2rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .gal-grid{grid-template-columns:1fr}
  .svm-arrow{width:38px;height:38px}
  .hero{padding:8rem 5% 4rem}
  .mq-item{font-size:1.05rem}
}
@media(max-width:380px){
  .stats-grid,.team-grid{grid-template-columns:1fr}
  .brand-txt{font-size:1.05rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.05ms !important}
}

/* ============================================================
   V2 — RETOURS CLIENT (août 2026)
   ============================================================ */

/* ---- 1. Typo : première phrase du site + labels de section ---- */
.hero-eyebrow span{font-size:clamp(.95rem,1.5vw,1.32rem);letter-spacing:.12em;font-weight:700;line-height:1.3}
.hero-dot{width:9px;height:9px}
.hero-eyebrow{margin-bottom:2.6rem}
.lbl{font-size:clamp(.95rem,1.5vw,1.28rem);letter-spacing:.1em;padding:.34rem .8rem;margin-bottom:1.8rem}

/* ---- 2. Cadrage des images : plus aucun recadrage sauvage ---- */
.img-frame{position:relative;overflow:hidden;background:var(--bs)}
.img-frame::before{content:'';position:absolute;inset:-8%;background-image:var(--bgimg);background-size:cover;background-position:center;filter:blur(26px) brightness(.45) saturate(.75);z-index:0}
.img-frame::after{content:'';position:absolute;inset:0;background:rgba(10,10,10,.18);z-index:0}
.img-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.svm-slide.img-frame{aspect-ratio:4/3;max-height:60vh}
.svm-slide .svm-cap{z-index:2}
.xp-media.img-frame::after{background:rgba(10,10,10,.1)}
.gal-item.img-frame>img{transition:transform .6s cubic-bezier(.19,.91,.16,1)}

/* ---- 3. Icônes des valeurs (France, feuille, sourire) ---- */
.val-icon{width:50px;height:50px}
.val-icon svg{width:26px;height:26px}
.val-icon .ico-fr{width:27px;height:27px}

/* ============================================================
   4. IMPRIMANTE — PERSONNAGE DU HERO
   ============================================================ */
.hero-right{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;padding:7rem 2rem 3rem 5rem}
.hero-right .hero-pills{position:static;inset:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:0;gap:.5rem;max-width:340px}
.hp-zone{width:min(300px,80%);display:flex;flex-direction:column;align-items:center}
.hp-stage{position:relative;width:100%;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.hp-svg{width:100%;height:auto;display:block;overflow:visible}
.hp-shadow{fill:rgba(0,0,0,.5)}
.hp-machine{transform-origin:110px 190px}
.hp-body{fill:#232320;stroke:rgba(245,196,0,.32);stroke-width:2}
.hp-top{fill:#2c2c28}
.hp-tray{fill:#1b1b18;stroke:rgba(245,196,0,.22);stroke-width:1.5}
.hp-sheet-in{fill:#efece6}
.hp-face{fill:#121210}
.hp-eye-w{fill:#F5F2EC}
.hp-pupil{fill:#141412}
.hp-gleam{fill:#fff}
.hp-blink{fill:#121210;transform-box:fill-box;transform-origin:top center;transform:scaleY(0);animation:hpBlink 5.2s infinite}
.hp-smile{fill:none;stroke:var(--y);stroke-width:3.2;stroke-linecap:round}
.hp-slot{fill:#0b0b0a;stroke:rgba(245,196,0,.35);stroke-width:1.5}
.hp-led{fill:var(--y);animation:hpLed 2.6s infinite}
.hp-foot{fill:#2c2c28}
@keyframes hpBlink{0%,92%,100%{transform:scaleY(0)}94%,97%{transform:scaleY(1)}}
@keyframes hpLed{0%,100%{opacity:.25}50%{opacity:1}}
.hp-stage:hover .hp-machine,.hp-stage:focus-visible .hp-machine{animation:hpBob 1.6s ease-in-out infinite}
@keyframes hpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hp-stage.printing .hp-machine{animation:hpShake .16s linear infinite}
@keyframes hpShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-1.6px,.8px)}75%{transform:translate(1.6px,-.8px)}}
.hp-stage.printing .hp-led{animation:hpLed .35s infinite}
.hp-hint{margin-top:1rem;display:flex;align-items:center;gap:.5rem;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,196,0,.75);justify-content:center;transition:opacity .3s}
.hp-hint-dot{width:6px;height:6px;border-radius:50%;background:var(--y);animation:hpLed 2.6s infinite}
.hp-stage.printing .hp-hint{opacity:0}

/* La feuille qui sort puis vole vers l'écran */
.hp-fly{position:fixed;left:0;top:0;z-index:160000;pointer-events:none;opacity:0;visibility:hidden;will-change:transform}
.hp-fly.on{opacity:1;visibility:visible}
.hp-fly-clip{overflow:hidden;height:0;width:100%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.65))}
.hp-paper{width:100%;aspect-ratio:1/1.414;background:linear-gradient(160deg,#fff 0%,#f4f1ea 100%);display:flex;align-items:center;justify-content:center;padding:6%;border-radius:2px}
.hp-paper-txt{font-family:'Bebas Neue',sans-serif;font-size:calc(var(--pw,150px) * .175);line-height:1;letter-spacing:.02em;color:#111;text-transform:uppercase;white-space:nowrap;display:flex;align-items:center;justify-content:center}
.hp-paper-emo{font-family:'Inter','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;font-size:.82em;line-height:1;position:relative;top:-.02em}

/* ============================================================
   MACHINES DES CARTES PRESTATIONS
   Chaque prestation montre son geste : impression 3D, grand
   format, enseigne lumineuse, gravure laser, broderie, presse.
   ============================================================ */
.mach{position:relative;margin-bottom:1.7rem}
.mk{width:100%;height:auto;display:block;overflow:visible}
.mach-hint{display:block;text-align:center;margin-top:.55rem;font-size:.56rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(245,196,0,.6);transition:opacity .3s}
.mach.playing .mach-hint{opacity:0}

/* pièces communes */
.mk-frame{fill:#3a3a33}
.mk-frame-l{stroke:#3a3a33;stroke-width:7;stroke-linecap:round;fill:none}
.mk-body{fill:#262622;stroke:rgba(245,196,0,.28);stroke-width:1.6}
.mk-base,.mk-leg,.mk-plate{fill:#33332c}
.mk-rail,.mk-dark{fill:#0d0d0c}
.mk-slot{fill:#0b0b0a;stroke:rgba(245,196,0,.3);stroke-width:1.2}
.mk-headbody{fill:#3a3a33;stroke:rgba(245,196,0,.35);stroke-width:1.4}
.mk-y{fill:var(--y)}
/* L'emblème complet du logo (armature du M + chevrons) est défini une fois
   en <symbol> ; chaque machine le pose avec <use>. Les chevrons gardent le
   jaune exact du logo (#FFD700) ; l'armature hérite du fill posé ici, pour
   rester lisible aussi bien sur fond sombre que sur fond clair. */
.mk-logo{fill:#F0EDE8}
.mach[data-mach="grand"] .mk-logo,
.mach[data-mach="graveur"] .mk-logo,
.mach[data-mach="broderie"] .mk-logo,
.mach[data-mach="flocage"] .mk-logo{fill:#15150e}
/* broderie : l'emblème est piqué au fil, on garde la texture des points */
.mach[data-mach="broderie"] .mk-logo{stroke:#6d5a12;stroke-width:1.1;stroke-dasharray:2.6 2.2}
.mk-paper{fill:#f2efe9}
.mk-txt{font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:1.4px;fill:#16160f}
.mk-led{fill:var(--y);opacity:.28}
.svc-card:hover .mk-led{opacity:.8;transition:opacity .3s}
.mach.playing .mk-led{animation:mkBlink .5s infinite}
.mach.playing .mk-led.l2{animation-delay:.25s}
@keyframes mkBlink{0%,100%{opacity:.2}50%{opacity:1}}

/* ── 1. impression 3D : une vraie pièce en volume, couche par couche ──
   L'objet est extrudé : douze silhouettes décalées en diagonale forment
   les flancs, alternées en deux tons pour donner les stries d'impression ;
   la face avant porte le logo. Une fois terminé, la pièce tourne
   doucement sur le plateau comme un aperçu 3D. */
.p3-head{transform:translateX(150px)}
.mach.playing .p3-head{animation:p3Head 1.15s ease-in-out infinite}
@keyframes p3Head{0%,100%{transform:translateX(58px)}50%{transform:translateX(242px)}}
.p3-glow{fill:var(--y);opacity:0;filter:blur(2px)}
.mach.playing .p3-glow{opacity:.9;animation:mkBlink .62s infinite}
.p3-side{fill:#9a7a00}
.p3-side.alt{fill:#b08c07}
.p3-contact{fill:rgba(0,0,0,.55);opacity:0;transition:opacity .5s}
.mach.playing .p3-contact,.mach.done .p3-contact{opacity:1}
/* La rotation est calculée en JS et appliquée en transformations SVG 2D :
   une rotation 3D CSS (perspective) ferait rastériser la pièce sur une
   couche GPU, et elle apparaîtrait floue. */
.p3-reveal{transform:translateY(102px)}
.mach.playing .p3-reveal{animation:p3Build 2.15s steps(17,end) forwards}
.mach.done .p3-reveal{transform:translateY(0)}
@keyframes p3Build{from{transform:translateY(102px)}to{transform:translateY(0)}}
.p3-line{fill:var(--y);opacity:0;transform:translateY(102px);filter:drop-shadow(0 0 5px rgba(245,196,0,.9))}
.mach.playing .p3-line{opacity:1;animation:p3Build 2.15s steps(17,end) forwards}

/* ── 2. grand format : la feuille descend ── */
.gf-head{transform:translateX(150px)}
.mach.playing .gf-head{animation:gfHead 1.2s ease-in-out infinite}
@keyframes gfHead{0%,100%{transform:translateX(40px)}50%{transform:translateX(260px)}}
.gf-reveal{transform:translateY(-120px)}
.mach.playing .gf-reveal{animation:gfFeed 2.1s steps(14,end) forwards}
.mach.done .gf-reveal{transform:translateY(0)}
@keyframes gfFeed{from{transform:translateY(-120px)}to{transform:translateY(0)}}
.gf-scan{fill:var(--y);opacity:0;transform:translateY(0);filter:drop-shadow(0 0 6px rgba(245,196,0,.9))}
.mach.playing .gf-scan{opacity:1;animation:gfScan 2.1s steps(14,end) forwards}
@keyframes gfScan{from{transform:translateY(0)}to{transform:translateY(120px)}}

/* ── 3. enseigne : allumage qui clignote puis reste allumée ── */
.ens-panel{fill:#1a1a16;stroke:#38382f;stroke-width:3}
.ens-txt{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:2px;fill:var(--y)}
.ens-lit{opacity:.14}
.ens-halo{fill:none;stroke:var(--y);stroke-width:3;opacity:0;filter:drop-shadow(0 0 10px rgba(245,196,0,.85))}
.mach.playing .ens-lit{animation:ensFlick 2.15s ease-out forwards}
.mach.playing .ens-halo{animation:ensFlick 2.15s ease-out forwards}
.mach.done .ens-lit{opacity:1;filter:drop-shadow(0 0 9px rgba(245,196,0,.55));animation:ensPulse 2.8s ease-in-out infinite}
.mach.done .ens-halo{opacity:.85;animation:ensPulse 2.8s ease-in-out infinite}
@keyframes ensFlick{
  0%{opacity:.12}5%{opacity:1}9%{opacity:.14}15%{opacity:.95}19%{opacity:.2}
  27%{opacity:1}33%{opacity:.3}39%{opacity:1}46%{opacity:.5}52%{opacity:1}100%{opacity:1}}
@keyframes ensPulse{0%,100%{opacity:1}50%{opacity:.78}}

/* ── 4. gravure laser sur la gourde ── */
.mk-obj{fill:#dedad2;stroke:#b9b5ac;stroke-width:1.4}
.mk-ring{fill:#8e8a82}
.mk-shadow{fill:rgba(0,0,0,.45)}
.lz-head{transform:translateX(150px)}
.mach.playing .lz-head{animation:lzHead 2.2s steps(15,end) forwards}
.mach.done .lz-head{transform:translateX(172px)}
@keyframes lzHead{from{transform:translateX(132px)}to{transform:translateX(172px)}}
.lz-beam{fill:var(--y);opacity:0}
.mach.playing .lz-beam{opacity:.95;filter:drop-shadow(0 0 6px rgba(245,196,0,.95))}
.lz-reveal{transform:translateX(-44px)}
.mach.playing .lz-reveal{animation:lzCut 2.2s steps(15,end) forwards}
.mach.done .lz-reveal{transform:translateX(0)}
@keyframes lzCut{from{transform:translateX(-44px)}to{transform:translateX(0)}}
.lz-spark{fill:var(--y);opacity:0}
.mach.playing .lz-spark{animation:lzSpark .7s ease-out infinite}
.lz-spark.s2{animation-delay:.22s}
.lz-spark.s3{animation-delay:.44s}
@keyframes lzSpark{0%{transform:translate(0,0) scale(.5);opacity:.95}100%{transform:translate(var(--sx,7px),-13px) scale(0);opacity:0}}
.lz-spark.s2{--sx:-9px}
.lz-spark.s3{--sx:3px}

/* ── 5. broderie : le cadre défile sous l'aiguille ── */
.mk-hoop{fill:none;stroke:#3d3d35;stroke-width:7}
.mk-hoopin{fill:#efece6}
.mk-spool{fill:var(--y)}
.mk-spoolcap{fill:#4a4a41}
.mk-needle{fill:#e6e2da}
.mk-foot{fill:#4a4a41}
.br-thread{stroke:var(--y);stroke-width:1.6;fill:none;opacity:.75}

.br-hoop{transform:translateX(0)}
.mach.playing .br-hoop{animation:brHoop 2.3s steps(16,end) forwards}
@keyframes brHoop{from{transform:translateX(28px)}to{transform:translateX(-28px)}}
.br-reveal{transform:translateX(-58px)}
.mach.playing .br-reveal{animation:brSew 2.3s steps(16,end) forwards}
.mach.done .br-reveal{transform:translateX(0)}
@keyframes brSew{from{transform:translateX(-58px)}to{transform:translateX(0)}}
.mach.playing .br-needle{animation:brNeedle .19s linear infinite}
@keyframes brNeedle{0%,100%{transform:translateY(0)}50%{transform:translateY(11px)}}

/* ── 6. flocage : la presse descend, fumée, logo posé ── */
.mk-cloth{fill:#e6e2da}
.fk-hot{fill:#5a4a12}
.mach.playing .fk-hot{fill:#c9a300;filter:drop-shadow(0 0 6px rgba(245,196,0,.7))}
.fk-press{transform:translateY(0)}
.mach.playing .fk-press{animation:fkPress 2.5s cubic-bezier(.5,.05,.4,1) forwards}
@keyframes fkPress{0%{transform:translateY(0)}20%{transform:translateY(58px)}
  60%{transform:translateY(58px)}84%,100%{transform:translateY(0)}}
.fk-logo{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.86)}

.mach.playing .fk-logo{animation:fkLogo 2.5s ease-out forwards}
.mach.done .fk-logo{opacity:1;transform:scale(1)}
@keyframes fkLogo{0%,72%{opacity:0;transform:scale(.86)}86%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.fk-puff{fill:#e4e0d6;opacity:0;filter:blur(1.5px)}
.mach.playing .fk-puff{animation:fkSmoke 1.5s ease-out forwards;animation-delay:.55s}
.mach.playing .fk-puff.p2{animation-delay:.72s}
.mach.playing .fk-puff.p3{animation-delay:.95s}
.mach.playing .fk-puff.p4{animation-delay:1.15s}
@keyframes fkSmoke{0%{transform:translate(0,0) scale(.35);opacity:0}
  25%{opacity:.62}100%{transform:translate(var(--sx,-8px),-54px) scale(2.1);opacity:0}}
.fk-puff.p2{--sx:10px}
.fk-puff.p3{--sx:-14px}
.fk-puff.p4{--sx:16px}

@media(prefers-reduced-motion:reduce){
  .mach *{animation:none !important}
  .p3-reveal,.gf-reveal,.lz-reveal,.br-reveal{transform:none !important}
  .ens-lit,.fk-logo{opacity:1 !important}
}

.mk-wall{fill:#22221d}

.svc-tag{opacity:1;transform:none;cursor:pointer;border-bottom:1px solid rgba(245,196,0,.25);padding-bottom:.2rem}
.svc-card:hover .svc-tag{opacity:1;transform:none;color:var(--y)}
.svc-tag:hover{color:var(--y);border-bottom-color:var(--y)}

@media(max-width:960px){
  .hero-right{display:flex;position:static;width:100%;clip-path:none;background:transparent;padding:0 0 2.5rem;order:2}
  .hero{flex-direction:column}
  .hero-content{order:1}
  .hp-zone{width:min(240px,60%)}
  .hero-right .hero-pills{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .hp-blink,.hp-led,.hp-hint-dot,.hp-machine,.pl-head,.pl-svg{animation:none !important}
}
#hp-pupils{transition:transform .18s ease-out}
/* Les pastilles du hero n'avaient pas d'état visible : on les affiche */
.hpill.v{opacity:1;transform:translateX(0)}

/* Titres multi-lignes : le déclencheur est la ligne, pas le contenu clippé */
.reveal-line.v .reveal-inner{transform:translateY(0)}

/* ============================================================
   V3 — AUDIT MOBILE / RESPONSIVE
   ============================================================ */

/* 1. Bandeau CTA : sur mobile il restait en ligne, le bouton sortait de l'écran */
@media(max-width:960px){
  .cta-inner{flex-direction:column;align-items:flex-start;gap:2.4rem}
  .cta-inner .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
  .cta-inner .btn .btn-inner{justify-content:center}
}
@media(max-width:420px){
  .btn{padding:1rem 1.2rem;font-size:.7rem;letter-spacing:.08em}
  .cta-title{font-size:clamp(2.1rem,10vw,3rem)}
}

/* 2. Zones tactiles : minimum ~44px sur tout ce qui se touche
      (largeur mobile OU écran tactile — tablettes comprises) */
@media(max-width:960px),(pointer:coarse){
  .hdr-nav a{padding:.9rem 0}
  .hdr-cta{padding:1.05rem 1.35rem}
  .svc-tag{position:relative}
  .svc-tag::after{content:'';position:absolute;left:-8px;right:-8px;top:-14px;bottom:-14px}
  .clink{padding:.78rem 0}
  .foot-links{gap:0}
  .foot-links a{padding:.85rem 0;display:block}
  .foot-soc{gap:1.6rem}
  .foot-soc a{padding:.9rem 0;display:inline-block}
  .foot-info a{display:inline-block;padding:.55rem 0}
  .filter{padding:.85rem 1.15rem}
  .crumb{margin-bottom:1.5rem}
  .crumb a{display:inline-block;padding:.92rem 0}
  .hdr-logo-link{padding:.5rem .25rem;margin:-.5rem -.25rem}
  .svm-dot{position:relative}
  .svm-dot::after{content:'';position:absolute;inset:-11px}
  .menu-info span{display:block;margin:0 0 .55rem}
}

/* 3. Menu plein écran : les accents de « RÉALISATIONS » / « À PROPOS »
      étaient rognés par le cadre de l'animation */
.mnav-link{line-height:1.04}
.mnav-item{margin:0}

/* 4. Galerie : la pastille de navigation devient plus compacte quand il y a
      beaucoup de photos, sinon la rangée déborde sur petit écran */
@media(max-width:560px){
  .svm-dots{gap:.38rem;flex-wrap:wrap;max-width:66%}
  .svm-dot{width:7px;height:7px}
  .svm-head{padding:1.2rem 1.2rem .9rem}
  .svm-foot{padding:.9rem 1.2rem 1.1rem}
  .svm-cap{padding:2rem 1.2rem 1rem;font-size:.74rem}
}

/* 5. Téléphone en paysage : le hero prenait plusieurs écrans de haut */
@media(orientation:landscape) and (max-height:560px){
  .hero{min-height:auto;padding:6.5rem 5% 3rem}
  .hero-title{font-size:clamp(2.6rem,7.5vw,5rem);margin-bottom:2rem}
  .hero-eyebrow{margin-bottom:1.4rem}
  .hero-eyebrow span{font-size:.85rem}
  .hero-desc{font-size:.88rem;line-height:1.7}
  .hero-right{padding-bottom:1.5rem}
  .hp-zone{width:min(180px,34%)}
  .scroll-ind{display:none}
  .phero{padding:7rem 5% 3rem}
}

/* Vignettes de la galerie : moins de bandes vides sur téléphone
   (les photos s'affichent en entier, un cadre carré laissait trop de vide) */
@media(max-width:560px){
  .gal-item{aspect-ratio:4/3}
}

/* ============================================================
   V4 — CARTES PRESTATIONS : carte 3D réactive
   (inspiré de la carte « 00Kubi » d'Uiverse, transposé
    dans la palette Publimea : jaune sur noir, angles vifs)
   ============================================================ */
.svc-grid{overflow:visible}
.svc-card:hover{z-index:6}

/* la face est l'élément qui bascule en 3D */
.svc-face{
  position:relative;height:100%;padding:3.6rem 2.5rem 3rem;
  background:linear-gradient(155deg,#171714 0%,#201f1b 55%,#191916 100%);
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;transform-style:preserve-3d;
  box-shadow:0 0 22px rgba(0,0,0,.35),inset 0 0 26px rgba(0,0,0,.3);
  transition:transform 240ms cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .35s,filter .35s;
}
.svc-card:hover .svc-face{
  border-color:rgba(245,196,0,.34);
  box-shadow:0 26px 55px rgba(0,0,0,.6),0 0 0 1px rgba(245,196,0,.1),inset 0 0 34px rgba(0,0,0,.35);
  filter:brightness(1.07);
}
.svc-card:active .svc-face{filter:brightness(1.02)}

/* le contenu passe au-dessus de la couche d'effets */
.svc-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.svc-face .plot,.svc-face .svc-num,.svc-face .svc-title,.svc-face .svc-desc,.svc-face .svc-tag{position:relative;z-index:2}
.svc-face .svc-arr,.svc-face .svc-bot{z-index:3}

/* halo général derrière la carte */
.svc-fx::before{
  content:'';position:absolute;left:50%;top:50%;width:150%;height:150%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,rgba(245,196,0,.09) 0%,rgba(245,196,0,.035) 45%,transparent 72%);
  filter:blur(26px);opacity:0;transition:opacity .35s;
}
.svc-card:hover .svc-fx::before{opacity:1}

/* 3 halos d'angle */
.svc-glow{
  position:absolute;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle at center,rgba(245,196,0,.22) 0%,rgba(245,196,0,0) 70%);
  filter:blur(18px);opacity:0;transition:opacity .4s;
}
.svc-card:hover .svc-glow{opacity:1}
.svc-glow.g1{top:-46px;left:-46px}
.svc-glow.g2{top:50%;right:-56px;transform:translateY(-50%)}
.svc-glow.g3{bottom:-46px;left:26%}

/* lignes qui balayent la carte */
.svc-line{
  position:absolute;left:0;width:100%;height:1px;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,rgba(245,196,0,.3),transparent);
  opacity:0;
}
.svc-line.l1{top:18%;transform-origin:left}
.svc-line.l2{top:39%;transform-origin:right}
.svc-line.l3{top:61%;transform-origin:left}
.svc-line.l4{top:82%;transform-origin:right}
.svc-card:hover .svc-line{animation:svcLine 5s linear infinite}
.svc-card:hover .svc-line.l2{animation-delay:1.6s}
.svc-card:hover .svc-line.l3{animation-delay:3.2s}
.svc-card:hover .svc-line.l4{animation-delay:2.4s}
@keyframes svcLine{0%{transform:scaleX(0);opacity:0}50%{transform:scaleX(1);opacity:1}100%{transform:scaleX(0);opacity:0}}

/* particules */
.svc-part{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--y);opacity:0;box-shadow:0 0 8px rgba(245,196,0,.9)}
.svc-card:hover .svc-part{animation:svcPart 3.6s infinite}
@keyframes svcPart{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  40%{opacity:1}
  100%{transform:translate(calc(var(--px,0) * 46px),calc(var(--py,0) * 46px)) scale(1);opacity:0}
}
.svc-part.p1{--px:1;--py:-1;top:42%;left:18%}
.svc-part.p2{--px:-1;--py:-1;top:62%;right:18%;animation-delay:1.02s}
.svc-part.p3{--px:.5;--py:1;top:22%;left:42%;animation-delay:1.19s}
.svc-part.p4{--px:-.5;--py:1;top:78%;right:38%;animation-delay:1.78s}
.svc-part.p5{--px:1;--py:.5;top:32%;left:62%;animation-delay:2.38s}
.svc-part.p6{--px:-1;--py:.5;top:70%;right:58%;animation-delay:2.98s}

/* équerres d'angle */
.svc-cnr{position:absolute;width:16px;height:16px;border:2px solid rgba(245,196,0,.22);transition:border-color .35s,box-shadow .35s}
.svc-cnr.c1{top:10px;left:10px;border-right:0;border-bottom:0}
.svc-cnr.c2{top:10px;right:10px;border-left:0;border-bottom:0}
.svc-cnr.c3{bottom:10px;left:10px;border-right:0;border-top:0}
.svc-cnr.c4{bottom:10px;right:10px;border-left:0;border-top:0}
.svc-card:hover .svc-cnr{border-color:rgba(245,196,0,.85);box-shadow:0 0 12px rgba(245,196,0,.45)}

/* balayage vertical + reflet diagonal */
.svc-scan{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(245,196,0,.06),transparent);transform:translateY(-100%);opacity:0}
.svc-card:hover .svc-scan{opacity:.7;animation:svcScan 4.2s linear infinite}
@keyframes svcScan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.svc-glare{position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:linear-gradient(125deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.045) 45%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.045) 55%,rgba(255,255,255,0) 100%)}
.svc-card:hover .svc-glare{opacity:1}

/* le titre s'illumine */
.svc-card:hover .svc-title{color:var(--y);text-shadow:0 0 18px rgba(245,196,0,.45)}

/* sur écran tactile : pas de survol, on garde juste les équerres visibles */
@media(max-width:960px){
  .svc-face{padding:3.2rem 1.8rem 2.6rem;transform:none !important}
  .svc-cnr{border-color:rgba(245,196,0,.35)}
  .svc-glow,.svc-line,.svc-part,.svc-scan,.svc-glare{display:none}
}
@media(prefers-reduced-motion:reduce){
  .svc-line,.svc-part,.svc-scan{animation:none !important;opacity:0 !important}
  .svc-face{transform:none !important}
}

/* ============================================================
   V5 — BANDEAU DU HAUT PLUS PRÉSENT + RANGÉE DE CLIENTS
   ============================================================ */
.hdr{padding:1.55rem 5%}
.hdr-logo{height:48px}
.hdr-right{gap:2.6rem}
.hdr-nav{gap:2.6rem}
.hdr-nav a{font-size:.92rem;letter-spacing:.1em;font-weight:600}
.hdr-cta{padding:.85rem 1.7rem;font-size:.88rem}
.burger{width:54px;height:54px}
.bl{width:24px}
.burger-back span{font-size:1.15rem}
/* le hero démarre plus bas pour ne pas passer sous le bandeau agrandi */
.hero{padding-top:11rem}
.phero{padding-top:12rem}

/* Clients : rangées de 5, la rangée incomplète est centrée */
.cli-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cli-cell{flex:0 0 calc((100% - 4 * 14px) / 5)}

@media(max-width:1200px){
  .hdr-logo{height:42px}
  .hdr-nav a{font-size:.85rem}
  .hdr-nav,.hdr-right{gap:2rem}
  .hdr-cta{padding:.8rem 1.4rem;font-size:.82rem}
}
@media(max-width:960px){
  .hdr-logo{height:40px}
  .burger{width:50px;height:50px}
  .hero{padding-top:9rem}
  .phero{padding-top:10rem}
  .cli-cell{flex:0 0 calc((100% - 2 * 14px) / 3)}
}
@media(max-width:760px){
  .hdr{padding:1.05rem 5%}
  .hdr-logo{height:34px}
  .burger{width:46px;height:46px}
}
@media(max-width:560px){
  .cli-cell{flex:0 0 calc((100% - 14px) / 2)}
}
/* Logos clients un peu plus grands dans leur pastille */
.cli-cell{padding:1rem 1.15rem}
.cli-cell img{max-height:74px}
@media(max-width:560px){.cli-cell{padding:.9rem 1rem}.cli-cell img{max-height:62px}}

/* ============================================================
   V6 — MENU PLEIN ÉCRAN : plus de chevauchement avec l'en-tête
   La taille des liens ne se calculait que sur la largeur : sur un
   écran large mais peu haut (portables, téléphone en paysage), les
   cinq lignes dépassaient la hauteur disponible et, le menu étant
   centré, le débordement partait vers le haut — sous l'en-tête, qui
   est au-dessus dans l'empilement. On borne donc aussi par la
   hauteur, on réserve la place de l'en-tête, et le centrage bascule
   en haut de page plutôt que de déborder.
   ============================================================ */
#menu-content{
  padding:8.5rem 8% 3rem;
  justify-content:center;
  justify-content:safe center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mnav-link{font-size:clamp(2.6rem, min(8.4vw, (100vh - 19rem) / 5.6), 8.5rem)}
.menu-info{margin-top:2.4rem}

@media(max-width:960px){
  #menu-content{padding:7rem 8% 2.5rem}
}
@media(max-height:620px){
  /* écran peu haut : on autorise des liens plus petits que le plancher normal,
     avec un peu de rembourrage pour garder une cible tactile confortable */
  .mnav-link{font-size:clamp(1.7rem, (100vh - 13rem) / 5.6, 4rem);padding:.3rem 0}
  #menu-content{padding-top:6.2rem;padding-bottom:1.4rem}
  .menu-info{margin-top:1.3rem}
  .menu-info span{margin-bottom:.3rem}
  .mnav-num{font-size:.62rem}
}
@media(max-height:430px){
  #menu-content{padding-top:5.4rem}
  .menu-info{display:none}
}

/* ============================================================
   V7 — GALERIE CATALOGUE 2026
   Toutes les photos sont normalisées en 4:3 : la vignette adopte
   le même rapport, l'objet reste donc entier et bien cadré à
   toutes les tailles d'écran, sans recadrage ni bande vide.
   ============================================================ */
.gal-item{aspect-ratio:4/3}
.gal-item.img-frame::before{filter:blur(30px) brightness(.4) saturate(.7)}

/* très grands écrans : 4 colonnes pour éviter des vignettes géantes */
@media(min-width:1560px){
  .gal-grid{grid-template-columns:repeat(4,1fr)}
  .gal-name{font-size:1.3rem}
}
/* écrans larges standards : on garde 3 colonnes (règle de base) */

/* tablette / mobile : le texte de survol reste lisible */
@media(max-width:760px){
  .gal-name{font-size:1.15rem}
  .gal-over{padding:1.1rem}
}
@media(max-width:560px){
  .gal-item{aspect-ratio:4/3}
  .gal-name{font-size:1.25rem}
}

/* la modale ouvre directement sur la photo cliquée ; au-delà de 14 vues
   les pastilles sont remplacées par le seul compteur */
.svm-dots{flex-wrap:wrap;max-width:72%}
.svm-dots-hide{display:none}

/* ============================================================
   V8 — BRODERIE SANS GALERIE
   La prestation reste présentée partout, mais sans photothèque :
   sur la page Services, le visuel est l'animation de la brodeuse.
   ============================================================ */
.xp-media.xp-mach{display:flex;align-items:center;justify-content:center;padding:2.2rem 2rem 1.4rem;background:linear-gradient(140deg,#17170f,#101010)}
.xp-media.xp-mach .mach{width:100%;max-width:420px;margin-bottom:0}
.xp-media.xp-mach::after{content:none}

/* la carte Broderie de l'accueil renvoie au devis plutôt qu'à une galerie */
a.svc-tag-link{text-decoration:none}


/* ============================================================
   V9 — FORMULAIRE DE DEVIS
   Champ-piège invisible contre les robots + retour au visiteur,
   lisible sur le fond jaune de la section contact.
   ============================================================ */
.form-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form-msg{min-height:1.2em;margin-top:.2rem;font-size:.82rem;line-height:1.5;font-weight:500}
.form-msg.info{color:rgba(14,14,14,.6)}
.form-msg.ok{color:#0a0a0a}
.form-msg.ko{color:#8C1D18}
.form-btn:disabled{opacity:.55;cursor:progress}

/* ============================================================
   V10 — LISIBILITÉ ET ZONES CLIQUABLES
   Audit sur 14 largeurs (320 → 3440 px) : trois libellés
   descendaient sous 10,5 px, et plusieurs liens offraient une
   cible plus petite que les 24 px recommandés.
   ============================================================ */

/* 1. libellés remontés au-dessus du seuil de lisibilité */
.mach-hint{font-size:.7rem;letter-spacing:.11em}
.gal-cat{font-size:.68rem;letter-spacing:.12em}
.hpill{font-size:.72rem}

/* 2. la barre décorative du bas de carte ne doit plus voler
      le bas de la zone tactile du lien « Voir les réalisations » */
.svc-bot{pointer-events:none}

/* 3. cibles d'au moins 24 px, souris comprise (WCAG 2.2 AA).
      Padding vertical seul : aucune incidence sur la mise en page. */
.hdr-nav a:not(.hdr-cta){padding:.42rem 0}   /* le bouton Devis garde son propre rembourrage */
.crumb a{display:inline-block;padding:.4rem 0}
.clink{padding:.3rem 0}
.foot-links a{display:inline-block;padding:.32rem 0}
.foot-soc a{display:inline-block;padding:.4rem 0}
.svc-tag{margin-top:1rem;padding:.5rem 0}   /* cible >30px à la souris aussi */

/* ============================================================
   V11 — SAFARI / iOS
   Impossible à tester ici (moteur Chromium uniquement), donc on
   pose les garde-fous connus : préfixe -webkit- pour le flou
   d'arrière-plan, et unité svh pour les hauteurs plein écran —
   sur iPhone, 100vh ignore la barre d'outils et déborde.
   Les navigateurs qui ignorent svh gardent la valeur précédente.
   ============================================================ */
.hdr-inner{-webkit-backdrop-filter:blur(0px)}
.hdr.solid .hdr-inner{-webkit-backdrop-filter:blur(16px)}
.svm-backdrop{-webkit-backdrop-filter:blur(10px)}
body.menu-open .hdr-inner{-webkit-backdrop-filter:none !important}

.hero{min-height:100svh}
.mnav-link{font-size:clamp(2.6rem, min(8.4vw, (100svh - 19rem) / 5.6), 8.5rem)}
@media(max-height:620px){
  .mnav-link{font-size:clamp(1.7rem, (100svh - 13rem) / 5.6, 4rem)}
}

/* ============================================================
   V12 — PAGES LÉGALES
   Colonne de lecture étroite, hiérarchie claire, et un repère
   jaune sur les informations que seul l'éditeur peut fournir.
   ============================================================ */
.legal{max-width:44rem;margin:0 auto;padding:0 5% 7rem}
.legal h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:.02em;color:var(--w);margin:3.2rem 0 1.1rem}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:.95rem;line-height:1.9;color:rgba(240,237,232,.62);font-weight:300}
.legal p+p{margin-top:1rem}
.legal ul{margin:1rem 0 0 1.15rem;display:flex;flex-direction:column;gap:.55rem}
.legal a{color:var(--y);text-decoration:underline;text-underline-offset:3px;padding:.15rem 0}
.legal a:hover{color:var(--w)}
.legal strong{color:var(--w);font-weight:600}
.legal-dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.8rem;margin-top:1.3rem}
.legal-dl dt{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--g);padding-top:.3rem;white-space:nowrap}
.legal-dl dd{font-size:.95rem;line-height:1.75;color:rgba(240,237,232,.75);font-weight:300}
@media(max-width:560px){
  .legal-dl{grid-template-columns:1fr;gap:.2rem}
  .legal-dl dd{margin-bottom:.9rem}
}
.legal-todo{display:inline-block;background:rgba(245,196,0,.14);border-left:2px solid var(--y);
  color:var(--y);padding:.1rem .55rem;font-weight:600;font-size:.85rem}
.legal-maj{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:.78rem;letter-spacing:.06em;color:var(--g)}