/* Accueil sombre — une idée par écran, grandes images, mouvement au défilement (esprit DJI), DA Vecteur noir + lime */
:root{
  --ink:#07090d; --ink-2:#0d1016; --ink-3:#141820; --chrome:#f3f5f1; --mist:#8b929c; --line:rgba(243,245,241,.1); --line-2:rgba(243,245,241,.2);
  --lime:#c8f542;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --sans:'Instrument Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --nav:72px; --g:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav);background:var(--ink)}
body{background:var(--ink);color:var(--chrome);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.lime-t{color:var(--lime)}
.sur{font:500 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
h2{font-size:clamp(38px,5.6vw,84px);margin-top:18px}
h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.1}
.chapo{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#c9ced4;max-width:600px;text-wrap:pretty}

/* ---------- menu */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--g);background:linear-gradient(180deg,rgba(7,9,13,.72),rgba(7,9,13,0));transition:background .3s}
.nav.fonce,.nav.ouvert{background:rgba(7,9,13,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;font:500 19px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.brand b{font-weight:800}
.mark{width:30px;height:30px}
.links{display:flex;gap:26px;font-size:14px;font-weight:500}
.links a{color:#c9ced4;transition:color .2s}.links a:hover{color:#fff}
.tel-menu{display:none}
.actions{display:flex;align-items:center;gap:18px}
.tel{font:500 13px var(--mono);color:#c9ced4;white-space:nowrap}
.burger{display:none;width:42px;height:42px;position:relative;border:1px solid var(--line-2);border-radius:50%}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:18px;height:1.6px;background:#fff;transition:.25s;content:''}
.burger span{top:19px}.burger span::before{top:-6px;left:0}.burger span::after{top:6px;left:0}
.nav.ouvert .burger span{background:transparent}.nav.ouvert .burger span::before{top:0;transform:rotate(45deg)}.nav.ouvert .burger span::after{top:0;transform:rotate(-45deg)}

/* ---------- boutons */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:600;white-space:nowrap;transition:transform .2s,background .2s,color .2s,border-color .2s}
.pill:hover{transform:translateY(-1px)}
.pill.lime{background:var(--lime);color:#0a0d05}.pill.lime:hover{background:#d6ff5c}
.pill.ghost{border:1px solid rgba(255,255,255,.4);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pill.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.pill.petit{min-height:40px;padding:0 18px;font-size:14px}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

/* ---------- 1 · héros */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;justify-content:center;align-items:center;text-align:center}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 45%;transform:scale(1.06);will-change:transform}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,13,.55) 0%,rgba(7,9,13,.25) 40%,rgba(7,9,13,.35) 70%,var(--ink) 100%)}
.hero{align-items:flex-start}
.hero-txt{position:relative;z-index:2;padding:calc(var(--nav) + clamp(48px,9vh,110px)) var(--g) 0;max-width:1100px}
h1{font-size:clamp(50px,8vw,132px);margin:22px 0 26px;text-shadow:0 4px 40px rgba(0,0,0,.35)}
.hero .chapo{margin:0 auto;color:#e6e9ec;text-shadow:0 1px 16px rgba(0,0,0,.45)}
.hud{position:absolute;z-index:2;top:calc(var(--nav) + 18px);display:flex;gap:18px;font:400 11px var(--mono);letter-spacing:.14em;color:rgba(243,245,241,.75)}
.hud b{color:var(--lime);font-weight:500}
.hud-hg{left:var(--g)}.hud-hd{right:var(--g)}
.scroll{display:none;position:absolute;z-index:2;bottom:28px;left:50%;width:26px;height:42px;margin-left:-13px;border:1.5px solid rgba(255,255,255,.5);border-radius:14px}
.scroll span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--lime);animation:molette 1.8s ease-in-out infinite}
@keyframes molette{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- 2 · phrase qui s'allume */
.manifeste{padding:clamp(120px,22vh,220px) var(--g);max-width:1280px;margin:0 auto}
.eclaire{font:600 clamp(32px,4.8vw,72px)/1.12 var(--display);letter-spacing:-.03em;text-wrap:balance}
.eclaire span{color:rgba(243,245,241,.16);transition:color .35s}
.eclaire span.on{color:var(--chrome)}
.calme .eclaire span{color:var(--chrome)}

/* ---------- 3 · image qui s'agrandit */
.agrandir{height:260vh;position:relative}
.agrandir .colle{position:sticky;top:0;height:100vh;overflow:hidden}
.cadre{position:absolute;inset:0;clip-path:inset(var(--yy,16%) var(--x,20%) round var(--r,28px));will-change:clip-path}
.cadre img{width:100%;height:100%;object-fit:cover}
.cadre::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,13,.82) 0%,rgba(7,9,13,.35) 50%,rgba(7,9,13,0) 75%);opacity:0;transition:opacity .6s}
.agrandir.plein .cadre::after{opacity:1}
.agrandir-txt{position:absolute;left:var(--g);bottom:clamp(48px,12vh,120px);max-width:620px;opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.agrandir.plein .agrandir-txt{opacity:1;transform:none}
.agrandir-txt p:last-child{margin-top:20px;font-size:18px;color:#d6dade;max-width:520px}
.calme .agrandir{height:auto}.calme .agrandir .colle{position:relative}.calme .cadre{clip-path:none}.calme .cadre::after,.calme .agrandir-txt{opacity:1;transform:none}

/* ---------- 4 · chiffres géants */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chiffre{padding:clamp(40px,6vw,80px) var(--g) clamp(36px,5vw,64px);border-right:1px solid var(--line)}
.chiffre:last-child{border-right:0}
.chiffre b{font:700 clamp(48px,5.6vw,96px)/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.chiffre .u{display:inline-block;margin-left:8px;font:500 14px var(--mono);letter-spacing:.1em;color:var(--lime);text-transform:uppercase}
.chiffre p{margin-top:14px;color:var(--mist);font-size:15px;max-width:22ch}

/* ---------- blocs */
.bloc{padding:clamp(100px,14vw,180px) var(--g) 0;max-width:1440px;margin:0 auto}
.bloc.etroit{max-width:980px}
.tete{text-align:center;margin:0 auto clamp(44px,6vw,72px);max-width:980px}
.tete .chapo{margin:24px auto 0}
.tete.gauche{text-align:left;margin-left:0}

/* ---------- visionneuses (classes reprises par viewer.js et roof-viewer.js) */
.viewer{position:relative;overflow:hidden;background:var(--ink-3);border-radius:22px;border:1px solid var(--line)}
.v360{aspect-ratio:16/7.5;min-height:420px}
.v3d{aspect-ratio:1/1;min-height:420px;background:radial-gradient(circle at 50% 40%,#161b23,#07090d 70%)}
.viewer canvas{width:100%!important;height:100%!important;display:block;cursor:grab}
.viewer.dragging canvas{cursor:grabbing}
.v3d .stage{position:absolute;inset:0}
.viewer-ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:20px}
.viewer-ui>*{pointer-events:auto}
.viewer-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.viewer-tabs button{padding:10px 18px;border-radius:999px;background:rgba(7,9,13,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line-2);font-size:14px;font-weight:500;transition:.2s}
.viewer-tabs button.active,.viewer-tabs button:hover{background:var(--lime);color:#0a0d05;border-color:var(--lime)}
.viewer-hint{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(7,9,13,.55);padding:9px 16px;border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .4s}
.viewer.touched .viewer-hint{opacity:0}
.viewer-meta{position:absolute;left:22px;bottom:22px;font:400 11px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(243,245,241,.8)}
.viewer-meta b{color:var(--lime);font-weight:500}
.viewer .loading{position:absolute;inset:0;display:grid;place-items:center;font:400 12px var(--mono);letter-spacing:.18em;color:var(--mist);background:var(--ink-3);transition:opacity .6s;pointer-events:none}
.v3d .loading{background:transparent}
.viewer.ready .loading{opacity:0}

/* ---------- duo texte + visuel */
.duo{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,6vw,96px);align-items:center}
.duo-txt .chapo{margin-top:24px}
.duo-txt>p:not(.sur):not(.chapo):not(.note){margin-top:16px;color:#aab1ba}
.mesures{display:grid;grid-template-columns:1fr 1fr;margin-top:36px;border-top:1px solid var(--line)}
.mesures div{padding:18px 0;border-bottom:1px solid var(--line)}
.mesures div:nth-child(odd){padding-right:16px;border-right:1px solid var(--line)}
.mesures div:nth-child(even){padding-left:20px}
.mesures dt{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.mesures dd{font:700 clamp(26px,2.6vw,38px)/1.15 var(--display);letter-spacing:-.03em;margin-top:6px}
.note{margin-top:16px;font-size:13px;color:var(--mist)}

/* ---------- 7 · galerie horizontale */
.galerie{position:relative;margin-top:clamp(100px,14vw,180px)}
.galerie .colle{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,4vh,48px)}
.galerie-tete{padding:0 var(--g)}
.piste{display:flex;gap:clamp(14px,2vw,28px);padding:0 var(--g);width:max-content;will-change:transform}
.piste figure{position:relative;width:clamp(280px,46vw,760px);aspect-ratio:3/2;border-radius:18px;overflow:hidden;background:var(--ink-3);flex:none}
.piste img{width:100%;height:100%;object-fit:cover}
.piste figcaption{position:absolute;left:16px;bottom:14px;font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(7,9,13,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.calme .galerie{height:auto!important}.calme .galerie .colle{position:relative;height:auto}.calme .piste{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}.calme .piste figure{scroll-snap-align:start}

/* ---------- 8 · raisons */
.raisons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.raison{padding:clamp(28px,3vw,40px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.raison span,.etapes span{font:500 13px var(--mono);color:var(--lime);letter-spacing:.1em}
.raison h3{margin:56px 0 14px}
.raison p{color:#aab1ba;font-size:15.5px}

/* ---------- 9 · méthode */
.etapes{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);position:relative}
.etapes li{padding:30px 24px 0 0;position:relative}
.etapes li::before{content:'';position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px rgba(200,245,66,.12)}
.etapes h3{margin:18px 0 12px;font-size:clamp(20px,1.7vw,24px)}
.etapes p{color:#aab1ba;font-size:15px}
.etapes em{display:inline-block;margin-top:18px;font:normal 400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}

/* ---------- bandeau défilant */
.defile{margin-top:clamp(100px,14vw,180px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:22px 0}
.defile div{display:flex;width:max-content;animation:defile 40s linear infinite}
.defile span{font:600 clamp(22px,2.4vw,34px)/1 var(--display);letter-spacing:-.02em;color:#8b929c;padding:0 28px;white-space:nowrap}
.defile span::after{content:'✦';margin-left:56px;color:var(--lime);font-size:.6em;vertical-align:middle}
@keyframes defile{to{transform:translateX(-50%)}}
.calme .defile div{animation:none}

/* ---------- 10 · offre */
.bande{position:relative;min-height:clamp(600px,92vh,900px);display:grid;place-items:center;text-align:center;overflow:hidden}
.bande>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bande::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(7,9,13,.55),rgba(7,9,13,.82)),linear-gradient(180deg,var(--ink),transparent 18%,transparent 82%,var(--ink))}
.bande-txt{position:relative;z-index:1;padding:0 var(--g);max-width:980px}
.bande-txt>p:not(.sur){margin:26px auto 0;font-size:clamp(17px,1.5vw,20px);color:#dfe3e7;max-width:620px}

/* ---------- 11 · questions */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:26px 0;font:600 clamp(18px,1.6vw,22px)/1.3 var(--display);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:300 28px/1 var(--sans);color:var(--lime);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 48px 26px 0;color:#aab1ba;max-width:760px}

/* ---------- 12 · aussi */
.aussi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.aussi-carte{position:relative;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line);background:linear-gradient(180deg,var(--ink-2),var(--ink));transition:border-color .3s}
.aussi-carte:hover{border-color:rgba(200,245,66,.45)}
.aussi-carte img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.aussi-carte:hover img{transform:scale(1.03)}
.aussi-carte>div{position:relative;z-index:1;padding:clamp(22px,2.6vw,34px)}
.aussi-carte h3{margin:10px 0 14px;font-size:clamp(22px,2.2vw,30px);max-width:20ch}
.aussi-carte>div>span{font-size:15px;font-weight:600;color:var(--lime)}
.aussi-nav{display:flex;gap:6px;padding:10px 14px;background:#151a22;border-bottom:1px solid var(--line)}
.aussi-nav i{width:9px;height:9px;border-radius:50%;background:#2c333d}

/* ---------- 13 · à propos */
.apropos-img{border-radius:22px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line)}
.apropos-img img{width:100%;height:100%;object-fit:cover}
#apropos .duo{grid-template-columns:.85fr 1fr}

/* ---------- 14 · contact */
.contact{text-align:center;padding:clamp(120px,18vw,220px) var(--g)}
.contact h2{font-size:clamp(44px,7vw,112px)}
.contact .chapo{margin:26px auto 0}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;padding:30px var(--g);border-top:1px solid var(--line);font-size:13px;color:var(--mist)}
footer nav{display:flex;flex-wrap:wrap;gap:22px}
footer a:hover{color:#fff}

/* ---------- apparitions */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.vu{opacity:1;transform:none}
.raison.rv:nth-child(2),.etapes li.rv:nth-child(2),.aussi-carte.rv:nth-child(2){transition-delay:.12s}
.raison.rv:nth-child(3),.etapes li.rv:nth-child(3){transition-delay:.24s}
.etapes li.rv:nth-child(4){transition-delay:.36s}
.calme .rv{opacity:1;transform:none;transition:none}

/* ---------- tablette */
@media(max-width:1180px){
  .links{position:fixed;top:var(--nav);left:0;right:0;flex-direction:column;gap:0;padding:8px var(--g) 22px;background:rgba(7,9,13,.96);border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;visibility:hidden;transition:.25s}
  .links a{padding:15px 0;font-size:18px;border-bottom:1px solid var(--line)}
  .tel-menu{display:block}
  .nav.ouvert .links{transform:none;opacity:1;visibility:visible}
  .burger{display:block}
  .tel{display:none}
}
@media(max-width:960px){
  .chiffres{grid-template-columns:1fr 1fr}
  .chiffre:nth-child(2){border-right:0}
  .chiffre:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .duo,#apropos .duo{grid-template-columns:1fr}
  .raisons{grid-template-columns:1fr}
  .raison h3{margin-top:28px}
  .etapes{grid-template-columns:1fr 1fr;row-gap:44px}
  .aussi{grid-template-columns:1fr}
  .apropos-img{aspect-ratio:4/3}
}
/* ---------- téléphone */
@media(max-width:600px){
  .nav .pill{display:none}
  .hud-hd{display:none}
  .hud{gap:12px;font-size:10px}
  .btns{flex-direction:column;align-items:stretch;max-width:360px;margin-left:auto;margin-right:auto}
  .hero-img img{object-position:42% 45%}
  .agrandir{height:220vh}
  .agrandir-txt{right:var(--g)}
  .cadre::after{background:linear-gradient(0deg,rgba(7,9,13,.9) 0%,rgba(7,9,13,.4) 55%,rgba(7,9,13,0) 80%)}
  .chiffre{padding:36px 18px 30px}
  .chiffre b{font-size:46px}
  .chiffre .u{display:block;margin:6px 0 0}
  .v360{aspect-ratio:4/5;min-height:0}
  .v3d{min-height:0}
  .viewer-meta{display:none}
  .etapes{grid-template-columns:1fr}
  .piste figure{width:78vw;aspect-ratio:4/5}
  .mesures dd{font-size:24px}
  .contact .pill{font-size:14px}
}

/* vignettes du héros : ce que reçoit l'agence, visible dès l'arrivée */
.vignettes{position:absolute;z-index:2;left:50%;bottom:clamp(24px,4.5vh,48px);transform:translateX(-50%);display:flex;gap:clamp(10px,1.2vw,16px)}
.vignettes a{position:relative;width:clamp(150px,14vw,230px);aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.28);box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform .3s,border-color .3s}
.vignettes a:hover{transform:translateY(-4px);border-color:var(--lime)}
.vignettes img{width:100%;height:100%;object-fit:cover}
.vignettes span{position:absolute;left:8px;right:8px;bottom:8px;font:500 11px/1.2 var(--sans);padding:6px 9px;border-radius:999px;background:rgba(7,9,13,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vignettes b{font:500 10px var(--mono);color:var(--lime);margin-right:4px}
@media(max-width:600px){
  .hero-txt{padding-top:calc(var(--nav) + 44px)}
  .vignettes{gap:8px;width:calc(100% - 32px);bottom:20px}
  .vignettes a{flex:1;width:auto;border-radius:10px}
  .vignettes span{left:5px;right:5px;bottom:5px;font-size:9.5px;padding:4px 6px;text-align:center}
  .vignettes b{display:none}
}
@media(max-height:800px) and (min-width:601px){h1{font-size:clamp(48px,6.6vw,104px);margin:16px 0 18px}.hero-txt{padding-top:calc(var(--nav) + 40px)}.btns{margin-top:24px}.vignettes a{width:clamp(130px,11vw,170px)}}
@media(max-height:620px) and (min-width:601px){.vignettes{display:none}}

/* ---------- sans effets liés au défilement (13/10) : photo plein cadre fixe, galerie à faire glisser au doigt, phrase lisible d'un coup */
.eclaire span{color:var(--chrome)}
.eclaire{max-width:22ch;margin:0 auto;text-align:center}
.agrandir{height:auto}
.agrandir .colle{position:relative;height:min(100vh,900px);min-height:560px}
.cadre{clip-path:none}
.cadre::after,.agrandir-txt{opacity:1;transform:none}
.galerie{height:auto!important}
.galerie .colle{position:relative;height:auto;overflow:visible}
.piste{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px;transform:none!important;-webkit-overflow-scrolling:touch}
.piste::-webkit-scrollbar{display:none}
.piste figure{scroll-snap-align:start}
.galerie-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.galerie-tete .glisser{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.hero-img img{transform:none}

/* ---------- pages intérieures en style sombre (À propos) */
.page-interieure .nav{background:rgba(7,9,13,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.page-tete{padding-top:calc(var(--nav) + clamp(64px,10vw,130px))}
.page-tete h1{font-size:clamp(40px,6vw,92px);margin:20px 0 26px;max-width:16ch;text-shadow:none}
.page-tete .chapo{max-width:640px}
.frise{list-style:none;border-left:1px solid var(--line-2);margin-left:6px}
.frise li{position:relative;display:grid;grid-template-columns:200px 1fr;gap:clamp(16px,3vw,48px);padding:0 0 clamp(36px,4vw,52px) clamp(24px,3vw,40px)}
.frise li::before{content:'';position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px rgba(200,245,66,.12)}
.frise time{font:500 13px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.frise h3{margin:10px 0 10px;font-size:clamp(22px,2.2vw,30px)}
.frise p:not(.sur){color:#aab1ba;max-width:640px}
.frise a{display:inline-block;margin-top:12px;font-weight:600;color:var(--lime)}
.frise a:hover{text-decoration:underline}
.garanties{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.garanties div{padding:26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.garanties dt{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.garanties dd{font:700 clamp(20px,1.8vw,24px)/1.2 var(--display);letter-spacing:-.02em;margin:10px 0 10px;overflow-wrap:anywhere}
.garanties dd.detail{font:400 14.5px/1.6 var(--sans);letter-spacing:0;color:#aab1ba;margin:0}
@media(max-width:960px){.garanties{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.frise li{grid-template-columns:1fr;gap:4px}.garanties{grid-template-columns:1fr}}

/* ---------- captures d'applications (pages logiciels) */
.appli{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:#0e1218;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.appli img{width:100%;height:auto;display:block}
.appli-legende{margin-top:14px;font:400 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.page-tete .appli{margin-top:clamp(40px,6vw,72px)}
.etape{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--line)}
.etape:nth-child(even) .etape-txt{order:2}
.etape-txt .sur{color:var(--lime)}
.etape-txt h2{font-size:clamp(30px,3.6vw,52px)}
.etape-txt p:not(.sur){margin-top:18px;color:#c9ced4;max-width:520px}
.etape-txt ul{list-style:none;margin-top:22px;display:grid;gap:10px}
.etape-txt li{position:relative;padding-left:22px;color:#aab1ba;font-size:15.5px}
.etape-txt li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--lime)}
.capot{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.capot div{padding:26px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.capot b{display:block;font:700 20px/1.2 var(--display);letter-spacing:-.02em;margin-bottom:8px}
.capot p{font-size:14.5px;color:#aab1ba}
.note-honnete{margin-top:28px;font-size:14px;color:var(--mist);max-width:720px}
@media(max-width:960px){.etape{grid-template-columns:1fr}.etape:nth-child(even) .etape-txt{order:0}.capot{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.capot{grid-template-columns:1fr}}

/* ---------- accueil en découpé : texte à gauche, le bien à droite (13/10) */
.hero.decoupe{height:auto;min-height:min(100svh,980px);align-items:center;text-align:left;padding:calc(var(--nav) + clamp(40px,6vh,72px)) var(--g) clamp(48px,7vh,80px)}
.hero.decoupe::after{display:none}
.hero-halo{position:absolute;inset:0;background:radial-gradient(50% 60% at 74% 46%,rgba(200,245,66,.10),transparent 70%),radial-gradient(40% 50% at 10% 80%,rgba(255,180,90,.05),transparent 70%)}
.hero-grille{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(36px,5vw,88px);align-items:center;width:100%;max-width:1440px;margin:0 auto}
.decoupe .hero-txt{text-align:left;padding:0;margin:0;max-width:none}
.decoupe h1{font-size:clamp(46px,6vw,104px);margin:20px 0 24px;text-shadow:none}
.decoupe .chapo{margin:0;color:#c9ced4;text-shadow:none;max-width:520px}
.decoupe .btns{justify-content:flex-start}
.hero-bien{position:relative;margin:0;padding-left:clamp(28px,5%,64px)}
.hero-photo{border-radius:22px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 44px 100px rgba(0,0,0,.6);aspect-ratio:4/3;background:var(--ink-3)}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-mini{position:absolute;left:0;width:clamp(118px,27%,196px);aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.3);box-shadow:0 22px 50px rgba(0,0,0,.6);transition:transform .3s,border-color .3s}
.hero-mini:hover{transform:translateY(-4px);border-color:var(--lime)}
.hero-mini img{width:100%;height:100%;object-fit:cover}
.hero-mini span{position:absolute;left:8px;bottom:8px;font:500 11px/1 var(--sans);padding:6px 9px;border-radius:999px;background:rgba(7,9,13,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.m360{top:16%}.m3d{top:50%}
.hero-bien figcaption{margin-top:14px;padding-left:2px;font:400 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);text-align:right}
@media(max-width:960px){
  .hero-grille{grid-template-columns:1fr}
  .hero-bien{max-width:620px}
}
@media(max-width:600px){
  .hero.decoupe{padding-top:calc(var(--nav) + 32px)}
  .decoupe .btns{align-items:stretch}
  .hero-bien{padding-left:18px}
  .hero-mini{width:34%}
  .m360{top:auto;bottom:22%}.m3d{display:none}
  .hero-mini span{font-size:10px;padding:5px 7px}
}

/* ---------- accueil : la visite 360° du jardin qui tourne en fond (13/10) */
.hero.hero-tour{height:100svh;min-height:600px;max-height:1000px;align-items:center;text-align:left;justify-content:flex-start;padding:var(--nav) var(--g) 0}
.hero.hero-tour::after{display:none}
.hero-360{position:absolute;inset:0;overflow:hidden;background:#0c1015}
.hero-360 canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity 1.2s ease}
.hero-360.pret canvas{opacity:1}
.hero-360-affiche{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-voile{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,9,13,.9) 0%,rgba(7,9,13,.78) 30%,rgba(7,9,13,.35) 58%,rgba(7,9,13,.1) 80%,rgba(7,9,13,.2) 100%),
             linear-gradient(180deg,rgba(7,9,13,.35) 0%,rgba(7,9,13,0) 25%,rgba(7,9,13,0) 70%,var(--ink) 100%)}
.hero-tour .hero-grille{display:block;max-width:1440px;width:100%;margin:0 auto}
.hero-tour .hero-txt{max-width:620px;padding:0;margin:0;text-align:left}
.hero-tour h1{font-size:clamp(48px,6.6vw,112px);margin:20px 0 24px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero-tour .chapo{margin:0;color:#dfe3e7;max-width:520px;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-tour .btns{justify-content:flex-start}
.hero-tour .hud-hg b{color:#ff5a4f;font-weight:500;animation:direct 1.6s ease-in-out infinite}
@keyframes direct{50%{opacity:.25}}
.hero-cartes{position:absolute;z-index:2;right:var(--g);bottom:clamp(24px,5vh,48px);display:flex;gap:12px}
.hero-cartes .hero-mini{position:relative;left:auto;top:auto;width:clamp(130px,13vw,200px)}
.calme .hero-tour .hud-hg b{animation:none}
@media(max-width:960px){
  .hero-voile{background:linear-gradient(180deg,rgba(7,9,13,.82) 0%,rgba(7,9,13,.7) 45%,rgba(7,9,13,.25) 72%,var(--ink) 100%)}
  .hero.hero-tour{align-items:flex-start;padding-top:calc(var(--nav) + 56px);max-height:none}
}
@media(max-width:600px){
  .hero.hero-tour{padding-top:calc(var(--nav) + 40px)}
  .hero-tour .btns{align-items:stretch}
  .hero-cartes{left:var(--g);right:var(--g);bottom:18px}
  .hero-cartes .hero-mini{flex:1;width:auto}
}

/* ---------- Même maison, deux annonces (remplace la phrase « Sur le portail… ») */
.annonces .tete{margin-bottom:clamp(36px,5vw,56px)}
.annonce-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,44px);max-width:1100px;margin:0 auto;align-items:end}
.annonce{margin:0}
.annonce .etiquette{display:inline-block;margin:0 0 14px;padding:7px 13px;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);border:1px solid var(--line-2)}
.annonce.forte .etiquette{color:#0a0d05;background:var(--lime);border-color:var(--lime)}
.annonce-carte{border-radius:16px;overflow:hidden;background:#fff;color:#14161a;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.annonce.forte .annonce-carte{box-shadow:0 0 0 2px var(--lime),0 30px 80px rgba(200,245,66,.18),0 30px 70px rgba(0,0,0,.5)}
.annonce:not(.forte) .annonce-carte{opacity:.82}
.annonce-photo{position:relative;aspect-ratio:4/3;background:#e9e9e6}
.annonce-photo img{width:100%;height:100%;object-fit:cover}
.compteur{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(20,22,26,.72);color:#fff;font:600 13px/1 var(--sans)}
.compteur svg{width:15px;height:15px}
.badges{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px}
.badges i{font:normal 600 12px/1 var(--sans);padding:7px 10px;border-radius:999px;background:var(--lime);color:#0a0d05}
.annonce-infos{padding:16px 18px 18px;display:grid;gap:4px}
.annonce-infos b{font:700 18px/1.2 var(--display);letter-spacing:-.01em}
.annonce-infos span{font-size:14px;color:#5c616a}
.annonce-question{margin-top:clamp(32px,4vw,48px);text-align:center;font:700 clamp(26px,3vw,40px)/1.1 var(--display);letter-spacing:-.025em}
@media(max-width:700px){.annonce-duo{grid-template-columns:1fr}.annonce:not(.forte) .annonce-carte{opacity:.9}}
.releve{position:absolute;left:10px;top:10px;padding:6px 10px;border-radius:999px;background:rgba(7,9,13,.72);color:#fff;font:500 11px/1 var(--mono);letter-spacing:.08em}

/* ---------- diaporama de la carte « Avec Vecteur Studio » (fondu enchaîné, pas lié au défilement) */
.diaporama img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0}
.diaporama img.precedent{opacity:1;z-index:1}                                  /* l'ancienne photo reste pleine dessous */
.diaporama img.actif{opacity:1;z-index:2;transition:opacity .7s ease}           /* la nouvelle apparaît par-dessus : pas de flash */
.diaporama>span{z-index:3}
.diaporama .releve b{font-weight:500;color:var(--lime)}
.points{position:absolute;right:10px;top:10px;display:flex;align-items:center;padding:3px 4px;border-radius:999px;background:rgba(7,9,13,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.points button{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width .35s ease}   /* zone tactile 24 px */
.points button[aria-current]{width:44px}
.points button::before,.points button span{content:'';position:absolute;left:8px;right:8px;top:8px;height:8px;border-radius:4px}
.points button::before{background:rgba(255,255,255,.5)}
.points button[aria-current]::before{background:rgba(255,255,255,.3)}
.points button span{background:var(--lime);transform:scaleX(0);transform-origin:left center}
.points button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.calme .diaporama img.actif{transition:none}
.calme .points button[aria-current] span{transform:none}


/* ---------- « Argument de mandat » en 3 maquettes (tablette, téléphone, publication) */
.maquettes{display:grid;grid-template-columns:1.25fr .8fr 1fr;grid-template-rows:auto auto;column-gap:clamp(20px,3vw,48px);row-gap:22px;max-width:1240px;margin:0 auto}
.maquette-item{margin:0;display:grid;grid-row:span 2;grid-template-rows:subgrid}   /* maquettes alignées en bas, légendes alignées en haut */
.maquette-item>:first-child{align-self:end}
.maquette-item figcaption{align-self:start}
@supports not (grid-template-rows:subgrid){.maquette-item{display:flex;flex-direction:column;justify-content:flex-end;gap:22px}}
.maquette-item figcaption span{font:500 12px var(--mono);color:var(--lime);letter-spacing:.1em}
.maquette-item figcaption b{display:block;margin:8px 0 6px;font:700 clamp(19px,1.6vw,23px)/1.15 var(--display);letter-spacing:-.02em}
.maquette-item figcaption p{color:#aab1ba;font-size:15px;max-width:34ch}
.m-tablette{padding:12px;border-radius:26px;background:#0b0d11;border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.m-tablette .m-ecran{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#111}
.m-ecran img{width:100%;height:100%;object-fit:cover;display:block}
.m-badges{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px}
.m-badges i{font:normal 600 12px/1 var(--sans);padding:7px 10px;border-radius:999px;background:var(--lime);color:#0a0d05}
.m-tel{width:min(100%,250px);margin:0 auto;padding:8px;border-radius:34px;background:#0b0d11;border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.m-tel .m-ecran{position:relative;aspect-ratio:9/19.5;border-radius:27px;overflow:hidden;background:#111}
.m-tel-haut{position:absolute;left:10px;right:10px;top:12px;padding:8px 10px;border-radius:999px;background:rgba(7,9,13,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 11px/1.2 var(--sans);color:#fff;text-align:center}
.m-tel-aide{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap;padding:7px 12px;border-radius:999px;background:rgba(7,9,13,.62);font:400 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.m-insta{border-radius:16px;overflow:hidden;background:#fff;color:#14161a;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.m-insta-tete{display:flex;align-items:center;gap:10px;padding:10px 12px;font:400 12px/1.3 var(--sans);color:#5c616a}
.m-insta-tete b{color:#14161a;font-weight:600}
.m-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7);color:#fff;font:700 11px var(--sans);box-shadow:inset 0 0 0 2px #fff}
.m-insta img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.m-insta-actions{display:flex;gap:14px;padding:10px 12px 4px}
.m-insta-actions svg{width:22px;height:22px}
.m-insta-signet{margin-left:auto}
.m-insta-texte{padding:2px 12px 14px;font-size:13px;line-height:1.4}
@media(max-width:900px){
  .maquettes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;padding:0 var(--g) 10px;margin:0 calc(-1 * var(--g));scrollbar-width:none;align-items:flex-end}
  .maquettes::-webkit-scrollbar{display:none}
  .maquette-item{display:flex;flex-direction:column;justify-content:flex-end;gap:18px;flex:0 0 78%;scroll-snap-align:center}
  .maquette-item:nth-child(2){flex-basis:56%}
}

/* ---------- méthode en 4 étapes visuelles */
.etapes-v{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);position:relative;counter-reset:e}
.etapes-v::before{content:'';position:absolute;left:12%;right:12%;top:34px;height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 10%,var(--line-2) 90%,transparent)}
.etapes-v li{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.etapes-v i{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--ink-2);border:1px solid rgba(200,245,66,.5);color:var(--lime);box-shadow:0 0 0 8px var(--ink)}
.etapes-v i svg{width:28px;height:28px}
.etapes-v span{margin-top:18px;font:500 12px var(--mono);color:var(--mist);letter-spacing:.1em}
.etapes-v b{margin-top:6px;font:700 clamp(19px,1.7vw,24px)/1.15 var(--display);letter-spacing:-.02em}
.etapes-v em{margin-top:10px;font-style:normal;font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:#c9ced4}
@media(max-width:700px){.etapes-v{grid-template-columns:1fr 1fr;row-gap:36px}.etapes-v::before{display:none}}

/* ---------- qui pilote : capture de Waypoint Studio */
.apropos-appli{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:#0e1218;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.apropos-appli img{display:block;width:100%;height:auto}
.apropos-appli figcaption{padding:12px 16px;font:400 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mist);border-top:1px solid var(--line)}
#apropos .duo{grid-template-columns:1.15fr 1fr}
.apropos-lien{margin-top:26px}
.apropos-lien a{font-weight:600;color:var(--lime)}
.apropos-lien a:hover{text-decoration:underline}