/* Gabarits propres à chaque univers : habitations (jour), lieux professionnels (nuit), studio (portrait) */
.rv{clip-path:inset(var(--r,0%) 0 0 0)}
.rv img{width:100%;height:100%;object-fit:cover}
.sec-h{font-family:var(--serif);font-weight:300;letter-spacing:-.012em}

/* ================= HABITATIONS : la maison de jour ================= */
html.jour,html.jour body{background:var(--ivoire);color:var(--noir)}
html.jour ::selection{background:var(--noir);color:var(--ivoire)}
.hab-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));min-height:100svh}
.hab-hero .tx{grid-column:1 / span 5;padding:clamp(130px,17vh,190px) clamp(20px,3vw,48px) clamp(44px,8vh,84px) var(--gutter);display:flex;flex-direction:column;justify-content:flex-end}
.hab-hero h1{font-size:clamp(3rem,5.6vw,7rem);line-height:.98}
.hab-hero h1 .l{white-space:normal}
.hab-hero h1 .l:nth-child(2) span{padding-left:0}
.hab-hero .lead{margin-top:36px;max-width:30ch;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.7vw,1.75rem);line-height:1.38;color:#3d3933}
.hab-hero .meta{margin-top:clamp(36px,6vh,64px)}
.hab-hero .meta div{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:13px 0;border-top:1px solid rgba(14,13,12,.22)}
.hab-hero .meta div:last-child{border-bottom:1px solid rgba(14,13,12,.22)}
.hab-hero .meta dt{color:#8a7448}
.hab-hero .meta dd{font-family:var(--serif);font-size:1.15rem;font-weight:400;text-align:right}
.hab-hero .im{grid-column:6 / -1;position:relative;overflow:hidden;background:#cfc8ba}
.hab-hero .im img{position:absolute;inset:-4% 0;width:100%;height:108%;object-fit:cover;animation:settle 4.5s var(--ease) both;will-change:transform}

.conv{padding:clamp(110px,14vw,220px) var(--gutter) clamp(100px,13vw,200px)}
.conv h2{font-size:clamp(2.4rem,4.8vw,5.2rem);line-height:1.02;max-width:13em}
.conv .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.6vw,64px);margin-top:clamp(56px,8vw,120px);align-items:start}
.conv .c:nth-child(2){margin-top:clamp(70px,10vw,170px)}
.conv .c:nth-child(3){margin-top:clamp(24px,3.4vw,56px)}
.conv .rv{overflow:hidden;background:#cfc8ba;aspect-ratio:4 / 5}
.conv .c:nth-child(2) .rv{aspect-ratio:2 / 3}
.conv h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.3vw,2.4rem);line-height:1.1;margin-top:26px}
.conv p{margin-top:14px;color:#4b463f;max-width:34ch}

.dossier{background:var(--noir);color:var(--ivoire)}
.dossier .head{padding:clamp(110px,14vw,220px) var(--gutter) clamp(50px,6vw,100px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.dossier h2{grid-column:1 / span 8;font-size:clamp(2.6rem,6vw,6.6rem);line-height:.98}
.dossier .head p{grid-column:10 / span 3;color:var(--taupe);padding-bottom:1rem}
.dossier .stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:0 var(--gutter)}
.dossier .sticky{grid-column:1 / span 6;position:sticky;top:0;height:100svh;padding:clamp(70px,11vh,110px) 0 clamp(28px,5vh,54px)}
.dossier .frame{position:relative;height:100%;overflow:hidden;background:var(--graphite)}
.dossier .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity 1.1s ease,transform 2.6s var(--ease)}
.dossier .frame img.on{opacity:1;transform:scale(1)}
.dossier .steps{grid-column:8 / span 5;padding-bottom:clamp(60px,12vh,160px)}
.dossier .st{min-height:82svh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .8s ease}
.dossier .st.on{opacity:1}
.dossier .st .n{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(3rem,6vw,6.4rem);line-height:1;color:var(--champagne)}
.dossier .st h3{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.3vw,3.5rem);line-height:1.05;margin-top:18px;letter-spacing:-.01em}
.dossier .st p{margin-top:22px;max-width:40ch;color:rgba(238,234,226,.76)}

