/* =========================================================
EIKO CRÉATION — feuille de style commune
(index.html, mentions-legales.html, 404.html)
========================================================= */
/* ---------- Polices auto-hébergées (licence SIL OFL) ---------- */
@font-face{font-family:'Bangers';font-style:normal;font-weight:400;font-display:swap;
src:url(../fonts/bangers-latin.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;
src:url(../fonts/archivo-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;
src:url(../fonts/archivo-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(../fonts/spacemono-400-latin.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
src:url(../fonts/spacemono-700-latin.woff2) format('woff2')}
:root{
--green:#8ef000;
--green-2:#5fae00;
--green-dk:#3d6b08; /* texte vert lisible sur fond clair */
--yellow:#ffe93b;
--magenta:#ff00d4;
--magenta-dk:#b3009a; /* texte magenta lisible sur fond clair */
--ink:#141018;
--paper:#eceaf0;
--white:#ffffff;
--brown:#8a5a2b;
--nav-h:88px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
background:var(--paper);
background-image:radial-gradient(rgba(20,16,24,.08) 1.2px, transparent 1.3px);
background-size:20px 20px;
color:var(--ink);
font-family:'Archivo',system-ui,sans-serif;
line-height:1.65;
overflow-x:hidden;
}
::selection{background:var(--magenta);color:#fff}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
main{overflow-x:hidden;overflow-x:clip} /* les bandeaux inclinés ne font plus défiler la page de côté */
img{max-width:100%;height:auto}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:3px dashed var(--magenta);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:1100;background:var(--ink);color:var(--green);
padding:10px 16px;border-radius:9px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
/* =============== PROGRESSION =============== */
#prog{position:fixed;top:0;left:0;height:6px;width:0;background:var(--magenta);z-index:900;border-bottom:2px solid var(--ink)}
/* =============== NAV =============== */
nav.topnav{position:fixed;top:0;left:0;right:0;z-index:800;background:var(--paper);border-bottom:4px solid var(--ink);transition:box-shadow .25s}
nav.topnav.scrolled{box-shadow:0 6px 0 rgba(20,16,24,.15)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;max-width:1120px;margin:0 auto}
.brand{font-family:'Bangers',cursive;font-size:2.15rem;line-height:1;letter-spacing:1.5px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px}
/* Logo en autocollant qui déborde sous la barre */
.navlogo{position:relative;z-index:2;width:92px;height:auto;margin:-4px 2px -56px -6px;object-fit:contain;
filter:drop-shadow(3px 4px 0 rgba(20,16,24,.35));transition:transform .2s}
.brand:hover .navlogo{transform:rotate(-8deg) scale(1.05)}
.brand b{color:var(--magenta);-webkit-text-stroke:.8px var(--ink)}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center}
.nav-links a{white-space:nowrap;color:var(--ink);text-decoration:none;font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:.5px;position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:4px;background:var(--green);border-radius:3px;transition:width .22s}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{font-family:'Bangers',cursive;font-size:1.05rem !important;letter-spacing:1px;background:var(--yellow);
border:3px solid var(--ink);border-radius:10px;padding:7px 16px;box-shadow:4px 4px 0 var(--ink);transition:.15s}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:var(--white);border:3px solid var(--ink);border-radius:9px;padding:9px 8px;box-shadow:3px 3px 0 var(--ink);z-index:801}
.burger span{width:22px;height:3px;background:var(--ink);border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* =============== HERO =============== */
.hero{display:flex;align-items:center;padding:142px 0 56px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;width:100%}
.eyebrow{display:inline-block;font-family:'Space Mono',monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:2.5px;
background:var(--ink);color:var(--green);padding:7px 15px;border-radius:9px;transform:rotate(-2deg);margin-bottom:22px;
box-shadow:4px 4px 0 var(--magenta)}
.hero h1{font-family:'Bangers',cursive;font-size:clamp(2.8rem,7.5vw,5.2rem);font-weight:400;line-height:.96;letter-spacing:1px;
transform:rotate(-1.2deg);margin-bottom:22px;text-shadow:4px 4px 0 rgba(20,16,24,.14)}
/* 'both' : invisible seulement pendant l'animation ; si elle ne se lance pas, le titre reste lisible */
.hero h1 .w{display:inline-block;animation:popin .6s cubic-bezier(.34,1.56,.64,1) both}
.hero h1 .hl{color:var(--magenta);-webkit-text-stroke:1.5px var(--ink);text-shadow:4px 4px 0 var(--ink)}
@keyframes popin{0%{opacity:0;transform:translateY(26px) scale(.6) rotate(-7deg)}100%{opacity:1;transform:none}}
.hero p.lead{font-size:1.08rem;font-weight:600;max-width:470px;margin-bottom:28px}
.hero-actions .btn{font-size:1.18rem;padding:11px 20px}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:30px}
.trust li{background:var(--white);border:3px solid var(--ink);border-radius:10px;padding:5px 11px;font-size:.84rem;
font-weight:600;box-shadow:3px 3px 0 var(--ink);transform:rotate(var(--r,0deg))}
.trust li:nth-child(1){--r:-1.5deg}.trust li:nth-child(2){--r:1deg}.trust li:nth-child(3){--r:-.8deg}
.trust b{font-family:'Bangers',cursive;font-weight:400;font-size:1.12rem;letter-spacing:.5px;color:var(--magenta-dk);margin-right:3px}
/* Photo du hero + logo animé en autocollant */
.hero-visual{position:relative;margin:0 30px 44px 0}
.hero-frame{position:relative;overflow:hidden;border:5px solid var(--ink);border-radius:20px;
box-shadow:12px 12px 0 var(--magenta);transform:rotate(1.2deg);aspect-ratio:16/10;background:var(--ink)}
.hero-photo{display:block;width:100%;height:100%;object-fit:cover}
.hero-cap{position:absolute;left:18px;bottom:-16px;z-index:2;font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;
background:var(--ink);color:var(--green);border-radius:8px;padding:6px 12px;transform:rotate(-1.5deg);max-width:70%}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Bangers',cursive;font-size:1.35rem;letter-spacing:1.5px;
padding:13px 28px;border-radius:13px;border:4px solid var(--ink);text-decoration:none;color:var(--ink);
box-shadow:6px 6px 0 var(--ink);transition:transform .15s, box-shadow .15s;cursor:pointer}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.btn-primary{background:var(--yellow)}
.btn-ghost{background:var(--white)}
/* --- Logo animé --- */
.stage{position:absolute;right:-34px;bottom:-52px;z-index:3;width:clamp(110px,15vw,170px);aspect-ratio:1363/1497;cursor:pointer}
.swirlBg{background:center/contain no-repeat url("../img/swirl-disc.webp")}
.swirlDisc{position:absolute;left:2.05%;top:10.75%;width:97.5%;aspect-ratio:1;
animation:tourne 14s linear infinite;will-change:transform}
@keyframes tourne{to{transform:rotate(360deg)}}
.perso{position:absolute;inset:0;animation:flotte 3.6s ease-in-out infinite alternate}
@keyframes flotte{from{transform:translateY(-0.6%)}to{transform:translateY(0.9%)}}
.perso img{position:absolute;inset:0;width:100%;animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{
0%,100%{filter:drop-shadow(0 0 8px rgba(255,70,225,.3))}
50%{filter:drop-shadow(0 0 16px rgba(255,70,225,.55))}}
.clin{opacity:0;animation:clin 7s infinite}
.clin.force{opacity:1;animation:none}
@keyframes clin{0%,92%{opacity:0}93.5%,96.5%{opacity:1}98%,100%{opacity:0}}
/* =============== BANDEAUX DÉFILANTS =============== */
.band{overflow:hidden;background:var(--ink);border-block:4px solid var(--ink);
transform:rotate(-1.6deg) scale(1.03);padding:13px 0;margin:44px 0;position:relative;z-index:5}
.band.reverse{transform:rotate(1.6deg) scale(1.03)}
.track{display:flex;width:max-content;animation:scrollX 22s linear infinite}
.band.reverse .track{animation-direction:reverse}
.seq{display:flex;align-items:center}
.seq span{font-family:'Bangers',cursive;font-size:1.55rem;letter-spacing:2px;padding:0 16px;white-space:nowrap}
.seq span:nth-child(4n+1){color:var(--green)}
.seq span:nth-child(4n+2){color:var(--white)}
.seq span:nth-child(4n+3){color:var(--yellow)}
.seq span:nth-child(4n+4){color:var(--magenta)}
@keyframes scrollX{to{transform:translateX(-50%)}}
/* =============== SECTIONS =============== */
section.block{padding:86px 0;position:relative}
.sec-head{max-width:640px;margin-bottom:44px}
.sec-kicker{display:inline-block;font-family:'Space Mono',monospace;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;
background:var(--magenta);color:var(--ink);border:3px solid var(--ink);border-radius:9px;padding:5px 13px;
transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink);margin-bottom:18px}
.sec-title{font-family:'Bangers',cursive;font-size:clamp(2.6rem,7vw,4.4rem);font-weight:400;letter-spacing:1px;line-height:1;
transform:rotate(-.8deg);margin-bottom:14px}
.sec-title mark{background:linear-gradient(transparent 55%, var(--yellow) 55%) no-repeat 0 0/100% 100%;color:inherit;padding:0 4px}
.sec-sub{font-weight:600;font-size:1rem}
/* Apparitions au scroll */
.js .spray{opacity:0;transform:translateY(28px);transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s}
.js .spray.show{opacity:1;transform:none}
.js .pop{opacity:0;transform:scale(.55) rotate(-5deg);transition:transform .55s cubic-bezier(.34,1.56,.64,1), opacity .3s}
.js .pop.show{opacity:1;transform:none}
.stagger>*:nth-child(2){transition-delay:.09s}
.stagger>*:nth-child(3){transition-delay:.18s}
.stagger>*:nth-child(4){transition-delay:.27s}
.stagger>*:nth-child(5){transition-delay:.36s}
.stagger>*:nth-child(6){transition-delay:.45s}
/* =============== PRESTATIONS =============== */
.tabs{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.tab{font-family:'Bangers',cursive;font-size:1.3rem;letter-spacing:1px;color:var(--ink);cursor:pointer;
background:var(--white);border:4px solid var(--ink);border-radius:12px;padding:9px 20px;box-shadow:4px 4px 0 var(--ink);
transition:transform .15s, box-shadow .15s, background .15s}
.tab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.tab[aria-selected="true"]{background:var(--yellow);box-shadow:6px 6px 0 var(--magenta)}
.tab-panel[hidden]{display:none}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.svc{background:var(--white);border:4px solid var(--ink);border-radius:16px;padding:26px 22px;position:relative;
transition:transform .18s, box-shadow .18s}
.svc:nth-child(4n+1){box-shadow:8px 8px 0 var(--green)}
.svc:nth-child(4n+2){box-shadow:8px 8px 0 var(--magenta)}
.svc:nth-child(4n+3){box-shadow:8px 8px 0 var(--yellow)}
.svc:nth-child(4n+4){box-shadow:8px 8px 0 var(--green-2)}
.svc:hover{transform:translate(-4px,-6px) rotate(-1deg)}
.svc:nth-child(4n+1):hover{box-shadow:13px 13px 0 var(--green)}
.svc:nth-child(4n+2):hover{box-shadow:13px 13px 0 var(--magenta)}
.svc:nth-child(4n+3):hover{box-shadow:13px 13px 0 var(--yellow)}
.svc:nth-child(4n+4):hover{box-shadow:13px 13px 0 var(--green-2)}
.svc .ic{font-size:2.1rem;line-height:1;margin-bottom:12px;display:inline-block;transform:rotate(-6deg)}
.svc h3,.svc h4{font-family:'Bangers',cursive;font-size:1.55rem;font-weight:400;letter-spacing:1px;margin-bottom:8px}
.svc p{font-size:.92rem;font-weight:500}
.parti-cta{margin-top:36px;text-align:center;background:var(--white);border:4px solid var(--ink);
border-radius:16px;padding:28px 24px;box-shadow:8px 8px 0 var(--green)}
.parti-cta p{font-family:'Bangers',cursive;font-size:1.5rem;letter-spacing:1px;margin-bottom:16px}
/* =============== RÉALISATIONS =============== */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;grid-auto-rows:210px}
.proj{border-radius:16px;border:4px solid var(--ink);position:relative;display:flex;align-items:flex-end;padding:16px;
overflow:visible;transition:transform .18s, box-shadow .18s;box-shadow:7px 7px 0 var(--ink)}
.proj:hover{transform:translate(-3px,-5px) rotate(-.6deg);box-shadow:11px 11px 0 var(--ink)}
.proj:not(.has-photo)::before{content:"";position:absolute;inset:0;border-radius:11px;z-index:0;
background-image:radial-gradient(rgba(255,255,255,.5) 1.6px, transparent 1.7px);background-size:11px 11px}
/* Photo de projet : ![]()
dans un .proj.has-photo */
.proj-img{position:absolute;inset:0;overflow:hidden;border-radius:11px;z-index:0;background:var(--ink)}
.proj-photo{display:block;width:100%;height:100%;object-fit:cover}
.proj:nth-child(1){grid-column:span 7;grid-row:span 2;background:linear-gradient(135deg,var(--green),#3d6b08)}
.proj:nth-child(2){grid-column:span 5;background:linear-gradient(135deg,var(--magenta),#7a1060)}
.proj:nth-child(3){grid-column:span 5;background:linear-gradient(135deg,var(--yellow),var(--brown))}
.proj:nth-child(4){grid-column:span 4;background:linear-gradient(135deg,#ffe93b,#8ef000)}
.proj:nth-child(5){grid-column:span 4;background:linear-gradient(135deg,#ff00d4,#ffe93b)}
.proj:nth-child(6){grid-column:span 4;background:linear-gradient(135deg,#8ef000,#ff00d4)}
.proj:nth-child(n+7){grid-column:span 6;background:var(--ink)}
.proj .meta{position:relative;z-index:1;background:var(--paper);border:3px solid var(--ink);border-radius:11px;
padding:8px 13px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.2deg)}
.proj .cat,.proj .ttl{display:block}
.proj .cat{font-family:'Space Mono',monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--green-dk);font-weight:700}
.proj .ttl{font-family:'Bangers',cursive;font-size:1.2rem;font-weight:400;letter-spacing:.5px;line-height:1.1}
.bam{position:absolute;z-index:2;top:-13px;right:-9px;font-family:'Bangers',cursive;font-size:1.05rem;letter-spacing:1px;
background:var(--yellow);border:3px solid var(--ink);border-radius:9px;padding:4px 11px;
transform:rotate(7deg);box-shadow:3px 3px 0 var(--ink);transition:transform .18s}
.proj:hover .bam{transform:rotate(-5deg) scale(1.15)}
.gallery-note{margin-top:26px;font-size:.85rem;font-style:italic}
.gallery-note a{color:var(--magenta-dk);font-weight:700}
/* =============== MÉTHODE =============== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px;list-style:none}
.step{position:relative;background:var(--white);border:4px solid var(--ink);border-radius:16px;padding:38px 20px 24px;transition:transform .18s}
.step:nth-child(4n+1){box-shadow:7px 7px 0 var(--yellow)}
.step:nth-child(4n+2){box-shadow:7px 7px 0 var(--green)}
.step:nth-child(4n+3){box-shadow:7px 7px 0 var(--magenta)}
.step:nth-child(4n+4){box-shadow:7px 7px 0 var(--green-2)}
.step:hover{transform:translateY(-5px) rotate(-.8deg)}
.burst{position:absolute;top:-24px;left:16px;width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.burst::before,.burst::after{content:"";position:absolute;inset:0;background:var(--yellow);border:3px solid var(--ink);border-radius:6px}
.burst::after{transform:rotate(45deg)}
.burst b{position:relative;z-index:1;font-family:'Bangers',cursive;font-size:1.35rem;font-weight:400}
.step h3{font-family:'Bangers',cursive;font-size:1.4rem;font-weight:400;letter-spacing:1px;margin-bottom:7px}
.step p{font-size:.89rem;font-weight:500}
/* =============== PRESSE =============== */
.presslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px}
.presscard{display:flex;flex-direction:column;gap:9px;background:var(--white);border:4px solid var(--ink);
border-radius:14px;padding:20px;text-decoration:none;color:var(--ink);box-shadow:7px 7px 0 var(--ink);
transition:transform .18s,box-shadow .18s}
.presscard:hover{transform:translate(-3px,-4px);box-shadow:11px 11px 0 var(--magenta)}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pc-outlet{font-family:'Bangers',cursive;font-size:1.2rem;letter-spacing:.5px}
.pc-year{font-family:'Space Mono',monospace;font-size:.7rem;font-weight:700;background:var(--yellow);
border:2px solid var(--ink);border-radius:20px;padding:2px 10px;flex:none}
.pc-desc{font-size:.88rem;font-weight:500;flex:1}
.pc-link{font-family:'Space Mono',monospace;font-size:.74rem;font-weight:700;color:var(--magenta-dk);
text-transform:uppercase;letter-spacing:1px}
/* =============== À PROPOS =============== */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.about-img-wrap{position:relative;justify-self:center;width:min(64vw,270px)}
.about-img{display:block;width:100%;border-radius:20px;border:5px solid var(--ink);box-shadow:10px 10px 0 var(--magenta);transform:rotate(-2.5deg)}
.about-img-wrap .bam{top:-16px;left:-12px;right:auto;transform:rotate(-8deg);background:var(--green)}
.bubble{position:relative;background:var(--white);border:4px solid var(--ink);border-radius:20px;
padding:28px 26px;box-shadow:9px 9px 0 var(--ink)}
.bubble::before{content:"";position:absolute;left:-32px;top:52px;border:16px solid transparent;border-right-color:var(--ink)}
.bubble::after{content:"";position:absolute;left:-21px;top:56px;border:12px solid transparent;border-right-color:var(--white)}
.bubble p{margin-bottom:14px;font-weight:500}
.bubble p:last-of-type{margin-bottom:0}
.bubble strong{background:linear-gradient(transparent 60%, var(--yellow) 60%);padding:0 2px}
.sticks{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;list-style:none}
.stick{font-family:'Bangers',cursive;font-size:1rem;letter-spacing:1px;background:var(--white);
border:3px solid var(--ink);border-radius:10px;padding:6px 14px;box-shadow:4px 4px 0 var(--ink);
transform:rotate(var(--r,0deg));transition:transform .15s}
.stick:hover{transform:rotate(0deg) scale(1.08)}
.stick:nth-child(odd){--r:-2.5deg}
.stick:nth-child(even){--r:2deg;background:var(--yellow)}
.targets{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;list-style:none}
.target{font-weight:800;font-size:.92rem;padding:10px 18px;background:var(--white);
border:3px solid var(--ink);border-radius:11px;box-shadow:4px 4px 0 var(--green);transform:rotate(var(--r,0deg))}
.target:nth-child(odd){--r:-1.4deg}
.target:nth-child(even){--r:1.4deg;box-shadow:4px 4px 0 var(--magenta)}
.target span{color:var(--magenta-dk);margin-right:6px}
/* =============== CONTACT =============== */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.contact-info h2{font-family:'Bangers',cursive;font-size:2.2rem;font-weight:400;letter-spacing:1px;line-height:1;transform:rotate(-1deg);margin-bottom:14px}
.contact-info>p{font-weight:600;margin-bottom:26px}
.contact-line{display:flex;align-items:center;gap:13px;margin-bottom:15px;font-weight:700;font-size:.95rem}
.contact-line .ic{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;font-size:1.25rem;
background:var(--white);border:3px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
.contact-line a{color:var(--ink)}
.contact-line a:hover{color:var(--magenta-dk)}
.form{background:var(--white);border:4px solid var(--ink);border-radius:18px;padding:30px 26px;box-shadow:10px 10px 0 var(--magenta)}
.field{margin-bottom:16px}
.field label{display:block;font-family:'Space Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-bottom:7px}
.field label small{text-transform:none;letter-spacing:0;font-weight:400}
.field input,.field textarea,.field select{width:100%;padding:13px 14px;background:var(--paper);color:var(--ink);
border:3px solid var(--ink);border-radius:11px;font-family:'Archivo',sans-serif;font-weight:600;font-size:.93rem;transition:box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;box-shadow:4px 4px 0 var(--green)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;justify-content:center;background:var(--yellow)}
.form-legal{margin-top:14px;font-size:.78rem;line-height:1.5}
.form-legal a{color:var(--magenta-dk);font-weight:700}
.form-msg{display:none;margin-top:16px;padding:14px 16px;border:3px solid var(--ink);
border-radius:11px;font-weight:700;font-size:.9rem;transform:rotate(-1deg);box-shadow:4px 4px 0 var(--ink)}
.form-msg.ok{display:block;background:var(--green);animation:popin .5s cubic-bezier(.34,1.56,.64,1)}
.form-msg.err{display:block;background:var(--yellow)}
/* =============== FOOTER =============== */
.drip{height:30px;background-repeat:repeat-x;background-size:auto 30px;
background-image:url("data:image/svg+xml;utf8,")}
footer{background:var(--ink);color:var(--paper);padding:54px 0 30px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:34px}
.foot-brand{max-width:300px}
.foot-brand .fb{font-family:'Bangers',cursive;font-size:1.6rem;letter-spacing:1.5px;color:var(--white);margin-bottom:8px}
.foot-brand .fb b{color:var(--green)}
.foot-brand p{font-size:.86rem;opacity:.85}
.foot-links{display:flex;gap:52px;flex-wrap:wrap}
.foot-col h2{font-family:'Bangers',cursive;font-size:1.05rem;font-weight:400;letter-spacing:1.5px;color:var(--yellow);margin-bottom:13px}
.foot-col a{display:block;color:var(--paper);text-decoration:none;font-size:.87rem;font-weight:600;margin-bottom:8px;opacity:.85}
.foot-col a:hover{color:var(--green);opacity:1}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:2px dashed rgba(236,234,240,.3);
display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;opacity:.85}
.foot-bottom a{color:var(--green);text-decoration:none}
.foot-bottom a:hover{text-decoration:underline}
/* =============== PAGES SECONDAIRES (légal, 404) =============== */
.legal-header{padding:164px 0 30px}
.legal-header .eyebrow{margin-bottom:14px}
.legal-header h1{font-family:'Bangers',cursive;font-size:clamp(2.4rem,7vw,3.6rem);font-weight:400;transform:rotate(-1deg);
text-shadow:4px 4px 0 rgba(20,16,24,.14)}
section.legal{padding:20px 0 70px}
.legal h2{font-family:'Bangers',cursive;font-size:1.5rem;font-weight:400;letter-spacing:.5px;color:var(--ink);
margin:34px 0 10px;transform:rotate(-.4deg)}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:14px;max-width:720px}
.legal a{color:var(--magenta-dk);font-weight:800;text-decoration:underline}
.legal .updated{margin-top:40px;font-family:'Space Mono',monospace;font-size:.82rem}
.page404{min-height:70vh;display:flex;align-items:center;padding:140px 0 60px;text-align:center}
.page404 h1{font-family:'Bangers',cursive;font-weight:400;font-size:clamp(4rem,18vw,9rem);line-height:.9;
color:var(--magenta);-webkit-text-stroke:2px var(--ink);text-shadow:6px 6px 0 var(--ink);transform:rotate(-3deg)}
.page404 p{font-weight:600;font-size:1.1rem;margin:22px auto 30px;max-width:440px}
/* =========================================================
EFFETS & ANIMATIONS
Règle : l'état final est l'état par défaut. Les animations
partent d'un état caché ("both"/classes JS) mais si elles ne
se lancent pas, tout reste visible.
========================================================= */
/* ---------- Grain de papier (matière) ---------- */
body::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.045;
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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ---------- Brouillard de bombe derrière les titres ---------- */
.sec-head{position:relative}
.sec-head::before{content:"";position:absolute;z-index:-1;left:-70px;top:-50px;width:320px;height:220px;pointer-events:none;
background:
radial-gradient(closest-side,var(--spray,rgba(255,0,212,.22)),transparent 75%),
radial-gradient(circle at 78% 22%,var(--spray,rgba(255,0,212,.3)) 0 3px,transparent 4px),
radial-gradient(circle at 86% 40%,var(--spray,rgba(255,0,212,.3)) 0 2px,transparent 3px),
radial-gradient(circle at 70% 12%,var(--spray,rgba(255,0,212,.3)) 0 1.5px,transparent 2.5px);
filter:blur(.4px)}
#services .sec-head{--spray:rgba(142,240,0,.28)}
#methode .sec-head{--spray:rgba(255,233,59,.4)}
#about .sec-head{--spray:rgba(142,240,0,.28)}
/* ---------- Keyframes ---------- */
@keyframes slap{0%{opacity:0;transform:scale(2.2) rotate(-22deg)}60%{opacity:1;transform:scale(.9) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes wipeOut{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes spinIn{0%{transform:scale(0) rotate(-180deg)}70%{transform:scale(1.15) rotate(10deg)}100%{transform:none}}
@keyframes cardIn{0%{opacity:0;transform:translateY(24px) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(7deg)}25%{transform:rotate(-8deg) scale(1.15)}50%{transform:rotate(6deg) scale(1.1)}75%{transform:rotate(-4deg)}}
@keyframes lbIn{from{opacity:0;transform:scale(.85) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes splash{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--rot))}}
/* ---------- Hero : séquence d'ouverture ---------- */
.hero h1 .hl{position:relative}
.scribble{position:absolute;left:-2%;bottom:-14px;width:104%;height:22px;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;
animation:draw .7s cubic-bezier(.6,0,.2,1) 1.05s both;filter:drop-shadow(2px 2px 0 var(--ink))}
.hero-frame::before,.hero-frame::after{content:"";position:absolute;inset:-2px;z-index:2;transform-origin:right;transform:scaleX(0);pointer-events:none}
.hero-frame::before{background:var(--yellow);animation:wipeOut .55s cubic-bezier(.7,0,.2,1) .35s both}
.hero-frame::after{background:var(--magenta);animation:wipeOut .55s cubic-bezier(.7,0,.2,1) .2s both}
.hero-cap{animation:cardIn .5s ease-out 1s backwards}
.hero-visual .stage{animation:slap .6s cubic-bezier(.34,1.56,.64,1) .85s both}
.trust li{animation:slap .5s cubic-bezier(.34,1.56,.64,1) backwards}
.trust li:nth-child(1){animation-delay:1.25s}.trust li:nth-child(2){animation-delay:1.4s}.trust li:nth-child(3){animation-delay:1.55s}
.hero-actions .btn{animation:cardIn .5s ease-out backwards}
.hero-actions .btn:nth-child(1){animation-delay:.95s}.hero-actions .btn:nth-child(2){animation-delay:1.05s}
.hero-frame .hero-photo{transition:transform 6s ease-out}
.hero-visual:hover .hero-photo{transform:scale(1.07)}
/* ---------- Logo de navigation : se tasse au défilement ---------- */
.navlogo{transition:transform .2s, width .3s, margin .3s}
nav.topnav.scrolled .navlogo{width:66px;margin-bottom:-30px}
/* ---------- Titres : surlignage au marqueur + sticker ---------- */
.js .spray .sec-title mark{background-size:0% 100%;transition:background-size .7s cubic-bezier(.7,0,.2,1) .35s}
.js .spray.show .sec-title mark{background-size:100% 100%}
.js .spray.show .sec-kicker{animation:slap .5s cubic-bezier(.34,1.56,.64,1) backwards}
/* ---------- Bandeaux pilotés au défilement (JS) ---------- */
.band.live .track{animation:none}
.band .track{will-change:transform}
/* ---------- Galerie ---------- */
.proj::after{content:"";position:absolute;inset:0;border-radius:11px;z-index:5;pointer-events:none;
background:var(--wipe,var(--magenta));transform-origin:top;transform:scaleY(0);transition:transform .65s cubic-bezier(.7,0,.2,1)}
.proj:nth-child(3n+2){--wipe:var(--green)}
.proj:nth-child(3n+3){--wipe:var(--yellow)}
.js .proj.wipe:not(.show)::after{transform:scaleY(1);transform-origin:bottom}
.js .proj.wipe .meta{transition:transform .5s cubic-bezier(.34,1.56,.64,1) .45s, opacity .3s .45s}
.js .proj.wipe:not(.show) .meta{opacity:0;transform:translateY(22px) rotate(-6deg)}
.js .proj.wipe:not(.show) .bam{transform:scale(0) rotate(60deg)}
.gallery .proj:nth-child(2)::after,.gallery .proj:nth-child(2) .meta{transition-delay:.1s}
.gallery .proj:nth-child(3)::after,.gallery .proj:nth-child(3) .meta{transition-delay:.2s}
.gallery .proj:nth-child(5)::after,.gallery .proj:nth-child(5) .meta{transition-delay:.1s}
.gallery .proj:nth-child(6)::after,.gallery .proj:nth-child(6) .meta{transition-delay:.2s}
.gallery .proj:nth-child(8)::after,.gallery .proj:nth-child(8) .meta{transition-delay:.1s}
.proj-photo{transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s}
.proj:hover .proj-photo,.proj:focus-within .proj-photo{transform:scale(1.08)}
.proj:hover .bam{animation:wiggle .5s ease-in-out}
.proj-open{position:absolute;inset:0;z-index:4;background:none;border:0;cursor:zoom-in;border-radius:11px}
.proj-open span{position:absolute;right:14px;bottom:14px;width:44px;height:44px;display:grid;place-items:center;
font-family:'Bangers',cursive;font-size:1.8rem;line-height:1;background:var(--yellow);color:var(--ink);
border:3px solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 var(--ink);
transform:scale(0) rotate(-90deg);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.proj:hover .proj-open span,.proj-open:focus-visible span{transform:none}
.proj-open:focus-visible{outline:3px dashed var(--magenta);outline-offset:4px}
/* ---------- Visionneuse ---------- */
.lightbox{border:0;padding:0;background:transparent;max-width:min(94vw,1300px);max-height:92vh;overflow:visible;margin:auto}
.lightbox::backdrop{background:rgba(20,16,24,.88);backdrop-filter:blur(3px)}
.lightbox[open] .lb-figure{animation:lbIn .35s cubic-bezier(.34,1.56,.64,1)}
.lb-figure{margin:0;position:relative}
.lb-img{display:block;max-width:min(94vw,1300px);max-height:80vh;width:auto;height:auto;margin:0 auto;
border:5px solid var(--ink);border-radius:16px;box-shadow:12px 12px 0 var(--magenta);background:var(--ink)}
.lb-cap{margin:18px auto 0;width:max-content;max-width:90vw;font-family:'Bangers',cursive;font-size:1.5rem;letter-spacing:1px;
background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:11px;padding:6px 16px;box-shadow:4px 4px 0 var(--green);transform:rotate(-1.5deg)}
.lb-btn{position:fixed;z-index:3;width:52px;height:52px;display:grid;place-items:center;cursor:pointer;
font-family:'Bangers',cursive;font-size:2rem;line-height:1;color:var(--ink);background:var(--yellow);
border:4px solid var(--ink);border-radius:50%;box-shadow:4px 4px 0 var(--ink);transition:transform .15s}
.lb-btn:hover{transform:scale(1.1) rotate(-8deg)}
.lb-close{top:18px;right:18px;font-family:'Archivo',sans-serif;font-size:1.3rem;font-weight:800}
.lb-prev{left:18px;top:50%;margin-top:-26px}
.lb-next{right:18px;top:50%;margin-top:-26px}
/* ---------- Onglets : cartes qui arrivent en cascade ---------- */
.tab-panel.enter .svc{animation:cardIn .45s cubic-bezier(.34,1.56,.64,1) backwards}
.tab-panel.enter .svc:nth-child(2){animation-delay:.07s}
.tab-panel.enter .svc:nth-child(3){animation-delay:.14s}
.tab-panel.enter .svc:nth-child(4){animation-delay:.21s}
.svc .ic{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.svc:hover .ic{transform:rotate(12deg) scale(1.3)}
/* ---------- Méthode : trait de bombe qui relie les étapes ---------- */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:4%;right:4%;top:2px;height:8px;z-index:0;border-radius:8px;
background:repeating-linear-gradient(90deg,var(--ink) 0 22px,transparent 22px 34px);transform-origin:left;
transform:scaleX(1);transition:transform 1.4s cubic-bezier(.7,0,.2,1) .3s}
.js .spray:not(.show) .steps::before{transform:scaleX(0)}
.step{z-index:1}
.js .spray.show .burst{animation:spinIn .6s cubic-bezier(.34,1.56,.64,1) both}
.js .spray.show .step:nth-child(1) .burst{animation-delay:.4s}
.js .spray.show .step:nth-child(2) .burst{animation-delay:.75s}
.js .spray.show .step:nth-child(3) .burst{animation-delay:1.1s}
.js .spray.show .step:nth-child(4) .burst{animation-delay:1.45s}
/* ---------- Presse : coupures scotchées ---------- */
.presscard{position:relative;transform:rotate(var(--t,0deg))}
.presscard:nth-child(3n+1){--t:-1deg}.presscard:nth-child(3n+2){--t:.8deg}.presscard:nth-child(3n){--t:-.5deg}
.presscard::before{content:"";position:absolute;top:-13px;left:50%;width:78px;height:24px;
background:rgba(255,233,59,.8);border:2px solid rgba(20,16,24,.25);transform:translateX(-50%) rotate(-5deg);
clip-path:polygon(3% 0,97% 6%,100% 94%,0 100%)}
.presscard:nth-child(2n)::before{background:rgba(142,240,0,.75);transform:translateX(-50%) rotate(4deg)}
.js .presscard.pop.show{transform:rotate(var(--t,0deg))}
.presscard:hover,.js .presscard.pop.show:hover{transform:translate(-3px,-5px) rotate(0deg)}
/* ---------- À propos ---------- */
.about-img{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.about-img-wrap:hover .about-img{transform:rotate(1.5deg) scale(1.03)}
.about-img-wrap:hover .bam{animation:wiggle .5s ease-in-out}
.js .spray.show .stick{animation:slap .45s cubic-bezier(.34,1.56,.64,1) backwards}
.js .spray.show .stick:nth-child(2){animation-delay:.08s}.js .spray.show .stick:nth-child(3){animation-delay:.16s}
.js .spray.show .stick:nth-child(4){animation-delay:.24s}.js .spray.show .stick:nth-child(5){animation-delay:.32s}
.js .spray.show .stick:nth-child(6){animation-delay:.4s}
/* ---------- Formulaire : taches de peinture à l'envoi ---------- */
.splash-dot{position:fixed;z-index:3000;pointer-events:none;width:var(--s);height:var(--s);
border:3px solid var(--ink);border-radius:63% 37% 54% 46%/55% 48% 52% 45%;background:var(--c);
animation:splash .9s cubic-bezier(.2,.8,.2,1) forwards}
.field input,.field textarea,.field select{transition:box-shadow .2s, transform .2s}
.field input:focus,.field textarea:focus,.field select:focus{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--green)}
/* ---------- Bouton devis flottant (mobile/tablette) ---------- */
.fab-devis{position:fixed;right:16px;bottom:16px;z-index:790;display:none;font-family:'Bangers',cursive;font-size:1.25rem;
letter-spacing:1px;text-decoration:none;color:var(--ink);background:var(--yellow);border:4px solid var(--ink);
border-radius:14px;padding:10px 18px;box-shadow:5px 5px 0 var(--magenta);
transform:translateY(140%) rotate(-3deg);visibility:hidden;transition:transform .35s cubic-bezier(.34,1.56,.64,1), visibility 0s linear .35s}
.fab-devis.on{transform:rotate(-3deg);visibility:visible;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
/* =========================================================
SÉPARATION DES SECTIONS
Alternance de fonds + bords déchirés façon affiche
========================================================= */
.tone{--tone:var(--paper);background:var(--tone);margin:40px 0}
.tone-green{--tone:#dcf3bd;--edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23dcf3bd' d='M0 26 V14 L9,9 L17,15 L28,6 L36,12 L47,4 L58,13 L66,8 L79,16 L88,7 L97,11 L108,3 L118,12 L127,8 L139,15 L148,5 L160,13 L169,9 L181,16 L190,6 L200,12 L211,4 L221,13 L231,8 L240,14 V26 Z'/%3E%3Cpolyline fill='none' stroke='%23141018' stroke-width='3.2' stroke-linejoin='round' vector-effect='non-scaling-stroke' points='0,14 9,9 17,15 28,6 36,12 47,4 58,13 66,8 79,16 88,7 97,11 108,3 118,12 127,8 139,15 148,5 160,13 169,9 181,16 190,6 200,12 211,4 221,13 231,8 240,14'/%3E%3C/svg%3E")}
.tone-yellow{--tone:#fff3a6;--edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23fff3a6' d='M0 26 V14 L9,9 L17,15 L28,6 L36,12 L47,4 L58,13 L66,8 L79,16 L88,7 L97,11 L108,3 L118,12 L127,8 L139,15 L148,5 L160,13 L169,9 L181,16 L190,6 L200,12 L211,4 L221,13 L231,8 L240,14 V26 Z'/%3E%3Cpolyline fill='none' stroke='%23141018' stroke-width='3.2' stroke-linejoin='round' vector-effect='non-scaling-stroke' points='0,14 9,9 17,15 28,6 36,12 47,4 58,13 66,8 79,16 88,7 97,11 108,3 118,12 127,8 139,15 148,5 160,13 169,9 181,16 190,6 200,12 211,4 221,13 231,8 240,14'/%3E%3C/svg%3E")}
.tone-ink{--tone:var(--ink);--edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23141018' d='M0 26 V14 L9,9 L17,15 L28,6 L36,12 L47,4 L58,13 L66,8 L79,16 L88,7 L97,11 L108,3 L118,12 L127,8 L139,15 L148,5 L160,13 L169,9 L181,16 L190,6 L200,12 L211,4 L221,13 L231,8 L240,14 V26 Z'/%3E%3Cpolyline fill='none' stroke='%23ff00d4' stroke-width='3.2' stroke-linejoin='round' vector-effect='non-scaling-stroke' points='0,14 9,9 17,15 28,6 36,12 47,4 58,13 66,8 79,16 88,7 97,11 108,3 118,12 127,8 139,15 148,5 160,13 169,9 181,16 190,6 200,12 211,4 221,13 231,8 240,14'/%3E%3C/svg%3E");color:var(--paper)}
.tone::before,.tone::after{content:"";position:absolute;left:0;right:0;height:26px;pointer-events:none;z-index:1;
background:var(--edge) 0 0/240px 100% repeat-x}
.tone::before{top:-25px}
.tone::after{bottom:-25px;transform:scaleY(-1);background-position:110px 0}
/* Presse : coulures de peinture en bas */
.tone-ink::after{height:34px;bottom:-33px;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath fill='%23141018' d='M0,0 H120 V8 C114,8 114,23 109,23 C104,23 105,8 99,8 C93,8 94,31 88,31 C82,31 83,8 77,8 C71,8 72,18 66,18 C60,18 61,8 55,8 C49,8 50,26 44,26 C38,26 39,8 33,8 C27,8 28,21 22,21 C16,21 17,8 11,8 C5,8 6,15 0,15 Z'/%3E%3C/svg%3E") 0 0/180px 100% repeat-x}
.tone-ink .sec-title,.tone-ink .sec-sub,.tone-ink .gallery-note{color:var(--paper)}
.tone-ink .sec-title{text-shadow:4px 4px 0 var(--magenta)}
.tone-ink .sec-title mark{background-image:linear-gradient(var(--yellow),var(--yellow));color:var(--ink);text-shadow:none;padding:0 10px;margin-left:4px}
.tone-ink .presscard:nth-child(3n+1){box-shadow:7px 7px 0 var(--magenta)}
.tone-ink .presscard:nth-child(3n+2){box-shadow:7px 7px 0 var(--green)}
.tone-ink .presscard:nth-child(3n){box-shadow:7px 7px 0 var(--yellow)}
.tone-ink .presscard:hover{box-shadow:11px 11px 0 var(--white)}
.tone-ink .sec-head{--spray:rgba(255,0,212,.35)}
.tone-green .sec-head{--spray:rgba(255,255,255,.75)}
.tone-yellow .sec-head{--spray:rgba(255,0,212,.25)}
.tone + .band{margin-top:64px}
/* =============== MOBILE =============== */
@media(max-width:880px){
.hero{padding-top:112px}
.hero-grid{grid-template-columns:1fr;gap:34px}
.hero-visual{order:-1;margin:0 18px 30px 0}
.stage{right:-14px;bottom:-40px;width:104px}
.about{grid-template-columns:1fr;gap:44px}
.bubble::before{left:50%;top:-32px;margin-left:-16px;border:16px solid transparent;border-bottom-color:var(--ink)}
.bubble::after{left:50%;top:-21px;margin-left:-12px;border:12px solid transparent;border-bottom-color:var(--white)}
.contact{grid-template-columns:1fr}
.gallery{grid-auto-rows:190px;gap:18px}
.proj:nth-child(n){grid-column:span 6;grid-row:span 1}
.proj:nth-child(1){grid-column:span 12}
}
@media(max-width:960px){
.nav-links{position:fixed;top:0;right:0;height:100vh;width:76%;max-width:380px;flex-direction:column;justify-content:center;gap:30px;
background:var(--paper);border-left:4px solid var(--ink);transform:translateX(105%);
visibility:hidden;transition:transform .3s, visibility 0s linear .3s;padding:40px;z-index:800}
.nav-links.open{transform:none;visibility:visible;transition:transform .3s}
.burger{display:flex}
}
@media(max-width:660px){
.brand{font-size:1.7rem;gap:9px}
.navlogo{width:66px;margin:-4px 0 -38px -4px}
.hero-cap{display:none}
.stage{width:86px;right:-10px;bottom:-30px}
.eyebrow{letter-spacing:1.2px;font-size:.7rem}
.tab{font-size:1.1rem;padding:8px 14px}
.seq span{font-size:1.25rem}
.proj:nth-child(n){grid-column:span 12}
.gallery{grid-auto-rows:240px}
.proj .meta{padding:6px 11px}
.proj .ttl{font-size:1.05rem}
}
/* ---------- Effets : ajustements écrans étroits ---------- */
@media(max-width:960px){
.fab-devis{display:block}
.steps::before{display:none}
}
@media(max-width:660px){
nav.topnav.scrolled .navlogo{width:54px;margin-bottom:-24px}
.scribble{bottom:-10px;height:16px}
.lb-prev,.lb-next{top:auto;bottom:18px;margin-top:0}
.lb-prev{left:calc(50% - 64px)}.lb-next{right:calc(50% - 64px)}
.lb-img{max-height:70vh;border-width:4px;box-shadow:7px 7px 0 var(--magenta)}
.lb-cap{font-size:1.15rem}
.sec-head::before{left:-30px;width:220px}
.proj-open span{transform:none;width:38px;height:38px;font-size:1.5rem}
}
/* =============== ACCESSIBILITÉ =============== */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none !important;transition:none !important}
.spray,.pop,.hero h1 .w{opacity:1 !important;transform:none !important}
.proj::after,.hero-frame::before,.hero-frame::after{transform:scaleX(0) !important}
.proj .meta,.proj .bam{opacity:1 !important}
.sec-title mark{background-size:100% 100% !important}
.steps::before{transform:none !important}
body::after{display:none}
}