/* Non-visual-design accessibility addition explicitly authorized by the
   locked package's own accessibility_states.focus_states note: "add a
   consistent, visible focus-visible outline ... to links, buttons, and
   form controls sitewide ... this closes a real accessibility gap without
   changing the approved visual design." Values are copied exactly from
   the package's own existing button rule (.pp-btn:focus-visible in
   theme.css: outline 3px solid var(--pp-green-500), offset 3px) -- no new
   value invented, just extended to the elements the package's own rule
   did not yet cover. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--pp-green-500);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------
   Non-visual Gutenberg-integration additions (corrective pass).
   Core blocks (Group, Image) cannot reconstruct an arbitrary hand-authored
   inline `style` attribute from their own declared attributes/supports --
   doing so corrupts the block editor's own validity check ("Block contains
   unexpected or invalid content"). Each rule below moves an approved
   inline style to an equivalent CSS class, using the exact same values the
   approved static source already specifies at that exact location -- never
   a new or estimated value. See reports/CORRECTIVE_BUILD_REPORT.md.
   -------------------------------------------------------------------- */

/* Generic fallback for any .pp-placeholder img the approved design doesn't
   already give a more specific object-fit rule to (theme.css only defines
   `.pp-placeholder svg`, not a generic `.pp-placeholder img`) -- exact
   values copied from the approved static source's own inline style. More
   specific existing theme.css rules (e.g. .pp-hero__bg-image .pp-placeholder img)
   still win by CSS specificity and are unaffected. */
.pp-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Same fix as .pp-placeholder img above, for the smaller set of locations
   using the approved role="img" pattern directly (no .pp-placeholder
   wrapper) -- see pp_img_role() in project-docs/content-generators/helpers.php. */
.pp-nm-explain__img-area img,
.pp-nm-product-card__img img,
.pp-rp-explain__img-area img,
.pp-cb-compare-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* CORRECTIVE-PASS FIX (2026-08-22 forensic re-audit, PAL-005): the approved
   static source has <img> as a DIRECT child of these wrapper divs, but a
   genuine core/image block always adds one intermediate
   <figure class="wp-block-image size-full"> around the <img> (required for
   Gutenberg validity -- see pp_img_role() in helpers.php). Core's own
   block-library CSS (`.wp-block-image{display:flex;flex-direction:column;
   flex-grow:1;…}`) does not give that figure a height, so the `img{height:
   100%}` rule directly above has nothing definite to resolve 100% against
   and the image falls back to its own intrinsic height instead of filling
   the wrapper -- inflating page height (confirmed root cause of the
   reparation-palettes-en-bois / traitement-nimp15 height drift). Stretching
   the figure itself to the wrapper's own height (a definite size here,
   since each wrapper is a stretched CSS Grid/Flex item per theme.css) and
   removing WordPress' default figure margin restores the approved
   fill-the-area rendering -- no new visual value, just completing the same
   width/height/object-fit chain the rule above already declares. */
.pp-nm-explain__img-area figure,
.pp-nm-product-card__img figure,
.pp-rp-explain__img-area figure,
.pp-cb-compare-card__img figure {
	margin: 0;
	height: 100%;
	width: 100%;
	display: block;
}

/* Blog page header block -- approved inline style was
   style="border-bottom:1px solid var(--pp-cream-200);" on this exact element. */
.pp-blog-header {
	border-bottom: 1px solid var(--pp-cream-200);
}

/* Blog page header intro paragraph -- approved inline style was
   style="color:var(--pp-gray-600);" on this exact element. */
.pp-text-muted {
	color: var(--pp-gray-600);
}

/* --------------------------------------------------------------------
   Corrective max-width restoration -- proven WordPress/Gutenberg
   rendering conflict, not fixable by further changing block markup.

   theme.css itself (lines 5-23) neutralizes WordPress' own generated
   width constraints with two !important resets: one directly on
   `.wp-block-group`, and a second, higher-specificity rule that strips
   max-width from any direct child of an `.is-layout-flow` /
   `.is-layout-constrained` ancestor:
     :where(body .is-layout-flow) > :not(.alignleft):not(.alignright):not(.alignfull) { max-width: none !important; }
   Every approved section wrapper here is authored as a genuine Gutenberg
   Group block, which must carry `.wp-block-group` and `.is-layout-flow`
   as part of its own block support -- so this pre-existing theme reset
   also neutralizes the approved package's own width-constraining classes
   below (confirmed via live computed-style inspection: .pp-hero__content
   and .pp-container both compute max-width:none instead of their approved
   values). Restoring correct Gutenberg output cannot solve this: the
   conflicting rule targets `.wp-block-group` itself, which every Group
   block must carry.

   Each value below is copied byte-for-byte from its own existing
   theme.css declaration (no value invented). Each selector repeats its
   own class 3x on the same element to reach the (0,3,0) specificity of
   the ":not() x3" reset clause above, so this rule wins by specificity
   (not merely by source order) against that clause too. */
