/* =========================================================
   Repli CSS 3D — le même palier octogonal, le même geste, sans WebGL.
   Comme #scene, c'est du DÉCOR posé par-dessus le socle : il ne couvre
   l'écran que sous data-rendu="css3d".
   ========================================================= */

#repli { display: none; }

body[data-rendu="css3d"] #repli {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #0b0b0b;
  perspective: var(--repli-perspective, 700px);
  perspective-origin: 50% 50%;
}

/* Le monde tourne autour de l'ŒIL, pas autour d'un point devant lui : d'où le
   translateZ qui remet son origine à la position de la caméra. Sans lui, le
   palier tournerait devant nous comme un manège au lieu de nous entourer. */
.repli__monde {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.repli__face {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Une face de SALLE n'a pas de fond : ses quatre morceaux de mur le portent,
   et laissent l'ouverture réellement vide. Une face d'OBJET, elle, est pleine. */
.repli__face[data-type="objet"] {
  background: #14140f url('../assets/img/cabine/paroi.webp') center / cover;
}

.repli__mur {
  position: absolute;
  background-image: url('../assets/img/cabine/paroi.webp');
  background-color: #14140f;
}

/* L'ouverture percée dans la paroi, et la salle EN RETRAIT derrière : ce
   décalage en profondeur donne la parallaxe qu'une simple image plate n'a pas. */
.repli__ouverture {
  position: absolute;
  top: 21%;
  bottom: 21%;
  left: 50%;
  width: 82%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
}

/* `inset` et `transform` sont posés par le script : ils dépendent du recul,
   et le facteur d'agrandissement se calcule au lieu de se régler à l'oeil. */
.repli__salle {
  position: absolute;
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 0 120px 30px rgba(0, 0, 0, .95) inset;
}

.repli__salle img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: brightness(.92);
}

.repli__objet { position: absolute; inset: 0; display: grid; place-items: center; }
.repli__objet img { max-width: 62%; max-height: 62%; }

/* Le miroir n'a pas d'image : en 3D c'est une CubeCamera, qu'on ne peut pas
   répliquer sans WebGL. Un dégradé métallique tient le rôle plutôt qu'un trou. */
.repli__miroir {
  position: absolute; inset: 24% 30%;
  background: linear-gradient(150deg, #2b3134 0%, #6d7679 38%, #3a4144 60%, #878f91 100%);
  box-shadow: 0 0 40px rgba(0, 0, 0, .8) inset;
}

/* ---- La cabine : solidaire du regard, hors du monde 3D ---- */
.repli__cabine { position: absolute; inset: 0; z-index: 10; pointer-events: none; }

.repli__flanc {
  position: absolute; top: 0; bottom: 0;
  width: calc(50% - min(23vh, 21%) - 28px);
  background: url('../assets/img/cabine/cabine-interieur.webp') center / cover;
  filter: brightness(.55) saturate(.8);
}
.repli__flanc--g { left: 0; }
.repli__flanc--d { right: 0; transform: scaleX(-1); }

.repli__baie {
  position: absolute; top: 8%; bottom: 8%;
  left: 50%; width: min(46vh, 42%);
  transform: translateX(-50%);
}
.repli__jambage {
  position: absolute; top: 0; bottom: 0; width: 28px;
  background: url('../assets/img/cabine/chrome.webp') center / cover;
  box-shadow: inset -8px 0 18px rgba(0, 0, 0, .55);
}
.repli__jambage--g { left: -28px; }
.repli__jambage--d { right: -28px; transform: scaleX(-1); }
.repli__linteau {
  position: absolute; left: -28px; right: -28px; top: -26px; height: 26px;
  background: linear-gradient(#2a2a2a, #111);
}
.repli__seuil {
  position: absolute; left: -28px; right: -28px; bottom: -22px; height: 22px;
  background: linear-gradient(#0d0d0d, #242424);
}
.repli__porte {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: url('../assets/img/cabine/chrome.webp') center / cover, #1a1a1a;
  background-blend-mode: luminosity;
  will-change: transform;
  box-shadow: 8px 0 26px rgba(0, 0, 0, .65);
}
.repli__porte--g { left: 0; }
.repli__porte--d { right: 0; }

.repli__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, .8) 100%);
}

/* ---- Le panneau : de VRAIS boutons ----
   En 3D le panneau est une texture visée au rayon. Ici ce sont des <button>,
   ce qui rend le repli utilisable au clavier et au lecteur d'écran — un
   avantage que la scène WebGL n'a pas. */
.repli__panneau {
  position: absolute;
  right: max(2vw, 14px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  background: linear-gradient(160deg, #4a4a45, #2a2a26);
  border: 1px solid rgba(0, 0, 0, .6);
  border-radius: 5px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .7);
}

.repli__bouton {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 4px 6px;
  color: #e7e3d6;
  font: 600 0.72rem/1.2 'Raleway', system-ui, sans-serif;
  letter-spacing: 0.09em; text-transform: uppercase;
  cursor: pointer; text-align: left;
}
.repli__bouton::before {
  content: ''; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #6a5a34;
  box-shadow: 0 0 0 2px #1b1b18, 0 0 6px rgba(255, 190, 0, .25);
}
.repli__bouton[aria-current="true"]::before {
  background: #ffbe00;
  box-shadow: 0 0 0 2px #1b1b18, 0 0 14px rgba(255, 190, 0, .9);
}
.repli__bouton:focus-visible { outline: 2px solid #e0fbab; outline-offset: 2px; }

@media (max-width: 620px) {
  .repli__panneau { right: 8px; padding: 10px 8px; gap: 7px; }
  .repli__bouton { font-size: 0.6rem; letter-spacing: 0.05em; }
  .repli__bouton::before { width: 15px; height: 15px; }
}