/* Endry SA — feuille de style du site (production). */
:root{
  color-scheme:dark;
  --ink:#0e0b08;      /* fond, noir bronze */
  --ink-2:#17120d;    /* surfaces */
  --ivory:#efe7da;    /* texte */
  --ivory-2:#a99d8b;  /* texte secondaire */
  --gold:#f2d39a;     /* or du logo */
  --copper:#c0773f;   /* cuivre des conduites */
  --chaud:#d8412f;    /* eau chaude, chauffage : rouge (l'eau froide est bleue) */
  --eau:#9fc1cb;      /* repère eau */
  --line:rgba(239,231,218,.14);
  --sand:#ece4d6;     /* sections claires */
  --on-sand:#16110c;
  --on-sand-2:#5d5245;
  --line-sand:rgba(22,17,12,.16);
  /* Typographie : une seule famille, Cormorant Garamond (la police du mot « ENDRY » dans le logo). Les lettres
     droites et géométriques de Jost donnaient un ton industriel : tout le site est composé dans le même dessin,
     et la hiérarchie se fait par la taille, la graisse et les capitales espacées. */
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:var(--serif);
  --gutter:clamp(16px,4vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:transparent;color:var(--ivory);font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.6;
  font-kerning:normal;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lenis-smooth{scroll-behavior:auto}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.mono{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.wrap{padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;font-variant-numeric:lining-nums}
p{margin:0}
button,.btn{font-family:var(--sans)}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;
  animation:loaderOut 0s linear 3.2s forwards}
#loader .lm{display:grid;justify-items:center;gap:22px}
#loader .lmono{width:74px;height:auto;display:block}
#loader .lbar{width:180px;height:1px;background:var(--line);position:relative;overflow:hidden}
#loader .lbar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0);animation:lbar 1.4s var(--ease) forwards}
#loader .lcount{color:var(--ivory-2)}
@keyframes lbar{to{transform:scaleX(1)}}
@keyframes loaderOut{to{visibility:hidden;opacity:0}}
body.ready #loader{opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility 0s .8s}

/* ---------- fond : lignes de niveau WebGL ---------- */
#bg{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;display:block}

/* ---------- curseur ---------- */
.cursor{position:fixed;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--gold);
  pointer-events:none;z-index:90;mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease);display:none}
.cursor.big{width:56px;height:56px;margin:-28px 0 0 -28px}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* ---------- en-tête ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter) 18px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;transition:background .5s,backdrop-filter .5s,padding .5s}
.top.solid{background:rgba(14,11,8,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:12px}
.top .brand svg{height:40px;width:auto;display:block}
.top nav{display:flex;gap:28px;align-items:center}
.top nav a{text-decoration:none;font-size:.88rem;color:var(--ivory);opacity:.82;transition:opacity .3s}
.top nav a:hover{opacity:1}
.top .urgent{border:1px solid var(--gold);color:var(--gold);padding:9px 16px;border-radius:999px;opacity:1;font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.08em}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--ivory);border-radius:999px;padding:9px 14px;font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.12em}
@media (max-width:900px){
  .top nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;gap:26px;
    opacity:0;pointer-events:none;transition:opacity .4s}
  .top nav a{font-family:var(--serif);font-size:2.1rem;font-weight:500}
  .top.open nav{opacity:1;pointer-events:auto}
  .burger{display:block;position:relative;z-index:2}
}

/* ---------- héros ---------- */
.hero{position:relative;padding:calc(150px + env(safe-area-inset-top,0px)) var(--gutter) 0;overflow:hidden}
.hero .eyebrow{color:var(--gold);margin-bottom:26px}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(24px,4vw,60px);align-items:end}
.kinetic{font-size:clamp(3.3rem,10.6vw,11.6rem);line-height:.9;letter-spacing:-.012em;font-weight:400;
  margin:0;user-select:none;min-width:0}
