/* Fiches pratiques (js/ecrans/fiches.js) : lecture à l'écran et impression A4. Aucun style en ligne (CSP).
   Impression : chaque page est un bloc de 210 mm × 297 mm (marges intérieures de 12 mm) avec son pied de page
   écrit ; pas de marge @page ni de numérotation du navigateur (docs/examens/fiches-et-kit.md, § 2).
   Police : Atkinson Hyperlegible (OFL 1.1, sans nom réservé, fichiers d'origine non modifiés, fonts/OFL.txt). */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Écran (mobile d'abord) ---------- */
.fiches-outils { margin-bottom: 1rem; }
.fiches-impression .bouton { margin: .25rem 0 .5rem; }
.fiches-impression p { margin: 0; font-size: .95rem; }

.fiche {
  font-family: "Atkinson Hyperlegible", var(--police);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}
.fiche-page {
  background: var(--surface);
  border: 1px solid var(--bordure-douce);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1rem;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}
.fiche-corps > :last-child { margin-bottom: 0; }
.fiche-entete { margin: 0 0 .4rem; font-size: .85rem; color: var(--texte-2); }
.fiche .fiche-titre { font-size: 1.35rem; line-height: 1.25; margin: 0 0 .6rem; }
.fiche .fiche-h2 { font-size: 1.1rem; line-height: 1.3; margin: 1.1rem 0 .4rem; }
.fiche .fiche-h3 { font-size: 1rem; margin: .8rem 0 .3rem; }
.fiche p { margin: 0 0 .6rem; }
.fiche-liste { margin: 0 0 .6rem; padding-left: 1.2rem; }
.fiche-liste li { margin: 0 0 .3rem; }
.fiche-encadre {
  border: 2px solid var(--texte);
  border-radius: var(--rayon-petit);
  padding: .6rem .75rem;
  margin: 0 0 .8rem;
}
.fiche-encadre > :last-child { margin-bottom: 0; }
.fiche-tableau { width: 100%; border-collapse: collapse; margin: 0 0 .8rem; font-size: .92rem; }
.fiche-tableau th, .fiche-tableau td { border: 1px solid var(--bordure); padding: .3rem .4rem; text-align: left; vertical-align: top; }
.fiche-tableau th { background: var(--surface-2); }

.fiche-auto-test { margin-top: .5rem; }
.fiche-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.fiche-question { break-inside: avoid; }
.fiche-question.avec-image { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: .6rem; align-items: start; }
.fiche-q-image { display: block; width: 100%; max-height: 5rem; object-fit: contain; background: #fff; border: 1px solid var(--bordure-douce); border-radius: 4px; }
.fiche .fiche-q-enonce { margin: 0 0 .2rem; font-weight: 700; }
.fiche-q-choix { list-style: none; margin: 0; padding: 0; }
.fiche-q-choix li { margin: 0 0 .1rem; }
.fiche-q-lettre { font-weight: 700; }
.fiche-bas { margin-top: .8rem; }
.fiche .fiche-corrige { margin: 0 0 .5rem; padding: .4rem .5rem; background: var(--surface-2); border-radius: 6px; }
.fiche-pied { border-top: 1px solid var(--bordure-douce); padding-top: .4rem; font-size: .85rem; color: var(--texte-2); }

/* Tableaux sur petit écran : une carte par ligne, chaque cellule précédée du titre de sa colonne
   (lecture sans défilement horizontal à 375 px). */
@media screen and (max-width: 599px) {
  .fiche-tableau, .fiche-tableau tbody, .fiche-tableau tr, .fiche-tableau td { display: block; width: 100%; }
  .fiche-tableau:not(.fiche-tableau-entete-seul) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* Tableau sans ligne de données : chaque cellule d'en-tête devient une ligne visible. */
  .fiche-tableau-entete-seul thead, .fiche-tableau-entete-seul th { display: block; width: 100%; }
  .fiche-tableau-entete-seul tr { padding: 0; }
  .fiche-tableau-entete-seul th { border: 0; border-top: 1px solid var(--bordure-douce); padding: .3rem .5rem; }
  .fiche-tableau-entete-seul th:first-child { border-top: 0; }
  .fiche-tableau tr { border: 1px solid var(--bordure); border-radius: 6px; margin: 0 0 .5rem; padding: .3rem .5rem; }
  .fiche-tableau td { border: 0; padding: .15rem 0; }
  .fiche-tableau td::before { content: attr(data-label) " : "; font-weight: 700; }
}
@media screen and (min-width: 600px) {
  .fiche-questions { grid-template-columns: 1fr 1fr; gap: .8rem 1.2rem; }
}

/* ---------- Impression A4 ---------- */
@page { size: A4; margin: 0; }

@media print {
  body.mode-fiches { background: #fff; color: #000; padding: 0; margin: 0; }
  body.mode-fiches .entete,
  body.mode-fiches .nav-bas,
  body.mode-fiches .bandeau-maj,
  body.mode-fiches .fiches-outils { display: none; }
  body.mode-fiches .contenu { max-width: none; padding: 0; margin: 0; }

  .fiche {
    --texte: #000;
    --texte-2: #333;
    --bordure: #555;
    --bordure-douce: #888;
    --surface: #fff;
    --surface-2: #e6e6e6;
    margin: 0;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.3;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .fiche-page {
    width: 210mm;
    min-height: 297mm; /* une page qui déborde passe sur une 2e feuille au lieu d'être coupée (signalée par les tests) */
    padding: 12mm;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    display: flex;
    flex-direction: column;
    break-after: page;
    overflow-wrap: normal;
  }
  .fiche:last-child .fiche-page:last-child { break-after: auto; }
  .fiche-corps, .fiche-bas { flex: none; }
  .fiche-bas { margin-top: auto; padding-top: 2mm; }

  .fiche-entete { font-size: 9pt; margin: 0 0 1mm; }
  .fiche .fiche-titre { font-size: 15.5pt; margin: 0 0 1.5mm; }
  .fiche .fiche-h2 { font-size: 12pt; margin: 2.6mm 0 1mm; break-after: avoid; }
  .fiche .fiche-h3 { font-size: 11pt; margin: 2mm 0 .8mm; }
  .fiche p { margin: 0 0 1.4mm; }
  .fiche-liste { margin: 0 0 1.4mm; padding-left: 4.5mm; }
  .fiche-liste li { margin: 0 0 .6mm; }
  .fiche-encadre { border: 1pt solid #000; border-radius: 2mm; padding: 1.6mm 2.4mm; margin: 0 0 2mm; }
  .fiche-tableau { font-size: 9.5pt; line-height: 1.22; margin: 0 0 1.8mm; break-inside: avoid; }
  .fiche-tableau th, .fiche-tableau td { border: .5pt solid #555; padding: .5mm 1.2mm; }

  .fiche-auto-test { margin-top: 1mm; }
  .fiche-questions { grid-template-columns: 1fr 1fr; gap: 1.6mm 5mm; font-size: 9.5pt; line-height: 1.22; }
  .fiche-question.avec-image { grid-template-columns: 22mm minmax(0, 1fr); column-gap: 2mm; }
  .fiche-q-image { max-height: 20mm; border: .5pt solid #888; border-radius: 1mm; }
  .fiche .fiche-q-enonce { margin: 0 0 .5mm; }
  .fiche .fiche-corrige { font-size: 9pt; margin: 0 0 1.5mm; padding: 1mm 2mm; border-radius: 1mm; }
  .fiche-pied { font-size: 9pt; line-height: 1.25; padding-top: 1.2mm; border-top: .5pt solid #555; color: #333; }
  .fiche a { color: #000; text-decoration: underline; }
}