/* Design system Mystigrille — BASE : remise à zéro, page, mise en page générale. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font: var(--texte-etiquette);
  -webkit-tap-highlight-color: transparent;
}
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--couleur-selection); outline-offset: 2px; }

/* Taches organiques du fond, en décor */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  background: var(--couleur-fond-decor);
  border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%;
}
body::before { width: 46vmin; height: 38vmin; right: -14vmin; top: -8vmin; }
body::after { width: 40vmin; height: 44vmin; left: -16vmin; bottom: 6vmin; }

/* L'écran : une colonne sur téléphone, plus large sur tablette et ordinateur */
.ecran {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--espace-5) var(--espace-4) var(--espace-6);
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
}
.ecran--large { max-width: 1040px; }
.entete { display: flex; align-items: center; gap: var(--espace-3); }
.entete__titres { flex: 1; min-width: 0; }
.pousse { flex: 1; }
.pile { display: flex; flex-direction: column; gap: var(--espace-2); }
.rangee { display: flex; align-items: center; gap: var(--espace-2); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-2); }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-2); }
.grille-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.titre { font: var(--texte-titre); }
.affiche { font: var(--texte-affiche); text-align: center; }
.intertitre { font: var(--texte-intertitre); }
.legende { font: var(--texte-legende); color: var(--couleur-texte-doux); }
.etiquette { font: var(--texte-etiquette); }
.centre { text-align: center; align-items: center; }
.cache-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (min-width: 700px) {
  .ecran { padding-top: var(--espace-6); }
  .deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3) var(--espace-4); }
}
@media (prefers-reduced-motion: no-preference) {
  .apparait { animation: apparait 0.25s ease-out; }
  @keyframes apparait { from { opacity: 0; transform: translateY(6px); } }
}