/* ══════════════════════════════════════════════════════════════
   Print — Brique générique d'impression réutilisable

   Charge globale via `base.html.twig` (`media="print"` → zéro impact
   écran). Aucune règle hors `@media print` ; toute insertion ici
   doit rester invisible en navigation normale.

   Toute page imprimable opte in en incluant le partial
   `templates/components/_print_page.html.twig` qui rend le cartouche
   `.print-page` au-dessus du contenu.

   Conventions :
     - Format A4 avec marges 18mm haut/bas, 15mm latérales.
     - Footer `Page X sur N` automatique via `@page @bottom-center`.
     - Liens développés en clair sur papier (URL entre parenthèses).
     - Page-break-avoid sur titres et tableaux.
     - Hides universels pour les éléments d'interface (nav, sidebar,
       toolbar, breadcrumb, footer, sf-toolbar, widgets flottants).
   ══════════════════════════════════════════════════════════════ */

/* Toujours caché en navigation. La règle @media print ci-dessous
   bascule à `display: block !important;` quand l'utilisateur imprime. */
.print-page {
    display: none;
}

@media print {
    /* ── Page setup ── */
    @page {
        size: A4;
        margin: 18mm 15mm 22mm 15mm;

        @top-right {
            /* Le titre du cartouche alimente cette chaîne CSS via
               `string-set` plus bas. Conséquence : la brique reste
               générique — chaque page imprimable affiche son propre
               titre courant en en-tête à partir de la page 2 sans
               connaître le contenu spécifique. */
            content: string(print-running-title);
            font-family: var(--font-sans, sans-serif);
            font-size: 8pt;
            color: #666;
        }

        @bottom-left {
            content: "ANCESU. Tous droits réservés.";
            font-family: var(--font-sans, sans-serif);
            font-size: 8pt;
            color: #666;
        }

        @bottom-right {
            content: "Page " counter(page) " sur " counter(pages);
            font-family: var(--font-sans, sans-serif);
            font-size: 8pt;
            color: #666;
        }
    }

    /* Première page : le cartouche tient lieu d'en-tête, on n'affiche
       pas le titre courant en haut pour ne pas faire de doublon. */
    @page :first {
        margin-top: 12mm;

        @top-right {
            content: "";
        }
    }

    /* ── Reset typographique papier ──
       Compact volontaire (8.5pt / 1.35) : à 9.5pt + 1.55 le glossaire
       sortait sur 4-5 pages alors qu'il tient sur 2-3 avec ces
       valeurs. Reste confortablement lisible (8pt minimum admis sur
       support papier physique pour du contenu courant). */
    body {
        font-family: var(--font-sans, 'Montserrat', sans-serif);
        font-size: 8.5pt;
        line-height: 1.35;
        color: #000;
        background: #fff;
    }

    /* ── Hides universels ──
       Tout élément d'interface utilisateur sans valeur sur papier.
       Les pages spécifiques peuvent étendre cette liste dans leur
       propre @media print (zones/<page>.css). */
    .navbar,
    .navbar-mobile,
    .navbar__mobile,
    .breadcrumb-bar,
    .cookie-consent,
    .skip-link,
    .site-footer,
    .feedback-widget,
    .floating-actions,
    .filters-overlay,
    .list-hero,
    .content-list__sidebar,
    .content-list__toolbar,
    .content-list__filter-toggle,
    .sf-toolbar,
    .page-transition-bar,
    [data-print-hide],
    iframe[src*="recaptcha"],
    iframe[src*="youtube"],
    iframe[src*="vimeo"] {
        display: none !important;
    }

    /* ── Cartouche d'impression (toujours visible sur papier) ── */
    .print-page {
        display: block !important;
        margin: 0 0 1.5em;
        padding: 0 0 1em;
        border-bottom: 2px solid #000;
        page-break-after: avoid;
    }

    .print-page__logo {
        display: block;
        /* `max-height` survit au reset global `img { height: auto !important }`
           plus bas dans la feuille (qui écraserait un `height` fixe). */
        max-height: 3cm;
        width: auto;
        margin: 0 auto 1em;
    }

    /* Variante hero : remplace le logo ANCESU par une image de bandeau
       (ex: thumbnail d'événement). Plus large, hauteur contenue, cadrée
       pour préserver l'aspect bannière. */
    .print-page__logo--hero {
        max-height: 3.5cm;
        max-width: 100%;
        margin: 0 auto 0.8em;
        object-fit: cover;
        object-position: center;
        border-radius: 2px;
    }

    .print-page__masthead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5em;
    }

    .print-page__masthead-text {
        flex: 1;
        min-width: 0;
    }

    .print-page__eyebrow {
        font-size: 8pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #344b8d;
        margin: 0 0 0.3em;
        line-height: 1.2;
    }

    .print-page__eyebrow-date {
        color: #666;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
    }

    .print-page__title {
        /* Capture le texte du titre dans la chaîne `print-running-title`,
           consommée par `@page @top-right` pour rendre l'en-tête courant
           à partir de la 2ème page (cf. ci-dessus). */
        string-set: print-running-title content(text);
        font-size: 20pt;
        font-weight: 700;
        color: #000;
        line-height: 1.15;
        margin: 0 0 0.35em;
    }

    .print-page__subtitle {
        font-size: 10pt;
        color: #333;
        line-height: 1.4;
        margin: 0 0 0.5em;
    }

    .print-page__meta {
        font-size: 7.5pt;
        color: #666;
        margin: 0;
    }

    .print-page__online-link {
        color: #344b8d;
        text-decoration: underline;
    }

    .print-page__qr {
        flex-shrink: 0;
        margin: 0;
        text-align: center;
        font-size: 6.5pt;
        color: #666;
        line-height: 1.2;
    }

    .print-page__qr svg {
        display: block;
        width: 70px;
        height: 70px;
        margin: 0 auto 0.25em;
    }

    .print-page__qr figcaption {
        max-width: 70px;
    }

    /* ── Liens en clair sur papier ── */
    a {
        color: #000;
        text-decoration: underline;
    }

    /* Les URLs internes ne s'affichent qu'à condition que l'auteur
       les marque explicitement avec `data-print-href` ou que la page
       les active dans son propre @media print. Sinon on évite le
       bruit (URLs longues qui cassent la mise en page). */
    a[data-print-href]::after {
        content: " (" attr(href) ")";
        font-size: 7pt;
        color: #666;
        word-break: break-all;
    }

    /* ── Saut de page ──
       On évite la coupe APRÈS un titre (héritage typo) mais pas À
       L'INTÉRIEUR d'éléments potentiellement longs (ul/ol qui peuvent
       contenir des dizaines de items, sections de listing par lettre,
       etc.) — sinon la première page reste vide quand une lettre
       déborderait. Les blocs courts (table, blockquote, figure)
       restent solidaires. */
    h1, h2, h3, h4 {
        page-break-after: avoid;
    }

    table,
    blockquote,
    figure {
        page-break-inside: avoid;
    }

    img,
    svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Anti-orphelins/veuves */
    p, li {
        orphans: 3;
        widows: 3;
    }

    /* Espacement compact pour gagner de la place — les marges
       browser par defaut (~1em) consomment beaucoup de hauteur sur
       les contenus longs (newsletter, glossaire, etc.). Conserve
       un minimum de respiration entre paragraphes / listes pour
       garder la lecture lisible. */
    p,
    ul,
    ol,
    blockquote {
        margin-top: 0.3em;
        margin-bottom: 0.3em;
    }

    /* Premier element apres un titre : pas de marge top (la marge
       bottom du titre suffit). */
    h1 + p, h1 + ul, h1 + ol,
    h2 + p, h2 + ul, h2 + ol,
    h3 + p, h3 + ul, h3 + ol,
    h4 + p, h4 + ul, h4 + ol {
        margin-top: 0;
    }

    /* Titres : margin-top moderee, bottom compacte. */
    h1, h2, h3, h4 {
        margin-top: 0.6em;
        margin-bottom: 0.2em;
    }

    /* Items de liste : tres serres. */
    li {
        margin: 0.05em 0;
    }
}