/* ---------- hero vidéo ---------- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,15,16,.55) 0%,rgba(13,15,16,.18) 35%,rgba(13,15,16,.35) 62%,rgba(13,15,16,.92) 100%)}
.hero-in{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(28px,5vh,56px)}
.hero h1{font-size:clamp(40px,14vw,200px);-webkit-text-stroke-width:clamp(1.5px,.22vw,3px)}
/* réunion 27/10 : « murales » et son point restent sur une ligne, à toutes les tailles (le point passait seul à la ligne en 2560) */
.hero h1 .l2{display:block;padding-left:.55em;white-space:nowrap}
/* 27/10 : « fresque murale » toujours sous « collectif de graffeurs » (règle fixe, toutes tailles) */
.hero-kick{font-family:var(--head);font-weight:900;font-size:clamp(12px,1.1vw,16px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;color:var(--turq);margin-bottom:clamp(8px,1.2vh,16px)}
.hero-tag{margin-top:clamp(14px,2vh,24px);font-family:var(--head);font-weight:800;font-size:clamp(18px,1.9vw,30px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);max-width:22em}
.hero-foot{padding-right:84px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:28px}
.hero-foot p{font-family:var(--head);font-weight:700;font-size:clamp(14px,1.2vw,16px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hero-foot p span{color:var(--turq)}
.vctrl{display:flex;gap:8px}
.vctrl button{width:48px;height:48px;border:1px solid rgba(237,235,230,.4);display:grid;place-items:center;background:rgba(13,15,16,.35);backdrop-filter:blur(6px);transition:background .2s,color .2s}
.vctrl button:hover{background:var(--ink);color:var(--bg)}
.vctrl svg{width:18px;height:18px}
.scroll-cue{position:absolute;right:var(--gutter);top:50%;writing-mode:vertical-rl;font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:700px){.scroll-cue{display:none}.hero h1 .l2{padding-left:.35em}.hero-foot{flex-wrap:wrap;row-gap:14px}.hero-foot p{flex:1 0 100%}}

/* ---------- intro ---------- */
.intro{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,6vw,96px);padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(56px,7vw,96px);align-items:end}
.intro h2{font-family:var(--head);font-weight:800;font-size:clamp(28px,3.4vw,50px);line-height:1.08;letter-spacing:-.02em}
.intro h2 em{font-style:normal;color:var(--turq)}
.intro .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.stats{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)} /* 04/11 : plus d’air entre « 2014 » et le trait */
.stat{padding:22px clamp(14px,1.8vw,28px) 0 0}
.stat+.stat{padding-left:clamp(16px,1.8vw,28px);border-left:1px solid var(--line)}
.stat b{display:block;font-family:var(--head);font-weight:900;font-size:clamp(40px,4.6vw,72px);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ink);letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font-size:14px;color:var(--ink-2)}
@media (max-width:860px){.intro{grid-template-columns:1fr}}

/* ---------- pour qui ---------- */
.sec{padding:clamp(72px,9vw,128px) 0}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.sec-top .tape{margin-bottom:18px}
.who{border-top:1px solid var(--line)}
.who a{position:relative;display:grid;grid-template-columns:64px 100px 1fr 1.1fr 40px;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .3s var(--ease),background .3s}
.who .n{font-family:var(--head);font-weight:900;font-size:40px;color:transparent;-webkit-text-stroke:1.5px var(--ink-3);transition:-webkit-text-stroke-color .3s}
.who h3{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(24px,3vw,44px);letter-spacing:-.02em;line-height:1}
.who p{color:#DDDAD3;font-size:clamp(16px,1.25vw,18px);font-weight:500;line-height:1.5;max-width:460px}
.who .go{width:40px;height:40px;transition:transform .3s var(--ease),color .3s}
.who a:hover{padding-left:18px;background:linear-gradient(90deg,rgba(81,197,207,.07),transparent 70%)}
.who a:hover .n{-webkit-text-stroke-color:var(--turq)}
.who a:hover .go{transform:translateX(6px);color:var(--turq)}
.peek{position:fixed;z-index:40;width:300px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) rotate(-3deg) scale(.9);transition:opacity .25s,transform .35s var(--ease);box-shadow:10px 10px 0 var(--turq-deep)}
.peek.on{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}
.peek img{width:100%;height:auto}
@media (max-width:860px){.who a{grid-template-columns:60px 1fr 32px;gap:14px}.who .n{display:none}.who .ico{width:60px;height:60px}.who p{grid-column:2/3;margin-top:-6px}.who .go{grid-row:1;grid-column:3;width:32px;height:32px}}
@media (hover:none){.peek{display:none}}

