/* ============================================================
   Impress'ions — feuille de style du site
   Thème « Nuit néon » : bleu nuit tiré du #000066, magenta et cyan de la charte
   ============================================================ */
:root{
  --bg-deep:#05051A; --bg:#0A0A2E; --surface:#15154A; --navy:#000066; --lav:#D6C3FC;
  --text:#F3F1FF; --text-2:#CBC8EA; --muted:#A6A3CB; --text-3:#7D7AA8;
  --line:rgba(214,195,252,.14); --line-2:rgba(214,195,252,.24);
  --lav-rgb:214,195,252; --bg-deep-rgb:5,5,26; --text-rgb:243,241,255;
  --display:'Poppins','Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif','Times New Roman',Georgia,serif;
  --sans:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.8,.2,1);
  /* Couleur principale (p) : boutons, néons, fil lumineux — secondaire (s) : repères, icônes — t : mots en italique */
  --p:#C30CE5; --p-top:#D22BF2; --p-l:#E27BFA; --p-rgb:195,12,229; --on-p:#FFFFFF; --neon-core:#FFEFFF;
  --s:#00C9FF; --s-l:#8BE6FF; --s-rgb:0,201,255; --t:#D6C3FC; --sim:#E040FB;
}
/* ---------- Palettes ---------- */
[data-theme="cyan"]{--p:#00C9FF; --p-top:#5CDCFF; --p-l:#8BE6FF; --p-rgb:0,201,255; --on-p:#04122A; --neon-core:#F0FBFF;
  --s:#A9C2FF; --s-l:#D2DEFF; --s-rgb:169,194,255; --t:#9FE6FF; --sim:#00C9FF}
[data-theme="chaud"]{--p:#FFC779; --p-top:#FFE2B5; --p-l:#FFD9A3; --p-rgb:255,190,105; --on-p:#0A0A2E; --neon-core:#FFF6E8;
  --s:#00C9FF; --s-l:#8BE6FF; --s-rgb:0,201,255; --t:#FFDDB0; --sim:#FFD9A0}
[data-theme="violet"]{--p:#6E55FF; --p-top:#8C78FF; --p-l:#B2A4FF; --p-rgb:118,94,255; --on-p:#FFFFFF; --neon-core:#F3F0FF;
  --s:#00C9FF; --s-l:#8BE6FF; --s-rgb:0,201,255; --t:#C9BEFF; --sim:#8B6CFF}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px; background:var(--bg-deep)}
body{margin:0; background:var(--bg-deep); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img,video,svg{max-width:100%; display:block}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--s); outline-offset:3px; border-radius:4px}
::selection{background:rgba(var(--p-rgb),.55); color:var(--on-p)}
.wrap{max-width:1240px; margin:0 auto; padding-inline:var(--gutter)}
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:fixed; left:12px; top:-60px; z-index:100; background:var(--p); color:var(--on-p); padding:10px 16px; border-radius:10px}
.skip:focus{top:12px}

/* ---------- Verre liquide ---------- */
.glass{position:relative; isolation:isolate; background:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 55%, rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 22px rgba(255,255,255,.03), 0 14px 34px rgba(0,0,0,.3)}
.liquid .glass.bar{backdrop-filter:url(#liquidGlass) blur(14px) saturate(170%)}
.glass::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(180px circle at var(--mx,30%) var(--my,0%), rgba(255,255,255,.18), transparent 60%)}
.glass::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1px;
  background:linear-gradient(140deg, rgba(255,255,255,.5), rgba(255,255,255,0) 35%, rgba(var(--p-rgb),.35) 70%, rgba(var(--s-rgb),.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.squish{transition:transform .55s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s, box-shadow .3s}
.squish:hover{transform:scale(1.045)}
.squish:active{transform:scale(.94,.9); transition-duration:.15s}

/* ---------- Néon (texte) ---------- */
.neon{color:var(--neon-core); text-shadow:0 0 .04em #fff, 0 0 .12em rgba(var(--p-rgb),.95), 0 0 .3em rgba(var(--p-rgb),.7), 0 0 .7em rgba(var(--p-rgb),.45)}
.neon-c{color:#EFFBFF; text-shadow:0 0 .04em #fff, 0 0 .12em rgba(var(--s-rgb),.95), 0 0 .3em rgba(var(--s-rgb),.65), 0 0 .7em rgba(var(--s-rgb),.4)}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1} 20%,24%,55%{opacity:.25}}
@keyframes powerOn{0%{opacity:0} 8%{opacity:.8} 10%{opacity:.1} 18%{opacity:.9} 20%{opacity:.2} 34%{opacity:1} 36%{opacity:.5} 40%,100%{opacity:1}}

/* ---------- Intro (allumage) ---------- */
.intro{position:fixed; inset:0; z-index:200; background:var(--bg-deep); display:grid; place-items:center; transition:opacity .7s var(--ease), visibility .7s}
.intro svg{width:120px; height:120px; overflow:visible}
.intro circle{fill:none; stroke:var(--p); stroke-width:2.2; filter:drop-shadow(0 0 6px rgba(var(--p-rgb),.9)) drop-shadow(0 0 18px rgba(var(--p-rgb),.6)); animation:powerOn 1s steps(1,end) both}
.intro path{fill:none; stroke:var(--s); stroke-width:2.2; filter:drop-shadow(0 0 6px rgba(var(--s-rgb),.9)) drop-shadow(0 0 16px rgba(var(--s-rgb),.6)); animation:powerOn .9s .25s steps(1,end) both}
.intro.done{opacity:0; visibility:hidden}
.no-intro .intro{display:none}

/* ---------- Header ---------- */
.hdr{position:fixed; top:calc(14px + env(safe-area-inset-top,0px)); left:0; right:0; z-index:60; padding-inline:clamp(10px,3vw,32px); pointer-events:none}
.hdr .bar{pointer-events:auto; max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; min-height:68px; padding:10px 10px 10px 16px; border-radius:40px; transition:min-height .5s var(--ease), max-width .6s var(--ease), background .4s}
.hdr.scrolled .bar{min-height:58px; max-width:1100px; background:linear-gradient(135deg, rgba(10,10,46,.72), rgba(10,10,46,.55))}
.brand{display:flex; align-items:center; gap:11px}
.brand .mark{width:40px; height:40px; flex-shrink:0}
.brand .mark svg{border-radius:50%; box-shadow:0 0 0 1px rgba(var(--lav-rgb),.35), 0 0 18px rgba(var(--s-rgb),.18)}
.brand .word{display:block; width:136px; color:var(--text); line-height:0}
.brand .word svg{width:100%; height:auto}
.nav{display:flex; gap:24px; font-size:15px; color:var(--text-2)}
.nav a{position:relative; padding:6px 0; transition:color .25s}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--p); box-shadow:0 0 8px rgba(var(--p-rgb),.8); transition:right .35s var(--ease)}
.nav a:hover,.nav a.on{color:var(--text)} .nav a:hover::after,.nav a.on::after{right:0}
.hdr-right{display:flex; align-items:center; gap:8px}
.tel{display:inline-flex; align-items:center; gap:10px; padding:0 16px; border-radius:40px; font-size:15px; min-height:44px; font-weight:500}
.tel svg{width:16px; height:16px; stroke:var(--s-l); fill:none; stroke-width:1.7}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; border-radius:60px; font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:.01em; cursor:pointer; border:0; white-space:nowrap}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.btn-mag{background:linear-gradient(180deg, var(--p-top), var(--p)); color:var(--on-p); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(0,0,0,.25), 0 10px 30px rgba(var(--p-rgb),.35), 0 0 0 1px rgba(var(--p-rgb),.5)}
.btn-mag:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(0,0,0,.2), 0 12px 40px rgba(var(--p-rgb),.55), 0 0 0 1px rgba(var(--p-rgb),.7)}
.btn-ghost{color:var(--text)}
.btn-sm{min-height:44px; padding:0 20px; font-size:14px}
.menu-btn{display:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; place-items:center}
.menu-btn span{display:block; width:18px; height:1.5px; background:var(--text); position:relative; transition:transform .3s}
.menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--text); transition:transform .3s, top .3s}
.menu-btn span::before{top:-6px} .menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{top:0; transform:rotate(45deg)} .menu-open .menu-btn span::after{top:0; transform:rotate(-45deg)}
.mnav{display:none; flex-basis:100%; flex-direction:column; padding:8px 8px 14px}
.mnav a{padding:14px 8px; border-bottom:1px solid var(--line); font-family:var(--display); font-weight:500; font-size:18px}
.mnav a:last-child{border:0}
.menu-open .mnav{display:flex}
.hdr.menu-open .bar{background:rgba(10,10,46,.96); border-radius:28px}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:min(100svh,980px); display:flex; align-items:center; overflow:hidden; background:var(--bg)}
.hero-bg{position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 74% 48%, #17175A 0%, #0C0C36 45%, var(--bg-deep) 85%)}
.hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(var(--bg-deep-rgb),.85) 0%, rgba(var(--bg-deep-rgb),.35) 42%, rgba(var(--bg-deep-rgb),0) 60%), linear-gradient(180deg, rgba(var(--bg-deep-rgb),0) 70%, var(--bg-deep) 100%)}
.hero::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-art{position:absolute; z-index:1; right:max(2vw, calc((100vw - 1240px) / 2 - 40px)); top:50%; width:min(34vw,520px); aspect-ratio:1; transform:translate3d(var(--px,0px), calc(-50% + var(--py,0px)), 0); transition:transform 1.2s var(--ease)}
.ha{position:relative; width:100%; height:100%; overflow:visible}
.halo{position:absolute; left:-32%; top:-32%; width:164%; height:164%; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(closest-side, rgba(var(--p-rgb),.36) 0%, rgba(var(--p-rgb),.16) 38%, rgba(var(--p-rgb),.05) 62%, transparent 80%);
  transform:translate3d(calc(var(--px,0px) * -1.6), calc(var(--py,0px) * -1.6), 0); transition:transform 1.2s var(--ease)}
