/* Le dieu : la toile 3D, ses paroles, le bouton du son, et la loge (son banc d'essai). */

.dieu-monte { position:relative; isolation:isolate }
.dieu-toile {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity 1.2s ease; cursor:pointer; touch-action:pan-y;
}
.dieu-vivant .dieu-toile { opacity:1 }
.dieu-vivant > img { opacity:0; transition:opacity 1.2s ease }
.dieu-vivant .poussiere { display:none }

.dieu-bulle {
  /* Accrochée au-dessus de sa tête : le moteur donne sa position à l'écran (--bx, --by). */
  position:absolute; left:var(--bx, 50%); top:var(--by, 18%); z-index:2; transform:translate(-50%, calc(-100% + 6px));
  width:max-content; max-width:min(78%, 340px); margin:0; padding:10px 16px 11px;
  font:italic 400 clamp(15px, 1.5vw, 19px)/1.35 'Fraunces', Georgia, serif; text-align:center;
  color:#2c211a; background:rgba(246, 238, 226, .86); border:1px solid rgba(120, 80, 45, .18); border-radius:2px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .5s ease, transform .5s ease;
}
.dieu-bulle.visible { opacity:1; transform:translate(-50%, -100%) }
/* Muet : les mots sont gravés, pas dits. */
.dieu-bulle.gravee {
  font:500 11px/1.6 'IBM Plex Mono', monospace; letter-spacing:.16em; text-transform:uppercase;
  color:#f3e6d2; background:rgba(40, 26, 20, .72); border-color:rgba(255, 190, 120, .25);
}

.dieu-son {
  position:absolute; right:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 13px;
  font:500 10px/1 'IBM Plex Mono', monospace; letter-spacing:.1em; text-transform:uppercase;
  color:#f6ead8; background:rgba(36, 24, 18, .55); border:1px solid rgba(255, 210, 160, .28); border-radius:999px;
  cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .3s;
}
.dieu-son:hover { background:rgba(36, 24, 18, .75) }
.dieu-son[aria-pressed="true"] { background:#a54b28; border-color:#a54b28 }
.dieu-son[aria-pressed="true"] .dieu-son-texte::after { content:' · on' }
.dieu-son:focus-visible { outline:2px solid #a54b28; outline-offset:3px }

@media (max-width:600px) {
  .dieu-son { min-height:30px; padding:0 10px; font-size:9px; right:10px; bottom:10px }
}

/* ---------- la loge ---------- */

.loge { max-width:var(--large, 1280px); margin:0 auto; padding:28px var(--marge, 24px) 40px }
.loge-tete { display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; margin-bottom:22px }
.loge-tete h1 { margin:0; font:300 clamp(34px, 5vw, 64px)/1 'Fraunces', serif; letter-spacing:-.03em }
.loge-tete h1 em { color:var(--lueur, #a54b28) }
.loge-tete p { margin:0; max-width:520px; color:var(--brume, #6e6d62); font:400 14px/1.6 var(--sans, sans-serif) }
.loge-grille { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(300px, 1fr); gap:22px; align-items:start }
.loge-scene { position:relative; aspect-ratio:4 / 4.2; border-radius:44% 44% 4px 4px / 32% 32% 4px 4px; overflow:hidden; background:#e5d5b9 }
.loge-panneau { display:grid; gap:18px }
.loge-bloc { border:1px solid var(--trait, rgba(72,59,38,.16)); border-radius:3px; padding:16px 16px 14px; background:rgba(255,255,255,.25) }
.loge-bloc h2 { margin:0 0 12px; font:500 10px/1.4 'IBM Plex Mono', monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--brume, #6e6d62) }
.loge-curseur { display:grid; grid-template-columns:76px 1fr 28px; align-items:center; gap:10px; margin:7px 0 }
.loge-curseur label { font:600 12px/1.2 var(--sans, sans-serif) }
.loge-curseur output { font:500 11px/1 'IBM Plex Mono', monospace; text-align:right }
.loge-curseur small { grid-column:2; display:flex; justify-content:space-between; margin-top:-4px; font:400 9.5px/1.2 var(--sans, sans-serif); color:var(--brume, #6e6d62) }
.loge-curseur input { width:100%; accent-color:var(--lueur, #a54b28) }
.loge-boutons { display:flex; flex-wrap:wrap; gap:7px }
.loge-boutons button {
  min-height:34px; padding:0 12px; font:500 11.5px/1 var(--sans, sans-serif); color:var(--os, #302f2a);
  background:transparent; border:1px solid var(--trait-2, rgba(72,59,38,.28)); border-radius:999px; cursor:pointer;
}
.loge-boutons button:hover, .loge-boutons button[aria-pressed="true"] { background:var(--os, #302f2a); color:var(--encre, #f3efe6); border-color:var(--os, #302f2a) }
.loge-note { font:400 12.5px/1.6 var(--sans, sans-serif); color:var(--brume, #6e6d62); margin:0 }

@media (max-width:900px) {
  .loge-grille { grid-template-columns:1fr }
  .loge-scene { aspect-ratio:1 / 1.1 }
}
@media (prefers-reduced-motion:reduce) {
  .dieu-toile, .dieu-bulle, .dieu-vivant > img { transition:none }
}