/* ---------- le mur ---------- */
.mur-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:36px}
.mur-foot p{color:var(--ink-3);font-size:14px}

/* ---------- méthode ---------- */
.method{background:var(--bg-2);border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
/* trait de bombe tracé d'une étape à l'autre (21/10, sur le modèle de la liane des Jardins de Jonathan) */
.trail{position:absolute;left:0;right:0;top:28px;width:100%;height:40px;overflow:visible;pointer-events:none}
.trail path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.trail .guide{stroke:rgba(237,235,230,.16);stroke-width:2;stroke-dasharray:.006 .012;stroke-dashoffset:0}
.trail .halo{stroke:var(--turq);stroke-width:16;opacity:.16}
.trail .line{stroke:var(--turq);stroke-width:4}
.steps.run .trail .halo,.steps.run .trail .line{stroke-dashoffset:0;transition:stroke-dashoffset var(--trail,5.2s) linear}
.js .step .ico,.js .step .num{opacity:.28;transform:scale(.86);transform-origin:left center;transition:opacity .7s var(--ease),transform .7s cubic-bezier(.3,1.5,.5,1)}
.js .step h3,.js .step p{opacity:.45;transition:opacity .7s var(--ease)}
.js .step.on .ico,.js .step.on .num{opacity:1;transform:none}
.js .step.on h3,.js .step.on p{opacity:1}
.step{padding:0 28px 0 0;position:relative}
.step .ico{margin-bottom:26px;position:relative;background:var(--bg-2);box-shadow:0 0 0 10px var(--bg-2)}
.step .num{font-family:var(--head);font-weight:900;font-size:clamp(64px,6vw,96px);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--ink);letter-spacing:-.04em;display:block;margin-bottom:18px}
.step h3{font-family:var(--head);font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:.02em;margin-bottom:10px}
.step p{color:var(--ink-2);font-size:15px}
.steps-grid{display:contents}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr;row-gap:56px}.trail{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- études de cas ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:48px;overflow-x:auto;scrollbar-width:none}
.tabs button{flex:none;min-height:56px;padding:0 22px;font-family:var(--head);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--ink);border-color:var(--turq)}
.case{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.case[hidden]{display:none}
.case figure{position:relative}
.case figure img{width:100%;height:auto;max-height:640px;object-fit:cover}
.case figure .tape{position:absolute;top:-12px;left:24px}
.case h3{font-family:var(--head);font-weight:900;text-transform:uppercase;font-size:clamp(34px,4.4vw,64px);line-height:.95;letter-spacing:-.03em;margin:8px 0 22px}
.case p{color:var(--ink-2);max-width:480px}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:28px 0 34px;padding-top:24px;border-top:1px solid var(--line);font-size:14.5px}
.case dt{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.case .pal i{width:18px;height:18px}
@media (max-width:860px){.case{grid-template-columns:1fr}}

/* ---------- références : sans cadres, tout visible d'un coup (21/10) ---------- */
.refs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(28px,4vw,64px) 0;padding:clamp(8px,2vw,24px) 0}
.refs li{list-style:none;flex:0 0 20%;display:flex;justify-content:center;align-items:center;min-height:72px;padding:0 clamp(12px,2.4vw,40px)}
.refs li:nth-child(n+6){flex-basis:22%}
.refs img{display:block;height:auto;width:auto;max-height:clamp(36px,3.6vw,52px);max-width:min(100%,160px);object-fit:contain;opacity:.7;filter:grayscale(1) brightness(1.15);transition:opacity .25s,filter .25s,transform .25s var(--ease)}
.refs img[alt="Police"],.refs img[alt="Jack Daniel’s"],.refs img[alt="Wallonia.be"],.refs img[alt="STIB"]{max-height:clamp(46px,4.8vw,70px)}
.refs img[alt="STIB"]{max-height:clamp(64px,6.6vw,96px)}
.refs li:hover img{opacity:1;filter:none;transform:scale(1.04)}
@media (max-width:860px){.refs li,.refs li:nth-child(n+6){flex-basis:33.333%}}

