@font-face{font-family:Stencil;src:url(/assets/stencil.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:B612;src:url(/assets/b612-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:B612;src:url(/assets/b612-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Main;src:url(/assets/main.woff2) format("woff2");font-display:swap}
:root{--bg:#14438f;--deep:#0e3273;--ink:#f1f5ff;--soft:#c5d4f2;--line:#7f9fd6;--acc:#d42f1b;--on:#ffffff;--note:#ffd2c4}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--line) var(--deep)}
body{margin:0;font:17px/1.7 B612,Verdana,sans-serif;color:var(--ink);background:var(--bg);overflow-x:clip}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px);
 background-size:24px 24px,24px 24px,120px 120px,120px 120px;--grid:rgba(255,255,255,.035);--grid2:rgba(255,255,255,.075)}
::selection{background:var(--acc);color:var(--on)}
a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--line)}a:hover{text-decoration-color:var(--acc)}
:focus-visible{outline:3px solid var(--note);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
.w{max-width:1160px;margin:0 auto;padding:0 28px}
h1,h2,h3,.logo{font-family:Stencil,Impact,sans-serif;font-weight:800;text-transform:uppercase;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(38px,6vw,64px);margin:0 0 20px}
h2{font-size:clamp(28px,3.6vw,40px);margin:52px 0 14px}
h3{font-size:23px;font-weight:700;margin:32px 0 8px;letter-spacing:.01em}
p,li{max-width:70ch}
header{position:sticky;top:0;z-index:20;background:var(--deep);border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px}
.logo{font-size:25px;text-decoration:none;white-space:nowrap}
nav{display:flex;gap:22px}nav a{text-decoration:none;font-size:14px;white-space:nowrap}nav a:hover{text-decoration:underline;text-decoration-color:var(--acc)}
.tel{display:inline-block;background:var(--acc);color:var(--on);font-weight:700;text-decoration:none;padding:10px 16px;white-space:nowrap;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.tel:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.28)}
.bar{border-bottom:1px dashed var(--line);font-size:14px;color:var(--soft)}.bar .w{padding-top:9px;padding-bottom:9px}.bar a{color:var(--soft)}
main{padding:40px 0 60px}main.home{padding:0}
.fil{position:fixed;left:max(8px,calc(50% - 610px));top:0;bottom:0;width:2px;z-index:5;pointer-events:none;background:var(--acc);transform-origin:top;transform:scaleY(var(--p,0))}
.fil:after{content:"";position:absolute;left:-5px;bottom:-6px;width:12px;height:12px;border-radius:50%;background:var(--acc)}
.art{max-width:760px}.art img{margin:0 0 22px;border:1px solid var(--line);padding:6px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:18px 0;padding:0;list-style:none;border-top:1px dashed var(--line);border-left:1px dashed var(--line)}
.card{border-right:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:18px;max-width:none;transition:background .25s}.card:hover{background:var(--deep)}.card h3{margin:0 0 6px;font-size:21px}.card p{margin:0;font-size:15px;color:var(--soft)}
.links{columns:3;padding:0;margin:14px 0;list-style:none}.links li{break-inside:avoid;margin-bottom:6px;font-size:15px}
.cta{background:var(--deep);border:1px solid var(--line);padding:24px 26px;margin:36px 0}.cta p{margin:0 0 12px}
footer{background:var(--deep);border-top:1px solid var(--line);font-size:15px;padding:38px 0 26px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}footer h2{font-size:21px;margin:0 0 10px}footer ul{list-style:none;margin:0;padding:0}footer li{margin-bottom:5px}
.id{border-top:1px dashed var(--line);margin-top:24px;padding-top:14px;font-size:14px;color:var(--soft);max-width:none}

.une{display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:center;min-height:calc(100svh - 65px);padding-top:30px;padding-bottom:30px}
.une h1{font-size:clamp(66px,11.4vw,150px);line-height:.9;margin:0 0 16px;letter-spacing:.005em}
.une .sous{font:700 clamp(23px,2.6vw,32px)/1.1 Stencil,Impact,sans-serif;text-transform:uppercase;margin:0 0 14px}
.une p{margin:0 0 22px}.une .tel{font-size:21px;padding:15px 24px}
.bp text.note{font:400 27px/1.2 Main,cursive;fill:var(--note)}
.bp{width:100%;height:auto;display:block;overflow:visible}.bp .t{fill:none;stroke:var(--ink);stroke-width:2.4}.bp .f{fill:none;stroke:var(--line);stroke-width:1.5}.bp .r{fill:none;stroke:var(--acc);stroke-width:3.4}
.bp text{font:15px B612,sans-serif;fill:var(--soft)}
.js .bp .t,.js .bp .f{stroke-dasharray:1;stroke-dashoffset:1;animation:trace 1.5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.js .une .r{opacity:0;animation:vient .5s .95s forwards}.js .une .note{opacity:0;animation:vient .5s 1.15s forwards}@keyframes vient{to{opacity:1}}

.scene{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--deep)}
.scene .pose{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center;padding-top:44px;padding-bottom:44px}
.js .scene{height:320svh}.js .scene .pose{position:sticky;top:64px;min-height:calc(100svh - 64px);padding-top:18px;padding-bottom:18px}
.scene h2{margin:0 0 18px}
.etapes{list-style:none;margin:0;padding:0}.etapes li{padding:8px 0 8px 16px;border-left:2px solid var(--line);color:var(--soft);transition:color .3s,border-color .3s}
.etapes li.on{color:var(--ink);border-color:var(--acc)}.scene .fin{margin:16px 0 0}
.js .scene .fin{opacity:var(--fin,0);transform:translateY(calc((1 - var(--fin,0))*12px))}
.vue{position:relative}.vue svg+svg{position:absolute;inset:0}.vue .bp{overflow:hidden}html:not(.js) #v-porte{display:none}
.vue .pile,.vue .cle{will-change:transform}
.js #v-porte{opacity:var(--porte,0)}.js #v-serrure{opacity:calc(1 - var(--porte,0))}

