/************************************************************
 * 0) RESET & BASE (hérité de global)
 ************************************************************/
html { font-size: clamp(13px, 3vw, 16px); }
body { line-height: 1.55; }

/************************************************************
 * 1) TYPO (overrides)
 ************************************************************/
h1 { font-size: clamp(1.5rem, 5vw, 1.9rem); margin-bottom: 0.75rem; line-height: 1.2; }
h2 { font-size: clamp(1.2rem, 4.5vw, 1.4rem); margin: 0.8rem 0 0.5rem; }
p  { margin: 0.5rem 0; font-size: 1.05rem; }

/************************************************************
 * 2) LAYOUT GLOBAL (overrides)
 ************************************************************/
.page { max-width: 70ch; padding-inline: clamp(10px, 4vw, 18px); padding-block: 1rem; }
body.Blue { background-color: #36A2EBD9; }
body.Orange { background-color: #FF9F40E6; }

/************************************************************
 * 3) COMPOSANTS (overrides)
 ************************************************************/
/* Listes : puces visibles */
ul, ol { list-style-position: inside; padding-left: 0; margin: 0.4rem 0 0.6rem; }
li { margin: 0.25rem 0; }

/* Cartes en grille (hérite de .grid-2 global) */
.grid-2 { gap: 0.4rem; }

/* Images : cas particuliers mobile (ex. images dans cartes/tableaux) */
.card img, table td img { display: inline-block; vertical-align: middle; }

/* Table aux cartes Klee/Kandinsky */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { text-align: center; border-collapse: collapse; margin: 0 auto 20px auto; }
table th { padding: 6px 0; }
table th img { width: 16px; height: auto; margin: 0 auto; vertical-align: sub; }
table td img { width: 80%; height: auto; margin: 0 auto 0; }
table .Klee, table .Kandinsky { width: 48%; }
table .space { width: 10px; }
table.Klee .Klee, table.Kandinsky .Kandinsky { background: lightgreen; }
table.Klee .Kandinsky, table.Kandinsky .Klee { background: lightcoral; }

/* Séparateurs */
hr { margin: 0.8rem 0; border: none; border-top: 1px solid #ccc; }

/* Boutons */
button { font-size: 0.95rem; padding: 0.5rem 1rem; min-height: 40px; }

/* Petit texte explicatif */
p.lead {
  margin-bottom: 0.3rem;
}
small {
  color: #6b7280;
}


/* Sécurité anti-débordement */
.page, body { overflow-wrap: anywhere; }

/************************************************************
 * 4) SPÉCIFIQUES USER
 ************************************************************/

/************************************************************
 * 5) RESPONSIVE USER
 ************************************************************/
@media (max-width: 370px) {
  .grid-2 { grid-template-columns: 1fr; }
}