.fin-hab{padding:clamp(110px,14vw,220px) var(--gutter) clamp(90px,11vw,170px)}
.fin-hab .say{max-width:26ch;font-family:var(--serif);font-size:clamp(1.4rem,2vw,2rem);line-height:1.3;color:#3d3933;margin-bottom:clamp(36px,5vw,70px)}
.fin-hab a.giant{display:flex;justify-content:space-between;align-items:baseline;gap:30px;border-top:1px solid rgba(14,13,12,.25);padding:clamp(22px,2.8vw,40px) 0;font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,8vw,9rem);line-height:.98;letter-spacing:-.02em;transition:padding .7s var(--ease),color .5s}
.fin-hab a.giant.second{font-size:clamp(1.6rem,3.4vw,3.6rem);border-bottom:1px solid rgba(14,13,12,.25)}
.fin-hab a.giant:hover{padding-left:.25em;color:#8a7448;font-style:italic}
.fin-hab a.giant small{font-family:var(--sans);font-style:normal;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:#6b655b}

/* ================= LIEUX PROFESSIONNELS : les cinq salles, de nuit ================= */
.salles{position:relative;height:100svh;min-height:640px;background:var(--noir);overflow:hidden}
.salles .pan{position:absolute;inset:0;display:flex}
.salle{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;border-left:1px solid rgba(238,234,226,.2);transition:flex-grow 1.1s var(--ease);outline-offset:-6px}
.salle:first-child{border-left:0}
.salle.on{flex-grow:5.4;cursor:pointer}
.salle>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);filter:brightness(.5) saturate(.85);transition:filter 1.1s ease,transform 2s var(--ease)}
.salle.on>img{transform:scale(1);filter:brightness(.9) saturate(1)}
.salle::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,5,.2) 0%,rgba(6,6,5,0) 30%,rgba(6,6,5,.78) 100%);pointer-events:none}
.salle .vn{position:absolute;z-index:2;left:50%;bottom:clamp(34px,6vh,64px);writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);white-space:nowrap;font-family:var(--serif);font-weight:300;font-size:clamp(1.3rem,1.9vw,2.1rem);letter-spacing:.02em;transition:opacity .5s ease}
.salle.on .vn{opacity:0}
.salle .open{position:absolute;z-index:2;left:clamp(24px,3vw,56px);right:clamp(24px,3vw,56px);bottom:clamp(36px,6.5vh,76px);opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s}
.salle.on .open{opacity:1;visibility:visible;transform:none;transition:opacity .9s ease .5s,transform 1s var(--ease) .5s,visibility 0s}
.salle .open h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4.6vw,5.2rem);line-height:1;letter-spacing:-.015em}
.salle .open p{margin-top:18px;max-width:38ch;color:rgba(238,234,226,.86)}
.salle .open .link{display:inline-block;margin-top:26px}
.salles .top{position:absolute;z-index:5;left:var(--gutter);top:clamp(104px,15vh,150px);right:var(--gutter);pointer-events:none;display:flex;justify-content:space-between;gap:40px;align-items:flex-start}
.salles .top h1{font-size:clamp(2.4rem,4.6vw,5.4rem);line-height:.98;max-width:9em}
.salles .top h1 .l{white-space:normal}
.salles .top h1 .l:nth-child(2) span{padding-left:0}
.salles .top p{max-width:26ch;color:rgba(238,234,226,.85);padding-top:.8em;text-align:right}
.salles::before{content:"";position:absolute;inset:0 0 auto 0;height:46%;z-index:4;background:linear-gradient(180deg,rgba(6,6,5,.7),rgba(6,6,5,0));pointer-events:none}

.ouv{padding:clamp(110px,14vw,220px) var(--gutter) clamp(90px,11vw,170px)}
.ouv .hd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.ouv h2{grid-column:1 / span 7;font-size:clamp(2.6rem,6vw,6.4rem);line-height:.98}
.ouv .hd p{grid-column:9 / span 4;color:var(--taupe);padding-bottom:1rem}
.rail{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(64px,9vw,140px)}
.rail::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--champagne);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.rail::after{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--hair);z-index:-1}
.rail .j{position:relative;padding:48px clamp(14px,2vw,34px) 0 0}
.rail .j::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--noir);border:1px solid var(--champagne);transition:background .6s ease}
.rail .j.on::before{background:var(--champagne)}
.rail h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2vw,2.2rem);line-height:1.1}
.rail p{margin-top:14px;font-size:.96rem;line-height:1.65;color:rgba(238,234,226,.7)}
.rail .j:last-child h3{font-style:italic;color:var(--champagne)}

.cahier{background:var(--graphite);padding:clamp(100px,13vw,200px) var(--gutter)}
.cahier h2,.cahier h3{color:var(--ivoire)}
.cahier h2{font-size:clamp(2.4rem,5vw,5.4rem);line-height:1;max-width:11em}
.cahier .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(56px,8vw,120px);border-top:1px solid var(--hair)}
.cahier .c{padding:clamp(28px,3.4vw,52px) clamp(18px,2.6vw,44px) 0 0}
.cahier .c+.c{padding-left:clamp(18px,2.6vw,44px);border-left:1px solid var(--hair)}
.cahier h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,2.8vw,3rem);line-height:1.08}
.cahier p{margin-top:18px;color:rgba(238,234,226,.72);max-width:32ch}

