/* === Bloks Mania — identité de la page d'accueil ===
   Le hero, ses motifs de coin, les décorations flottantes et le filigrane du
   bloc de règles viennent du patron partagé (.hero-jeu, .motif-damier,
   .hero-decos / .deco-flottante, --rules-symbole) : voir
   fichiers-partages-des-jeux/css/accueil.css. On ne déclare ici que ce qui
   distingue ce jeu des autres. */

:root {
  --rules-symbole: '\25A0';
}

/* Fond du site : la grille du puits, à peine visible. C'est un décor fixe. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
}

/* Les décorations sont des cases de pièces, en relief interne seulement :
   aucune ombre portée colorée. */
.deco-flottante.bloc-cyan,
.deco-flottante.bloc-violet,
.deco-flottante.bloc-jaune {
  border-radius: 4px;
}

.bloc-cyan {
  background: #22d3ee;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.28), inset -3px -3px 0 rgba(0, 0, 0, 0.3);
}

.bloc-violet {
  background: #a855f7;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.28), inset -3px -3px 0 rgba(0, 0, 0, 0.3);
}

.bloc-jaune {
  background: #fde047;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.28), inset -3px -3px 0 rgba(0, 0, 0, 0.3);
}

/* Tableau du barème : plus facile à lire (et à citer) qu'une liste. */
.tableau-bareme {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 14px;
  font-size: 0.92rem;
}

.tableau-bareme th,
.tableau-bareme td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.tableau-bareme th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texte-faible);
}

.tableau-bareme td:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--texte);
  font-weight: 700;
}

.faq-bloks details {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.faq-bloks summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--texte);
}

.faq-bloks details p {
  margin-top: 8px;
  color: var(--texte-doux);
  line-height: 1.6;
}