/* Barème de la coinche — vert PILLIN, papier blanc pour la table.
   On lit ça à la table de jeu, souvent d'une main : tout doit tenir sur un
   téléphone sans zoomer. */

:root {
  --vert-fond:    #2c5446;
  --vert-carte:   #1f4235;
  --vert-pilule:  #3a6555;
  --creme:        #f3ede1;
  --creme-doux:   rgba(243, 237, 225, .82);
  --creme-legere: rgba(243, 237, 225, .58);
  --rouge:        #cf8071;
  --papier:       #ffffff;
  --encre:        #1b1b1b;
  --encre-douce:  #6b6b6b;
  --surbrillance: #e7f0e9;
  --trait:        #e2e2e2;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", "Times New Roman", serif;
  --largeur: 40rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.2rem 1.1rem 3rem;
  background: var(--vert-fond);
  color: var(--creme);
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.page { max-width: var(--largeur); margin: 0 auto; }

.invisible {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Tête ---------------------------------------------------------------- */
.enseignes {
  margin: 0 0 .9rem;
  font-size: 1.7rem;
  letter-spacing: .45rem;
  color: var(--creme);
}
.enseignes .rouge { color: var(--rouge); }

h1 {
  margin: 0 0 .7rem;
  font-size: clamp(2rem, 8vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.chapeau { margin: 0 0 2.2rem; color: var(--creme-doux); }

/* --- Filtre -------------------------------------------------------------- */
.filtre__titre {
  margin: 0 0 .8rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--creme-doux);
}

.pilules { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.8rem; }

.pilule {
  padding: .6rem 1.35rem;
  border: 1px solid var(--creme-legere);
  border-radius: 999px;
  background: var(--vert-pilule);
  color: var(--creme);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.pilule:hover { border-color: var(--creme); }
.pilule--active {
  background: var(--creme);
  border-color: var(--creme);
  color: var(--encre);
  font-weight: 700;
}
.pilule:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }

/* --- La table ------------------------------------------------------------ */
.carte-blanche {
  background: var(--papier);
  color: var(--encre);
  border-radius: 18px;
  padding: 1.4rem 1.1rem 1rem;
  margin-bottom: 2rem;
}

/* Sur un écran étroit, la table défile dans son cadre — jamais la page. */
.defilement { overflow-x: auto; }

.bareme {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.bareme th, .bareme td {
  padding: .72rem .5rem;
  text-align: center;
  border-bottom: 1px solid var(--trait);
}
.bareme tbody th, .bareme tfoot th {
  text-align: left;
  padding-left: .2rem;
  white-space: nowrap;
}

.bareme thead th { border-bottom: none; font-size: .98rem; }
.bareme thead .groupe { border-bottom: 2px solid var(--encre); }
.bareme thead .menu {
  font-weight: 400;
  color: var(--encre-douce);
  border-bottom: 2px solid var(--encre);
}
.bareme thead th[rowspan="2"] { border-bottom: 2px solid var(--encre); }

/* Une colonne se distingue d'une autre : un filet vertical discret. */
.bareme .c-atout, .bareme .c-tout, .bareme .c-sans, .bareme .c-normal {
  border-left: 1px solid var(--trait);
}

.bareme .nul { color: var(--encre-douce); }

.bareme .fort {
  background: var(--surbrillance);
  font-weight: 700;
}

.bareme tfoot .totaux td, .bareme tfoot .totaux th {
  border-bottom: none;
  font-weight: 700;
  padding-top: 1rem;
}
.bareme tfoot .totaux:first-child th,
.bareme tfoot .totaux:first-child td { border-top: 2px solid var(--encre); }

.legende {
  margin: .9rem 0 0;
  font-size: .88rem;
  color: var(--encre-douce);
  display: flex; align-items: center; gap: .5rem;
}
.pastille {
  width: 1rem; height: 1rem; border-radius: 4px;
  background: var(--surbrillance);
  border: 1px solid var(--trait);
  flex: 0 0 auto;
}

/* --- Filtrage des colonnes ----------------------------------------------- */
/* Un mode masque des colonnes entières. Les deux colonnes « Normal » vont
   toujours ensemble : la cellule fusionnée du jeu complet n'est donc jamais
   coupée en deux. */
.mode-normal .c-tout,
.mode-normal .c-sans,
.mode-tout   .c-atout, .mode-tout .c-hors, .mode-tout .c-normal, .mode-tout .c-sans,
.mode-sans   .c-atout, .mode-sans .c-hors, .mode-sans .c-normal, .mode-sans .c-tout {
  display: none;
}
/* Plus rien dans la seconde ligne d'en-tête : on la retire pour ne pas
   laisser une bande vide sous les titres. */
.mode-tout .sous-entetes, .mode-sans .sous-entetes { display: none; }

/* --- Les notes ----------------------------------------------------------- */
.note {
  background: var(--vert-carte);
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.2rem;
}
.note h2 { margin: 0 0 .6rem; font-size: 1.3rem; }
.note p { margin: 0; color: var(--creme-doux); }

.source {
  margin-top: 2.4rem;
  font-size: .92rem;
  color: var(--creme-legere);
  line-height: 1.55;
}

@media (min-width: 34rem) {
  body { padding: 3rem 2rem 4rem; }
  .carte-blanche { padding: 1.8rem 1.6rem 1.2rem; }
  .bareme th, .bareme td { padding: .8rem .9rem; }
}