/* ═══════════════════════════════════════════════════════════════════════════
   print.css — Le rapport en document imprimable / PDF.

   Le PDF est produit par le navigateur lui-même (« Enregistrer au format
   PDF »), et c'est un choix, pas un pis-aller :

     • il est VECTORIEL — texte sélectionnable, copiable, indexable, et net à
       n'importe quel niveau de zoom. Une bibliothèque de capture d'écran type
       html2canvas produirait une image matricielle floue et dix fois plus
       lourde ;
     • il ne demande AUCUNE bibliothèque tierce, ce qui est la condition même
       de la promesse faite au visiteur : cette page ne charge rien ;
     • il ne quitte JAMAIS l'appareil. Une génération côté serveur supposerait
       d'y envoyer l'intégralité du rapport — exactement ce que cet outil
       s'interdit.

   Ce qui manquait n'était donc pas le format, mais la mise en page. Cette
   feuille traite le rapport comme un document : page de garde, sections qui
   commencent en haut de page, blocs jamais coupés, et surtout AUCUNE
   information masquée — tout ce qui est repliable à l'écran est déplié ici.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {

    /* ══ Format de page ═══════════════════════════════════════════════════ */
    @page {
        size: A4 portrait;
        /* Marge basse plus haute : elle réserve la place du pied de page
           répété (voir .print-footer). */
        margin: 14mm 13mm 18mm;
    }

    /* ══ Palette d'impression ═════════════════════════════════════════════
       Thème clair forcé — la variante sombre gaspille l'encre et ressort mal.
       Les couleurs d'accent sont conservées mais assombries : elles doivent
       rester lisibles en niveaux de gris, une bonne partie des rapports étant
       imprimée sur une laser noir et blanc. */
    :root, :root[data-theme="dark"] {
        --cream: #fff; --cream-2: #f4f2ef; --cream-3: #e3dfd9; --white: #fff;
        --noir: #000; --noir-mid: #2a2a2a; --text: #1a1a1a; --muted: #4a4a4a;
        --orange: #963d0c;
        --success: #17491f; --danger: #7d1b1b; --warn: #5c3c00; --info: #0d3f59;
        --success-bg: #eef4ef; --danger-bg: #f8eded; --warn-bg: #f7f2e6; --info-bg: #ebf2f6;
        --orange-bg: #f8f1ec; --orange-light: #f0e2d8;
        --border: #b8b2a8; --border-strong: #7d766c;
        --shadow: none; --shadow-lg: none;
    }

    /* Sans cela, les navigateurs suppriment tous les aplats de couleur : les
       badges deviennent illisibles et les jauges disparaissent purement et
       simplement. */
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html { font-size: 12px; }
    body {
        background: #fff;
        font-size: 9.5pt;
        line-height: 1.5;
        color: #1a1a1a;
    }

    main { max-width: none; padding: 0; margin: 0; }

    /* ══ Ce qui n'a pas sa place sur le papier ════════════════════════════ */
    .site-nav,
    .btn-row,
    .skip-link,
    .headers-toggle,
    .read-progress-track,
    .toc-time,
    /* Le bandeau d'accueil fait doublon avec la page de garde, qui dit la même
       chose en mieux : titre, date, appareil concerné. */
    .hero,
    .site-footer,
    #consent-screen,
    #loading-screen,
    #tech-toggle,
    #geo-run,
    #tracker-run,
    .hint,
    .toast { display: none !important; }

    /* ══ RIEN NE DOIT MANQUER ═════════════════════════════════════════════
       « L'ensemble des infos » est une exigence du document : sur papier, on
       ne peut ni cliquer, ni déplier, ni basculer un mode. Tout ce que
       l'interface réserve à un clic est donc rendu visible ici. */

    /* 1. Les cartes réservées au mode « détail technique ». */
    body:not(.show-tech) .is-technical { display: revert !important; }

    /* 2. Les blocs repliés (<details>) sont ouverts par JavaScript avant
          impression — voir bindPrintUnfold() dans 09-app.js. Aucune règle CSS
          ne peut le faire : c'est le navigateur lui-même qui masque le
          contenu, pas la feuille de style. On ne traite donc ici que leur
          apparence une fois ouverts. */
    details.fold, details.methodology-detail { break-inside: auto; }
    details.fold > summary,
    details.methodology-detail > summary {
        list-style: none;
        font-weight: 700;
        border-bottom: 1px solid var(--border);
        padding: 6px 0;
        break-after: avoid;
    }
    details.fold > summary::after { content: '' !important; }
    details.fold > summary::-webkit-details-marker,
    details.methodology-detail > summary::-webkit-details-marker { display: none; }

    /* 3. Les explications des bulles d'aide, dépliées et rattachées à leur
          carte : sur papier, un « ? » ne mène nulle part. */
    .hint-bubble {
        display: block !important;
        position: static !important;
        background: #f4f2ef !important;
        color: #1a1a1a !important;
        border: 1px solid var(--border);
        border-left: 3px solid var(--border-strong);
        margin-top: 6px;
        padding: 7px 9px;
        font-size: 8pt;
        line-height: 1.45;
        border-radius: 0 3px 3px 0;
        break-inside: avoid;
    }
    .hint-bubble::before {
        content: 'Précision — ';
        font-weight: 700;
        text-transform: uppercase;
        font-size: 7pt;
        letter-spacing: 0.04em;
    }

    /* Une fois dépliée, la bulle redevient un élément du flux — or elle est
       placée DANS le titre de la carte, qui est une rangée flex. Elle s'y
       installait comme une colonne et comprimait le titre sur trois lignes.
       On autorise donc le retour à la ligne dans le titre, et on force la
       bulle à occuper la largeur entière : le titre et son badge restent sur
       la première ligne, l'explication passe dessous. */
    .detect-card-head { align-items: flex-start; }
    .detect-card-title { flex-wrap: wrap; }
    .hint-bubble { flex: 0 0 100%; width: 100%; }

    /* 4. Les en-têtes HTTP masquées derrière le bouton « afficher les autres ». */
    .hidden-header-row { display: table-row !important; }
    .headers-scroll { overflow: visible !important; }

    /* ══ Page de garde ════════════════════════════════════════════════════ */
    .print-only { display: revert !important; }

    #print-cover {
        display: flex !important;
        flex-direction: column;
        min-height: 245mm;
        break-after: page;
        padding-top: 8mm;
    }

    .cover-brand {
        font-size: 8pt;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--muted);
        font-weight: 700;
        border-bottom: 2px solid var(--noir);
        padding-bottom: 6px;
        margin-bottom: 26mm;
    }

    .cover-title {
        font-family: var(--font-serif);
        font-size: 30pt;
        line-height: 1.12;
        color: #000;
        margin-bottom: 8px;
        letter-spacing: -0.01em;
    }
    .cover-subtitle {
        font-size: 11pt;
        color: var(--muted);
        line-height: 1.55;
        max-width: 105mm;
        margin-bottom: 16mm;
    }

    .cover-meta {
        display: grid;
        grid-template-columns: 34mm 1fr;
        gap: 5px 10px;
        font-size: 9pt;
        border-top: 1px solid var(--border);
        padding-top: 10px;
        margin-bottom: 14mm;
    }
    .cover-meta dt {
        color: var(--muted);
        text-transform: uppercase;
        font-size: 7.5pt;
        letter-spacing: 0.06em;
        font-weight: 700;
        padding-top: 1px;
    }
    .cover-meta dd { color: #000; font-weight: 600; }

    .cover-scores {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6mm;
        margin-bottom: auto;
    }
    .cover-score {
        border: 1px solid var(--border-strong);
        border-top: 3px solid var(--noir);
        padding: 9px 10px 11px;
        text-align: center;
    }
    .cover-score-label {
        display: block;
        font-size: 7.5pt;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        font-weight: 700;
        margin-bottom: 4px;
    }
    .cover-score-value {
        display: block;
        font-family: var(--font-serif);
        font-size: 26pt;
        line-height: 1;
        color: #000;
        font-variant-numeric: tabular-nums;
    }
    .cover-score-tag { display: block; font-size: 8pt; color: var(--muted); margin-top: 3px; }

    .cover-note {
        border: 1px solid var(--border-strong);
        background: var(--success-bg);
        padding: 10px 12px;
        font-size: 8.5pt;
        line-height: 1.55;
        margin-top: 10mm;
    }
    .cover-note strong { color: #000; }

    /* ══ Pied de page répété sur chaque feuille ═══════════════════════════
       `position: fixed` en impression : les navigateurs le répètent sur toutes
       les pages. La numérotation, elle, reste celle du navigateur (les boîtes
       de marge @page ne sont supportées par aucun moteur courant). */
    .print-footer {
        display: flex !important;
        justify-content: space-between;
        gap: 10px;
        position: fixed;
        bottom: -12mm;
        left: 0;
        right: 0;
        font-size: 7.5pt;
        color: var(--muted);
        border-top: 1px solid var(--border);
        padding-top: 3px;
    }

    /* Le bouton « afficher les N autres en-têtes » porte aussi la classe
       `is-technical` : sans cette exception, la règle de dévoilement ci-dessus
       le ferait réapparaître, alors que les lignes qu'il commande sont déjà
       toutes visibles sur le papier. */
    body .headers-toggle.is-technical { display: none !important; }

    /* ══ Titres et rythme du document ═════════════════════════════════════
       À l'écran, les titres de section sont de discrètes étiquettes en petites
       capitales. Dans un document de vingt pages, il faut de vrais titres :
       on repasse en serif, en corps 15, avec un filet. */
    .section-title {
        font-family: var(--font-serif);
        font-size: 15pt;
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0;
        line-height: 1.25;
        color: #000;
        border-bottom: 1.5px solid var(--noir);
        padding-bottom: 5px;
        margin: 0 0 8px;
        display: block;
        /* Chaque grande section commence en haut d'une page : c'est ce qui
           distingue un document d'une capture d'écran déroulée. */
        break-before: page;
        break-after: avoid;
    }
    .section-title::after { content: none; }
    /* La première section suit la page de garde : pas de page blanche. */
    #s1 { break-before: auto; }
    .section-lede { break-after: avoid; font-size: 9pt; margin-bottom: 10px; }

    h3, h4, .fp-lesson-title, .fp-group-title, .myth-title, .tracker-title,
    .priority-title, .broker-title, .lab-title, .toc-title {
        break-after: avoid;
        color: #000;
    }

    /* ══ Blocs : jamais coupés au milieu ══════════════════════════════════ */
    .panel, .detect-card, .score-card, .headers-block, .api-grid,
    .fingerprint-card, .action, .broker, .priority-box, .risk-table-wrap,
    .fp-lesson, .lab, .myth, .tracker-box, .key-number, .takeaway,
    details.fold, .toc {
        border: 1px solid var(--border);
        border-radius: 0;
        background: #fff;
    }

    .detect-card, .score-card, .action, .broker-row, .priority-item,
    .headers-block, .fingerprint-card, .methodology-note, .key-number,
    .takeaway, .lab, .fp-steps li, .myth-row, .glossary-row, .cover-score,
    .tracker-box, table.risk-table tr, .api-chip, .reco-card {
        break-inside: avoid;
    }

    /* ══ Grilles : deux colonnes, densité correcte sur A4 ═════════════════ */
    .detect-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
    .key-numbers { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
    .score-duo   { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
    .api-grid    { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
    .fp-steps    { grid-template-columns: repeat(3, 1fr) !important; }
    .lab-body    { grid-template-columns: 42% 1fr !important; gap: 8px !important; }
    .toc-list    { grid-template-columns: 1fr 1fr !important; }

    .detect-card { padding: 8px 9px; }
    .detect-value { font-size: 8.5pt; }
    .data-origin { font-size: 7pt; padding: 1px 6px; }

    /* ══ Jauges et indicateurs ════════════════════════════════════════════ */
    .gauge-track { border: 1px solid var(--border-strong); height: 7px; background: #fff !important; }
    .gauge-fill  { background: var(--noir) !important; }
    .score-value { font-size: 20pt; }
    .lab-pips i { border: 1px solid var(--border-strong); background: #fff !important; }
    .lab-pips i.on { background: var(--noir) !important; }
    .lab-bar { border: 1px solid var(--border-strong); background: #fff !important; }
    .lab-bar-fill { background: var(--cream-3) !important; }
    .canvas-zoom { height: 22mm; }
    .wave-svg { height: 20mm; }

    /* ══ Tableaux ═════════════════════════════════════════════════════════ */
    table.risk-table { font-size: 8pt; }
    table.risk-table th { background: var(--cream-2) !important; }
    table.risk-table thead { display: table-header-group; }
    .headers-table { font-size: 7.5pt; width: 100%; }
    .headers-table td { word-break: break-all; }

    /* ══ Liens : la cible doit être lisible sur papier ════════════════════ */
    .action-how a::after,
    .methodology-note a::after,
    .fp-limit a::after,
    .reco-detail a::after {
        content: " (" attr(href) ")";
        font-size: 7.5pt;
        color: var(--muted);
        word-break: break-all;
    }

    /* ══ Blocs volontairement à contre-courant à l'écran ══════════════════ */
    .recap-block { background: var(--cream-2) !important; color: #000 !important; border: 1px solid var(--border-strong); }
    .recap-block h3, .recap-block .tagline, .recap-stat, .recap-stat strong { color: #000 !important; }

    /* Le sommaire n'a plus de fonction de navigation sur papier, mais il garde
       sa fonction de plan : on le conserve, sans les effets d'interface. */
    .toc-list a { color: #000; padding: 3px 0; min-height: 0; }
    .toc-num { border: 1px solid var(--border-strong); background: #fff !important; }

    /* Les boutons de test à la demande n'existent pas sur papier : on remplace
       l'encadré d'avertissement par la mention de ce qui n'a pas été fait. */
    .tracker-warning { font-size: 8pt; }
}

/* Note : la mise à l'écart de ces éléments À L'ÉCRAN est déclarée dans
   components.css, et non ici. Cette feuille est chargée avec `media="print"` :
   tout ce qu'elle contient ne s'applique qu'à l'impression, elle ne peut donc
   rien masquer sur l'écran. */