/* ==========================================================================
   Impression des articles de blog — netaix.fr
   Cree le 2026-08-17. Le bouton « Imprimer » avait ete ajoute sans feuille
   de style d'impression : le rendu sortait en gris clair sur blanc (couleurs
   du theme sombre), avec la barre de navigation en pave blanc, les decors
   en degrade sur la marge, les boutons de partage imprimes, et 8 pages pour
   un article.

   Charge uniquement en media="print" : aucun impact sur l'affichage ecran.
   ========================================================================== */

@page {
  size: A4;
  margin: 18mm 16mm 20mm;
}

/* --- 1. Repartir d'une base papier, sans heriter du theme sombre ---------- */
html, body {
  background: #fff !important;
  color: #111 !important;
}

/* Les variables du theme sont redefinies pour le papier : tout ce qui les
   utilise (texte secondaire, filets, accents) devient lisible a l'encre. */
:root, html.dark, html:not(.dark) {
  --ink: #111 !important;
  --ink-2: #222 !important;
  --ink-3: #555 !important;
  --line: #c9c9c9 !important;
  --line-2: #b0b0b0 !important;
  --panel: transparent !important;
  --glass: transparent !important;
  --glass-line: #c9c9c9 !important;
  --bg: #fff !important;
  --cyan: #1F4E79 !important;      /* navy de la charte actuelle : lisible a l'encre */
  --navy: #1F4E79 !important;
  --navy-deep: #16405F !important;
  --azure: #1A4266 !important;
  --accent: #1F4E79 !important;
  --cta: #1F4E79 !important;
  --cta-ink: #1F4E79 !important;
  --cta-fg: #ffffff !important;
  --cta-dim: #eef2f6 !important;
  /* SURFACES — leur absence ici est ce qui rendait les figures de l'article
     illisibles a l'impression : leur carte gardait le #1A1E24 du theme sombre
     pendant que le texte passait a l'encre noire. Une figure imprimee doit
     etre sur du blanc, comme le reste de la page. */
  --surface: #ffffff !important;
  --surface-2: #f7f7f8 !important;
  --surface-hover: #f0f0f2 !important;
  --ground: #ffffff !important;
  --frame: #ffffff !important;
  --border: #c9c9c9 !important;
  --border-strong: #b0b0b0 !important;
  --mark: #111 !important;
  --logo-mark: #111 !important;
  --logo-text: #111 !important;
  --on-accent: #111 !important;
  --danger: #111 !important;
  --warning: #111 !important;
  --success: #111 !important;
  --cyan-soft: transparent !important;
  --btn-bg: transparent !important;
  --btn-fg: #111 !important;
}

* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --- 2. Retirer ce qui n'a rien a faire sur du papier --------------------- */
.aurora, .grid-bg, .grain,
.nav, #nav,
footer, .foot, .foot-bottom,
.nshare, .nshare-top,
.theme-btn, .nav-login,
.skip-nav,
/* Elements injectes par js/nav.js : le tiroir mobile est en position fixed avec
   une bordure gauche, et il ressortait comme un filet vertical sur toute la
   marge droite de chaque page imprimee. */
.nav-drawer, .nav-drawer-head, .nav-drawer-close,
.nav-backdrop, .nav-burger {
  display: none !important;
}

