/* ═══════════════════════════════════════════════════════════
   Sylvain Blanchoud — LE COULOIR
   Une œuvre = une salle. L'obscurité comme matière, l'échelle
   vraie comme règle. Jeton --cm (px par cm d'œuvre) posé par
   couloir.js ; tout le reste — cadres, passe-partout — en découle.
   ═══════════════════════════════════════════════════════════ */

html[data-page="couloir"] {
  --nuit: #14110C;
  scroll-behavior: smooth;
}

html[data-page="couloir"] body {
  /* le couloir est sombre par nature, dans les deux thèmes */
  background: var(--nuit);
  color: var(--ivoire-ombre);
}

html[data-page="couloir"] ::selection { background: var(--or); color: var(--nuit); }

/* ─── Podomètre : la distance parcourue ──────────────────── */

.podometre {
  position: fixed;
  /* --header-h posé par couloir.js : toujours sous l'en-tête, quelle
     que soit sa hauteur (nav repliée sur 1, 2 ou 3 lignes) */
  top: calc(var(--header-h, 4.6rem) + 0.5rem);
  right: calc(clamp(1.2rem, 4vw, 3rem) + env(safe-area-inset-right, 0px));
  z-index: 90;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--or);
  opacity: 0.9;               /* contraste ≥ 4.5:1 sur fond nuit */
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ─── L'entrée ───────────────────────────────────────────── */

.couloir-entree {
  min-height: 90vh;
  min-height: 90svh;          /* barre Safari mobile : vh ment, svh non */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2.2rem;
  padding: 7rem 1.6rem 2rem;
}

.couloir-titre {
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ivoire);
}

.couloir-invite {
  font-style: italic;
  font-size: 1.02rem;
  color: var(--or);
  animation: couloir-respiration 5s ease-in-out infinite;
}

@keyframes couloir-respiration {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.95; }
}

/* ─── Les salles ─────────────────────────────────────────── */

/* hauteur réservée avant le rendu JS des 5 salles : sans elle, la
   sortie apparaît en haut puis saute de cinq écrans (CLS 0.17) */
#salles:empty {
  min-height: 525vh;
  min-height: 525svh;
}

.salle {
  min-height: 105vh;
  min-height: 105svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.2rem;
  padding: 8vh 1.2rem;
  position: relative;
}

.salle-indication {
  position: absolute;
  top: 6vh;
  font-size: 0.66rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--or);
  opacity: 0.92;              /* contraste ≥ 4.5:1 sur fond nuit */
}

/* le cadre : l'œuvre attend dans le noir */
.cadre {
  position: relative;
  background: #060504;
  padding: calc(var(--cm, 4px) * 6);   /* passe-partout de 6 cm, à l'échelle */
  box-shadow:
    0 0 0 1px rgba(184, 149, 106, 0.1),
    0 40px 120px rgba(0, 0, 0, 0.85);
  filter: brightness(0.12);
  transform: scale(0.985);
  transition: filter 2.8s cubic-bezier(0.4, 0, 0.2, 1), transform 2.8s ease;
}

.salle.eclairee .cadre {
  filter: brightness(1);
  transform: scale(1);
}

/* le cône de lumière au-dessus du cadre */
.cadre::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: min(140%, 96vw);     /* le cône ne déborde jamais l'écran */
  height: 38vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(214, 189, 156, 0.09) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 3.5s ease 0.6s;
  pointer-events: none;
}

.salle.eclairee .cadre::before { opacity: 1; }

/* l'œuvre, à l'échelle vraie (dimensions posées par couloir.js) */
.oeuvre-box {
  position: relative;
  background-size: cover;
  background-position: center;
}

.oeuvre-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Le cartel : peu de mots, les bons ──────────────────── */

.cartel-couloir {
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2.4s ease 1.4s, transform 2.4s ease 1.4s;
}

.salle.eclairee .cartel-couloir {
  opacity: 1;
  transform: none;
}

.cartel-couloir span { display: block; }

.cartel-couloir .titre {
  font-style: italic;
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  color: var(--ivoire);
}

.cartel-couloir .titre em { opacity: 0.8; }

.cartel-couloir .details {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or);
  opacity: 0.85;
}