.parole{padding:clamp(110px,14vw,220px) var(--gutter) clamp(90px,11vw,170px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.parole figure{grid-column:2 / span 9}
.parole blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2rem,4.4vw,4.8rem);line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.parole figcaption{margin-top:40px;color:var(--taupe)}
.parole figcaption b{color:var(--champagne);font-weight:400;margin-right:1.4em}

/* ================= STUDIO : le portrait ================= */
.st-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;min-height:100svh;padding:clamp(104px,14vh,140px) var(--gutter) clamp(36px,6vh,64px)}
.st-hero .ph{grid-column:1 / span 5;position:relative;overflow:hidden;background:var(--graphite);min-height:62svh}
.st-hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:settle 5s var(--ease) both}
.st-hero .ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(238,234,226,.35);pointer-events:none}
.st-hero .tx{grid-column:7 / span 6;display:flex;flex-direction:column;justify-content:flex-end}
.st-hero h1{font-size:clamp(3.4rem,8.2vw,9.6rem);line-height:.92}
.st-hero h1 .l{white-space:normal}
.st-hero .role{margin-top:34px;color:var(--champagne)}
.st-hero .lead{margin-top:24px;font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.2vw,2.3rem);line-height:1.28;max-width:22em}

.route{padding:clamp(100px,13vw,200px) var(--gutter) clamp(80px,10vw,150px)}
.route .cap{max-width:22ch;font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.2vw,2.3rem);line-height:1.25;color:var(--taupe);margin-bottom:clamp(36px,5vw,70px)}
.route ul{list-style:none;border-bottom:1px solid var(--hair)}
.route li{display:flex;justify-content:space-between;align-items:baseline;gap:30px;border-top:1px solid var(--hair);padding:clamp(10px,1.6vw,22px) 0;transition:padding .7s var(--ease),color .5s}
.route li .nom{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7.4vw,8.4rem);line-height:1;letter-spacing:-.02em}
.route:hover li:not(:hover){color:rgba(238,234,226,.3)}
.route li:hover{padding-left:.2em}
.route li:last-child .nom{font-style:italic;color:var(--champagne)}

.manif{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;padding:clamp(70px,10vw,160px) var(--gutter)}
.manif .tx{grid-column:1 / span 5}
.manif .tx h2{font-size:clamp(2.2rem,3.8vw,4.2rem);line-height:1.04}
.manif .tx p{margin-top:24px;max-width:38ch;color:rgba(238,234,226,.74)}
.manif .tx h2+p{margin-top:30px}
.manif .tx p+h2{margin-top:clamp(40px,5vw,70px)}
.collage{grid-column:7 / span 6;position:relative;aspect-ratio:1 / 1.02}
.collage .rv{position:absolute;overflow:hidden;background:var(--graphite)}
.collage .a{left:0;top:0;width:68%;aspect-ratio:4 / 5}
.collage .b{right:0;bottom:0;width:56%;aspect-ratio:1;border:10px solid var(--noir)}

.vals{padding:clamp(80px,11vw,170px) var(--gutter)}
.vals h2{font-size:clamp(2.4rem,5vw,5.4rem);line-height:1;max-width:11em}
.vals .grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,6vw,110px);margin-top:clamp(50px,7vw,110px)}
.vals .v{border-top:1px solid var(--hair);padding:clamp(24px,3vw,40px) 0 clamp(36px,4.6vw,70px)}
.vals h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,2.8vw,3rem);line-height:1.08}
.vals p{margin-top:14px;color:rgba(238,234,226,.72);max-width:38ch}

