/* ══════════════════════════════════════════════════════════════════════════
   IMPRESSION V2 — LE CONTENU

   Se lit avec `print/document.css`, qui pose le format, l'encre et le
   cartouche. Ici vivent les trois formes que prennent les pages du site une
   fois sur le papier, et elles suffisent a les couvrir toutes :

     .pdoc-facts     une liste de faits (identification, coordonnees, dates)
     .pdoc-prose     un corps editorial
     .pdoc-entries   une liste d'entrees (une liste publique, un sommaire)

   ── POURQUOI TROIS FORMES ET NON QUINZE FEUILLES ──

   Le releve du 2026-09-05 donne quinze gabarits imprimables pour trois
   silhouettes : une fiche editoriale (actualite, dossier, page, guide, FAQ,
   portrait, terme, ressource, formation, edition, mentions), une liste
   (glossaire, actualites, agenda, ressources, annuaire) et une fiche a faits
   (annuaire CESU, definitions). Une feuille par page reconduirait la dette
   qu'on vient de solder : quinze traitements du meme objet, qui divergent des
   la premiere correction.

   ── LE CORPS EDITORIAL EST STYLE PAR SES BALISES, PAS PAR SES CLASSES ──

   Le corps vient du moteur TipTap, qui rend le balisage de l'auteur : des
   `h2`, des `p`, des listes, des tableaux. `.pdoc-prose` les habille par leur
   NOM, ce qui garde le principe de la feuille — elle ne lit aucune classe
   d'ecran, donc rien ne peut se perimer sous elle quand une zone est refondue.

   Les rares classes citees ici sont des noeuds de CONTENU (une video, une
   frise), pas de mise en page : elles font partie du contrat du moteur de
   rendu, pas de la charte d'ecran.
   ══════════════════════════════════════════════════════════════════════════ */

