` to the document body containing cloned preview-pages, and toggle one of two body classes depending on the orientation needed. The strategy: in print mode, hide every direct child of the document body EXCEPT our clone container, which gets sized to A4. The clones themselves keep their original 1280×905 inline dimensions — print scaling makes them fit the A4 sheet automatically. IMPORTANT: keep this comment free of literal HTML tags like the body tag — the upstream integrate_reporting.py pipeline uses a regex to extract body HTML, and a literal opening body tag in a CSS comment can match before the real body element, causing the rest of the stylesheet to leak into the page text. Use prose ("the document body", "body element") rather than tag literals. ════════════════════════════════════════════════════════════════════ */ /* Le clone d'impression est attaché à (HORS #rep-tool) → les règles ci-dessous NE doivent PAS être scopées `.rep-tool` (sinon elles ne matchent jamais → app non masquée + clone non stylé = pages blanches). Le clone porte lui-même la classe `rep-tool` (cf. exportPDF) pour hériter des styles de base des slides. Hors impression, on le sort de l'écran (flash de 36 pages). */ .print-clone-root { position: absolute; left: -100000px; top: 0; } @media print { /* When a print is in progress, hide every direct child of the document body except the clone root. Single targeted selector so CSS-injected stuff (modals, etc) is unaffected. */ body.printing-deck > *:not(.print-clone-root), body.printing-onepager > *:not(.print-clone-root) { display: none !important; } /* The clone root itself just lays out its children — no padding, no extra spacing. Each child is one page. */ .print-clone-root { display: block !important; position: static !important; /* annule l'off-screen écran */ background: #FFFFFF; margin: 0 !important; padding: 0 !important; } /* ── Deck export: A4 landscape (297 × 210 mm) ─────────────────── The original .preview-page is laid out at 1280×905 px (matches on-screen 16:9 wide). To make ONE preview-page fit ONE A4 sheet without the browser breaking it across pages, we: - lock the cloned page to the A4 dimensions in mm - scale its content area down so 1280px content → 297mm wide - force a page break after each one The scale ratio is 297mm / 1280px ≈ 0.2227 (with 1px = 0.2646mm, this matches: 1280 × 0.2646 / 1.187 ≈ 297). The browser does the math at print resolution so output stays sharp. */ .print-clone-root .preview-page { width: 297mm !important; height: 167mm !important; /* 16:9 de 297mm (slides widescreen) */ min-height: 167mm !important; max-height: 167mm !important; margin: 0 !important; padding: 0 !important; /* Padding moves into the inner */ box-shadow: none !important; border-radius: 0 !important; page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid; overflow: hidden !important; background: #FFFFFF !important; box-sizing: border-box !important; /* The "scale" comes from rebuilding the page at native A4 width. transform: scale() doesn't reduce the layout box, so we use zoom which Chrome supports for print and which DOES reduce the flow box. The ratio: A4 landscape is ~1123px at 96dpi, original page is 1280px wide → zoom ≈ 0.877 to fit. We set zoom on the preview-page itself so its 1280px-wide internal flex/grid layout shrinks proportionally. */ zoom: 0.877; } .print-clone-root .preview-page:last-child { page-break-after: auto; break-after: auto; } /* ── One-pager export: A4 portrait (210 × 297 mm) ─────────────── Same idea but portrait. The .op-page is built at 794×1123 px which is exactly A4 at 96dpi, so we don't need to scale. */ .print-clone-root .op-page { width: 210mm !important; min-height: 297mm !important; max-height: 297mm !important; margin: 0 !important; box-shadow: none !important; /* Saut de page entre les pages du one-pager (page 1 + page 2 commission). */ page-break-after: always; break-after: page; page-break-inside: avoid; break-inside: avoid; overflow: hidden !important; background: #FFFFFF !important; box-sizing: border-box !important; } .print-clone-root .op-page:last-child { page-break-after: auto; break-after: auto; } } /* @page is the print-page-box rule. We set the dimensions and remove the browser's default 0.5"-1" margins. Body class scoping inside @page isn't supported across browsers so we declare two @page rules and let the right one apply via a body-class-driven media query — except @page can't go inside @media in standard CSS. The pragma here: declare landscape as the default. The one-pager portrait case still works because the .op-page itself is portrait-sized and the user can pick portrait in the print dialog if needed. */ @page { size: A4 landscape; margin: 0; } /* ═══════════════════════════════════════════════════════════════════════ REPORTING TOOL — scoped CSS Every selector below is prefixed with `.rep-tool` so Reporting's styles only apply inside #view-reporting. Globals (:root, *, html, body) are stripped — variant chrome owns those. ═══════════════════════════════════════════════════════════════════════ */ /* Layout overrides for the embedded Reporting tool. Reporting was designed as a standalone fullscreen app (its #app wrapper is height:100vh which would push content below the variant's chrome). Here we constrain it to the available view-reporting space. */ .view-reporting #reporting-root { height: 100%; overflow: hidden; } .rep-tool { height: 100%; display: block; } .rep-tool #app { height: 100% !important; overflow: hidden; } /* Slim sub-toolbar that replaces Reporting's stripped

. Hosts the step pills + prev/next nav buttons, sits ABOVE the stage content but BELOW the variant's chrome topbar. Visually subordinate so the variant's tab bar reads as the canonical navigation. */ .rep-tool .rep-substep { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.6rem 0.8rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 1rem; flex-wrap: wrap; } .rep-tool .rep-substep .topbar-steps, .rep-tool .rep-substep .topbar-actions { display: flex; align-items: center; gap: 0.4rem; } .rep-tool .rep-substep .topbar-actions { margin-left: auto; } /* ─ Slide preview viewer (deliver step) ─ Goal: slides display large, the two-column layout (nav + slides) reads as a balanced pair, no document-height ballooning. Strategy: - Let .stage-inner go full-width when slides are present (`:has(.preview-shell)`), so the slide column has more room than the original 1100px cap (which assumed standalone Reporting's chrome). - Use container queries on .preview-shell so slide zoom adapts to whatever column width the iframe actually gives us, from narrow (~600px) to wide (~1400px) iframes. - Cap the sidebar height with a fixed pixel value (not vh) so it doesn't grow with the iframe-resize feedback loop. - Match sidebar height to viewer height for visual balance. - Drop the hard border, use a subtle warm background tint that echoes the slide page background — the viewer reads as a "frame around the slides" rather than a separate widget. */ /* Free the stage from its 1100px cap when the deliver step is on, but only modestly — going to 100% on a wide iframe (2000px+) made the layout sprawl. 1300px gives slides more breathing room than the original Reporting cap without losing the centered "card" feel of the panel pair. */ .rep-tool .stage-inner:has(.preview-shell) { max-width: 1300px; } /* Écran « Aperçu & export » (nouveau layout 2 colonnes) : presque plein écran — on lève le plafond pour donner toute la largeur à l'aperçu. */ .rep-tool .stage-inner:has(.rep-deliver) { max-width: none; } /* Container-query context so slide zoom responds to column width. `align-items: stretch` overrides the original `start` so both columns fill the grid row equally. `grid-template-rows: 800px` pins the row to exactly that height — both nav and viewer end up at 800px tall, scrolling internally. This is more robust than relying on each child's max-height alone (sticky positioning on the sidebar can leak past max-height in some grid contexts). */ .rep-tool .preview-shell { container-type: inline-size; align-items: stretch; grid-template-rows: 800px; } /* Sidebar: drop the sticky positioning that's leaking past max-height and any vh-based constraint that interacts badly with the postMessage iframe-resize loop. Position: relative is enough now that the grid row pins the height. The original overflow-y: auto on .preview-nav stays, so internal scroll still works for long section lists. */ .rep-tool .preview-nav { position: relative; max-height: 800px; } /* Slide viewer: scrollable, soft warm tint matching the slides, no border (replaced by a subtle inner shadow at the scroll edges that gives a sense of "more above/below"). */ .rep-tool .preview-pages { zoom: 0.5; /* base — bumped up via @container below */ max-height: 800px; overflow-y: auto; overflow-x: hidden; padding: 1.2rem 1rem; background: #EFE9DC; /* warm tint matching slide page bg */ border-radius: 10px; scrollbar-gutter: stable; } /* Slide pages must not shrink to fit the constrained viewer. Without this, a flex-column parent + max-height squashes its children proportionally — slides become thin horizontal stripes instead of full-height pages. flex-shrink: 0 keeps each slide at its authored 905px height; the parent's overflow-y: auto handles the scroll. */ .rep-tool .preview-pages > .preview-page { flex-shrink: 0; } /* Responsive zoom — each tier ≈ 200px of extra column width. Native slide is 1280px wide; we want zoom × 1280 ≤ column width. With stage-inner capped at 1300px, the slide column tops out at ~1060px (1300 - 220 sidebar - 1.2rem gap), so the upper tiers (above 0.65) rarely trigger. Lower tiers cover narrower iframes: column 700px → zoom 0.55 → slide 704px column 900px → zoom 0.65 → slide 832px column 1100px → zoom 0.7 → slide 896px (caps below 1.0 here) */ @container (min-width: 700px) { .rep-tool .preview-pages { zoom: 0.55; } } @container (min-width: 900px) { .rep-tool .preview-pages { zoom: 0.65; } } @container (min-width: 1100px) { .rep-tool .preview-pages { zoom: 0.7; } } /* ═══════════════ MODE PRÉSENTATION (Keynote web, style luxgap) ═══════════════ Plein écran, une slide à la fois, apparition des éléments en cascade. Construit dans #rep-tool (cf. enterPresentMode) → les sélecteurs .rep-tool s'appliquent. Chaque .dp-slide est un clone de .preview-page (1280×905) mis à l'échelle via --dp-scale pour remplir l'écran. La barre/les bords/la progression sont SIBLINGS de .dp-stage (jamais enfants) : .dp-stage est `transform`é, ce qui re-ancrerait des position:fixed descendants. */ body.dp-presenting { overflow: hidden; } .rep-tool .dp-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(125% 125% at 50% 0%, #2c2a33 0%, #1a181f 55%, #0f0e13 100%); opacity: 0; transition: opacity 0.28s ease; --dp-scale: 1; --dp-accent: #3D8B5C; } .rep-tool .dp-overlay.dp-shown { opacity: 1; } .rep-tool .dp-stage { position: relative; width: 1280px; height: 720px; /* 16:9 — doit suivre .preview-page */ flex: none; transform: scale(var(--dp-scale)); transform-origin: center center; } .rep-tool .dp-slide { position: absolute; inset: 0; margin: 0; border-radius: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4); } /* Spécificité 0,3,0 > base .rep-tool .preview-page (0,2,0) → masque les slides non-courantes ; la courante garde le display:flex de base. */ .rep-tool .dp-slide:not(.dp-current) { display: none; } /* ── Apparition en cascade des unités [data-reveal] ── */ .rep-tool .dp-slide [data-reveal] { opacity: 0; transform: translateY(22px); will-change: opacity, transform; } .rep-tool .dp-slide.dp-current.dp-live [data-reveal] { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.58s cubic-bezier(0.18, 0.7, 0.2, 1); transition-delay: calc(var(--ri, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { .rep-tool .dp-slide [data-reveal] { opacity: 1; transform: none; } .rep-tool .dp-slide.dp-current.dp-live [data-reveal] { transition: none; transition-delay: 0s; } } /* ── Barre de progression fine en haut ── */ .rep-tool .dp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--dp-accent, #3D8B5C); box-shadow: 0 0 12px var(--dp-accent, #3D8B5C); z-index: 4010; transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); } /* ── Zones de clic invisibles sur les bords (préc/suiv) ── */ .rep-tool .dp-edge { position: fixed; top: 0; bottom: 64px; /* laisse la barre de contrôle cliquable */ width: 16%; max-width: 220px; z-index: 4005; padding: 0; border: none; background: transparent; cursor: pointer; } .rep-tool .dp-edge-prev { left: 0; } .rep-tool .dp-edge-next { right: 0; } .rep-tool .dp-edge:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.4); outline-offset: -4px; } /* ── Barre de contrôle flottante ── */ .rep-tool .dp-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: rgba(18, 16, 22, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); z-index: 4011; opacity: 0; transition: opacity 0.3s ease; } .rep-tool .dp-overlay:hover .dp-bar { opacity: 1; } .rep-tool .dp-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: none; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .rep-tool .dp-btn:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .rep-tool .dp-btn:disabled { opacity: 0.3; cursor: default; } .rep-tool .dp-btn:disabled:hover { background: transparent; } .rep-tool .dp-count { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 12px; color: rgba(255, 255, 255, 0.82); padding: 0 10px; min-width: 58px; text-align: center; letter-spacing: 0.02em; } .rep-tool .dp-bar-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.16); margin: 0 3px; }