/* Charte STROBOTECH (MAD Studio) : Daniel Black + Avenir Roman, cyan #00afec + noir */
@font-face{font-family:"Avenir STB";src:url(fonts/avenir-roman.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir STB";src:url(fonts/avenir-oblique.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Avenir STB";src:url(fonts/avenir-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir STB";src:url(fonts/avenir-heavy.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir STB";src:url(fonts/avenir-black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Daniel";src:url(fonts/daniel-black.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --bg:#000; --bg2:#0B0C0E; --bg3:#121417; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
  --txt:#F3F5F7; --mute:#A2AAB3; --dim:#69717A; --cyan:#00AFEC; --cyan-soft:rgba(0,175,236,.14);
  --ease:cubic-bezier(.32,.72,0,1);
  --sans:"Avenir STB","Avenir","Avenir Next",system-ui,sans-serif;
  --hand:"Daniel","Avenir STB",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:1360px;margin:0 auto;padding:0 40px}
/* l'étiquette espacée en bas de casse : l'écho du « audiovisual solutions » du logo */
.k{font:400 13px/1.2 var(--sans);letter-spacing:.34em;text-transform:lowercase;color:var(--cyan);display:flex;align-items:center;gap:14px}
.k:before{content:"";flex:0 0 18px;width:18px;height:18px;background:url(swirl-64.png) center/contain no-repeat}
.lbl{font:500 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
h1,h2,h3{font-family:var(--sans);font-weight:900;letter-spacing:-.025em}
h2{font-size:clamp(32px,4vw,60px);line-height:1;margin-top:22px}
/* deuxième ligne au feutre : le duo Daniel Black + Avenir du logo */
.hand{display:block;font-family:var(--hand);font-weight:400;color:var(--cyan);letter-spacing:0;line-height:1.08;font-size:.92em;margin-top:.12em}
section{border-top:1px solid var(--line)}
.pad{padding:120px 0}
@media (max-width:860px){.wrap{padding:0 16px}.pad{padding:76px 0}}

/* nav */
header.nav{position:sticky;top:0;z-index:30;background:rgba(0,0,0,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.nav .logo img{height:36px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;font:500 13px/1 var(--sans);letter-spacing:.02em;color:var(--mute)}
.nav ul a{transition:color .4s var(--ease)}
.nav ul a:hover{color:#fff}
.nav .right{display:flex;align-items:center;gap:22px}
.nav .tel{font:500 13px/1 var(--sans);color:var(--mute);white-space:nowrap}
.nav .cta{font:800 13px/1 var(--sans);letter-spacing:.02em;color:#000;background:var(--cyan);padding:13px 18px;border-radius:999px;white-space:nowrap;transition:background .4s var(--ease)}
.nav .cta:hover{background:#3CC4F4}
@media (max-width:1100px){.nav ul,.nav .tel{display:none}.nav .wrap{height:64px}.nav .logo img{height:30px}.nav .cta{padding:11px 14px;font-size:12px}}

/* bouton */
.btn{display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 24px;border-radius:999px;background:var(--cyan);color:#000;font:800 15px/1 var(--sans);transition:transform .5s var(--ease),background .4s var(--ease);border:0;cursor:pointer}
.btn i{width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.14);display:grid;place-items:center;transition:transform .5s var(--ease)}
.btn i svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn:hover i{transform:translate(3px,-2px)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--txt);border:1px solid var(--line2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.ghost i{background:rgba(255,255,255,.1)}

/* hero : photo pleine page, annotations au feutre ancrées sur l'image */
.hero{position:relative;height:calc(100svh - 76px);min-height:640px;max-height:1040px;border-top:0;background:#000;overflow:hidden}
.hero .frame{position:absolute;inset:0;overflow:hidden;container-type:size}
/* ancrage à 30 % : on rogne surtout la moquette du bas, jamais le plafond et ses annotations */
.stage{position:absolute;left:50%;top:30%;width:max(100cqw,133.34cqh);aspect-ratio:4/3;transform:translate(-50%,-30%)}
.stage img{width:100%;height:100%;object-fit:cover;animation:slowzoom 18s var(--ease) both}
@keyframes slowzoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.82) 26%,rgba(0,0,0,.34) 50%,rgba(0,0,0,0) 66%),linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.42) 36%,rgba(0,0,0,0) 60%)}
.notes svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.notes path{fill:none;stroke:var(--cyan);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease)}
.note{position:absolute;font:400 clamp(15px,1.75cqw,30px)/1 var(--hand);color:#fff;white-space:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.75);opacity:0;transform:translateY(6px) rotate(var(--r,-3deg));transition:opacity .8s var(--ease),transform .8s var(--ease)}
.note u{text-decoration:none;color:var(--cyan)}
.on .note{opacity:1;transform:rotate(var(--r,-3deg))}
.on .notes path{stroke-dashoffset:0}
.hero .txt{position:absolute;z-index:3;left:max(40px,calc((100vw - 1360px)/2 + 40px));right:40px;bottom:60px;max-width:1000px}
.hero h1{font-size:clamp(40px,4.7vw,78px);line-height:.98;margin-top:22px}
.hero h1 .hand{font-size:.74em;margin-top:.16em}
.hero p{color:#C9D0D7;max-width:520px;margin-top:24px;font-size:18px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero .cap{position:absolute;z-index:3;right:max(40px,calc((100vw - 1360px)/2 + 40px));bottom:64px;font:500 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);text-align:right}
.hero .cap b{display:block;font:400 22px/1 var(--hand);letter-spacing:0;text-transform:none;color:#fff;margin-bottom:6px}
@media (max-width:860px){
  .hero{height:auto;min-height:0;max-height:none}
  .hero .frame{position:relative;inset:auto;aspect-ratio:4/3}
  .shade{background:linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(0,0,0,.5) 18%,rgba(0,0,0,0) 40%)}
  .hero .txt{position:relative;left:auto;right:auto;bottom:auto;padding:6px 16px 52px}
  .hero h1{margin-top:18px}
  .hero p{font-size:17px}
  .hero .cap{display:none}
  .note.mhide,.notes path.mhide{display:none}
  .note.n2{left:auto!important;right:3%}
  .hero h1 .hand{font-size:.66em}
}

/* bande infos */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip div{padding:30px 24px 32px;border-right:1px solid var(--line);display:flex;align-items:center;gap:18px}
.strip div:last-child{border-right:0}
.strip .ic{flex:0 0 46px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--cyan-soft)}
.strip .ic svg{width:22px;height:22px;fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.strip b{display:block;margin-bottom:6px}
.strip span{font:800 17px/1.25 var(--sans)}
@media (max-width:1000px){.strip{grid-template-columns:1fr 1fr}.strip div{border-bottom:1px solid var(--line);padding:20px 16px;gap:14px}.strip div:nth-child(2n){border-right:0}.strip span{font-size:15px}}

/* têtes de section */
.head{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.head p{color:#B5BDC5;font-size:18px;max-width:520px}
@media (max-width:860px){.head{grid-template-columns:1fr;gap:20px;margin-bottom:36px}.head p{font-size:17px}}

/* timelapse (repris de la V1) */
.tl{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#000}
.tl video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:18px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.66);border:1px solid var(--line2);padding:9px 12px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tl .t1{left:18px;border-color:rgba(0,175,236,.6)}
.tl .t1:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:9px;vertical-align:1px;box-shadow:0 0 0 4px rgba(0,175,236,.25)}
.tl .t2{right:18px}
.tlbar{position:absolute;left:18px;right:18px;bottom:16px;display:grid;grid-template-columns:10fr 5fr 10fr;gap:6px}
.tlbar i{display:block;height:3px;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden;position:relative}
.tlbar i:after{content:"";position:absolute;inset:0;background:var(--cyan);transform-origin:left;transform:scaleX(var(--p,0))}
.tlbar span{display:block;margin-top:9px;font:500 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8);text-shadow:0 1px 6px rgba(0,0,0,.8)}
@media (max-width:860px){.tl{aspect-ratio:4/3.3;border-radius:10px}.tlbar span{font-size:9px;letter-spacing:.1em}}

/* showreel : leurs propres vidéos, montées en boucle */
.reel{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line2);transform-origin:50% 0}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);pointer-events:none}
.reel .sig{position:absolute;z-index:2;right:24px;bottom:20px;font:400 clamp(22px,2.4vw,36px)/1 var(--hand);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7);transform:rotate(-3deg)}
.live{position:absolute;z-index:2;left:14px;top:14px;font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);padding:8px 11px;border-radius:999px;display:flex;align-items:center;gap:7px}
.live:before{content:"";width:6px;height:6px;border-radius:50%;background:#FF4D4D;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
@media (max-width:860px){.reel{border-radius:10px;aspect-ratio:4/3.3}}

/* savoir-faire : accordéon horizontal, un pôle s'ouvre au survol */
.acc{display:flex;gap:12px;height:clamp(520px,64vh,660px)}
.slice{position:relative;flex:1;min-width:0;border-radius:16px;overflow:hidden;cursor:pointer;border:1px solid var(--line);transition:flex .9s var(--ease),border-color .6s var(--ease);outline:none;background:#000}
.slice.on{flex:3.4;border-color:rgba(0,175,236,.45)}
.slice:focus-visible{border-color:var(--cyan)}
.slice .media{position:absolute;inset:0}
.slice .media img,.slice .media video{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.62);transition:transform 1.4s var(--ease),filter .9s var(--ease)}
.slice.on .media img,.slice.on .media video{filter:none;transform:scale(1.03)}
.slice .grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 66%)}
.slice .vt{position:absolute;left:20px;bottom:26px;display:flex;align-items:center;gap:14px;writing-mode:vertical-rl;transform:rotate(180deg);transition:opacity .5s var(--ease);white-space:nowrap}
.slice .vt b{font:400 30px/1 var(--hand);color:var(--cyan);font-weight:400}
.slice .vt span{font:900 26px/1 var(--sans);letter-spacing:-.01em}
.slice.on .vt{opacity:0}
.slice .info{position:absolute;left:0;right:0;bottom:0;padding:30px 32px 32px;max-width:640px;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .8s var(--ease);pointer-events:none}
.slice.on .info{opacity:1;transform:none;transition-delay:.3s;pointer-events:auto}
.slice .n{font:400 34px/1 var(--hand);color:var(--cyan)}
.slice h3{font-size:clamp(28px,2.6vw,40px);line-height:1;margin-top:10px}
.slice p{color:#C9D0D7;font-size:16px;margin-top:12px;max-width:460px}
.slice ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.slice li{font:500 12px/1 var(--sans);color:#E6EAEE;border:1px solid var(--line2);background:rgba(0,0,0,.4);padding:8px 11px;border-radius:999px}
@media (max-width:900px){
  .acc{flex-direction:column;height:auto;gap:14px}
  .slice,.slice.on{flex:none}
  .slice .media{position:relative;aspect-ratio:4/3}
  .slice .media img,.slice .media video{filter:none}
  .slice .grad,.slice .vt{display:none}
  .slice .info,.slice.on .info{position:relative;opacity:1;transform:none;padding:20px 20px 24px;background:var(--bg2);pointer-events:auto;transition:none}
}

/* location de matériel */
.loc{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.loc .ph{position:relative;aspect-ratio:1400/788;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.loc .ph img{width:100%;height:100%;object-fit:cover}
.loc .ph svg{position:absolute;inset:0;width:100%;height:100%}
.loc .ph path{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hnote{position:absolute;font:400 clamp(14px,1.9vw,28px)/1.08 var(--hand);white-space:nowrap;transform:rotate(-4deg)}
.hnote.dark{color:#0A0A0A}
.loc .lead{color:#B5BDC5;font-size:18px;margin-top:22px;max-width:520px}
.modes{list-style:none;margin-top:28px;border-top:1px solid var(--line)}
.modes li{display:grid;grid-template-columns:58px 1fr;padding:16px 0;border-bottom:1px solid var(--line)}
.modes b{font:400 26px/1 var(--hand);color:var(--cyan)}
.modes span{font:800 16px/1.35 var(--sans)}
.modes small{display:block;font:400 14px/1.5 var(--sans);color:var(--mute);margin-top:3px}
.loc .spec{margin-top:22px}
.loc .btn{margin-top:30px}
@media (max-width:1000px){.loc{grid-template-columns:1fr;gap:32px}}

/* méthode : un câble relie les six étapes et se tire au scroll */
.cable{position:relative}
.wire{position:absolute;left:0;top:0;width:100%;height:120px;overflow:visible}
.wire path{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round}
.wire path.ghost{stroke:rgba(255,255,255,.12)}
#spark{fill:#fff;opacity:0;filter:drop-shadow(0 0 5px #00AFEC) drop-shadow(0 0 14px #00AFEC)}
.vfill{display:none}
.cable ol{position:relative;list-style:none;display:grid;grid-template-columns:repeat(6,1fr)}
.cable li{text-align:center;padding:0 14px}
.cable .node{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;border-radius:50%;background:#000;border:2px solid var(--cyan);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.cable .node svg{width:24px;height:24px;fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.cable li.lit .node{background:var(--cyan);box-shadow:0 0 0 8px rgba(0,175,236,.16),0 0 34px rgba(0,175,236,.55)}
.cable li.lit .node svg{stroke:#000}
.cable li b{display:block;font:400 30px/1 var(--hand);color:var(--cyan);margin-top:40px}
.cable li .t{display:block;font:900 19px/1.1 var(--sans);margin-top:10px}
.cable li small{display:block;color:var(--mute);font-size:14px;line-height:1.5;margin-top:8px}
@media (max-width:900px){
  .wire{display:none}
  .cable ol{grid-template-columns:1fr}
  .cable li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;text-align:left;padding:0 0 28px;position:relative}
  .cable li > :not(.node){grid-column:2}
  .cable li:before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:#fff;opacity:.12}
  .vfill{display:block;position:absolute;z-index:0;left:27px;top:28px;bottom:50px;width:2px;background:var(--cyan);box-shadow:0 0 10px rgba(0,175,236,.8);transform-origin:50% 0}
  .cable .node{position:relative;z-index:1}
  .cable li:last-child:before{display:none}
  .cable li{align-items:center;padding-bottom:22px}
  .cable .node{grid-row:1 / span 2;margin:0}
  .cable li b{margin-top:2px;font-size:24px}
  .cable li .t{margin-top:4px}
}

/* réalisations */
.cases{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:16px}
.case{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column}
.case.big{grid-row:span 2}
.case .im{position:relative;overflow:hidden;aspect-ratio:4/3}
.case.big .im{aspect-ratio:auto;flex:1;min-height:360px}
.case .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.case:hover .im img{transform:scale(1.03)}
.case .bd{padding:22px 24px 24px}
.case.big .bd{padding:28px 30px 30px}
.case h3{font-size:clamp(20px,1.8vw,26px);line-height:1.1;margin:10px 0 8px}
.case.big h3{font-size:clamp(26px,2.5vw,36px)}
.case p{color:#B5BDC5;font-size:15px}
.spec{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.spec span{font:500 12px/1 var(--sans);color:#D3D9DF;border:1px solid var(--line2);padding:8px 11px;border-radius:999px}
@media (max-width:1100px){.cases{grid-template-columns:1fr 1fr}.case.big{grid-column:span 2;grid-row:auto}.case.big .im{aspect-ratio:16/9;flex:none;min-height:0}}
@media (max-width:700px){.cases{grid-template-columns:1fr}.case.big{grid-column:auto}.case.big .im{aspect-ratio:4/3}}

/* pour qui */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.who a{border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:var(--bg2);transition:border-color .6s var(--ease)}
.who a:hover{border-color:rgba(0,175,236,.5)}
.who .im{aspect-ratio:16/10;overflow:hidden;position:relative}
.who .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.who a:hover .im img{transform:scale(1.04)}
.who .im small{position:absolute;right:12px;bottom:10px;font:500 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.who .bd{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.who .n{font:400 30px/1 var(--hand);color:var(--cyan)}
.who h3{font-size:24px;line-height:1.05;margin:0 0 8px}
.who p{color:var(--mute);font-size:15px;flex:1}
.who .for{font:500 13px/1.6 var(--sans);color:#C9D0D7;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.who .go{margin-top:18px;font:800 14px/1 var(--sans);color:var(--cyan)}
@media (max-width:1000px){.who{grid-template-columns:1fr}}

/* fiabilité */
.fiab{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2)}
.fiab .im{position:relative;min-height:440px}
.fiab .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fiab .bd{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
.fiab h2{font-size:clamp(30px,2.9vw,46px)}
.fiab ul{list-style:none;margin-top:32px;border-top:1px solid var(--line)}
.fiab li{display:grid;grid-template-columns:58px 1fr;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.fiab li b{font:400 26px/1 var(--hand);color:var(--cyan)}
.fiab li span{font:800 16px/1.35 var(--sans)}
.fiab li small{display:block;font:400 14px/1.5 var(--sans);color:var(--mute);margin-top:3px}
@media (max-width:1000px){.fiab{grid-template-columns:1fr}.fiab .im{min-height:0;aspect-ratio:4/3}.fiab .bd{padding:32px 20px}}

/* références */
.refs{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.refs div{height:132px;padding:20px;display:grid;place-items:center;border-right:1px solid var(--line)}
.refs img{max-width:72%;width:auto;height:auto;filter:brightness(0) invert(1);opacity:.75;transition:opacity .5s var(--ease)}
.refs div:hover img{opacity:1}
.refs div:last-child{border-right:0}
@media (max-width:860px){.refs{grid-template-columns:1fr 1fr}.refs div{border-bottom:1px solid var(--line);height:104px}.refs div:nth-child(2n){border-right:0}.refs div:nth-last-child(-n+2){border-bottom:0}}

/* formulaire */
.devis-sec{position:relative;overflow:hidden}
.devis-sec .swirl{position:absolute;right:-180px;top:50%;width:720px;transform:translateY(-50%);opacity:.07;pointer-events:none}
.devis{position:relative;display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
.devis .side p{color:#B5BDC5;font-size:18px;margin-top:22px;max-width:440px}
.devis .side ul{list-style:none;margin-top:28px}
.devis .side li{font:500 15px/1.5 var(--sans);color:#D3D9DF;padding:11px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
.devis .side li:before{content:"→";color:var(--cyan)}
.devis .side .call{margin-top:30px;font:400 15px/1.5 var(--sans);color:var(--mute)}
.devis .side .call b{display:block;font:400 30px/1.2 var(--hand);color:#fff;margin-top:4px}
.form{border:1px solid var(--line2);border-radius:16px;background:var(--bg2);overflow:hidden}
.form .top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.bar{height:3px;background:var(--line)}
.bar i{display:block;height:100%;width:0;background:var(--cyan);transition:width .7s var(--ease)}
.q{display:none;padding:32px 24px 28px}
.q.on{display:block;animation:up .7s var(--ease)}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.q h3{font-size:26px;line-height:1.1;margin-bottom:6px}
.q .hint{color:var(--mute);font-size:14px;margin-bottom:22px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:10px;padding:15px 16px;min-height:56px;cursor:pointer;font-size:15px;line-height:1.3;transition:border-color .4s var(--ease),background .4s var(--ease)}
.opt:hover{border-color:rgba(0,175,236,.5)}
.opt.sel{border-color:var(--cyan);background:var(--cyan-soft)}
.opt i{flex:0 0 18px;height:18px;border:1px solid var(--dim);border-radius:50%;position:relative}
.opts.multi .opt i{border-radius:4px}
.opt.sel i{background:var(--cyan);border-color:var(--cyan)}
.opt.sel i:after{content:"";position:absolute;left:6px;top:2.5px;width:4px;height:8px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fld{display:grid;gap:14px}
.fld label{display:grid;gap:8px}
.fld input{font:400 16px/1.2 var(--sans);color:var(--txt);background:#000;border:1px solid var(--line2);border-radius:10px;padding:15px 14px;outline:none;transition:border-color .4s var(--ease);width:100%}
.fld input:focus{border-color:var(--cyan)}
.fld input::-webkit-calendar-picker-indicator{filter:invert(1)}
.fld .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nav-q{display:flex;justify-content:space-between;align-items:center;padding:0 24px 24px}
.back{font:500 13px/1 var(--sans);color:var(--mute);background:none;border:0;cursor:pointer;padding:10px 0}
.done h3{color:var(--cyan)}
@media (max-width:1000px){.devis{grid-template-columns:1fr;gap:32px}.devis-sec .swirl{width:480px;right:-200px;top:18%}}
@media (max-width:520px){.opts{grid-template-columns:1fr}.fld .two{grid-template-columns:1fr}.q{padding:26px 18px 22px}.nav-q{padding:0 18px 20px}.form .top{padding:16px 18px}}

/* équipe */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.team div{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 16px 20px}
.team img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;margin-bottom:16px;filter:contrast(1.05) brightness(.92)}
.team b{display:block;font:900 17px/1.2 var(--sans)}
.team span{display:block;font:400 13px/1.4 var(--sans);color:var(--mute);margin-top:6px}
@media (max-width:860px){.team{grid-template-columns:1fr 1fr;gap:10px}.team div{padding:10px 10px 14px;border-radius:10px}.team b{font-size:15px}}

/* journal : nouveautés et derniers événements */
.jtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.jtabs span{font:500 13px/1 var(--sans);color:var(--mute);border:1px solid var(--line2);padding:10px 15px;border-radius:999px}
.jtabs span.on{color:#000;background:var(--cyan);border-color:var(--cyan)}
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2);display:flex;flex-direction:column;transition:border-color .6s var(--ease)}
.post:hover{border-color:rgba(0,175,236,.45)}
.post .im{aspect-ratio:4/3;overflow:hidden}
.post .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post:hover .im img{transform:scale(1.04)}
.post .bd{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:clamp(19px,1.6vw,24px);line-height:1.15;margin:10px 0 8px}
.post p{color:var(--mute);font-size:15px;flex:1}
.post .go{margin-top:16px;font:800 14px/1 var(--sans);color:var(--cyan)}
.jall{display:flex;justify-content:flex-end;margin-top:22px}
@media (max-width:1000px){.jgrid{grid-template-columns:1fr 1fr}.post.big{grid-column:span 2}.post.big .im{aspect-ratio:16/9}}
@media (max-width:640px){.jgrid{grid-template-columns:1fr}.post.big{grid-column:auto}.post.big .im{aspect-ratio:4/3}.jall{justify-content:flex-start}}

/* titres de section seuls : plus de paragraphe d'accompagnement */
.sec-t{margin-bottom:48px}
.sec-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.sec-row .sec-t{margin-bottom:0}
@media (max-width:860px){.sec-t{margin-bottom:32px}.sec-row{display:block}.sec-row .btn{margin-top:22px}}
/* location : trois modes en une ligne */
.modes3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.modes3 span{border:1px solid var(--line2);border-radius:12px;padding:16px 16px 18px;font:800 15px/1.3 var(--sans)}
.modes3 b{display:block;font:400 26px/1 var(--hand);color:var(--cyan);margin-bottom:10px}
@media (max-width:520px){.modes3{grid-template-columns:1fr}.modes3 span{display:flex;align-items:center;gap:14px;padding:12px 14px}.modes3 b{margin:0}}
/* réalisations : quatre cartes photo, titre posé sur l'image */
.cases4{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:12px}
.cs{position:relative;height:clamp(340px,31vw,450px);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.cs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cs:hover img{transform:scale(1.04)}
.cs .ov{position:absolute;left:0;right:0;bottom:0;padding:60px 20px 20px;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,0))}
.cs h3{font-size:clamp(18px,1.6vw,24px);line-height:1.1;margin-top:8px}
.cs .lbl{color:#C9D0D7}
@media (max-width:1000px){.cases4{grid-template-columns:1fr 1fr}.cs{height:auto;aspect-ratio:3/4}}
/* équipe : une rangée compacte */
.crew{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.crew img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:12px;filter:contrast(1.05) brightness(.92);border:2px solid var(--line2)}
.crew b{display:block;font:800 14px/1.25 var(--sans)}
.crew span{display:block;font:400 12px/1.4 var(--sans);color:var(--mute);margin-top:3px}
@media (max-width:1000px){.crew{grid-template-columns:repeat(4,1fr);gap:18px 12px}}
/* pied : la marque en grand + les liens de référencement */
footer .fl li{line-height:1.5}
footer .fl a{display:inline-block;padding:5px 0;color:var(--mute);font-size:14px;transition:color .4s var(--ease)}
footer .fl a:hover{color:#fff}

/* pied */
footer{border-top:1px solid var(--line);padding:76px 0 40px}
footer .g{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:32px}
footer .logo{height:46px;width:auto}
footer h4{font:400 12px/1 var(--sans);letter-spacing:.3em;text-transform:lowercase;color:var(--cyan);margin-bottom:16px}
footer p,footer li{color:var(--mute);font-size:14px;list-style:none;line-height:1.9}
footer .base{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 12px/1.5 var(--sans);color:var(--dim)}
@media (max-width:860px){footer .g{grid-template-columns:1fr 1fr}}

.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.note{opacity:1;transform:none;transition:none}
  .notes path{stroke-dashoffset:0;transition:none}
  .stage img{animation:none}
  .track{animation:none}.gal{overflow-x:auto}
}

/* ===== V4 : site multi-pages ===== */
/* navigation : les trois publics + prestations, menu burger sous 1100 px */
.nav ul a.cur{color:#fff}
.nav ul a.cur:after{content:"";display:block;height:2px;background:var(--cyan);margin-top:6px;border-radius:2px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.04);cursor:pointer;place-items:center}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;position:relative;transition:transform .4s var(--ease)}
.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .4s var(--ease)}
.burger span:before{top:-6px}.burger span:after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span:before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span:after{transform:translateY(-6px) rotate(-45deg)}
.drawer{display:none}
@media (max-width:1100px){
  .burger{display:grid}
  .nav .cta{display:none}
  .drawer{display:block;position:fixed;z-index:29;inset:64px 0 0 0;background:rgba(0,0,0,.97);padding:28px 16px 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
  .menu-open .drawer{opacity:1;visibility:visible;transform:none}
  .drawer a.big{display:block;font:900 28px/1.15 var(--sans);letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--line)}
  .drawer a.big small{display:block;font:400 22px/1.1 var(--hand);color:var(--cyan);letter-spacing:0;margin-top:4px}
  .drawer .btn{margin-top:28px}
  .drawer .tel2{display:block;margin-top:22px;color:var(--mute)}
  body.menu-open{overflow:hidden}
}

/* fil d'Ariane */
.crumbs{font:500 12px/1.4 var(--sans);letter-spacing:.06em;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px}
.crumbs a:hover{color:#fff}
.crumbs span:before{content:"/";margin-right:8px;color:var(--dim)}

/* héro des pages intérieures */
.phero{position:relative;height:min(78svh,760px);min-height:520px;overflow:hidden;border-top:0}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:slowzoom 18s var(--ease) both}
.phero .shade{background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.7) 30%,rgba(0,0,0,.15) 62%,rgba(0,0,0,.35) 100%),linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 60%)}
.phero .txt{position:absolute;z-index:2;left:0;right:0;bottom:56px}
.phero h1{font-size:clamp(38px,4.6vw,74px);line-height:.98;margin-top:20px;max-width:980px}
.phero h1 .hand{font-size:.74em;margin-top:.16em}
.phero p{color:#C9D0D7;max-width:600px;margin-top:22px;font-size:18px}
.phero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.phero .crumbs{margin-bottom:22px}
@media (max-width:860px){.phero{height:auto;min-height:0}.phero img{position:relative;aspect-ratio:4/3;height:auto}.phero .shade{display:none}.phero .txt{position:relative;bottom:auto;padding-top:22px;padding-bottom:40px}.phero p{font-size:17px}}

/* bloc texte + points */
.intro{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.intro .lead2{font-size:clamp(20px,1.7vw,24px);line-height:1.45;color:#E6EAEE}
.intro .lead2 b{color:var(--cyan);font-weight:800}
.prose p{color:#B5BDC5;font-size:17px;margin-top:16px}
.prose p:first-child{margin-top:0}
.prose a{color:var(--cyan);border-bottom:1px solid rgba(0,175,236,.4)}
@media (max-width:1000px){.intro{grid-template-columns:1fr;gap:28px}}
.items{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.items div{border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:24px 24px 26px}
.items b{display:block;font:400 28px/1 var(--hand);color:var(--cyan)}
.items h3{font-size:20px;line-height:1.15;margin-top:14px}
.items p{color:var(--mute);font-size:15px;margin-top:8px}
@media (max-width:1000px){.items{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.items{grid-template-columns:1fr}}

/* étapes en ligne (pages intérieures) */
.steps6{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.steps6 li{padding:22px 18px 24px;border-right:1px solid var(--line)}
.steps6 li:last-child{border-right:0}
.steps6 b{display:block;font:400 26px/1 var(--hand);color:var(--cyan)}
.steps6 span{display:block;font:900 17px/1.15 var(--sans);margin-top:10px}
.steps6 small{display:block;color:var(--mute);font-size:13.5px;line-height:1.5;margin-top:6px}
@media (max-width:1000px){.steps6{grid-template-columns:1fr 1fr}.steps6 li{border-bottom:1px solid var(--line)}.steps6 li:nth-child(2n){border-right:0}}

/* photos en bande */
.duo{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.duo figure{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.duo figure:first-child{aspect-ratio:auto}
.duo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo figcaption{position:absolute;left:16px;bottom:14px;font:400 22px/1 var(--hand);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8);transform:rotate(-2deg)}
@media (max-width:860px){.duo{grid-template-columns:1fr}.duo figure:first-child{aspect-ratio:4/3}}

/* liens de maillage */
.mesh{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.mesh h4{font:400 12px/1 var(--sans);letter-spacing:.3em;text-transform:lowercase;color:var(--cyan);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{font:500 14px/1 var(--sans);color:#E6EAEE;border:1px solid var(--line2);padding:11px 15px;border-radius:999px;transition:border-color .4s var(--ease),color .4s var(--ease)}
.chips a:hover{border-color:var(--cyan);color:#fff}
@media (max-width:860px){.mesh{grid-template-columns:1fr;gap:26px}}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:800 clamp(17px,1.4vw,20px)/1.3 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";flex:0 0 36px;height:36px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font:400 22px/1 var(--sans);color:var(--cyan);transition:transform .4s var(--ease)}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:#B5BDC5;max-width:820px;padding:0 0 24px}
.two-col{display:grid;grid-template-columns:1fr 1.6fr;gap:56px}
@media (max-width:1000px){.two-col{grid-template-columns:1fr;gap:24px}}

/* cartes de hub / pages liées */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3.4;transition:border-color .6s var(--ease)}
.card:hover{border-color:rgba(0,175,236,.5)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover img{transform:scale(1.04)}
.card .ov{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 22px;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,0))}
.card h3{font-size:clamp(20px,1.7vw,25px);line-height:1.1}
.card p{color:#C9D0D7;font-size:14.5px;margin-top:6px}
.card .go{display:block;margin-top:12px;font:800 13px/1 var(--sans);color:var(--cyan)}
@media (max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* savoir-faire : lien vers la page de la prestation */
.slice .more{display:inline-block;margin-top:18px;font:800 14px/1 var(--sans);color:var(--cyan)}
.slice .tag5{position:absolute;z-index:2;top:16px;left:16px;font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--cyan);padding:7px 10px;border-radius:999px}

/* références : grille élargie */
.refs.r6{grid-template-columns:repeat(6,1fr)}
.refs.r6 div{border-bottom:1px solid var(--line)}
.refs.r6 div:nth-child(6n){border-right:0}
.refs.r6 div:nth-last-child(-n+6){border-bottom:0}
@media (max-width:1100px){.refs.r6{grid-template-columns:repeat(4,1fr)}.refs.r6 div{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}.refs.r6 div:nth-child(4n){border-right:0!important}}
@media (max-width:640px){.refs.r6{grid-template-columns:1fr 1fr}.refs.r6 div:nth-child(2n){border-right:0!important}.refs.r6 div:nth-child(4n+1),.refs.r6 div:nth-child(4n+3){border-right:1px solid var(--line)!important}}

/* ===== formulaire de devis façon PDS : personnes → dates → horaires → lieu → coordonnées ===== */
.nb-val{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:10px 0 4px}
.nb-val b{font:900 clamp(56px,8vw,84px)/1 var(--sans);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.nb-val span{font:400 26px/1 var(--hand);color:var(--cyan)}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:48px;background:transparent;outline:none;cursor:pointer;touch-action:manipulation}
.rng::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cyan) var(--p,0%),rgba(255,255,255,.15) var(--p,0%))}
.rng::-moz-range-track{height:8px;border-radius:4px;background:rgba(255,255,255,.15)}
.rng::-moz-range-progress{height:8px;border-radius:4px;background:var(--cyan)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-13px;border-radius:50%;background:var(--cyan);border:5px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.6);cursor:grab}
.rng::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--cyan);border:5px solid #fff;cursor:grab}
.rng:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:6px}
.nb-bornes{display:flex;justify-content:space-between;font:500 12px/1 var(--sans);letter-spacing:.08em;color:var(--mute)}
.cal{border:1px solid var(--line2);border-radius:12px;padding:14px;background:#000;touch-action:pan-y}
.cal-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-mois{font:800 16px/1 var(--sans);text-transform:capitalize}
.cal-nav{width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.07);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.cal-nav:hover{background:rgba(255,255,255,.15)}
.cal-nav:disabled{opacity:.2;cursor:default}
.cal-jours,.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-jours span{text-align:center;font:500 11px/1 var(--sans);letter-spacing:.1em;color:var(--mute);padding:4px 0 8px}
.cal-j{aspect-ratio:1;min-height:34px;border:0;border-radius:50%;background:transparent;color:#fff;font:500 15px/1 var(--sans);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s}
.cal-j:hover{background:rgba(255,255,255,.1)}
.cal-j:disabled{color:rgba(255,255,255,.2);cursor:default;background:none}
.cal-j.auj{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.cal-j[aria-pressed=true]{background:var(--cyan);color:#000;font-weight:800}
.cal-choix{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:34px;margin-top:12px;font-size:14px;color:var(--mute)}
.puce{display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 13px;border:1px solid rgba(0,175,236,.5);border-radius:999px;background:var(--cyan-soft);color:#fff;font:500 13px/1 var(--sans);cursor:pointer}
.puce:after{content:"×";font-size:16px;opacity:.7}
.lien-flou{display:block;margin:14px auto 0;background:none;border:0;color:var(--mute);font:400 14px/1.4 var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px}
.lien-flou:hover{color:#fff}
.heures{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld select,.fld textarea{font:400 16px/1.3 var(--sans);color:var(--txt);background:#000;border:1px solid var(--line2);border-radius:10px;padding:15px 14px;outline:none;width:100%}
.fld select:focus,.fld textarea:focus{border-color:var(--cyan)}
.fld textarea{min-height:110px;resize:vertical}
.chips-q{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips-q button{font:500 14px/1 var(--sans);color:#E6EAEE;background:transparent;border:1px solid var(--line2);padding:11px 14px;border-radius:999px;cursor:pointer;transition:all .3s var(--ease)}
.chips-q button[aria-pressed=true]{background:var(--cyan-soft);border-color:var(--cyan);color:#fff}
.err{display:none;color:#FF8A8A;font-size:14px;margin-top:14px}
.err.on{display:block}
@media (max-width:520px){.heures{grid-template-columns:1fr 1fr;gap:10px}}

/* article du journal */
.art{max-width:820px}
.art h2{font-size:clamp(26px,2.6vw,38px);margin-top:56px}
.art h2:first-child{margin-top:0}
.art p{color:#C9D0D7;font-size:18px;margin-top:18px;line-height:1.7}
.art a{color:var(--cyan);border-bottom:1px solid rgba(0,175,236,.4)}
.art ul{margin-top:18px;padding-left:0;list-style:none}
.art li{color:#C9D0D7;font-size:17px;padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:12px}
.art li:before{content:"→";color:var(--cyan)}
.art figure{margin-top:36px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.art figure video,.art figure img{width:100%}
.art figcaption{font:500 12px/1.4 var(--sans);letter-spacing:.06em;color:var(--mute);padding:12px 16px;background:var(--bg2)}
.aside{position:sticky;top:110px;border:1px solid var(--line2);border-radius:14px;background:var(--bg2);padding:26px}
.aside h4{font:400 12px/1 var(--sans);letter-spacing:.3em;text-transform:lowercase;color:var(--cyan);margin-bottom:14px}
.aside dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:15px}
.aside dt{color:var(--mute)}
.aside .btn{margin-top:22px}
.artgrid{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start}
@media (max-width:1000px){.artgrid{grid-template-columns:1fr;gap:36px}.aside{position:static}}

/* bandeau maquette */
.mq{background:var(--cyan);color:#000;font:800 12px/1.4 var(--sans);letter-spacing:.04em;text-align:center;padding:8px 16px}
.mq a{text-decoration:underline}
footer .g2{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:32px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
@media (max-width:860px){footer .g2{grid-template-columns:1fr 1fr}}
.mesh4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.mesh4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mesh4{grid-template-columns:1fr}}
.art,.prose,.items p,.faq p{overflow-wrap:anywhere}
.cal-j{aspect-ratio:auto;height:42px;width:42px;min-height:0;justify-self:center}
.art figure video{max-height:620px;object-fit:cover}
/* équipe : 10 personnes, deux rangées de 5 ; « ? » tant que la photo manque */
.crew{grid-template-columns:repeat(5,1fr);gap:28px 18px}
.crew .nophoto{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:50%;margin-bottom:12px;border:2px dashed var(--line2);background:var(--bg2);font:400 clamp(40px,5vw,72px)/1 var(--hand);color:var(--cyan)}
@media (max-width:1000px){.crew{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.crew{grid-template-columns:1fr 1fr}}
.crew .nophoto{margin-bottom:9px}
/* 21 logos : 7 colonnes (3 rangées) sur ordinateur, 3 colonnes (7 rangées) en dessous */
@media (max-width:1100px){.refs.r6{grid-template-columns:repeat(3,1fr)}.refs.r6 div{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}.refs.r6 div:nth-child(3n){border-right:0!important}.refs.r6 div:nth-last-child(-n+3){border-bottom:0!important}}
@media (max-width:640px){.refs.r6 div{height:92px;padding:12px}.refs.r6 img{max-width:84%}}
/* formulaire de devis : champs blancs, texte noir (Marc 15/10, plus lisible) */
.fld input,.fld select,.fld textarea{background:#fff;color:#0A0A0A;border:1px solid #fff;font-weight:500}
.fld input::placeholder,.fld textarea::placeholder{color:#7A828B;opacity:1}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,175,236,.35)}
.fld input::-webkit-calendar-picker-indicator{filter:none}
.fld select{-webkit-appearance:none;appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center}
.fld select option{color:#0A0A0A;background:#fff}

/* ===== V5 (21/10/2026) : réalisations, journal complet, à propos, contact, pages légales ===== */
.hub-h1{font-size:clamp(38px,4.6vw,70px);line-height:1;margin-top:20px}
footer .base a{color:var(--mute);transition:color .4s var(--ease)}
footer .base a:hover{color:#fff}

/* fiche d'identité d'un projet */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2)}
.facts div{padding:22px 24px 24px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts dt{font:400 12px/1 var(--sans);letter-spacing:.3em;text-transform:lowercase;color:var(--cyan)}
.facts dd{font:800 17px/1.35 var(--sans);margin-top:12px;color:#fff}
@media (max-width:1000px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2n){border-right:0}.facts div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:520px){.facts{grid-template-columns:1fr}.facts div{border-right:0;border-bottom:1px solid var(--line)}.facts div:last-child{border-bottom:0}}

.art .lead3{font-size:clamp(20px,1.8vw,25px);line-height:1.5;color:#E6EAEE;margin-top:0}
.art .lead3 b{color:var(--cyan);font-weight:800}
.ticks{list-style:none}
.ticks li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line);color:#E6EAEE;font-size:15.5px;line-height:1.45}
.ticks li:last-child{border-bottom:0}
.ticks li:before{content:"";position:absolute;left:2px;top:15px;width:14px;height:8px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}
.aside .ticks{margin-top:4px}

/* galerie de projet : le nombre de cases suit le nombre de photos */
.gal{display:grid;gap:12px}
.gal figure{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin:0;min-height:240px}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 14px;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0));font:500 13px/1.4 var(--sans);color:#E6EAEE}
@media (hover:hover) and (pointer:fine){.gal figure:hover img{transform:scale(1.035)}}
.gal.g1 figure{aspect-ratio:16/9}
.gal.g2{grid-template-columns:1.5fr 1fr}.gal.g2 figure{aspect-ratio:4/3.2}
.gal.g3{grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;height:clamp(420px,46vw,660px)}.gal.g3 figure:first-child{grid-row:span 2}
.gal.g4{grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:1fr 1fr;height:clamp(440px,46vw,680px)}.gal.g4 figure:first-child{grid-row:span 2}.gal.g4 figure:last-child{grid-column:span 2}
@media (max-width:860px){.gal.g2,.gal.g3,.gal.g4{grid-template-columns:1fr 1fr;grid-template-rows:none;height:auto}.gal figure,.gal.g3 figure:first-child,.gal.g4 figure:first-child,.gal.g4 figure:last-child{grid-row:auto;grid-column:auto;aspect-ratio:4/3;min-height:0}.gal figure:first-child{grid-column:span 2!important}.gal.g3 figure:last-child{grid-column:auto}}
@media (max-width:520px){.gal.g2,.gal.g3,.gal.g4{grid-template-columns:1fr}.gal figure:first-child{grid-column:auto!important}}

/* projet suivant */
.nextcase{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;column-gap:28px;align-items:center;margin-top:64px;padding:18px 18px 18px 18px;border:1px solid var(--line2);border-radius:18px;background:var(--bg2);transition:border-color .5s var(--ease)}
.nextcase img{grid-row:1/4;width:clamp(120px,16vw,220px);aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.nextcase .lbl{align-self:end}
.nextcase b{font:900 clamp(22px,2.4vw,36px)/1.05 var(--sans);letter-spacing:-.02em;margin-top:6px}
.nextcase small{color:var(--mute);font-size:15px;align-self:start;margin-top:6px}
.nextcase i{grid-row:1/4;grid-column:3;width:54px;height:54px;border-radius:50%;background:var(--cyan);color:#000;display:grid;place-items:center;transition:transform .5s var(--ease)}
.nextcase i svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.nextcase i i{display:contents}
@media (hover:hover) and (pointer:fine){.nextcase:hover{border-color:rgba(0,175,236,.55)}.nextcase:hover i{transform:translate(4px,-3px)}}
.nextcase:active{transform:scale(.99)}
@media (max-width:640px){.nextcase{grid-template-columns:96px 1fr;column-gap:16px;padding:12px}.nextcase img{width:96px}.nextcase i{display:none}.nextcase b{font-size:20px}.nextcase small{font-size:13.5px}}

/* filtres (réalisations, journal) */
.ftabs button{font:500 13px/1 var(--sans);color:var(--mute);background:transparent;border:1px solid var(--line2);padding:12px 16px;border-radius:999px;cursor:pointer;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .16s ease-out;min-height:42px}
.ftabs button:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.ftabs button.on{color:#000;background:var(--cyan);border-color:var(--cyan)}
.ftabs button:active{transform:scale(.97)}
@media (max-width:640px){.ftabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px;-webkit-overflow-scrolling:touch}.ftabs::-webkit-scrollbar{display:none}.ftabs button{flex:0 0 auto}}
.is-out{display:none!important}
.fade-in{animation:fadeUp .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* grille des réalisations : rythme irrégulier, la première en grand */
.rgrid{display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(220px,20vw,300px);gap:12px}
.rt{position:relative;grid-column:span 2;border-radius:14px;overflow:hidden;border:1px solid var(--line);transition:border-color .6s var(--ease)}
.rt:nth-child(8n+1){grid-column:span 4;grid-row:span 2}
.rt:nth-child(8n+7),.rt:nth-child(8n+8){grid-column:span 3}
.rt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.rt .ov{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 20px;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,0))}
.rt h3{font-size:clamp(20px,1.8vw,28px);line-height:1.08;margin-top:8px}
.rt:nth-child(8n+1) h3{font-size:clamp(26px,2.8vw,44px)}
.rt p{color:#C9D0D7;font-size:14.5px;margin-top:6px}
.rt .lbl{color:var(--cyan)}
@media (hover:hover) and (pointer:fine){.rt:hover{border-color:rgba(0,175,236,.5)}.rt:hover img{transform:scale(1.04)}}
.rgrid.filtered .rt{grid-column:span 2!important;grid-row:auto!important}
@media (max-width:1000px){.rgrid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.rt,.rt:nth-child(n),.rgrid.filtered .rt{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3.6}.rt:nth-child(8n+1){grid-column:span 2!important;aspect-ratio:16/10}}
@media (max-width:560px){.rgrid{grid-template-columns:1fr}.rt:nth-child(8n+1){grid-column:auto!important;aspect-ratio:4/3.6}}

/* accueil : les réalisations deviennent cliquables */
a.cs{display:block}
.cs .go2{display:inline-block;margin-top:10px;font:800 13px/1 var(--sans);color:var(--cyan);opacity:.0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
a.cs:hover .go2,a.cs:focus-visible .go2{opacity:1;transform:none}
@media (hover:none){.cs .go2{opacity:1;transform:none}}
.cs .ov .go2{display:block}

/* journal : article à la une */
@media (min-width:641px){.jgrid .post.big{grid-column:span 2}.jgrid .post.big .im{aspect-ratio:16/8.4}}
.jgrid.filtered .post.big{grid-column:auto}.jgrid.filtered .post.big .im{aspect-ratio:4/3}

/* à propos */
.items.i4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.items.i4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.items.i4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.split figure{border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3.4;margin:0}
.split figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){.split{grid-template-columns:1fr;gap:32px}}

/* contact */
.contact{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:auto auto;gap:12px;margin-top:8px}
.ct{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:16px;background:var(--bg2);padding:26px;transition:border-color .5s var(--ease),transform .16s ease-out}
a.ct:hover{border-color:rgba(0,175,236,.5)}
a.ct:active{transform:scale(.985)}
.ct .lbl{color:var(--cyan)}
.ct b{font:900 clamp(20px,1.9vw,28px)/1.1 var(--sans);letter-spacing:-.02em;overflow-wrap:anywhere}
.ct small{color:var(--mute);font-size:14.5px}
.ct.big{grid-row:span 1;background:var(--cyan);border-color:var(--cyan);color:#000}
.ct.big .lbl,.ct.big small{color:rgba(0,0,0,.7)}
.ct.big b{font-size:clamp(26px,2.6vw,40px)}
.ct.map{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;padding:0;overflow:hidden}
.ct.map iframe{width:100%;height:100%;min-height:340px;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.6) contrast(.95)}
.ct.map .addr{padding:30px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.ct.map .addr a{margin-top:8px;font:800 14px/1 var(--sans);color:var(--cyan)}
@media (max-width:1000px){.contact{grid-template-columns:1fr 1fr}.ct.big{grid-column:1/-1}.ct.map{grid-template-columns:1fr}.ct.map iframe{min-height:260px}}
@media (max-width:560px){.contact{grid-template-columns:1fr}}

/* pages légales et 404 */
.legal{margin-top:40px}
.legal mark{background:var(--cyan-soft);color:var(--cyan);padding:1px 6px;border-radius:4px}
.e404{min-height:calc(100svh - 76px - 220px);display:flex;align-items:center;padding:80px 0}

@media (prefers-reduced-motion:reduce){.fade-in{animation:none}.rt img,.gal img,.card img{transition:none}}

/* liens du maillage dans les textes : visibles sans casser la lecture */
.lead2 a,.items p a,.art p a,.prose a{color:inherit;border-bottom:1px solid rgba(0,175,236,.55);transition:color .3s var(--ease),border-color .3s var(--ease)}
.lead2 b a{color:var(--cyan)}
@media (hover:hover) and (pointer:fine){.lead2 a:hover,.items p a:hover,.art p a:hover,.prose a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}}
.duo.trio{grid-template-columns:repeat(3,1fr)}
.duo.trio figure,.duo.trio figure:first-child{aspect-ratio:2/1}
@media (max-width:860px){.duo.trio{grid-template-columns:1fr}}