/* Bannières : la tapisserie couvre tout l'écran, agrandie sans lissage */
html, body { margin: 0; height: 100%; background: #e9dec3; overscroll-behavior: none; overflow: hidden; }
body { font-family: Georgia, serif; color: #3a2416; }
/* main ne sert qu'à lire les marges de sécurité ; app.js pose la toile en position fixe dans la place visible */
main { position: fixed; inset: 0; box-sizing: border-box; }
/* en application bords à bords : la tapisserie reste hors de la barre d'état et de la barre de navigation */
main { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
#jeu {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.pyment-banner { position: fixed; inset: 0 0 auto 0; z-index: 20; background: #d9a53a; color: #2a1a12; text-align: center; padding: 6px 12px; font-size: .85rem; }
.pyment-banner a { color: #2a1a12; font-weight: 600; }
/* La tapisserie de Bayeux : page de lecture par-dessus le jeu, ouverte depuis l'accueil */
.tapisserie { position: fixed; inset: 0; z-index: 10; overflow-y: auto; background: #e9dec3; -webkit-overflow-scrolling: touch; }
.tapisserie[hidden] { display: none; }
.tapisserie-page { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 3rem; line-height: 1.6; font-size: 1.05rem; }
.tapisserie-page h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); color: #24305a; margin: .2rem 0 .8rem; }
.tapisserie-page h2 { font-size: 1.3rem; color: #9a4426; margin: 2rem 0 .4rem; border-bottom: 2px dotted #cfc09c; padding-bottom: .2rem; }
.tapisserie-hic { margin: 0; font-size: .85rem; letter-spacing: .15em; color: #a92b16; font-weight: bold; }
.tapisserie-chapo { font-size: 1.15rem; font-style: italic; color: #5e3d25; }
.tapisserie-figure { margin: 1.5rem 0; }
.tapisserie-figure img { display: block; width: 100%; max-width: 30rem; margin: 0 auto; height: auto; border: 3px solid #3a2416; box-shadow: 4px 4px 0 #b9a882; }
.tapisserie-figure figcaption { max-width: 30rem; margin-left: auto; margin-right: auto; font-size: .85rem; color: #5e3d25; margin-top: .6rem; }
.tapisserie-page ul { padding-left: 1.2rem; }
.tapisserie-page li { margin: .3rem 0; }
.tapisserie-page a { color: #24305a; }
.tapisserie-sources { font-size: .8rem; color: #5e3d25; margin-top: 2rem; }
.tapisserie-retour { display: block; margin: 2rem auto 0; font: inherit; font-weight: bold; color: #f7f0dc; background: #24305a; border: 2px solid #3a2416; padding: .7rem 1.6rem; cursor: pointer; box-shadow: 3px 3px 0 #d9a53a; }
.tapisserie-haut { font: inherit; font-size: .9rem; color: #24305a; background: none; border: 0; padding: .3rem 0; margin-bottom: 1rem; cursor: pointer; text-decoration: underline; }
.tapisserie-retour:focus-visible, .tapisserie-haut:focus-visible { outline: 3px solid #d9a53a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }