/* =============================================================================
   DRN Industriel — print sheet. Loaded with media="print", so nothing in here can
   reach the screen and nothing in site.css needs a print branch. Isolated by file.

   Goal: the same HTML, rendered as a clean branded line card a rep can hand over.
   Ink discipline: white ground, black text, no photographic fills, no video.
   ========================================================================== */

@page { size: A4 portrait; margin: 14mm 12mm 16mm; }

html, body {
  background: #fff !important;
  color: #111 !important;
  font-size: 9.5pt;
  line-height: 1.35;
}

/* ==========================================================================
   INK IS DARK BY DEFAULT, not only where a rule below remembers to say so.

   `html, body` set the ink and every element that chose its own colour kept
   it. That is correct for the generated component set, whose dark grounds are
   whitened and whose descendants are re-inked a hundred lines down — and it
   was never true for the three carried pages or the funnel, which have their
   own markup and their own dark panels. A background does not print; the ink
   chosen against it does. Measured under print media: the 404's lede and its
   whole link list, the contact page's telephone and fax rows, and the line
   card's supplier names and capability lists all came out between 1.04:1 and
   1.14:1 against the paper. That is not low contrast, it is the same colour.

   The line card is the page most likely to be printed on this entire site.

   DELIBERATELY THE WEAKEST SELECTOR THERE IS. `body *` is one element-level
   token, so every class-based rule in this file still beats it: .phero__lede
   keeps #333, .product__brand keeps #555, and anything added later that wants
   a grey simply says so. This only catches what nothing else spoke for.
   ========================================================================== */
body * {
  color: #111 !important;
}

/* ---- everything that is chrome, navigation or interaction disappears ---- */
.site-head, .site-foot, .skip,
.phero__media, .lc-bar, .lc-scrim, .filters, .lc-tools,
.supplier__act, .supplier__more, .lc-empty, .lc-toggle, .lc-print,
video { display: none !important; }