.sec{padding-top:70px;padding-bottom:70px}.sec>h2:first-child{margin-top:0}
.plan{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
.legende{list-style:none;margin:0;padding:0;counter-reset:n}
.legende li{counter-increment:n;border-bottom:1px dashed var(--line);max-width:none}
.legende a{display:grid;grid-template-columns:34px 1fr;gap:4px 8px;padding:11px 8px;text-decoration:none;transition:background .2s}
.legende a:before{content:counter(n);font:800 24px/1 Stencil,sans-serif;color:var(--note);grid-row:span 2}
.legende b{font:700 21px/1.05 Stencil,sans-serif;text-transform:uppercase}.legende span{font-size:14px;color:var(--soft)}
.legende a:hover,.legende a.on{background:var(--deep)}
.piece{fill:transparent;stroke:var(--ink);stroke-width:2;transition:fill .25s;cursor:pointer}.piece.on,a:hover>.piece{fill:var(--acc);fill-opacity:.32}
.num{font:800 30px Stencil,sans-serif!important;fill:var(--ink)!important;pointer-events:none}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:22px 0 0;padding:0;list-style:none;counter-reset:n}
.trois li{counter-increment:n;max-width:none}.trois li:before{content:counter(n);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;font:800 22px Stencil,sans-serif;margin-bottom:12px}
.trois b{display:block;font:700 23px/1.1 Stencil,sans-serif;text-transform:uppercase;margin-bottom:6px}
.js .monte{clip-path:inset(0 0 100% 0);transform:translateY(14px)}.js .monte.vu{clip-path:inset(0 0 -10% 0);transform:none;transition:clip-path .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.appel{display:none}
@media(max-width:880px){
 .w{padding:0 18px}.top{flex-wrap:wrap;gap:6px 12px;padding:8px 18px;min-height:0}nav{order:3;width:100%;overflow-x:auto;gap:18px;padding-bottom:4px;scrollbar-width:none}
 .logo{font-size:22px}.top .tel{padding:7px 11px;font-size:15px}
 .une,.plan,.fg{grid-template-columns:1fr}.une{min-height:0;gap:22px;padding-top:26px}.une h1{font-size:clamp(62px,21vw,120px)}
 .js .scene{height:300svh}.scene .pose{grid-template-columns:1fr;gap:12px}.js .scene .pose{top:96px;min-height:calc(100svh - 96px);align-content:center}.scene h2{font-size:27px;margin-bottom:8px}
 .etapes li{padding:3px 0 3px 12px;font-size:14px}.etapes li:not(.on){display:none}.scene .fin{font-size:15px}
 .grid,.trois{grid-template-columns:1fr}.links{columns:2}.sec{padding-top:46px;padding-bottom:46px}
 .fil{display:none}body{padding-bottom:60px}
 .appel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;text-align:center;padding:14px;font-size:18px}.appel:hover{transform:none}
}
@media(max-width:430px){.links{columns:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}.fil{display:none}}

