/* ===========================================================================
   Impression. Ajoutee le 30/10/2026, apres le constat qu'aucune feuille
   `@media print` n'existait sur un site dont les pages sont des dossiers de
   decision : une page sortait avec son en-tete, son menu, son selecteur de
   langue et son bandeau, et **tous ses graphiques vides**.

   Ce dernier point est la vraie raison d'etre de ce bloc. Les visuels du site
   ne sont pas des images : ils sont dessines en CSS, par des fonds poses sur
   des elements (104 selecteurs a fond colore dans `strategic.css`). Or un
   navigateur supprime les fonds a l'impression tant qu'on ne lui demande pas
   le contraire. Sans `print-color-adjust: exact`, une cascade, une courbe de
   saturation ou un diagramme de Pareto s'impriment donc en blanc sur blanc,
   et la page perd precisement ce qu'elle avait a montrer.

   La couleur est demandee dans `.sp-asset` seulement — la ou elle porte du
   sens. Partout ailleurs la feuille rend le papier au papier.

   Elle vit dans sa propre feuille, et non a la fin de `globals.css`, pour deux
   raisons. `globals.css` bloque le rendu : y mettre des regles qu'aucun
   visiteur d'ecran n'emploie les lui fait telecharger pour rien. Et une porte
   du depot plafonne les regles de `globals.css` precisement pour qu'une feuille
   entiere n'y revienne pas — elle a eu raison de refuser celle-ci.

   Liee en `media="print"`, elle n'entre dans aucun chemin critique.
   ======================================================================== */
@media print {
  @page { margin: 16mm 14mm; }

  /* 1. Ce qui ne s'imprime pas : la navigation, l'interface et ce qui est
     injecte a l'execution (bandeau de consentement, widget PRISME). Un lien
     qu'on ne peut pas cliquer n'a rien a faire sur du papier. */
  .site-header, .main-nav, .language-switcher, .mobile-menu-toggle,
  .mobile-menu-utility, .site-footer, .footer-meta-links, .back-to-top,
  .skip-link, .consent-dialog, .consent-dialog-backdrop, .sp-related,
  [id*="prisme-widget"], [class*="prisme-widget"] { display: none !important; }

  /* 2. L'encre. Fond blanc, texte noir, corps lisible a la main.
     `!important` parce que cette feuille est servie AVANT `globals.css` et
     `strategic.css` : a specificite egale, elles gagneraient. Mesure : sans
     lui, ces deux declarations tiennent encore aujourd'hui, mais par chance
     — la premiere regle `body { background }` ajoutee ailleurs les ferait
     tomber en silence, et une page imprimee reprendrait son fond colore. */
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 10.5pt !important; line-height: 1.45 !important; }
  /* `strategic.css` est lie APRES `globals.css` : a specificite egale il gagne.
     Les declarations de mise en page portent donc `!important`, faute de quoi
     elles ne s'appliquent pas — verifie, elles ne s'appliquaient pas. */
  h1 { font-size: 19pt !important; }
  h2 { font-size: 14pt !important; }
  h3 { font-size: 11.5pt !important; }
  .shell { max-width: none !important; padding: 0 !important; margin: 0 !important; }

  /* 3. La couleur la ou elle informe. Voir le commentaire en tete. */
  .sp-asset, .sp-asset * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 4. Le papier est etroit : les grilles passent en une colonne plutot que
     de comprimer des colonnes illisibles. */
  .sp-hero-grid, .sp-principle-grid, .sp-worked-case-grid, .sp-guardrails-grid,
  .sp-deep-dive-grid, .sp-research-evidence-grid, .sp-creative-grid,
  .sp-deal-grid, .sp-interaction-grid, .sp-phase9-grid, .sp-brand-columns,
  .sp3-plan-grid, .sp3-fence-grid, .sp4-retail-grid, .sp5-quality-grid,
  .sp6-role-grid { display: block !important; }

  /* 5. Les tableaux larges defilent a l'ecran ; sur papier ils doivent tenir
     entiers, et leur en-tete se repeter a chaque page. */
  .sp-table-scroll { overflow: visible !important; }
  table { width: 100% !important; border-collapse: collapse !important; }
  thead { display: table-header-group !important; }
  tr, td, th { break-inside: avoid; }

  /* 6. Les coupures. Un titre ne reste pas seul en bas d'une page, un visuel
     ne se coupe pas en deux. */
  h1, h2, h3, h4 { break-after: avoid; }
  .sp-asset, .sp-worked-case, .sp-method-verdict, figure, blockquote {
    break-inside: avoid;
  }

  /* 7. Les sources. Une reference sans son adresse n'est pas verifiable, et
     la verifiabilite est l'objet meme de ces pages. L'adresse n'est ajoutee
     qu'ici et sur les telechargements — pas sur les liens de navigation, qui
     noieraient le texte. */
  .sp-sources a[href]::after,
  .sp-download a[href]::after { content: " <" attr(href) ">"; font-size: 8.5pt; word-break: break-all; }

  /* 8. Rien ne deborde de la feuille. */
  img, svg, canvas { max-width: 100%; height: auto; }
}