/*
 * Calcul Rapide : pages des tables de multiplication (table-de-N et la page
 * qui les réunit). Chargé après css/jeu.css, dont viennent les boutons, la zone
 * de jeu et le bilan : rien de tout cela n'est redéfini ici.
 */

.fil-ariane {
  margin: 14px 0 0;
  font-size: 0.8rem;
  color: var(--cr-doux);
}
.fil-ariane a { color: var(--cr-indigo-clair); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

.table-lancement { text-align: center; margin-bottom: 22px; }
.table-lancement .btn-lancer { margin-bottom: 10px; }
.table-lancement .setup-aide-texte { margin-top: 12px; }

.presentation { border-top: 1px solid var(--cr-bordure); margin-top: 26px; padding-top: 6px; }
.presentation h2 { font-size: 1.15rem; color: var(--cr-indigo-clair); margin: 24px 0 10px; }
.presentation p,
.presentation li { color: var(--cr-doux); line-height: 1.7; font-size: 0.95rem; }
.presentation p { margin: 0 0 10px; }
.presentation ul { margin: 0 0 10px; padding-left: 20px; }
.presentation li { margin-bottom: 6px; }
.presentation strong { color: var(--cr-texte); }
.presentation a { color: var(--cr-indigo-clair); }

/* La table elle-même : deux colonnes de six lignes, une seule sur téléphone étroit. */
.table-grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.table-grille span {
  padding: 10px 12px;
  border: 1px solid var(--cr-bordure);
  border-radius: 10px;
  background: var(--cr-panel);
  color: var(--cr-doux);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.table-grille strong { color: var(--cr-cyan); }

.presentation .table-nouveaux {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--cr-indigo) 40%, var(--cr-bordure));
  border-radius: 10px;
  color: var(--cr-texte);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.9;
}

.table-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.table-liens a,
.table-liens strong {
  padding: 7px 12px;
  border: 1px solid var(--cr-bordure);
  border-radius: 999px;
  font-size: 0.86rem;
  text-decoration: none;
}
.table-liens strong { border-color: var(--cr-indigo); }
.table-liens a:hover { border-color: var(--cr-indigo); }

/* Page des tables : une carte par table. */
.tables-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.presentation a.table-carte {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--cr-bordure);
  border-radius: 12px;
  background: var(--cr-panel);
  text-decoration: none;
}
.presentation a.table-carte:hover { border-color: var(--cr-indigo); }
.table-carte strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.table-carte span { display: block; font-size: 0.8rem; color: var(--cr-doux); line-height: 1.4; }

/* La grille complète défile seule sur un écran étroit, jamais la page. */
.tableau-defilant {
  overflow-x: auto;
  margin: 8px 0 14px;
  border: 1px solid var(--cr-bordure);
  border-radius: 10px;
}
.grille-tables {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.grille-tables th,
.grille-tables td { padding: 7px 4px; border: 1px solid var(--cr-bordure); }
.grille-tables th { color: var(--cr-indigo-clair); background: var(--cr-panel); font-weight: 700; }
.grille-tables td { color: var(--cr-doux); }
.grille-tables td.carre { color: var(--cr-cyan); font-weight: 700; }

@media (max-width: 560px) {
  .table-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}