/* Le programme de séquence : une feuille A4, pensée pour le noir et blanc. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype"); font-weight: 700; }
@font-face { font-family: "Cinzel"; src: url("../fonts/Cinzel-Bold.ttf") format("truetype"); font-weight: 700; }

@page { size: A4 portrait; margin: 8mm; }

:root {
  --encre: #111;
  --gris: #555;
  --filet: #999;
  --pale: #EDEDED;
  --ligne: 8.6mm;
  --scene: 35mm;
  /* Le décor passe en gris : la même scène qu'à l'écran, sans couleur. */
  --ciel-bas: #fff;
  --s1: #D6D6D6;
  --s2: #9A9A9A;
  --s3: #1C1C1C;
  --astre: #C8C8C8;
}

* { box-sizing: border-box; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { margin: 0; color: var(--encre); background: #D9D9D9; font: 400 11.5pt/1.3 "Atkinson Hyperlegible", Arial, sans-serif; }
h1, h2, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.fiche-barre { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--filet); }
.fiche-barre a { min-height: 44px; display: inline-flex; align-items: center; color: var(--encre); }
.fiche-barre button { min-height: 44px; padding: 0 22px; color: #fff; font: inherit; font-weight: 700; background: var(--encre); border: 0; border-radius: 8px; cursor: pointer; }

.feuille {
  position: relative; display: flex; flex-direction: column; gap: 3.4mm;
  width: 194mm; height: 281mm; margin: 16px auto; padding: 5mm 6mm;
  overflow: hidden; background: #fff;
  border: .7mm solid var(--encre); outline: .25mm solid var(--encre); outline-offset: -1.5mm;
}

/* En-tête : le titre, puis le paysage de la séquence. */
.fiche-tete { flex: none; padding-top: 1mm; text-align: center; }
.fiche-tete .scene { display: block; width: calc(100% + 7mm); height: var(--scene); margin: 1.6mm -3.5mm 0; }
.fiche-tete .scene-etoiles { display: none; }
.fiche-tete .scene-image { object-fit: cover; filter: grayscale(1); }
.fiche-marque { font-size: 9.5pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fiche-surtitre { margin-top: .6mm; font: 700 11pt/1.2 Cinzel, Georgia, serif; }
.fiche-tete h1 { margin-top: .6mm; font: 700 22pt/1.12 Cinzel, Georgia, serif; }
.fiche-tete h1.fiche-titre-long { font-size: 17pt; }

/* La grande question. */
.fiche-question { position: relative; flex: none; padding: 3.4mm 5mm 2.6mm; text-align: center; border: .5mm solid var(--encre); border-radius: 3mm; }
.fiche-question h2 { position: absolute; top: 0; left: 50%; translate: -50% -50%; padding: 0 3mm; font: 700 9.5pt/1.2 Cinzel, Georgia, serif; white-space: nowrap; background: #fff; }
.fiche-question p { font-size: 12.5pt; font-weight: 700; line-height: 1.25; }

/* Les repères. */
.fiche-reperes { flex: none; display: flex; flex-wrap: wrap; gap: 1.6mm 2mm; }
.fiche-reperes div { flex: 1 1 0; min-width: 52mm; padding: 1.2mm 2.6mm; background: var(--pale); border-radius: 1.6mm; }
.fiche-reperes dt { font-size: 8.5pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fiche-reperes dd { font-size: 10.5pt; line-height: 1.2; }

/* Le parcours : un chemin de médaillons, de la première séance au boss. */
.fiche-parcours { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.fiche-parcours h2 { flex: none; margin-bottom: 1.4mm; font: 700 12pt/1.2 Cinzel, Georgia, serif; text-align: center; }
.fiche-parcours ol { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; }
.fiche-parcours ol::before { content: ""; position: absolute; top: 3mm; bottom: 3mm; left: 3.3mm; border-left: .5mm dashed var(--filet); }
.fiche-parcours li { position: relative; display: flex; align-items: center; gap: 2.6mm; min-height: var(--ligne); }
.fiche-numero { flex: none; display: grid; place-items: center; width: 7mm; height: 7mm; font-size: 10.5pt; font-weight: 700; background: #fff; border: .45mm solid var(--encre); border-radius: 50%; }
.fiche-seance { flex: 1 1 auto; min-width: 0; font-size: 11.5pt; line-height: 1.15; }
.fiche-dominantes { flex: none; display: flex; justify-content: flex-end; gap: 1mm; min-width: 15mm; }
.fiche-dominantes svg, .fiche-marque-evaluee svg, .fiche-legende svg { display: block; width: 5.2mm; height: 5.2mm; }
.fiche-marque-evaluee { flex: none; display: inline-flex; align-items: center; gap: 1mm; padding: .3mm 2mm .3mm 1.2mm; font-size: 9pt; font-weight: 700; border: .35mm solid var(--encre); border-radius: 3mm; }
.fiche-marque-evaluee svg { width: 4mm; height: 4mm; }
.fiche-evaluee .fiche-numero { color: #fff; background: var(--encre); }
.fiche-evaluee .fiche-seance { font-weight: 700; }
.fiche-boss { padding: .6mm 2mm .6mm 0; color: #fff; background: var(--encre); border-radius: 4.4mm; }
.fiche-boss .fiche-numero { color: var(--encre); background: #fff; }
.fiche-boss .fiche-marque-evaluee { border-color: #fff; }

/* Les longues séquences tiennent aussi sur une page. */
.fiche-compacte { --ligne: 7.2mm; --scene: 32mm; }
.fiche-compacte .fiche-seance { font-size: 10.5pt; }
.fiche-serree { --ligne: 6.1mm; --scene: 24mm; gap: 2.2mm; }
.fiche-serree .fiche-tete h1 { font-size: 18pt; }
.fiche-serree .fiche-question p { font-size: 11pt; }
.fiche-serree .fiche-numero { width: 5.8mm; height: 5.8mm; font-size: 9pt; }
.fiche-serree .fiche-seance { font-size: 10pt; }
.fiche-serree .fiche-dominantes svg { width: 4.4mm; height: 4.4mm; }
.fiche-serree .fiche-parcours ol::before { left: 2.7mm; }

/* Pied : légende et code à flasher. */
.fiche-pied { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 5mm; padding-top: 2mm; border-top: .3mm solid var(--encre); }
.fiche-legende { display: flex; flex-wrap: wrap; gap: 1mm 3.4mm; font-size: 9.5pt; }
.fiche-legende li { display: inline-flex; align-items: center; gap: 1mm; }
.fiche-legende svg { width: 4.6mm; height: 4.6mm; }
.fiche-qr { flex: none; display: flex; align-items: center; gap: 2.4mm; text-align: right; font-size: 9pt; line-height: 1.2; }
.fiche-qr strong { display: block; font-size: 10pt; }
.fiche-qr [data-qr] { width: 19mm; height: 19mm; }
.fiche-qr svg { display: block; width: 100%; height: 100%; }

@media screen and (max-width: 800px) {
  .feuille { zoom: .46; margin: 8px auto; }
}

@media print {
  body { background: #fff; }
  .fiche-barre { display: none; }
  .feuille { width: 100%; height: calc(297mm - 16mm - .4mm); margin: 0; break-inside: avoid; }
}