/* ════════════════════════════════════════════════════════════════
   RED ROC · MONACO — v3
   « Moins, mais monumental. »
   Nuit · Ivoire · Sang — Marcellus / Cormorant / Jost
   ════════════════════════════════════════════════════════════════ */

:root{
  --nuit:#0B0A08;
  --nuit-2:#100E0B;
  --ivoire:#EAE4D8;
  --brume:rgba(234,228,216,.52);
  --sang:#6B1D2A;
  --sang-vif:#8C2735;
  --ligne:rgba(234,228,216,.13);
  --caps:'Marcellus',serif;
  --poeme:'Cormorant Garamond',Georgia,serif;
  --ui:'Jost',-apple-system,sans-serif;
  --ez:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html.locked{overflow:hidden}
body{
  background:var(--nuit);color:var(--ivoire);
  font-family:var(--ui);font-weight:300;font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--sang);color:var(--ivoire)}

/* ── Typographie ────────────────────────────────────────────── */
.caps{font-family:var(--caps);font-weight:400;line-height:1.06;letter-spacing:.02em;text-transform:uppercase}
.poeme{font-family:var(--poeme);font-weight:300;font-style:italic;line-height:1.42}
.label{
  font-family:var(--ui);font-weight:300;font-size:.6rem;
  letter-spacing:.55em;text-transform:uppercase;color:var(--brume);
}
.label b{font-weight:400;color:var(--ivoire)}
.diamond{color:var(--sang-vif);font-style:normal}

/* ── Curseur ────────────────────────────────────────────────── */
@media(hover:hover) and (pointer:fine){
  body,a,button{cursor:none}
  .cursor{
    position:fixed;top:0;left:0;z-index:9000;pointer-events:none;
    width:5px;height:5px;border-radius:50%;background:var(--ivoire);
    transform:translate(-50%,-50%);
  }
  .cursor-ring{
    position:fixed;top:0;left:0;z-index:8999;pointer-events:none;
    width:34px;height:34px;border-radius:50%;border:1px solid var(--brume);
    transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;
    transition:width .45s var(--ez),height .45s var(--ez),border-color .45s,background .45s;
  }
  .cursor-ring span{
    font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;text-indent:.3em;
    color:var(--ivoire);opacity:0;transition:opacity .3s;white-space:nowrap;
  }
  .cursor-ring.on{width:52px;height:52px;border-color:var(--ivoire)}
  .cursor-ring.txt{width:86px;height:86px;background:rgba(11,10,8,.55);backdrop-filter:blur(3px);border-color:var(--sang-vif)}
  .cursor-ring.txt span{opacity:1}
}
@media(hover:none){.cursor,.cursor-ring{display:none}}

/* ── Fil de progression + chapitre ──────────────────────────── */
.fil{position:fixed;top:0;left:0;right:0;height:1px;z-index:1200;pointer-events:none}
.fil i{display:block;height:100%;background:var(--sang-vif);transform-origin:left;transform:scaleX(0)}
.chapitre{
  position:fixed;left:clamp(1.2rem,3vw,2.6rem);bottom:2.4rem;z-index:1100;
  display:flex;align-items:center;gap:1rem;pointer-events:none;
  font-family:var(--poeme);font-style:italic;font-size:.95rem;color:var(--brume);
  transition:opacity .5s;
}
.chapitre::before{content:'';width:2.4rem;height:1px;background:var(--ligne)}
@media(max-width:860px){.chapitre{display:none}}

/* ── Entrée ─────────────────────────────────────────────────── */
.entree{
  position:fixed;inset:0;z-index:6000;background:var(--nuit);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;
  transition:opacity 1.4s ease,visibility 1.4s;
}
.entree.done{opacity:0;visibility:hidden}
.entree__mark{
  font-family:var(--caps);font-size:clamp(1.5rem,3.4vw,2.4rem);text-transform:uppercase;
  letter-spacing:.9em;text-indent:.9em;color:var(--ivoire);
  animation:entree-track 3s var(--ez) forwards;
  white-space:nowrap;
}
@keyframes entree-track{
  0%{opacity:0;letter-spacing:1.6em;text-indent:1.6em}
  35%{opacity:1}
  100%{opacity:1;letter-spacing:.55em;text-indent:.55em}
}
.entree__d{color:var(--sang-vif);font-size:.7em;opacity:0;animation:fade 1.2s ease 1.2s forwards}
.entree__sub{
  font-size:.56rem;letter-spacing:.8em;text-indent:.8em;text-transform:uppercase;color:var(--brume);
  opacity:0;animation:fade 1.4s ease 1.6s forwards;
}
@keyframes fade{to{opacity:1}}

/* ── En-tête ────────────────────────────────────────────────── */
.tete{
  position:fixed;top:0;left:0;right:0;z-index:1300;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.7rem clamp(1.2rem,3.4vw,3rem);
  transition:transform .7s var(--ez);
  mix-blend-mode:difference;
}
.tete.hide{transform:translateY(-130%)}
.tete__marque{display:flex;flex-direction:column;line-height:1.35}
.tete__marque b{font-family:var(--caps);font-weight:400;font-size:.98rem;letter-spacing:.5em;text-transform:uppercase}
.tete__marque i{font-style:normal;font-size:.48rem;letter-spacing:.85em;text-transform:uppercase;color:rgba(234,228,216,.6)}
.tete__droite{display:flex;align-items:center;gap:2.2rem}
.tete__lang{display:flex;gap:.7rem;font-size:.62rem;letter-spacing:.22em}
.tete__lang a{opacity:.45;transition:opacity .3s}
.tete__lang a.on,.tete__lang a:hover{opacity:1}
.tete__menu{display:flex;align-items:center;gap:.9rem;font-size:.6rem;letter-spacing:.42em;text-transform:uppercase}
.tete__menu i{display:block;width:30px;height:1px;background:currentColor;transition:width .4s var(--ez)}
.tete__menu:hover i{width:18px}

/* ── Menu ───────────────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:2600;background:var(--nuit);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(1.6rem,8vw,9rem);
  clip-path:circle(0% at calc(100% - 3rem) 2.6rem);
  transition:clip-path 1s var(--ez);
}
.menu.open{clip-path:circle(150% at calc(100% - 3rem) 2.6rem)}
.menu__close{
  position:absolute;top:1.8rem;right:clamp(1.2rem,3.4vw,3rem);
  font-size:.6rem;letter-spacing:.42em;text-transform:uppercase;color:var(--brume);
  transition:color .3s;
}
.menu__close:hover{color:var(--ivoire)}
.menu a.item{
  display:flex;align-items:baseline;gap:2rem;
  padding:1.1rem 0;border-bottom:1px solid var(--ligne);
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ez),transform .7s var(--ez);
}
.menu.open a.item{opacity:1;transform:none}
.menu a.item i{font-family:var(--poeme);font-style:italic;font-size:.9rem;color:var(--sang-vif);width:2.2rem;flex:none}
.menu a.item b{
  font-family:var(--caps);font-weight:400;font-size:clamp(1.5rem,4.6vh,2.6rem);
  letter-spacing:.14em;text-transform:uppercase;transition:letter-spacing .5s var(--ez),color .4s;
}
.menu a.item:hover b{letter-spacing:.22em;color:#fff}
.menu a.item span{margin-left:auto;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brume)}
.menu__pied{margin-top:3rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.64rem;letter-spacing:.2em;color:var(--brume)}
.menu__pied a:hover{color:var(--ivoire)}

/* ── Scènes ─────────────────────────────────────────────────── */
.scene{position:relative}
.scene__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.h-260{height:260vh}.h-300{height:300vh}.h-220{height:220vh}