.cartel-couloir .edition {
  margin-top: 0.8rem;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--ivoire-ombre);
  opacity: 0.9;
}

.points { display: inline-flex; gap: 0.34rem; }

.point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--or);
}

.point.acquis {
  background: var(--or);
  border-color: transparent;
  opacity: 0.55;
}

/* le bouton de contemplation : sa propre ligne, centré, cible
   tactile confortable (l'édition est en inline-flex : sans ceci,
   le bouton se collait à côté d'elle sur la même ligne) */
.cartel-couloir .sasseoir {
  display: block;
  width: fit-content;
  margin: 1rem auto 0;
  padding: 0.65em 1.1em;     /* cible tactile >= 40 px */
}

/* ─── La sortie ──────────────────────────────────────────── */

.couloir-sortie {
  min-height: 60vh;
  min-height: 60svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.2rem;
  text-align: center;
  padding: 2rem 1.6rem 6rem;
}

.sortie-phrase {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem, 3.2vw, 1.9rem);
  max-width: 24ch;
  line-height: 1.5;
  color: var(--ivoire);
}

.sortie-liens {
  display: flex;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  flex-wrap: wrap;
  justify-content: center;
}

.sortie-liens a {
  color: var(--or);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(184, 149, 106, 0.4);
  padding-bottom: 2px;
  transition: color 0.6s ease, border-color 0.6s ease;
}

.sortie-liens a:hover { color: var(--ivoire); border-color: var(--or); }

/* ─── La lettre du silence, version nuit ─────────────────── */

html[data-page="couloir"] .lettre-bloc { margin-top: 1.4rem; }
html[data-page="couloir"] .lettre-titre { color: var(--ivoire); }
html[data-page="couloir"] .lettre-titre::before,
html[data-page="couloir"] .lettre-message { color: var(--or); background-color: transparent; }
html[data-page="couloir"] .lettre-titre::before { background: var(--or); }
html[data-page="couloir"] .lettre-sous,
html[data-page="couloir"] .lettre-rgpd { color: var(--ivoire-ombre); }
html[data-page="couloir"] .lettre-form input[type="email"] {
  color: var(--ivoire);
  border-color: rgba(184, 149, 106, 0.4);
}
html[data-page="couloir"] .lettre-form input[type="email"]:focus { border-color: var(--or); }
html[data-page="couloir"] .lettre-form button {
  color: var(--or);
  border-color: var(--or);
}
html[data-page="couloir"] .lettre-form button:hover,
html[data-page="couloir"] .lettre-form button:focus-visible {
  background: var(--or);
  color: var(--nuit);
}

/* ─── Contemplation : il ne reste que l'œuvre ────────────── */

/* retour en douceur quand la contemplation s'achève */
html[data-page="couloir"] .site-header {
  transition: background 0.5s ease, box-shadow 0.5s ease,
    padding 0.4s ease, opacity 1.2s ease;
}
.podometre,
.salle-indication { transition: opacity 1.2s ease; }

body.contemplation .site-header,
body.contemplation .podometre,
body.contemplation .salle-indication,
body.contemplation .cartel-couloir,
body.contemplation .couloir-entree,
body.contemplation .couloir-sortie,
body.contemplation .site-footer {
  opacity: 0 !important;
  transition: opacity 2s ease !important;
  pointer-events: none !important;
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 720px) {
  .salle { padding: 6vh 1rem; gap: 1.8rem; }
  .cadre::before { height: 22vh; }
}

/* ─── Apparition sans animation ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cadre,
  .cadre::before,
  .cartel-couloir { transition: none !important; }
  .cadre { filter: brightness(1) !important; transform: none !important; }
  .cadre::before { opacity: 1 !important; }
  .cartel-couloir { opacity: 1; transform: none !important; }
  .couloir-invite { animation: none !important; }

  /* contemplation : disparition/réapparition en 0,4 s */
  html[data-page="couloir"] .site-header,
  .podometre,
  .salle-indication,
  .cartel-couloir,
  body.contemplation .site-header,
  body.contemplation .podometre,
  body.contemplation .salle-indication,
  body.contemplation .cartel-couloir,
  body.contemplation .couloir-entree,
  body.contemplation .couloir-sortie,
  body.contemplation .site-footer {
    transition: opacity 0.4s ease !important;
  }
}