.voix{padding:clamp(100px,13vw,200px) var(--gutter);background:var(--graphite);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.voix .stack{grid-column:2 / span 10;display:grid}
.voix .s{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
.voix .s.on{opacity:1;visibility:visible;transition:opacity .9s ease .2s,visibility 0s}
.voix blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2rem,4.2vw,4.6rem);line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.voix figcaption{margin-top:36px;color:var(--taupe)}
.voix figcaption b{color:var(--champagne);font-weight:400;margin-right:1.4em}
.voix .ctl{grid-column:2 / span 10;display:flex;gap:clamp(20px,3vw,44px);align-items:baseline;flex-wrap:wrap;margin-top:clamp(40px,5vw,70px);padding-top:22px;border-top:1px solid var(--hair)}
.voix .ctl button{font-family:var(--sans);font-size:.7rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;border-bottom:1px solid rgba(238,234,226,.45);padding-bottom:3px;transition:color .4s,border-color .4s}
.voix .ctl button:hover,.voix .ctl a:hover{color:var(--champagne);border-color:var(--champagne)}
.voix .ctl .cnt{color:var(--taupe)}
.voix .ctl a{margin-left:auto;border-bottom:1px solid rgba(238,234,226,.45);padding-bottom:3px}

.fin-st{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;padding:clamp(110px,14vw,230px) var(--gutter)}
.fin-st blockquote{grid-column:1 / span 7;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(2.6rem,6.4vw,7rem);line-height:1;letter-spacing:-.018em;text-wrap:balance}
.fin-st .act{grid-column:9 / span 4;padding-bottom:1rem}
.fin-st .act .btn{display:inline-block}
.fin-st .act p{margin-top:30px;color:var(--taupe)}
.fin-st .act p a{color:var(--ivoire);border-bottom:1px solid rgba(238,234,226,.4);margin-right:1.4em}
.fin-st .act p a:hover{color:var(--champagne);border-color:var(--champagne)}

/* ================= PAGE PROJET : compléments ================= */
.ensuite{list-style:none;counter-reset:e;margin-top:clamp(36px,5vw,64px);color:rgba(238,234,226,.78)}
.ensuite li{counter-increment:e;display:grid;grid-template-columns:2.4em 1fr;padding:6px 0;line-height:1.55}
.ensuite li::before{content:counter(e);font-family:var(--serif);font-style:italic;color:var(--champagne);font-size:1.15rem}

/* ================= MOBILE ================= */
@media (max-width:900px){
  .hab-hero{display:block;min-height:0}
  .hab-hero .tx{padding:118px var(--gutter) 40px}
  .hab-hero .im{height:78svh}
  .conv .cols{grid-template-columns:1fr}
  .conv .c:nth-child(2),.conv .c:nth-child(3){margin-top:0}
  .conv .c+.c{margin-top:56px}
  .dossier .head{display:block}
  .dossier .head p{margin-top:20px}
  .dossier .stage{display:block}
  .dossier .sticky{position:sticky;top:0;z-index:2;height:44svh;padding:70px 0 12px;background:var(--noir)}
  .dossier .steps{padding-bottom:40px}
  .dossier .st{min-height:56svh}
  .salles{height:auto;min-height:100svh}
  .salles .top{position:relative;left:0;right:0;top:0;display:block;padding:112px var(--gutter) 36px;background:var(--noir)}
  .salles .top p{text-align:left;margin-top:16px}
  .salles::before{display:none}
  .salles .pan{position:relative;display:block;inset:auto}
  .salle{display:block;flex:none;height:clamp(66px,10svh,90px);border-left:0;border-top:1px solid rgba(238,234,226,.2);transition:height 1s var(--ease)}
  .salle.on{height:64svh}
  .salle .vn{writing-mode:horizontal-tb;transform:none;left:var(--gutter);bottom:auto;top:50%;margin-top:-.7em}
  .salle .open{left:var(--gutter);right:var(--gutter)}
  .rail{grid-template-columns:1fr}
  .rail::before,.rail::after{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .rail::before{transform-origin:50% 0;transform:scaleY(var(--p,1))}
  .rail .j{padding:0 0 40px 42px}
  .cahier .cols{grid-template-columns:1fr}
  .cahier .c+.c{padding-left:0;border-left:0;border-top:1px solid var(--hair);margin-top:30px}
  .parole figure{grid-column:1 / -1}
  .st-hero{display:block;min-height:0}
  .st-hero .ph{min-height:0;height:62svh}
  .st-hero .tx{margin-top:36px}
  .manif{display:block}
  .collage{margin-top:56px}
  .vals .grid4{grid-template-columns:1fr}
  .voix .stack,.voix .ctl{grid-column:1 / -1}
  .fin-st{display:block}
  .fin-st .act{margin-top:44px}
}

/* ================= Galeries (habitations, studio, pages d'univers) ================= */
.un-gal{padding:clamp(80px,10vw,150px) var(--gutter)}
.un-gal h2{font-size:clamp(2rem,4vw,4rem);line-height:1.05;max-width:14em;margin-bottom:clamp(36px,5vw,72px)}
.un-gal .g{columns:2;column-gap:clamp(14px,1.6vw,24px)}
.un-gal.g3 .g{columns:3}
.un-gal figure{break-inside:avoid;margin:0 0 clamp(14px,1.6vw,24px);overflow:hidden;background:#cfc8ba}
.un-gal img{display:block;width:100%;height:auto}
.un-gal a{display:block}
.un-gal a img{transition:transform 1.2s var(--ease)}
.un-gal a:hover img{transform:scale(1.03)}
.un-lien{margin-top:clamp(36px,4vw,60px);text-align:center}
@media (max-width:900px){.un-gal .g,.un-gal.g3 .g{columns:1}}
/* Pages de jour : les blocs conçus pour la nuit (manifeste, valeurs) passent en texte sombre sur fond clair */
html.jour .manif .tx h2,html.jour .vals h2,html.jour .vals h3{color:var(--noir)}
html.jour .manif .tx p,html.jour .vals p{color:#4b463f}
html.jour .vals .v{border-top-color:rgba(14,13,11,.22)}
html.jour .collage .b{border-color:var(--ivoire)}