.pp-container.pp-container.pp-container {
	max-width: var(--pp-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-container--wide.pp-container--wide.pp-container--wide {
	max-width: 1360px !important;
}

/* WordPress's global Group reset also zeroes the approved component
 * auto-gutters. Restore the package's existing centering behavior for the
 * named panels/wide wrappers that are real Gutenberg Group blocks. */
.pp-trust-float__panel.pp-trust-float__panel.pp-trust-float__panel,
.pp-dim-panel.pp-dim-panel.pp-dim-panel,
.pp-home-contact__panel.pp-home-contact__panel.pp-home-contact__panel,
.pp-pn-cta-banner.pp-pn-cta-banner.pp-pn-cta-banner,
.pp-pr-explain-panel.pp-pr-explain-panel.pp-pr-explain-panel,
.pp-pr-cta-banner.pp-pr-cta-banner.pp-pr-cta-banner,
.pp-rp-cta-banner.pp-rp-cta-banner.pp-rp-cta-banner,
.pp-nm-wide.pp-nm-wide.pp-nm-wide,
.pp-cb-wide.pp-cb-wide.pp-cb-wide,
.pp-ct-reassure-inner.pp-ct-reassure-inner.pp-ct-reassure-inner {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* These declarations are copied from the locked theme rules; the !important
 * is needed only because the core Group reset above is itself !important. */
.pp-hero__body.pp-hero__body.pp-hero__body {
	padding-left: max(48px, 6vw) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-dim-panel.pp-dim-panel.pp-dim-panel {
	padding: clamp(24px, 3vw, 36px) !important;
}
.pp-home-contact__panel.pp-home-contact__panel.pp-home-contact__panel {
	/* the approved panel has no intrinsic padding; only its auto gutter was reset */
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.pp-pn-cta-banner.pp-pn-cta-banner.pp-pn-cta-banner {
	padding: clamp(28px, 3.5vw, 44px) clamp(28px, 4vw, 52px) !important;
}
.pp-pr-cta-banner.pp-pr-cta-banner.pp-pr-cta-banner {
	padding: clamp(28px, 3.5vw, 44px) clamp(32px, 5vw, 60px) !important;
}

@media (max-width: 767px) {
	.pp-hero__body.pp-hero__body.pp-hero__body {
		padding: 32px var(--pp-gutter) 80px !important;
	}
}
.pp-section-header.pp-section-header.pp-section-header p {
	max-width: 640px !important;
}
.pp-hero__content.pp-hero__content.pp-hero__content {
	max-width: 560px !important;
}
.pp-hero__lead.pp-hero__lead.pp-hero__lead {
	max-width: 520px !important;
}

/* --------------------------------------------------------------------
   Site-wide horizontal-padding restoration (spacing-correction pass,
   2026-08-22). Same root cause as the container/panel fix above: every
   approved component wrapper is implemented as a genuine Gutenberg Group
   block, which must carry `.wp-block-group` as part of its own block
   support. theme.css's own top-of-file WordPress-compatibility reset
   (`.wp-block-group { padding-left:0 !important; padding-right:0
   !important; }`, lines 6-15) is written for page/section-level wrappers
   but matches every Group block indiscriminately, so it also strips the
   left/right padding half of every card/panel/strip's own `padding: T R`
   (or `T R B` / `T R B L`) shorthand -- only the top/bottom component
   survives, because the reset never touches padding-top/padding-bottom.
   The visible result is exactly the owner-reported defect: content with
   correct vertical rhythm but flush against the left/right edge of its
   card, panel, or strip.

   This was proven systemically: every class below is a real theme.css
   selector whose own (non-!important) `padding`/`padding-left`/
   `padding-right` declaration resolves to a non-zero left or right value,
   cross-referenced against the live-rendered HTML of all 10 pages to
   confirm the element actually carries `.wp-block-group` (i.e. is a real
   victim, not merely a same-named coincidence). Classes whose own
   left/right padding already resolves to 0 (e.g. `.pp-breadcrumb`,
   `.pp-trust-float`) are correctly unaffected and are not listed.

   Each value is copied byte-for-byte from its own existing theme.css
   declaration at the same class (no value invented, no new visual
   motif) -- same restoration pattern and specificity technique
   (`.foo.foo.foo` to reach (0,3,0) against the reset's :not()x3 clause,
   plus !important to beat the reset's own !important) already
   established above for containers/panels. Structural fix is not
   possible here: the reset targets `.wp-block-group` itself, which every
   approved wrapper must carry to remain valid Gutenberg block markup. */
.pp-benefit-item.pp-benefit-item.pp-benefit-item {
	padding-left: 18px !important;
	padding-right: 18px !important;
}
.pp-cb-adv-col.pp-cb-adv-col.pp-cb-adv-col {
	padding-left: clamp(16px, 2vw, 24px) !important;
	padding-right: clamp(16px, 2vw, 24px) !important;
}
.pp-cb-compare-card__body.pp-cb-compare-card__body.pp-cb-compare-card__body {
	padding-left: clamp(18px, 2.2vw, 28px) !important;
	padding-right: clamp(18px, 2.2vw, 28px) !important;
}
.pp-cb-cta-banner.pp-cb-cta-banner.pp-cb-cta-banner {
	padding-left: clamp(28px, 3.5vw, 48px) !important;
	padding-right: clamp(28px, 3.5vw, 48px) !important;
}
.pp-cb-proc-arrow.pp-cb-proc-arrow.pp-cb-proc-arrow {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
.pp-cb-proc-card.pp-cb-proc-card.pp-cb-proc-card {
	padding-left: clamp(18px, 2vw, 24px) !important;
	padding-right: clamp(18px, 2vw, 24px) !important;
}
.pp-cb-use-card.pp-cb-use-card.pp-cb-use-card {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
.pp-ct-advice-block.pp-ct-advice-block.pp-ct-advice-block {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
.pp-ct-reassure-item.pp-ct-reassure-item.pp-ct-reassure-item {
	padding-left: clamp(12px, 1.8vw, 22px) !important;
	padding-right: clamp(12px, 1.8vw, 22px) !important;
}
.pp-ct-reassure-strip.pp-ct-reassure-strip.pp-ct-reassure-strip {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-dim-page-card__body.pp-dim-page-card__body.pp-dim-page-card__body {
	padding-left: 22px !important;
	padding-right: 22px !important;
}
.pp-dim-wrap.pp-dim-wrap.pp-dim-wrap {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-guide-panel__item.pp-guide-panel__item.pp-guide-panel__item {
	padding-left: 14px !important;
	padding-right: 14px !important;
}
.pp-home-contact.pp-home-contact.pp-home-contact {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-home-contact__form-col.pp-home-contact__form-col.pp-home-contact__form-col {
	padding-left: clamp(18px, 2.4vw, 28px) !important;
	padding-right: clamp(18px, 2.4vw, 28px) !important;
}
.pp-home-contact__info.pp-home-contact__info.pp-home-contact__info {
	padding-left: clamp(18px, 2.4vw, 28px) !important;
	padding-right: clamp(18px, 2.4vw, 28px) !important;
}
.pp-home-contact__intro.pp-home-contact__intro.pp-home-contact__intro {
	padding-left: clamp(18px, 2.4vw, 28px) !important;
	padding-right: clamp(18px, 2.4vw, 28px) !important;
}
.pp-nm-cta-banner.pp-nm-cta-banner.pp-nm-cta-banner {
	padding-left: clamp(24px, 3vw, 40px) !important;
	padding-right: clamp(24px, 3vw, 40px) !important;
}
.pp-nm-hero__overlay-badge.pp-nm-hero__overlay-badge.pp-nm-hero__overlay-badge {
	padding-left: 12px !important;
	padding-right: 12px !important;
}
.pp-nm-proc-step.pp-nm-proc-step.pp-nm-proc-step {
	padding-left: 4px !important;
	padding-right: 4px !important;
}
.pp-nm-product-card__body.pp-nm-product-card__body.pp-nm-product-card__body {
	padding-left: 14px !important;
	padding-right: 14px !important;
}
.pp-nm-reassure-item.pp-nm-reassure-item.pp-nm-reassure-item {
	padding-left: clamp(10px, 1.5vw, 18px) !important;
	padding-right: clamp(10px, 1.5vw, 18px) !important;
}
.pp-nm-why-card.pp-nm-why-card.pp-nm-why-card {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
.pp-nm-why-inner.pp-nm-why-inner.pp-nm-why-inner {
	padding-left: clamp(24px, 3vw, 36px) !important;
	padding-right: clamp(24px, 3vw, 36px) !important;
}
.pp-pd-contact__cta-inner.pp-pd-contact__cta-inner.pp-pd-contact__cta-inner {
	padding-left: clamp(24px, 3vw, 36px) !important;
	padding-right: clamp(24px, 3vw, 36px) !important;
}
.pp-pn-app-card__body.pp-pn-app-card__body.pp-pn-app-card__body {
	padding-left: 18px !important;
	padding-right: 18px !important;
}
.pp-pn-cta-wrap.pp-pn-cta-wrap.pp-pn-cta-wrap {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-pn-dim-card.pp-pn-dim-card.pp-pn-dim-card {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
.pp-pn-dim-panel.pp-pn-dim-panel.pp-pn-dim-panel {
	padding-left: clamp(16px, 2vw, 22px) !important;
	padding-right: clamp(16px, 2vw, 22px) !important;
}
.pp-pn-sector.pp-pn-sector.pp-pn-sector {
	padding-left: 14px !important;
	padding-right: 14px !important;
}
.pp-pr-adv-card.pp-pr-adv-card.pp-pr-adv-card {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
.pp-pr-arrow.pp-pr-arrow.pp-pr-arrow {
	padding-left: 10px !important;
	padding-right: 10px !important;
}
.pp-pr-audience-item.pp-pr-audience-item.pp-pr-audience-item {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
.pp-pr-compare-card__header.pp-pr-compare-card__header.pp-pr-compare-card__header {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
.pp-pr-compare-row.pp-pr-compare-row.pp-pr-compare-row {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
.pp-pr-compare-wrap.pp-pr-compare-wrap.pp-pr-compare-wrap {
	padding-left: clamp(20px, 2.5vw, 28px) !important;
	padding-right: clamp(20px, 2.5vw, 28px) !important;
}
.pp-pr-cta-wrap.pp-pr-cta-wrap.pp-pr-cta-wrap {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-pr-explain-body.pp-pr-explain-body.pp-pr-explain-body {
	padding-left: clamp(24px, 3.5vw, 44px) !important;
	padding-right: clamp(24px, 3.5vw, 44px) !important;
}
.pp-pr-explain-float.pp-pr-explain-float.pp-pr-explain-float {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-pr-step.pp-pr-step.pp-pr-step {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
.pp-responsible.pp-responsible.pp-responsible {
	padding-left: clamp(28px, 4vw, 48px) !important;
	padding-right: clamp(28px, 4vw, 48px) !important;
}
.pp-rp-benefit-card.pp-rp-benefit-card.pp-rp-benefit-card {
	padding-left: 14px !important;
	padding-right: 14px !important;
}
.pp-rp-benefits-section.pp-rp-benefits-section.pp-rp-benefits-section {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-rp-explain-section.pp-rp-explain-section.pp-rp-explain-section {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-rp-explain__card.pp-rp-explain__card.pp-rp-explain__card {
	padding-left: 18px !important;
	padding-right: 18px !important;
}
.pp-rp-impact__col.pp-rp-impact__col.pp-rp-impact__col {
	padding-left: clamp(28px, 3.5vw, 44px) !important;
	padding-right: clamp(28px, 3.5vw, 44px) !important;
}
.pp-rp-process-section.pp-rp-process-section.pp-rp-process-section {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-rp-request-section.pp-rp-request-section.pp-rp-request-section {
	padding-left: var(--pp-gutter) !important;
	padding-right: var(--pp-gutter) !important;
}
.pp-rp-request__intro.pp-rp-request__intro.pp-rp-request__intro {
	padding-right: clamp(20px, 2.5vw, 32px) !important;
}
.pp-rp-request__step.pp-rp-request__step.pp-rp-request__step {
	padding-left: 14px !important;
	padding-right: 14px !important;
}
.pp-rp-request__steps.pp-rp-request__steps.pp-rp-request__steps {
	padding-left: clamp(16px, 2vw, 28px) !important;
}
.pp-solution-card__body.pp-solution-card__body.pp-solution-card__body {
	padding-left: 24px !important;
	padding-right: 24px !important;
}
.pp-trust-float__col.pp-trust-float__col.pp-trust-float__col {
	padding-left: 22px !important;
	padding-right: 22px !important;
}
.pp-why-item.pp-why-item.pp-why-item {
	padding-left: 22px !important;
	padding-right: 22px !important;
}

/* Same reset also zeroes margin-left/margin-right on any direct child of
   an `.is-layout-flow`/`.is-layout-constrained` ancestor (theme.css lines
   17-23), which breaks the small set of icon elements approved as
   horizontally auto-centered (`margin: 0 auto ...`) inside a flex/column
   parent. Same restoration pattern, values copied byte-for-byte from the
   existing theme.css declaration at the same class. */
.pp-nm-proc-step__visual.pp-nm-proc-step__visual.pp-nm-proc-step__visual {
	margin-left: auto !important;
	margin-right: auto !important;
}
.pp-rp-step__visual.pp-rp-step__visual.pp-rp-step__visual {
	margin-left: auto !important;
	margin-right: auto !important;
}
.pp-pn-sector__icon.pp-pn-sector__icon.pp-pn-sector__icon {
	margin-left: auto !important;
	margin-right: auto !important;
}
.pp-guide-panel__icon.pp-guide-panel__icon.pp-guide-panel__icon {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --------------------------------------------------------------------
   Responsive-final pass (2026-08-22): narrow-mobile (360px) horizontal
   overflow on palettes-en-bois-neuves, found via real-browser
   `document.documentElement.scrollWidth` check (not visible at the
   360-wide approved mobile render's own 390px width, or at 390/430/768/
   1440 -- confirmed with a live CDP session, not source inspection).

   Root cause 1 of 2: this page's dimensions section carries TWO classes
   on the same element -- the generic `.pp-dim-wrap`/`.pp-dim-panel`
   (used elsewhere, e.g. home) AND a page-scoped override,
   `.pp-pn-dim-wrap`/`.pp-pn-dim-panel`, that theme.css itself declares
   with intentionally tighter padding for this "single-row 6-col square
   cards" layout (theme.css's own comment: "section-level overrides
   (wider, tighter padding)"). Before the wp-block-group reset, the
   page-scoped rule legitimately won this cascade (same specificity,
   declared later in theme.css). The sitewide padding-restoration rules
   above for the generic `.pp-dim-wrap`/`.pp-dim-panel` classes correctly
   fixed every OTHER page that uses them, but on this one page their
   `!important` now unintentionally outranks the page-scoped class's
   non-`!important` tighter value, widening this component's padding by
   ~4-8px per side versus the approved intent -- part of the overflow.
   Fix: an equal-specificity restore for the page-scoped classes, placed
   after the generic ones (this file's own source order), reproducing
   theme.css's original win exactly -- same technique, same non-invented
   values, just correcting which of two already-!important-eligible
   rules comes out on top. (`.pp-pn-dim-wrap`'s own rule used the
   `padding-inline` logical shorthand, not `padding`/`padding-left`/
   `padding-right` -- this is the one other place in theme.css that
   property appears, so it was missed by the physical-property scan the
   sitewide padding-restoration pass above was built from.) */
.pp-pn-dim-wrap.pp-pn-dim-wrap.pp-pn-dim-wrap {
	padding-left: max(12px, 2vw) !important;
	padding-right: max(12px, 2vw) !important;
}
.pp-pn-dim-panel.pp-pn-dim-panel.pp-pn-dim-panel {
	padding: clamp(16px, 2vw, 22px) !important;
}

/* Root cause 2 of 2: `.pp-pn-dim-grid` (a CSS Grid item inside
   `.pp-pn-dim-panel`'s single-column mobile track) and `.pp-pn-dim-card`
   (a grid item inside `.pp-pn-dim-grid`'s own `repeat(2, 1fr)` mobile
   track) both default to the CSS Grid spec's "automatic minimum size"
   for a `1fr` track -- an item never shrinks narrower than its own
   min-content width unless its `min-width` is set to something other
   than the `auto` default. At >=390px there is enough room that this
   never bites; at 360px the dimension-card labels' min-content width
   (e.g. "Sur mesure" / "Autres dimensions disponibles") is just wide
   enough to force both nested grids past the viewport edge. This is a
   standard, well-known CSS Grid fix with zero visible effect anywhere
   the content already fits (which is everywhere this was checked except
   360px) -- not a new visual value, a missing `min-width` needed for the
   grid to actually honor its own `1fr` track sizing at the narrowest
   real device width tested. */
.pp-pn-dim-grid.pp-pn-dim-grid.pp-pn-dim-grid,
.pp-pn-dim-card.pp-pn-dim-card.pp-pn-dim-card {
	min-width: 0;
}

/* --------------------------------------------------------------------
   Header/nav breakpoint-boundary overflow (found by testing immediately
   around the existing 768px nav breakpoint, not only at 768/390
   themselves, per the responsive-final pass's own breakpoint-transition
   requirement). `.pp-header__inner` is `display:flex;
   justify-content:space-between; overflow:visible` with three children:
   the logo (120px), `.pp-nav` (flex:1, 6 links, all `white-space:
   nowrap`, min-content ~560px), and `.pp-header__cta` (~112px). Desktop
   nav is shown for any width >768px (mobile nav -- `.pp-nav{display:
   none}` -- only applies at <=768px, theme.css line 1670). Live-measured
   via a real browser session: the row's own min-content width (logo +
   gaps + nav + CTA, inside the page's own gutter padding) is ~888px --
   wider than the viewport for the entire 769-~980px band, and nothing in
   that row wraps or clips (`overflow:visible`), so `.pp-header__cta` is
   pushed off the right edge (confirmed via
   `document.documentElement.scrollWidth`: 857px of content at a 769px
   viewport). Tightening the nav's own padding/gap in that band was tried
   first and rejected: even with every safe reduction applied, closing an
   ~120px deficit across only 6 short nav items required shrinking link
   padding and font-size enough to look cramped and off-model -- not
   "professionally designed," the standard this pass is held to (owner
   brief, "PRIMARY OBJECTIVE"). No approved tablet reference exists
   between the package's own 390px mobile and 1440px desktop renders, so
   the exact 768px cutover is theme.css's own unreferenced implementation
   choice, not a value a specific approved tablet mockup requires --
   `project-docs/DESIGN_IMPLEMENTATION_CONTRACT.md` rule 8 explicitly
   allows exactly this kind of technical interpolation ("an exact
   breakpoint number between two approved responsive references").
   Fix: move only the header/nav/CTA/hamburger cutover itself to the
   already-established 1024px tablet tier used elsewhere in theme.css
   (`.pp-solutions-grid`, `.pp-dim-cards`, hero/trust-float, etc. all
   already have an 1024px step) -- not a new breakpoint number, and not a
   change to any other 768px-keyed rule (hero stacking, card grids,
   footer, forms all still switch at the approved 768px). Tablet gets the
   same hamburger nav already verified comfortable and fully functional
   on mobile (see the interaction-test evidence in the final report)
   instead of a cramped, overflowing inline nav -- the standard pattern
   professional responsive sites use at this exact width range, and the
   only escape from "how wide must a fixed 6-item text nav + CTA be" that
   doesn't shrink type into a different design. Header height/logo size
   intentionally stay at their desktop (>768px) values in this band --
   already confirmed comfortable at every width from 769px up (a taller
   tablet header with the hamburger is not a defect), and
   `.pp-mobile-menu`'s own `top: var(--pp-header-height)` tracks whichever
   value is active automatically, so no extra positioning rule is
   needed. */
@media (min-width: 769px) and (max-width: 1024px) {
	.pp-nav {
		display: none;
	}
	.pp-header__cta {
		display: none;
	}
	.pp-hamburger {
		display: flex;
		flex-direction: column;
	}
}

/* --------------------------------------------------------------------
   Header logo collapsing to a sliver at the same 769-~980px band (found
   while diagnosing the header overflow above). `.pp-header__logo img`
   is `height: 120px; width: auto` -- the logo attachment
   (logo-paleti-palette.png) is a genuinely square 1254x1254 asset, so
   `width:auto` is expected to resolve to 120px at every width, matching
   `height`. WordPress's `wp_get_attachment_image()` gives this img a
   `srcset`/`sizes="(max-width: 1254px) 100vw, 1254px"` (correct, generic
   WP behavior for any attached image). Live-measured via a real browser
   session: in the ~769-980px band, `img.naturalWidth`/`naturalHeight`
   both read back as approximately the *current viewport width* rather
   than the selected srcset resource's real pixel size (e.g. viewport
   800px -> naturalWidth/Height 800, viewport 900px -> 900) -- the
   `sizes="100vw"` branch is active in exactly that band (viewport
   <1254px selects the 100vw branch; above ~980px the browser's own
   `auto`-width resolution happens to still land on 120px despite the
   same mechanism, but 769-980px does not) -- and the resulting
   density-corrected intrinsic size makes `width:auto` collapse to a
   few pixels instead of 120. Confirmed live: the image visibly shrinks
   to a ~1-100px sliver in this band and is correctly 120px both just
   below and just above it. Mobile (<=768px, where `height` is
   overridden to 88px) was checked across its whole range and is not
   affected. Fix: since the asset's real aspect ratio is exactly 1:1,
   declaring `width: 120px` explicitly (matching the existing `height:
   120px`) for the same >768px range this component is already shown in
   removes the dependency on the browser's (here, buggy) intrinsic-size
   inference -- not a new visual value, the same 120px the design
   already specifies for the other dimension of a square image. */
@media (min-width: 769px) {
	.pp-header__logo img {
		width: 120px;
	}
}

/* --------------------------------------------------------------------
   Footer content silently truncated in the 769-1024px tablet band.
   `.pp-footer { max-height: 370px; overflow: hidden }` is the approved
   package's own base rule, reset back to `max-height:none;
   overflow:visible` only inside its existing `@media (max-width:
   768px)` block (theme.css line 1690). At 1440/1200px the real footer
   content is 367px tall, so the 370px cap is invisible there (which is
   presumably why this was never caught against the package's own
   desktop reference render). At 1024/900/800/769px the same 4-column
   footer grid no longer fits 4-across and wraps to fewer, taller
   columns -- real content height 580-600px -- so `overflow:hidden`
   silently deletes the bottom ~210-230px of the footer with no visual
   affordance that anything is missing: confirmed live
   (`footer.scrollHeight` 580-600 vs `clientHeight` 370) and
   screenshotted (the "Contact"/"Nos solutions" columns and the entire
   copyright/legal bar are invisible). This is the same class of
   "approved package only validated at its own 390/1440 reference
   widths" gap as the header/nav fix above, on the exact same
   769-1024px band -- extending the package's own already-correct
   mobile fix (identical values, `max-height:none;overflow:visible`,
   nothing invented) to the existing 1024px tablet breakpoint closes it
   without touching the 768px or 1440px cases, both already correct. */
@media (max-width: 1024px) {
	.pp-footer {
		max-height: none;
		overflow: visible;
	}
}

/* --------------------------------------------------------------------
   Floating WhatsApp/Call actions covering real footer text/links at the
   true bottom of the page. `.pp-floating` is `position:fixed` (28px/24px
   from the viewport edge on tablet+desktop, 20px/16px on mobile --
   theme.css lines 1553 and 1702); with no reserved space after it, the
   last scroll position always lands with the floating stack directly
   over whatever footer content happens to be at that exact spot.
   Live-confirmed at every width from 360px to 1440px: at
   360-1024px the buttons sit over live footer links/copyright text
   (`.pp-footer__col` nav links, `.pp-footer__bottom`'s copyright); at
   1440/1200px it lands over the (non-interactive) brand description
   paragraph instead, which does not obstruct a link or control and is
   left as-is here -- this pass's scope is tablet/mobile, and the
   1440/1200 case does not block reading or clicking anything. Fix:
   reserve clearance below the footer's own last real content equal to
   the floating stack's height plus a safety margin (2 buttons x 52px +
   10px gap = 114px, plus each range's own edge offset and margin) by
   padding `.pp-footer__bottom` (the footer's last element) -- confirmed
   live to leave a positive 38-46px gap between the copyright text and
   the floating stack at every width from 360-1024px, not merely
   "no longer the topmost hit-tested element" (padding box) but the real
   rendered text baseline. Scoped to the same 1024px tablet breakpoint as
   the footer-clipping fix above, since 1440/1200 already have enough
   natural whitespace there (confirmed) and this pass does not touch
   desktop. */
@media (max-width: 1024px) {
	.pp-footer__bottom {
		padding-bottom: 180px;
	}
}