.dive{position:relative;background:#050b18;color:#fff;--trou:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6a24 24 0 0 1 12 44.8L72 94H28l10-43.2A24 24 0 0 1 50 6z'/%3E%3C/svg%3E")}
.dive .boite{position:relative}#d-accroche{position:absolute;top:0;left:0;right:0;height:100svh}
.dive .couche{position:relative;width:100%}
.dive img{width:100%;height:100svh;object-fit:cover;display:block}
#d-porte img{object-position:48.7% 42.7%}
.dive .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,24,.82),rgba(4,10,24,.25) 46%,transparent 62%)}
.dive .accroche{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.dive h1{font-size:clamp(70px,9.4vw,150px);line-height:.88;margin:0 0 18px;max-width:6ch}
.dive .sous{font:700 clamp(21px,2.3vw,30px)/1.1 Stencil,Impact,sans-serif;text-transform:uppercase;margin:0 0 12px;max-width:21ch}
.dive .accroche p{max-width:38ch}.dive .accroche .tel{align-self:flex-start;font-size:22px;padding:15px 24px;margin-top:8px}
.dive .suite{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-size:14px;color:#dbe6ff;text-align:center}
#d-serrure{background:var(--deep);padding:40px 0}#d-serrure .pose{display:grid;grid-template-columns:.6fr 1.4fr;gap:30px;align-items:center;width:100%}
#d-serrure h2{margin:0 0 18px}
#d-maison .final{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:9svh;background:linear-gradient(0deg,rgba(6,8,16,.8),transparent 52%)}
#d-maison h2{font-size:clamp(44px,7.4vw,104px);margin:0 0 12px;line-height:.92}#d-maison p{margin:0 0 16px}
.js .dive{height:560svh}
.js .dive .boite{position:sticky;top:0;height:100svh;overflow:hidden}
.js .dive .couche{position:absolute;inset:0;height:100%}.js #d-accroche{height:100%}
.js .dive .couche img{height:100%}
.js #d-porte{will-change:transform;transform-origin:48.7% 42.7%}
.js #d-noir{position:absolute;inset:0;background:var(--deep);opacity:0}
.js #d-serrure{display:flex;align-items:center;background:none;opacity:0;padding:0}
.js #d-maison{visibility:hidden;-webkit-mask:var(--trou) center/var(--ms,0px) no-repeat;mask:var(--trou) center/var(--ms,0px) no-repeat}
.js .final{opacity:0}.js #pluie{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#pluie{display:none}.js #pluie{display:block}
.lueur{display:none}.js .lueur{display:block;position:absolute;left:48.7%;top:42.7%;width:18vmin;height:18vmin;margin:-9vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,176,84,.5),transparent 68%);mix-blend-mode:screen;animation:bat 3.2s ease-in-out infinite}
@keyframes bat{50%{opacity:.45}}
.ville{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.ville img{width:100%;height:clamp(420px,76vh,720px);object-fit:cover;object-position:60% 60%;display:block}
.ville .sur{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,12,30,.72),rgba(5,12,30,.08) 46%);padding-top:clamp(30px,6vh,64px)}
.ville h2{margin:0 0 10px;font-size:clamp(38px,6vw,84px)}.ville p{margin:0 0 14px}
.cherche{display:flex;max-width:520px}.cherche input{flex:1;min-width:0;font:17px B612,sans-serif;padding:14px 16px;background:#fff;color:#10203f;border:0;border-radius:0}
.cherche input::placeholder{color:#55617a}.resultats{list-style:none;padding:0;margin:8px 0 0;max-width:520px;background:var(--deep);max-height:230px;overflow:auto}
.resultats:empty{display:none}.resultats li{max-width:none;border-bottom:1px dashed var(--line)}.resultats a{display:block;padding:9px 16px;text-decoration:none}.resultats a:hover{background:var(--bg)}
.mur{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,21vw,270px);gap:10px;margin:22px 0 0;padding:10px;list-style:none;border:1px dashed var(--line)}
.mur li{position:relative;overflow:hidden;max-width:none}.mur li:first-child{grid-column:span 2;grid-row:span 2}.mur li:nth-child(4),.mur li:nth-child(5),.mur li:nth-child(6){grid-column:span 2}
.mur a{display:block;height:100%;text-decoration:none}.mur img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s;filter:saturate(.9)}
.mur a:hover img,.mur a:focus-visible img{transform:scale(1.06);filter:saturate(1.15)}
.mur .etiq{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);background:var(--deep);border:1px solid var(--line);padding:8px 14px;text-align:center}
.mur .etiq b{display:block;font:700 22px/1.05 Stencil,sans-serif;text-transform:uppercase}.mur .etiq span{display:block;font-size:13px;color:var(--soft)}
@media(max-width:880px){
 .dive .scrim{background:linear-gradient(180deg,rgba(4,10,24,.86),rgba(4,10,24,.2) 44%,rgba(4,10,24,.1) 62%,rgba(4,10,24,.8))}
 .dive .accroche{justify-content:space-between;padding-top:calc(100px + 16px);padding-bottom:calc(70px + 22px)}.dive h1{font-size:clamp(60px,20vw,110px)}.dive .sous{font-size:21px}.dive .accroche p{display:none}.dive .suite{display:none}
 #d-serrure .pose{grid-template-columns:1fr;gap:10px}#d-serrure h2{font-size:27px;margin-bottom:8px}#d-maison .final{padding-bottom:calc(9svh + 50px)}
 .mur{grid-template-columns:1fr 1fr;padding:6px;gap:6px;grid-auto-rows:44vw}.mur li:nth-child(5),.mur li:nth-child(6){grid-column:span 1}.mur li:first-child,.mur li:nth-child(4){grid-column:span 2}.mur li:first-child{grid-row:span 1}#d-serrure .bp text{display:none}.mur .etiq{bottom:8px;padding:5px 8px}.mur .etiq b{font-size:18px}.mur .etiq span{display:none}
}