@font-face{font-family:'Archivo';src:url('../fonts/Archivo-100_900.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-display:swap}
:root{--blue:#009EE2;--navy:#02385C;--black:#000;--anth:#2A2A2A;--anth2:#32323A;--grey:#545454;--line:#DDDDDD;--paper:#F7F8F9;--white:#FFF;--pad:clamp(20px,4.4vw,72px);--mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;--sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;--ease:cubic-bezier(.2,.75,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;background:#000}
body{margin:0;background:#000;color:#fff;font:400 17px/1.58 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:#fff;color:#000;padding:10px 14px;font:500 14px var(--mono)}
.skip:focus{top:12px}
#sol{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:#000}
#page{position:relative;z-index:1}
.no-gl #sol{display:none}
.no-gl [data-floor]{background:linear-gradient(180deg,#000 0%,#0b1a24 42%,var(--navy) 100%)}
main{display:block}

/* Typographie */
.disp{font-family:var(--sans);font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:.96;letter-spacing:-.018em}
.mono{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--blue)}
.eyebrow:before{content:"";width:34px;height:9px;flex:none;background:repeating-linear-gradient(0deg,currentColor 0 1px,transparent 1px 3px)}
.h-xl{font-size:clamp(38px,6.6vw,112px)}
.h-l{font-size:clamp(32px,4.8vw,80px)}
.h-m{font-size:clamp(25px,2.9vw,46px);line-height:1.02}
.h-s{font-size:clamp(19px,1.7vw,26px);line-height:1.1}
.lead{font-size:clamp(19px,1.75vw,27px);line-height:1.36;font-weight:400;letter-spacing:-.005em}
.muted{color:var(--grey)}
.s-black .muted,.s-anth .muted,.s-navy .muted{color:#b4b9bf}
.wrap{padding-inline:var(--pad);max-width:1760px;margin-inline:auto}
section{position:relative}
.s-white{background:#fff;color:var(--anth)}
.s-paper{background:var(--paper);color:var(--anth)}
.s-black{background:#000;color:#fff}
.s-anth{background:var(--anth);color:#fff}
.s-navy{background:var(--navy);color:#fff}
.s-blue{background:var(--blue);color:#000}
.pad{padding-block:clamp(72px,10vw,160px)}

/* Filets du logo : la signature graphique */
.filets{display:block;height:21px;background:linear-gradient(currentColor,currentColor) 0 0/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 0 5px/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 0 10px/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 16px/100% 5px no-repeat;color:var(--blue)}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:14px;padding:17px 24px;background:var(--blue);color:#000;text-decoration:none;font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--blue);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.btn:after{content:"→";font-size:17px;line-height:0;transition:transform .35s var(--ease)}
.btn:hover{background:#fff;border-color:#fff;color:#000}
.btn:hover:after{transform:translateX(6px)}
.btn.ghost{background:transparent;color:#fff;border-color:#ffffff66}
.btn.ghost:hover{background:#fff;color:#000;border-color:#fff}
.s-white .btn.ghost,.s-paper .btn.ghost{color:var(--anth);border-color:var(--anth)}
.s-white .btn.ghost:hover,.s-paper .btn.ghost:hover{background:var(--anth);color:#fff}
.s-white .btn:hover,.s-paper .btn:hover{background:var(--anth);border-color:var(--anth);color:#fff}
.s-blue .btn{background:#000;color:#fff;border-color:#000}
.lien{display:inline-flex;gap:10px;align-items:center;text-decoration:none;font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:5px}
.lien:after{content:"→";transition:transform .35s var(--ease)}
.lien:hover:after{transform:translateX(5px)}

/* En-tête */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--pad) 26px;transition:background .35s,padding .35s;color:#fff;background:linear-gradient(180deg,#000000b8,#00000000)}
.top.scrolled{background:#000000d9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-block:12px}
.top .logo{display:block;flex:none}
.top .logo img{width:clamp(170px,16vw,250px);height:auto}
.top nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,36px)}
.top nav a{text-decoration:none;font:500 12.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;position:relative;padding:8px 0}
.top nav a:not(.cta):after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.top nav a:not(.cta):hover:after,.top nav a[aria-current=page]:not(.cta):after{transform:scaleX(1)}
.top nav .tel{color:#fff;opacity:.72}
.top nav .cta{border:1px solid #ffffff66;padding:11px 15px;transition:background .25s,color .25s,border-color .25s}
.top nav .cta:hover{background:var(--blue);color:#000;border-color:var(--blue)}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;width:44px;height:44px}
.burger i{display:block;height:2px;background:#fff;margin:6px 0;transition:transform .3s,opacity .3s}
.menu-open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* Jauge d'épaisseur : le défilement se lit en millimètres */
.jauge{position:fixed;right:clamp(10px,1.4vw,22px);top:50%;z-index:40;transform:translateY(-50%);height:44vh;width:30px;mix-blend-mode:difference;color:#fff;pointer-events:none}
.jauge .regle{position:absolute;right:0;top:0;bottom:0;width:10px;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 10%);opacity:.75;border-right:1px solid #fff}
.jauge i{position:absolute;right:0;top:0;bottom:0;width:3px;background:#fff;transform:scaleY(0);transform-origin:top}
.jauge b{position:absolute;right:15px;top:-2px;font:500 10.5px/1 var(--mono);white-space:nowrap;writing-mode:vertical-rl}

/* Accueil : la coulée */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--pad) clamp(28px,4vw,56px);position:relative}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(78deg,#000000b5 0%,#00000073 26%,transparent 52%),linear-gradient(0deg,#00000080 0%,transparent 24%);pointer-events:none}
.hero>*{position:relative}
.hero h1{font-size:clamp(36px,4.9vw,92px);margin:16px 0 20px;text-shadow:0 2px 34px #0007}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .l>span{display:block;animation:monte 1.15s var(--ease) both}
.hero h1 .l:nth-child(2)>span{animation-delay:.08s}.hero h1 .l:nth-child(3)>span{animation-delay:.16s}.hero h1 .l:nth-child(4)>span{animation-delay:.24s}
@keyframes monte{from{transform:translateY(105%)}to{transform:none}}
.hero .sous{display:flex;flex-wrap:wrap;gap:24px 56px;align-items:flex-end;justify-content:space-between}
.hero .sous p{max-width:560px;font-size:clamp(17px,1.35vw,21px);line-height:1.42}
.hero .boutons{display:flex;flex-wrap:wrap;gap:12px}
.geste{margin-top:clamp(20px,2.6vw,34px);display:flex;gap:12px;align-items:center;color:#d9dde1}
.geste:before{content:"";width:9px;height:9px;background:var(--blue);border-radius:50%;box-shadow:0 0 0 0 #009ee2aa;animation:pouls 2.2s infinite}
@keyframes pouls{to{box-shadow:0 0 0 14px #009ee200}}
.no-gl .geste{display:none}
.p-hero{min-height:66vh;min-height:66svh;display:flex;flex-direction:column;justify-content:flex-end;padding:130px var(--pad) clamp(32px,4vw,60px);position:relative}
.p-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000000c7 0%,#0000005c 46%,#00000033 100%);pointer-events:none}
.p-hero>*{position:relative}
.p-hero h1{margin:16px 0 16px;font-size:clamp(36px,6vw,104px)}
.p-hero p{max-width:760px}

/* Qui sommes-nous : la phrase se remplit */
.mots{font-size:clamp(25px,3.5vw,58px);line-height:1.12;font-weight:600;letter-spacing:-.018em;max-width:1400px}
.mots span{opacity:.14;transition:opacity .25s linear}
.mots span.on{opacity:1}

/* Les couches du projet */
.strates{height:360vh}
.strates .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,70px);align-items:center;padding:96px var(--pad) 40px}
.pile{position:relative;height:min(68vh,620px);perspective:1500px;display:grid;place-items:center}
.pile .scene{position:relative;width:min(29vw,400px);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(60deg) rotateZ(-42deg)}
.plaque{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s var(--ease),opacity .55s;opacity:0;transform:translateZ(calc(var(--z)*1px + 180px))}
.plaque:after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--ep,14px);background:var(--bord,#333);transform-origin:top;transform:rotateX(-90deg)}
.plaque:before{content:"";position:absolute;top:0;bottom:0;left:100%;width:var(--ep,14px);background:var(--bord2,#222);transform-origin:left;transform:rotateY(90deg)}
.plaque.pose{opacity:1;transform:translateZ(calc(var(--z)*1px))}
.pile[data-n="1"] .plaque.pose{--z:var(--z1)}
.plaque.a{--z:0;--z1:0;--ep:58px;--bord:#3b3b40;--bord2:#2a2a2e;background:#7c7d80 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.plaque.b{--z:66;--ep:8px;--bord:#01263f;--bord2:#011c2f;background:linear-gradient(135deg,#02476f,var(--navy))}
.plaque.c{--z:92;--ep:14px;--bord:#00618b;--bord2:#004e70;background:linear-gradient(135deg,#26b4ef,var(--blue) 55%,#0086c0)}
.plaque.d{--z:124;--ep:4px;--bord:#cfe9f7;--bord2:#a7d6ee;background:linear-gradient(120deg,#ffffffe8 8%,#d9f0fb 28%,#ffffff99 46%,#bfe6f8cc 70%,#ffffffe0 100%);box-shadow:0 0 70px #009ee255}
.etapes{counter-reset:e;display:grid;gap:clamp(12px,1.6vw,22px)}
.etapes li{padding-top:14px;border-top:1px solid #0000001f;opacity:.28;transition:opacity .5s}
.etapes li.on{opacity:1}
.etapes li .mono{color:var(--blue);display:block;margin-bottom:4px}
.etapes li p{max-width:640px;font-size:clamp(15px,1.12vw,18px);line-height:1.45;margin-top:5px}

/* Gamme : le tableau des épaisseurs */
.gamme{margin-top:clamp(36px,5vw,72px);border-bottom:1px solid #ffffff2e}
.gamme .ech{display:grid;grid-template-columns:minmax(220px,1.2fr) 2fr 1.1fr;gap:24px;padding:0 0 12px;color:#b4b9bf}
.gamme .ech .reg{position:relative;height:14px}
.gamme .ech .reg span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.gamme .ech .reg span:first-child{transform:none}
.gamme .ech .reg span:last-child{transform:translateX(-100%)}
.gamme a{display:grid;grid-template-columns:minmax(220px,1.2fr) 2fr 1.1fr;gap:24px;align-items:center;padding:clamp(18px,2vw,30px) 0;border-top:1px solid #ffffff2e;text-decoration:none;transition:background .3s,padding .4s var(--ease)}
.gamme a:hover{background:#ffffff0c;padding-left:14px}
.gamme .bar{position:relative;height:clamp(14px,1.3vw,20px);background:repeating-linear-gradient(90deg,#ffffff1f 0 1px,transparent 1px 25%)}
.gamme .bar i{position:absolute;top:0;bottom:0;left:calc(var(--a)*1%);width:0;background:linear-gradient(90deg,#0089c4,var(--blue));transition:width 1.1s var(--ease)}
.gamme .in .bar i,.gamme a.in .bar i{width:calc((var(--b) - var(--a))*1%)}
.gamme .val{display:flex;justify-content:space-between;gap:12px;align-items:center}
.gamme .val b{font:500 13px/1.3 var(--mono);color:#fff}
.gamme .val span{font-size:18px;transition:transform .35s var(--ease)}
.gamme a:hover .val span{transform:translateX(6px)}
.apercu{position:fixed;left:0;top:0;width:min(25vw,360px);aspect-ratio:3/2;z-index:30;pointer-events:none;opacity:0;transition:opacity .25s;overflow:hidden;box-shadow:0 26px 70px #000a}
.apercu img{width:100%;height:100%;object-fit:cover}
.apercu.on{opacity:1}

/* Volets des secteurs */
.volets{display:flex;height:min(76vh,720px);gap:3px;margin-top:clamp(32px,5vw,64px)}
.volet{position:relative;flex:1 1 0;min-width:0;overflow:hidden;text-decoration:none;color:#fff;background:#000;transition:flex-grow .7s var(--ease)}
.volet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .5s,transform 1.1s var(--ease);transform:scale(1.06)}
.volet:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000d 0%,#0000 58%)}
.volet .t{position:absolute;left:18px;right:18px;bottom:18px;z-index:2}
.volet .t .mono{color:var(--blue);display:block;margin-bottom:8px}
.volet .t h3{font-size:clamp(15px,1.25vw,21px);hyphens:auto}
.volet .t p{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .4s,margin .4s;font-size:15.5px;line-height:1.42;max-width:430px}
.volet:hover,.volet:focus-visible{flex-grow:3.3}
.volet:hover img,.volet:focus-visible img{opacity:1;transform:none}
.volet:hover .t p,.volet:focus-visible .t p{max-height:170px;opacity:1;margin-top:10px}

/* Réalisations (accueil) */
.chiffre{font-size:clamp(66px,17.5vw,300px);letter-spacing:-.04em;line-height:.86;white-space:nowrap}
.chiffre small{font-size:.33em;letter-spacing:-.02em;margin-left:.1em}
.cas-grille{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,72px);margin-top:clamp(28px,4vw,56px);align-items:start}
.fiche{display:grid;gap:0;border-top:1px solid currentColor}
.fiche>div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #8888}
.fiche dt{font:500 12px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;opacity:.72}
.fiche dd{font-size:16px;line-height:1.42}
.split-m2{display:flex;height:34px;margin-top:10px;gap:3px}
.split-m2 span{display:flex;align-items:center;padding-left:9px;font:500 11px/1 var(--mono);color:#000;white-space:nowrap;overflow:hidden}
.split-m2 .x{flex:80;background:var(--blue)}
.split-m2 .y{flex:25;background:#fff}
.citation{font-size:clamp(24px,3.6vw,60px);line-height:1.08;font-weight:700;font-stretch:112%;letter-spacing:-.02em}
.cadre{position:relative;overflow:hidden;background:#111}
.cadre img{width:100%;height:100%;object-fit:cover}

/* Rail des vidéos */
.rail{overflow:clip}
.rail .pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:76px;overflow:hidden}
.rail .tete{padding:0 var(--pad) clamp(16px,2.4vw,32px);display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap}
.rail-track{display:flex;gap:clamp(10px,1.2vw,18px);padding:0 var(--pad);width:max-content;will-change:transform}
.carte-v{position:relative;flex:none;width:clamp(200px,calc((100vh - 280px)*.5625),320px);background:#111;overflow:hidden;text-decoration:none;color:#fff}
.carte-v video,.carte-v>img{width:100%;aspect-ratio:9/16;object-fit:cover;background:#111}
.carte-v .leg{position:absolute;left:0;right:0;bottom:0;padding:44px 14px 13px;background:linear-gradient(0deg,#000c,transparent)}
.carte-v .leg .mono{color:#fff;opacity:.82;display:block}
.carte-v .leg h3{font-size:15px;font-stretch:112%;font-weight:700;text-transform:uppercase;line-height:1.1;margin-top:3px}

/* Clients */
.clients{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:clamp(28px,4vw,52px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.clients li{display:grid;place-items:center;padding:clamp(16px,2.4vw,38px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);aspect-ratio:1.25}
.clients img{max-height:92px;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply}

/* Fin de page : retour au hall */
.fin{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:120px var(--pad) clamp(40px,6vw,84px);position:relative}
.fin:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000000c4,#00000033 60%,transparent);pointer-events:none}
.fin>*{position:relative}
.fin h2{font-size:clamp(40px,9.4vw,170px);letter-spacing:-.03em;white-space:nowrap}
.fin .liens{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,48px);justify-content:center;margin-top:clamp(18px,2.4vw,34px);font-size:clamp(20px,2.3vw,36px);font-weight:600;font-stretch:112%}
.fin .liens a{text-decoration:none;border-bottom:2px solid var(--blue);padding-bottom:3px}
.fin .liens a:hover{color:var(--blue)}

/* Pied de page */
.pied{background:#000;color:#fff;padding:clamp(48px,6vw,84px) var(--pad) 26px;border-top:1px solid #ffffff1f}
.pied .g{display:grid;grid-template-columns:1.5fr 1fr 1.3fr .8fr;gap:clamp(24px,4vw,70px)}
.pied h3{font:500 12px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.pied p,.pied li{font-size:15px;line-height:1.5;color:#c9cdd1}
.pied li{margin-bottom:6px}
.pied a{text-decoration:none}.pied a:hover{color:var(--blue)}
.pied .logo img{width:230px;height:auto;margin-bottom:18px}
.pied .bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:clamp(36px,5vw,64px);padding-top:18px;border-top:1px solid #ffffff1f;font:400 12px/1.5 var(--mono);color:#9aa0a6}

/* Secteurs */
.index-s{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:20px}
.index-s a{font:500 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:9px 11px;border:1px solid #ffffff55;transition:background .25s,color .25s,border-color .25s}
.index-s a:hover{background:var(--blue);border-color:var(--blue);color:#000}
.secteur{display:grid;grid-template-columns:1fr 1fr;align-items:start;min-height:100vh}
.secteur:nth-of-type(even) .ph{order:2}
.secteur .ph{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.secteur .ph img{width:100%;height:100%;object-fit:cover}
.secteur .ph:after,.systeme .ph:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#00000024 0 1px,transparent 1px 3px);pointer-events:none}
.secteur .tx{padding:clamp(96px,11vw,170px) var(--pad);display:flex;flex-direction:column;justify-content:center;min-height:100vh;gap:clamp(20px,2.4vw,32px)}
.secteur .num{font-size:clamp(70px,10vw,170px);color:var(--blue);line-height:.8;letter-spacing:-.04em}
.liste-tech li{padding:11px 0;border-top:1px solid #8886;font:500 14px/1.35 var(--mono)}
.liste-tech li:last-child{border-bottom:1px solid #8886}

/* Techniques */
.portes{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#000}
.porte{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(80vh,780px);padding:clamp(20px,2.4vw,36px);text-decoration:none;color:#fff;overflow:hidden;background:#111}
.porte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .5s,transform 1.2s var(--ease)}
.porte:hover img{opacity:.8;transform:scale(1.05)}
.porte:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#000e 0%,#0000 66%)}
.porte>*:not(img){position:relative;z-index:2}
.porte .mono{color:var(--blue)}
.porte h2{margin:10px 0 12px;font-size:clamp(21px,2.2vw,38px)}
.porte p{font-size:16px;line-height:1.42;margin-bottom:18px}
.supports{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#000}
.support{position:relative;min-height:72vh;overflow:hidden;display:flex;align-items:flex-end;padding:clamp(18px,2.2vw,32px);background:#111}
.support img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86}
.support:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000d,#0000 58%)}
.support h2{position:relative;z-index:2;color:#fff}

/* Solutions : l'échantillon */
.config{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
.echantillon{position:sticky;top:0;height:100vh;height:100svh;background:radial-gradient(90% 60% at 50% 62%,#10232f 0%,#000 72%);overflow:hidden}
.echantillon canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.echantillon canvas:active{cursor:grabbing}
.cartouche{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,3vw,40px);display:flex;justify-content:space-between;gap:20px;align-items:flex-end;pointer-events:none}
.cartouche .nom{font-size:clamp(21px,2.6vw,44px)}
.cartouche .ep{text-align:right;white-space:nowrap}
.cartouche .ep b{display:block;font-size:clamp(21px,2.6vw,44px);font-stretch:112%;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.tourne{position:absolute;left:var(--pad);top:96px;color:#b4b9bf;pointer-events:none}
.no-gl .echantillon{display:none}
.no-gl .config{grid-template-columns:1fr}
.systemes{background:#000}
.systeme{min-height:100vh;min-height:100svh;padding:clamp(96px,11vh,130px) var(--pad);display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,1.8vw,26px);border-bottom:1px solid #ffffff24}
.systeme .ph{position:relative;aspect-ratio:2/1;overflow:hidden;background:#111}
.systeme .ph img{width:100%;height:100%;object-fit:cover}
.systeme dl{display:grid;gap:0;border-top:1px solid #ffffff3d}
.systeme dl>div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #ffffff24}
.systeme dt{font:500 12px/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#b4b9bf}
.systeme dd li{padding:2px 0;font-size:16px;line-height:1.4}
.chimies{display:flex;flex-wrap:wrap;gap:6px}
.chimies span{font:500 12px/1 var(--mono);padding:7px 9px;border:1px solid var(--blue);color:var(--blue)}

/* Schémas */
.schemas{display:grid;grid-template-columns:minmax(240px,.4fr) 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.schemas .onglets{display:grid;gap:0;border-top:1px solid var(--line)}
.schemas .onglets button{all:unset;cursor:pointer;display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.25;font-weight:500;transition:color .25s,padding .35s var(--ease)}
.schemas .onglets button .mono{color:var(--grey);flex:none;width:26px}
.schemas .onglets button:hover{color:var(--blue);padding-left:7px}
.schemas .onglets button[aria-selected=true]{color:var(--blue)}
.schemas .onglets button[aria-selected=true] .mono{color:var(--blue)}
.schemas .onglets button:focus-visible{outline:2px solid var(--blue)}
.planche{position:relative;background:#fff;border:1px solid var(--line);overflow:hidden;cursor:zoom-in}
.planche img{width:100%;height:auto;transition:transform .25s ease-out,opacity .3s}
.planche:after{content:"Survolez pour agrandir";position:absolute;right:12px;bottom:10px;font:500 11px/1 var(--mono);color:var(--grey)}
@media (hover:none){.planche:after{display:none}.planche{cursor:auto}}

/* Réalisations */
.cas{padding-block:clamp(72px,9vw,140px)}
.cas .haut{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:baseline;margin-bottom:clamp(20px,3vw,40px)}
.mosaique{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:clamp(24px,3vw,44px)}
.mosaique .cadre{aspect-ratio:4/3}
.mosaique .cadre:nth-child(1),.mosaique .cadre:nth-child(2){grid-column:span 3}
.mosaique .cadre:nth-child(n+3){grid-column:span 2}
.mosaique .cadre.h{aspect-ratio:auto}

/* Vidéos */
.etape-v{display:grid;grid-template-columns:minmax(220px,.5fr) 1fr;gap:clamp(20px,4vw,64px);padding-block:clamp(40px,5vw,76px);border-top:1px solid #ffffff24;align-items:start}
.etape-v .titre{position:sticky;top:96px}
.etape-v .titre .num{color:var(--blue);font-size:clamp(46px,5.4vw,88px);line-height:.85;letter-spacing:-.03em}
.etape-v .titre h2{margin-top:10px}
.vids{display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,14px)}
.lecteur{position:relative;background:#111;overflow:hidden;cursor:pointer;flex:0 1 auto;height:clamp(340px,62vh,560px);aspect-ratio:var(--r,.5625)}
.lecteur video{width:100%;height:100%;object-fit:cover;background:#111}
.lecteur .go{all:unset;position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;background:linear-gradient(0deg,#0007,#0000 40%);transition:opacity .3s}
.lecteur .go i{width:68px;height:68px;border-radius:50%;background:var(--blue);display:grid;place-items:center;transition:transform .35s var(--ease)}
.lecteur .go i:after{content:"";margin-left:5px;border-left:17px solid #000;border-top:11px solid transparent;border-bottom:11px solid transparent}
.lecteur:hover .go i{transform:scale(1.1)}
.lecteur.joue .go{opacity:0;pointer-events:none}
.lecteur .go:focus-visible i{outline:2px solid #fff;outline-offset:3px}
.sommaire-v{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:18px}
.sommaire-v a{font:500 12px/1 var(--mono);letter-spacing:.03em;text-decoration:none;padding:9px 10px;border:1px solid #ffffff55;text-transform:uppercase}
.sommaire-v a:hover{background:var(--blue);color:#000;border-color:var(--blue)}

/* Contact */
.contact-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,110px)}
.tel-xl{display:block;font-size:clamp(30px,4.1vw,70px);text-decoration:none;white-space:nowrap}
.tel-xl:hover,.mail-xl:hover{color:var(--blue)}
.mail-xl{display:block;font-size:clamp(17px,2vw,32px);font-weight:600;text-decoration:none;word-break:break-word;margin-top:8px}
.adresses{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.adresses li{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.adresses .mono{color:var(--blue)}
form.f{display:grid;gap:16px}
.f label{display:grid;gap:6px;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.f input,.f textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--anth);background:transparent;font:400 18px/1.35 var(--sans);letter-spacing:0;text-transform:none;border-radius:0}
.f input:focus,.f textarea:focus{outline:0;border-bottom:2px solid var(--blue)}
.f textarea{min-height:130px;resize:vertical}
.f .note{font-size:14px;color:var(--grey)}
.f .ok{font-size:15px;color:var(--navy);font-weight:600}
.carte{margin-top:clamp(40px,6vw,80px);position:relative;background:var(--anth);color:#fff;min-height:380px;display:grid;place-items:center;overflow:hidden}
.carte button{all:unset;cursor:pointer;text-align:center;padding:24px}
.carte button b{display:block;font-size:clamp(20px,2vw,30px);margin-bottom:8px}
.carte button:focus-visible{outline:2px solid var(--blue)}
.carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.legal h2{margin:36px 0 10px;font-size:22px}
.legal p{max-width:820px;margin-bottom:10px}
.afaire{background:#fff3b0;padding:1px 5px}

/* Apparitions */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*70ms)}
.js .rv.in{opacity:1;transform:none}

/* Rideau de résine entre deux pages */
.rideau{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none;display:block}
.rideau.off{display:none}

html.menu-open{overflow:hidden}
/* Menu téléphone et tablette */
@media (max-width:1040px){
  .top nav{position:fixed;inset:0;background:#000;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:96px var(--pad) 40px;transform:translateY(-100%);transition:transform .55s var(--ease);visibility:hidden}
  .menu-open .top nav{transform:none;visibility:visible}
  .top nav a{font:800 clamp(28px,7.4vw,44px)/1.1 var(--sans);font-stretch:125%;letter-spacing:-.01em}
  .top nav .tel{font:500 15px/1 var(--mono);opacity:1;margin-top:18px;color:var(--blue)}
  .top nav .cta{border:0;padding:8px 0}
  .burger{display:block;position:relative;z-index:2}
  .top .logo{position:relative;z-index:2}
}
@media (max-width:900px){
  body{font-size:16px}
  .jauge{display:none}
  .strates{height:auto}
  .strates .pin{position:static;height:auto;display:block;padding:72px var(--pad)}
  .pile{height:300px;margin-bottom:12px}
  .pile .scene{width:230px}
  .etapes li{opacity:1}
  .gamme .ech{grid-template-columns:1fr}.gamme .ech>span:not(.reg){display:none}
  .gamme a{grid-template-columns:1fr;gap:9px}
  .volets{flex-direction:column;height:auto}
  .volet{min-height:210px;flex:none}
  .volet .t p{max-height:none;opacity:1;margin-top:8px;font-size:14.5px}
  .volet img{opacity:.7}
  .cas-grille{grid-template-columns:1fr}
  .rail{height:auto!important}
  .rail .pin{position:static;height:auto;padding-block:72px}
  .rail-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;transform:none!important}
  .rail-track::-webkit-scrollbar{display:none}
  .carte-v{width:66vw;max-width:290px;scroll-snap-align:center}
  .clients{grid-template-columns:repeat(3,1fr)}
  .pied .g{grid-template-columns:1fr 1fr}
  .secteur{grid-template-columns:1fr;min-height:0}
  .secteur:nth-of-type(even) .ph{order:0}
  .secteur .ph{position:relative;height:46vh}
  .secteur .tx{min-height:0;padding:44px var(--pad) 64px}
  .portes,.supports{grid-template-columns:1fr}
  .porte{min-height:62vh}.support{min-height:44vh}
  .config{display:block}
  .echantillon{position:sticky;top:0;height:42vh;height:42svh;z-index:2;border-bottom:1px solid #ffffff2e}
  .tourne{display:none}
  .cartouche{bottom:10px}
  .systeme{min-height:0;padding:44px var(--pad)}
  .schemas{grid-template-columns:1fr}
  .etape-v{grid-template-columns:1fr}
  .etape-v .titre{position:static}
  .vids{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
  .vids::-webkit-scrollbar{display:none}
  .lecteur{height:min(64vh,500px);flex:none;scroll-snap-align:center}
  .contact-g{grid-template-columns:1fr}
  .mosaique{grid-template-columns:repeat(2,1fr)}
  .mosaique .cadre:nth-child(n){grid-column:span 1}
  .mosaique .cadre:nth-child(1){grid-column:span 2}
  .fiche>div{grid-template-columns:1fr;gap:3px}
}
@media (max-width:520px){
  .pied .g{grid-template-columns:1fr}
  .hero h1{font-stretch:108%}
  .adresses li{grid-template-columns:1fr;gap:2px}
  .chiffre{font-size:21vw}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
}