/* --- 3. Le corps de l'article prend toute la page ------------------------- */
main, .block, .container, .post, article {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.block { padding: 0 !important; }

/* --- 4. Typographie : des tailles de lecture, pas des tailles d'ecran ----- */
body {
  font-size: 10.5pt !important;
  line-height: 1.5 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
}
p, li, td {
  font-size: 10.5pt !important;
  line-height: 1.45 !important;
  color: #111 !important;
  /* Justification + cesure : la page est en lang="fr", Chrome coupe donc
     correctement. C'est ce qui fait passer le rendu du registre « page web
     imprimee » au registre document. */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  orphans: 3;
  widows: 3;
}
p { margin: 0 0 6pt !important; }
/* Pas de justification sur les titres et les elements courts : ca creerait
   des blancs inter-mots disgracieux. */
h1, h2, h3, .byline, .art-badge, .eyebrow, figcaption, .lbl { text-align: left !important; hyphens: manual; }
h1 {
  font-family: var(--font-display) !important;
  font-size: 21pt !important;
  line-height: 1.18 !important;
  color: #000 !important;
  margin: 0 0 6pt !important;
}
h2 {
  font-family: var(--font-display) !important;
  font-size: 14pt !important;
  color: #000 !important;
  margin: 13pt 0 4pt !important;
  /* Pas de border-top ici : .post-sep separe deja les sections, les deux
     ensemble donnaient un double filet. */
}
h3 {
  font-family: var(--font-display) !important;
  font-size: 11.5pt !important;
  color: #000 !important;
  margin: 9pt 0 3pt !important;
}
.post-lead, .lede {
  font-size: 11.5pt !important;
  font-style: italic;
  color: #222 !important;
}
.byline {
  font-family: var(--font-display) !important;
  font-size: 9pt !important;
  color: #555 !important;
  margin-bottom: 14pt !important;
}
.art-badge, .eyebrow {
  font-family: var(--font-display) !important;
  font-size: 8pt !important;
  letter-spacing: .12em;
  color: #2E3D47 !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
strong, b { color: #000 !important; }
a { color: #111 !important; text-decoration: none !important; }

/* --- 5. Encadres : un filet suffit, pas de fond ni de coins arrondis ------ */
.quote-box, .post-highlight, .post-cta {
  background: none !important;
  border: 0 !important;
  border-left: 2.5pt solid #2E3D47 !important;
  border-radius: 0 !important;
  padding: 4pt 0 4pt 10pt !important;
  margin: 10pt 0 !important;
  page-break-inside: avoid;
}
.post-sep {
  border: 0 !important;
  border-top: 1px solid #ddd !important;
  height: 0 !important;
  margin: 9pt 0 !important;
  background: none !important;
}
.cols { display: block !important; }
/* .col-card NE porte PAS break-inside: avoid, volontairement. Ce sont des
   listes de plusieurs lignes : les rendre insecables laissait une demi-page
   blanche quand elles ne tenaient pas. Une liste coupee entre deux pages se
   lit sans probleme, une demi-page vide se remarque. On garde en revanche
   l'insecabilite sur les encadres COURTS (quote-box, post-highlight,
   post-cta), ou une coupure serait absurde. */
.col-card {
  break-inside: auto; page-break-inside: auto;
  background: none !important;
  border: 0 !important;
  border-left: 2.5pt solid #2E3D47 !important;
  border-radius: 0 !important;
  padding: 4pt 0 4pt 10pt !important;
  margin: 8pt 0 !important;
}
.col-card > h3, .col-card > h4 { break-after: avoid; }

/* L'encadre final heritait du centrage ecran : incoherent avec les autres
   encadres, tous cales a gauche sur un filet. */
.post-cta, .post-cta * { text-align: left !important; }
.post-cta .btn {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-weight: 700;
}
/* Un bouton imprime sans son adresse ne sert a rien : on l'ecrit.
   ⚠️ Le reset de position/width/height est indispensable : netaix-v2.css
   definit .btn-cta::after et .btn-primary::after comme un effet de brillance
   en position:absolute avec left:-120%. Sans reset, le texte genere heritait
   de ce positionnement et partait hors du cadre, donc invisible a l'impression. */
.post-cta a[href]::after,
.btn-cta::after, .btn-primary::after {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  transform: none !important;
  animation: none !important;
  content: "" ;
}
.post-cta a[href]::after {
  content: " (netaix.fr" attr(href) ")" !important;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 9pt;
  color: #555;
}
.post-cta a[href^="http"]::after { content: " (" attr(href) ")" !important; }

/* --- 6. Listes : compactes et lisibles ----------------------------------- */
ul, ol, .post-list { margin: 6pt 0 6pt 14pt !important; padding-left: 0 !important; }
li { margin-bottom: 3pt !important; }
.post-list li::before { color: #2E3D47 !important; }

/* --- 7. Schemas : jamais coupes en deux, jamais plus haut qu'une page ----- */
.nfig {
  page-break-inside: avoid;
  break-inside: avoid;
  margin: 10pt 0 !important;
}
/* Reduites par rapport a l'ecran : un schema insecable trop haut se fait
   repousser a la page suivante et laisse un grand blanc derriere lui.
   Plus il est compact, plus il tient dans l'espace restant. */
.nfig svg { max-height: 52mm; width: 92% !important; height: auto !important; }
.nfig figcaption {
  font-size: 8.5pt !important;
  color: #555 !important;
  border-top: 1px solid #ddd !important;
  padding-top: 4pt !important;
  margin-top: 5pt !important;
}
.nfig .s-txt, .nfig text { fill: #111 !important; }
.nfig .s-dim, .nfig .s-lbl { fill: #555 !important; }
.nfig .s-serif { fill: #222 !important; }
.nfig .s-bar { fill: #999 !important; opacity: 1 !important; }
.nfig .s-bar-on { fill: #2E3D47 !important; }
.nfig .s-rule { stroke: #c9c9c9 !important; }

/* --- 8. Sauts de page ----------------------------------------------------- */

/* break-after: avoid sur un titre ne garantit QUE ceci : le titre ne finit pas
   la page tout seul. Le navigateur le garde avec le bloc suivant, un seul.
   Resultat observe : titre + UN paragraphe en bas de page, puis un grand blanc,
   et la suite de la section a la page d'apres.
   Le correctif est de chainer : le premier paragraphe apres un titre refuse a
   son tour d'etre suivi d'une coupure. Le titre entraine donc au moins deux
   blocs avec lui, ou bascule entierement a la page suivante. */
h1, h2, h3 {
  page-break-after: avoid;
  break-after: avoid;
  page-break-inside: avoid;
}
h2 + p, h3 + p,
h2 + ul, h2 + ol, h3 + ul, h3 + ol,
h2 + .nfig, h3 + .nfig,
h2 + .quote-box, h3 + .quote-box {
  page-break-after: avoid;
  break-after: avoid;
}

/* Un filet de section ne doit jamais terminer une page : il annonce ce qui
   suit, il part donc avec. */
.post-sep {
  page-break-after: avoid;
  break-after: avoid;
}

/* Une liste ne se coupe pas apres son premier element. */
li:first-child { page-break-after: avoid; break-after: avoid; }

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

/* --- 9. Les sources restent utiles : on imprime les adresses -------------- */
.post-list a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 8pt;
  color: #555;
  word-break: break-all;
}

/* --- 10. Mention de provenance en fin de document ------------------------ */
article::after {
  content: "Article publié sur netaix.fr. Netaix installe l'IA dans les PME françaises, et la fait tourner.";
  display: block;
  margin-top: 16pt;
  padding-top: 6pt;
  border-top: 1px solid #ddd;
  font-family: var(--font-display);
  font-size: 8.5pt;
  color: #555;
}

/* ── Figures des articles (2026-08-31) ─────────────────────────────────────
   Retour Manu : le schema n'etait pas lisible a l'impression. Deux causes,
   la seconde moins evidente que la premiere :
     1. `--surface` n'etait pas redefini pour le papier, donc la carte gardait
        le fond sombre du theme sous un texte passe a l'encre noire ;
     2. rien n'empechait une figure d'etre coupee par un saut de page. */
.nfig {
  background: #fff !important;
  border: 1px solid #c9c9c9 !important;
  box-shadow: none !important;
  break-inside: avoid;
  page-break-inside: avoid;
}
.nfig svg text { fill: #111 !important; }
.nfig svg .sm   { fill: #333 !important; }
.nfig svg .lbl  { fill: #555 !important; }
.nfig figcaption { color: #555 !important; }