/* Proturf 2026 — design system v3, implementing docs/design-reference (.dc.html specs).
Exact palette/typography from the approved design: Archivo + Instrument Serif,
cream #FBF9F4, forest #0C3524 / #144C33, CTA #58B948. */
/* ---------- Fonts ---------- */
@font-face {
font-family: "Archivo";
src: url("../fonts/Archivo-Variable.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Instrument Serif";
src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ---------- Tokens ---------- */
:root {
--pt-cream: #fbf9f4;
--pt-cream-2: #f2f7ee;
--pt-forest-deep: #0c3524;
--pt-forest: #144c33;
--pt-cta: #58b948;
--pt-cta-hover: #4aa53b;
--pt-ink: #10201a;
--pt-body-soft: #57685e;
--pt-body-softer: #8a9990;
--pt-green-soft: #8fd07a;
--pt-green-muted: #9fbfaf;
--pt-on-dark: #d7e6dc;
--pt-on-dark-2: #bdd4c5;
--pt-line: #e6ebe1;
--pt-line-2: #e2e8dd;
--pt-line-3: #dde5d7;
--pt-line-dark: rgba(255, 255, 255, 0.16);
--font-sans: "Archivo", system-ui, -apple-system, sans-serif;
--font-serif: "Instrument Serif", Georgia, serif;
--wrap: 1280px;
--pad: 32px;
/* Vertical rhythm. One fluid scale for every band, so a section is never taller on a
phone than on a desktop (which is what the old fixed px values did: .section was
56px on desktop and 64px on mobile). Values are per-side. */
--sec-y: clamp(30px, 4vw, 46px); /* standard band, top and bottom */
--sec-y-sm: clamp(18px, 2.4vw, 26px); /* compact bands: the trust bar */
--sec-head-y: clamp(24px, 3vw, 38px); /* gap under a section heading block */
--hero-y-top: clamp(36px, 6.2vw, 92px); /* hero clears the sticky header, fluidly */
--hero-y-bot: clamp(30px, 3.4vw, 52px);
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--pt-cream);
color: var(--pt-ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pt-forest); text-decoration: none; }
a:hover { color: var(--pt-cta); }
input, textarea, button, select { font-family: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--pt-cta); outline-offset: 2px; border-radius: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--pt-forest-deep); color: #fff; padding: 0.6em 1em; z-index: 100; }
.skip-link:focus { left: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
/* Reveal animation (JS adds .is-revealed) */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
/* ---------- Eyebrow ---------- */
.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--pt-cta); font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 16px; }
.eyebrow--light { color: var(--pt-green-soft); }
.eyebrow--bar::before { content: ""; width: 34px; height: 2px; background: var(--pt-cta); display: block; }
/* ---------- Buttons ---------- */
.btn { display: inline-block; font-weight: 700; font-size: 15.5px; padding: 17px 30px; border-radius: 4px; border: 0; cursor: pointer; text-align: center; }
.btn--cta { background: var(--pt-cta); color: var(--pt-forest-deep); }
.btn--cta:hover { background: var(--pt-cta-hover); color: var(--pt-forest-deep); }
.btn--ghost { border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font-weight: 600; background: transparent; }
.btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--forest { background: var(--pt-forest); color: #fff; font-size: 15px; padding: 15px 26px; }
.btn--forest:hover { background: var(--pt-forest-deep); color: #fff; }
.btn--sm { font-size: 14px; padding: 12px 20px; }
/* ---------- Topbar ---------- */
.topbar { background: var(--pt-forest-deep); color: var(--pt-green-muted); font-size: 12.5px; letter-spacing: 0.04em; padding: 9px 0; }
.topbar__inner { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.topbar__phone { color: #dce9e1; font-weight: 600; }
.topbar a { color: var(--pt-green-muted); }
.topbar a.topbar__phone { color: #dce9e1; }
.topbar__spacer { flex: 1; }
.lang-switch { display: flex; gap: 2px; align-items: center; }
.lang-switch a, .lang-switch > span { display: inline-flex; align-items: center; gap: 6px;
border-radius: 3px; padding: 4px 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.lang-switch .is-active { background: var(--pt-cta); color: var(--pt-forest-deep); }
.lang-switch a:not(.is-active) { color: #8fb0a0; }
/* Fixed box + a hairline: the French white band and the Union Jack's white both dissolve
into the topbar without one. */
.lang-switch__flag { width: 18px; height: 12px; border-radius: 2px; flex: 0 0 auto;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.lang-switch .is-active .lang-switch__flag { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.lang-switch a:not(.is-active):hover { color: #fff; }
.lang-switch a:not(.is-active):hover .lang-switch__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }
/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; }
.masthead { background: var(--pt-forest); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
:root { --pt-header-h: 78px; }
.masthead__inner { height: var(--pt-header-h); display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.site-header .brand img { height: 34px; width: auto; }
.site-nav { flex: 1; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; align-items: center; font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em; }
.site-nav__list a { color: #c6dacd; }
.site-nav__list a:hover { color: #fff; }
/* Top level: links fill the masthead height so the active underline lands flush with the
bottom edge of the header bar rather than hugging the text. */
.site-nav__list > li > a { position: relative; height: var(--pt-header-h, 78px); display: inline-flex; align-items: center; }
.site-nav__list > .current-menu-item > a, .site-nav__list > .current_page_item > a,
.site-nav__list > .current-menu-parent > a, .site-nav__list > .current-menu-ancestor > a { color: #fff; }
.site-nav__list > .current-menu-item > a::before, .site-nav__list > .current_page_item > a::before,
.site-nav__list > .current-menu-parent > a::before, .site-nav__list > .current-menu-ancestor > a::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pt-cta); }
/* Dropdown for Produits */
.site-nav__list li { position: relative; }
.site-nav__list .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; }
.site-nav__list .menu-item-has-children > a::after {
content: ""; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px); opacity: 0.7; transition: transform 0.18s ease, opacity 0.18s ease; }
.site-nav__list .menu-item-has-children:hover > a::after,
.site-nav__list .menu-item-has-children:focus-within > a::after { opacity: 1; transform: rotate(225deg) translate(-2px, -2px); }
.site-nav__list .sub-menu {
position: absolute; top: calc(100% + 4px); left: -18px; min-width: 250px;
background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px;
box-shadow: 0 24px 48px -24px rgba(12, 53, 36, 0.45);
padding: 10px; margin: 0; list-style: none; display: none; flex-direction: column; gap: 2px; z-index: 70;
}
.site-nav__list .sub-menu::before { content: ""; position: absolute; inset: -4px 0 100% 0; }
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu { display: flex; }
.site-nav__list .sub-menu a { display: block; color: var(--pt-ink); padding: 9px 14px; border-radius: 5px; font-size: 14px; }
.sub-menu__all { display: none; }
.site-nav__list .sub-menu a:hover { background: var(--pt-cream-2); color: var(--pt-forest); }
.site-nav__list .sub-menu .current-menu-item > a,
.site-nav__list .sub-menu .current_page_item > a { color: var(--pt-green-label, #2f8f43); font-weight: 700; }
/* Drawer-only block: shown by the mobile media query, hidden everywhere else. */
.site-nav__cta { display: none; }
/* Secondary header action, so contacting is not buried behind the quote flow. */
.btn-contact { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px;
border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 4px; color: #fff; font-weight: 600;
font-size: 14px; transition: border-color 0.15s ease, background 0.15s ease; }
.btn-contact:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--pt-cta); color: #fff; }
@media (max-width: 1080px) { .btn-contact { display: none; } }
.btn-devis { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; background: var(--pt-cta); color: var(--pt-forest-deep); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; padding: 12px 20px; border-radius: 4px; }
.btn-devis:hover { background: var(--pt-cta-hover); color: var(--pt-forest-deep); }
.btn-devis__count { background: var(--pt-forest-deep); color: var(--pt-green-soft); border-radius: 99px; min-width: 22px; height: 22px; display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; padding: 0 6px; }
.btn-devis__count.is-visible { display: inline-flex; }
.site-header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; }
/* Sized as a proper 44 px touch target and centred on its own box: the old button was
22 px tall while the icon spanned 14 px from its centre, so the bars sat outside it. */
.nav-toggle { display: none; place-items: center; width: 44px; height: 44px; padding: 0;
background: none; border: 1px solid var(--pt-line-dark); border-radius: 6px; cursor: pointer; }
.nav-toggle:hover { border-color: rgba(255, 255, 255, 0.45); }
.nav-toggle__bar { position: relative; display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff;
transition: background 0.18s ease; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px;
border-radius: 2px; background: #fff; transition: transform 0.22s ease; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
/* Open state becomes a cross, so the control says how to close it. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero { position: relative; background: var(--pt-forest-deep); min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(9, 42, 28, 0.92) 0%, rgba(9, 42, 28, 0.72) 42%, rgba(9, 42, 28, 0.15) 100%); }
.hero__inner { position: relative; width: 100%; padding-top: var(--hero-y-top); padding-bottom: var(--hero-y-bot); }
.hero__content { max-width: 760px; }
.hero__title { color: #fff; font-size: clamp(44px, 5.6vw, 80px); line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; }
.hero__title .hero__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; color: var(--pt-green-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.hero__title .hero__kicker::before { content: ""; width: 34px; height: 2px; background: var(--pt-cta); display: block; }
.hero__sub { margin: 26px 0 0; color: var(--pt-on-dark); font-size: 19px; line-height: 1.62; max-width: 560px; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.feature-strip { position: relative; border-top: 1px solid var(--pt-line-dark); background: rgba(7, 33, 22, 0.55); backdrop-filter: blur(6px); }
.feature-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.feature-strip__cell { padding: 26px 28px; border-right: 1px solid rgba(255, 255, 255, 0.14); }
.feature-strip__cell:first-child { padding-left: 0; }
.feature-strip__cell:last-child { border-right: 0; padding-right: 0; }
.feature-strip h3 { color: var(--pt-green-soft); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.feature-strip p { margin: 0; color: #e4efe7; font-size: 14.5px; line-height: 1.45; font-weight: 400; }
/* ---------- Families: what else we cover ---------- */
/* Typographic, not chrome: this sits under the four family cards inside the same section, so
it has to read as a continuation of them rather than a second component. A hairline rule
ties it to the cards, and the marker carries the only real information in the list, whether
there is a range behind the words. */
.fam-more { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--pt-line);
display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.fam-more__side .eyebrow { margin-bottom: 12px; }
.fam-more__note { margin: 0; color: var(--pt-body-softer); font-size: 13.5px; line-height: 1.55; max-width: 30ch; }
.fam-more__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
/* Not links, so no hover and no second colour: one marker, one weight, read top to bottom. */
.fam-more__list li { display: flex; align-items: baseline; gap: 10px;
font-size: 14.5px; line-height: 1.35; color: var(--pt-body-soft); }
.fam-more__list li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px;
border-radius: 50%; background: var(--pt-cta); transform: translateY(-3px); }
@media (max-width: 1024px) { .fam-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
.fam-more { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; padding-top: 24px; }
.fam-more__note { max-width: none; }
}
@media (max-width: 560px) { .fam-more__list { grid-template-columns: 1fr; gap: 11px; } }
/* ---------- Badges bar ---------- */
.badges { background: #fff; border-bottom: 1px solid var(--pt-line); padding-block: var(--sec-y-sm); }
/* One trust bar, not a grid of cards. The written label that used to sit on the left is gone,
so the marks centre on the page instead of being pushed right by it. */
.badges__inner { display: flex; align-items: center; justify-content: center; gap: 22px; }
.badges__list { flex: 0 1 auto; display: flex; align-items: center; justify-content: center;
gap: 22px 46px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.cert { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cert__sep { display: none; }
.cert__mark { display: flex; align-items: center; gap: 5px; color: var(--pt-forest); height: 44px; flex: 0 0 auto; }
.cert__mark b { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.cert__mark i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 3px 7px; border-radius: 3px; background: var(--pt-forest); color: #fff; }
.cert__logo { height: 100%; width: auto; max-width: 170px; object-fit: contain; }
/* A 3.8:1 wordmark matched to the badges on height alone renders 169 px wide and dwarfs
them; matched on ink area it renders 121 px and disappears. 142 px is the midpoint, and
capping the width (not the height) lets object-fit centre it in the shared 44 px row:
the wordmark lands at 142x37, optically level with FIFA's 79x44 badge. */
.cert--wordmark .cert__logo { max-width: 142px; }
.cert__desc { color: var(--pt-body-soft); font-size: 12px; line-height: 1.35; }
/* Back to 1180 now the wordmark is capped at 142px: measured at 1180 all four descriptions
still sit on one line, and a two-line wrap in this bar reads as a layout fault. */
@media (max-width: 1180px) { .cert__desc { display: none; } .badges__list { gap: 30px; } }
@media (max-width: 820px) { .badges__list { gap: 18px 26px; } }
.calc-section { background: var(--pt-forest); color: #fff; position: relative; overflow: hidden; }
.calc-section__img { position: absolute; right: 0; top: 0; width: 38%; height: 100%; object-fit: cover; opacity: 0.16; }
.calc-section__inner { position: relative; padding-block: var(--sec-y); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
/* Grid items default to min-width:auto, so a wide child (a stat row, a phone number
block) pushes the whole track past the viewport on a phone. These sections all
collapse to one column at mobile, where that overflow becomes a horizontal scroll. */
.calc-section__inner > *, .services > *, .about > *, .devis > * { min-width: 0; }
.calc-section h2 { color: #fff; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; }
.calc-section__lead { margin: 22px 0 0; color: var(--pt-on-dark-2); font-size: 16.5px; line-height: 1.62; text-wrap: pretty; }
.calc-section__note { margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); color: #8fb0a0; font-size: 12.5px; line-height: 1.6; }
.calc-card { background: var(--pt-cream); border-radius: 8px; padding: 38px 40px 34px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.5); }
.calc-card__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
.calc-card__label { color: var(--pt-body-soft); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.calc-card__value { display: flex; align-items: baseline; gap: 6px; }
.calc-card__value output { font-family: var(--font-serif); font-size: 44px; line-height: 1; color: var(--pt-forest); }
.calc-card__value .unit { color: var(--pt-body-soft); font-size: 15px; font-weight: 600; }
.calc-slider { position: relative; height: 34px; display: flex; align-items: center; }
.calc-slider__track, .calc-slider__fill { position: absolute; height: 6px; border-radius: 99px; pointer-events: none; }
.calc-slider__track { left: 0; right: 0; background: var(--pt-line-2); }
.calc-slider__fill { left: 0; background: var(--pt-cta); width: 8%; }
.calc-slider__thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: var(--pt-forest); border: 3px solid var(--pt-cream); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28); left: 8%; pointer-events: none; }
.calc-slider input[type="range"] { position: relative; width: 100%; height: 34px; margin: 0; opacity: 0; cursor: grab; z-index: 2; }
.calc-slider__minmax { display: flex; justify-content: space-between; color: var(--pt-body-softer); font-size: 11.5px; font-weight: 600; margin-bottom: 30px; }
.calc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--pt-line-2); border-radius: 6px; overflow: hidden; }
.calc-stats__cell { background: var(--pt-cream-2); padding: 24px 20px; }
.calc-stats__cell b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--pt-forest); line-height: 1; }
.calc-stats__cell span { display: block; color: var(--pt-body-soft); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; min-height: 30px; }
.calc-card__cta { display: block; text-align: center; margin-top: 24px; background: var(--pt-forest); color: #fff; font-weight: 700; font-size: 15px; padding: 16px; border-radius: 4px; }
.calc-card__cta:hover { background: var(--pt-forest-deep); color: #fff; }
/* ---------- Section scaffolding ---------- */
.section { padding-block: var(--sec-y); }
.section--alt { background: var(--pt-cream-2); border-top: 1px solid var(--pt-line); border-bottom: 1px solid var(--pt-line); padding-block: var(--sec-y); }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: var(--sec-head-y); }
.section__title { font-size: clamp(30px, 3.4vw, 44px); max-width: 620px; }
.section__link { color: var(--pt-forest); font-weight: 700; font-size: 14.5px; border-bottom: 2px solid var(--pt-cta); padding-bottom: 4px; }
/* ---------- Product families ---------- */
.families { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
/* Five across needs room; step down before the tablet breakpoint. */
@media (max-width: 1280px) { .families { grid-template-columns: repeat(3, 1fr); } }
.family { background: #fff; border: 1px solid var(--pt-line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s ease; }
.family:hover { border-color: var(--pt-cta); }
.family__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pt-line-2); }
.family__media img { width: 100%; height: 100%; object-fit: cover; }
.family__body { padding: 24px 24px 20px; flex: 1; display: flex; flex-direction: column; }
.family__title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.family__title a { color: var(--pt-ink); }
.family__desc { margin: 0 0 4px; color: var(--pt-body-soft); font-size: 14px; line-height: 1.55; flex: 1; }
.family__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #eef2ea; }
.family__tag { color: var(--pt-body-softer); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* Nothing sits opposite the link now, so start-align it rather than leaving space-between
to park it wherever the flex box happens to put a lone child. */
.family__foot--bare { justify-content: flex-start; }
.family__add { background: var(--pt-cream-2); border: 1px solid #cfe0c8; color: var(--pt-forest); font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 4px; cursor: pointer; transition: all 0.15s ease; }
.family__add:hover { background: var(--pt-cta); border-color: var(--pt-cta); color: var(--pt-forest-deep); }
/* ---------- Steps band ---------- */
.steps-wrap { padding-bottom: var(--sec-y); }
.steps { background: var(--pt-forest); border-radius: 8px; padding: 34px 36px; display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr; gap: 44px; align-items: start; }
.steps__intro .eyebrow { margin-bottom: 14px; }
.steps__claim { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.step__num { font-family: var(--font-serif); font-size: 40px; color: var(--pt-cta); line-height: 1; margin-bottom: 12px; }
.step__title { color: #fff; font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.step__desc { color: var(--pt-on-dark-2); font-size: 14px; line-height: 1.55; }
/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
.services__side { position: sticky; top: 110px; }
.services__side h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; }
.services__side p { margin: 20px 0 0; color: var(--pt-body-soft); font-size: 16px; line-height: 1.6; }
.services__side .btn { margin-top: 28px; }
.services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--pt-line-3); border: 1px solid var(--pt-line-3); border-radius: 6px; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.services__grid li { background: var(--pt-cream); padding: 26px 24px; transition: background 0.15s ease; }
.services__grid li:hover { background: #fff; }
.services__grid .num { color: var(--pt-cta); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; margin-bottom: 10px; display: block; }
.services__grid .label { font-size: 16px; font-weight: 600; color: var(--pt-ink); line-height: 1.4; }
/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.about__collage { position: relative; }
.about__main { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--pt-line-2); }
.about__main img { width: 100%; height: 100%; object-fit: cover; }
.about__inset { position: absolute; right: -18px; bottom: -30px; width: 52%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 8px solid var(--pt-cream); background: var(--pt-line-2); }
.about__inset img { width: 100%; height: 100%; object-fit: cover; }
.about h2 { font-size: clamp(28px, 3.2vw, 42px); }
.about__lead { margin: 22px 0 0; color: #3d4e45; font-size: 17px; line-height: 1.68; text-wrap: pretty; }
.about__more { margin: 16px 0 0; color: var(--pt-body-soft); font-size: 16px; line-height: 1.66; text-wrap: pretty; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--pt-line-2); }
.stat__num { display: flex; align-items: baseline; color: var(--pt-forest); }
.stat__num .plus { font-size: 20px; font-weight: 700; }
.stat__num .val { font-family: var(--font-serif); font-size: 52px; line-height: 1; letter-spacing: -0.02em; }
.stat__label { color: var(--pt-body-soft); font-size: 13.5px; font-weight: 600; margin-top: 8px; line-height: 1.35; }
/* ---------- Portfolio (dark) ---------- */
.portfolio-section { background: var(--pt-forest-deep); padding-block: var(--sec-y); }
.portfolio-section .section__title { color: #fff; }
.portfolio-section .section__head p { margin: 0; color: #a8c4b2; font-size: 15.5px; line-height: 1.6; max-width: 340px; }
.portfolio { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; }
.tile { position: relative; border-radius: 6px; overflow: hidden; background: var(--pt-forest); display: block; }
.tile--feature { grid-column: span 2; grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
/* Project photos are often bright at the bottom (grass, sky), so the scrim has to carry
the title on its own rather than rely on the image being dark. */
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 42, 28, 0.92), rgba(9, 42, 28, 0.5) 34%, transparent 70%); }
.tile--feature .tile__scrim { background: linear-gradient(to top, rgba(9, 42, 28, 0.92), rgba(9, 42, 28, 0.45) 30%, transparent 62%); }
.tile__meta { position: absolute; left: 18px; bottom: 16px; right: 18px; color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px rgba(9, 42, 28, 0.5); }
.tile--feature .tile__meta { left: 26px; bottom: 24px; right: 26px; }
.tile__cat { display: block; color: var(--pt-green-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.tile--feature .tile__title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
/* ---------- Testimonials ---------- */
.quotes-head { max-width: 620px; margin-bottom: var(--sec-head-y); }
.quotes-head p { margin: 20px 0 0; color: var(--pt-body-soft); font-size: 16.5px; line-height: 1.62; text-wrap: pretty; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { margin: 0; background: var(--pt-cream); border: 1px solid var(--pt-line-2); border-radius: 6px; padding: 34px 30px; display: flex; flex-direction: column; gap: 22px; }
.quote__mark { color: var(--pt-cta); font-family: var(--font-serif); font-size: 46px; line-height: 0.5; height: 20px; }
.quote blockquote { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.4; color: var(--pt-ink); flex: 1; }
.quote figcaption { color: var(--pt-body-soft); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; }
/* ---------- Devis section ---------- */
.devis { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.devis h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; }
.devis__lead { margin: 20px 0 0; color: var(--pt-body-soft); font-size: 16.5px; line-height: 1.62; max-width: 420px; text-wrap: pretty; }
.devis__blocks { margin-top: 40px; display: flex; flex-direction: column; gap: 26px; }
.devis__blocks .k { color: var(--pt-body-softer); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; }
.devis__blocks .tel { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--pt-forest); }
.devis__blocks .addr { color: #3d4e45; font-size: 15.5px; line-height: 1.55; max-width: 300px; }
.quote-form { background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 36px 36px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.quote-form .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Inputs carry a default intrinsic width (roughly 20 characters) that keeps a grid
track from shrinking, which pushed the form past a phone's viewport. */
.quote-form :is(input, select, textarea) { min-width: 0; max-width: 100%; }
.quote-form .field--wide { grid-column: span 2; }
.quote-form label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pt-body-soft); }
.quote-form :is(input, select, textarea) { border: 1px solid var(--pt-line-3); border-radius: 4px; padding: 14px 15px; font-size: 15px; color: var(--pt-ink); background: var(--pt-cream); outline: none; width: 100%; }
.quote-form :is(input, select, textarea):focus { border-color: var(--pt-cta); background: #fff; }
.quote-form textarea { resize: vertical; }
.quote-form button[type="submit"] { grid-column: span 2; background: var(--pt-cta); color: var(--pt-forest-deep); border: 0; border-radius: 4px; padding: 17px; font-size: 15.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; }
.quote-form button[type="submit"]:hover { background: var(--pt-cta-hover); }
.quote-form__note { grid-column: span 2; color: var(--pt-body-softer); font-size: 12.5px; line-height: 1.5; text-align: center; }
.quote-form__success { background: var(--pt-forest); border-radius: 8px; padding: 44px 36px; text-align: center; }
.quote-form__success .check { color: var(--pt-cta); font-size: 44px; line-height: 1; margin-bottom: 20px; }
.quote-form__success h3 { color: #fff; font-size: 28px; }
.quote-form__success p { margin: 14px 0 0; color: var(--pt-on-dark-2); font-size: 16px; line-height: 1.6; }
/* ---------- Blog/archive cards + prose (non-design pages) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 22px; margin-block: 32px 0; }
.card { background: #fff; border: 1px solid var(--pt-line); border-radius: 6px; color: inherit; display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.card:hover { border-color: var(--pt-cta); box-shadow: 0 12px 28px -18px rgba(12, 53, 36, 0.4); }
.card__body { padding: 22px 24px 24px; display: block; }
.card__title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.card__excerpt { margin: 8px 0 0; color: var(--pt-body-soft); font-size: 14px; line-height: 1.55; }
.card__media { display: block; aspect-ratio: 16 / 10; background: var(--pt-line-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__link { color: inherit; }
.page-head__title { font-size: clamp(30px, 3.4vw, 44px); }
.flow > * + * { margin-block-start: 22px; }
.flow h2 { font-size: clamp(24px, 2.6vw, 32px); margin-block-start: 46px; }
.flow h3 { font-size: 20px; }
.guide__byline { font-size: 14px; color: var(--pt-body-soft); }
.cta-block { text-align: center; }
.cta-block__title { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 22px; }
.wrap--narrow { max-width: 46rem; }
/* ---------- Footer ---------- */
.site-footer { background: var(--pt-forest-deep); color: #a8c4b2; padding-top: var(--sec-y); position: relative; }
/* Grass edge: the footer grows into the section above instead of butting against it. */
.site-footer__grass { position: absolute; left: 0; right: 0; top: -32px; height: 33px; pointer-events: none;
background-image: url("data:image/svg+xml,"); background-repeat: repeat-x; background-position: bottom center; background-size: 260px 34px; }
/* ---------- Reach band ---------- */
.reach { background: var(--pt-forest); color: #fff; padding-block: var(--sec-y); }
.reach__inner { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 44px; align-items: center; }
.reach__intro h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; margin: 6px 0 10px; }
.reach__intro p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 15px; line-height: 1.6; max-width: 42ch; }
.reach__actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.reach__card { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 16px; border-radius: 8px;
background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.reach__card:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--pt-cta); transform: translateY(-2px); }
.reach__card--call { background: var(--pt-cta); border-color: var(--pt-cta); color: var(--pt-forest-deep); }
.reach__card--call:hover { background: #6cc95c; border-color: #6cc95c; }
.reach__k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
/* Solid ink on the green card: opacity-based dimming lost contrast on hover. */
.reach__card--call .reach__k { opacity: 1; color: #0c3524; }
.reach__card--call:hover .reach__k { color: #0c3524; }
.reach__s2 { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: #0c3524; white-space: nowrap; }
.reach__card--call .reach__v, .reach__card--call:hover .reach__v { color: #0c3524; }
.reach__v { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.reach__card--call .reach__v { font-size: 16.5px; }
.reach__s { font-size: 12.5px; opacity: 0.72; }
@media (max-width: 1024px) { .reach__inner { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 1180px) { .reach__actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reach__actions { grid-template-columns: 1fr; } }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 0.85fr 1fr 0.9fr 1.5fr 1.15fr; gap: 40px 28px; padding-bottom: var(--sec-y); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.site-footer .site-footer__logo { height: 32px; width: auto; margin-bottom: 24px; }
.site-footer__about { margin: 0; font-size: 14.5px; line-height: 1.65; max-width: 320px; color: var(--pt-green-muted); }
.site-footer__social { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
/* .site-footer ul is a flex column, and flex containers ignore column-count, which is
why this list stayed a single 13-item spine. Grid gives the two columns. */
.site-footer ul.site-footer__cities { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
/* Coverage list on the English tier: same rhythm as the city links, but the cities are
not landing pages there, so they are plain text at link brightness. */
.site-footer .site-footer__cities span { color: rgba(255,255,255,.72); font-size: 14px; }
.site-footer__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #7fa08f; max-width: 22rem; }
.addr--map { display: block; color: inherit; }
.addr--map:hover { color: #fff; }
.addr__go { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--pt-cta); }
.site-footer__social .k { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8fb0a0; }
.site-footer__social a { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #dce9e1; font-size: 13px; font-weight: 700; transition: color 0.15s, border-color 0.15s; }
.site-footer__social a:hover { border-color: var(--pt-cta); color: var(--pt-cta); }
.site-footer__social svg { display: block; }
.site-footer h3 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 20px; }
.site-footer__col { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.site-footer__col a, .site-footer ul a { color: #a8c4b2; }
.site-footer__col a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.site-footer .tel { display: block; color: #fff; font-size: 18px; font-weight: 700; }
.site-footer .hours { font-size: 13.5px; margin-top: 12px; color: #8fb0a0; }
.site-footer .addr { font-size: 14px; line-height: 1.6; margin-top: 22px; color: var(--pt-green-muted); }
.site-footer .mail { display: inline-block; margin-top: 14px; color: var(--pt-cta); font-size: 14.5px; font-weight: 600; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding: 26px 0 34px; font-size: 13px; color: #7fa391; }
.site-footer__certs { display: flex; gap: 24px; }
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.calc-section__inner, .services, .about, .devis { grid-template-columns: 1fr; gap: 44px; }
/* Once the contact grid stacks, six blocks of address, hours, warehouses and coverage sit
between the visitor and the form they came for. The form goes first on a phone; the
details still follow, where they are read rather than scrolled past. */
.devis--contact form { order: -1; }
.families { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: 1fr 1fr; }
.portfolio { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
.quotes { grid-template-columns: 1fr; }
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.feature-strip__grid { grid-template-columns: 1fr 1fr; }
.feature-strip__cell { padding: 20px 24px; }
.feature-strip__cell:nth-child(2n) { border-right: 0; }
.services__side { position: static; }
.calc-section__img { display: none; }
.about__inset { right: 0; }
}
@media (max-width: 896px) {
/* Full-height drawer with touch-sized rows and separators, rather than a cramped list
whose items were hard to hit and impossible to scan. */
/* Anchored to the header, not the viewport: the topbar scrolls away, so a fixed offset
sat on top of the logo when the page was at the top. */
.site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
background: var(--pt-forest); padding: 8px var(--pad) 24px;
max-height: calc(100vh - var(--pt-header-h, 64px)); overflow-y: auto; -webkit-overflow-scrolling: touch;
box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.6); }
.site-nav.is-open { display: block; }
.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; font-size: 16px; }
.site-nav__list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.site-nav__list > li > a { height: auto; display: flex; justify-content: space-between; align-items: center;
padding: 16px 2px; color: #fff; font-weight: 600; }
.site-nav__list > .current-menu-item > a::before,
.site-nav__list > .current_page_item > a::before,
.site-nav__list > .current-menu-parent > a::before,
.site-nav__list > .current-menu-ancestor > a::before { left: -8px; right: auto; top: 50%; bottom: auto;
width: 3px; height: 22px; transform: translateY(-50%); border-radius: 2px; }
/* The row is the tap target, not the word. `.site-nav__list .menu-item-has-children > a`
above sets inline-flex and outranks the `> li > a` rule here on specificity, so the parent
links stayed as wide as their text: on a 358px row the link was 81px, and tapping anywhere
else hit the , where no handler lives. Only items with a submenu were affected, which
is why Produits felt broken while the rest of the menu worked. */
.site-nav__list .menu-item-has-children > a { display: flex; }
.site-nav__list .menu-item-has-children > a::after { margin-left: auto; }
/* Collapsed by default: the drawer opened with every category expanded, which pushed
Réalisations, Blog and Contact below the fold. */
.site-nav__list .sub-menu { position: static; display: none; flex-direction: column; gap: 0; background: transparent;
border: 0; box-shadow: none; padding: 0 0 10px 12px; min-width: 0; }
.site-nav__list li.is-open > .sub-menu { display: flex; }
.site-nav__list li:hover > .sub-menu, .site-nav__list li:focus-within > .sub-menu { display: none; }
.site-nav__list li.is-open:hover > .sub-menu { display: flex; }
.site-nav__list .sub-menu a { color: #b9d2c4; padding: 11px 0; font-size: 15px; }
.site-nav__list .sub-menu a:hover { background: transparent; color: #fff; }
.sub-menu__all { display: block; }
.sub-menu__all a { color: var(--pt-cta); font-weight: 700; }
/* Chevron points down when closed, up when open. */
.site-nav__list .menu-item-has-children.is-open > a::after { transform: rotate(225deg) translate(-2px, -2px); opacity: 1; }
/* Reaching Proturf should not require closing the menu first. */
.site-nav__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.site-nav__cta a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 12px;
border-radius: 6px; font-weight: 700; font-size: 14.5px; }
.site-nav__cta .is-primary { background: var(--pt-cta); color: var(--pt-forest-deep); }
.site-nav__cta .is-ghost { border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; }
.nav-toggle { display: grid; }
:root { --pt-header-h: 64px; }
.masthead__inner { gap: 14px; }
.site-header .brand img { height: 28px; }
.btn-devis { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 760px) {
/* Topbar wrapped onto three lines and pushed the hero below the fold. */
.topbar__inner { flex-wrap: nowrap; gap: 12px; }
.topbar__inner > span:not(.topbar__spacer),
.topbar__inner > a[href^="mailto"] { display: none; }
}
@media (max-width: 640px) {
:root { --pad: 16px; }
/* The CTA plus the burger overflowed a 390 px viewport, and the burger was the element
pushed off screen, which left mobile with no way into the menu at all. */
.masthead__inner { gap: 10px; }
.site-header__actions { gap: 8px; }
.site-nav { flex: 0 1 auto; min-width: 0; }
.btn-devis { padding: 9px 12px; font-size: 12.5px; gap: 7px; }
.nav-toggle { order: -1; padding: 9px; }
/* The switcher was hidden here while there was nothing to switch to; the /en/ tier is
live, so mobile keeps it and the topbar earns its height back with a bigger tap target. */
.topbar .lang-switch { flex: 0 0 auto; gap: 4px; }
.lang-switch a, .lang-switch > span { padding: 7px 9px; gap: 5px; }
.lang-switch__flag { width: 21px; height: 14px; }
.topbar__inner { justify-content: flex-start; }
.families, .steps, .quote-form, .feature-strip__grid { grid-template-columns: 1fr; }
.quote-form .field--wide, .quote-form button[type="submit"], .quote-form__note { grid-column: auto; }
.portfolio { grid-template-columns: 1fr; }
.tile--feature, .tile--wide { grid-column: auto; grid-row: auto; }
.site-footer__grid { grid-template-columns: 1fr; }
.calc-card { padding: 26px 22px; }
/* One stat per row on a phone: three columns forced 180 000 and 5 700 DH to break
mid-number, which read as three separate figures. */
.calc-stats { grid-template-columns: 1fr; }
.calc-stats__cell { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 18px; }
.calc-stats__cell span { margin-bottom: 0; min-height: 0; }
.calc-stats__cell b { font-size: 26px; text-align: right; white-space: nowrap; }
.steps { padding: 32px 26px; }
.hero { min-height: 480px; }
.badges__spacer { display: none; }
.feature-strip__cell { padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
[data-reveal] { opacity: 1; transform: none; }
}
/* ---------- Shop archive ---------- */
.shop-head { background: var(--pt-forest-deep) url('data:image/svg+xml;utf8,') center/cover; background-color: var(--pt-forest-deep); color: #fff; padding: 32px 0 var(--sec-y); }
.crumbs { font-size: 12.5px; color: #8fb0a0; margin-bottom: 26px; }
.crumbs a { color: var(--pt-green-soft); }
.crumbs--light { padding-top: 26px; color: var(--pt-body-softer); }
.crumbs--light a { color: var(--pt-forest); }
.shop-head__title { color: #fff; font-size: clamp(36px, 4.4vw, 56px); }
.shop-head__sub { margin: 16px 0 0; color: var(--pt-on-dark-2); font-size: 16.5px; max-width: 460px; line-height: 1.6; }
/* Sticks below the sticky masthead, not under it: at top:0 the header (z-60) covered
the family row and only the sub-filters stayed visible on scroll-up. */
.shop-filters { background: #fff; border-bottom: 1px solid var(--pt-line); position: sticky; top: var(--pt-header-h, 78px); z-index: 40; }
/* nowrap on the row keeps the count pinned right; the pills wrap inside their own box. */
/* One row: the up-link, the pills, the count. The second tier is gone, so the bar no longer
needs to stack two rows or reserve space for a label that repeated the pill above it. */
.shop-filters__inner { display: flex; align-items: flex-start; gap: 18px; padding-block: 13px; flex-wrap: nowrap; }
/* Quiet by design: this is the way out, not a filter, so it must not read as another pill.
Top-aligned and nudged onto the first pill row's centre line: with the pills wrapping to two
rows, centring left it floating in the gap between them. */
.shop-filters__up { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; color: var(--pt-body-softer);
padding: 8px 18px 8px 0; border-right: 1px solid var(--pt-line); }
.shop-filters__up:hover { color: var(--pt-forest); }
.shop-filters__inner .pills { flex: 1 1 auto; min-width: 0; }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.pill { display: inline-block; border: 1px solid var(--pt-line-3); border-radius: 99px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--pt-ink); }
.pill:hover { border-color: var(--pt-cta); color: var(--pt-forest); }
.pill.is-active { background: var(--pt-forest-deep); border-color: var(--pt-forest-deep); color: #fff; }
/* Denser than the default pill because this bar is sticky. It still wraps to two rows on the
widest family (seven children with counts, at these label lengths, do not fit 1440), and
that is the right trade: a horizontal scroll would fit one line by hiding filters. */
.shop-filters .pill { padding: 8px 13px; font-size: 13px; }
.shop-filters .pills { gap: 7px; }
.devis__points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.devis__points li { position: relative; padding-left: 26px; color: var(--pt-body-soft); font-size: 15px; line-height: 1.5; }
.devis__points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--pt-cta); }
/* ---------- Blog index ---------- */
.shop-filters--blog { position: static; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pt-line); border-radius: 8px; overflow: hidden; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.post-card:hover { border-color: var(--pt-cta); box-shadow: 0 12px 28px -18px rgba(12, 53, 36, 0.4); }
.post-card__media { display: block; aspect-ratio: 16 / 10; background: var(--pt-line-2); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: block; padding: 18px 20px 20px; }
.post-card__cat { display: block; color: var(--pt-green-label); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.post-card__title { margin: 0; font-size: 17.5px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.post-card__excerpt { margin: 8px 0 12px; color: var(--pt-body-soft); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }
/* The sub row wrapped onto three lines (label / pills / count) as soon as a family had
enough sub-categories, so Aires de jeux stood 122px tall against 51px for Gazon
synthétique. Same treatment as the row above it: one line, pills scroll if they overrun. */
/* Fade the trailing edge so a clipped pill reads as "there is more here" rather than as a
rendering fault. Over empty space it is invisible, so it costs nothing when everything fits. */
/* Tighter than the family pills above: a family can carry seven sub-categories with long
names, and this is what keeps them on one line instead of scrolling. */
.shop-filters__count { margin-left: auto; color: var(--pt-body-softer); font-size: 13.5px; white-space: nowrap; }
/* Only one of the two is shown: on the sub-row when a family has children, otherwise
inline with the family pills. Prevents it orphaning between the two tiers. */
/* The count lives on the top row. It used to move down to the sub row, which cost that row
~90px and pushed the last sub-category out of a container capped at 1280px. */
.shop-body { padding-block: 32px var(--sec-y); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 8px; }
.pcard { background: #fff; border: 1px solid var(--pt-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.pcard:hover { border-color: var(--pt-cta); box-shadow: 0 12px 28px -18px rgba(12, 53, 36, 0.4); }
/* Contain, never crop: the catalogue mixes portrait, square, landscape and wide shots. */
.pcard__media { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; aspect-ratio: 4 / 3; background: #fff; padding: 14px; overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.pcard__body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.pcard__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.pcard__title a { color: var(--pt-ink); }
.pcard__desc { margin: 0; color: var(--pt-body-soft); font-size: 13.5px; line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* margin-top:auto pins the quote row to the card bottom so every card lines up,
whether or not the product has a description. */
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid #eef2ea; }
.pcard__body > .pcard__desc + .pcard__foot,
.pcard__body > .pcard__title + .pcard__foot { margin-top: 14px; }
.pcard__tag { color: var(--pt-body-softer); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* Piece products carry no unit note, so the add button is the only child left. Keep it on
the right, where it sits on the m² cards, or the grid reads as two different card types. */
.pcard__foot--bare { justify-content: flex-end; }
.shop-cta { margin-top: 44px; background: var(--pt-forest-deep); border-radius: 8px; padding: 30px 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.shop-cta h2 { color: #fff; font-size: clamp(22px, 2.4vw, 28px); }
.shop-cta p { margin: 8px 0 0; color: var(--pt-on-dark-2); font-size: 14.5px; }
.shop-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* ---------- Follow band (réalisations) ---------- */
/* The feeds carry more projects than the site does, so this sits directly under the grid
rather than in the footer where it would be missed. */
.follow { margin-top: var(--sec-y); background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px;
padding: 28px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.follow__intro h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 0; }
.follow__intro p { margin: 8px 0 0; color: var(--pt-body-soft); font-size: 14.5px; line-height: 1.55; max-width: 46ch; }
.follow__intro .eyebrow { margin-bottom: 12px; }
.follow__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.follow__btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px 13px 16px; border-radius: 6px;
border: 1px solid var(--pt-line-3); background: var(--pt-cream); color: var(--pt-ink);
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.follow__btn:hover { background: #fff; border-color: var(--pt-cta); color: var(--pt-ink); transform: translateY(-2px); }
.follow__icon { flex: 0 0 auto; }
.follow__btn--instagram .follow__icon { color: #c13584; }
.follow__btn--facebook .follow__icon { color: #1877f2; }
.follow__txt { display: flex; flex-direction: column; line-height: 1.25; }
.follow__txt b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.follow__txt i { font-style: normal; font-size: 12.5px; color: var(--pt-body-softer); }
@media (max-width: 640px) {
.follow { padding: 24px 20px; }
.follow__actions { width: 100%; }
.follow__btn { flex: 1 1 auto; justify-content: center; }
}
.woocommerce-pagination, .pagination { margin-top: 44px; text-align: center; }
.page-numbers { display: inline-block; padding: 10px 16px; border: 1px solid var(--pt-line-3); border-radius: 4px; margin: 0 3px; font-weight: 600; font-size: 14px; color: var(--pt-ink); }
.page-numbers.current { background: var(--pt-forest-deep); border-color: var(--pt-forest-deep); color: #fff; }
/* ---------- Single product ---------- */
.product-hero { padding: 18px 0 var(--sec-y); }
.product-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.pgallery__main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; aspect-ratio: 1 / 0.86; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--pt-line); padding: 22px; }
/* width/height 100% + contain rather than max-height: a percentage max-height resolves
against the grid area, which is content-sized here, so it never constrained a portrait
image: the 25 kg résine drum rendered 668px tall in a 499px box and overflow clipped it
in half. Filling the box and letting object-fit letterbox works for any aspect ratio. */
.pgallery__main img { width: 100%; height: 100%; object-fit: contain; }
.pgallery__thumbs { display: flex; gap: 12px; margin-top: 14px; }
.pgallery__thumb { width: 96px; aspect-ratio: 1; border-radius: 4px; overflow: hidden; border: 2px solid var(--pt-line); padding: 6px; background: #fff; cursor: pointer; }
.pgallery__thumb.is-active { border-color: var(--pt-cta); }
.pgallery__thumb { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; }
.pgallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.psummary__title { font-size: clamp(30px, 3.6vw, 44px); margin: 6px 0 14px; }
.psummary__desc { color: #3d4e45; font-size: 16.5px; line-height: 1.66; max-width: 54ch; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--pt-line-2); border: 1px solid var(--pt-line-2); border-radius: 6px; overflow: hidden; margin: 26px 0 0; }
.specs__cell { background: #fff; padding: 16px 18px; }
.specs dt { color: var(--pt-body-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.specs dd { margin: 0; font-weight: 700; font-size: 15.5px; color: var(--pt-ink); }
.quote-box { margin-top: 26px; background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 24px; }
.quote-box__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.quote-box__head b { font-size: 16px; }
.quote-box__label { color: var(--pt-body-soft); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; }
.stepper { display: flex; align-items: center; border: 1px solid var(--pt-line-3); border-radius: 4px; overflow: hidden; }
.stepper__btn { width: 38px; height: 42px; background: var(--pt-cream); border: 0; font-size: 18px; cursor: pointer; color: var(--pt-forest); }
.stepper__btn:hover { background: var(--pt-cream-2); }
.stepper input { width: 46px; height: 42px; border: 0; border-inline: 1px solid var(--pt-line-3); text-align: center; font-weight: 700; font-size: 15px; -moz-appearance: textfield; }
/* Surfaces run to four digits, and the unit has to be visible next to the number. */
.stepper--m2 input { width: 66px; }
.stepper__unit { padding: 0 12px; height: 42px; display: inline-flex; align-items: center; background: var(--pt-cream-2);
border-left: 1px solid var(--pt-line-3); color: var(--pt-body-soft); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.quote-box__add { display: block; width: 100%; }
/* Revealed by main.js only when the quote basket holds something. Hidden by default so an
empty basket never flashes the link on first paint. */
.quote-box__view { display: none; text-align: center; margin-top: 12px; font-weight: 700; font-size: 14px; }
.quote-box__view.is-visible { display: block; }
.psummary__stock { margin-top: 18px; color: var(--pt-body-soft); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.psummary__stock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pt-cta); display: inline-block; }
.product-desc { background: var(--pt-cream-2); border-block: 1px solid var(--pt-line); padding-block: var(--sec-y); }
.product-desc__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 72px; align-items: start; }
.product-desc h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 22px; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checklist li { padding-left: 30px; position: relative; font-size: 15.5px; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--pt-cta); font-weight: 800; }
.related { padding-block: var(--sec-y); }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rcard__media { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--pt-line); padding: 14px; }
.rcard__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.rcard__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 14px; }
.rcard__title { display: block; font-weight: 700; font-size: 16.5px; color: var(--pt-ink); letter-spacing: -0.01em; }
.rcard__tag { color: var(--pt-body-softer); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 1024px) {
.product-grid { grid-template-columns: repeat(2, 1fr); }
.product-hero__grid, .product-desc__grid { grid-template-columns: 1fr; gap: 40px; }
/* Once the hero stacks, the gallery is free to grow to the full column width: 826px tall
at 1024px, which buries the product itself. Cap it and use a shorter box. */
.pgallery { max-width: 520px; }
.pgallery__main { aspect-ratio: 3 / 2; }
/* Decision before reference: the spec table otherwise sits between the description and the
only action on the page. */
.psummary { display: flex; flex-direction: column; }
.psummary > .quote-box { order: 1; }
.psummary > .specs { order: 2; }
/* Two across, never one. A single-column product card blows up to full width and reads
as a banner rather than something you scan and compare against its neighbours. */
.related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* Phone-specific trims on top of the tablet rules above. */
.product-hero__grid { gap: 24px; }
.pgallery__main { padding: 12px; }
.pgallery__thumbs { gap: 8px; margin-top: 10px; }
.pgallery__thumb { width: 62px; padding: 4px; }
/* minmax(0,...) not 1fr: the card's own content would otherwise hold each track open and
push the second column off the screen. */
.related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.related__grid > * { min-width: 0; }
/* Title over button rather than beside it: at half a phone's width there is no room for
both, and the title was wrapping to two lines against a cramped button. */
.rcard__row { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 12px; }
.rcard__title { font-size: 15px; }
.quote-box__head { flex-direction: column; align-items: flex-start; }
}
.specs__cell:last-child:nth-child(odd) { grid-column: span 2; }
/* ---------- Devis page ---------- */
.devis-page { padding: 24px 0 var(--sec-y); }
.devis-head { padding: 30px 0 6px; }
.devis-head .crumbs { margin-bottom: 12px; }
.devis-head__title { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.03em; }
.devis-page { padding-top: 18px; }
[hidden] { display: none !important; }
.devis-sent, .devis-empty { max-width: 620px; margin: 0 auto; text-align: center; }
.devis-sent { background: var(--pt-forest); border-radius: 8px; padding: 72px 56px; }
.devis-sent .check { color: var(--pt-cta); font-size: 48px; line-height: 1; margin-bottom: 22px; }
.devis-sent h2 { color: #fff; font-size: 30px; }
.devis-sent p { margin: 16px 0 0; color: var(--pt-on-dark-2); font-size: 16px; line-height: 1.65; }
.devis-sent .btn { margin-top: 30px; }
.devis-empty { padding: 8px 0 24px; }
.devis-empty .zero { font-family: var(--font-serif); font-size: 72px; line-height: 1; color: #cfe0c8; }
.devis-empty h2 { margin-top: 18px; font-size: 26px; }
.devis-empty p { margin: 14px 0 0; color: var(--pt-body-soft); font-size: 15.5px; line-height: 1.6; }
.devis-empty { max-width: 860px; }
.devis-empty__paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; text-align: left; }
.devis-path { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; border: 1px solid var(--pt-line); border-radius: 8px; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.devis-path:hover { border-color: var(--pt-cta); box-shadow: 0 12px 28px -18px rgba(12, 53, 36, 0.4); }
.devis-path--alt { background: var(--pt-forest); border-color: var(--pt-forest); }
.devis-path__k { font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--pt-ink); }
.devis-path__d { font-size: 14px; line-height: 1.55; color: var(--pt-body-soft); }
.devis-path__go { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--pt-forest); }
.devis-path--alt .devis-path__k { color: #fff; }
.devis-path--alt .devis-path__d { color: rgba(255, 255, 255, 0.86); }
.devis-path--alt .devis-path__go { color: var(--pt-cta); }
.devis-empty__note { margin-top: 22px; font-size: 13.5px; color: var(--pt-body-softer); }
@media (max-width: 640px) { .devis-empty__paths { grid-template-columns: 1fr; } }
.devis-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 48px; align-items: start; }
.devis-list__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.devis-list__head h2 { font-size: 22px; }
.devis-list__head span { color: var(--pt-body-softer); font-size: 13.5px; font-weight: 600; }
.devis-list { background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; overflow: hidden; }
.devis-item { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-bottom: 1px solid #eef2ea; }
.devis-item img { width: 76px; height: 58px; object-fit: cover; border-radius: 4px; background: var(--pt-line-2); flex: 0 0 auto; }
.devis-item__info { flex: 1; min-width: 0; }
.devis-item__name { font-size: 15.5px; font-weight: 700; }
.devis-item__tag { color: var(--pt-body-softer); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }
.devis-item__qty { display: flex; align-items: center; border: 1px solid var(--pt-line-3); border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.devis-item__qty button { width: 32px; height: 36px; border: 0; background: var(--pt-cream-2); color: var(--pt-forest); font-size: 16px; font-weight: 700; cursor: pointer; }
.devis-item__qty input { width: 54px; height: 36px; border: 0; border-inline: 1px solid var(--pt-line-3); text-align: center;
font-size: 14.5px; font-weight: 700; background: #fff; color: var(--pt-ink); -moz-appearance: textfield; outline: none; }
.devis-item__qty input:focus { background: var(--pt-cream-2); }
.devis-item__qty input::-webkit-outer-spin-button, .devis-item__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Fixed width, not min-width: "unité" is wider than "m²", which pushed the +/- controls of
each row to a different x and made the list look ragged. */
.devis-item__unit { display: inline-flex; align-items: center; height: 36px; padding: 0 8px; background: var(--pt-cream-2);
color: var(--pt-body-soft); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; width: 56px;
justify-content: center; flex: 0 0 56px; }
.devis-item__rm { width: 34px; height: 34px; border: 1px solid var(--pt-line-2); border-radius: 4px; background: #fff; color: var(--pt-body-softer); font-size: 15px; cursor: pointer; flex: 0 0 auto; }
.devis-item__rm:hover { color: #c0392b; border-color: #c0392b; }
.devis-list__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; background: var(--pt-cream-2); }
.devis-list__foot a { font-size: 13.5px; font-weight: 700; }
.devis-list__foot span { color: var(--pt-body-soft); font-size: 12.5px; }
/* One row packs thumbnail, name, stepper, unit chip and remove button on a single line, which
needs about 370px of fixed widths before the name gets any space at all. Under 560px that
pushed the whole document wider than the viewport, so the header and the form were clipped
too, not just the list. Wrap the controls onto their own line instead. */
@media (max-width: 560px) {
.devis-item { flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; }
.devis-item img { width: 56px; height: 44px; }
.devis-item__info { flex: 1 1 140px; }
/* Keep the stepper and the remove button together on the wrapped line: pushed apart with
margin-left:auto the button dropped to a line of its own at 320px. */
.devis-item__qty { margin-left: 66px; }
.devis-item__rm { margin-left: 4px; }
.devis-list__head { flex-wrap: wrap; gap: 4px 16px; }
.devis-list__foot { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; }
}
/* Below ~365px the indent that lines the controls up under the product name costs the 66px
that the remove button needs, and the button drops to a line of its own. */
@media (max-width: 365px) {
.devis-item__qty { margin-left: 0; }
}
.devis-form { background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 104px; }
.devis-form h2 { font-size: 20px; margin-bottom: 4px; }
.devis-form .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.devis-form label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pt-body-soft); }
/* Inputs keep an intrinsic ~20ch width unless told otherwise, which held the two-column
row open and pushed the contact form past the viewport on a phone. */
.devis-form :is(input, textarea) { border: 1px solid var(--pt-line-3); border-radius: 4px; padding: 12px 13px; font-size: 14.5px; background: var(--pt-cream); outline: none; width: 100%; min-width: 0; }
.devis-form :is(input, textarea):focus { border-color: var(--pt-cta); background: #fff; }
.devis-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.devis-form button[type="submit"] { background: var(--pt-cta); border: 0; color: var(--pt-forest-deep); font-size: 15.5px; font-weight: 800; padding: 16px; border-radius: 4px; cursor: pointer; }
.devis-form button[type="submit"]:hover { background: var(--pt-cta-hover); }
.devis-form__note { color: var(--pt-body-softer); font-size: 12px; line-height: 1.5; text-align: center; }
.hp-field { position: absolute; left: -9999px; }
@media (max-width: 1024px) { .devis-grid { grid-template-columns: 1fr; } .devis-form { position: static; } }
/* ---------- Réalisations ---------- */
.shop-head--photo { position: relative; overflow: hidden; padding: var(--sec-y) 0; }
.shop-head__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-head__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(9,42,28,0.94) 0%, rgba(9,42,28,0.75) 45%, rgba(9,42,28,0.35) 100%); }
.shop-head__inner { position: relative; }
.proj-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.proj-grid--flat { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
.proj-grid .tile__sub { display: block; color: var(--pt-on-dark-2); font-size: 12.5px; font-weight: 500; margin-top: 3px; }
.tile__sub { display: block; color: var(--pt-on-dark-2); font-size: 12.5px; font-weight: 500; margin-top: 3px; }
.proj-empty { text-align: center; color: var(--pt-body-soft); padding: 48px 0; }
.proj { padding: 18px 0 var(--sec-y); }
.proj .eyebrow { margin-top: 20px; }
.proj__media { margin: 26px 0 40px; border-radius: 8px; overflow: hidden; }
.proj__body { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 56px; align-items: start; }
.proj__facts { background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 26px; position: sticky; top: 104px; }
.proj__facts h2 { font-size: 18px; margin-bottom: 16px; }
.proj__facts dl { margin: 0 0 20px; display: grid; gap: 14px; }
.proj__facts dt { color: var(--pt-body-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.proj__facts dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; }
.proj__facts .btn { width: 100%; }
/* ---------- Blog ---------- */
.blog-head { padding: 30px 0 8px; }
.blog-head__sub { margin: 14px 0 0; color: var(--pt-body-soft); font-size: 17px; line-height: 1.6; max-width: 52ch; }
.blog-body { padding: 28px 0 var(--sec-y); }
.post-lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; overflow: hidden; color: inherit; margin-bottom: 40px; }
.post-lead__media { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--pt-line-2); }
.post-lead__media img { width: 100%; height: 100%; object-fit: cover; }
.post-lead__body { padding: 34px 40px 34px 0; }
.post-lead__tags { display: flex; gap: 8px; margin-bottom: 16px; }
.tag { display: inline-block; border: 1px solid var(--pt-line-3); border-radius: 99px; padding: 5px 13px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pt-body-soft); }
.tag--accent { background: var(--pt-cta); border-color: var(--pt-cta); color: var(--pt-forest-deep); }
.post-lead__title { font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 14px; }
.post-lead__excerpt { margin: 0 0 18px; color: var(--pt-body-soft); font-size: 15.5px; line-height: 1.65; }
.post-meta { color: var(--pt-body-softer); font-size: 13px; font-weight: 500; }
.post-list { display: grid; gap: 1px; background: var(--pt-line-2); border: 1px solid var(--pt-line-2); border-radius: 8px; overflow: hidden; }
.post-list--cols { grid-template-columns: repeat(3, 1fr); background: transparent; border: 0; gap: 22px; }
.post-row { display: flex; align-items: center; gap: 22px; background: #fff; padding: 18px 22px; color: inherit; }
.post-row:hover { background: var(--pt-cream-2); }
.post-list--cols .post-row { flex-direction: column; align-items: stretch; gap: 14px; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 0 0 18px; overflow: hidden; }
.post-row__media { flex: 0 0 auto; width: 132px; aspect-ratio: 16/11; border-radius: 4px; overflow: hidden; background: var(--pt-line-2); }
.post-list--cols .post-row__media { width: 100%; border-radius: 0; }
.post-row__media img { width: 100%; height: 100%; object-fit: cover; }
.post-list--cols .post-row__body { padding-inline: 20px; }
.post-row__cat { display: block; color: var(--pt-cta); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.post-row__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
/* ---------- Guide / single post ---------- */
.guide__head { padding: 26px 0 0; }
.guide__head .page-head__title { margin-top: 8px; }
.guide__cover { margin: 34px 0 40px; }
.guide__cover img { border-radius: 8px; width: 100%; }
.guide__content { padding-bottom: var(--sec-y); font-size: 17px; }
.guide__content h2 { font-size: clamp(24px, 2.6vw, 30px); }
.guide__cta { background: var(--pt-cream-2); border-block: 1px solid var(--pt-line); padding: var(--sec-y) 0; }
/* ---------- About page ---------- */
.about-head { background: var(--pt-forest-deep); color: #fff; padding: 34px 0 var(--sec-y); }
.about-head__title { color: #fff; font-size: clamp(34px, 4.2vw, 54px); }
.about-head__sub { margin: 18px 0 0; color: var(--pt-on-dark-2); font-size: 17px; line-height: 1.62; max-width: 62ch; }
.pledges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.pledge { background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 30px 28px; }
.pledge__num { font-family: var(--font-serif); font-size: 34px; color: var(--pt-cta); display: block; margin-bottom: 12px; }
.pledge h3 { font-size: 19px; margin-bottom: 10px; }
.pledge p { margin: 0; color: var(--pt-body-soft); font-size: 14.5px; line-height: 1.6; }
.certs-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.certs-block p { color: var(--pt-body-soft); font-size: 16px; line-height: 1.65; margin-top: 18px; }
.cert-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cert-cards li { background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 26px 22px; text-align: center; }
.cert-cards b { display: block; font-size: 22px; letter-spacing: -0.02em; color: var(--pt-forest); }
.cert-cards span { display: block; margin-top: 4px; color: var(--pt-body-soft); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 1024px) {
.proj-grid { grid-template-columns: repeat(2, 1fr); }
.proj-grid--flat { grid-template-columns: repeat(2, 1fr); }
.proj__body { grid-template-columns: 1fr; gap: 34px; }
.proj__facts { position: static; }
.post-lead { grid-template-columns: 1fr; }
.post-lead__body { padding: 0 30px 30px; }
.post-list--cols { grid-template-columns: 1fr; }
.certs-block { grid-template-columns: 1fr; gap: 34px; }
.pledges { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.proj-grid, .proj-grid--flat { grid-template-columns: 1fr; }
.post-row { flex-direction: column; align-items: stretch; }
.post-row__media { width: 100%; }
.cert-cards { grid-template-columns: 1fr; }
}
/* ---------- Zone d'intervention ---------- */
.zone { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.zone p { color: var(--pt-body-soft); font-size: 16px; line-height: 1.65; margin: 0 0 24px; }
.zone__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.zone__list li { background: #fff; border: 1px solid var(--pt-line-2); border-radius: 99px; padding: 9px 18px; font-size: 14px; font-weight: 600; color: var(--pt-forest); }
.zone__list .zone__more { background: var(--pt-forest); border-color: var(--pt-forest); color: #fff; }
/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; }
.faq__side p { color: var(--pt-body-soft); font-size: 16px; line-height: 1.6; margin: 18px 0 24px; }
.faq__list { display: grid; gap: 1px; background: var(--pt-line-2); border: 1px solid var(--pt-line-2); border-radius: 8px; overflow: hidden; }
.faq__item { background: #fff; }
.faq__item summary { list-style: none; cursor: pointer; padding: 20px 24px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--pt-cta); font-size: 22px; font-weight: 700; line-height: 1; flex: 0 0 auto; }
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { background: var(--pt-cream-2); }
.faq__item p { margin: 0; padding: 0 24px 22px; color: var(--pt-body-soft); font-size: 15px; line-height: 1.65; max-width: 68ch; }
.family__link { font-size: 13px; font-weight: 700; color: var(--pt-forest); }
@media (max-width: 1024px) { .zone, .faq { grid-template-columns: 1fr; gap: 32px; } }
/* ---------- Lightbox ---------- */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(6, 24, 15, 0.94); display: none; align-items: center; justify-content: center; padding: 5vh 6vw; }
.lb.is-open { display: flex; }
.lb__stage { margin: 0; max-width: 100%; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.lb__img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 6px; }
.lb__video { width: min(90vw, 1100px); aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 6px; background: #000; }
.lb__bar { position: absolute; left: 0; right: 0; bottom: 3vh; display: flex; justify-content: center; gap: 18px; align-items: baseline; color: #fff; font-size: 14px; padding-inline: 6vw; }
.lb__counter { color: var(--pt-green-soft); font-weight: 700; font-size: 13px; }
.lb__close { position: absolute; top: 2.4vh; right: 2.4vw; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lb__close:hover { background: rgba(255,255,255,0.12); }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28); background: rgba(0,0,0,0.25); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.lb__nav:hover { background: rgba(255,255,255,0.15); }
.lb__nav--prev { left: 2vw; }
.lb__nav--next { right: 2vw; }
/* Gallery triggers */
.tile__badge { position: absolute; top: 12px; right: 12px; background: rgba(12,53,36,0.85); color: #fff; font-size: 12px; font-weight: 700; border-radius: 99px; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.proj__gallery { margin: 26px 0 40px; }
.proj__cover { display: block; width: 100%; padding: 0; border: 0; background: var(--pt-line-2); border-radius: 8px; overflow: hidden; position: relative; cursor: zoom-in; }
.proj__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.proj__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: rgba(12,53,36,0.8); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; }
.proj__play--sm { width: 30px; height: 30px; font-size: 12px; }
.proj__thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.proj__thumb { position: relative; width: 108px; aspect-ratio: 4/3; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--pt-line-2); cursor: pointer; }
.proj__thumb img { width: 100%; height: 100%; object-fit: cover; }
.proj__thumb--more { background: var(--pt-forest); color: #fff; font-weight: 700; font-size: 15px; }
@media (max-width: 640px) { .lb__nav { width: 42px; height: 42px; font-size: 24px; } .proj__thumb { width: 84px; } }
/* ---------- Presentation video ---------- */
.video-block--wide { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.video-block__intro p:not(.eyebrow) { color: var(--pt-body-soft); font-size: 16px; line-height: 1.65; margin-top: 18px; }
.video-block__poster { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--pt-forest); border-radius: 8px; overflow: hidden; cursor: pointer; }
.video-block__poster img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.92; transition: transform 0.4s ease, opacity 0.2s ease; }
.video-block__poster:hover img { transform: scale(1.03); opacity: 1; }
.video-block__play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; background: var(--pt-cta); color: var(--pt-forest-deep); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6); transition: transform 0.2s ease; }
.video-block__poster:hover .video-block__play { transform: scale(1.08); }
.video-block__duration { position: absolute; left: 16px; bottom: 16px; background: rgba(12,53,36,0.85); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 13px; border-radius: 99px; }
@media (max-width: 1024px) { .video-block--wide { grid-template-columns: 1fr; gap: 28px; } }
/* ---------- Catalogue hub ---------- */
.hub { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 56px; align-items: start; }
.hub__copy { font-size: 16.5px; }
.hub__copy h2 { font-size: clamp(22px, 2.4vw, 28px); margin-block-start: 34px; }
.hub__copy h3 { font-size: 19px; margin-block-start: 24px; }
.hub__copy ul { padding-left: 1.1em; }
.hub__copy li { margin-bottom: 6px; }
.hub__aside { background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 28px; position: sticky; top: 104px; }
.hub__aside h2 { font-size: 20px; margin-bottom: 10px; }
.hub__aside p { color: var(--pt-body-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.hub__aside .btn { width: 100%; }
.hub__tel { display: block; text-align: center; margin-top: 12px; font-weight: 700; font-size: 16px; }
@media (max-width: 1024px) { .hub { grid-template-columns: 1fr; gap: 32px; } .hub__aside { position: static; } }
/* Hub editorial sits below the grid; keep it visually secondary to the products. */
.hub-editorial { padding-block: var(--sec-y); }
.hub-editorial .hub__copy h2:first-of-type { margin-block-start: 8px; }
.pagination { margin-top: 40px; text-align: center; }
/* ---------- WhatsApp (every ranking competitor offers it; we were missing it) ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; gap: 0;
background: #25d366; color: #fff; border-radius: 999px; padding: 14px; box-shadow: 0 10px 26px -10px rgba(0,0,0,0.45);
transition: gap 0.2s ease, padding 0.2s ease; }
.wa-float:hover, .wa-float:focus-visible { color: #fff; gap: 9px; padding-right: 20px; }
.wa-float__label { max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 14.5px; transition: max-width 0.25s ease; }
.wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { max-width: 110px; }
@media (max-width: 640px) { .wa-float { right: 14px; bottom: 14px; padding: 13px; } }
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float__label { transition: none; } }
/* ---------- Guide / content pages ---------- */
.guide-page__meta { margin: 14px 0 0; color: var(--pt-green-soft); font-size: 13.5px; }
.guide-page__grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 56px; align-items: start; }
.guide-page__body { font-size: 17px; }
.guide-page__body h2 { font-size: clamp(23px, 2.5vw, 30px); margin-block-start: 44px; scroll-margin-top: 90px; }
.guide-page__body h3 { font-size: 19px; margin-block-start: 28px; }
.guide-page__body p, .guide-page__body li { line-height: 1.75; }
.guide-page__body ul, .guide-page__body ol { padding-left: 1.2em; }
.guide-page__body li { margin-bottom: 8px; }
.guide-page__body table { width: 100%; border-collapse: collapse; margin-block: 22px; font-size: 15px; }
.guide-page__body th, .guide-page__body td { border: 1px solid var(--pt-line-2); padding: 11px 13px; text-align: left; }
.guide-page__body th { background: var(--pt-cream-2); font-weight: 700; }
.guide-page__body a { text-decoration: underline; text-underline-offset: 3px; }
.toc { background: var(--pt-cream-2); border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 22px 26px; margin-bottom: 34px; }
.toc__title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pt-body-soft); margin: 0 0 12px; }
.toc ol { margin: 0; padding-left: 1.1em; display: grid; gap: 7px; font-size: 15px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.guide-page__aside { position: sticky; top: 104px; }
.hub__note { margin-top: 14px; font-size: 12.5px; color: var(--pt-body-softer); line-height: 1.5; }
.faq__list--inline { border-radius: 8px; margin-top: 18px; }
@media (max-width: 1024px) { .guide-page__grid { grid-template-columns: 1fr; gap: 34px; } .guide-page__aside { position: static; } }
/* ---------- About: implantations, méthode, clients ---------- */
.sites { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; margin-top: 36px; }
.site-card { background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 26px 24px; }
.site-card--main { background: var(--pt-forest); border-color: var(--pt-forest); }
.site-card--main h3 { color: #fff; }
/* Doubled class: the plain `.site-card p` rule below ties on specificity and would win on
source order, which left the dark card's text grey-on-green and effectively unreadable. */
.site-card.site-card--main p { color: rgba(255, 255, 255, 0.86); }
.site-card__tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pt-green-label); margin-bottom: 10px; }
.site-card--main .site-card__tag { color: var(--pt-green-soft); }
.site-card h3 { font-size: 21px; margin-bottom: 8px; }
.site-card p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--pt-body-soft); }
.site-card__addr { font-weight: 600; }
.site-card--main .btn { margin-top: 4px; }
.sites__note { margin: 26px 0 0; max-width: 72ch; color: var(--pt-body-soft); font-size: 15.5px; line-height: 1.7; }
.steps--light { background: transparent; padding: 0; border-radius: 0; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 36px; }
.steps--light .step__num { color: var(--pt-cta); border-bottom: 1px solid var(--pt-line-2); }
.steps--light .step__title { color: var(--pt-ink); }
.steps--light .step__desc { color: var(--pt-body-soft); }
.clients { list-style: none; margin: 36px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--pt-line-2); border: 1px solid var(--pt-line-2); border-radius: 8px; overflow: hidden; }
.clients__item { background: #fff; padding: 22px 24px; }
.clients__item strong { display: block; font-size: 16.5px; letter-spacing: -0.01em; }
.clients__item span { display: block; margin-top: 5px; color: var(--pt-body-soft); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 1024px) { .sites { grid-template-columns: 1fr; } .steps--light { grid-template-columns: 1fr 1fr; } .clients { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .steps--light, .clients { grid-template-columns: 1fr; } }
/* ---------- Mobile catalogue (kept at the end: it overrides base rules declared later) ---------- */
@media (max-width: 640px) {
/* Family tiles ran ~550 px tall each on a phone, so four of them meant 2 200 px of
scrolling just to see the four ranges. Horizontal rows instead: thumbnail, name, arrow. */
.families { grid-template-columns: 1fr; gap: 10px; }
.family { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px;
padding: 10px; border: 1px solid var(--pt-line); border-radius: 10px; background: #fff; }
.family__media { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--pt-cream); }
.family__media img { width: 100%; height: 100%; object-fit: contain; }
.family__body { padding: 0; display: grid; gap: 2px; }
.family__title { font-size: 16.5px; line-height: 1.25; margin: 0; }
.family__desc { display: none; }
.family__foot { margin: 4px 0 0; padding: 0; border: 0; justify-content: flex-start; gap: 12px; }
.family__tag { display: none; }
.family__link { font-size: 13px; }
/* Filter pills wrapped onto six rows at 390 px, pushing the grid off the screen.
A swipeable strip is the pattern people expect on a phone. */
.pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); }
.pills::-webkit-scrollbar { display: none; }
.pills > li { flex: 0 0 auto; }
/* The strip hides the scrollbar, so nothing said it was swipeable: the last pill simply
stopped at the screen edge and read as the end of the list. Fading the trailing 34px
shows a pill mid-cut, which is the cue. Where the pills already fit, the faded band is
empty and the mask is invisible. */
.shop-filters .pills {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
.shop-filters__count { display: block; margin: 10px 0 0; }
/* Two certification marks per row rather than one tall column. */
.badges__list { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
.cert__desc { font-size: 12px; }
/* The quote button wrapped to three lines inside a card. */
.pcard__foot .family__add, .rcard__row .family__add { font-size: 12px; padding: 8px 10px; white-space: nowrap; }
.pcard__foot { flex-wrap: wrap; gap: 8px; }
}
/* Submit buttons while the POST is in flight: dimmed, not clickable, with a spinner so the
wait reads as progress rather than a dead button. */
button.is-sending { opacity: 0.72; cursor: progress; position: relative; padding-left: 42px; }
button.is-sending::before {
content: ""; position: absolute; left: 18px; top: 50%; width: 15px; height: 15px;
margin-top: -8px; border-radius: 50%; border: 2px solid currentColor;
border-right-color: transparent; animation: pt-spin 0.7s linear infinite;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
button.is-sending::before { animation-duration: 2.4s; }
}
/* 404 and search results. Both are low-traffic dead ends, so they reuse the existing type
scale and button styles and add only the list layout neither template could inherit. */
.section--404 { padding-block: clamp(56px, 9vw, 104px); }
.lead-404 { max-width: 58ch; color: var(--ink-soft, #57685E); }
.links-404,
.search-results { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 2px; }
.links-404 li,
.search-results li {
display: grid; gap: 4px; padding: 18px 0;
border-top: 1px solid var(--rule, #E3EADF);
}
.links-404 li:last-child,
.search-results li:last-child { border-bottom: 1px solid var(--rule, #E3EADF); }
.links-404 a,
.search-results a { font-weight: 700; text-decoration: none; }
.links-404 a:hover,
.search-results a:hover { text-decoration: underline; }
.links-404 span,
.search-results span { color: var(--ink-soft, #57685E); font-size: 0.94rem; line-height: 1.55; }
.actions-404 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.search-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; max-width: 560px; }
.search-form input[type="search"] {
flex: 1 1 240px; min-width: 0; padding: 12px 14px;
border: 1px solid var(--rule, #E3EADF); border-radius: 4px; font: inherit;
}
.search-form button {
padding: 12px 20px; border: 0; border-radius: 4px; font: inherit; font-weight: 700;
cursor: pointer; background: var(--forest, #144C33); color: #fff;
}
/* ---------- Consent bar ----------
Sits above the WhatsApp float on z-index but out of its way on screen, so the two never
overlap on mobile. Enters after first paint (JS adds .is-in) rather than competing with
the hero, and is a plain block in the flow of the footer for anyone with JS off, which is
also why it ships hidden. */
.consent { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 95; margin-inline: auto;
max-width: 620px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
background: var(--pt-forest-deep); color: var(--pt-on-dark); border-radius: 10px;
padding: 16px 20px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease; }
.consent.is-in { opacity: 1; transform: none; }
.consent__text { margin: 0; flex: 1 1 260px; font-size: 13.5px; line-height: 1.55; }
.consent__text a { color: var(--pt-green-soft); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: 10px; margin-left: auto; }
.consent__btn { font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
padding: 9px 18px; border-radius: 999px; border: 1px solid transparent;
background: var(--pt-cta); color: #fff; }
.consent__btn:hover { background: var(--pt-cta-hover); }
.consent__btn--ghost { background: transparent; border-color: var(--pt-line-dark); color: var(--pt-on-dark); }
.consent__btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
/* The WhatsApp float lives bottom-right; on a phone the bar would land on top of it. */
@media (max-width: 640px) {
.consent { left: 12px; right: 12px; bottom: 88px; padding: 14px 16px; }
.consent__actions { width: 100%; margin-left: 0; }
.consent__btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
/* ---------- Documents: cards, aside, gate modal ---------- */
.docs { padding-block: clamp(56px, 7vw, 88px); background: var(--pt-cream-2); }
.docs__lead { margin: 14px 0 0; max-width: 62ch; color: var(--pt-body-soft); font-size: 16.5px; line-height: 1.62; text-wrap: pretty; }
.docs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.doc-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start;
background: #fff; border: 1px solid var(--pt-line-2); border-radius: 8px; padding: 24px; }
/* The covers are two different shapes (A4 portrait, landscape brochure). Capping the height
and letting width follow keeps the two cards level without distorting either. */
.doc-card__cover { width: 100%; max-height: 190px; object-fit: contain; object-position: top left;
border-radius: 4px; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.5); }
.doc-card__title { font-size: 20px; margin: 0 0 8px; }
.doc-card__desc { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--pt-body-soft); }
.doc-card__meta { margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--pt-body-softer); }
.doc-card__btn { padding: 13px 24px; font-size: 14.5px; }
.doc-aside { display: flex; gap: 16px; align-items: center; margin-top: 26px; padding: 18px 20px;
background: var(--pt-cream-2); border: 1px solid var(--pt-line-2); border-radius: 8px; }
.doc-aside__cover { width: 62px; border-radius: 3px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5); }
.doc-aside__label { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--pt-green-label, var(--pt-body-softer)); }
.doc-aside__title { margin: 4px 0 6px; font-weight: 700; font-size: 15.5px; }
.doc-aside__btn { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700;
color: var(--pt-forest); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.doc-aside__btn:hover { color: var(--pt-cta-hover); }
.docmodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.docmodal__backdrop { position: absolute; inset: 0; background: rgba(12, 53, 36, 0.55); }
.docmodal__panel { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
background: var(--pt-cream); border-radius: 10px; padding: 34px clamp(22px, 4vw, 38px);
box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.55); }
.docmodal__x { position: absolute; top: 10px; right: 14px; border: 0; background: none; cursor: pointer;
font-size: 30px; line-height: 1; color: var(--pt-body-softer); }
.docmodal__x:hover { color: var(--pt-ink); }
.docmodal__title { font-size: clamp(23px, 3vw, 28px); margin: 0 0 6px; }
.docmodal__doc { margin: 0 0 4px; font-weight: 700; color: var(--pt-forest); }
.docmodal__doc:empty { display: none; }
.docmodal__note { margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--pt-body-soft); }
.docmodal__form .devis-form__row { margin-bottom: 0; }
.docmodal__form button[type="submit"] { width: 100%; margin-top: 18px; }
.docmodal__done-state .btn { display: block; text-align: center; }
/* Stops the page behind the dialog scrolling under the visitor's finger on iOS. */
body.has-modal { overflow: hidden; }
@media (max-width: 900px) {
.docs__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.doc-card { grid-template-columns: 1fr; gap: 18px; }
.doc-card__cover { max-height: 160px; object-position: top center; }
}
.docmodal__error { margin: -10px 0 18px; padding: 11px 14px; border-radius: 6px; font-size: 14px;
background: #fdecec; color: #9b1c1c; border: 1px solid #f5c2c2; }
/* ---------- Surface helper on m² product pages ---------- */
.surf { margin: 14px 0 4px; border-top: 1px solid var(--pt-line-2); padding-top: 14px; }
.surf__toggle { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--pt-forest);
text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.surf__toggle::-webkit-details-marker { display: none; }
.surf__toggle::before { content: "+ "; }
.surf[open] .surf__toggle::before { content: "− "; }
.surf__body { margin-top: 14px; }
.surf__row { display: flex; align-items: flex-end; gap: 10px; }
.surf__row label { flex: 1; display: block; }
.surf__row span { display: block; font-size: 12px; font-weight: 600; color: var(--pt-body-soft); margin-bottom: 5px; }
.surf__in { width: 100%; padding: 11px 12px; font: inherit; font-size: 15px;
border: 1px solid var(--pt-line-2); border-radius: 4px; background: #fff; }
.surf__in:focus-visible { outline: 2px solid var(--pt-cta); outline-offset: 1px; }
.surf__x { padding-bottom: 12px; color: var(--pt-body-softer); }
.surf__out { margin: 12px 0 0; font-weight: 700; font-size: 15.5px; color: var(--pt-forest); }
.surf__apply { margin-top: 10px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 700;
cursor: pointer; border: 1px solid var(--pt-forest); border-radius: 4px;
background: transparent; color: var(--pt-forest); }
.surf__apply:hover { background: var(--pt-forest); color: #fff; }
.surf__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--pt-body-softer); }