/* =========================================================
   Être DANS une salle.

   Le contenu n'est pas dupliqué : ce sont les sections du socle qui remontent
   par-dessus le décor. Le socle cesse ainsi d'être un simple filet de secours
   invisible — il devient ce qu'on lit vraiment, et il reste du HTML, donc
   accessible et sélectionnable.
   ========================================================= */

#salle {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: none;
  overflow: hidden;              /* le décor déborde : il dérive */
  background: var(--fond);
  opacity: 0;
  transition: opacity .5s ease;
}

body[data-vue="salle"] #salle { display: block; opacity: 1; }

/* Le décor est un CALQUE et non le fond de #salle : il doit pouvoir dériver
   sous le voile de lecture, qui, lui, ne bouge pas. Si les deux glissaient
   ensemble, l'image se déplacerait d'un bloc — plate. */
.salle__decor {
  position: absolute;
  inset: 0;
  background: var(--salle-fond, none) center / cover no-repeat;
  will-change: transform;
  /* Plus de regradage : depuis le 11/09 les décors sont générés DANS la charte. */
}

/* La lumière de la pièce, posée là où elle se trouve VRAIMENT dans la photo
   (positions mesurées, voir js/vie-salle.js). Elle respire, et vacille quand
   c'est une ampoule. */
.salle__halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle var(--halo-r, 20%) at var(--halo-x, 50%) var(--halo-y, 40%),
    rgba(var(--halo-chaleur, 255, 208, 130), .40) 0%,
    rgba(var(--halo-chaleur, 255, 208, 130), .16) 45%,
    transparent 78%);
  will-change: transform, opacity;
}

/* Le voile de lecture : sans lui, le texte se pose sur une photo contrastée et
   devient illisible. Dégradé et non aplat, pour que le décor reste perceptible
   sur les bords — on doit continuer à voir où l'on est. */
.salle__voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(31, 31, 31, .96) 0%, rgba(31, 31, 31, .9) 46%,
                    rgba(31, 31, 31, .35) 78%, rgba(31, 31, 31, .2) 100%),
    linear-gradient(to bottom, rgba(31, 31, 31, .7) 0%, transparent 18%);
}

/* Le grain, fabriqué à l'exécution (voir js/vie-salle.js) : du bruit ne se
   compresse pas, un carreau de 128 px pesait 23 ko en WebP. */
.salle__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  background-repeat: repeat;
  will-change: background-position;
}

@media (max-width: 780px) {
  /* En étroit le texte occupe toute la largeur : le dégradé latéral ne
     protégerait plus rien, il faut assombrir partout. */
  .salle__voile {
    background: linear-gradient(to bottom, rgba(31, 31, 31, .92) 0%,
                                rgba(31, 31, 31, .88) 60%, rgba(31, 31, 31, .95) 100%);
  }
}

/* ---- Le socle remonte ---- */
body[data-vue="salle"] > main {
  position: relative;
  z-index: 3;
}
/* La barre reste en haut pendant qu'on lit : « Retour à la cabine » est fixe,
   sans elle il se retrouvait posé sur le texte dès qu'on défilait. */
body[data-vue="salle"] > header {
  position: sticky;
  top: 0;
  z-index: 4;
}

/* Une seule salle à la fois : on est DANS une pièce, pas devant un sommaire. */
body[data-vue="salle"] main > .salle { display: none; }
body[data-vue="salle"][data-salle="le-groupe"] #le-groupe,
body[data-vue="salle"][data-salle="notre-musique"] #notre-musique,
body[data-vue="salle"][data-salle="dates"] #dates,
body[data-vue="salle"][data-salle="galerie"] #galerie { display: block; }

/* ---- Revenir à la cabine ---- */
/* « ← Cabine » : un lien de barre, en tilleul, sans boîte. */
.retour-cabine {
  position: fixed;
  left: clamp(1rem, 4vw, 3rem);
  top: 1.35rem;
  z-index: 5;
  display: none;
  align-items: center;
  gap: .6rem;
  color: var(--tilleul);
  font: 600 .72rem/1 var(--raleway);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
body[data-vue="salle"] .retour-cabine { display: inline-flex; }
.retour-cabine::before { content: '←'; font: 400 1.2rem/1 var(--anton); }
.retour-cabine:hover { color: var(--blanc); }
.retour-cabine:focus-visible { outline: 2px solid var(--tilleul); outline-offset: 3px; }

/* En vue « salle », l'en-tête du socle sert de navigation : c'est déjà la
   liste des quatre salles, en vrais liens. Inutile d'en dessiner une seconde. */
body[data-vue="salle"] > header {
  background: rgba(31, 31, 31, .82);
  backdrop-filter: blur(6px);
  border-bottom-color: var(--trait);
}
/* En salle, le socle prend l'air de la maquette.
   ⚠ `#contenu` (un id) bat `body[attr] > main` : sans l'id ici, le padding
   du socle restait, et le titre se collait sous la barre. */
body[data-vue="salle"] > #contenu {
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem) 6rem;
}
body[data-vue="salle"] main > .salle {
  padding: 0;
  border: 0;
  max-width: 62ch;
}
body[data-vue="salle"] .encart-info { margin: 2rem 0; }

/* Le nom du groupe cède sa place au retour : les deux se chevauchaient en haut
   à gauche. On est DANS le site, la marque n'a plus à se rappeler à nous —
   alors que la sortie, elle, doit être trouvable au premier coup d'œil.

   ⚠ Retiré de la VUE, pas de l'arbre d'accessibilité. `visibility: hidden` et
   `display: none` l'en auraient sorti aussi, et le site aurait perdu son
   unique <h1> pour un lecteur d'écran. Le repli en un pixel écrêté est la
   seule technique qui masque sans faire disparaître. */
body[data-vue="salle"] .entete__nom {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le titre replié ne tient plus sa place dans la barre : la navigation
   glissait à gauche, sous le bouton de retour. On la renvoie à droite et on
   réserve la gauche à la sortie. */
body[data-vue="salle"] > header {
  justify-content: flex-end;
  padding-left: 230px;
}

@media (max-width: 780px) {
  /* En étroit, les deux ne tiennent pas sur une ligne : le retour passe
     au-dessus et la barre lui laisse la place. */
  .retour-cabine { top: 1rem; }
  body[data-vue="salle"] > header { padding-left: min(6vw, 3rem); padding-top: 2.6rem; }
  body[data-vue="salle"] > header .entete__nav {
    width: 100%; justify-content: space-between; gap: .3rem .6rem;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;   /* une ligne, toujours */
  }
  body[data-vue="salle"] > header .entete__nav::-webkit-scrollbar { display: none; }
  body[data-vue="salle"] > header .entete__nav a { font-size: .74rem; letter-spacing: 0; white-space: nowrap; }
  /* En étroit, le décor est presque tout couvert : on allège le voile, sinon
     on ne sait plus dans quelle pièce on est. */
  .salle__voile {
    background: linear-gradient(to bottom, rgba(31, 31, 31, .86) 0%,
                                rgba(31, 31, 31, .8) 60%, rgba(31, 31, 31, .9) 100%);
  }
}