/* ====================================================================
   BenzoPotes — fiches imprimables (/f/*.html)
   --------------------------------------------------------------------
   POURQUOI CES PAGES EXISTENT

   Le public de ce site lit avec un brouillard mental documenté, et se
   rend chez un médecin qui dispose de sept minutes. Arriver avec un
   papier change la consultation : on ne cherche plus ses mots, on pose
   un document. C'est aussi le sujet où l'on est le moins cru — un
   document sourcé, imprimé, aide à être pris au sérieux.

   Ces pages sont pensées POUR LE PAPIER : l'écran n'est qu'un aperçu
   avec un bouton Imprimer. Conventions héritées de a/print.css :
   - l'avertissement médical n'est JAMAIS masqué, et il est encadré ;
   - la provenance (benzopotes.fr) figure sur chaque page — ces papiers
     circulent hors du site ;
   - les tableaux répètent leur en-tête à chaque page ;
   - aucune information portée uniquement par la couleur : tout doit
     rester lisible sur une imprimante noir et blanc.
   ==================================================================== */

@font-face {
    font-family: Fraunces;
    src: url(/vendor/fonts/fraunces-600-latin.woff2) format("woff2");
    font-weight: 600;
    font-display: swap;
}

:root {
    --green: #2d6a4f;
    --ink: #1b4332;
    --sage: #b7e4c7;
    --accent: #d8f3dc;
    --muted: #55665d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 16px;
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: #f0f9f4;
}

/* ── Barre d'outils écran — pour la personne, pas pour le papier ───── */
.f-outils {
    max-width: 860px;
    margin: 0 auto 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.f-outils a, .f-outils button {
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid var(--sage);
    background: #fff;
    color: var(--ink);
    padding: 7px 15px;
    text-decoration: none;
}
.f-outils .f-print {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
    font-weight: 600;
}
.f-autres {
    max-width: 860px;
    margin: 10px auto 0;
    font-size: 12.5px;
    color: var(--muted);
}
.f-autres a { color: var(--green); }

/* ── La feuille ────────────────────────────────────────────────────── */
.f-sheet {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--sage);
    border-radius: 18px;
    padding: 24px 26px;
    box-shadow: 0 2px 14px rgba(0, 50, 30, .08);
}

h1 {
    font-family: Fraunces, Georgia, serif;
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 3px;
}
.f-sub { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
h2 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--green);
    margin: 18px 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--accent);
}
p { margin: 6px 0; }
ul { margin: 6px 0; padding-left: 20px; }
li { margin: 3px 0; }

/* ── Avertissement médical : encadré, jamais masqué ─────────────────── */
.f-disclaimer {
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: #fff;
    padding: 9px 12px;
    font-size: 12.5px;
    margin: 12px 0;
}

/* ── Tableaux ──────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
    text-align: left;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    padding: 4px 6px;
    border-bottom: 1.5px solid var(--ink);
}
td { padding: 4px 6px; vertical-align: top; border-top: 1px solid #dfe9e2; }
.f-groupe td {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #eef5f0;
    color: var(--ink);
}

/* ── Provenance : le papier doit dire d'où il vient ─────────────────── */
.f-provenance {
    margin-top: 14px;
    padding-top: 6px;
    border-top: 1px solid #999;
    font-size: 11px;
    color: var(--muted);
}
.f-sources { font-size: 11px; color: var(--muted); }
.f-sources ul { margin: 4px 0; }

/* ── Impression ────────────────────────────────────────────────────── */
@media print {
    @page { size: A4 portrait; margin: 12mm; }

    body { background: #fff; padding: 0; font-size: 9.5pt; line-height: 1.4; color: #000; }
    .f-outils, .f-autres { display: none !important; }
    .f-sheet {
        max-width: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        /* Surtout PAS de width/height en mm fixes : les marges physiques de
           l'imprimante écraseraient la mise en page (leçon de fiche.html). */
    }

    h1, h2, h3 { page-break-after: avoid; break-after: avoid-page; color: #000; }
    h1 { font-size: 16pt; margin: 0 0 2mm; }
    h2 { font-size: 9pt; margin: 5mm 0 1.5mm; color: #000; border-color: #999; }
    p, li { orphans: 3; widows: 3; }
    .f-sub, .f-provenance, .f-sources { color: #333; }

    table { font-size: 8.5pt; page-break-inside: auto; }
    thead { display: table-header-group; }   /* l'en-tête se répète à chaque page */
    tr { page-break-inside: avoid; break-inside: avoid; }
    th { color: #000; border-bottom-color: #000; }
    td { border-top-color: #bbb; }
    .f-groupe td { background: #eee !important; color: #000; }

    .f-disclaimer {
        border: 1.5pt solid #000;
        page-break-inside: avoid;
        font-size: 8.5pt;
    }

    /* Les aplats légers (en-têtes de groupe, cases grisées) doivent
       survivre au mode « économie d'encre » des navigateurs. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Un papier doit rester vérifiable : l'adresse derrière chaque lien
       externe, sauf ancres et liens internes (et jamais pour tel:). */
    a { color: #000; text-decoration: none; }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 7.5pt;
        color: #444;
        word-break: break-all;
    }
    a[href^="#"]::after, a[href^="/"]::after, a[href^="tel:"]::after { content: ""; }
}