:root {
  --navy:#102347;
  --gold:#b48a47;
  --ivory:#f6efe3;
  --source-width:1672px;
  --source-height:941px;
  --door-left:670px;
  --door-top:158px;
  --door-width:329px;
  --door-height:659px;
  --half-left:164px;
  --half-right:165px;
  --open:3.2s;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ivory)}
body{font-family:Georgia,"Times New Roman",serif}
.intro{position:fixed;inset:0;overflow:hidden;background:#e8d3b2;transition:opacity .85s ease 4.05s}
.intro.done{opacity:0;pointer-events:none}
.viewport{position:absolute;inset:0;overflow:hidden}
.artboard{
  position:absolute;left:0;top:0;width:var(--source-width);height:var(--source-height);
  transform-origin:top left;perspective:2600px;transform-style:preserve-3d
}
.decor-fixed,.closed-photo{position:absolute;inset:0;width:1672px;height:941px;pointer-events:none}
.decor-fixed{z-index:3}
.closed-photo{z-index:7;opacity:1;transition:opacity .16s ease .06s}
.intro.is-opening .closed-photo{opacity:0}
.page-behind{
  position:absolute;left:var(--door-left);top:var(--door-top);width:var(--door-width);height:var(--door-height);
  z-index:1;background:radial-gradient(circle at 50% 25%,#fffefb 0%,#fff5dc 44%,#e3c58c 100%);
  opacity:0;transition:opacity 1.25s ease .35s
}
.intro.is-opening .page-behind{opacity:.98}
.door{
  position:absolute;top:var(--door-top);height:var(--door-height);z-index:5;
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform var(--open) cubic-bezier(.18,.72,.16,1),filter var(--open) ease
}
.door img{position:absolute;inset:0;width:100%;height:100%;display:block}
.door-left{left:var(--door-left);width:var(--half-left);transform-origin:left center}
.door-right{left:calc(var(--door-left) + var(--half-left));width:var(--half-right);transform-origin:right center}
.intro.is-opening .door-left{transform:rotateY(88deg);filter:brightness(.82)}
.intro.is-opening .door-right{transform:rotateY(-88deg);filter:brightness(.82)}
.door-edge{
  position:absolute;top:0;bottom:0;width:15px;z-index:-1;opacity:0;
  background:linear-gradient(90deg,#86663a,#ead0a0,#9b7540);
  transition:opacity .42s ease .25s
}
.door-left .door-edge{right:-11px} .door-right .door-edge{left:-11px}
.intro.is-opening .door-edge{opacity:.86}
.handle-zone{
  position:absolute;left:783px;top:495px;width:110px;height:95px;z-index:9;
  border:0;background:transparent;border-radius:999px;cursor:pointer
}
.handle-zone::before,.handle-zone::after{
  content:"";position:absolute;top:5%;bottom:5%;width:38%;border-radius:50%;
  opacity:0;filter:blur(4px);
  background:radial-gradient(circle,rgba(255,245,185,.78),rgba(255,219,110,.22) 44%,transparent 72%);
  transition:opacity .35s ease
}
.handle-zone::before{left:5%} .handle-zone::after{right:5%}
.handle-zone:hover::before,.handle-zone:hover::after{opacity:1}
.shine{position:absolute;inset:0;overflow:hidden;border-radius:999px}
.shine::after{
  content:"";position:absolute;top:-45%;left:-55%;width:24%;height:190%;transform:rotate(13deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),rgba(255,244,181,.98),rgba(255,255,255,.18),transparent);
  animation:glint 4.8s ease-in-out 1.1s infinite
}
@keyframes glint{
  0%,62%{left:-55%;opacity:0}68%{opacity:1}82%{left:130%;opacity:.9}88%,100%{left:130%;opacity:0}
}
.intro.is-opening .handle-zone{pointer-events:none;opacity:0;transition:opacity .15s ease}
.skip{
  position:fixed;z-index:20;right:24px;bottom:20px;color:#102347;text-decoration:none;
  font:600 .68rem Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(255,250,242,.72);padding:10px 14px;border:1px solid rgba(16,35,71,.15)
}

/* V3 : animation V14 conservée, salon visible derrière */
.page-behind { overflow:hidden; background:#ead9bd; }
.page-behind img { position:absolute; left:50%; top:50%; width:1672px; height:941px; object-fit:cover; transform:translate(-50%,-50%); }
.intro.transition-ready 
.intro.transition-ready .decor-fixed, .intro.transition-ready .door { opacity:0; transition:opacity .42s ease; }
.artboard { transition:transform 1.75s cubic-bezier(.18,.75,.18,1), filter 1.1s ease; will-change:transform; }
.intro.camera-entering .artboard { filter:brightness(1.04); }
.intro.fade-out { opacity:0; transition:opacity .68s ease; }
.intro.music-started .skip { display:none!important; }
\n\n/* V4 — vrais battants conservés pendant l'avancée */
.intro.transition-ready .decor-fixed,
.intro.transition-ready .door {
  opacity: 1 !important;
}

.intro.camera-entering .decor-fixed {
  opacity: 1;
  transition: opacity 1.35s ease .45s;
}

.intro.camera-entering .door {
  opacity: 1;
  transition:
    transform var(--open) cubic-bezier(.18,.72,.16,1),
    filter var(--open) ease,
    opacity 1.35s ease .72s;
}

.intro.camera-entering.camera-fading .decor-fixed,
.intro.camera-entering.camera-fading .door {
  opacity: 0;
}

/* Le salon est toujours visible uniquement dans l'ouverture réelle. */
.page-behind {
  z-index: 1;
}

/* V5 — traversée continue, accueil déjà présent derrière */
.home-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transform: scale(1.045);
  filter: blur(1.5px);
  pointer-events: none;
  transition:
    opacity 1.15s ease,
    transform 1.8s cubic-bezier(.16,.74,.18,1),
    filter 1.4s ease;
}

body.revealing-home .home-layer {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.intro {
  z-index: 10;
  will-change: opacity;
}

.artboard {
  transition:
    transform 3.15s cubic-bezier(.12,.72,.12,1),
    filter 1.4s ease;
  will-change: transform;
}

.intro.is-opening .door-left,
.intro.is-opening .door-right {
  transition-duration: 3.05s;
}

.intro.passing-through .door {
  opacity: 0;
  transition: opacity .72s ease;
}

.intro.passing-through .decor-fixed {
  opacity: 0;
  transition: opacity .9s ease;
}

.intro.passing-through 
.intro.final-fade {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.05s ease;
}

.intro.final-hidden {
  display: none;
}


/* V6 — le salon sans portes est le seul décor derrière la V14 */
.page-behind {
  overflow: hidden;
  background: #ead9bd;
}

.page-behind img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1672px;
  height: 941px;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%) scale(1.01);
  transform-origin: center center;
}

.artboard {
  will-change: transform;
}

/* Les vrais battants restent visibles et correctement orientés.
   Ils s'effacent uniquement quand la caméra est presque passée entre eux. */
.intro.near-threshold .door {
  opacity: 1;
}

.intro.leaving-doorway .door {
  opacity: 0;
  transition: opacity .72s ease;
}

.intro.leaving-doorway .decor-fixed {
  opacity: 0;
  transition: opacity .9s ease;
}

.intro.final-fade {
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}

.intro.final-hidden {
  display: none;
}


/* V7 — suppression progressive des cadres beiges */
.salon-full {
  position: absolute;
  inset: 0;
  width: 1672px;
  height: 941px;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  opacity: 0;
  transform: scale(1.01);
  transform-origin: center center;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Le décor V14 et les battants restent au-dessus du salon plein écran. */
.decor-fixed { z-index: 3; }
.door { z-index: 5; }
.closed-photo { z-index: 7; }

/* À mesure que l'on franchit l'ouverture, le salon prend toute la largeur. */
.intro.expanding-lounge .salon-full {
  opacity: 1;
  transition: opacity 1.05s ease;
}

.intro.leaving-doorway .page-behind {
  opacity: 0;
  transition: opacity .55s ease;
}

/* Le décor extérieur disparaît une fois le salon plein écran en place. */
.intro.leaving-doorway .decor-fixed {
  opacity: 0;
  transition: opacity .8s ease;
}


/* V23 — entrée dans le salon stabilisée */
.salon-full {
  object-position: center 52%;
  transform: scale(1.005);
}

.intro.expanding-lounge .salon-full {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity .72s ease,
    transform 1.25s cubic-bezier(.22,.7,.25,1);
}

.intro.near-threshold .page-behind {
  opacity: .38;
  transition: opacity .65s ease;
}

.intro.leaving-doorway .page-behind {
  opacity: 0;
  transition: opacity .48s ease;
}

/* Le salon stable prend le relais avant que le zoom du décor extérieur
   puisse faire remonter visuellement le tableau. */
.intro.near-threshold .salon-full {
  opacity: 1;
}


/* V24 — verrouillage du salon dès le premier mouvement des portes */
.intro.salon-locked .salon-full {
  opacity: 1 !important;
  transform: scale(1) !important;
  object-position: center 52% !important;
  transition: none !important;
}

.intro.salon-locked .page-behind {
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* Les portes s'ouvrent au-dessus d'un salon déjà parfaitement cadré. */
.intro.salon-locked .door-stage {
  z-index: 3;
}

.intro.salon-locked .salon-full {
  z-index: 1;
}


/* V25 — salon réellement immobile derrière les portes */
.salon-viewport-fixed {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  pointer-events: none;
}

.artboard {
  z-index: 2;
}

/* Le salon mobile contenu dans l'ouverture n'est plus utilisé :
   il provoquerait un doublon et une remontée du tableau. */
.intro.is-opening .page-behind {
  opacity: 0 !important;
}

/* Les anciens calques salon des versions précédentes restent neutralisés. */
.salon-full,
.intro.salon-locked .salon-full {
  display: none !important;
}


/* =========================================================
   V32 — premier écran parfaitement fixe et sans mur parasite
   La mécanique de la V25 et les coordonnées des poignées restent intactes.
   ========================================================= */

/* Le salon plein écran de fond ne doit jamais être visible avant le clic. */
.intro:not(.is-opening) .salon-viewport-fixed {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Une seule source visuelle avant interaction : scene-portes.png,
   cadrée par le même artboard que les zones cliquables. */
.intro:not(.is-opening) .artboard {
  z-index: 3;
}
.intro:not(.is-opening) .closed-photo {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Le fond du viewport reprend la teinte du palier afin qu'aucune bordure
   latérale contrastée ne puisse apparaître pendant le calcul initial. */
.viewport,
.intro {
  background: #ead6b6;
}

/* Le salon fixe n'apparaît qu'au moment réel de l'ouverture. */
.intro.is-opening .salon-viewport-fixed {
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease .04s;
}

/* Aucun déplacement propre du salon : il reste immobile derrière les portes. */
.salon-viewport-fixed {
  transform: none !important;
}

/* =========================================================
   V69 — traversée 3D du seuil
   Le décor n'est plus zoomé en 2D : les plans sont déplacés
   sur l'axe Z dans une scène en perspective.
   ========================================================= */
.viewport{
  perspective: 1150px;
  perspective-origin: 50% 51%;
  transform-style: preserve-3d;
}

.artboard{
  transform-style: preserve-3d;
  transition: none !important;
  will-change: transform, opacity;
}

.salon-viewport-fixed{
  transform-origin: 50% 51% !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Pendant la traversée, aucun ancien fondu/zoom ne doit prendre la main. */
.intro.walking-3d .home-layer,
body.walking-3d .home-layer{
  opacity: 0 !important;
  transform: none !important;
  filter: none !important;
}

.intro.walking-3d .decor-fixed,
.intro.walking-3d .door{
  will-change: transform, opacity;
}

.intro.walking-3d .page-behind{
  display:none !important;
}

.intro.arrived-3d .artboard{
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .viewport{perspective:none}
}


/* V51 — valeurs visibles sur l'écran des portes, desktop et mobile */
.intro-values {
  position: fixed;
  z-index: 18;
  left: 50%;
  bottom: clamp(14px, 2.2vh, 28px);
  transform: translateX(-50%);
  width: min(94vw, 920px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 24px);
  padding: 0 14px;
  color: #102347;
  font: 600 clamp(.62rem, .8vw, .76rem)/1.35 Arial, Helvetica, sans-serif;
  letter-spacing: clamp(.08em, .16vw, .16em);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(255,250,242,.68);
  transition: opacity .25s ease;
}
.intro-values i { color: #b48a47; font-style: normal; }
.intro.is-opening .intro-values,
.intro.final-fade .intro-values { opacity: 0; }

@media (max-width: 640px) {
  .intro-values {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 16px);
    gap: 5px;
    padding: 0 4px;
    font-size: clamp(.48rem, 2.3vw, .62rem);
    letter-spacing: .035em;
  }
  .intro-values i { margin: 0 1px; }
}


/* V72 — entrée et accueil sur le même document.
   L'accueil est entièrement calculé derrière l'intro : aucune navigation,
   aucun iframe et aucun second rendu au moment où les portes disparaissent. */
html.intro-active,
body.intro-active {
  overflow: hidden !important;
}
html.intro-complete,
body.intro-complete {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body.intro-active .site-header {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.intro-complete .site-header {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .16s ease !important;
}
/* La vraie page est déjà visible sous l'intro, sans zoom, blur ou transition. */
.home-layer { display:none !important; }
.intro.final-fade {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .16s linear !important;
}
.intro.final-hidden { display:none !important; }

/* V73 — suppression définitive du flash beige au raccord.
   Après le clic, le fond de sécurité est le même salon que l'accueil :
   même si un calque GPU est repeint entre deux frames, aucun aplat beige
   ne peut apparaître. */
.intro.is-opening,
.intro.is-opening .viewport,
.intro.arrived-3d,
.intro.arrived-3d .viewport,
.intro.final-fade,
.intro.final-fade .viewport {
  background-color: #f3eadc !important;
  background-image: url("../assets/salon-transition-sans-portes.webp") !important;
  background-size: cover !important;
  background-position: center 52% !important;
  background-repeat: no-repeat !important;
}

/* Le salon de raccord ne doit jamais disparaître avant que l'intro entière
   ne soit retirée. */
.intro.is-opening .salon-viewport-fixed,
.intro.arrived-3d .salon-viewport-fixed,
.intro.final-fade .salon-viewport-fixed {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* Accès direct discret pour les visiteurs qui souhaitent passer l’introduction. */
.skip-intro {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 10000;
  padding: 9px 12px;
  color: #f8f1e6;
  background: rgba(12,35,71,.72);
  border: 1px solid rgba(184,139,64,.72);
  border-radius: 2px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  opacity: .82;
  transition: opacity .18s ease, background-color .18s ease;
}
.skip-intro:hover,
.skip-intro:focus-visible {
  opacity: 1;
  background: rgba(12,35,71,.92);
}
.skip-intro:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.intro.is-opening .skip-intro {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 640px) {
  .skip-intro {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(38px, env(safe-area-inset-bottom));
    padding: 8px 10px;
    font-size: 9px;
  }
}