body.page-billard #app {
  max-width: 1180px;
  text-align: left;
}


#jeu { scroll-margin-top: 62px; }

@media (min-width: 1700px) {
  
  body.page-billard #app { max-width: min(1180px, calc(100vw - 820px)); }
}


@media (max-width: 1699px) {
  body.page-billard .bandeau-infos-wrap,
  body.page-billard .bloc-jeux-une-wrap { display: none !important; }
}

.cache { display: none !important; }
[hidden] { display: none !important; }



#setup h1, #lobby h1 { margin: 0 0 10px; text-align: center; }

.setup-intro {
  margin: 0 0 18px;
  line-height: 1.65;
  color: var(--texte-doux);
}

.setup-intro a, .setup-liens a, .regles-jeu a { color: var(--color-light); }

.setup-bloc { margin-bottom: 20px; }

.setup-bloc h2, .titre-section {
  font-size: 1rem;
  margin: 0 0 10px;
  color: var(--color-light);
}

.choix-ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.carte-choix, .carte-action {
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  padding: 13px 15px;
  background: var(--surface-2);
  color: var(--texte);
  font: inherit;
  text-align: left;
  min-height: 56px;
}

.carte-choix { cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.carte-choix:hover { border-color: var(--color-light); }
.carte-choix:focus-visible, .btn-demarrer:focus-visible, .btn-tirer:focus-visible, .btn-fin:focus-visible,
.effet-pad:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.carte-choix.actif {
  border-color: var(--color-light);
  background: color-mix(in srgb, var(--color-mid) 20%, var(--surface-2));
}

.choix-nom { display: block; font-weight: 700; margin-bottom: 3px; }
.choix-detail { display: block; font-size: 0.85rem; color: var(--texte-doux); line-height: 1.5; }

.lecon-faite { display: none; color: var(--color-light); margin-left: 4px; }
.carte-choix.faite .lecon-faite { display: inline; }

.carte-action { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

.btn-demarrer {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 15px 20px;
  border: 1px solid var(--color-btn1);
  border-radius: 8px;
  background: var(--color-btn1);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 54px;
}

.btn-demarrer:hover:not(:disabled) { background: color-mix(in srgb, #fff 10%, var(--color-btn1)); }
.btn-demarrer:disabled { opacity: 0.5; cursor: default; }
.btn-rapide { background: var(--color-accent); border-color: var(--color-accent); }
.btn-rapide:hover:not(:disabled) { background: color-mix(in srgb, #fff 10%, var(--color-accent)); }
.btn-detail { display: block; font-size: 0.82rem; font-weight: 500; opacity: 0.9; margin-top: 2px; }

.setup-ou { text-align: center; color: var(--texte-doux); margin: 16px 0; font-size: 0.9rem; }
.setup-liens { text-align: center; margin: 18px 0 0; font-size: 0.92rem; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.message-setup { color: #ff9ab5; margin: 0 0 10px; min-height: 1.2em; }
.message-setup:not(.erreur)[role="status"] { color: var(--texte-doux); }

.reprise {
  border: 1px solid var(--color-light);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 18px;
  background: color-mix(in srgb, var(--color-mid) 14%, var(--surface-2));
}
.reprise p { margin: 0 0 10px; font-weight: 700; }



.regles-jeu { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.regles-jeu h2 { font-size: 1rem; margin: 0 0 10px; color: var(--color-light); }
.regles-jeu details { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; background: var(--surface-2); }
.regles-jeu summary { cursor: pointer; padding: 11px 14px; font-weight: 700; }
.regles-jeu ul { margin: 0; padding: 0 16px 14px 32px; line-height: 1.6; color: var(--texte-doux); font-size: 0.92rem; }
.regles-jeu li { margin-bottom: 5px; }

.tableau-effets { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 0.92rem; }
.tableau-effets th, .tableau-effets td { border-bottom: 1px solid var(--line); padding: 9px 8px; text-align: left; vertical-align: top; }
.tableau-effets th { color: var(--color-light); }



.bandeau-partie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 10px;
  font-size: 0.92rem;
}

#score-courant { font-weight: 700; color: var(--color-light); }
#restantes { display: flex; flex-wrap: wrap; gap: 8px; }


.be-camp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--texte-doux);
}
.be-camp.be-actif { border-color: var(--color-light); color: #fff; background: color-mix(in srgb, var(--color-mid) 16%, transparent); }
.be-nom { font-weight: 700; }
.be-detail b { color: #fff; }

.be-pastille {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #6b7b74;
  flex: 0 0 auto;
}
.be-groupe-rouge  .be-pastille { background: #e23b3b; }
.be-groupe-jaune  .be-pastille { background: #f2c53d; }
.be-groupe-pleine .be-pastille { background: #2f6fd0; }
.be-groupe-rayee  .be-pastille { background: linear-gradient(#f4f4ee 0 30%, #e8853a 30% 70%, #f4f4ee 70% 100%); }

.be-compteur { color: var(--color-light); font-weight: 700; }



.aire {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.tapis-zone {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}

#tapis {
  display: block;
  border-radius: 10px;
  touch-action: none;      
  cursor: crosshair;
  max-width: 100%;
}
#tapis.prenable { cursor: grab; }
#tapis.saisie { cursor: grabbing; }


.but-lecon {
  position: absolute;
  border: 2px dashed #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  min-width: 0;
}

#tour { grid-column: 1 / -1; margin: 0; font-weight: 700; color: #fff; }
#consigne { grid-column: 1 / -1; margin: 0; min-height: 1.3em; font-size: 0.9rem; color: var(--texte-doux); line-height: 1.45; }

.hud-reglages { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bloc-effet { flex: 0 0 auto; text-align: center; }
.bloc-puissance { flex: 1 1 auto; min-width: 0; }


.effet-pad {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e8e8e0 45%, #b9b9ad 100%);
  border: 2px solid var(--color-light);
  cursor: pointer;
  touch-action: none;
}
.effet-pad::before, .effet-pad::after { content: ''; position: absolute; background: rgba(0, 0, 0, 0.18); }
.effet-pad::before { left: 50%; top: 8%; bottom: 8%; width: 1px; }
.effet-pad::after  { top: 50%; left: 8%; right: 8%; height: 1px; }

.effet-point {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid #fff;
  pointer-events: none;
}

.effet-legende { font-size: 0.76rem; color: var(--texte-doux); margin: 3px 0 0; max-width: 84px; }

.bloc-puissance label { display: block; font-size: 0.85rem; color: var(--texte-doux); margin-bottom: 2px; }
#puissance { width: 100%; accent-color: var(--color-light); height: 30px; margin: 0; }

.jauge-fond { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.jauge-fond span { display: block; height: 100%; width: 45%; background: linear-gradient(90deg, var(--color-mid), var(--color-accent)); }

.bloc-fin { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.fin-legende { font-size: 0.78rem; color: var(--texte-doux); }
.btn-fin {
  min-width: 52px;
  min-height: 40px;
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--texte);
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
}
.btn-fin:disabled { opacity: 0.4; cursor: default; }

.btn-tirer {
  padding: 14px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  font: inherit;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 56px;
  min-width: 120px;
  touch-action: manipulation;
}
.btn-tirer:hover:not(:disabled) { background: color-mix(in srgb, #fff 10%, var(--color-accent)); }
.btn-tirer:disabled { opacity: 0.4; cursor: default; }

.choix-poche, .decision, .confirmation, .aide-debut {
  grid-column: 1 / -1;
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface-2);
}
.choix-poche { border-color: var(--color-accent); }
.choix-poche p, .decision p, .confirmation p { margin: 0 0 9px; font-size: 0.92rem; line-height: 1.5; }

.poches-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.poches-grille button {
  padding: 9px 4px;
  border: 1px solid var(--line-forte);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--texte);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  min-height: 44px;
}
.poches-grille button.choisie { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 26%, var(--surface-1)); font-weight: 700; }

.decision-boutons { display: flex; flex-wrap: wrap; gap: 8px; }

.confirmation { margin-top: 12px; border-color: #b3283a; }
.aide-debut { position: relative; margin-top: 12px; border-color: var(--color-light); padding-right: 44px; }
.aide-debut p { margin: 0 0 6px; font-size: 0.9rem; line-height: 1.5; color: var(--texte-doux); }
.aide-debut strong { color: #fff; }
.aide-fermer, .overlay-fermer {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--texte-doux);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.aide-fermer:hover, .overlay-fermer:hover { color: #fff; background: var(--surface-2); }

#message { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-size: 0.94rem; color: var(--color-light); line-height: 1.45; }
#message.erreur { color: #ff9ab5; }

.barre-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.barre-actions .btn { min-height: 40px; }
.option-relacher { font-size: 0.82rem; color: var(--texte-doux); display: inline-flex; align-items: center; gap: 6px; margin-right: auto; cursor: pointer; }


#jeu.lecture-seule .hud-reglages, #jeu.lecture-seule .btn-tirer,
#jeu.lecture-seule .option-relacher, #jeu.lecture-seule #btn-son, #jeu.lecture-seule #btn-abandonner { display: none; }



@media (min-width: 1000px) {
  .aire { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
  .hud { grid-template-columns: minmax(0, 1fr); }
  .hud-reglages { align-items: flex-start; }
  .btn-tirer { width: 100%; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .aire { grid-template-columns: minmax(0, 1fr) 216px; gap: 10px; }
  .hud { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .hud-reglages { gap: 8px; }
  .effet-pad { width: 50px; height: 50px; }
  .effet-legende, .fin-legende, .option-relacher, #consigne { display: none; }
  .btn-tirer { width: 100%; min-height: 46px; padding: 8px; }
  .bloc-fin { margin-top: 4px; }
  .btn-fin { min-height: 36px; }
  .barre-actions .btn { min-height: 34px; padding: 6px 9px; font-size: 0.78rem; }
  #tour, #message { font-size: 0.82rem; }
  .bandeau-partie { margin-bottom: 4px; font-size: 0.8rem; }
  .poches-grille button { min-height: 36px; font-size: 0.72rem; }
  
  body.billard-en-jeu .jeu-banner, body.billard-en-jeu footer,
  body.billard-echauffement .jeu-banner, body.billard-echauffement #attente { display: none; }
  body.billard-en-jeu, body.billard-echauffement { padding: 4px; padding-top: 4px; }
  #jeu { scroll-margin-top: 4px; }
  body.billard-en-jeu #app, body.billard-echauffement #app { padding: 6px 8px; border: 0; }
}



@media (max-width: 699px) {
  body.page-billard { padding: 8px; padding-top: 56px; }
  
  body.page-billard #app { padding: 18px 24px 22px; }
  .tapis-zone { margin: 0 -18px; }
  .hud { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .btn-tirer { width: 100%; }
  .effet-pad { width: 58px; height: 58px; }
  .barre-actions { justify-content: space-between; }
  .option-relacher { width: 100%; }
  body.billard-en-jeu .jeu-banner, body.billard-en-jeu footer { display: none; }
  body.billard-en-jeu { padding-top: 6px; }
  body.billard-en-jeu #app { padding-top: 10px; padding-bottom: 12px; }
  
  #tour { order: 1; }
  .hud-reglages { order: 2; }
  .btn-tirer { order: 3; min-height: 50px; padding: 10px; }
  #message { order: 4; }
  .choix-poche, .decision { order: 5; }
  #consigne { order: 6; }
  .barre-actions { order: 7; }
  .bloc-fin { margin-top: 5px; }
  .btn-fin { min-height: 36px; }
  .effet-legende { display: none; }
  #jeu { scroll-margin-top: 6px; }
  .bandeau-partie { font-size: 0.82rem; margin-bottom: 6px; }
  #consigne { font-size: 0.82rem; }
}


@media (max-width: 900px), (max-height: 560px) {
  body.billard-en-jeu .auth-nav, body.billard-echauffement .auth-nav { display: none !important; }
}


body.billard-en-jeu .bandeau-infos-wrap,
body.billard-en-jeu .bloc-jeux-une-wrap,
body.billard-echauffement .bandeau-infos-wrap,
body.billard-echauffement .bloc-jeux-une-wrap { display: none !important; }



.overlay-box { position: relative; text-align: center; max-height: 92vh; overflow-y: auto; }
.overlay-sous { margin: 0 0 14px; color: var(--texte-doux); line-height: 1.5; }

.stat { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; text-align: left; }
.stat:last-child { border-bottom: 0; }
.stat-libelle { color: var(--texte-doux); }
.stat-valeur { font-weight: 700; color: #fff; }

.overlay-rang { margin: 14px 0 0; font-weight: 700; color: var(--color-accent); }
.validation { margin: 10px 0 0; font-size: 0.85rem; color: var(--texte-doux); line-height: 1.5; min-height: 0; }
.validation:empty { display: none; }
.validation.ok { color: var(--color-light); }
.validation.ko { color: #ff9ab5; }
.overlay-liens { margin: 14px 0 0; }



.defi-resultat { font-size: 1.05rem; margin: 0 0 12px; }
.defi-serie { color: var(--color-accent); font-weight: 700; }





.joueurs-liste { display: flex; flex-wrap: wrap; gap: 6px; }

.joueur-puce {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.84rem;
  color: var(--texte-doux);
}


.joueur-puce::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--color-light); }
.joueur-puce.camp-1::before { background: var(--color-accent); }
.joueur-puce.actif { border-color: var(--color-light); color: #fff; }
.joueur-puce.absent { opacity: 0.55; font-style: italic; }
.joueur-puce.vide { opacity: 0.5; font-style: italic; }
.joueur-puce.vide::before { background: transparent; border: 1px dashed var(--texte-doux); }

.chrono { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texte-doux); min-width: 44px; text-align: right; }
.chrono.urgent { color: var(--color-accent); }

.rejoindre-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rejoindre-code label { width: 100%; font-size: 0.85rem; color: var(--texte-doux); }

#champ-code {
  width: 104px;
  padding: 10px 12px;
  border: 1px solid var(--line-forte);
  border-radius: 6px;
  background: var(--surface-1);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  min-height: 44px;
}

.files-attente {
  border: 1px solid var(--color-light);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.files-titre { margin: 0; width: 100%; font-weight: 700; }

#attente { text-align: center; }
#attente .joueurs-liste { justify-content: center; margin: 14px 0; }

.code-partage { margin: 16px 0; padding: 14px 18px; border: 1px dashed var(--color-light); border-radius: 8px; }
.code-partage p { margin: 0 0 8px; color: var(--texte-doux); font-size: 0.9rem; }
.code-valeur { font-size: 2rem; font-weight: 800; letter-spacing: 0.3em; color: var(--color-light); margin: 0 0 10px !important; }

.bloc-echauffement { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line-forte); border-radius: 8px; background: var(--surface-2); }
.bloc-echauffement p { margin: 0 0 10px; }