.kinetic .row{display:block;white-space:nowrap}
.kinetic .ch{display:inline-block}
.kinetic .gold{color:var(--gold)}
.hero-side{display:grid;gap:22px;padding-bottom:10px}
.hero-side p{color:var(--ivory-2)}
.elements{display:grid;gap:0;border-top:1px solid var(--line)}
.elements a{text-decoration:none;display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.elements a b{font-weight:500;font-size:1.02rem;letter-spacing:.01em}
.hero-panel{position:relative;margin-top:clamp(44px,6vw,84px);aspect-ratio:16/8;max-width:100%;border-radius:6px;overflow:hidden;background:var(--ink-2);
  clip-path:inset(0 0 0 0 round 6px)}
.hero-panel img,.hero-panel canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-panel canvas{opacity:0;transition:opacity 1.2s}
.hero-panel canvas.on{opacity:1}
.hero-cap{display:flex;justify-content:space-between;gap:16px;padding:14px 0 0;color:var(--ivory-2);flex-wrap:wrap}
@media (max-width:900px){.hero-top{grid-template-columns:1fr}.hero-panel{aspect-ratio:4/3.2}}
@media (max-width:600px){.kinetic{font-size:15vw}}

/* ---------- manifeste ---------- */
.manifest{padding-block:clamp(110px,16vw,220px)}
.manifest .eyebrow{color:var(--copper);margin-bottom:34px}
.manifest .words{font-family:var(--serif);font-size:clamp(1.95rem,4.7vw,4.5rem);line-height:1.1;letter-spacing:-.006em;max-width:22ch;
  font-weight:400}
.manifest .w{opacity:.22;transition:opacity .2s}
.manifest .w.lit{opacity:1}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(70px,9vw,120px);border-top:1px solid var(--line)}
.facts div{padding:22px 22px 0 0;display:grid;gap:8px;border-right:1px solid var(--line);padding-left:22px}
.facts div:first-child{padding-left:0}
.facts div:last-child{border-right:0}
.facts b{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.3vw,3rem);line-height:1.05;color:var(--gold)}
.facts span{color:var(--ivory-2);font-size:.9rem}
@media (max-width:800px){.facts{grid-template-columns:1fr 1fr}.facts div{border-right:0;padding-left:0;border-bottom:1px solid var(--line);padding-bottom:18px}}

/* ---------- trois éléments (défilement vertical) ---------- */
.metiers{position:relative;background:rgba(23,18,13,.32)}
.metiers-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end;padding:clamp(90px,11vw,150px) var(--gutter) clamp(40px,5vw,70px)}
.metiers-head h2{font-size:clamp(2.4rem,5.6vw,5.6rem);line-height:.98;font-weight:400;letter-spacing:-.01em}
.metiers-head h2 em{font-style:normal;color:var(--gold)}
.metiers-head p{color:var(--ivory-2);max-width:40ch}
.panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center;
  padding:clamp(60px,8vw,120px) var(--gutter);border-top:1px solid var(--line)}
.panel.flip .art{order:2}
.panel .art{position:relative;aspect-ratio:4/3.2;max-width:100%;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--ink)}
.panel canvas{position:absolute;inset:0;width:100%;height:100%}
.panel .art .tag{position:absolute;left:16px;top:14px;color:var(--ivory-2);z-index:1}
.panel .art .tag2{position:absolute;right:16px;bottom:14px;color:var(--ivory-2);z-index:1}
.panel .copy{display:grid;gap:22px;min-width:0}
.panel .el{display:flex;gap:14px;align-items:center}
.panel .el i{width:34px;height:1px;background:currentColor}
.panel h3{font-size:clamp(2.8rem,6vw,5.8rem);line-height:.95;letter-spacing:-.012em;font-weight:400}
.panel .lead{font-size:clamp(1.12rem,1.5vw,1.3rem);max-width:36ch;line-height:1.5}
.panel ul{list-style:none;padding:0;margin:0;display:grid;border-top:1px solid var(--line)}
.panel li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ivory-2);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline}
.panel li span:last-child{color:var(--ivory);font-size:.82rem;letter-spacing:.03em;text-align:right;white-space:nowrap}
.specs{display:flex;flex-wrap:wrap;gap:8px}
.specs span{border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:.8rem;letter-spacing:.02em;color:var(--ivory)}
.panel[data-el="eau"] .el{color:var(--eau)}
.panel[data-el="chaleur"] .el{color:var(--chaud)}
.panel[data-el="air"] .el{color:var(--gold)}
@media (max-width:900px){
  .metiers-head{grid-template-columns:1fr}
  .panel{grid-template-columns:1fr}
  .panel.flip .art{order:0}
}
/* ---------- liens et boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;text-decoration:none;border-radius:999px;padding:14px 22px;
  border:1px solid var(--gold);color:var(--ink);background:var(--gold);font-size:.95rem;font-weight:500;letter-spacing:.02em;
  transition:transform .4s var(--ease),background .3s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--gold)}
.link{color:var(--gold);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- dépannage ---------- */
.urgence{background:var(--copper);color:var(--on-sand);overflow:hidden;padding-block:clamp(60px,8vw,110px) clamp(50px,6vw,80px)}
.marquee{display:flex;white-space:nowrap;font-size:clamp(3rem,9vw,8.5rem);line-height:1.05;letter-spacing:-.01em;
  font-family:var(--serif);font-weight:600;color:var(--on-sand)}
