/* ============================================================
   LA TABLE RONDE — la scène centrale.
   Onze sièges en cercle, la table au milieu, la musique au pupitre.
   Langage Brand Bible (tokens --bb-* définis dans bb.css).
   ============================================================ */

.salle{padding:clamp(90px,14vh,160px) 0}
.salle .salle-head{text-align:center;max-width:680px;margin:0 auto clamp(44px,7vh,84px)}
.salle h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,58px);line-height:1.04;margin:0 0 18px}
.salle .salle-lede{font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.6vw,17.5px);line-height:1.75;color:color-mix(in srgb,var(--ink) 72%,transparent)}

/* — le cercle — */
.ronde{position:relative;width:min(92vw,640px);aspect-ratio:1;margin:0 auto}
.ronde::before{content:"";position:absolute;inset:6%;border:1px dashed var(--hair-or);border-radius:50%;opacity:.8}
.ronde::after{content:"";position:absolute;inset:24%;border:1px solid var(--hair);border-radius:50%}

/* — la table (le disque central) — */
.table-c{position:absolute;inset:31%;border-radius:50%;
  background:color-mix(in srgb,var(--bb-creme-chaude) 78%,var(--bb-blanc));
  border:1px solid var(--hair-or);
  box-shadow:0 30px 70px -40px color-mix(in srgb,var(--bb-noir) 35%,transparent), inset 0 0 0 8px color-mix(in srgb,var(--bb-or) 8%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:8%}
.table-c .glyph{font-size:19px;color:var(--bb-or)}
.table-c .t-nom{font-family:var(--serif);font-size:clamp(19px,2.6vw,26px);line-height:1.1}
.table-c .t-kicker{font-family:var(--sans);font-size:10px;letter-spacing:3.5px;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 55%,transparent)}

/* — le pupitre musique — */
.pupitre{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:4px}
.m-btn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--hair);border-radius:999px;
  padding:7px 13px;transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.m-btn:hover{border-color:var(--bb-or);transform:translateY(-1px)}
.m-btn .m-dot{width:6px;height:6px;border-radius:50%;background:var(--bb-gris-clair);flex:none;transition:background .3s}
.m-btn.is-on{background:var(--bb-noir);border-color:var(--bb-noir);color:var(--bb-creme)}
.m-btn.is-on .m-dot{background:var(--bb-or);animation:bat 1.05s ease-in-out infinite}
.m-btn[data-musique-stop].is-on{background:transparent;border-color:var(--hair);color:color-mix(in srgb,var(--ink) 55%,transparent)}
.m-btn[data-musique-stop].is-on .m-dot{background:var(--bb-gris-clair);animation:none}
@keyframes bat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.65);opacity:.6}}

/* — les sièges — */
.siege{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:clamp(54px,9.4vw,68px);aspect-ratio:1;border-radius:50%;
  background:var(--paper);border:1px solid var(--hair);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  text-decoration:none;color:var(--ink);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)}
.siege .gl{font-family:var(--serif);font-size:clamp(15px,2.4vw,19px);line-height:1;color:var(--siege,var(--bb-or))}
.siege .nm{font-family:var(--sans);font-size:8px;letter-spacing:1.3px;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 62%,transparent);white-space:nowrap}
a.siege:hover{border-color:var(--siege,var(--bb-or));transform:translate(-50%,calc(-50% - 4px));box-shadow:0 18px 34px -22px color-mix(in srgb,var(--bb-noir) 45%,transparent)}
.siege.muet{border-style:dashed;cursor:help}

/* — la sortie de salle — */
.salle-pied{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:clamp(44px,7vh,72px);text-align:center}
.salle-note{width:100%;font-family:var(--sans);font-weight:300;font-size:13.5px;color:color-mix(in srgb,var(--ink) 55%,transparent);margin-bottom:4px}

/* — la délibération (page table-ronde) — */
.deliberation{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.replique{border-left:2px solid var(--hair-or);padding:4px 0 4px 22px;margin:26px 0}
.replique .qui{font-family:var(--sans);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--bb-or);margin-bottom:6px}
.replique .quoi{font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);line-height:1.5;font-weight:400}
.replique.tranche{border-left-color:var(--bb-bordeaux)}
.replique.tranche .qui{color:var(--bb-bordeaux)}

@media (max-width:560px){
  .table-c{inset:27%}
  .siege .nm{display:none}
  .m-btn{padding:6px 10px;font-size:9.5px;letter-spacing:1.1px}
}