/* ==========================================================
   L'Endroit — effets « grande maison » (va avec js/prestige.js)
   Rideau d'ouverture, défilement fluide, photos en profondeur,
   titres qui montent, grande photo qui s'ouvre, curseur.
   Pour les retirer : enlever ce fichier, js/prestige.js
   et les 4 fichiers de js/vendor dans index.html.
   ========================================================== */

/* ----- 1. Rideau d'ouverture (première visite seulement) ----- */
.intro-rideau{display:none}
html.intro .intro-rideau{display:flex;position:fixed;inset:0;z-index:200;background:var(--nuit);color:var(--rose);
  align-items:center;justify-content:center;text-align:center;
  /* secours : si le script ne marche pas, le rideau part tout seul */
  animation:ir-secours .01s 4.5s forwards}
@keyframes ir-secours{to{visibility:hidden;opacity:0}}
html.intro body{overflow:hidden}
.intro-rideau .ir-logo{display:block;font-family:var(--logo);font-size:clamp(3.4rem,11vw,8rem);line-height:1;letter-spacing:.01em}
.intro-rideau .ir-trait{display:block;width:120px;height:1px;margin:26px auto 18px;background:var(--champagne);transform:scaleX(0)}
.intro-rideau .ir-sous{display:block;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--gris-clair);opacity:0}
.intro-rideau::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:var(--motif) 0 0/24px 24px;opacity:.9}
/* l'accueil attend que le rideau se lève */
html.intro .hero *,html.intro .badge,html.intro .scene .cadre{animation-play-state:paused!important}

/* ----- 2. Défilement fluide ----- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:hidden}

/* ----- 3. Photos en profondeur : l'image glisse doucement dans son cadre ----- */
html.prestige .photo > img{transform:translate3d(0,var(--py,0%),0) scale(var(--ps,1.14));transition:none;will-change:transform}
html.prestige .scene .cadre .photo > img{--ps:1.06}

/* ----- 4. Titres : les mots montent, comme sur une scène ----- */
html.prestige .mot-masque{padding-bottom:.08em;margin-bottom:-.08em}

/* ----- 5. La grande photo de la terrasse s'ouvre jusqu'aux bords ----- */
@media (min-width:861px){
  html.prestige .vitrine{padding:0 0 110px}
  html.prestige .vitrine .wrap{max-width:none;padding:0}
  html.prestige .vitrine .photo.ordi{border-radius:0;clip-path:inset(0 var(--cote,9%) 0 var(--cote,9%) round var(--arrondi,28px));height:92vh;aspect-ratio:auto}
}
.vitrine .wrap{position:relative}
.legende-vitrine{position:absolute;left:0;right:0;bottom:9%;z-index:2;text-align:center;color:#fff;pointer-events:none;
  text-shadow:0 2px 30px rgba(0,0,0,.45)}
.legende-vitrine span{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,2.2rem);margin-top:8px;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.legende-vitrine b{display:block;font-family:var(--logo);font-weight:400;font-size:clamp(2.8rem,8vw,7.5rem);line-height:1}
.vitrine .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(20,17,19,.72));pointer-events:none}
/* la photo reste calée en haut : on ne voit pas ce qui est au-dessus de la balustrade */
.vitrine .photo > img{object-position:50% 0}
html.prestige .vitrine .photo > img{transform:scale(var(--ps,1));transform-origin:50% 0}
@media (max-width:860px){.legende-vitrine{bottom:7%}}

/* ----- 6. Grain de film très léger (texture des sites haut de gamme) ----- */
html.prestige body::after{content:"";position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ----- 7. Curseur (ordinateur) : un point rose et un cercle qui suit ----- */
.curseur,.curseur-point{display:none}
@media (hover:hover) and (pointer:fine){
  html.prestige .curseur,html.prestige .curseur-point{display:block;position:fixed;left:0;top:0;z-index:180;pointer-events:none;border-radius:50%}
  html.prestige .curseur{width:42px;height:42px;margin:-21px 0 0 -21px;border:1px solid rgba(20,17,19,.35);
    display:grid;place-items:center;transition:width .35s var(--douce),height .35s var(--douce),margin .35s var(--douce),background .35s,border-color .35s}
  html.prestige .curseur-point{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--framboise)}
  html.prestige .curseur.sur-sombre{border-color:rgba(242,212,215,.5)}
  html.prestige .curseur.cache,html.prestige .curseur-point.cache{opacity:0}
}

/* ----- 8. Chiffres qui défilent ----- */
html.prestige .compteur{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html.intro .intro-rideau{display:none}
  html.prestige body::after,.curseur,.curseur-point{display:none!important}
}