/* ══ IMMERSION FLETCHY ══
   Couche commune à l’accueil et aux fiches Manoir Verlac, Love Room,
   Le Château, Maison de Drôme Provençale, Studio Centre Montélimar et
   Duplex en campagne.
   Chargée après style.css (et home.css à l’accueil). L’Écrin Balinais garde
   sa propre couche, bali.css, qui n’est pas chargée ici.
   Univers Fletchy : Inter, Fraunces, or mesuré. Chaque bien porte sur <body>
   `data-imm` : sa palette nuit / jour et son motif d’ouverture du hero.
   Tout état masqué vit sous html.js-imm, posée par le script en ligne de
   l’en-tête : sans JavaScript ou en mouvement réduit, rien ne part masqué. */

/* Couleurs d’ambiance de chaque section, déclarées comme couleurs ; --im-iris anime l’arche du Verlac. */
@property --im-bg{syntax:'<color>';inherits:true;initial-value:#0a0a0a}
@property --im-fg{syntax:'<color>';inherits:true;initial-value:#f4ede3}
@property --im-fg2{syntax:'<color>';inherits:true;initial-value:#b9b3ab}
@property --im-accent{syntax:'<color>';inherits:true;initial-value:#c9a96e}
@property --im-line{syntax:'<color>';inherits:true;initial-value:rgba(244,237,227,.14)}
@property --im-iris{syntax:'<length>';inherits:false;initial-value:0px}

/* ══ PALETTES ══
   Contrastes mesurés (texte courant, accent) sur fond nuit puis jour :
   Love Room 9,3 / 9,9 — 7,1 / 6,3 ; Château 9,0 / 8,5 — 6,7 / 5,2 ;
   Maison 9,0 / 10,2 — 6,4 / 5,9 ; Studio 8,8 / 8,7 — 7,0 / 5,6 ;
   Duplex 8,9 / 10,6 — 7,1 / 5,6 ;
   Manoir Verlac, nuit noire puis bleu nuit : 9,0 / 9,0 — 8,6 / 9,5. */
.imm-page{
  --i-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --i-ease:cubic-bezier(.16,1,.3,1);
  --i-gutter:clamp(20px,5.5vw,88px);
  --i-ivory:#f4ede3;
  --i-fgJ:#1d1814;
  --i-lineN:rgba(244,237,227,.14);
  --i-lineJ:rgba(29,24,20,.14);
}
.imm-page[data-imm="love"]{--i-nuit:#14090f;--i-jour:#f8f0f0;--i-accN:#f0a3b7;--i-accJ:#9a3350;--i-fg2N:#bdb0b5;--i-fg2J:#5e4c52;--i-glow:255,74,124}
.imm-page[data-imm="chateau"]{--i-nuit:#14100c;--i-jour:#f4efe6;--i-accN:#c9a96e;--i-accJ:#7d5e2b;--i-fg2N:#b9b2a8;--i-fg2J:#5b524b;--i-glow:232,170,90}
.imm-page[data-imm="maison"]{--i-nuit:#0d1b1e;--i-jour:#f6f2e8;--i-accN:#8fd0d4;--i-accJ:#1d6670;--i-fg2N:#aebcbd;--i-fg2J:#4f5a57;--i-glow:255,214,140}
.imm-page[data-imm="studio"]{--i-nuit:#17110e;--i-jour:#f8f2eb;--i-accN:#e6a184;--i-accJ:#9a4a30;--i-fg2N:#bcb0a8;--i-fg2J:#5d5049;--i-glow:214,120,84}
.imm-page[data-imm="duplex"]{--i-nuit:#12130d;--i-jour:#f6f1df;--i-accN:#e6bf55;--i-accJ:#7a5a10;--i-fg2N:#b6b4a3;--i-fg2J:#55513f;--i-glow:255,184,92}
.imm-page[data-imm="verlac"]{--i-nuit:#06070c;--i-jour:#0c1426;--i-accN:#c9a96e;--i-accJ:#d4b77f;--i-fg2N:#a9adb8;--i-fg2J:#aab2c4;--i-fgJ:#eef0f5;--i-lineJ:rgba(238,240,245,.14);--i-glow:201,169,110}

/* ══ AMBIANCES ══
   Chaque section porte toujours ses propres couleurs de texte : rien ne
   s’inverse d’un bloc à l’écran. Sans la couche immersive, elle peint aussi
   son fond. Avec elle, les sections deviennent transparentes et
   immersion.js peint sur <body> un dégradé dont les fondus nuit / jour
   occupent les marges vides entre deux ambiances : le passage suit le
   défilement, sans minuterie, et le texte reste sur le fond de sa section. */
.imm-page,
.imm-page [data-mood="nuit"]{--im-bg:var(--i-nuit);--im-fg:var(--i-ivory);--im-fg2:var(--i-fg2N);--im-accent:var(--i-accN);--im-line:var(--i-lineN)}
.imm-page [data-mood="jour"]{--im-bg:var(--i-jour);--im-fg:var(--i-fgJ);--im-fg2:var(--i-fg2J);--im-accent:var(--i-accJ);--im-line:var(--i-lineJ)}
.imm-page{background:var(--im-bg)}
.imm-page [data-mood]{background:var(--im-bg);color:var(--im-fg)}
html.js-imm .imm-page{background-repeat:no-repeat}
html.js-imm .imm-page [data-mood]{background:transparent}

/* Navigation : sur une section de nuit, la barre défilée prend la teinte du bien.
   Elle suit la section qui passe sous elle et change de teinte en douceur. */
html.js-imm .imm-page #nav{transition:background-color .7s ease,border-color .7s ease}
html.js-imm .imm-page #nav .nav-logo-img{transition:filter .7s ease}
/* Le Manoir Verlac n’a pas de jour : son second ton est un bleu nuit, la barre reste sombre. */
html.imm-mood-nuit #nav.scrolled,html.imm-mood-jour [data-imm="verlac"] #nav.scrolled{background:rgba(10,10,10,.8);background:color-mix(in srgb,var(--i-nuit) 82%,transparent);border-bottom-color:rgba(244,237,227,.1)}
html.imm-mood-nuit #nav.scrolled .nav-logo,html.imm-mood-jour [data-imm="verlac"] #nav.scrolled .nav-logo{color:#fff}
html.imm-mood-nuit #nav.scrolled .nav-logo-img,html.imm-mood-jour [data-imm="verlac"] #nav.scrolled .nav-logo-img{filter:invert(1)}
html.imm-mood-nuit #nav.scrolled .nav-links>li>a:not(.nav-escape):not(.nav-cta),html.imm-mood-jour [data-imm="verlac"] #nav.scrolled .nav-links>li>a:not(.nav-escape):not(.nav-cta){color:rgba(255,255,255,.86)}
html.imm-mood-nuit #nav.scrolled .nav-hamburger span,html.imm-mood-jour [data-imm="verlac"] #nav.scrolled .nav-hamburger span{background:#fff}
html.imm-mood-jour [data-imm]:not([data-imm="verlac"]) #nav.scrolled{background:rgba(255,255,255,.86);background:color-mix(in srgb,var(--i-jour) 88%,transparent)}

/* Bouton or : texte sombre (8,6:1) plutôt que blanc (2,2:1). */
.imm-page .btn-gold,.imm-home .btn-gold{color:#0a0a0a}
.imm-page .btn-gold:hover,.imm-home .btn-gold:hover{background:var(--gold-light);color:#0a0a0a}

/* ══ TYPOGRAPHIE DES FICHES ══ */
.imm-page .eyebrow{color:var(--im-accent)}
/* Sur la photo du héros, l’accent du bien descendait à 1,6:1 (Studio) : sur-titre clair, détaché par une ombre. */
.imm-page .prop-hero .eyebrow{color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.imm-page .prop-hero .h1{font-family:var(--i-serif);font-weight:400;font-size:clamp(54px,8.4vw,132px);line-height:.92;letter-spacing:-.025em;font-optical-sizing:auto}
.imm-page .prop-hero .h1 .hero-line{padding:0 .1em .08em 0;margin-bottom:-.08em}
.imm-page .prop-hero .h1 em{font-style:italic}
.imm-page .prop-hero .h1 .hero-line+.hero-line>span{padding-left:.5em}
.imm-page .prop-hero-content{max-width:920px;min-width:0;width:100%}
/* Voile de lecture plus dense en bas : le texte reste lisible même sur une photo claire (piscine, ciel). */
.imm-page .prop-hero-overlay{background:linear-gradient(to top,rgba(8,8,8,.92) 0%,rgba(8,8,8,.66) 38%,rgba(8,8,8,.18) 70%,rgba(8,8,8,.4) 100%)}
@media(max-width:600px){.imm-page .prop-hero-overlay{background:linear-gradient(to top,rgba(8,8,8,.94) 0%,rgba(8,8,8,.78) 48%,rgba(8,8,8,.3) 78%,rgba(8,8,8,.45) 100%)}}
.imm-page .h2,.imm-page .prop-about-title,.imm-page .gallery-pending-title{font-family:var(--i-serif);font-weight:400;letter-spacing:-.03em}
/* Un titre sans couleur propre suit l’ambiance de sa section, pas l’encre de style.css (1,2:1 sur la nuit du Verlac). */
.imm-page .h2{color:var(--im-fg)}
.imm-page .h2 em,.imm-page .prop-about-title em,.imm-page .gallery-pending-title em{font-style:italic;color:var(--im-accent)}
.imm-page .prop-about{padding-top:clamp(110px,16vh,190px);padding-bottom:clamp(110px,16vh,190px)}
.imm-page .prop-about-inner{max-width:820px}
.imm-page .prop-about-title{font-size:clamp(34px,4.8vw,66px);line-height:1.04;color:var(--im-fg)}
.imm-page .prop-about-text,.imm-page .body-text{color:var(--im-fg2)}
.imm-page .prop-about-text{font-size:clamp(16px,1.3vw,18px);max-width:620px}
.imm-page .prop-about-text a{color:var(--im-fg);font-weight:500;text-decoration:none;border-bottom:1px solid var(--im-accent)}
.imm-page .prop-about-text a:hover{color:var(--im-accent)}
.imm-page[data-imm="verlac"] .prop-hero .h1 .hero-line+.hero-line{font-size:.36em;letter-spacing:-.02em;margin-top:.4em}
.imm-page[data-imm="verlac"] .prop-hero .h1 .hero-line+.hero-line>span{padding-left:0}
/* Duplex en campagne : deux paragraphes de présentation, séparés d’un blanc. */
.imm-page[data-imm="duplex"] .prop-about-text+.prop-about-text{margin-top:1.2em}
@media(max-width:600px){
  .imm-page .prop-hero .h1{font-size:clamp(46px,13vw,64px)}
  /* Les badges du hero tiennent sur une ligne qui glisse au doigt. */
  .imm-page .prop-badges{flex-wrap:nowrap;overflow-x:auto;margin-right:-20px;padding-right:20px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 80%,transparent);mask-image:linear-gradient(to right,#000 80%,transparent)}
  .imm-page .prop-badges::-webkit-scrollbar{display:none}
  .imm-page .prop-badge{flex:none}
}
@media(max-width:600px) and (max-height:700px){
  .imm-page .prop-hero .h1{font-size:44px}
  .imm-page .prop-hero .body-text{font-size:14.5px;line-height:1.6;margin-bottom:20px}
  .imm-page .prop-badges{margin-bottom:22px}
}

/* ══ HERO ══
   Ken Burns, parallaxe (propriété `translate`, écrite par immersion.js),
   puis titre levé ligne à ligne une fois le motif d’ouverture joué. */
html.js-imm .imm-page .prop-hero-bg{transform:scale(1.14)}
html.js-imm .imm-page .prop-hero.is-open .prop-hero-bg{transform:scale(1.02);transition:transform 14s cubic-bezier(.2,.6,.2,1)}
html.js-imm .imm-page .prop-hero .h1 .hero-line>span{animation:none;transform:translate3d(0,140%,0);transition:transform 1.5s var(--i-ease)}
html.js-imm .imm-page .prop-hero.is-open .h1 .hero-line>span{transform:none;transition-delay:var(--imm-title-delay,1s)}
html.js-imm .imm-page .prop-hero.is-open .h1 .hero-line+.hero-line>span{transition-delay:calc(var(--imm-title-delay,1s) + .15s)}
html.js-imm .imm-page .prop-hero .eyebrow,html.js-imm .imm-page .prop-hero .body-text,html.js-imm .imm-page .prop-hero .prop-badges,html.js-imm .imm-page .prop-hero .btn-group,html.js-imm .imm-page .prop-scroll-hint{opacity:0;translate:0 18px;transition:opacity 1.1s ease,translate 1.3s var(--i-ease)}
html.js-imm .imm-page .prop-hero.is-open .eyebrow{opacity:1;translate:0 0;transition-delay:calc(var(--imm-title-delay,1s) - .2s)}
html.js-imm .imm-page .prop-hero.is-open .body-text{opacity:1;translate:0 0;transition-delay:calc(var(--imm-title-delay,1s) + .35s)}
html.js-imm .imm-page .prop-hero.is-open .prop-badges{opacity:1;translate:0 0;transition-delay:calc(var(--imm-title-delay,1s) + .5s)}
html.js-imm .imm-page .prop-hero.is-open .btn-group{opacity:1;translate:0 0;transition-delay:calc(var(--imm-title-delay,1s) + .65s)}
html.js-imm .imm-page .prop-hero.is-open .prop-scroll-hint{opacity:1;translate:0 0;transition-delay:calc(var(--imm-title-delay,1s) + .9s)}

/* ══ MOTIFS D’OUVERTURE ══
   Un par bien, jamais porteur de texte, absent hors de la couche immersive. */
.imm-open{display:none}
html.js-imm .imm-open{display:block;position:absolute;inset:0;z-index:4;pointer-events:none}
/* Une fois joué, le motif quitte le rendu — par animation, pour ne pas écraser les transitions propres à chaque motif. */
@keyframes immGone{to{visibility:hidden}}
html.js-imm .prop-hero.is-open .imm-open{animation:immGone 0s linear 3.8s forwards}

/* Love Room — trois rubans de lumière, comme les néons de la chambre,
   s’allument sans clignoter, puis la pièce sort de l’ombre. */
.imm-open--neon{background:#0b0509;transition:opacity 1.6s ease 1s}
.imm-open--neon i{position:absolute;top:9%;bottom:9%;width:3px;border-radius:3px;background:rgb(var(--i-glow));box-shadow:0 0 12px 2px rgba(var(--i-glow),.85),0 0 48px 10px rgba(var(--i-glow),.4),0 0 120px 30px rgba(var(--i-glow),.16);opacity:0;transform:scaleY(.15);transition:opacity .7s ease,transform 1.1s var(--i-ease)}
.imm-open--neon i:nth-child(1){left:24%}
.imm-open--neon i:nth-child(2){left:50%;transition-delay:.2s}
.imm-open--neon i:nth-child(3){left:76%;transition-delay:.4s}
html.js-imm .prop-hero.is-open .imm-open--neon{opacity:0}
html.js-imm .prop-hero.is-open .imm-open--neon i{opacity:1;transform:none}

/* Le Château — les lattes de bois sombre du plafond remontent, du centre vers les bords. */
html.js-imm .imm-open--slats{display:flex}
.imm-open--slats i{flex:1;background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 9px,rgba(255,240,220,.035) 10px 11px,rgba(0,0,0,0) 12px 23px),linear-gradient(90deg,#24180f 0%,#3a281a 46%,#291b11 100%);box-shadow:inset -1px 0 0 rgba(0,0,0,.45),inset 1px 0 0 rgba(255,230,200,.05);transform-origin:50% 0;transition:transform 1.25s cubic-bezier(.7,0,.2,1)}
.imm-open--slats i:nth-child(4),.imm-open--slats i:nth-child(5){transition-delay:.1s}
.imm-open--slats i:nth-child(3),.imm-open--slats i:nth-child(6){transition-delay:.2s}
.imm-open--slats i:nth-child(2),.imm-open--slats i:nth-child(7){transition-delay:.3s}
.imm-open--slats i:nth-child(1),.imm-open--slats i:nth-child(8){transition-delay:.4s}
html.js-imm .prop-hero.is-open .imm-open--slats i{transform:scaleY(0)}

/* Maison de Drôme Provençale — deux volets à persiennes s’ouvrent sur leurs gonds,
   puis le soleil entre. */
html.js-imm .imm-open--volets{perspective:1800px}
.imm-open--volets i{position:absolute;top:0;bottom:0;width:50.5%;background:repeating-linear-gradient(180deg,#7c8a69 0 15px,#66734f 15px 17px,#8a9877 17px 19px),#7c8a69;box-shadow:inset 0 0 0 10px #6c7958,inset 0 0 0 11px rgba(0,0,0,.18);transition:transform 1.7s cubic-bezier(.55,0,.2,1),opacity .8s ease 1.2s;backface-visibility:hidden}
.imm-open--volets i:nth-child(1){left:0;transform-origin:0 50%}
.imm-open--volets i:nth-child(2){right:0;transform-origin:100% 50%}
.imm-open--volets::after{content:'';position:absolute;inset:-25%;background:radial-gradient(circle at 68% 32%,rgba(var(--i-glow),.6) 0,rgba(var(--i-glow),.18) 22%,rgba(var(--i-glow),0) 46%);opacity:0}
@keyframes immSun{0%{opacity:0;transform:translate3d(-6%,4%,0)}40%{opacity:1}100%{opacity:0;transform:translate3d(6%,-4%,0)}}
html.js-imm .prop-hero.is-open .imm-open--volets i:nth-child(1){transform:rotateY(-108deg);opacity:0}
html.js-imm .prop-hero.is-open .imm-open--volets i:nth-child(2){transform:rotateY(108deg);opacity:0}
html.js-imm .prop-hero.is-open .imm-open--volets::after{animation:immSun 2.6s ease-out .9s both}

/* Studio Centre Montélimar — des carreaux de terracotta basculent en diagonale. */
html.js-imm .imm-open--tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr)}
.imm-open--tiles i{background:#b2644a;box-shadow:inset 0 0 0 1px rgba(70,28,16,.28),inset 0 -18px 30px -20px rgba(70,28,16,.35);transition:transform .95s cubic-bezier(.6,0,.2,1),opacity .95s ease;transition-delay:calc(var(--k,0) * 80ms)}
.imm-open--tiles i:nth-child(3n){background:#a85d44}
.imm-open--tiles i:nth-child(4n+1){background:#bb6f53}
html.js-imm .prop-hero.is-open .imm-open--tiles i{transform:perspective(900px) rotateX(-92deg) scale(.94);opacity:0}
@media(max-width:600px){html.js-imm .imm-open--tiles{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}}

/* Manoir Verlac — un filet d’or trace l’arche, puis la nuit s’ouvre à travers elle. */
.imm-open--arche{background:#04050a;--im-iris:0px;-webkit-mask-image:radial-gradient(var(--im-iris) calc(var(--im-iris) * 1.32) at 50% 46%,transparent 97%,#000 100%);mask-image:radial-gradient(var(--im-iris) calc(var(--im-iris) * 1.32) at 50% 46%,transparent 97%,#000 100%);transition:--im-iris 1.9s cubic-bezier(.6,0,.25,1) 1.1s}
.imm-open--arche svg{position:absolute;left:50%;top:14%;width:min(34vw,380px);height:auto;transform:translateX(-50%);overflow:visible;fill:none;stroke:var(--i-accN);stroke-width:1.2;vector-effect:non-scaling-stroke}
.imm-open--arche path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1)}
.imm-open--arche::before{content:'';position:absolute;left:50%;top:14%;width:min(34vw,380px);aspect-ratio:.72;transform:translateX(-50%);border-radius:50% 50% 0 0/36% 36% 0 0;background:radial-gradient(ellipse at 50% 30%,rgba(var(--i-glow),.22),rgba(70,100,170,.16) 45%,transparent 75%);opacity:0;transition:opacity 1.2s ease .5s}
@media(max-width:600px){.imm-open--arche::before{width:62vw}}
html.js-imm .prop-hero.is-open .imm-open--arche::before{opacity:1}
html.js-imm .prop-hero.is-open .imm-open--arche{--im-iris:160vmax}
html.js-imm .prop-hero.is-open .imm-open--arche path{stroke-dashoffset:0}
@media(max-width:600px){.imm-open--arche svg{width:62vw}}

/* Duplex en campagne — le soleil se couche derrière les crêtes de l’Ardèche, que regarde
   le coin jardin, puis les trois lignes de montagne s’abaissent, de la plus lointaine à la plus proche. */
.imm-open--cretes::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#12130d 0%,#2c2618 34%,#7a4826 62%,#c97a3c 80%,#eeac5c 100%);transition:opacity 1s ease .8s}
.imm-open--cretes::after{content:'';position:absolute;left:50%;top:50%;width:min(30vw,260px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffe7ad 0 34%,rgba(var(--i-glow),.85) 37%,rgba(var(--i-glow),.25) 54%,rgba(var(--i-glow),0) 70%);transform:translate(-50%,-50%);transition:transform 1.3s cubic-bezier(.45,0,.55,1),opacity 1.1s ease .3s}
.imm-open--cretes i{position:absolute;left:-1%;right:-1%;bottom:-1px;z-index:1;background:bottom/100% 100% no-repeat;transition:transform 1.05s cubic-bezier(.6,0,.3,1)}
.imm-open--cretes i:nth-child(1){height:52%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath fill='%235e4029' d='M0 230C120 200 170 120 280 135S420 60 540 50S700 120 800 105S960 20 1060 45S1170 130 1200 150V400H0Z'/%3E%3C/svg%3E");transition-delay:.75s}
.imm-open--cretes i:nth-child(2){height:40%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath fill='%2333281f' d='M0 150C110 110 200 190 330 160S520 60 650 85S820 190 950 165S1120 90 1200 105V400H0Z'/%3E%3C/svg%3E");transition-delay:.86s}
.imm-open--cretes i:nth-child(3){height:26%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath fill='%2312130d' d='M0 120C150 60 290 170 450 130S700 30 860 70S1090 170 1200 120V400H0Z'/%3E%3C/svg%3E");transition-delay:.97s}
/* En portrait, les crêtes s’élargissent au-delà de l’écran pour garder des pentes douces. */
@media(orientation:portrait){.imm-open--cretes i{left:-45%;right:-45%}.imm-open--cretes i:nth-child(1){height:40%}.imm-open--cretes i:nth-child(2){height:31%}.imm-open--cretes i:nth-child(3){height:20%}}
html.js-imm .prop-hero.is-open .imm-open--cretes::before{opacity:0}
html.js-imm .prop-hero.is-open .imm-open--cretes::after{transform:translate(-50%,65%);opacity:0}
html.js-imm .prop-hero.is-open .imm-open--cretes i{transform:translateY(102%)}
@media(orientation:portrait){.imm-open--cretes::after{width:min(44vw,260px);top:63%}}

/* Délai du titre selon la durée du motif. */
.imm-page[data-imm="love"]{--imm-title-delay:1.5s}
.imm-page[data-imm="chateau"]{--imm-title-delay:1.1s}
.imm-page[data-imm="maison"]{--imm-title-delay:1.2s}
.imm-page[data-imm="studio"]{--imm-title-delay:1.1s}
.imm-page[data-imm="duplex"]{--imm-title-delay:1.9s}
.imm-page[data-imm="verlac"]{--imm-title-delay:2s}

/* ══ GALERIE ══
   Pleine largeur, sur fond de nuit. Sur grand écran, chaque photo se découvre
   par un rideau qui remonte quand son bloc entre à l’écran (classe .vis de main.js). */
.imm-page .gallery-showcase{max-width:none;padding-left:max(var(--i-gutter),calc(50% - 560px));padding-right:max(var(--i-gutter),calc(50% - 560px))}
.imm-page .gallery-showcase-header span{color:var(--im-fg2)!important}
html.js-imm .imm-page .gallery-section .reveal .gal-cell{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--i-ease)}
html.js-imm .imm-page .gallery-section .reveal .gal-cell img{scale:1.16;transition:scale 1.8s var(--i-ease),transform var(--dur-lg) var(--ease-out-expo)}
html.js-imm .imm-page .gallery-section .reveal.vis .gal-cell{clip-path:inset(0 0 0 0)}
html.js-imm .imm-page .gallery-section .reveal.vis .gal-cell img{scale:1}
html.js-imm .imm-page .gallery-section .reveal.vis .gal-cell:nth-child(2){transition-delay:.12s}
html.js-imm .imm-page .gallery-section .reveal.vis .gal-cell:nth-child(3){transition-delay:.24s}
.imm-page .gallery-section img[onclick]:focus-visible{outline:2px solid var(--im-accent);outline-offset:-6px;border-radius:0}
.imm-strip-hint,.imm-strip-foot{display:none}

@media(max-width:768px){
  /* Sur téléphone, toute la galerie devient une bande qui glisse au doigt :
     chaque photo garde son ratio, la jauge et le compteur suivent le geste. */
  .imm-page .gallery-showcase{padding:64px 0 56px}
  .imm-page .gallery-showcase-header{padding:0 20px 10px}
  .imm-strip-hint{display:flex;align-items:center;gap:10px;margin:0 20px 16px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--im-accent);transition:opacity .6s ease}
  .imm-strip-hint::after{content:'';width:28px;height:1px;background:currentColor}
  .imm-strip.is-swiped .imm-strip-hint{opacity:.35}
  .imm-strip-track{display:flex;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:0 20px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .imm-strip-track::-webkit-scrollbar{display:none}
  .imm-strip-track>div{display:contents}
  .imm-strip-track .gal-cell{flex:none;aspect-ratio:auto!important;margin:0;border-radius:4px;scroll-snap-align:start;clip-path:none!important}
  .imm-strip-track .gal-cell img{width:auto;height:auto;max-width:84vw;max-height:min(64svh,540px);object-fit:contain;transform:none!important;scale:1!important}
  .imm-strip-foot{display:flex;align-items:center;gap:16px;margin:18px 20px 0;font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--im-fg2);font-variant-numeric:tabular-nums}
  .imm-strip-bar{position:relative;flex:1;height:1px;background:var(--im-line)}
  .imm-strip-bar i{position:absolute;inset:0;background:var(--im-accent);transform-origin:0 50%;transform:scaleX(0)}
}

/* ══ ÉQUIPEMENTS ══
   Grille de filets fins, icônes dessinées à la place des emoji. */
.imm-page .prop-amenities{padding-top:clamp(96px,14vh,160px);padding-bottom:clamp(96px,14vh,160px)}
.imm-page .amenities-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:1040px;border-top:1px solid var(--im-line)}
.imm-page .amenity-item,.imm-page .prop-options .amenity-item{background:transparent;border:0;border-radius:0;border-bottom:1px solid var(--im-line);padding:30px 22px 32px;align-items:flex-start;text-align:left;gap:18px}
.imm-page .amenity-item:not(:nth-child(3n+1)){border-left:1px solid var(--im-line)}
.imm-page .amenity-item:hover{transform:none;box-shadow:none;border-color:var(--im-line)}
.imm-page .amenity-icon svg{display:block;width:30px;height:30px;fill:none;stroke:var(--im-accent);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.imm-page .amenity-label{font-family:var(--i-serif);font-size:clamp(17px,1.5vw,21px);letter-spacing:-.005em;text-transform:none;font-weight:400;color:var(--im-fg)}
.imm-page .prop-options a{color:var(--im-fg);border-bottom-color:var(--im-accent)}
.imm-page .prop-options-note{color:var(--im-fg2)}
/* Manoir Verlac : informations avant réservation, en liste lisible (alignée à gauche). */
.imm-page .verlac-infos{list-style:none;max-width:620px;margin:0 auto 8px;padding:0;text-align:left;display:grid;gap:14px}
.imm-page .verlac-infos li{font-size:15px;line-height:1.65;color:var(--im-fg2)}
.imm-page .verlac-infos strong{color:var(--im-fg);font-weight:600}
html.js-imm .imm-page .prop-amenities.reveal .amenity-item{opacity:0;translate:0 22px;transition:opacity .9s ease,translate 1.1s var(--i-ease)}
html.js-imm .imm-page .prop-amenities.reveal.vis .amenity-item{opacity:1;translate:0 0}
html.js-imm .imm-page .prop-amenities.reveal.vis .amenity-item:nth-child(3n+2){transition-delay:.1s}
html.js-imm .imm-page .prop-amenities.reveal.vis .amenity-item:nth-child(3n){transition-delay:.2s}
@media(max-width:768px){
  .imm-page .amenities-grid{grid-template-columns:1fr 1fr}
  .imm-page .amenity-item:not(:nth-child(3n+1)){border-left:0}
  .imm-page .amenity-item:nth-child(even){border-left:1px solid var(--im-line)}
  .imm-page .amenity-item{padding:24px 16px 26px}
}

/* Avis voyageur : une citation en Fraunces italique, sans encadré. */
.imm-page .prop-quote-break{border-color:var(--im-line);padding-top:clamp(90px,13vh,150px);padding-bottom:clamp(90px,13vh,150px)}
/* Après la galerie de nuit, le filet du haut couperait le fondu nuit / jour. */
html.js-imm .imm-page [data-mood="nuit"]+.prop-quote-break[data-mood="jour"]{border-top-color:transparent}
.imm-page .prop-quote-text{font-family:var(--i-serif);font-size:clamp(24px,3.2vw,44px);line-height:1.3;letter-spacing:-.015em;color:var(--im-fg);max-width:26em}
.imm-page .prop-quote-author{color:var(--im-accent)}

/* Manoir Verlac : visuel d’attente et détails pratiques, dans la nuit. */
.imm-page .gallery-pending{background:transparent;border-color:var(--im-line);box-shadow:none}
.imm-page .gallery-pending-title{color:var(--im-fg)}
.imm-page .gallery-pending-text{color:var(--im-fg2)}

/* ══ FINAL ══ */
.imm-page .cta-strip-enhanced{min-height:78vh;min-height:78svh;display:grid;place-items:center}
.imm-page .cta-strip-overlay{background:radial-gradient(ellipse at center,rgba(8,8,8,.5) 0%,rgba(8,8,8,.82) 75%),linear-gradient(to bottom,rgba(8,8,8,.55),rgba(8,8,8,.2) 45%,rgba(8,8,8,.85))}
.imm-page .cta-strip .h2{font-size:clamp(38px,5.6vw,84px);line-height:1;max-width:14ch;margin-left:auto;margin-right:auto}
html.js-imm .imm-page .cta-strip-bg{transform:scale(calc(1.16 - var(--p,0) * .16))}

/* ══ BARRE D’ACTION MOBILE ══
   Commune aux fiches et à l’accueil : posée par immersion.js
   (html.imm-mbar-ready). Sans JavaScript, la bulle de contact d’origine reste. */
.imm-mbar{display:none}
@media(max-width:768px){
  html.imm-mbar-ready .imm-mbar{display:flex;align-items:center;gap:8px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:950;padding:7px;border-radius:999px;background:rgba(12,12,12,.88);background:color-mix(in srgb,var(--i-nuit,#0c0c0c) 90%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 18px 40px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(232,213,176,.2);transform:translate3d(0,calc(100% + 32px),0);visibility:hidden;transition:transform .5s var(--ease-out-expo),visibility 0s .5s}
  html.imm-mbar-ready .imm-mbar.is-visible{transform:none;visibility:visible;transition:transform .5s var(--ease-out-expo),visibility 0s}
  .imm-mbar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 12px;border-radius:999px;font:500 14px/1 'Inter',sans-serif;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
  /* Libellé inerte (« Prochainement », « Disponible été 2027 ») : il peut passer sur deux lignes pour laisser la place au bouton d’écriture. */
  .imm-mbar-soon{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 10px;border-radius:999px;font:500 13px/1.15 'Inter',sans-serif;text-align:center;color:var(--gold-light);box-shadow:inset 0 0 0 1px rgba(232,213,176,.45)}
  .imm-mbar-main{background:var(--i-accN,#c9a96e);color:var(--i-nuit,#0a0a0a)}
  .imm-mbar-alt{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
  .imm-mbar-mail{flex:none;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--gold-light);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .imm-mbar a:focus-visible,.imm-mbar-mail:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
  html.imm-mbar-ready .fc-fab{display:none}
  html.imm-mbar-ready .fc-widget{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  /* La barre d’action suffit : le bouton de retour en haut recouvrait textes et titres. */
  html.imm-mbar-ready .back-to-top{display:none}
}

/* ══ ACCUEIL ══
   L’intro « FLET / CHY », le hero et le carrousel gardent leur contrat ;
   la couche ajoute des révélations, la mise au point du carrousel au doigt
   et sa jauge. */
.imm-home{--i-nuit:#0a1310;--i-accN:#c9a96e}
html.js-imm .imm-home .why-visual-new img{clip-path:inset(100% 0 0 0);transition:clip-path 1.5s var(--i-ease,cubic-bezier(.16,1,.3,1))}
html.js-imm .imm-home .why-visual-new.is-in img{clip-path:inset(0 0 0 0)}
html.js-imm .imm-home .why-visual-new.is-in .why-img-accent-new{transition-delay:.25s}
html.js-imm .imm-home .stat-num-new span{display:inline-block;translate:0 110%;transition:translate 1.2s var(--i-ease,cubic-bezier(.16,1,.3,1))}
html.js-imm .imm-home .stat-num-new{overflow:hidden}
html.js-imm .imm-home .stats-row-new.is-in .stat-num-new span{translate:0 0}
html.js-imm .imm-home .stats-row-new.is-in .stat-new:nth-child(2) .stat-num-new span{transition-delay:.12s}
html.js-imm .imm-home .stats-row-new.is-in .stat-new:nth-child(3) .stat-num-new span{transition-delay:.24s}
html.js-imm .imm-home .props-carousel .prop-card-new{opacity:0;translate:60px 0;transition:opacity 1s ease,translate 1.2s var(--i-ease,cubic-bezier(.16,1,.3,1))}
html.js-imm .imm-home .props-carousel.is-in .prop-card-new{opacity:1;translate:0 0}
html.js-imm .imm-home .props-carousel.is-in .prop-card-new:nth-child(2){transition-delay:.08s}
html.js-imm .imm-home .props-carousel.is-in .prop-card-new:nth-child(3){transition-delay:.16s}
html.js-imm .imm-home .props-carousel.is-in .prop-card-new:nth-child(4){transition-delay:.24s}
html.js-imm .imm-home .props-carousel.is-in .prop-card-new:nth-child(n+5){transition-delay:.32s}
.imm-carousel-foot{display:none}
@media(max-width:768px){
  /* Mise au point : la carte centrée est nette et pleine, ses voisines reculent. */
  html.js-imm .imm-home .props-carousel.is-in .prop-card-new{transform:scale(calc(.9 + var(--f,1) * .1));opacity:calc(.55 + var(--f,1) * .45);transition:opacity .3s ease,translate 1.2s var(--i-ease,cubic-bezier(.16,1,.3,1)),transform .3s ease}
  .imm-carousel-foot{display:flex;align-items:center;gap:16px;margin:14px 20px 0;font-size:12px;font-weight:500;letter-spacing:.12em;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
  .imm-carousel-foot .imm-strip-bar{position:relative;flex:1;height:1px;background:rgba(255,255,255,.18)}
  .imm-carousel-foot .imm-strip-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}
  .imm-home .carousel-dots{display:none}
}

/* Filet de sécurité si la préférence change après le chargement. */
@media(prefers-reduced-motion:reduce){
  html.js-imm .imm-open{display:none}
  html.js-imm .imm-page .prop-hero .h1 .hero-line>span,html.js-imm .imm-page .prop-hero .eyebrow,html.js-imm .imm-page .prop-hero .body-text,html.js-imm .imm-page .prop-hero .prop-badges,html.js-imm .imm-page .prop-hero .btn-group,html.js-imm .imm-page .gallery-section .reveal .gal-cell,html.js-imm .imm-page .prop-amenities.reveal .amenity-item,html.js-imm .imm-home .why-visual-new img,html.js-imm .imm-home .stat-num-new span,html.js-imm .imm-home .props-carousel .prop-card-new{opacity:1;transform:none;translate:none;clip-path:none}
}
@media print{
  .imm-open,.imm-mbar,.imm-strip-hint,.imm-strip-foot,.imm-carousel-foot{display:none!important}
}

/* ══ HÉROS DES FICHES SUR PETIT ÉCRAN ══
   100vh avec min-height:700px : en 360 × 640, le CTA tombait sous le bord, et sous
   la barre de Safari iOS. Hauteur de l’écran visible (svh), comme sur L’Écrin Balinais. */
.imm-page .prop-hero-full{height:100vh;height:100svh;min-height:560px}
@media(max-height:700px){.imm-page .prop-hero{padding-bottom:36px}}

/* Écran très bas (paysage, zoom 200 %) : la barre d’action masquait un tiers de l’écran ; la bulle reprend sa place. */
@media(max-width:768px) and (max-height:480px){
  html.imm-mbar-ready .imm-mbar{display:none}
  html.imm-mbar-ready .fc-fab{display:flex}
}