/*
  Mise en page propre à la présentation d'Astral Lumina (decouvrir.html, 10 novembre 2026), en plus de la mise en page
  commune (assets/site.css), qui reste celle de tout le site : on n'y ajoute rien, pour ne pas changer les pages des
  autres apps. Mêmes cartes que la présentation de JustQuizz (justquizz/justquizz.css), pour que le site reste uni.
*/

.accroche { margin: 0.4rem 0 1.2rem; color: var(--or-clair); font-size: 1.1rem; }
.document h3 { font-size: 1.02rem; font-weight: 600; margin: 1.2rem 0 0.2rem; }

/* Les fonctions de chaque onglet : des cartes, sur deux colonnes ou plus quand l'écran est large. */
.fiches {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.6rem;
}
.document .fiches { padding-left: 0; }
.document .fiches li + li { margin-top: 0; }
.fiches li {
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--trait);
  border-radius: 0.75rem;
  background: rgba(214, 178, 94, 0.04);
}
.fiches strong { display: block; color: var(--texte); }
.fiches span { display: block; color: var(--texte-doux); font-size: 0.95rem; line-height: 1.45; }

/* Captures d'écran (à venir) : une bande qu'on fait défiler du doigt, une image à la fois sur téléphone. */
.captures {
  display: flex;
  gap: 0.9rem;
  margin: 1.5rem -1rem 0.5rem;
  padding: 0 1rem 0.8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
}
.captures li { flex: 0 0 auto; scroll-snap-align: center; margin: 0; }
.document .captures li + li { margin-top: 0; }
.captures img {
  display: block;
  width: 13.5rem;
  height: auto;
  border-radius: 1.1rem;
  border: 1px solid var(--trait);
  background: var(--fond-icone);
}
.captures figcaption { margin-top: 0.4rem; max-width: 13.5rem; color: var(--texte-doux); font-size: 0.85rem; text-align: center; }

/* L'avertissement de fin (le même que dans l'app, À propos). */
.note { margin-top: 2rem; color: var(--texte-doux); font-size: 0.92rem; }