/* =========================================================================
   Impression des fiches de sons (OU, ON, AN, IN) — carte 15 × 10 cm
   -------------------------------------------------------------------------
   Seule la carte est imprimée (pas la page web) : quatre mots illustrés,
   graphème en rouge gras souligné, lignes d'écriture, bordure lavande.

   Deux modes, même carte, mêmes dimensions réelles (150 × 100 mm) :
   - par défaut : une page de 150 × 100 mm (imprimante qui accepte ce
     format ou cartes à imprimer directement) ;
   - html.impression-a4 (bouton « Imprimer sur A4 ») : une page A4 portrait,
     la carte à sa taille réelle, centrée, avec Prénom et Date au-dessus.
     La taille de page (@page) est alors choisie par impression-son.js.

   Les réglages d'affichage (taille, contraste, fond) sont neutralisés :
   l'impression est la même pour tous. Les dimensions sont en mm et pt, donc
   indépendantes de la taille de police de la page.
   Chargée par les pages sons/on|an|in/index.html et, pour OU, ajoutée à la
   copie publiée de sons/ou.html par outils/construire-publication.js.
   ========================================================================= */
@media print {
  @page { size: 150mm 100mm; margin: 0; }

  html, html[data-espacement], html[data-taille], html[data-contraste], html[data-fond] {
    font-size: 11.5pt !important;
    --interligne: 1.5;
    --espace-lettres: 0.01em;
    --espace-mots: 0.06em;
    --fond: #FFFFFF;
    --surface: #FFFFFF;
    --texte: var(--encre);
    --texte-doux: var(--encre-douce);
    --texte-carte: var(--encre-carte);
    --bordure: var(--trait);
    --bordure-bouton: var(--lavande-200);
  }
  body { background: #FFFFFF !important; color: #000000 !important; padding: 0 !important; margin: 0 !important; display: block !important; min-height: 0 !important; }
  body > :not(main), main > :not(.son-fiche) { display: none !important; }
  main { display: block; padding: 0 !important; margin: 0 !important; }
  main * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* ---- La carte : 150 × 100 mm ---- */
  html, body { width: 150mm; height: 100mm; overflow: hidden; }
  main .son-fiche { width: 150mm; height: 100mm; max-width: none; margin: 0; padding: 0; }
  main .fiche {
    box-sizing: border-box; width: 150mm; height: 100mm; max-width: none; margin: 0; padding: 2.5mm;
    border-radius: 5mm; box-shadow: none;
    background: repeating-linear-gradient(135deg, var(--lavande-200) 0 1.6mm, #FFFFFF 1.6mm 3.2mm);
    break-inside: avoid;
  }
  main .fiche__interieur {
    box-sizing: border-box; height: 100%; aspect-ratio: auto; padding: 3.5mm 5mm 3.5mm; gap: 1.5mm;
    border-radius: 3mm; background: #FFFFFF; color: #000000;
  }
  main .fiche__entete { gap: 2.5mm; }
  main .fiche__etiquette { font-size: 9pt; }
  main .fiche__grapheme { font-size: 22pt; }
  main .fiche__mots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4mm; align-content: center; }
  main .mot { gap: 1.5mm; break-inside: avoid; }
  main .mot__illustration { width: 100%; max-width: 30mm; border-radius: 3mm; }
  main .mot__ecrit { font-size: 17pt !important; line-height: 1.15; white-space: nowrap; }
  main .mot__lignes { gap: 1.2mm; }
  main .mot__lignes .ligne-ecriture { height: 7.5mm; border-bottom: 0.5mm solid #8C86A8; }
  main .mot__ecouter { display: none !important; }

  /* ---- Mode A4 : la même carte à sa taille réelle, centrée ---- */
  html.impression-a4, html.impression-a4 body { width: auto; height: auto; overflow: visible; }
  html.impression-a4 main > .sv2-impression,
  html.impression-a4 main > .sv2-droits { display: block !important; }
  html.impression-a4 main > .sv2-impression { display: flex !important; }
  html.impression-a4 main > .sv2-impression {
    justify-content: space-between; align-items: flex-end; gap: 1rem; box-sizing: border-box;
    width: 150mm; margin: 0 auto 6mm; padding: 0 0 2mm; border-bottom: 1.5pt solid #C9C0F3;
    font-size: 10pt; color: #2B2547;
  }
  html.impression-a4 .sv2-impression__champs { display: flex; gap: 2rem; }
  html.impression-a4 .sv2-impression__champ { display: inline-block; min-width: 9rem; border-bottom: 1pt solid #8C86A8; padding-top: 0.5rem; }
  html.impression-a4 main .son-fiche { margin: 0 auto; }
  html.impression-a4 main > .sv2-droits { width: 150mm; margin: 2mm auto 0; padding: 0; font-size: 7.5pt; color: #5E5880; }
}

/* ---------- À l'écran : boutons d'impression sous la carte ---------------- */
@media screen {
  .sv2-actions { padding-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
  .sv2-actions__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
  .sv2-actions .bouton { max-width: 100%; text-align: center; }
  .sv2-actions__note { max-width: 40rem; margin: 0; text-align: center; font-size: 0.9375rem; color: var(--texte-doux); }
}