.marquee .mt{display:flex;gap:.6em;padding-right:.6em;animation:mq 26s linear infinite}
.marquee .mt span:nth-child(even){color:transparent;-webkit-text-stroke:1.5px var(--on-sand)}
@keyframes mq{to{transform:translateX(-100%)}}
.urgence .inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end;margin-top:clamp(40px,6vw,80px)}
.urgence p{max-width:44ch;font-size:1.1rem}
.urgence .num{font-family:var(--serif);font-size:clamp(2.5rem,5.6vw,5.2rem);font-weight:600;letter-spacing:0;font-variant-numeric:lining-nums;user-select:all;line-height:1}
.urgence .num-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.copy-btn{background:var(--on-sand);color:var(--copper);border:0;border-radius:999px;padding:10px 16px;font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.urgence small{display:block;margin-top:14px;font-size:.85rem;opacity:.85}
@media (max-width:800px){.urgence .inner{grid-template-columns:1fr}}

/* ---------- réalisations ---------- */
.real{padding-block:clamp(100px,13vw,180px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(40px,6vw,80px)}
.sec-head h2{font-size:clamp(2.4rem,6vw,6rem);line-height:.96;letter-spacing:-.012em;font-weight:400}
.sec-head h2 em{font-style:normal;color:var(--gold)}
.sec-head p{color:var(--ivory-2);max-width:34ch}
@media (max-width:700px){.sec-head{flex-direction:column;align-items:start}}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:start}
.shot{margin:0;position:relative;cursor:pointer}
.shot .frame{overflow:hidden;border-radius:3px;background:var(--ink-2)}
.shot img{width:100%;height:auto;transform:scale(1.08);transition:transform 1.4s var(--ease),filter 1s;filter:saturate(.85) contrast(1.05)}
.shot:hover img{transform:scale(1.02);filter:saturate(1) contrast(1.05)}
.shot figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:12px;font-size:.95rem}
.shot figcaption span:last-child{color:var(--ivory-2)}
.s1{grid-column:1 / span 7}.s2{grid-column:9 / span 4;align-self:end}
.s3{grid-column:2 / span 4;margin-top:clamp(30px,5vw,70px)}.s4{grid-column:8 / span 5;margin-top:clamp(60px,9vw,140px)}
.s1 .frame{aspect-ratio:16/11}.s2 .frame,.s3 .frame,.s4 .frame{aspect-ratio:4/5}
.shot .frame img{height:100%;object-fit:cover}
@media (max-width:800px){.gallery{grid-template-columns:1fr 1fr}.s1,.s2,.s3,.s4{grid-column:auto;margin-top:0;align-self:start}.s1{grid-column:1 / -1}}
dialog#lb{border:0;padding:0;background:transparent;max-width:min(92vw,1100px);max-height:92svh}
dialog#lb::backdrop{background:rgba(8,6,4,.9);backdrop-filter:blur(6px)}
dialog#lb img{max-height:82svh;width:auto;margin:auto;border-radius:3px}
dialog#lb p{color:var(--ivory);text-align:center;padding-top:12px}
dialog#lb button{position:absolute;top:8px;right:8px;background:var(--ink);color:var(--ivory);border:1px solid var(--line);border-radius:999px;width:40px;height:40px;cursor:pointer;font-size:1.2rem}

/* ---------- approche (section claire) ---------- */
.approche{background:var(--sand);color:var(--on-sand);padding-block:clamp(100px,13vw,180px)}
.approche .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:start}
.approche figure{margin:0;position:sticky;top:110px}
.approche figure .frame{overflow:hidden;border-radius:3px;aspect-ratio:4/5}
.approche figure img{width:100%;height:120%;object-fit:cover}
.approche figcaption{color:var(--on-sand-2);padding-top:10px}
.approche .eyebrow{color:var(--copper)}
.approche h2{font-size:clamp(2.4rem,5.6vw,5.4rem);line-height:.96;letter-spacing:-.012em;font-weight:400;margin:18px 0 34px}
.approche h2 em{font-style:normal;color:var(--copper)}
.approche .body{display:grid;gap:20px;font-size:1.08rem;max-width:46ch}
.steps{list-style:none;padding:0;margin:clamp(60px,8vw,100px) 0 0;position:relative;display:grid;gap:0}
.steps .pipe{position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line-sand);border-radius:2px}
.steps .pipe i{position:absolute;inset:0;background:var(--copper);transform-origin:top;transform:scaleY(.0)}
.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:22px;padding:0 0 38px}
.steps .node{width:32px;height:32px;border-radius:50%;border:2px solid var(--line-sand);background:var(--sand);display:grid;place-items:center;
  font-family:var(--sans);font-weight:500;font-size:.68rem;position:relative;z-index:1;transition:border-color .4s,background .4s,color .4s}
.steps li.on .node{border-color:var(--copper);background:var(--copper);color:var(--sand)}
.steps h3{font-size:1.75rem;font-weight:600;line-height:1.1;margin-bottom:6px}
.steps p{color:var(--on-sand-2)}
@media (max-width:860px){.approche .grid{grid-template-columns:1fr}.approche figure{position:relative;top:0}}

/* ---------- territoire ---------- */
.terr{padding-block:clamp(100px,12vw,170px);overflow:hidden}
.terr .eyebrow{color:var(--copper);margin-bottom:24px}
.canton{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-block:6px}
.canton b{font-weight:400;font-variant-numeric:lining-nums;font-size:clamp(3rem,12vw,11rem);line-height:.95;letter-spacing:-.012em;font-family:var(--serif);font-variation-settings:"wght" 400;
  transition:font-variation-settings .7s var(--ease),color .5s}