/* Acte I — Ouverture */
.ouverture .fond{position:absolute;inset:0}
.ouverture .fond img{width:100%;height:104%;object-fit:cover;filter:grayscale(.35) brightness(.66);will-change:transform}
.ouverture .voile{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 30%,rgba(11,10,8,.72) 100%)}
.ouverture .centre{position:relative;z-index:3;text-align:center;padding:0 6vw;will-change:transform,opacity}
.ouverture .label{margin-bottom:2.8rem;display:block}
.ouverture h1{
  font-family:var(--caps);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.1rem,7.2vw,6.2rem);letter-spacing:.28em;text-indent:.28em;line-height:1.2;
}
.ouverture h1 .c{display:inline-block;opacity:0;transform:translateY(38px);transition:opacity 1s var(--ez),transform 1s var(--ez)}
.ouverture h1.in .c{opacity:1;transform:none}
.ouverture .sous{
  margin-top:2.6rem;font-family:var(--poeme);font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--brume);
}
.ouverture .coord{
  position:absolute;bottom:2.4rem;right:clamp(1.2rem,3.4vw,3rem);z-index:3;
  text-align:right;font-size:.58rem;letter-spacing:.4em;text-transform:uppercase;color:var(--brume);line-height:2.2;
}
.ouverture .descend{
  position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);z-index:3;
  width:1px;height:64px;overflow:hidden;
}
.ouverture .descend::after{content:'';display:block;width:1px;height:100%;background:var(--ivoire);animation:goutte 2.6s var(--ez) infinite}
@keyframes goutte{0%{transform:translateY(-100%)}52%{transform:translateY(0)}100%{transform:translateY(102%)}}

/* Actes — expansion d'image */
.expansion .cadre{
  position:absolute;inset:0;
  clip-path:inset(38% 36% 38% 36%);
  will-change:clip-path;
}
.expansion .cadre img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);will-change:transform;filter:brightness(.8)}
.expansion .cadre::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,8,.25),transparent 40%,rgba(11,10,8,.55))}
.expansion .grand-mot{
  position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.expansion .grand-mot b{
  font-family:var(--caps);font-weight:400;text-transform:uppercase;
  font-size:clamp(3.4rem,13vw,11.5rem);letter-spacing:.14em;text-indent:.14em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(234,228,216,.5);
  will-change:transform,opacity;white-space:nowrap;
}
.expansion .legende{
  position:absolute;z-index:3;left:0;right:0;bottom:clamp(3rem,8vh,5.5rem);
  text-align:center;padding:0 8vw;opacity:0;transform:translateY(26px);
  will-change:transform,opacity;
}
.expansion .legende .label{display:block;margin-bottom:1.3rem}
.expansion .legende p{
  font-family:var(--poeme);font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,2.6vw,2.1rem);line-height:1.45;max-width:34ch;margin-inline:auto;color:var(--ivoire);
}
.expansion .legende .suite{
  display:inline-flex;align-items:center;gap:1rem;margin-top:1.8rem;
  font-size:.58rem;letter-spacing:.44em;text-transform:uppercase;color:var(--brume);
  border-bottom:1px solid var(--ligne);padding-bottom:.55rem;
  transition:color .4s,border-color .4s;pointer-events:auto;
}
.expansion .legende .suite:hover{color:var(--ivoire);border-color:var(--ivoire)}
.expansion canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}

/* ── Respiration (interlude typographique) ──────────────────── */
.respiration{padding:clamp(9rem,18vh,15rem) 8vw;text-align:center}
.respiration .label{display:block;margin-bottom:3rem}
.respiration p{
  font-family:var(--poeme);font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,3.8vw,3.1rem);line-height:1.5;max-width:26ch;margin-inline:auto;
}
.respiration p .m{display:inline-block;opacity:.16;transition:opacity .4s linear}
.respiration p .m.on{opacity:1}
.respiration .sig{margin-top:3.4rem;font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;color:var(--brume)}