/* ---------- appel final ---------- */
.final{position:relative;padding:clamp(88px,12vw,180px) 0;overflow:hidden}
.final .display{font-size:clamp(56px,12.5vw,210px);line-height:1}
.final-g{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:end;margin-top:48px}
.drop{position:relative;display:block;border:1px solid var(--line);background:var(--bg-2);padding:40px 32px;text-align:center;transition:border-color .25s,background .25s}
.drop:hover{border-color:var(--turq);background:rgba(81,197,207,.06)}
.drop .corner{position:absolute;width:64px;height:20px;background:var(--tape);opacity:.9}
.drop .c1{top:-8px;left:-18px;transform:rotate(-38deg)}.drop .c2{top:-8px;right:-18px;transform:rotate(38deg)}
.drop .c3{bottom:-8px;left:-18px;transform:rotate(38deg)}.drop .c4{bottom:-8px;right:-18px;transform:rotate(-38deg)}
.drop svg{width:34px;height:34px;color:var(--turq);margin:0 auto 14px}
.drop b{display:block;font-family:var(--head);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:16px}
.drop span{display:block;margin-top:8px;color:var(--ink-2);font-size:14px}
.direct{display:flex;flex-direction:column;gap:14px}
.direct a{font-family:var(--head);font-weight:800;font-size:clamp(22px,2.6vw,36px);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:14px;width:max-content;max-width:100%}
.direct a:hover{color:var(--turq)}
.direct small{display:block;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:860px){.final-g{grid-template-columns:1fr}}
@media (max-width:860px){.who .ico{width:56px;height:56px}.who a{column-gap:18px}}
/* ---------- à vous de peindre ---------- */
.paint{position:relative;width:min(100%,calc(78vh * 4 / 3));margin:0 auto;cursor:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.paint .raw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5) contrast(.95);transition:filter 1.2s var(--ease)}
.paint canvas{position:absolute;inset:0;width:100%;height:100%}
.can{position:absolute;left:0;top:0;z-index:4;width:74px;height:127px;pointer-events:none;opacity:0;transform-origin:31px 12px;will-change:transform;transition:opacity .2s;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.can.on{opacity:1}
.can svg{width:100%;height:100%;overflow:visible}
.can .puff{transform-origin:17px 9.5px;opacity:0}
.can.spray .puff{animation:puff .35s ease-out infinite}
@keyframes puff{0%{opacity:1;transform:scale(.55)}100%{opacity:0;transform:translate(-5px,0) scale(1.25)}}
.paint.done{cursor:default}
@media (hover:none){.can{display:none}}
.paint.done .raw{filter:none}
.strip{position:absolute;z-index:2;background:var(--tape);opacity:.94;box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .9s var(--ease),opacity .6s;
  background-image:linear-gradient(180deg,rgba(255,255,255,.28),transparent 45%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.st1{left:-1.5%;right:-1.5%;top:-14px;height:30px;transform:rotate(-.5deg)}
.st2{left:-1.5%;right:-1.5%;bottom:-14px;height:30px;transform:rotate(.4deg)}
.st3{top:-2%;bottom:-2%;left:-14px;width:30px;transform:rotate(.4deg)}
.st4{top:-2%;bottom:-2%;right:-14px;width:30px;transform:rotate(-.5deg)}
.paint.done .st1{transform:translate(18%,-160%) rotate(-9deg);opacity:0}
.paint.done .st2{transform:translate(-18%,160%) rotate(8deg);opacity:0;transition-delay:.12s}
.paint.done .st3{transform:translate(-220%,-14%) rotate(-7deg);opacity:0;transition-delay:.24s}
.paint.done .st4{transform:translate(220%,14%) rotate(7deg);opacity:0;transition-delay:.36s}
.paint-done{position:absolute;left:24px;bottom:24px;z-index:3;opacity:0;transform:translateY(10px);transition:opacity .5s .7s,transform .5s .7s var(--ease)}
.paint.done .paint-done{opacity:1;transform:none}
.paint-done .tape{font-size:14px;padding:10px 20px 9px}
.paint-ui{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:34px;flex-wrap:wrap}
.meter{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.meter b{font-weight:900;font-size:40px;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px var(--turq);vertical-align:-6px;display:inline-block;min-width:2ch;text-align:right}

/* pictos plus présents */
@media (min-width:861px){.who .ico{width:84px;height:84px}}
.step .ico{width:96px;height:96px}
/* ---------- graffeur professionnel (texte SEO de l'ancien accueil) ---------- */
.about{border-top:1px solid var(--line)}
.about-g{display:grid;grid-template-columns:.95fr 1.25fr;gap:clamp(32px,5vw,80px);align-items:start}
.about-head .tape{margin-bottom:18px}
.about-head .h2{font-size:clamp(34px,4.4vw,64px);margin-bottom:24px}
.about-lead{font-size:18px;color:var(--ink);max-width:560px}
/* chiffres demandés par Renaud le 27/10 : plus de 10 artistes, 2 membres fondateurs, 10 provinces */
.about-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(22px,3.4vw,48px);margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line)}
.about-stats div{display:flex;flex-direction:column;gap:8px}
.about-stats b{font-family:var(--head);font-weight:900;font-size:clamp(44px,5.2vw,78px);line-height:.85;letter-spacing:-.02em;color:var(--ink);text-shadow:.045em .045em 0 var(--turq-deep)}
.about-stats span{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);max-width:15ch;line-height:1.35}
/* prestations en images : une grande + quatre */
.about-svc{list-style:none;display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-auto-rows:auto;gap:3px}
.about-svc li:first-child{grid-row:span 2}
.about-svc a{display:flex;flex-direction:column;flex:1;background:var(--bg-2)}
.about-svc li{display:flex}
.about-svc .ph{position:relative;flex:1;overflow:hidden;min-height:clamp(130px,11vw,180px)}
.about-svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .6s var(--ease),filter .4s}
.about-svc .nm{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;min-height:80px;font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;transition:color .2s}
.about-svc .nm svg{flex:none;width:16px;height:16px;color:var(--turq);transition:transform .25s var(--ease)}
.about-svc a:hover img,.about-svc a:focus-visible img{transform:scale(1.045);filter:saturate(1.05)}
.about-svc a:hover .nm,.about-svc a:focus-visible .nm{color:var(--turq)}
.about-svc a:hover .nm svg{transform:translateX(4px)}
/* texte complet de l'ancien accueil (référencement) : en entier dans la page, replié à l'écran */
.about-more{position:relative;grid-column:1/-1;margin-top:clamp(8px,2vw,24px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.about-intro{display:grid;grid-template-columns:repeat(2,1fr);gap:20px clamp(32px,5vw,80px)}
.about-intro p{color:var(--ink);font-size:clamp(16px,1.25vw,18px);line-height:1.6}
.about-arts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,44px);margin-top:clamp(36px,4vw,56px)}
.about-arts figure{position:relative;aspect-ratio:3/2;overflow:hidden;margin-bottom:22px;background:var(--bg-2)}
.about-arts figure img{width:100%;height:100%;object-fit:cover}
.about-arts figure .tape{position:absolute;left:12px;bottom:12px}
.js .about-more:not(.open) .about-cols{max-height:150px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 20%,transparent);mask-image:linear-gradient(#000 20%,transparent)}
.about-more .btn{margin-top:22px}
html:not(.js) .about-more .btn,.about-more.open .btn{display:none}
.about-cols h3{font-family:var(--head);font-weight:800;font-size:clamp(19px,1.6vw,23px);line-height:1.2;margin-bottom:12px}
.about-cols article p{color:var(--ink-2);font-size:15px;line-height:1.65;margin-bottom:10px}
.about-cols article p:first-of-type{color:var(--ink)}
@media (max-width:980px){.about-g{grid-template-columns:1fr}.about-arts{grid-template-columns:1fr 1fr}.about-arts article:last-child{grid-column:1/-1}}
@media (max-width:700px){.about-intro,.about-arts{grid-template-columns:1fr}.about-svc{grid-template-columns:1fr 1fr}.about-svc li:first-child{grid-row:auto;grid-column:1/-1}.about-svc li:first-child .ph{min-height:0;aspect-ratio:16/10;flex:none}.about-svc .nm{font-size:12px;padding:12px;min-height:72px}.about-stats{grid-template-columns:repeat(3,1fr);gap:16px}.about-stats span{font-size:10.5px;letter-spacing:.1em}}
/* ---------- téléphone en paysage : titre visible dès le premier écran (audit 08/10) ---------- */
@media (orientation:landscape) and (max-height:500px){
  .nav-in{height:56px}
  .brand img{width:40px;height:40px}
  .hero{min-height:0}
  .hero h1{font-size:clamp(40px,15vh,80px)}
  .hero-in{padding-bottom:16px}
  .hero-foot{margin-top:12px}
  .hero-tag{margin-top:6px;font-size:16px}
}
@media (max-width:400px){.stat b{font-size:34px}.stat{padding-right:10px}.stat+.stat{padding-left:12px}.who a{grid-template-columns:52px minmax(0,1fr) 32px;column-gap:12px}.who .ico{width:52px;height:52px}.who h3{font-size:20px}.about-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.about-stats b{font-size:36px}.about-stats span{letter-spacing:.06em}.about-g{grid-template-columns:minmax(0,1fr)}.about-head .h2{font-size:28px}.about-svc{grid-template-columns:repeat(2,minmax(0,1fr))}.about-svc .nm{font-size:12px;letter-spacing:.03em;padding:12px;-webkit-hyphens:auto;hyphens:auto}} /* 04/11 : plus de débordement à 320 px (en fin de feuille : passe après les règles 860 px) */