.halo.hc{left:2%; top:-6%; width:60%; height:60%; background:radial-gradient(closest-side, rgba(0,201,255,.28), rgba(0,201,255,.06) 55%, transparent 80%)}
.ha .ring-lit,.ha .ring-core,.ha .face-lit,.ha .face-halo{opacity:0}
.loaded .ha .ring-lit,.loaded .ha .ring-core{animation:powerOn 1.3s .1s steps(1,end) both, hiccup 14s 4s infinite}
.loaded .ha .face-lit{animation:powerOn 1s .75s steps(1,end) both}
.loaded .ha .face-halo{animation:haloSoft 1.8s .85s ease both}
.loaded .halo{animation:haloIn 2s .5s ease both, breathe 7s 2.6s ease-in-out infinite alternate}
@keyframes haloIn{from{opacity:0} to{opacity:1}}
@keyframes haloSoft{from{opacity:0} to{opacity:.6}}
@keyframes breathe{from{opacity:1} to{opacity:.72}}
@keyframes hiccup{0%,92%,100%{opacity:1} 92.6%{opacity:.3} 93.2%{opacity:1} 93.8%{opacity:.45} 94.4%{opacity:1}}
.face-halo{opacity:.6}
.hero .wrap{position:relative; z-index:3; width:100%; padding-top:clamp(120px,15vh,160px); padding-bottom:clamp(80px,11vh,120px)}
.h1-kicker{display:flex; align-items:center; gap:12px; font-family:var(--sans); font-size:clamp(13px,1.05vw,15px); font-weight:500; letter-spacing:.06em; text-transform:uppercase; line-height:1.4; color:var(--s-l); margin-bottom:26px; opacity:0; transition:opacity 1s .2s}
.h1-kicker::before{content:""; width:28px; height:1.5px; background:var(--s); box-shadow:0 0 8px rgba(var(--s-rgb),.9)}
.loaded .h1-kicker{opacity:1}
.hero h1{font-family:var(--display); font-weight:700; font-size:clamp(46px,min(8vw,12.5vh),124px); line-height:1; letter-spacing:-.035em; margin:0 0 34px}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.06em}
.hero h1 .ln > span{display:inline-block; transform:translateY(105%); transition:transform 1.1s var(--ease)}
.loaded .hero h1 .ln > span{transform:none}
.loaded .hero h1 .ln:nth-child(3) > span{transition-delay:.12s}
.rot{position:relative; display:inline-grid !important; font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; padding-right:.12em}
.rot i{grid-area:1/1; font-style:italic; opacity:0; transform:translateY(55%); transition:transform .8s cubic-bezier(.7,0,.2,1), opacity .5s}
.rot i.on{opacity:1; transform:none; animation:flicker 1.6s .35s both}
.rot i.out{opacity:0; transform:translateY(-55%)}
.hero-foot{display:grid; grid-template-columns:minmax(0,1fr); gap:30px; max-width:640px; opacity:0; transform:translateY(16px); transition:opacity 1s .6s, transform 1s .6s}
.loaded .hero-foot{opacity:1; transform:none}
.hero-foot p{margin:0; max-width:48ch; color:var(--text-2); font-size:clamp(16px,1.35vw,19px); font-weight:400}
.ctas{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.proofs{display:flex; flex-wrap:wrap; gap:10px 22px; margin:0; padding:0; list-style:none; font-size:14px; color:var(--muted)}
.proofs li{display:flex; align-items:center; gap:9px}
.proofs li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--s); box-shadow:0 0 8px var(--s)}
.scroll-cue{position:absolute; right:var(--gutter); bottom:34px; z-index:3; width:1.5px; height:64px; background:var(--line); overflow:hidden}
.scroll-cue::after{content:""; position:absolute; left:0; top:-40%; width:100%; height:40%; background:var(--p); box-shadow:0 0 8px var(--p); animation:cue 2.4s infinite cubic-bezier(.6,0,.4,1)}
@keyframes cue{to{top:100%}}
.lens{position:absolute; z-index:2; width:clamp(150px,18vw,260px); aspect-ratio:1; border-radius:50%; left:0; top:0; pointer-events:none; will-change:transform;
  transform:translate3d(var(--lx,60vw),var(--ly,30vh),0) translate(-50%,-50%) scale(var(--ls,1),var(--ls2,1))}
.lens.glass{background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 60%, rgba(var(--s-rgb),.05));
  -webkit-backdrop-filter:blur(1.5px) saturate(160%) brightness(1.2); backdrop-filter:blur(1.5px) saturate(160%) brightness(1.2)}