/* ── La Matière (accordéon) ─────────────────────────────────── */
.matiere{padding:clamp(5rem,10vh,8rem) 0 clamp(7rem,14vh,11rem)}
.matiere__tete{text-align:center;margin-bottom:clamp(3rem,7vh,5rem);padding:0 8vw}
.matiere__tete .label{display:block;margin-bottom:1.6rem}
.matiere__tete h2{font-family:var(--poeme);font-style:italic;font-weight:300;font-size:clamp(1.5rem,3vw,2.4rem);color:var(--ivoire)}
.matiere__bande{display:flex;height:min(64vh,600px);gap:2px}
.matiere__volet{
  position:relative;flex:1;overflow:hidden;
  transition:flex 1s var(--ez);
}
.matiere__volet:hover{flex:2.6}
.matiere__volet img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.25) brightness(.62);transition:filter 1s var(--ez),transform 1.4s var(--ez);
  transform:scale(1.06);
}
.matiere__volet:hover img{filter:grayscale(0) brightness(.82);transform:scale(1)}
.matiere__volet figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.8rem;z-index:2;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  background:linear-gradient(transparent,rgba(11,10,8,.75));
}
.matiere__volet figcaption b{font-family:var(--caps);font-weight:400;font-size:1.02rem;letter-spacing:.3em;text-transform:uppercase}
.matiere__volet figcaption span{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brume);opacity:0;transition:opacity .7s .2s}
.matiere__volet:hover figcaption span{opacity:1}

/* ── Index des Œuvres ───────────────────────────────────────── */
.oeuvres{padding:clamp(7rem,14vh,11rem) clamp(1.2rem,6vw,6rem)}
.oeuvres__tete{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;margin-bottom:clamp(2.5rem,6vh,4rem)}
.oeuvres__tete .poeme{font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--brume)}
.oeuvre{
  position:relative;display:grid;grid-template-columns:4rem 1fr auto;align-items:baseline;gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.6rem,3.6vh,2.6rem) .5rem;border-top:1px solid var(--ligne);
  transition:padding-left .6s var(--ez),background .6s;
}
.oeuvre:last-of-type{border-bottom:1px solid var(--ligne)}
.oeuvre:hover{padding-left:2rem}
.oeuvre .no{font-family:var(--poeme);font-style:italic;font-size:1rem;color:var(--sang-vif)}
.oeuvre .nom{
  font-family:var(--caps);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,4.4vw,3.4rem);letter-spacing:.1em;line-height:1.1;
  transition:letter-spacing .6s var(--ez);
}
.oeuvre:hover .nom{letter-spacing:.16em}
.oeuvre .ou{text-align:right;font-size:.6rem;letter-spacing:.36em;text-transform:uppercase;color:var(--brume);line-height:2.1}
.oeuvre .ou b{display:block;font-weight:400;color:var(--ivoire)}
.apercu{
  position:fixed;z-index:1500;width:min(330px,30vw);aspect-ratio:4/3;pointer-events:none;
  opacity:0;transform:scale(.92);transition:opacity .45s var(--ez),transform .45s var(--ez);
  overflow:hidden;
}
.apercu.on{opacity:1;transform:scale(1)}
.apercu img{width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.apercu{display:none}.oeuvre{grid-template-columns:2.6rem 1fr}.oeuvre .ou{display:none}}

/* ── La Maison ──────────────────────────────────────────────── */
.maison{padding:clamp(8rem,16vh,13rem) 8vw;text-align:center}
.maison .label{display:block;margin-bottom:3rem}
.maison blockquote{
  font-family:var(--poeme);font-style:italic;font-weight:300;
  font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.45;max-width:24ch;margin:0 auto;
}
.maison blockquote em{color:var(--sang-vif);font-style:italic}
.maison cite{display:block;margin-top:2.8rem;font-style:normal;font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;color:var(--brume)}
.principes{
  margin-top:clamp(4rem,9vh,7rem);display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ligne);max-width:1200px;margin-inline:auto;
}
.principe{padding:2.6rem 2rem 0;text-align:center}
.principe+.principe{border-left:1px solid var(--ligne)}
.principe i{font-family:var(--poeme);font-style:italic;font-size:1rem;color:var(--sang-vif)}
.principe b{display:block;font-family:var(--caps);font-weight:400;font-size:1rem;letter-spacing:.3em;text-transform:uppercase;margin:1.1rem 0 .9rem}
.principe p{font-size:.82rem;color:var(--brume);max-width:26ch;margin-inline:auto}
@media(max-width:860px){
  .principes{grid-template-columns:1fr}
  .principe+.principe{border-left:none;border-top:1px solid var(--ligne);margin-top:2.4rem;padding-top:2.4rem}
}