/* ---- masthead: brand once, at the top of page 1 ---- */
.phero {
  padding: 0 0 6mm !important;
  border-bottom: 1.2pt solid #111;
  margin-bottom: 6mm;
}
.phero__in { padding: 0 !important; max-width: none !important; }
.phero::before {
  content: "DRN INDUSTRIEL";
  display: block;
  font-size: 8pt; letter-spacing: .22em; font-weight: 700; color: #111;
  margin-bottom: 2mm;
}
.phero .eyebrow { display: none !important; }
.phero__title { font-size: 20pt !important; color: #111 !important; margin: 0 0 1.5mm !important; }
.phero__lede  { font-size: 9.5pt !important; color: #333 !important; max-width: none !important; }

/* ---- layout collapses to a dense two-column list ---- */
.shell, .shell-in { padding: 0 !important; max-width: none !important; }
.lc { display: block !important; }
.linecard { display: block !important; }
.section { padding: 0 !important; border: 0 !important; margin: 0 0 4mm !important; }
.section h2 {
  font-size: 11pt !important; color: #111 !important;
  margin: 0 0 2mm !important; padding-bottom: 1mm;
  border-bottom: .6pt solid #999;
  break-after: avoid;
}
.section h2 .count { display: none !important; }

/* ---- one supplier = one compact row, never split across a page ---- */
.supplier {
  display: grid !important;
  grid-template-columns: 26mm 1fr;
  gap: 4mm;
  padding: 2mm 0 !important;
  border: 0 !important;
  border-bottom: .4pt solid #ddd !important;
  break-inside: avoid;
  page-break-inside: avoid;
}
.supplier::before { display: none !important; }
.supplier__shot { display: none !important; }        /* photos cost ink and add nothing here */

.supplier__logobox { width: 26mm !important; height: 10mm !important; }
.supplier__logo {
  width: auto !important; max-width: 100% !important; max-height: 10mm !important;
  filter: none !important;                            /* the marks are dark-on-white already */
  opacity: 1 !important;
}
.supplier__name {
  font-size: 10pt !important; font-weight: 700 !important;
  color: #111 !important; margin: 0 0 1mm !important;
}
.supplier__list { padding-left: 4mm !important; gap: 0 !important; }
/* the screen view caps the list at three; print shows every capability */
.supplier__list li {
  display: list-item !important;
  font-size: 8.5pt !important; color: #222 !important; line-height: 1.3 !important;
}

/* ---- products view, when that is the active tab ---- */
.productgrid { display: block !important; columns: 2; column-gap: 8mm; }
.product { break-inside: avoid; padding: 1mm 0 !important; border-bottom: .3pt solid #eee !important; }
.product__name  { font-size: 8.5pt !important; color: #111 !important; }
.product__brand { font-size: 7pt !important; color: #555 !important; }
.product__brand img { filter: none !important; opacity: 1 !important; height: 3.5mm !important; }

/* hidden results stay hidden: the sheet prints what the user filtered to */
[hidden] { display: none !important; }

/* ---- footer block on the last page ---- */
.shell-in::after {
  content: "DRN Industriel · 13060, rue Brault, Mirabel (Quebec) J7J 0W4 · (450) 434-4000 · info@drnindustriel.com · drnindustriel.com";
  display: block;
  margin-top: 6mm; padding-top: 2mm;
  border-top: .6pt solid #999;
  font-size: 7.5pt; color: #444;
}

/* =============================================================================
   THE GENERATED PAGES' OWN VOCABULARY.
   Everything above this line was written for the legacy markup and reaches the
   126 generated pages only through `html, body`. Those pages colour themselves
   from the model layer's tokens, so overriding two elements left every heading
   at rgb(244,244,244) on the white ground this sheet had just set.

   THE RE-PRICING IS NOT HERE. It was, in a `:root` block, and HX21 reported 1,764
   defects for it — correctly. This sheet sits BENEATH the model layer, and that
   law builds its primitive set from whatever the sheets beneath declare, so
   declaring `--ink` here turned `--ink` into a primitive and every component
   reading it into a leak. The print model lives in base/_models.scss, beside the
   screen one, which is also where it belongs: the model layer owns colour.
   ========================================================================== */

/* The bands' own chrome: a reveal that never runs, a glow that costs toner, and
   the decorative radial each band draws above itself. */
[data-primitive='surface'] { opacity: 1 !important; transform: none !important; }
[data-primitive='surface']::before,
[data-primitive='surface']::after { display: none !important; }

/* The burger panel and the funnel are interaction, not content. The panel is a
   popover so it is already out of flow; the dialog is hidden unless open, and an
   open one should not follow the reader onto paper either. */
.panel, dialog, .btn-arrow { display: none !important; }

/* A link's destination is worth having on paper, where it cannot be clicked —
   but only for real destinations, not for in-page or javascript hrefs, and not
   in the breadcrumb, where the trail already states the path and the appended
   urls turned it into "Accueil(/fr/) / Produits(/fr/produits/) / …". */
main a[href^='http']:not(.crumbs a)::after,
main a[href^='/']:not(.crumbs a)::after {
  content: ' (' attr(href) ')';
  font-size: 8pt;
  color: #555;
  word-break: break-all;
}

/* ==========================================================================
   THE FILLS THE PRINT MODEL CANNOT REACH.
   `base/_models.scss` re-prices every MODEL token under `@media print` —
   --ink to #111, --ground-set and --plate to #fff, --accent to #111 — and
   that is the right home for colour. But site.shared.css declares its own
   `--c-*` palette BENEATH the model layer, where no model can re-price it,
   so anything painted from one keeps its screen value on paper.

   MEASURED under print emulation on /fr/, which nothing had ever done
   (contrast.verify runs under `screen`, where this site is light ink on a
   near-black ground, so the whole question was invisible to it):

     #111 on #17330f  1.36:1   a 794x320 band, with the shop's phone number
                               inside it, against a 4.5:1 floor
     #539435 pills            two primary buttons
     #111 pills               seven card calls-to-action

   The band is the worse of the two: a reader gets an unreadable rectangle,
   and the printer lays down a full-width block of toner to produce it.
   ========================================================================== */
main [data-primitive='surface'],
main .ask,
/* The line card's supplier card is the one dark ground on the site that survived into print —
   rgb(21,21,25), measured as the only one left across every page shape. It belongs to the carried
   markup rather than the generated component set, so none of the selectors above reached it, and
   the dark-ink default above then printed #111 on near-black at 1.04:1. The line card is the page
   most likely to be put on paper. A ground and the ink on it are one decision, and this is the
   ground half. */
.supplier,
.btn, .btn--primary, .btn--lg, .card__cta {
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* THE INK HAS TO MOVE WITH THE GROUND, and the descendants are the ink.
   Whitening the band alone re-coloured the band element and nothing inside
   it: the CTA's own heading and paragraph are #e6f3dd, a pale green chosen
   against #17330f where it measures 12.4:1, and on the white I had just put
   underneath them they measured 1.15:1. Two failures became five, and the
   new ones were mine. A ground and the ink on it are one decision. */
main [data-primitive='surface'], main [data-primitive='surface'] *,
main .ask, main .ask *,
.btn, .btn *, .btn--primary, .btn--lg, .card__cta, .card__cta * {
  color: #111 !important;
}

/* A control with its fill taken away is just a line of text, so give it an
   edge — on paper it still has to read as the thing you were meant to act on. */
.btn, .btn--primary, .btn--lg, .card__cta {
  border: 0.8pt solid #555 !important;
  padding: 2pt 6pt !important;
}

/* THE SUPPLIER MARKS, which print.css exists for more than anything else: its
   stated goal is "a clean branded line card a rep can hand over", and a line
   card is a page of other people's logos.

   `_cards.scss` normalises each one with `grayscale(1) brightness(0)
   invert(1)`. brightness(0) drives every opaque pixel to black and invert(1)
   returns it to white, so each mark becomes a white silhouette — exactly
   right on the near-black screen, and on white paper an invisible rectangle.
   Measured: 36 of 36 marks on /fr/ still carried the filter under print.

   Dropping `invert(1)` lands the same normalisation on BLACK. It is the same
   one-ink treatment, pointed at the other ground. */
.card__media img { filter: grayscale(1) brightness(0) !important; }