.canton:hover b{font-variation-settings:"wght" 650;color:var(--gold)}
.canton span{color:var(--ivory-2);text-align:right}
.anchor{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:34px;color:var(--ivory-2)}
.anchor b{color:var(--ivory);font-weight:400}

/* ---------- questions ---------- */
.faq{padding-block:clamp(80px,10vw,140px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(30px,6vw,90px);border-top:1px solid var(--line)}
.faq h2{font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:.98;letter-spacing:-.01em;font-weight:400}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;font-family:var(--serif);font-size:1.45rem;font-weight:500;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;color:var(--gold);transition:transform .4s var(--ease)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{color:var(--ivory-2);padding:0 0 22px;max-width:60ch}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* ---------- fiche entreprise ---------- */
.fiche{padding-block:clamp(70px,8vw,110px);border-top:1px solid var(--line)}
.fiche-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(20px,5vw,80px);margin-bottom:36px}
.fiche-head .eyebrow{color:var(--copper)}
.fiche-head p:last-child{color:var(--ivory-2);max-width:60ch}
.fiche-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.fiche-grid div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line);display:grid;gap:6px;align-content:start}
.fiche-grid dt{color:var(--ivory-2);font-size:.66rem}
.fiche-grid dd{margin:0;font-size:.98rem}
@media (max-width:900px){.fiche-head{grid-template-columns:1fr}.fiche-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fiche-grid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{padding-block:clamp(90px,11vw,150px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,90px)}
.contact h2{font-size:clamp(2.8rem,7vw,7rem);line-height:.92;letter-spacing:-.012em;font-weight:400}
.contact h2 em{font-style:normal;color:var(--gold)}
.lines{margin-top:40px;display:grid;border-top:1px solid var(--line)}
.lines div{display:grid;grid-template-columns:170px minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.lines div > .v:last-child{grid-column:2 / -1}
@media (max-width:600px){.lines div{grid-template-columns:minmax(0,1fr) auto}.lines .k{grid-column:1 / -1}.lines div > .v:last-child{grid-column:1 / -1}}
.lines .v{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.85rem);font-weight:500;font-variant-numeric:lining-nums;user-select:all}
.lines .k{color:var(--ivory-2)}
.lines .copy-btn{background:transparent;color:var(--gold);border:1px solid var(--line)}
form.req{background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,3vw,40px);display:grid;gap:18px;align-content:start;min-width:0}
form.req h3{font-size:1.9rem;font-weight:500;line-height:1.1}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:8px;font-size:.85rem;color:var(--ivory-2)}
input,select,textarea{font:inherit;color:var(--ivory);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;width:100%}
select option{background:var(--ink-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical;min-height:110px}
.note{font-size:.8rem;color:var(--ivory-2)}
.summary{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.summary textarea{border:1px solid var(--line);padding:12px;border-radius:4px;min-height:170px;font-size:.88rem}
.status{font-size:.85rem;color:var(--gold);min-height:1.2em}
@media (max-width:860px){.contact{grid-template-columns:1fr}.frow{grid-template-columns:1fr}}

/* ---------- pied ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .manifest .w{opacity:1}
}

/* ---------- utilitaires (aucun style en ligne : CSP stricte) ---------- */
.sr-defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:6px;
  text-decoration:none;font-weight:500;transition:top .2s}
.skip:focus{top:12px}
.c-eau{color:var(--eau)}.c-copper{color:var(--chaud)}.c-gold{color:var(--gold)}
.mt14{margin-top:14px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
a.v,a.num{text-decoration:none;color:inherit}
a.v:hover,a.num:hover{color:var(--gold)}
.urgence a.num:hover{color:var(--ink)}
.urgence small a{color:inherit}
.fiche-grid dd a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}

/* ---------- pied de page : signature Endry ---------- */
.foot{position:relative;border-top:1px solid var(--line);padding:clamp(70px,9vw,130px) 0 calc(28px + env(safe-area-inset-bottom,0px));overflow:hidden;
  background:radial-gradient(70% 90% at 50% 100%,rgba(159,114,42,.10),transparent 70%)}
.sign{display:grid;justify-items:center;gap:clamp(22px,3vw,36px)}
.sign-link{display:block;width:100%;max-width:1320px;text-decoration:none;border-radius:8px}
.lockup{display:block;width:100%;height:auto;overflow:visible}
.lockup-v{display:none;max-width:420px;margin:0 auto}
.sign-sub{color:var(--ivory-2);text-align:center;letter-spacing:.32em}
.fbot{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:space-between;align-items:center;margin-top:clamp(60px,7vw,100px);
  padding-top:22px;border-top:1px solid var(--line);color:var(--ivory-2);font-size:.85rem}
.flinks{display:flex;flex-wrap:wrap;gap:10px 26px}
.flinks a{color:var(--ivory);text-decoration:none;opacity:.8;transition:opacity .3s}
.flinks a:hover{opacity:1;color:var(--gold)}
@media (max-width:700px){.lockup-h{display:none}.lockup-v{display:block}.fbot{justify-content:center;text-align:center}.flinks{justify-content:center}}
/* apparition : monogramme, filet, nom, métiers, puis un reflet passe sur les lettres */
.js .sign .s-mono,.js .sign .s-word,.js .sign .s-tag{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.4s var(--ease)}
.js .sign .s-word{transition-delay:.18s}.js .sign .s-tag{transition-delay:.42s}
.js .sign .s-rule{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease) .25s}
.js .sign.in .s-mono,.js .sign.in .s-word,.js .sign.in .s-tag{opacity:1;transform:none}
.js .sign.in .s-rule{stroke-dashoffset:0}
.sign.in .s-sheen{animation:sheen 2.6s var(--ease) 1.2s 1 both}
.sign-link:hover .s-sheen{animation:sheen 1.8s var(--ease) 0s 1 both}
@keyframes sheen{from{transform:translateX(0)}to{transform:translateX(1900px)}}
@media (prefers-reduced-motion:reduce){.js .sign .s-mono,.js .sign .s-word,.js .sign .s-tag{opacity:1;transform:none}
  .js .sign .s-rule{stroke-dashoffset:0}.s-sheen{display:none}}