/* ── Invitation ─────────────────────────────────────────────── */
.invitation{position:relative;padding:clamp(9rem,18vh,15rem) 8vw;text-align:center;overflow:hidden}
.invitation::before{
  content:'';position:absolute;left:50%;top:0;width:1px;height:clamp(4rem,9vh,7rem);
  background:linear-gradient(var(--sang-vif),transparent);
}
.invitation .label{display:block;margin-bottom:2.6rem}
.invitation h2{
  font-family:var(--caps);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,4.4rem);letter-spacing:.2em;text-indent:.2em;line-height:1.25;
}
.invitation h2 em{font-style:normal;color:var(--sang-vif)}
.invitation .poeme{margin:2.4rem auto 0;font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--brume);max-width:44ch}
.invitation .actions{margin-top:3.6rem;display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap}
.lien{
  display:inline-flex;align-items:center;gap:1.1rem;
  font-size:.6rem;letter-spacing:.46em;text-transform:uppercase;
  padding:1.3rem 2.8rem;border:1px solid var(--ligne);
  position:relative;overflow:hidden;isolation:isolate;transition:color .5s,border-color .5s;
}
.lien::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--sang);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ez)}
.lien:hover{border-color:var(--sang)}
.lien:hover::before{transform:none}
.lien--plein{background:var(--sang);border-color:var(--sang)}
.lien--plein::before{background:var(--nuit)}