.liquid .lens.glass{backdrop-filter:url(#liquidLens) blur(1px) saturate(150%) brightness(1.15)}

/* ---------- Bandeau clients ---------- */
.clients{padding:30px 0 22px; border-block:1px solid var(--line); overflow:hidden; position:relative}
.clients p{margin:0 0 18px; text-align:center; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.marquee{display:flex; width:max-content; animation:marq 60s linear infinite}
.clients:hover .marquee{animation-play-state:paused}
.marquee ul{display:flex; align-items:center; margin:0; padding:0; list-style:none}
.marquee li{padding:0 clamp(26px,3.2vw,50px); display:flex; align-items:center; height:84px}
.lg{position:relative; display:block; width:calc(var(--w) * var(--k,1)); height:calc(var(--h) * var(--k,1)); cursor:default}
.lg::before{content:""; position:absolute; inset:-14px -18px; border-radius:16px; background:#fff; opacity:0; transform:scale(.9); transition:opacity .35s var(--ease), transform .45s var(--ease); box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.4)}
.lg img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .35s var(--ease)}
.lg .w{opacity:.62}
.lg .c{opacity:0}
.marquee li:hover .lg::before{opacity:1; transform:none}
.marquee li:hover .w{opacity:0}
.marquee li:hover .c{opacity:1}
.clients::before,.clients::after{content:""; position:absolute; top:0; bottom:0; width:12vw; z-index:2; pointer-events:none}
.clients::before{left:0; background:linear-gradient(90deg, var(--bg-deep), transparent)}
.clients::after{right:0; background:linear-gradient(270deg, var(--bg-deep), transparent)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Structure des sections + fil lumineux ---------- */
.flow{position:relative}
.pipe{position:absolute; left:calc(var(--gutter) / 2); top:0; bottom:0; width:1.5px; background:var(--line); pointer-events:none; z-index:1}
.pipe-fill{position:absolute; top:0; left:0; width:1.5px; height:0; background:linear-gradient(var(--p), var(--s) 50%, var(--p)); background-size:100% 1600px; box-shadow:0 0 10px rgba(var(--p-rgb),.8), 0 0 22px rgba(var(--p-rgb),.35)}
.node{position:absolute; left:calc(var(--gutter) / 2 - 5px); width:11.5px; height:11.5px; border-radius:50%; border:1.5px solid var(--line-2); background:var(--bg-deep); transition:border-color .5s, background .5s, box-shadow .5s; z-index:2}
.node.lit{border-color:#fff; background:var(--p); box-shadow:0 0 0 5px rgba(var(--p-rgb),.18), 0 0 16px rgba(var(--p-rgb),.9)}
section{position:relative}
.sec{padding-block:clamp(80px,9vw,130px)}
.kicker{font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--s-l); margin:0 0 20px; display:flex; align-items:center; gap:12px}
.kicker::before{content:""; width:28px; height:1.5px; background:var(--s); box-shadow:0 0 8px rgba(var(--s-rgb),.9)}
h2{font-family:var(--display); font-weight:700; font-size:clamp(36px,5vw,72px); line-height:1.02; letter-spacing:-.032em; margin:0 0 24px; max-width:17ch}
h2 em,.em{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; color:var(--t)}
h2 em.neon{color:var(--neon-core)}
.lead{color:var(--muted); font-size:clamp(17px,1.3vw,19px); max-width:54ch; margin:0}
.head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px 60px; flex-wrap:wrap; margin-bottom:clamp(40px,5vw,64px)}
.head > div:first-child{flex:1 1 540px; min-width:0}
.head > .lead{flex:0 1 400px}
.rv{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ---------- Solutions ---------- */
.sol-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.sol{position:relative; border-radius:28px; overflow:hidden; min-height:440px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; isolation:isolate; border:1px solid var(--line); background:var(--surface); transition:border-color .5s, box-shadow .5s, transform .6s var(--ease)}
.sol .ph{position:absolute; inset:0; z-index:-2}
.sol .ph img{width:100%; height:100%; object-fit:cover; filter:saturate(.7) brightness(.55); transform:scale(1.04); transition:transform 1.2s var(--ease), filter .8s}
.sol::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(var(--bg-deep-rgb),.15) 0%, rgba(var(--bg-deep-rgb),.55) 45%, rgba(var(--bg-deep-rgb),.96) 100%)}
.sol:hover{border-color:rgba(var(--p-rgb),.6); box-shadow:0 0 0 1px rgba(var(--p-rgb),.3), 0 20px 60px rgba(var(--p-rgb),.18); transform:translateY(-4px)}
.sol:nth-child(even):hover{border-color:rgba(var(--s-rgb),.6); box-shadow:0 0 0 1px rgba(var(--s-rgb),.3), 0 20px 60px rgba(var(--s-rgb),.16)}
.sol:hover .ph img{transform:scale(1.1); filter:saturate(1) brightness(.72)}
.sol .ico{position:absolute; top:24px; left:24px; width:58px; height:58px; border-radius:18px; display:grid; place-items:center}
.sol .ico svg{width:30px; height:30px; fill:none; stroke:var(--s-l); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.sol:nth-child(odd) .ico svg{stroke:var(--p-l)}
.draw *{stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1)}
.in .draw *,.draw.in *{stroke-dashoffset:0}
.sol .num{position:absolute; top:30px; right:28px; font-family:var(--display); font-size:13px; color:var(--text-3); letter-spacing:.1em}
.sol h3{font-family:var(--display); font-weight:600; font-size:clamp(22px,1.8vw,26px); line-height:1.15; letter-spacing:-.02em; margin:0 0 10px}
.sol p{margin:0 0 16px; color:var(--text-2); font-size:15.5px; line-height:1.55}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.tags li{font-size:12.5px; padding:5px 11px; border-radius:30px; border:1px solid var(--line-2); color:var(--text-2); background:rgba(var(--bg-deep-rgb),.35)}

/* ---------- Simulateur ---------- */
.sim{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr); gap:0; border-radius:34px; overflow:hidden; padding:0}
.stage{position:relative; container-type:inline-size; min-height:100%; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:#0b0b26}
.scene{position:relative; width:100%; aspect-ratio:16/11; flex-shrink:0}
.skyline{position:absolute; left:-2%; right:-2%; bottom:92%; height:30%; background:#0E0E33; clip-path:polygon(0 100%,0 62%,3% 62%,3% 50%,4.4% 50%,4.4% 62%,9% 62%,14% 36%,19% 62%,24% 62%,24% 44%,31% 44%,31% 30%,32.6% 30%,32.6% 44%,38% 44%,38% 58%,44% 58%,49% 34%,54% 58%,60% 58%,60% 40%,61.4% 40%,61.4% 28%,63% 28%,63% 40%,70% 40%,70% 54%,76% 54%,81% 26%,86% 54%,92% 54%,92% 46%,100% 46%,100% 100%)}
.skyline::after{content:""; position:absolute; inset:0; background:linear-gradient(#FFD58A,#FFD58A) 6% 78%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 13% 70%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 17% 84%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 27% 64%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 34% 80%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 46% 74%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 51% 66%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 57% 86%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 66% 70%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 73% 82%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 80% 62%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 84% 76%/.6cqw .8cqw no-repeat, linear-gradient(#FFD58A,#FFD58A) 95% 72%/.6cqw .8cqw no-repeat; opacity:.5}
.jour .sky{background:linear-gradient(180deg, #8FC8EE 0%, #CFE8F7 70%, #EAF4FB 100%)}
.jour .stars,.jour .moon{opacity:0}
.jour .skyline{background:#A7BFD3} .jour .skyline::after{opacity:0}
@property --brick-1{syntax:'<color>'; inherits:true; initial-value:#4E2628}
@property --brick-2{syntax:'<color>'; inherits:true; initial-value:#45211F}
@property --brick-3{syntax:'<color>'; inherits:true; initial-value:#5A2C2B}
@property --mortar{syntax:'<color>'; inherits:true; initial-value:#2A1719}
@property --render{syntax:'<color>'; inherits:true; initial-value:#2E2D3F}
@property --clad-1{syntax:'<color>'; inherits:true; initial-value:#1E2029}
@property --clad-2{syntax:'<color>'; inherits:true; initial-value:#121319}
@property --stone{syntax:'<color>'; inherits:true; initial-value:#34344A}
@property --pipe{syntax:'<color>'; inherits:true; initial-value:#23232F}
@property --frame{syntax:'<color>'; inherits:true; initial-value:#2E3140}
@property --curtain{syntax:'<color>'; inherits:true; initial-value:#B8653A}
@property --fascia{syntax:'<color>'; inherits:true; initial-value:#14161D}
@property --al{syntax:'<color>'; inherits:true; initial-value:#1A1C23}
@property --riser{syntax:'<color>'; inherits:true; initial-value:#23232E}
@property --steel{syntax:'<color>'; inherits:true; initial-value:#8C92A6}
@property --int-top{syntax:'<color>'; inherits:true; initial-value:#FFD495}
@property --int-bot{syntax:'<color>'; inherits:true; initial-value:#A2603A}
@property --shelf{syntax:'<color>'; inherits:true; initial-value:#5B3522}
@property --pend{syntax:'<color>'; inherits:true; initial-value:#2A2A33}
@property --prod-1{syntax:'<color>'; inherits:true; initial-value:#C9824F}
@property --prod-2{syntax:'<color>'; inherits:true; initial-value:#E0A56B}
@property --prod-3{syntax:'<color>'; inherits:true; initial-value:#9C5A3A}
@property --glass-tint{syntax:'<color>'; inherits:true; initial-value:rgba(10,10,30,.08)}
@property --nb-1{syntax:'<color>'; inherits:true; initial-value:#1C1B31}
@property --nb-2{syntax:'<color>'; inherits:true; initial-value:#211E36}
@property --nb-win{syntax:'<color>'; inherits:true; initial-value:#F2B66D}
@property --nb-win2{syntax:'<color>'; inherits:true; initial-value:#0E1030}
@property --pave-1{syntax:'<color>'; inherits:true; initial-value:#1B1B31}
@property --pave-2{syntax:'<color>'; inherits:true; initial-value:#0C0C1C}
@property --joint{syntax:'<color>'; inherits:true; initial-value:rgba(255,255,255,.05)}
@property --curb{syntax:'<color>'; inherits:true; initial-value:#2A2A42}
@property --pot{syntax:'<color>'; inherits:true; initial-value:#2A2A36}
@property --leaf-1{syntax:'<color>'; inherits:true; initial-value:#1D3B2E}
@property --leaf-2{syntax:'<color>'; inherits:true; initial-value:#255040}
@property --post{syntax:'<color>'; inherits:true; initial-value:#15151E}
@property --lamp-bulb{syntax:'<color>'; inherits:true; initial-value:#FFF1D0}
@property --up-glass{syntax:'<color>'; inherits:true; initial-value:#0B0E26}
@property --up-hl{syntax:'<number>'; inherits:true; initial-value:0.04}
@property --glass-hl{syntax:'<number>'; inherits:true; initial-value:0.10}
@property --cone{syntax:'<number>'; inherits:true; initial-value:0.45}
@property --bulb{syntax:'<number>'; inherits:true; initial-value:1}
@property --wet{syntax:'<number>'; inherits:true; initial-value:0.34}
@property --vign{syntax:'<number>'; inherits:true; initial-value:0.55}
@property --lamp{syntax:'<number>'; inherits:true; initial-value:0.55}
.stage{--brick-1:#4E2628; --brick-2:#45211F; --brick-3:#5A2C2B; --mortar:#2A1719; --render:#2E2D3F; --clad-1:#1E2029; --clad-2:#121319; --stone:#34344A; --pipe:#23232F; --frame:#2E3140; --curtain:#B8653A; --fascia:#14161D; --al:#1A1C23; --riser:#23232E; --steel:#8C92A6; --int-top:#FFD495; --int-bot:#A2603A; --shelf:#5B3522; --pend:#2A2A33; --prod-1:#C9824F; --prod-2:#E0A56B; --prod-3:#9C5A3A; --glass-tint:rgba(10,10,30,.08); --nb-1:#1C1B31; --nb-2:#211E36; --nb-win:#F2B66D; --nb-win2:#0E1030; --pave-1:#1B1B31; --pave-2:#0C0C1C; --joint:rgba(255,255,255,.05); --curb:#2A2A42; --pot:#2A2A36; --leaf-1:#1D3B2E; --leaf-2:#255040; --post:#15151E; --lamp-bulb:#FFF1D0; --up-glass:#0B0E26; --up-hl:0.04; --glass-hl:0.10; --cone:0.45; --bulb:1; --wet:0.34; --vign:0.55; --lamp:0.55; transition:--brick-1 1.1s ease, --brick-2 1.1s ease, --brick-3 1.1s ease, --mortar 1.1s ease, --render 1.1s ease, --clad-1 1.1s ease, --clad-2 1.1s ease, --stone 1.1s ease, --pipe 1.1s ease, --frame 1.1s ease, --curtain 1.1s ease, --fascia 1.1s ease, --al 1.1s ease, --riser 1.1s ease, --steel 1.1s ease, --int-top 1.1s ease, --int-bot 1.1s ease, --shelf 1.1s ease, --pend 1.1s ease, --prod-1 1.1s ease, --prod-2 1.1s ease, --prod-3 1.1s ease, --glass-tint 1.1s ease, --nb-1 1.1s ease, --nb-2 1.1s ease, --nb-win 1.1s ease, --nb-win2 1.1s ease, --pave-1 1.1s ease, --pave-2 1.1s ease, --joint 1.1s ease, --curb 1.1s ease, --pot 1.1s ease, --leaf-1 1.1s ease, --leaf-2 1.1s ease, --post 1.1s ease, --lamp-bulb 1.1s ease, --up-glass 1.1s ease, --up-hl 1.1s ease, --glass-hl 1.1s ease, --cone 1.1s ease, --bulb 1.1s ease, --wet 1.1s ease, --vign 1.1s ease, --lamp 1.1s ease}
.stage.jour{--brick-1:#B5613F; --brick-2:#A45636; --brick-3:#C06C47; --mortar:#D9CBB9; --render:#EAE4D8; --clad-1:#4C515E; --clad-2:#3A3E48; --stone:#D8D0C2; --pipe:#6B6F7A; --frame:#F1EEE7; --curtain:#E9E1D2; --fascia:#22252D; --al:#2A2D35; --riser:#3A3D46; --steel:#B9BECB; --int-top:#6F7C8A; --int-bot:#39424E; --shelf:#2B3038; --pend:#1E2026; --prod-1:#7F6A5A; --prod-2:#8E7A68; --prod-3:#6A5A4E; --glass-tint:rgba(150,190,225,.28); --nb-1:#8E857D; --nb-2:#A0968C; --nb-win:#7F97AE; --nb-win2:#6D849B; --pave-1:#A7A7B0; --pave-2:#8A8A94; --joint:rgba(0,0,0,.12); --curb:#C4C4CD; --pot:#4A4A55; --leaf-1:#3F6B4E; --leaf-2:#4E7F5C; --post:#2A2C35; --lamp-bulb:#D9D9E2; --up-glass:#7C97B3; --up-hl:0.3; --glass-hl:0.4; --cone:0; --bulb:0; --wet:0; --vign:0.12; --lamp:0}
.stage *{transition:background-color 1s, color 1s, opacity 1s, box-shadow 1s, filter 1s}
.sky{position:absolute; inset:0; background:linear-gradient(180deg, #07072A 0%, #151552 60%, #2A1850 100%)}
.stars{position:absolute; inset:0 0 50% 0; background-image:radial-gradient(1.5px 1.5px at 12% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 47% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 66% 6%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 84% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 5% 7%, #fff 50%, transparent 51%); opacity:.7}
.moon{position:absolute; right:8%; top:5%; width:5cqw; height:5cqw; border-radius:50%; background:#F4F1FF; box-shadow:0 0 30px rgba(255,255,255,.5), inset -1.2cqw -.4cqw 0 #d9d4ef}
.fac{position:absolute; inset:0; width:100%; height:100%; display:block}
.f-brique .m-enduit,.f-brique .m-bardage,.f-enduit .m-brique,.f-enduit .m-bardage,.f-bardage .m-brique,.f-bardage .m-enduit{display:none}
.fac .win-lit{fill:url(#fint)} .fac .win-dark{fill:#0B0E26} .jour .fac .win-lit,.jour .fac .win-dark{fill:#7C97B3}
.band{position:absolute; left:12.5%; width:75%; top:34.4%; height:12.4%; display:grid; place-items:center; z-index:2}
.sign{position:relative; display:grid; place-items:center; max-width:100%; white-space:nowrap; line-height:1}
.sign-txt{display:block; font-size:var(--fs,8cqw); transition:none}
.ft-moderne .sign-txt{font-family:var(--display); font-weight:700; letter-spacing:.02em}
.ft-elegante .sign-txt{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0}
.ft-script .sign-txt{font-family:'Yellowtail','Brush Script MT',cursive; font-weight:400}
/* néon */
.st-neon .sign-txt{color:#fff; text-shadow:0 0 .03em #fff, 0 0 .1em var(--sc), 0 0 .25em var(--sc), 0 0 .55em var(--sc), 0 0 1.1em var(--sc)}
.jour.st-neon .sign-txt{color:var(--sc); text-shadow:0 .03em .04em rgba(0,0,0,.35); opacity:.95}
.st-neon .sign::before{content:""; position:absolute; left:-4%; right:-4%; top:50%; height:1px; background:rgba(255,255,255,.08)}
/* lettres boîtier */
.st-boitier .sign-txt{color:#fff; text-shadow:.012em .012em 0 #222, .024em .024em 0 #1a1a1a, .036em .036em 0 #141414, .048em .048em 0 #101010, 0 0 .25em var(--sc), 0 0 .6em var(--sc), 0 0 1.2em var(--sc)}
.ft-moderne.st-boitier .sign-txt{text-transform:uppercase}
.jour.st-boitier .sign-txt{color:var(--sc); text-shadow:.012em .012em 0 rgba(0,0,0,.55), .024em .024em 0 rgba(0,0,0,.5), .036em .036em 0 rgba(0,0,0,.45), .06em .08em .08em rgba(0,0,0,.35)}
/* caisson lumineux */
.st-caisson .sign{padding:.9cqw 3.2cqw; border-radius:1cqw; background:linear-gradient(180deg, color-mix(in srgb, var(--sc) 85%, #fff), var(--sc)); box-shadow:0 0 0 .35cqw #1a1a22, 0 0 2cqw var(--sc), 0 0 6cqw color-mix(in srgb, var(--sc) 60%, transparent)}
.st-caisson .sign-txt{color:#fff; text-shadow:0 0 .2em rgba(255,255,255,.6)}
.ft-moderne.st-caisson .sign-txt{text-transform:uppercase}
.jour.st-caisson .sign{background:var(--sc); box-shadow:0 0 0 .35cqw #1a1a22, 0 .6cqw 1.2cqw rgba(0,0,0,.35)}
.jour.st-caisson .sign-txt{text-shadow:none}
.power .sign{animation:powerOn 1.1s steps(1,end)}
/* halo projeté sur le mur */
.wash{position:absolute; left:6%; right:6%; top:18%; height:46%; border-radius:50%; background:radial-gradient(closest-side, var(--sc), transparent); opacity:.32; filter:blur(2.4cqw); mix-blend-mode:screen; pointer-events:none; z-index:1}
.jour .wash{opacity:0}
.vitro{position:absolute; left:11.875%; width:31.25%; top:58.4%; height:4.6%; z-index:2; display:grid; place-items:center; background:rgba(255,255,255,.8); color:#1d1d2b; font-family:var(--display); font-weight:600; font-size:1.15cqw; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; overflow:hidden}
.jour .vitro{background:rgba(255,255,255,.7)}
.reflect{position:absolute; left:12.5%; width:75%; top:82.6%; height:13%; display:grid; place-items:start center; overflow:hidden; opacity:.3; filter:blur(.5cqw); transform:scaleY(-1); pointer-events:none; z-index:2; mix-blend-mode:screen; -webkit-mask:linear-gradient(0deg, #000, transparent 90%); mask:linear-gradient(0deg, #000, transparent 90%)}
.reflect .sign-txt{font-size:calc(var(--fs,8cqw) * .85)}
.jour .reflect{opacity:0}
.stage-badge{position:absolute; left:14px; top:14px; z-index:5; font-size:12px; padding:6px 12px; border-radius:30px; color:var(--text-2); background:rgba(5,5,26,.55)}
.ctrl{padding:clamp(22px,2.4vw,34px); display:flex; flex-direction:column; gap:20px; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0))}
.ctrl label.lbl,.ctrl .lbl{display:block; font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px}
.ctrl input[type=text]{width:100%; min-height:52px; border-radius:16px; border:1px solid var(--line-2); background:rgba(var(--bg-deep-rgb),.5); color:var(--text); font:inherit; font-size:18px; padding:0 16px; outline:none; transition:border-color .3s, box-shadow .3s}
.ctrl input[type=text]:focus{border-color:var(--s); box-shadow:0 0 0 4px rgba(var(--s-rgb),.15)}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg button{min-height:42px; padding:0 15px; border-radius:40px; border:1px solid var(--line-2); background:rgba(var(--bg-deep-rgb),.35); cursor:pointer; font-size:14px; color:var(--text-2); transition:all .3s}
.seg button:hover{border-color:rgba(var(--lav-rgb),.5); color:var(--text)}
.seg button[aria-pressed=true]{background:var(--text); color:var(--bg-deep); border-color:var(--text); font-weight:600}
.sw{display:flex; gap:9px; flex-wrap:wrap}
.sw button{width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.2); cursor:pointer; background:var(--c); box-shadow:0 0 14px color-mix(in srgb, var(--c) 60%, transparent); transition:transform .3s, border-color .3s}
.sw button[aria-pressed=true]{border-color:#fff; transform:scale(1.12)}
.dn{display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; background:none; border:0; padding:0; font-size:15px; color:var(--text-2)}
.dn .track{width:58px; height:32px; border-radius:30px; background:rgba(var(--bg-deep-rgb),.6); border:1px solid var(--line-2); position:relative; transition:background .4s}
.dn .knob{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#F4F1FF; box-shadow:0 0 12px rgba(255,255,255,.7); transition:transform .45s cubic-bezier(.34,1.56,.64,1), background .4s}
.dn[aria-pressed=false] .knob{transform:translateX(26px); background:#FFC94D; box-shadow:0 0 14px rgba(255,201,77,.8)}
.dn[aria-pressed=false] .track{background:rgba(143,200,238,.25)}
.ctrl .note{font-size:13px; color:var(--text-3); margin:0}
.ctrl .row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:flex-end}

/* ---------- Méthode ---------- */
.method{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start}
.m-vis{position:sticky; top:120px; border-radius:28px; padding:10px; overflow:hidden}
.m-vis svg{border-radius:20px}
.steps{display:flex; flex-direction:column}
.step{min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding:24px 0; border-top:1px solid var(--line); opacity:.35; transition:opacity .6s}
.step:first-child{border-top:0}
.step.on{opacity:1}
.step .n{font-family:var(--display); font-weight:600; font-size:14px; letter-spacing:.12em; color:var(--s-l); margin-bottom:12px; display:flex; align-items:center; gap:10px}
.step .n span{color:var(--text-3); font-weight:500}
.step h3{font-family:var(--display); font-weight:700; font-size:clamp(26px,2.6vw,38px); letter-spacing:-.025em; line-height:1.08; margin:0 0 14px}
.step p{margin:0; color:var(--muted); max-width:46ch}
.step .aside{margin-top:18px; display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--text-2); padding:10px 16px; border-radius:30px; align-self:flex-start}
.step .aside::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--p); box-shadow:0 0 10px var(--p)}
.step-vis{display:none}
/* états de l'illustration (même façade que le simulateur) */
.mv{--brick-1:#B5613F; --brick-2:#A45636; --brick-3:#C06C47; --mortar:#D9CBB9; --render:#EAE4D8; --clad-1:#4C515E; --clad-2:#3A3E48; --stone:#D8D0C2; --pipe:#6B6F7A; --frame:#F1EEE7; --curtain:#E9E1D2; --fascia:#22252D; --al:#2A2D35; --riser:#3A3D46; --steel:#B9BECB; --int-top:#6F7C8A; --int-bot:#39424E; --shelf:#2B3038; --pend:#1E2026; --prod-1:#7F6A5A; --prod-2:#8E7A68; --prod-3:#6A5A4E; --glass-tint:rgba(150,190,225,.28); --nb-1:#8E857D; --nb-2:#A0968C; --nb-win:#7F97AE; --nb-win2:#6D849B; --pave-1:#A7A7B0; --pave-2:#8A8A94; --joint:rgba(0,0,0,.12); --curb:#C4C4CD; --pot:#4A4A55; --leaf-1:#3F6B4E; --leaf-2:#4E7F5C; --post:#2A2C35; --lamp-bulb:#D9D9E2; --up-glass:#7C97B3; --up-hl:0.3; --glass-hl:0.4; --cone:0; --bulb:0; --wet:0; --vign:0.12; --lamp:0; --m-sky1:#8FC3E8; --m-sky2:#D5ECF8; display:block; width:100%; height:auto; border-radius:inherit}
.mv.s5{--brick-1:#4E2628; --brick-2:#45211F; --brick-3:#5A2C2B; --mortar:#2A1719; --render:#2E2D3F; --clad-1:#1E2029; --clad-2:#121319; --stone:#34344A; --pipe:#23232F; --frame:#2E3140; --curtain:#B8653A; --fascia:#14161D; --al:#1A1C23; --riser:#23232E; --steel:#8C92A6; --int-top:#FFD495; --int-bot:#A2603A; --shelf:#5B3522; --pend:#2A2A33; --prod-1:#C9824F; --prod-2:#E0A56B; --prod-3:#9C5A3A; --glass-tint:rgba(10,10,30,.08); --nb-1:#1C1B31; --nb-2:#211E36; --nb-win:#F2B66D; --nb-win2:#0E1030; --pave-1:#1B1B31; --pave-2:#0C0C1C; --joint:rgba(255,255,255,.05); --curb:#2A2A42; --pot:#2A2A36; --leaf-1:#1D3B2E; --leaf-2:#255040; --post:#15151E; --lamp-bulb:#FFF1D0; --up-glass:#0B0E26; --up-hl:0.04; --glass-hl:0.10; --cone:0.45; --bulb:1; --wet:0.34; --vign:0.55; --lamp:0.55; --m-sky1:#06061E; --m-sky2:#16144A}
.mv text{font-family:var(--display); font-weight:700}
.mv .bp,.mv .grid,.mv .dim,.mv .pen,.mv .swatch,.mv .doc,.mv .bench,.mv .gear,.mv .fix,.mv .ladder,.mv .up,.mv .badge,.mv .stars,.mv .lamp{opacity:0; transition:opacity .8s var(--ease), transform .9s var(--ease)}
.mv .lt{transition:transform 1.1s var(--ease)}
.mv .letters{fill:transparent; stroke:var(--s-l); stroke-width:3; stroke-dasharray:14 10; transition:fill 1s, stroke 1s, filter 1s}
.mv .letters-b{fill:#15171E; opacity:0; transition:opacity .8s}
.s1 .bp{opacity:.5} .s1 .grid,.s1 .dim,.s1 .pen,.s1 .swatch{opacity:1}
.s2 .bp{opacity:.3} .s2 .doc{opacity:1}
.mv .doc{transform:translate(60px,30px)} .s2 .doc{transform:none}
.mv .stamp{transform-box:fill-box; transform-origin:center; opacity:0}
.s2 .stamp{animation:stamp .5s .5s both}
@keyframes stamp{0%{opacity:0; transform:scale(1.8)} 100%{opacity:1; transform:scale(1)}}
.s3 .letters,.s4 .letters,.s5 .letters{fill:#ECE9E2; stroke:#C9C6BE; stroke-width:1.5; stroke-dasharray:none}
.s3 .letters-b,.s4 .letters-b,.s5 .letters-b{opacity:1}
.s3 .lt{transform:translateY(440px)}
.s3 .bench,.s3 .gear{opacity:1}
.s3 .gear g{animation:spin 6s linear infinite; transform-box:fill-box; transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.s4 .fix,.s4 .ladder,.s4 .up{opacity:1}
.s5 .letters{fill:var(--neon-core); stroke:var(--neon-core); filter:drop-shadow(0 0 6px rgba(var(--p-rgb),1)) drop-shadow(0 0 18px rgba(var(--p-rgb),.8)) drop-shadow(0 0 40px rgba(var(--p-rgb),.5))}
.s5 .badge,.s5 .stars,.s5 .lamp{opacity:1}

/* ---------- Réalisations ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px}
.filters button{min-height:44px; padding:0 18px; border-radius:40px; border:1px solid var(--line-2); background:transparent; cursor:pointer; font-size:14.5px; color:var(--text-2); display:inline-flex; align-items:center; gap:8px; transition:all .3s}
.filters button sup{font-size:11px; color:var(--text-3); top:0}
.filters button:hover{border-color:rgba(var(--lav-rgb),.5); color:var(--text)}
.filters button[aria-pressed=true]{background:var(--text); color:var(--bg-deep); border-color:var(--text); font-weight:600}
.filters button[aria-pressed=true] sup{color:var(--bg-deep)}
.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(180px,17vw,250px); grid-auto-flow:dense; gap:14px; margin-top:32px}
.tile{position:relative; border-radius:22px; overflow:hidden; cursor:zoom-in; background:var(--surface); border:0; padding:0; text-align:left; transition:opacity .5s, transform .5s var(--ease)}
.tile.big{grid-column:span 2; grid-row:span 2} .tile.wide{grid-column:span 2}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s; filter:saturate(.95)}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(var(--bg-deep-rgb),.85)); opacity:.9; transition:opacity .5s}
.tile .cap{position:absolute; left:16px; right:16px; bottom:14px; z-index:2; transform:translateY(6px); opacity:.95; transition:transform .5s var(--ease)}
.tile .cap b{display:block; font-family:var(--display); font-weight:600; font-size:16px; line-height:1.2}
.tile .cap span{display:block; font-size:13px; line-height:1.35; color:var(--text-2)}
.tile:hover img{transform:scale(1.07); filter:saturate(1.1)}
.tile:hover .cap{transform:none}
.tile:focus-visible{outline-offset:-3px}
.tile.hide{display:none}
.tile.pop{animation:pop .6s var(--ease) both}
@keyframes pop{from{opacity:0; transform:scale(.96)}}
.more{display:flex; justify-content:center; margin-top:36px}
/* masonry page réalisations */
.masonry{columns:3 320px; column-gap:14px; margin-top:32px}
.masonry .tile{display:block; width:100%; margin:0 0 14px; break-inside:avoid; height:auto}
.masonry .tile img{height:auto; aspect-ratio:var(--ar)}
.masonry .tile.hide{display:none}
/* visionneuse */
.lb{position:fixed; inset:0; z-index:120; background:rgba(3,3,16,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center; padding:70px 16px 90px}
.lb.open{display:flex}
.lb figure{margin:0; max-width:min(1200px,100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:16px}
.lb img{max-height:calc(100svh - 190px); width:auto; max-width:100%; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb figcaption{text-align:center} .lb figcaption b{font-family:var(--display); font-weight:600; font-size:18px; display:block} .lb figcaption span{color:var(--muted); font-size:14px}
.lb .lb-btn{position:absolute; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer; border:0}
.lb .lb-btn svg{width:20px; height:20px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.lb .x{top:16px; right:16px} .lb .prev{left:16px; top:50%; margin-top:-26px} .lb .next{right:16px; top:50%; margin-top:-26px}
.lb .count{position:absolute; top:28px; left:24px; font-size:13px; color:var(--muted); letter-spacing:.08em}

/* ---------- Atelier ---------- */
.about{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(40px,6vw,100px); align-items:center}
.pic{position:relative; border-radius:32px; overflow:hidden; aspect-ratio:4/4.4; box-shadow:0 30px 70px rgba(0,0,0,.45)}
.pic img{width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.8s var(--ease)}
.pic.in img{transform:scale(1)}
.pic::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(var(--bg-deep-rgb),0) 50%, rgba(var(--bg-deep-rgb),.85)), linear-gradient(0deg, rgba(var(--p-rgb),.12), rgba(var(--s-rgb),.06))}
.pic .tag{position:absolute; left:16px; right:16px; bottom:16px; z-index:2; border-radius:22px; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.pic .tag b{font-family:var(--display); font-weight:600; font-size:17px}
.pic .tag span{font-size:13.5px; color:var(--text-2)}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:36px}
.stat{padding:22px 20px; border-radius:24px}
.stat .n{font-family:var(--display); font-weight:700; font-size:clamp(34px,3.2vw,48px); line-height:1; letter-spacing:-.03em; white-space:nowrap}
.stat .l{color:var(--muted); font-size:14px; margin-top:10px; line-height:1.35}
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px}
.val{padding:20px; border-radius:24px}
.val b{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:16px; margin-bottom:6px}
.val b::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--s); box-shadow:0 0 10px var(--s)}
.val:nth-child(2) b::before{background:var(--p); box-shadow:0 0 10px var(--p)}
.val:nth-child(3) b::before{background:var(--lav); box-shadow:0 0 10px var(--lav)}
.val p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.5}
.zone{margin-top:28px; font-size:15px; color:var(--text-2); display:flex; gap:12px; align-items:flex-start}
.zone svg{width:20px; height:20px; flex-shrink:0; margin-top:2px; fill:none; stroke:var(--s-l); stroke-width:1.6}

/* ---------- FAQ ---------- */
.faq{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px,6vw,100px); align-items:start}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font-family:var(--display); font-weight:600; font-size:clamp(17px,1.5vw,20px); line-height:1.3; transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--lav)}
.qa summary i{flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); position:relative; transition:transform .4s var(--ease), border-color .3s, background .3s}
.qa summary i::before,.qa summary i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:var(--text); transition:transform .4s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{transform:rotate(180deg); border-color:var(--p); background:rgba(var(--p-rgb),.2)}
.qa[open] summary i::after{transform:rotate(0)}
.qa .a{padding:0 60px 26px 0; color:var(--muted); max-width:62ch}
.qa .a p{margin:0}

/* ---------- Devis ---------- */
.contact{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px,6vw,100px); align-items:start}
.coords{list-style:none; padding:0; margin:40px 0 0; display:flex; flex-direction:column}
.coords a,.coords span{display:flex; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); font-size:clamp(17px,1.5vw,21px); transition:color .3s, padding .4s}
.coords a:hover{color:var(--lav); padding-left:8px}
.coords svg{width:20px; height:20px; stroke:var(--s-l); fill:none; stroke-width:1.6; flex-shrink:0}
.coords small{display:block; font-size:13px; color:var(--text-3)}
.form{border-radius:32px; padding:clamp(24px,3vw,40px)}
.prog{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:30px}
.prog div{font-size:13px; color:var(--text-3); letter-spacing:.02em}
.prog div::before{content:""; display:block; height:3px; border-radius:3px; margin-bottom:10px; background:var(--line-2); transition:background .5s, box-shadow .5s}
.prog div.on{color:var(--text)}
.prog div.on::before{background:linear-gradient(90deg, var(--p), var(--s)); box-shadow:0 0 12px rgba(var(--p-rgb),.7)}
.fstep{display:none; flex-direction:column; gap:24px; border:0; margin:0; padding:0; min-width:0}
.fstep.on{display:flex; animation:fin .5s var(--ease)}
@keyframes fin{from{opacity:0; transform:translateX(16px)}}
.fstep legend{font-family:var(--display); font-weight:600; font-size:clamp(22px,2vw,28px); letter-spacing:-.02em; padding:0; margin-bottom:6px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips input{position:absolute; opacity:0; pointer-events:none}
.chips label{display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 18px; border-radius:40px; font-size:15px; cursor:pointer; border:1px solid var(--line-2); background:rgba(var(--bg-deep-rgb),.35); transition:all .3s}
.chips label:hover{border-color:rgba(var(--lav-rgb),.5)}
.chips input:checked + label{background:linear-gradient(180deg, var(--p-top), var(--p)); border-color:transparent; color:var(--on-p); box-shadow:0 8px 22px rgba(var(--p-rgb),.35)}
.chips input:focus-visible + label{outline:2px solid var(--s); outline-offset:3px}
.field{position:relative}
.field input,.field textarea{width:100%; background:transparent; border:0; border-bottom:1px solid rgba(var(--text-rgb),.22); color:var(--text); font:inherit; font-size:18px; padding:26px 0 12px; outline:none; border-radius:0; transition:border-color .3s; resize:vertical}
.field textarea{min-height:110px}
.field label{position:absolute; left:0; top:24px; color:var(--muted); font-size:17px; pointer-events:none; transition:all .3s var(--ease)}
.field input:focus,.field textarea:focus{border-color:var(--s)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{top:0; font-size:13px; color:var(--s-l)}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.fnav{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px}
.back{background:none; border:0; cursor:pointer; color:var(--muted); font-size:15px; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0}
.back:hover{color:var(--text)}
.back[hidden]{display:none}
.form-note{font-size:14px; color:var(--muted); min-height:22px; margin:14px 0 0}
.form-note.err{color:#FF9AD5}
.form-note.ok{color:var(--s-l)}
.legal{font-size:12.5px; color:var(--text-3); margin:0}
.done{display:none; text-align:center; padding:40px 10px}
.done.on{display:block; animation:fin .6s var(--ease)}
.done .ring{width:84px; height:84px; margin:0 auto 22px; border-radius:50%; border:2px solid var(--s); box-shadow:0 0 16px rgba(var(--s-rgb),.8), inset 0 0 16px rgba(var(--s-rgb),.5); display:grid; place-items:center}
.done .ring svg{width:34px; height:34px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.done h3{font-family:var(--display); font-weight:700; font-size:28px; margin:0 0 8px}
.done p{color:var(--muted); margin:0}

/* ---------- Bandeau appel ---------- */
.cta-band{border-radius:36px; padding:clamp(36px,6vw,80px); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; overflow:hidden}
.cta-band h2{margin:0; max-width:18ch}
.cta-band .glow{position:absolute; width:480px; height:480px; right:-140px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(var(--p-rgb),.35), transparent 65%); pointer-events:none; z-index:-1}
.cta-band .glow.c{left:-180px; right:auto; top:auto; bottom:-260px; background:radial-gradient(circle, rgba(var(--s-rgb),.22), transparent 65%)}

/* ---------- Pied de page ---------- */
footer{border-top:1px solid var(--line); padding-block:56px 30px; position:relative; overflow:hidden}
.foot{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:40px}
.foot .brand{margin-bottom:16px}
.foot .tagline{font-family:var(--serif); font-style:italic; font-size:24px; line-height:1.2; color:var(--t); margin:0; max-width:18ch}
.foot h4{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin:6px 0 16px; font-weight:600}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px; color:var(--text-2)}
.foot a:hover{color:var(--text)}
.bottom{display:flex; justify-content:space-between; gap:14px 30px; flex-wrap:wrap; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:13.5px; color:var(--text-3)}
.bottom nav{display:flex; gap:20px; flex-wrap:wrap}
.giant{font-family:var(--display); font-weight:800; font-size:clamp(50px,11.4vw,176px); letter-spacing:-.05em; line-height:.8; text-align:center; margin:56px 0 -8px; color:transparent; -webkit-text-stroke:1px rgba(var(--lav-rgb),.16); user-select:none; white-space:nowrap}

/* ---------- Page réalisations ---------- */
.page-hero{padding-top:clamp(150px,20vh,200px); padding-bottom:30px}
.page-hero h1{font-family:var(--display); font-weight:700; font-size:clamp(46px,8vw,120px); line-height:1; letter-spacing:-.035em; margin:0 0 24px}
.page-hero h1 em{font-family:var(--serif); font-style:italic; font-weight:400}
.crumbs{font-size:14px; color:var(--text-3); margin-bottom:22px} .crumbs a:hover{color:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav{display:none}
  .menu-btn{display:grid}
  .sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1020px){
  .sim{grid-template-columns:minmax(0,1fr)}
  .method{grid-template-columns:minmax(0,1fr)}
  .m-vis{display:none}
  .step{min-height:auto; opacity:1; padding:36px 0}
  .step-vis{display:block; border-radius:22px; padding:8px; margin-bottom:22px; max-width:560px}
  .step-vis svg{border-radius:16px}
  .about,.faq,.contact{grid-template-columns:minmax(0,1fr)}
  .hero-art{width:56vw; right:-10vw; opacity:.6}
  .pic{max-width:560px; aspect-ratio:4/3.4}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:clamp(170px,36vw,280px)}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot > div:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  .hdr .tel .num{display:none}
  .tel{padding:0; width:44px; justify-content:center}
  .hdr .btn-devis{display:none}
  .hdr .bar{padding-left:12px; min-height:60px}
  .hdr.scrolled .bar{min-height:56px}
  .brand .word{width:116px}
  .brand .mark{width:36px; height:36px}
  .hero{min-height:auto}
  .hero .wrap{padding-top:128px; padding-bottom:64px}
  .hero-art{width:96vw; right:-44vw; top:70px; transform:none; opacity:.34}
  .hero-bg::after{background:linear-gradient(90deg, rgba(var(--bg-deep-rgb),.8), rgba(var(--bg-deep-rgb),.45)), linear-gradient(180deg, rgba(var(--bg-deep-rgb),0) 70%, var(--bg-deep) 100%)}
  .hero h1{margin-bottom:24px}
  .sec{padding-block:68px}
  .pipe,.node{display:none}
  .lg{--k:.74}
  .marquee li{height:66px; padding:0 22px}
  .sol-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter) 10px; scrollbar-width:none}
  .sol-grid::-webkit-scrollbar{display:none}
  .sol{flex:0 0 84%; scroll-snap-align:center; min-height:420px}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .stat{padding:18px 12px; border-radius:18px}
  .stat .n{font-size:28px}
  .stat .l{font-size:12.5px}
  .values{grid-template-columns:minmax(0,1fr)}
  .row2{grid-template-columns:minmax(0,1fr)}
  .bento{gap:10px}
  .tile{border-radius:16px}
  .tile.big{grid-column:span 2; grid-row:span 1}
  .tile .cap b{font-size:14px} .tile .cap span{font-size:12px}
  .tile .cap{left:12px; right:12px; bottom:10px}
  .masonry{columns:2 150px; column-gap:10px}
  .masonry .tile{margin-bottom:10px}
  .qa .a{padding-right:0}
  .lens{width:110px}
  .scroll-cue{display:none}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px}
  .lb .prev,.lb .next{top:auto; bottom:18px; margin:0}
  .lb .prev{left:calc(50% - 64px)} .lb .next{right:calc(50% - 64px)}
  .stage-badge{display:none}
}
@media (max-width:359px){
  .brand .word{display:none}
}
@media (max-width:420px){
  .filters button{padding:0 14px; font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .ha .ring-lit,.ha .ring-core,.ha .face-lit,.halo{opacity:1}
  .ha .face-halo{opacity:.6}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rv,.hero-foot{opacity:1; transform:none}
  .hero h1 .ln > span{transform:none}
  .h1-kicker{opacity:1}
  .draw *{stroke-dashoffset:0}
  html{scroll-behavior:auto}
  .lens,.intro{display:none}
  .marquee{animation:none}
}

/* ---------- Sans JavaScript (aperçus de fichiers sur téléphone, messageries…) : tout reste visible ---------- */
html:not(.js) .intro{display:none}
html:not(.js) .h1-kicker,html:not(.js) .hero-foot,html:not(.js) .rv{opacity:1; transform:none}
html:not(.js) .hero h1 .ln > span{transform:none}
html:not(.js) .draw *{stroke-dashoffset:0}
html:not(.js) .ha .ring-lit,html:not(.js) .ha .ring-core,html:not(.js) .ha .face-lit,html:not(.js) .halo{opacity:1}
html:not(.js) .ha .face-halo{opacity:.6}
html:not(.js) .step{opacity:1}
.stage{--sc:#FFD9A0}