/*
  Mise en page propre aux pages de Blind Gravity (10 novembre 2026), en plus de la mise en page commune
  (assets/site.css), qu'elle ne modifie pas. Ici : la présentation de l'app (app.html), sur le modèle de celle de
  JustQuizz : accroche, étapes numérotées et cartes.
*/
.accroche { margin: 0.4rem 0 1.2rem; color: var(--or-clair); font-size: 1.1rem; }

/* Étapes : des cartes numérotées. */
.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 1rem 0 0; }
.document .etapes { padding-left: 0; padding-right: 0; }
.etapes li {
  counter-increment: etape;
  position: relative;
  padding: 0.75rem 0.95rem 0.75rem 3.1rem;
  border: 1px solid var(--trait);
  border-radius: 0.75rem;
  background: rgba(214, 178, 94, 0.04);
}
.etapes li + li { margin-top: 0.6rem; }
.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0.9rem;
  top: 0.8rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--or);
  color: var(--fond);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.5rem;
  text-align: center;
}
[dir="rtl"] .etapes li { padding: 0.75rem 3.1rem 0.75rem 0.95rem; }
[dir="rtl"] .etapes li::before { left: auto; right: 0.9rem; }

/* Cartes : les branches de l'étoile, ce qui rend l'app différente. */
.cartes { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.6rem; }
.document .cartes { padding-left: 0; padding-right: 0; }
.document .cartes li + li { margin-top: 0; }
.cartes li {
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--trait);
  border-radius: 0.75rem;
  background: rgba(214, 178, 94, 0.04);
}
.etapes strong, .cartes strong { display: block; color: var(--texte); }
.etapes span, .cartes span { display: block; color: var(--texte-doux); font-size: 0.95rem; line-height: 1.45; }

/* Captures d'écran (à ajouter) : une bande qu'on fait défiler du doigt, comme pour JustQuizz. */
.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; }
.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; }
.legende-captures { margin: 0 0 1rem; color: var(--texte-doux); font-size: 0.85rem; }

.pied-doc { margin-top: 2rem; color: var(--texte-doux); }