/* ======================================================================
   NOUVELLES TABLES ET CHAPELLERIE — styles ajoutés à style.css
   ====================================================================== */

/* ---------- sélecteur de table repliable ---------- */
.tables{position:relative;padding:0;overflow:visible}
#tablesBascule{
  display:flex;align-items:center;gap:8px;width:100%;
  font:inherit;color:var(--creme);background:transparent;border:0;cursor:pointer;
  padding:9px 12px;border-radius:16px;text-align:left;
}
#tablesBascule em{margin:0;display:inline;font-style:normal;font-size:10px;opacity:.5;letter-spacing:.06em;text-transform:uppercase}
#tablesBascule b{flex:1;font-size:13px;font-weight:600;color:var(--laiton-clair);text-align:right}
#tablesBascule i{font-style:normal;font-size:11px;opacity:.6;transition:transform .15s}
.tables.ouvert #tablesBascule i{transform:rotate(180deg)}
#tablesBascule:hover b{color:var(--creme)}
.tables .choix{
  display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:30;
  grid-template-columns:1fr 1fr 1fr;gap:5px;width:min(340px,92vw);
  background:rgba(10,18,14,.94);backdrop-filter:blur(14px);
  border:1px solid rgba(201,162,39,.3);border-radius:16px;padding:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.tables.ouvert .choix{display:grid}
.tables .choix button{padding:9px 6px;white-space:nowrap}
.tables .choix button.boutique{grid-column:1 / -1;border-color:rgba(201,162,39,.45);color:var(--laiton-clair)}
.tables .choix button.boutique[aria-pressed="true"]{color:#1A1305}
@media (max-width:780px){
  .tables .choix{grid-template-columns:1fr 1fr 1fr}
}

/* ---------- comptoir des nouvelles tables ---------- */
.actionsX{align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.actionsX .lblX{font-size:11px;opacity:.5;text-transform:uppercase;letter-spacing:.04em}
.actionsX .infoX{font-size:12px;opacity:.8;font-variant-numeric:tabular-nums;min-width:0}
.actionsX .infoX:empty{display:none}
.actionsX .infoX b{color:var(--laiton-clair);font-family:"Fraunces",serif;font-size:15px}
.choixX{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.choixX button:disabled{opacity:.4;cursor:default}
.choixX button .cote{display:block;font-size:10px;opacity:.7;font-weight:500}
.choixX button i.pastille{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;border:1px solid rgba(255,255,255,.35)}
.agir.danger{background:var(--sang)!important;color:var(--creme)!important}

/* La chapellerie ne mise rien : on range le comptoir des mises. */
body[data-jeu="boutique"] .mises > .lbl,
body[data-jeu="boutique"] .mises > .saisie,
body[data-jeu="boutique"] .mises > .jetons,
body[data-jeu="boutique"] #serie,
body[data-jeu="boutique"] #verdict{display:none}

/* ---------- chapellerie ---------- */
#chapellerie{
  position:fixed;left:16px;top:16px;bottom:96px;z-index:12;width:min(360px,44vw);
  display:none;flex-direction:column;gap:10px;
  background:rgba(10,18,14,.8);backdrop-filter:blur(14px);
  border:1px solid rgba(201,162,39,.28);border-radius:20px;padding:16px 14px 12px;
}
body[data-mode="seated"][data-jeu="boutique"] #chapellerie{display:flex}
body[data-jeu="boutique"] .enseigne{visibility:hidden}
#chapellerie h3{font-family:"Fraunces",serif;font-weight:900;font-size:24px;color:var(--laiton-clair);letter-spacing:-.02em;line-height:1}
#chapellerie p{font-size:12px;opacity:.6;line-height:1.45}
#chapellerie .rayon{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding-right:4px;align-content:start;overscroll-behavior:contain}
#chapellerie .rayon::-webkit-scrollbar{width:6px}
#chapellerie .rayon::-webkit-scrollbar-thumb{background:rgba(201,162,39,.35);border-radius:3px}
.chapeau{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  font:inherit;color:var(--creme);cursor:pointer;
  background:rgba(241,233,214,.05);border:1px solid rgba(241,233,214,.12);border-radius:14px;padding:6px 6px 9px;
  transition:background .15s,border-color .15s,transform .15s;
}
.chapeau:hover{background:rgba(241,233,214,.1);transform:translateY(-1px)}
.chapeau.essaye{border-color:var(--laiton);background:rgba(201,162,39,.12)}
.chapeau.porte{border-color:var(--vert-gain)}
.chapeau canvas{width:100%;aspect-ratio:1/1;display:block;border-radius:10px;background:radial-gradient(circle at 50% 60%,rgba(201,162,39,.16),transparent 70%)}
.chapeau b{font-size:11px;font-weight:600;line-height:1.2}
.chapeau span{font-size:11px;font-variant-numeric:tabular-nums;color:var(--laiton-clair)}
.chapeau.possede span{color:var(--vert-gain)}
.chapeau.cher span{opacity:.45}
#chapellerie .caisse{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#chapellerie .caisse .quoi{flex:1;min-width:0;font-size:12px;line-height:1.3}
#chapellerie .caisse .quoi b{display:block;font-size:14px;color:var(--laiton-clair)}
#chapellerie .caisse button{
  font:inherit;font-size:13px;font-weight:600;background:var(--laiton);color:#1A1305;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;
}
#chapellerie .caisse button.sec{background:transparent;color:var(--creme);border:1px solid rgba(241,233,214,.28)}
#chapellerie .caisse button:disabled{opacity:.35;cursor:default}
@media (max-width:780px){
  #chapellerie{left:8px;right:8px;top:auto;bottom:70px;width:auto;height:40vh;padding:10px 10px 8px}
  #chapellerie h3{font-size:18px}
  #chapellerie .rayon{grid-template-columns:1fr 1fr 1fr}
  #chapellerie p{display:none}
}

/* ---------- bandeau : compteur et tables en colonne à droite ----------
   Les trois blocs du bandeau étaient répartis sur la largeur, ce qui plaçait
   le compteur au milieu de l'écran — pile sur les plateaux des nouvelles
   tables. On l'empile à droite, au-dessus du sélecteur. */
@media (min-width:901px){
  body[data-mode="seated"] header{
    display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
    align-items:start;column-gap:16px;row-gap:0;
  }
  .enseigne{grid-column:1;grid-row:1 / span 2}
  .compteur{grid-column:2;grid-row:1}
  .tables{grid-column:2;grid-row:2}
}