/* ---------- pages légales ---------- */
.legal{max-width:820px;margin:0 auto;padding:calc(130px + env(safe-area-inset-top,0px)) var(--gutter) 90px}
.legal h1{font-size:clamp(2.4rem,6vw,4rem);line-height:1;font-weight:400;margin-bottom:30px}
.legal h2{font-size:1.6rem;font-weight:600;line-height:1.15;margin:38px 0 10px;color:var(--gold)}
.legal p,.legal li{color:var(--ivory-2);margin-bottom:12px}
.legal a{color:var(--gold)}
.legal .back{display:inline-block;margin-top:40px}

/* ---------- typographie fluide : tailles et graisses du texte courant ---------- */
/* Cormorant a de petites minuscules : le texte courant est plus grand et un peu plus gras qu'avec une linéale. */
body{font-size:20px;font-weight:500;line-height:1.5;letter-spacing:.002em}
.mono{font-weight:600;font-size:.86rem;letter-spacing:.22em}
.top nav a{font-size:1.1rem;font-weight:600;letter-spacing:.01em}
.top .urgent,.burger{font-size:.98rem;font-weight:600;letter-spacing:.03em}
@media (max-width:900px){.top nav a{font-size:2.2rem;font-weight:500}}
.hero-side p{font-size:1.22rem;line-height:1.45}
.elements a b{font-size:1.36rem;font-weight:600;letter-spacing:0}
.facts span{font-size:1.1rem;line-height:1.35}
.metiers-head p,.sec-head p{font-size:1.2rem;line-height:1.45}
.panel .lead{font-size:clamp(1.4rem,1.9vw,1.7rem);line-height:1.32;font-weight:500}
.panel li{font-size:1.16rem}
.panel li span:last-child{font-size:1.04rem;font-weight:600;letter-spacing:.01em}
.specs span{font-size:1rem;font-weight:600;letter-spacing:.01em;padding:6px 14px}
.btn{font-size:1.18rem;font-weight:600;letter-spacing:.01em;padding:13px 24px}
.urgence p{font-size:1.32rem;line-height:1.4}
.copy-btn{font-size:.84rem;font-weight:700;letter-spacing:.16em}
.urgence small{font-size:1.04rem}
.shot figcaption{font-size:1.14rem}
.approche .body{font-size:1.3rem;line-height:1.5}
.steps .node{font-size:.92rem;font-weight:700}
.steps p{font-size:1.14rem}
.anchor{font-size:1.1rem}
.canton span{font-size:1.1rem}
.faq details p{font-size:1.18rem;line-height:1.5}
.fiche-head p:last-child{font-size:1.16rem}
.fiche-grid dt{font-size:.8rem}
.fiche-grid dd{font-size:1.2rem}
label{font-size:1.04rem}
input,select,textarea{font-size:1.14rem}
.note{font-size:1rem}
.summary textarea{font-size:1.06rem}
.status{font-size:1.04rem}
.fbot{font-size:1.04rem}
.sign-sub{letter-spacing:.3em}
.legal p,.legal li{font-size:1.16rem;line-height:1.55}
dialog#lb p{font-size:1.14rem}
/* les légendes plus larges ne doivent jamais élargir la page sur mobile */
.shot{min-width:0}
.shot figcaption{flex-wrap:wrap;gap:4px 12px}
@media (max-width:800px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* cantons sur mobile : le nom, puis son repère en dessous (plus de coupure au milieu d'un repère) */
@media (max-width:600px){
  .canton{flex-direction:column;align-items:flex-start;gap:2px;padding-block:14px}
  .canton span{text-align:left;font-size:.78rem;letter-spacing:.18em}
  .canton b{font-size:clamp(3.2rem,15vw,4.6rem)}
  .mono{font-size:.8rem;letter-spacing:.18em}
}

/* ---------- mobile : passe complète du 04.10.2026 (menu, rythme vertical, galerie, alignements) ---------- */
/* chiffres clés : le texte commence à la même hauteur dans chaque colonne */
.facts div{align-content:start}
/* menu plein écran : l'en-tête floutée enfermait le menu dans sa propre hauteur (il s'ouvrait par-dessus la page) */
.top.open{background:var(--ink);backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:none}
@media (max-width:900px){
  .top nav{height:100vh;height:100dvh;gap:22px;padding:90px var(--gutter) 40px}
  .top.open .burger{background:var(--ink)}
}
@media (max-width:800px){
  /* galerie : une grande photo, deux côte à côte, une grande ; même intervalle partout, légendes sur deux lignes */
  .gallery{gap:30px 14px}
  .s1,.s4{grid-column:1 / -1}
  .s2,.s3,.s4{align-self:start;margin-top:0}
  .s4 .frame{aspect-ratio:16/11}
  .shot figcaption{flex-direction:column;gap:2px;padding-top:10px}
}
@media (max-width:700px){
  :root{--gutter:20px}
  /* rythme vertical : le même intervalle entre toutes les sections, sans grands vides */
  .hero{padding-top:calc(116px + env(safe-area-inset-top,0px))}
  .hero .eyebrow{margin-bottom:18px;text-wrap:balance}
  .hero-side{gap:18px}
  .hero-panel{margin-top:36px}
  .hero-cap{gap:4px 16px;padding-top:12px}
  .manifest{padding-block:80px 72px}
  .manifest .eyebrow{margin-bottom:22px}
  .facts{margin-top:52px}
  .facts div{padding-top:18px}
  .metiers-head{padding:72px var(--gutter) 34px;gap:16px}
  .panel{padding:46px var(--gutter);gap:26px}
  .panel .copy{gap:18px}
  .urgence{padding-block:52px 48px}
  .urgence .inner{margin-top:30px;gap:26px}
  .urgence .inner .mono{letter-spacing:.14em;line-height:1.5}
  .real,.approche,.terr{padding-block:76px}
  .sec-head{margin-bottom:30px;gap:14px}
  .approche .grid{gap:30px}
  .approche h2{margin:14px 0 22px}
  .steps{margin-top:46px}
  .steps li{padding-bottom:28px;gap:18px}
  .terr .eyebrow{margin-bottom:14px}
  .anchor{margin-top:26px;gap:8px 28px}
  .faq{padding-block:68px;gap:18px}
  .faq summary{padding:18px 0;font-size:1.32rem}
  .fiche{padding-block:60px}
  .fiche-head{margin-bottom:26px;gap:12px}
  .contact{padding-block:72px 64px;gap:38px}
  .lines{margin-top:26px}
  form.req{padding:24px 20px}
  .foot{padding-top:60px}
  .sign-sub{text-wrap:balance;letter-spacing:.2em;font-size:.72rem;padding-inline:var(--gutter);line-height:1.9}
  .fbot{margin-top:40px;padding-inline:var(--gutter)}
}
/* ouverture du menu : immédiate et opaque (pas de fondu qui pourrait rester à mi-chemin) ; le logo reste visible */
@media (max-width:900px){
  .top nav{transition:none}
  .top.open nav{opacity:1;background:var(--ink)}
  .top .brand{position:relative;z-index:2}
}
/* cibles tactiles : au moins 44 px de haut pour le doigt (boutons, liens de contact, liens du pied de page) */
.burger,.copy-btn,.top .urgent{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:900px){.burger{display:inline-flex}}
@media (min-width:901px){.burger{display:none}}
a.v{display:inline-flex;align-items:center;min-height:44px}
.flinks a{display:inline-flex;align-items:center;min-height:44px}
.fiche-grid dd a{display:inline-block;padding-block:8px}

/* ---------- police : Montserrat pour tout le texte (04.10.2026) ----------
   Cormorant Garamond reste la lettre du logo, et seulement du logo. Montserrat est plus large et a de grandes
   minuscules : les titres sont plus petits et en graisse légère, le texte courant revient à une taille normale. */
:root{--serif:"Montserrat","Helvetica Neue",Arial,sans-serif;--sans:var(--serif)}
body{font-size:17px;font-weight:400;line-height:1.62;letter-spacing:0}
h1,h2,h3{font-weight:300;letter-spacing:-.035em}
.mono{font-weight:600;font-size:.72rem;letter-spacing:.2em}
.top nav a{font-size:.92rem;font-weight:500;letter-spacing:0}
.top .urgent,.burger{font-size:.8rem;font-weight:600;letter-spacing:.04em}
@media (max-width:900px){.top nav a{font-size:1.8rem;font-weight:300;letter-spacing:-.03em}}
.kinetic{font-size:clamp(2.7rem,8.4vw,9.2rem);line-height:.98;letter-spacing:-.045em;font-weight:300}
@media (max-width:600px){.kinetic{font-size:12.4vw}}
.hero-side p{font-size:1.02rem;line-height:1.6}
.elements a b{font-size:1.08rem;font-weight:500}
.manifest .words{font-size:clamp(1.5rem,3.4vw,3.2rem);line-height:1.24;letter-spacing:-.03em;font-weight:300;max-width:25ch}
.facts b{font-size:clamp(1.7rem,2.8vw,2.6rem);font-weight:300;letter-spacing:-.03em}
.facts span{font-size:.92rem;line-height:1.5}
.metiers-head h2{font-size:clamp(2rem,4.4vw,4.4rem);line-height:1.04;font-weight:300;letter-spacing:-.04em}
.metiers-head p,.sec-head p{font-size:1rem;line-height:1.6}
.panel h3{font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:1;font-weight:300;letter-spacing:-.04em}
.panel .lead{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.45;font-weight:400}
.panel li{font-size:.98rem}
.panel li span:last-child{font-size:.82rem;font-weight:600;letter-spacing:.02em}
.specs span{font-size:.8rem;font-weight:500;letter-spacing:.01em}
.btn{font-size:.88rem;font-weight:600;letter-spacing:.03em}
.marquee{font-size:clamp(2.4rem,7vw,6.6rem);font-weight:300;letter-spacing:-.04em}
.urgence p{font-size:1.08rem;line-height:1.55}
.urgence .num{font-size:clamp(2rem,4.4vw,4.2rem);font-weight:600;letter-spacing:-.03em}
.copy-btn{font-size:.68rem;font-weight:700;letter-spacing:.14em}
.urgence small{font-size:.9rem}
.sec-head h2{font-size:clamp(2rem,4.7vw,4.7rem);line-height:1.02;font-weight:300;letter-spacing:-.04em}
.shot figcaption{font-size:.95rem}
.approche h2{font-size:clamp(2rem,4.4vw,4.3rem);line-height:1.03;font-weight:300;letter-spacing:-.04em}
.approche .body{font-size:1.06rem;line-height:1.65}
.steps h3{font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.steps .node{font-size:.74rem}
.steps p{font-size:.98rem}
.anchor,.canton span{font-size:.9rem}
.canton b{font-size:clamp(2.4rem,9.4vw,8.6rem);letter-spacing:-.045em;font-variation-settings:"wght" 300}
.canton:hover b{font-variation-settings:"wght" 600}
.faq h2{font-size:clamp(1.9rem,3.7vw,3.5rem);line-height:1.05;font-weight:300;letter-spacing:-.04em}
.faq summary{font-size:1.12rem;font-weight:500;letter-spacing:-.01em}
.faq details p{font-size:1rem;line-height:1.65}
.fiche-head p:last-child{font-size:1rem}
.fiche-grid dt{font-size:.7rem}
.fiche-grid dd{font-size:1rem}
.contact h2{font-size:clamp(2.3rem,5.5vw,5.5rem);line-height:1;font-weight:300;letter-spacing:-.045em}
.lines .v{font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:400;letter-spacing:-.02em}
.req h3{font-weight:400;letter-spacing:-.025em}
label{font-size:.9rem}
input,select,textarea{font-size:1rem}
.note,.status{font-size:.88rem}
.summary textarea{font-size:.94rem}
.fbot{font-size:.9rem}
.sign-sub{letter-spacing:.24em}
.legal h1{font-weight:300;letter-spacing:-.04em}
.legal h2{font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.legal p,.legal li{font-size:1rem;line-height:1.7}
dialog#lb p{font-size:.98rem}
@media (max-width:700px){.faq summary{font-size:1.04rem}}
@media (max-width:600px){
  .canton span{font-size:.68rem;letter-spacing:.16em}
  .canton b{font-size:clamp(2.6rem,12vw,3.8rem)}
  .mono{font-size:.66rem;letter-spacing:.16em}
}

/* ---------- « Ce qu'on ne voit jamais » (06.10.2026) : la salle de bain se démonte au défilement ----------
   Plein écran. Le film n'a pas de bord : il se fond dans le fond du site en haut et en bas. Le texte tient dans la
   partie sombre de l'image (à gauche sur écran large, en bas sur téléphone, où un film vertical est servi).
   Des repères techniques se posent sur les pièces au fil des étapes. */
.film{position:relative}
.film-ecran{position:relative;display:grid;gap:28px;padding:clamp(90px,11vw,150px) var(--gutter)}
.film-vue{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0e0b08}
.film-vue img,.film-vue canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-vue canvas{opacity:0;transition:opacity .9s var(--ease)}
.film.pret .film-vue canvas{opacity:1}
.film.pret .film-vue img{opacity:0}
.film-texte{display:grid;gap:18px;min-width:0;max-width:34rem}
.film-texte .eyebrow{color:var(--copper)}
.film-texte h2{font-size:clamp(2.4rem,5.4vw,5.4rem);line-height:.96;font-weight:400;letter-spacing:-.012em;text-wrap:balance}
.film-texte h2 em{font-style:normal;color:var(--gold)}
.film-etapes{display:grid;gap:18px}
.film-etape .mono{display:block;color:var(--gold);margin-bottom:8px}
.film-num{font-style:normal}
.film-repere em{font-style:normal}
.film-etape[data-el="eau"] .mono{color:var(--eau)}
.film-etape[data-el="chaleur"] .mono{color:var(--chaud)}
.film-etape b{display:block;font-weight:500;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.15}
.film-etape p{color:var(--ivory-2);margin:8px 0 0;max-width:36ch;font-size:1.02rem;line-height:1.55}
.film-segments,.film-repere,.film-voile,.film-defile{display:none}

/* avec le script : piste haute, écran collé, film plein écran */
.films .film{height:440vh}
.films .film-ecran{position:sticky;top:0;height:100vh;height:100svh;padding:0;display:block;overflow:hidden}
.films .film-vue{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:transparent;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.films .film-vue canvas{transform:scale(var(--zoom,1));transform-origin:68% 22%;will-change:transform}
.films .film-vue img{opacity:0}
.films .film-voile{display:block;position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,11,8,.9) 0%,rgba(14,11,8,.55) 30%,transparent 56%)}
.films .film-texte{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(34rem,42vw);gap:clamp(18px,2.2vw,30px)}
.films .film-etapes{position:relative;display:block;min-height:11.5em}
.films .film-etape{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none}
.films .film-etape.vu{opacity:1;transform:none;pointer-events:auto}
.films .film-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(260px,60%)}
.film-segments span{position:relative;height:2px;background:var(--line);overflow:hidden}
.film-segments i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.films .film-defile{display:block;position:absolute;right:var(--gutter);bottom:calc(28px + env(safe-area-inset-bottom,0px));color:var(--ivory-2);
  font-variant-numeric:tabular-nums}
.film-defile b{color:var(--gold);font-weight:600}
/* repères techniques : un point sur la pièce, un filet, un libellé */
.films .film-repere{display:flex;align-items:center;gap:10px;position:absolute;left:0;top:0;z-index:2;white-space:nowrap;
  color:var(--ivory);opacity:0;transform:translate(-5px,-50%) scale(.96);transform-origin:left center;
  transition:opacity .45s var(--ease),transform .6s var(--ease);pointer-events:none}
.films .film-repere.vu{opacity:1;transform:translate(-5px,-50%)}
.film-repere::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 5px rgba(242,211,154,.2),0 0 18px rgba(242,211,154,.55)}
.film-repere i{flex:none;width:clamp(22px,3vw,46px);height:1px;background:var(--gold);opacity:.8}
.film-repere span{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(14,11,8,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.film-repere.g{flex-direction:row-reverse;transform-origin:right center}
.films .film-repere.g{transform:translate(calc(-100% + 5px),-50%) scale(.96)}
.films .film-repere.g.vu{transform:translate(calc(-100% + 5px),-50%)}
@media (max-aspect-ratio:4/5){
  /* téléphone : film vertical, la pièce en haut, le texte dans le bas sombre de l'image */
  .films .film{height:400vh}
  .films .film-vue canvas{transform-origin:50% 30%}
  .films .film-vue{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%)}
  .films .film-voile{background:linear-gradient(0deg,var(--ink) 0%,var(--ink) 19%,rgba(14,11,8,.86) 27%,rgba(14,11,8,0) 44%)}
  .films .film-texte{top:auto;bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:none;right:var(--gutter);width:auto;gap:12px}
  .films .film-texte h2{font-size:clamp(1.9rem,8.4vw,2.7rem)}
  .films .film-etapes{min-height:8.6em}
  .film-etape b{font-size:1.22rem}
  .film-etape p{font-size:.96rem;line-height:1.5}
  .films .film-defile{display:none}
  .film-repere span{padding:5px 10px;font-size:.6rem;letter-spacing:.14em}
  .film-repere em{display:none}
  .films .film-repere.g{flex-direction:row;transform-origin:left center;transform:translate(-4px,-50%) scale(.96)}
  .films .film-repere.g.vu{transform:translate(-4px,-50%)}
  .films .film-repere.gp{flex-direction:row-reverse;transform-origin:right center;transform:translate(calc(-100% + 4px),-50%) scale(.96)}
  .films .film-repere.gp.vu{transform:translate(calc(-100% + 4px),-50%)}
  .films .film-repere{transform:translate(-4px,-50%) scale(.96)}
  .films .film-repere.vu{transform:translate(-4px,-50%)}
  .film-repere i{width:16px}
  .film-repere::before{width:8px;height:8px}
}
@media (max-aspect-ratio:4/5) and (max-height:680px){
  .films .film-texte h2{font-size:1.7rem}
  .films .film-etapes{min-height:7.6em}
}