/* ── Coda ───────────────────────────────────────────────────── */
.coda{border-top:1px solid var(--ligne);padding:clamp(4.5rem,9vh,7rem) clamp(1.2rem,6vw,6rem) 2.4rem}
.coda__haut{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem;flex-wrap:wrap;margin-bottom:4.5rem}
.coda__marque b{font-family:var(--caps);font-weight:400;font-size:1.4rem;letter-spacing:.55em;text-transform:uppercase}
.coda__marque i{display:block;font-style:normal;font-size:.5rem;letter-spacing:.9em;text-transform:uppercase;color:var(--brume);margin-top:.5rem}
.coda__mail{
  font-family:var(--poeme);font-style:italic;font-size:clamp(1.3rem,3vw,2.2rem);
  border-bottom:1px solid var(--ligne);padding-bottom:.4rem;transition:border-color .4s,color .4s;
}
.coda__mail:hover{border-color:var(--sang-vif);color:#fff}
.coda__cols{display:flex;gap:clamp(2.5rem,6vw,6rem);flex-wrap:wrap}
.coda__col{display:flex;flex-direction:column;gap:.7rem;font-size:.72rem;letter-spacing:.16em;color:var(--brume)}
.coda__col span{font-size:.54rem;letter-spacing:.4em;text-transform:uppercase;color:var(--sang-vif);margin-bottom:.4rem}
.coda__col a:hover{color:var(--ivoire)}
.coda__bas{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:2rem;border-top:1px solid var(--ligne);
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(234,228,216,.35);
}

/* ── Pages Œuvre ────────────────────────────────────────────── */
.op-hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:flex-end;overflow:hidden}
.op-hero img{position:absolute;inset:0;width:100%;height:106%;object-fit:cover;filter:brightness(.62);will-change:transform}
.op-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,8,.45),transparent 40%,rgba(11,10,8,.9))}
.op-hero__c{position:relative;z-index:2;width:100%;padding:0 clamp(1.2rem,6vw,6rem) clamp(3.5rem,8vh,6rem)}
.op-hero__c .label{display:block;margin-bottom:1.8rem}
.op-hero__c h1{
  font-family:var(--caps);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,6rem);letter-spacing:.12em;line-height:1.1;
}
.op-hero__meta{
  display:flex;gap:clamp(1.6rem,4vw,3.6rem);flex-wrap:wrap;margin-top:2.2rem;
  font-size:.58rem;letter-spacing:.36em;text-transform:uppercase;color:var(--brume);
}
.op-hero__meta b{color:var(--ivoire);font-weight:400}
.op-corps{padding:clamp(6rem,12vh,10rem) clamp(1.2rem,6vw,6rem);max-width:1500px;margin-inline:auto}
.op-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(3rem,7vw,8rem);align-items:start}
.op-grid .poeme{font-size:clamp(1.3rem,2.2vw,1.8rem);color:var(--ivoire);max-width:30ch}
.op-grid .texte{margin-top:2rem;font-size:.92rem;color:var(--brume);max-width:52ch}
.op-faits{border-top:1px solid var(--ligne)}
.op-fait{
  display:flex;justify-content:space-between;gap:2rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid var(--ligne);
}
.op-fait span{font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;color:var(--brume)}
.op-fait b{font-family:var(--poeme);font-style:italic;font-weight:400;font-size:1.05rem;text-align:right}
.op-galerie{
  padding:0 clamp(1.2rem,6vw,6rem) clamp(6rem,12vh,10rem);max-width:1500px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.8rem,1.6vw,1.6rem);
}
.op-galerie figure{position:relative;overflow:hidden;margin:0}
.op-galerie img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.5s var(--ez);will-change:transform}
.op-galerie figure.vu img{transform:scale(1)}
.g-plein{grid-column:span 6;aspect-ratio:16/8.4}
.g-large{grid-column:span 4;aspect-ratio:16/10}
.g-haut{grid-column:span 2;aspect-ratio:3/4}
.g-tiers{grid-column:span 2;aspect-ratio:4/5}
.g-demi{grid-column:span 3;aspect-ratio:5/4}
@media(max-width:860px){
  .op-grid{grid-template-columns:1fr}
  .op-galerie .g-large,.op-galerie .g-haut,.op-galerie .g-tiers,.op-galerie .g-demi{grid-column:span 6;aspect-ratio:4/3}
}
.op-suivante{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:56vh;min-height:380px;overflow:hidden;text-align:center;
}
.op-suivante img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.3) grayscale(.3);transition:filter 1.2s var(--ez),transform 1.6s var(--ez)}
.op-suivante:hover img{filter:brightness(.45) grayscale(0);transform:scale(1.04)}
.op-suivante div{position:relative;z-index:2}
.op-suivante .label{display:block;margin-bottom:1.4rem}
.op-suivante b{
  font-family:var(--caps);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.8rem,4.6vw,3.6rem);letter-spacing:.16em;
}

/* ── Révélations génériques ─────────────────────────────────── */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ez),transform 1.1s var(--ez)}
.rv.in{opacity:1;transform:none}

/* ── Réduction de mouvement / mobile ────────────────────────── */
@media(max-width:860px){
  .expansion .grand-mot b{font-size:15vw;-webkit-text-stroke:1px rgba(234,228,216,.42)}
  .expansion .legende p{font-size:1.15rem}
  .matiere__bande{flex-direction:column;height:auto}
  .matiere__volet{height:34vh}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .h-260,.h-300,.h-220{height:auto}
  .scene__stage{position:relative}
  .expansion .cadre{clip-path:inset(0)!important}
  .expansion .legende{opacity:1!important;transform:none!important}
}

