/* Exemple de rapport (21/10/2026, docs/exemple-rapport.md).
   La page reprend la feuille du rapport (style.css, graphiques.css) ; ici,
   seulement ce qui lui est propre : la mention d'anonymat, la maison en
   images, les blocs non reproduits. Téléphone d'abord : 16 px de marge,
   aucun débordement à 375 px. */

.exemple-intro { padding-top: 1rem; }
.exemple-mention {
  border: 1px solid var(--bordure); border-left: 4px solid var(--accent);
  border-radius: 10px; background: var(--fond-gris);
  padding: 0.7rem 0.95rem; margin: 1rem 0 0.4rem;
}
.exemple-mention p { margin: 0.2rem 0; }
.exemple-masque {
  font-family: inherit; white-space: nowrap; background: #e7ebf3; color: var(--encre);
  border-radius: 4px; padding: 0 0.25rem;
}

/* La maison en images : une rangée qui défile, une image à la fois au
   téléphone, deux et demie sur ordinateur. */
.exemple-maison { margin: 0.4rem 0 1.1rem; }
.exemple-maison-vues {
  display: flex; gap: 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: 0.35rem; border-radius: 12px;
}
.exemple-maison-vues:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.exemple-maison-vues img {
  flex: 0 0 86%; max-width: 86%; height: auto; scroll-snap-align: start;
  border-radius: 12px; border: 1px solid var(--bordure); background: #eef2f7;
}
@media (min-width: 700px) {
  .exemple-maison-vues img { flex-basis: 46%; max-width: 46%; }
}
.exemple-maison-legende { margin-top: 0.45rem; font-size: 0.86rem; color: var(--encre-douce); line-height: 1.45; }

/* Bloc du rapport complet non reproduit dans l'exemple. */
.exemple-non-reproduit { border-style: dashed; }
.exemple-non-reproduit .aide { margin-bottom: 0; }

.exemple-suite { padding-bottom: 2rem; }

@media print {
  .exemple-maison-vues { overflow: visible; flex-wrap: wrap; }
  .exemple-maison-vues img { flex-basis: 31%; max-width: 31%; }
}