/*
 * Papillote — mode d'emploi imprimable des élèves (js/ui/handout.js), sur une page A4 en portrait.
 * Invisible à l'écran. À l'impression lancée par « Imprimer le mode d'emploi », la classe `pa-printing-handout`
 * de <html> cache le reste de la page. Couleurs fixes, exception assumée à la règle des jetons : le papier
 * reste blanc et l'encre sombre quel que soit le thème du site.
 */

.pa-handout {
  display: none;
}

@page handout {
  size: A4 portrait;
  margin: 14mm 15mm 12mm;
}

@media print {
  :root.pa-printing-handout,
  :root.pa-printing-handout body {
    min-height: 0;
    background: #FFFFFF;
    color-scheme: light;
  }

  :root.pa-printing-handout body > :not(.pa-handout) {
    display: none !important;
  }

  :root.pa-printing-handout .pa-handout {
    display: flex;
  }
}

.pa-handout {
  --handout-ink: #232845;
  --handout-ink-soft: #4D5373;
  --handout-line: #E6E0D6;
  --handout-raspberry: #C8235F;
  --handout-gold: #F5A623;
  --handout-lagoon: #0B7190;
  page: handout;
  flex-direction: column;
  gap: 7mm;
  min-height: 262mm;
  color: var(--handout-ink);
  background: #FFFFFF;
  font-family: var(--pa-font-text);
  font-size: 11.5pt;
  line-height: 1.4;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.pa-handout h1,
.pa-handout h2 {
  margin: 0;
  font-family: var(--pa-font-title);
  font-weight: var(--pa-title-weight);
  font-variation-settings: var(--pa-title-variation);
  letter-spacing: var(--pa-title-tracking);
  color: var(--handout-ink);
}

.pa-handout p {
  margin: 0;
}

/* En-tête : titre, durée, couverture. */

.pa-handout__header {
  display: flex;
  gap: 8mm;
  align-items: flex-start;
  padding-bottom: 6mm;
  border-bottom: 1.2mm solid var(--handout-gold);
}

.pa-handout__heading {
  flex: 1;
  display: grid;
  gap: 3mm;
}

.pa-handout__eyebrow {
  font-size: 9.5pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--handout-raspberry);
}

.pa-handout h1 {
  font-size: 26pt;
  line-height: 1.1;
}

.pa-handout__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2mm 6mm;
  font-weight: 700;
}

.pa-handout__facts span {
  display: inline-flex;
  align-items: center;
  gap: 1.5mm;
}

.pa-handout__facts .pa-icon {
  color: var(--handout-lagoon);
}

.pa-handout__intro {
  color: var(--handout-ink-soft);
}

.pa-handout__cover {
  flex: none;
  width: 62mm;
  max-height: 48mm;
  border-radius: 4mm;
  object-fit: cover;
}

/* Les trois gestes. */

.pa-handout__steps {
  display: grid;
  gap: 6mm;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-handout__step {
  display: flex;
  gap: 5mm;
  align-items: flex-start;
  padding: 5mm;
  border: 0.4mm solid var(--handout-line);
  border-radius: 5mm;
  break-inside: avoid;
}

.pa-handout__number {
  flex: none;
  display: grid;
  place-items: center;
  width: 11mm;
  height: 11mm;
  border-radius: 50%;
  background: var(--handout-raspberry);
  color: #FFFFFF;
  font-family: var(--pa-font-title);
  font-size: 16pt;
  font-weight: 700;
}

.pa-handout__step-text {
  flex: 1;
  display: grid;
  gap: 2mm;
  padding-top: 1.5mm;
}

.pa-handout h2 {
  font-size: 15pt;
}

.pa-handout__ask {
  padding: 3mm 4mm;
  border-left: 1.2mm solid var(--handout-gold);
  background: #FFF0D4;
  font-weight: 700;
}

/* QR codes : cadre blanc pour la marge de silence. */

.pa-handout__codes {
  flex: none;
  display: flex;
  gap: 5mm;
}

.pa-handout__code {
  display: grid;
  justify-items: center;
  gap: 1.5mm;
  margin: 0;
  font-size: 8.5pt;
  text-align: center;
  color: var(--handout-ink-soft);
}

.pa-handout__frame {
  display: block;
  padding: 2mm;
  border: 0.4mm solid var(--handout-line);
  border-radius: 2mm;
  background: #FFFFFF;
}

.pa-handout__frame svg {
  display: block;
  width: 100%;
  height: auto;
}

.pa-handout__code--small {
  width: 30mm;
}

.pa-handout__code--large {
  width: 62mm;
  font-size: 10pt;
  font-weight: 700;
  color: var(--handout-ink);
}

.pa-handout__code--large .pa-handout__frame {
  padding: 4mm;
  border: 0.8mm solid var(--handout-lagoon);
}

.pa-handout__footer {
  margin-top: auto;
  padding-top: 3mm;
  border-top: 0.3mm solid var(--handout-line);
  font-size: 8.5pt;
  color: var(--handout-ink-soft);
  text-align: center;
}