/* ── Extension — Site Le Monde des Neiges ───────────────────── */
.hospitalite{padding:clamp(8rem,16vh,13rem) 8vw;text-align:center}
.hospitalite .label{display:block;margin-bottom:3rem}
.hospitalite__cadre{
  max-width:640px;margin-inline:auto;border:1px solid var(--ligne);
  padding:clamp(3rem,7vh,5rem) clamp(2rem,5vw,4rem);position:relative;
}
.hospitalite__cadre::before,.hospitalite__cadre::after{
  content:'◆';position:absolute;top:-8px;font-size:.6rem;color:var(--sang-vif);
}
.hospitalite__cadre::before{left:calc(50% - 6px)}
.hospitalite__cadre::after{display:none}
.hospitalite__cadre b{
  display:block;font-family:var(--caps);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.2rem,2.6vw,1.9rem);letter-spacing:.34em;text-indent:.34em;
}
.hospitalite__cadre small{
  display:block;margin-top:1.6rem;font-size:.58rem;letter-spacing:.44em;
  text-transform:uppercase;color:var(--brume);
}
.hospitalite p.poeme{margin:3rem auto 0;font-size:clamp(1.05rem,1.7vw,1.35rem);color:var(--brume);max-width:44ch}
.signature-maison{
  padding:clamp(6rem,12vh,9rem) 8vw;text-align:center;border-top:1px solid var(--ligne);
}
.signature-maison .label{display:block;margin-bottom:2.2rem}
.signature-maison a.maison-lien{
  font-family:var(--caps);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,3.4vw,2.6rem);letter-spacing:.4em;text-indent:.4em;
  border-bottom:1px solid var(--ligne);padding-bottom:.8rem;
  transition:letter-spacing .6s var(--ez),border-color .5s;display:inline-block;
}
.signature-maison a.maison-lien:hover{letter-spacing:.5em;border-color:var(--sang-vif)}
.signature-maison p{margin-top:1.8rem;font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--brume)}

/* ── Correctifs & Le Cercle ─────────────────────────────────── */
.ouverture h1 .w{display:inline-block;white-space:nowrap}
.cercle-form{margin-top:3.2rem;display:flex;justify-content:center}
.cercle-form form{display:flex;align-items:stretch;width:min(540px,88vw);border:1px solid var(--ligne);transition:border-color .4s}
.cercle-form form:focus-within{border-color:var(--brume)}
.cercle-form input{flex:1;min-width:0;background:transparent;border:none;color:var(--ivoire);font-family:var(--ui);font-weight:300;font-size:.92rem;letter-spacing:.06em;padding:1.2rem 1.5rem;outline:none}
.cercle-form input::placeholder{color:rgba(234,228,216,.35);letter-spacing:.24em;text-transform:uppercase;font-size:.6rem}
.cercle-form button{font-size:.58rem;letter-spacing:.4em;text-transform:uppercase;padding:0 2rem;background:var(--sang);color:var(--ivoire);transition:background .4s}
.cercle-form button:hover{background:var(--sang-vif)}
.cercle-ok{display:none;margin-top:2rem;font-family:var(--poeme);font-style:italic;font-size:1.1rem;color:var(--brume)}
.matiere__volet figcaption span{opacity:.85}
@media(hover:hover){.matiere__volet figcaption span{opacity:0}}


/* Hauteur stable sur mobile (barre d'adresse) + reduced motion lisible */
.scene__stage{height:100svh}
.h-260{height:260svh}.h-300{height:300svh}.h-220{height:220svh}
@media(prefers-reduced-motion:reduce){.respiration p .m{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .h-260,.h-300,.h-220{height:auto}
  .expansion .cadre{clip-path:inset(0)!important}
  .expansion .legende{opacity:1!important;transform:none!important}
}

/* ── Écrans étroits : entrée & en-tête qui respirent ────────── */
@media(max-width:640px){
  .entree__mark{
    font-size:1.05rem;white-space:normal;text-align:center;line-height:2.1;
    padding:0 1.2rem;animation-name:entree-track-m;
  }
  .entree__sub{letter-spacing:.55em;text-indent:.55em;font-size:.52rem}
  .tete__marque b{font-size:.6rem;letter-spacing:.2em}
  .tete__marque i{font-size:.4rem;letter-spacing:.42em}
  .tete{padding:1.2rem 1rem}
  .tete__droite{gap:.9rem}
  .tete__lang{font-size:.56rem}
  .tete__menu{font-size:.54rem;letter-spacing:.3em}
  .tete__menu i{width:22px}
}
@keyframes entree-track-m{
  0%{opacity:0;letter-spacing:.85em;text-indent:.85em}
  35%{opacity:1}
  100%{opacity:1;letter-spacing:.38em;text-indent:.38em}
}