@media print {
    /* ══════════════════════════════════════════════════════════════════════
       LES FAITS
       Deux colonnes, l'intitule cale a gauche sur une largeur fixe : c'est ce
       qui fait qu'on lit les valeurs en colonne, comme sur un formulaire.
       ══════════════════════════════════════════════════════════════════════ */
    .pdoc-facts {
        display: grid;
        grid-template-columns: 32mm 1fr;
        gap: 0.8mm 4mm;
        margin: 0 0 4mm;
        padding: 0 0 3mm;
        border-bottom: 0.2mm solid var(--pdoc-rule-soft);
        font-size: 8.5pt;
        break-inside: avoid;
    }

    .pdoc-facts__label {
        margin: 0;
        font-size: 7.5pt;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--pdoc-ink-mute);
        /* La ligne de base d'une capitale a 7,5 pt tombe au-dessus de celle de
           sa valeur a 8,5 : sans ce decalage, l'intitule flotte. */
        padding-top: 0.3mm;
    }

    .pdoc-facts__value {
        margin: 0;
        color: var(--pdoc-ink);
    }

    /* ══════════════════════════════════════════════════════════════════════
       LE CORPS EDITORIAL

       ── LA PURGE EN TETE N'EST PAS UNE PRECAUTION, C'EST LA REGLE ──

       Le corps vient du moteur de rendu, et son balisage porte les classes de
       l'ECRAN : une carte de rebond, une frise, un chiffre-cle y arrivent avec
       leur `display: flex`, leur fond gris et leur image en position absolue.
       Mesure du 2026-09-05 sur une actualite : huit elements sur trente-six
       peignaient encore un fond, une ombre ou une grille d'ecran.

       Masquer ces classes une a une reconduirait la dette qu'on vient de
       solder — une liste qu'on oublie de tenir, qui se perime a la premiere
       refonte. `all: revert` les ramene donc TOUTES au style du navigateur, et
       cette feuille rebatit par-dessus, par nom de balise.

       Le `!important` est la consequence directe : une declaration d'ecran
       plus specifique (`.article-single .media-card__body`) battrait sinon la
       remise a zero. Il est porte par les DEUX cotes — la purge et ce qui la
       suit — pour que la specificite redevienne le seul arbitre entre les
       regles de cette feuille.
       ══════════════════════════════════════════════════════════════════════ */
    .pdoc-prose *,
    .pdoc-prose *::before,
    .pdoc-prose *::after {
        all: revert !important;
    }

    .pdoc-prose {
        font-size: 9pt;
        line-height: 1.45;
        color: var(--pdoc-ink);
    }

    .pdoc-prose > :first-child { margin-top: 0 !important; }
    .pdoc-prose > :last-child { margin-bottom: 0 !important; }

    .pdoc-prose p {
        margin: 0 0 2mm !important;
        font-size: 9pt !important;
        line-height: 1.45 !important;
        color: var(--pdoc-ink) !important;
        orphans: 3;
        widows: 3;
    }

    .pdoc-prose h2,
    .pdoc-prose h3,
    .pdoc-prose h4 {
        margin: 4mm 0 1.2mm !important;
        line-height: 1.2 !important;
        color: var(--pdoc-accent) !important;
        /* Un titre ne reste jamais seul en bas de page. */
        break-after: avoid;
    }

    .pdoc-prose h2 { font-size: 12pt !important; font-weight: 700 !important; }
    .pdoc-prose h3 { font-size: 10pt !important; font-weight: 700 !important; }
    .pdoc-prose h4 { font-size: 9.5pt !important; font-weight: 700 !important; color: var(--pdoc-ink) !important; }

    .pdoc-prose ul,
    .pdoc-prose ol {
        margin: 0 0 2mm !important;
        padding-left: 5mm !important;
    }

    .pdoc-prose li {
        margin: 0 0 0.6mm !important;
        font-size: 9pt !important;
        line-height: 1.45 !important;
        orphans: 2;
        widows: 2;
    }

    .pdoc-prose blockquote {
        margin: 2.5mm 0 !important;
        padding: 0 0 0 3mm !important;
        border-left: 0.5mm solid var(--pdoc-accent) !important;
        font-style: italic !important;
        color: var(--pdoc-ink-soft) !important;
        break-inside: avoid;
    }

    .pdoc-prose strong { font-weight: 700 !important; }
    .pdoc-prose em { font-style: italic !important; }

    .pdoc-prose a {
        color: var(--pdoc-ink) !important;
        text-decoration: underline !important;
        text-underline-offset: 0.4mm !important;
    }

    .pdoc-prose hr {
        margin: 3mm 0 !important;
        border: 0 !important;
        border-top: 0.2mm solid var(--pdoc-rule) !important;
    }

    /* Un tableau se coupe entre deux pages quand il est long — l'interdire
       laisserait une page blanche. Ce qui ne se coupe pas, c'est une LIGNE, et
       l'en-tete se repete en tete de chaque page. */
    .pdoc-prose table {
        width: 100% !important;
        margin: 0 0 3mm !important;
        border-collapse: collapse !important;
        font-size: 8pt !important;
    }

    .pdoc-prose thead { display: table-header-group !important; }
    .pdoc-prose tr { break-inside: avoid; }

    .pdoc-prose th,
    .pdoc-prose td {
        padding: 1mm 1.5mm !important;
        border: 0.2mm solid var(--pdoc-rule) !important;
        text-align: left !important;
        vertical-align: top !important;
        font-size: 8pt !important;
    }

    .pdoc-prose th {
        font-weight: 700 !important;
        color: var(--pdoc-accent) !important;
    }

    .pdoc-prose figure {
        margin: 3mm 0 !important;
        break-inside: avoid;
    }

    .pdoc-prose figcaption {
        margin-top: 1mm !important;
        font-size: 7.5pt !important;
        color: var(--pdoc-ink-mute) !important;
    }

    /* Une illustration ne prend jamais plus d'un tiers de hauteur de page :
       sur papier, une image qui chasse le texte coute une feuille entiere. */
    .pdoc-prose img,
    .pdoc-prose svg {
        max-width: 100% !important;
        max-height: 80mm !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Ce qui n'existe que sous un clic n'a pas de version papier. Ces balises
       suffisent : la purge ci-dessus a deja retire ce qui les habillait. */
    .pdoc-prose iframe,
    .pdoc-prose video,
    .pdoc-prose audio,
    .pdoc-prose button,
    .pdoc-prose input,
    .pdoc-prose select,
    .pdoc-prose textarea {
        display: none !important;
    }

    /* ══════════════════════════════════════════════════════════════════════
       LES NOEUDS DE CONTENU DU MOTEUR DE RENDU

       ── POURQUOI DES CLASSES ICI, ET SEULEMENT ICI ──

       La purge ci-dessus ramene tout au style du navigateur. Elle suffit pour
       du TEXTE ; elle ne suffit pas pour les noeuds COMPOSES que l'editeur
       insere — une carte de rebond, une liste de ressources. Aplatis, ils
       rendent une vignette de huit centimetres suivie d'un titre orphelin :
       mesure du 2026-09-05 sur la newsletter d'octobre, ou trois cartes de
       referentiel occupaient une page et demie pour trois liens.

       Ces classes appartiennent au CONTRAT DU MOTEUR DE RENDU, pas a la
       charte d'ecran : elles ne changent pas quand une zone est refondue. Les
       nommer ici ne remet donc pas la feuille a la merci de l'ecran — c'est la
       seule endroit du fichier ou elles ont leur place.

       ── CE QUE LE PAPIER GARDE D'UNE CARTE ──

       Une LIGNE DE REFERENCE : sa nature, son titre, son adresse. La vignette
       est un decor d'ecran ; sur papier elle chasse le texte, et le lecteur ne
       peut pas cliquer dessus.
       ══════════════════════════════════════════════════════════════════════ */
    .pdoc-prose .media-cards {
        display: block !important;
        margin: 0 0 3mm !important;
    }

    .pdoc-prose .media-card {
        display: block !important;
        padding: 1.2mm 0 !important;
        border-top: 0.2mm solid var(--pdoc-rule-soft) !important;
        break-inside: avoid;
    }

    .pdoc-prose .media-cards > .media-card:first-child {
        border-top: 0 !important;
    }

    /* La vignette et la pastille de couleur : deux decors, zero information. */
    .pdoc-prose .media-card__media,
    .pdoc-prose .ui-dot {
        display: none !important;
    }

    .pdoc-prose .media-card__meta,
    .pdoc-prose .media-card__kicker {
        display: block !important;
        margin: 0 !important;
        font-size: 7.5pt !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        color: var(--pdoc-accent) !important;
    }

    .pdoc-prose .media-card__title {
        margin: 0 !important;
        font-size: 9.5pt !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: var(--pdoc-ink) !important;
    }

    /* ── Listes de ressources (`content-block`) ── */
    .pdoc-prose .cb-list-item {
        margin: 0 0 0.8mm !important;
        break-inside: avoid;
    }

    .pdoc-prose .cb-list-type {
        font-size: 8pt !important;
        color: var(--pdoc-ink-mute) !important;
    }

    /* ── L'ACCES RESERVE : un MOT, pas un cadenas et son infobulle ──

       Le cadenas ne dit rien sans l'infobulle qui l'explique, et une infobulle
       n'existe pas sur papier. Pire, mesure du 2026-09-05 : le texte de
       l'infobulle SORTAIT a l'impression, colle au titre — « Réservé Contenu
       réservé aux membres autorisés. » Une infobulle est un mecanisme de
       SURVOL ; imprimee, elle devient une phrase au milieu d'une ligne.

       Toute la pastille part donc, texte masque et infobulle compris, et la
       mention est portee par l'ITEM — qui, lui, ne porte pas de
       `data-tooltip`, donc aucune regle d'ecran ne vient se rajouter derriere
       la mienne. */
    .pdoc-prose .restricted-badge,
    .pdoc-prose [data-tooltip]::before,
    .pdoc-prose [data-tooltip]::after {
        content: none !important;
        display: none !important;
    }

    .pdoc-prose .cb-list-item--restricted::after {
        content: " · réservé aux membres" !important;
        font-size: 7.5pt !important;
        font-style: italic !important;
        color: var(--pdoc-ink-mute) !important;
    }

    /* ── L'ADRESSE, la ou elle est le propos ──

       Une newsletter est un SOMMAIRE DE LIENS : sans adresse, sa version
       papier annonce des documents qu'elle ne permet pas d'atteindre. Elle
       n'est developpee que sur ces deux familles de noeuds — la developper
       partout couvrirait le texte d'URL, a commencer par les renvois de
       glossaire, qui ne sont pas des destinations.

       `--pdoc-host` est pose par le gabarit sur `.pdoc` : `attr(href)` rend le
       chemin, jamais le domaine. */
    .pdoc-prose .cb-list-item > a::after,
    .pdoc-prose .media-card__link::after {
        content: " (" var(--pdoc-host, "") attr(href) ")" !important;
        font-size: 7pt !important;
        font-weight: 400 !important;
        color: var(--pdoc-ink-mute) !important;
        word-break: break-all;
    }

    /* Un renvoi de glossaire n'est pas une destination : c'est une definition.
       Souligne, il mettait un trait sous un mot sur trois. */
    .pdoc-prose .cms-mention {
        text-decoration: none !important;
    }

    /* ══════════════════════════════════════════════════════════════════════
       LES LISTES
       Une entree est un titre, ses reperes et sa phrase. Pas de cadre : sur
       papier, un filet fin separe mieux que quinze rectangles gris.
       ══════════════════════════════════════════════════════════════════════ */
    .pdoc-group + .pdoc-group {
        margin-top: 4mm;
    }

    .pdoc-group__title {
        margin: 0 0 1.5mm;
        padding-bottom: 1mm;
        border-bottom: 0.4mm solid var(--pdoc-accent);
        font-size: 11pt;
        font-weight: 700;
        color: var(--pdoc-accent);
        break-after: avoid;
    }

    .pdoc-entries {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Deux colonnes pour un carnet d'adresses : les entrees y tiennent en
       trois lignes, et cent centres passent de huit feuilles a quatre. Chaque
       entree porte deja `break-inside: avoid`, donc aucune ne se coupe entre
       deux colonnes. A ne PAS poser sur une liste a chapo : sous 85 mm, un
       paragraphe de trois lignes en fait six. */
    .pdoc-entries--columns {
        column-count: 2;
        column-gap: 8mm;
        column-rule: 0.2mm solid var(--pdoc-rule-soft);
    }

    .pdoc-entry {
        padding: 1.4mm 0;
        border-top: 0.2mm solid var(--pdoc-rule-soft);
        break-inside: avoid;
    }

    .pdoc-entries > .pdoc-entry:first-child {
        border-top: 0;
    }

    .pdoc-entry__head {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0 2.5mm;
        margin: 0 0 0.4mm;
        font-size: 7.5pt;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--pdoc-ink-mute);
    }

    .pdoc-entry__kicker {
        font-weight: 700;
        color: var(--pdoc-accent);
    }

    .pdoc-entry__date {
        margin-left: auto;
        text-transform: none;
        letter-spacing: 0;
    }

    .pdoc-entry__title {
        margin: 0;
        font-size: 9.5pt;
        font-weight: 700;
        line-height: 1.25;
        color: var(--pdoc-ink);
    }

    .pdoc-entry__subtitle {
        margin: 0.3mm 0 0;
        font-size: 7.5pt;
        font-style: italic;
        color: var(--pdoc-ink-mute);
    }

    .pdoc-entry__excerpt {
        margin: 0.5mm 0 0;
        font-size: 8.5pt;
        line-height: 1.35;
        color: var(--pdoc-ink-soft);
    }

    /* L'URL d'une entree est ECRITE EN CLAIR, et seulement dans une liste.
       Sur une fiche, le QR du cartouche ramene en ligne ; dans une liste, il
       faudrait un QR par entree — l'adresse est ce qui tient sur une ligne. */
    .pdoc-entry__url {
        margin: 0.4mm 0 0;
        font-size: 7pt;
        color: var(--pdoc-ink-mute);
        word-break: break-all;
    }
}