`, collapsing the whole
section to ~62ch instead of the intended 82rem. Do not re-add max-width to this selector. */
/* 25px each: two adjacent sections each contribute their own padding-block,
so 25px (this section's bottom) + 25px (the next section's top) = the
50px total visible gap Cedric asked for between sections. */
section { padding-block: 25px; }
.hero { padding-block: clamp(4rem, 8vw, 7rem) 25px; }
/* h1/.lead carry no width cap by default - matches how every other /
on the page now renders (full content-column width, no reading-measure
clip), per the source. The 20ch/46ch caps below apply only under
:has(.hero__shot), the 2-column image-beside-text layout, where a narrow
text column is the actual point (room is reserved for the image). */
/* Scoped to p.lead (the body-copy paragraphs), not h2.lead: the source's
own H2 tagline is a real heading and must render like every other H2 on
the page (Newsreader, same size/weight/color) - it was being overridden
into the muted lead-paragraph treatment just because it shared the
".lead" class with the actual paragraphs. */
.hero p.lead { font-family: var(--font-text); font-weight: 400; letter-spacing: normal; font-size: var(--t-lg); color: var(--ink-soft); margin-top: var(--s5); }
.hero h2.lead { margin-top: var(--s5); }
/* Cedric's explicit call, 2026-09-08: H1 centered, everything else (H2
tagline, both lead paragraphs) stays left-aligned - only the heading and
the button (see .btn rule above) are centered, not the full block. */
.hero:not(:has(.hero__shot)) h1 { text-align: center; }
/* Eyebrow kicker, matching the homepage's own .hero__kicker (index.html) -
same flanking-rule treatment, minus its scroll-triggered .is-loaded fade-
in (this page has no runtime JS for chrome, so the rules just render
visible immediately rather than animating in). Cedric's explicit call,
2026-09-09, applied to all 12 service/portfolio/pricing pages. */
.hero:not(:has(.hero__shot)) .hero__kicker { text-align: center; }
.hero__kicker { font-family: var(--font-text); font-size: var(--t-xs); line-height: 1.5;
letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s5); }
.hero__kicker b { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: .9ch; }
.hero__kicker b::before, .hero__kicker b::after { content: ""; width: 2rem; height: 2px; background: var(--accent); flex: none; }
/* The mechanically-built label ("SERVICES · ") runs longer than
the homepage's own short kicker text, and wraps to 2-3 lines on a phone
width - confirmed visually at 390px: the left/right rules stayed
pinned to the flex row's ends and centered against the now-tall
wrapped block, landing next to the middle line instead of flanking the
text. Cedric's call, 2026-09-09: keep the rules on mobile (an earlier
pass had dropped them entirely - wrong call, flagged as looking bare),
just re-oriented above/below the text instead of beside it - a stacked
rule-text-rule column holds up at any wrap length, unlike side rules. */
@media (max-width: 700px) {
.hero__kicker b { flex-direction: column; gap: .5rem; }
}
.hero:has(.hero__shot) h1 { max-width: 20ch; }
.hero:has(.hero__shot) .lead { max-width: 46ch; }
/* Cedric's standing preference: buttons default to centered. Scoped to the
no-image hero (single-column flow) only - the 2-column, image-beside-text
case further down keeps its own justify-self:start, matching the image
column rather than the full hero width. */
.hero:not(:has(.hero__shot)) > .btn { display: block; width: max-content; margin-inline: auto; }
/* Cedric's explicit call, 2026-09-09: the hero CTA button needs real air
above and below it, not just whatever gap its neighboring
happened to carry - it read as cramped against the paragraphs on either
side, especially the 7 service pages where real lead copy now renders
after the button too (see service.mjs's postCtaHtml). Applies to both the
centered and image-beside-text hero shapes. */
.hero > .btn { margin-block: 50px; }
.hero__shot { max-width: 30rem; margin-top: var(--s5); border-radius: var(--r-lg); overflow: clip; }
.hero__shot img { width: 100%; height: auto; display: block; }
@media (min-width: 860px) {
/* Pages whose hero carries an image (google-ads, tarifs-offres): place it
beside the text instead of stacking it below, so it doesn't leave the
right half of the viewport empty on first view. Portfolio's hero has no
heroShot, so :has() leaves it in its original single-column flow. */
.hero:has(.hero__shot) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem); column-gap: var(--s7); align-items: start; }
.hero:has(.hero__shot) > :not(.hero__shot) { grid-column: 1; }
.hero:has(.hero__shot) .hero__shot { grid-column: 2; grid-row: 1; margin-top: 0; }
/* Grid items default to justify-items:stretch; .btn is display:inline-block
and must stay sized to its own text, not stretch to the text column's width. */
.hero:has(.hero__shot) > .btn { justify-self: start; }
}
.prose__portrait { max-width: 14rem; margin-top: var(--s5); border-radius: var(--r-lg); overflow: clip; }
.prose__portrait img { width: 100%; height: auto; display: block; }
@media (min-width: 860px) {
/* Same fix as the hero's :has(.hero__shot): a portrait dropped below a
bullet list left it stranded under empty space on a wide viewport.
Generic on `section:has(.prose__portrait)`, not scoped to any one
page, so it applies anywhere this exact pattern (prose text ending in
a portrait image) shows up. Confirmed 2026-09-08. */
section:has(.prose__portrait) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 14rem); column-gap: var(--s7); align-items: center; }
section:has(.prose__portrait) > :not(.prose__portrait) { grid-column: 1; }
/* span 2, not just row 1: this pattern's text column starts with a short
eyebrow label *then* the real heading - pinning the image to row 1
alone left the eyebrow isolated beside it with a big gap before the
heading (row 2) actually appeared. Spanning both groups them under the
image instead. `span N` (not `1 / -1`) because it works in an implicit
grid regardless of total row count - see the hero's own grid-row:1/-1
mistake in an earlier round for why that matters. */
section:has(.prose__portrait) .prose__portrait { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
/* Desktop-only 3D portfolio carousel (templates/common.mjs's
portfolioCarousel()) - Cedric's request, 2026-09-10, explicitly desktop
only. Hidden below 820px, the same breakpoint .nav uses to switch to the
mobile menu (see .nav__list/.nav__mobile above) - "desktop" on this site
already means "above 820px", so this reuses that line rather than
inventing a second one. The script itself also skips starting its
autoplay timer under that width or prefers-reduced-motion. */
.portfolio-carousel { display: none; }
@media (min-width: 821px) {
.portfolio-carousel { display: block; margin-top: var(--s6); }
.portfolio-carousel__label { text-align: center; font-size: var(--t-xs); letter-spacing: .06em;
text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--s4); }
/* 1.5x, Cedric's request 2026-09-10 - every size below scaled from the
original by that same factor (stage 40rem->60rem, item 8x4.5rem->
12x6.75rem, center 19x10.7rem->28.5x16.05rem, button 2.5rem->3.75rem),
keeping every ratio (aspect-ratio, item/center proportions) identical. */
.portfolio-carousel__stage { position: relative; width: 100%; max-width: 60rem; margin: 0 auto;
aspect-ratio: 16/7; perspective: 2100px; }
.portfolio-carousel__ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.portfolio-carousel__item { position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.portfolio-carousel__item img { width: 12rem; height: 6.75rem; object-fit: cover; border-radius: var(--r-md);
box-shadow: var(--shadow-card); opacity: .85; }
.portfolio-carousel__center { position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; pointer-events: none; }
.portfolio-carousel__center-img { width: 28.5rem; height: 16.05rem; object-fit: cover; border-radius: var(--r-lg);
box-shadow: var(--shadow-card); transition: opacity .3s ease; }
.portfolio-carousel__controls { display: flex; justify-content: center; gap: var(--s3); margin-top: var(--s4); }
.portfolio-carousel__btn { width: 3.75rem; height: 3.75rem; border-radius: var(--r-pill); border: 1px solid var(--paper-edge);
background: var(--paper); color: var(--ink); font-size: 1.95rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center; }
.portfolio-carousel__btn:hover { background: var(--surface); }
}
/* padding-inline only, not the padding shorthand: the shorthand set
padding-top/bottom too, which (being a class selector, higher specificity
than the shared `section { padding-block }` rule) silently overrode it
with a smaller value (~56px vs ~72px) - every cta-band transition ended
up a different size than a plain section-to-section one. Padding-block
now comes from the shared rule like every other section; only the
horizontal box padding stays cta-band-specific. */
.cta-band { background: var(--surface); border-radius: var(--r-lg); padding-inline: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.cta-band h5 { font: inherit; margin: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* numbered steps */
.steps{list-style:none;counter-reset:s;padding:0}
.steps > li{counter-increment:s;padding-left:3rem;position:relative;margin-bottom:var(--s6)}
.steps > li::before{content:counter(s);position:absolute;left:0;top:0;font-family:var(--font-display);font-size:var(--t-lg);color:var(--accent)}
.steps .frame{margin-top:var(--s5)}
/* A step carrying a real screenshot goes text-beside-image instead of
stacking the shot below full-width text - same pattern as
.hero:has(.hero__shot) / .cards--rows / .prose-shot. The counter badge
above is position:absolute, so it's excluded from this grid. .step-copy
(h3 + .step-body together) is ONE grid item in column 1, matching
.card-copy's own fix - h3 and step-body as two separate auto-placed
items each claiming their own row was the actual bug: the shot pins to
row 1 in column 2, so row 1's height became the shot's full height and
the paragraph (row 2) landed below the whole image, not beside it. */
@media (min-width: 860px) {
.steps > li:has(.frame){display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,26rem);column-gap:var(--s7);align-items:start}
.steps > li:has(.frame) .step-copy{grid-column:1}
.steps > li:has(.frame) .frame{grid-column:2;grid-row:1;margin-top:0}
}
/* benefit cards: matches the homepage's own device for this kind of content
(index.html's .kicker::before - a small accent rule, no boxed card) rather
than a bordered/shadowed white box, which read as generic boxy rectangles
next to the rest of this page's more editorial treatment. */
.cards{display:grid;gap:var(--s7);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));align-items:start}
/* On .card-copy, not article: the accent dash must stay inside the text
column's own block flow. It briefly lived on article::before, which
worked fine here (article isn't a grid container in the plain multi-
column case below) but broke .cards--rows below - once article itself
becomes display:grid, its ::before is a real grid item too, competing
with the shot for row 1 and pushing the actual heading down a row. */
.cards > article .card-copy::before{content:"";display:block;width:2.6rem;height:2px;background:var(--accent);margin-bottom:var(--s3)}
.cards > article h3{font-size:var(--t-base);margin:0 0 var(--s2)}
.cards > article p{color:var(--ink-soft);font-size:var(--t-sm);max-width:none}
/* Cedric's explicit call, 2026-09-09: a "cards" section where at least one
card carries a real screenshot (audits-de-referencement, referencement-
local's "Nos Services..." section - see renderCardsSection's own
cardsCls comment) reads as full-width rows, one per card, text beside its
own image - not the narrow multi-column grid above, which squeezed every
screenshot down to card width. Same text-column/pinned-image pattern as
.hero:has(.hero__shot) above, not a new one. */
.cards--rows{display:flex;flex-direction:column;gap:var(--s7)}
@media (min-width: 860px) {
.cards--rows > article:has(.frame){display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,26rem);column-gap:var(--s7);align-items:start}
.cards--rows > article:has(.frame) .card-copy{grid-column:1}
.cards--rows > article:has(.frame) .frame{grid-column:2;grid-row:1}
}
/* Same pattern again for a plain prose section carrying one real screenshot
(services-danalyse-concurrentielle-seo's 2 Ahrefs-table sections) - the
stays full-width above (rendered outside this div, see
renderProseSection), only the paragraphs and the shot split into columns.
.prose-copy wraps every paragraph/list as ONE grid item (same fix as
.card-copy/.step-copy) - a section with 2+ separate
/
blocks placed
directly as grid children would each claim their own row in column 1,
and since the shot pins to row 1 in column 2, anything after the first
block would land below the whole image instead of continuing beside it. */
@media (min-width: 860px) {
.prose-shot:has(.frame){display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,26rem);column-gap:var(--s7);align-items:start}
.prose-shot:has(.frame) .prose-copy{grid-column:1}
.prose-shot:has(.frame) .frame{grid-column:2;grid-row:1}
}
/* Cedric's explicit call, 2026-09-09: the heading above an embedded tool
(facebook-ads' "Simulateur de rentabilité", renderEmbedSection in
templates/service.mjs) is centered - the iframe below it is itself a
centered widget, so a left-aligned heading over it read as misaligned. */
.embed h2 { text-align: center; }
/* Section label: the homepage's own .kicker device (index.html), reused
verbatim for the same purpose - a small uppercase label with a leading
accent rule, above a heading. No scroll-triggered rule animation here
(the homepage's own `.in-view .kicker::before` scaleX reveal) - inner
pages stay faster and less experiential than the homepage on purpose,
per Cedric's explicit call 2026-09-08; the rule renders already "on". */
.kicker{display:flex;align-items:center;gap:.9ch;font-family:var(--font-text);font-size:var(--t-xs);
letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-soft);margin-bottom:var(--s3)}
.kicker::before{content:"";width:2.6rem;height:2px;background:var(--accent);flex-shrink:0}
/* One-accent-moment device: the homepage's own h2.disp em treatment
(italic, --accent color), reused for exactly one hand-picked phrase per
page - see accentPhrase() in templates/common.mjs. Not a global `em`
rule on purpose; scattering this everywhere is the opposite of the point. */
em.accent{font-style:italic;color:var(--accent)}
.pf-grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pf-card{display:flex;flex-direction:column}
.pf-card .frame{transition:transform var(--d-fast) var(--ease-out)}
.pf-card:hover .frame{transform:translateY(-2px)}
.pf-card__name{margin-top:var(--s3);font-family:var(--font-display);font-size:var(--t-lg);line-height:1.25}
.pf-card__name a{text-decoration:none;color:var(--ink)}
.pf-card__name a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.18em}
.pf-card__visit{display:block;margin-top:.15rem;font-family:var(--font-text);font-size:var(--t-xs);
font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--accent)}
/* pricing: tick lists, offer cards, fine print */
.ticks{list-style:none;padding:0}
.ticks li{padding-left:1.6rem;position:relative;margin:.4rem 0}
.ticks li::before{content:"\2714";position:absolute;left:0;color:var(--scan-green)}
/* margin-block:25px, matching the shared section standard (25px each side
= 50px total). Round 2 removed this margin on the theory that the shared
`section { padding-block }` rule already spaces every section - true for
a plain section, where padding is invisible against the matching page
background, but wrong here: .offer has its own visible border/background,
and Offers A-D sit back-to-back with nothing else between them, so a 0px
gap between two offer *boxes* means their borders visibly touch (padding
is inside the border, it only affects the box's own internal breathing
room, never the gap to the next box). Confirmed via screenshot 2026-09-08. */
.offer{background:#fff;border:1px solid var(--paper-edge);border-radius:var(--r-md);padding:var(--s6);margin-block:25px}
.offer__price{font-family:var(--font-display);font-size:var(--t-lg)}
.fine{font-size:var(--t-xs);color:var(--ink-soft);font-style:italic}
/* footer - dark background matching the homepage's own colophon
(index.html's .colophon, background:#17130F, named --footer-ink in
tokens.css since that hex was never a token there either). Redefining
--ink/--ink-soft/--paper-edge inside this selector's own scope, exactly
as the homepage's .colophon does with --sc-ink/--sc-ink-soft/--paper-edge,
means every existing .site-foot__* rule below picks up light-on-dark
colors automatically - none of them needed to change. Confirmed
2026-09-08: this started as a background-color-only match (no map, no
form). The GMB map added below (2026-09-08) mirrors the homepage's own
.colophon-map treatment exactly: a light --surface card (not reassigned
dark) floating on the dark footer, border on the reassigned --paper-edge
so it reads correctly against this scope's background. */
.site-foot{background:var(--footer-ink);--ink:var(--paper);--ink-soft:var(--footer-ink-soft);
--paper-edge:color-mix(in oklab, var(--paper) 18%, transparent);color:var(--paper);margin-top:var(--s9)}
.site-foot__inner{max-width:var(--maxw);margin:0 auto;padding:var(--s8) var(--gutter) var(--s6);display:flex;flex-direction:column;gap:var(--s6)}
.site-foot__top{display:grid;gap:var(--s6) var(--s9);grid-template-columns:1fr}
@media (min-width:700px){.site-foot__top{grid-template-columns:minmax(0, 17rem) 1fr;align-items:start}}
.site-foot__nap{font-size:var(--t-sm);color:var(--ink-soft)}
.site-foot__nap p{margin:0 0 var(--s2);max-width:none}
.site-foot__brand{font-family:var(--font-display);font-size:var(--t-lg);color:var(--ink);margin:0 0 var(--s3)}
.site-foot__nap a{color:var(--ink-soft);text-decoration-color:var(--paper-edge-2)}
.site-foot__map{border:1px solid var(--paper-edge);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.site-foot__map iframe{display:block;width:100%;height:clamp(15rem, 32vw, 21rem);border:0}
.site-foot__links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);padding-top:var(--s6);border-top:1px solid var(--paper-edge)}
.site-foot__links a{font-size:var(--t-sm);text-decoration:none}
.site-foot__links a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.site-foot__legal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;padding-top:var(--s5);border-top:1px solid var(--paper-edge);font-size:var(--t-xs);color:var(--ink-soft);max-width:none}
.site-foot__legal a{color:var(--ink-soft);font-size:inherit;text-decoration-color:var(--paper-edge-2)}
/* Trim trailing margins, placed last on purpose: whatever element ends up
last inside a section (a /
's own default browser margin,
.steps > li's margin-bottom, .quotes' own margin, etc.) was stacking its
own bottom margin on top of the section's padding-bottom - the same
content ending a section in a vs a
vs an - produced a
visibly different gap before the next heading, even though every
section's own padding-block was identical. This reaches to whatever is
actually last, at any nesting depth, and zeroes only its margin-bottom -
margin-top (heading-to-content spacing within a section) is untouched.
Declared last so it wins every same-specificity tie (e.g. against
.steps > li's own margin-bottom rule) by source order, not just by being
written once and hoped for. */
main :last-child { margin-bottom: 0; }
/* article template: sticky TOC (desktop), collapsible
(mobile).
No scroll-spy / active-link JS - see reference/REFERENCE.md's Article
template section for why. */
.toc { background: var(--surface); border: 1px solid var(--paper-edge); border-radius: var(--r-md); padding: var(--s5); }
.toc summary { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: var(--track-wide); margin: 0 0 var(--s3); cursor: pointer; }
/* No `display: flex` here (mobile-default collapsed state depends on the
UA's own `details:not([open]) > *:not(summary) { display: none }` rule
winning when the `open` attribute is absent) - only .toc[open] ul below
turns the content on once a phone visitor actually opens it. */
.toc ul { list-style: none; margin: 0; padding: 0; flex-direction: column; gap: var(--s2); }
.toc[open] ul { display: flex; }
.toc a { font-size: var(--t-sm); text-decoration: none; color: var(--ink-soft); }
.toc a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
@media (min-width: 860px) {
/* `:has(> .toc)` - direct child only. Article-template v2 pilot pages
(2026-09-09) wrap .toc one level deeper inside .article-rail (see that
selector below) so it can share the sticky sidebar column with the new
services widget; without the ">" here, THIS rule would also match on
those pages (.toc is still somewhere inside .article-body) and put
.toc itself into a second, independently sticky grid-column-2 - never
discovered by testing because it was caught before rollout, not after. */
.article-body:has(> .toc) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); column-gap: var(--s7); align-items: start; }
.article-body:has(> .toc) > :not(.toc) { grid-column: 1; }
/* span 999, not 400: Round 17/18's audit found guide-complet-du-
referencement-local-2025 already at 412 rows, over the old 400 span
(re-tested at 999 on that exact page and confirmed the sticky-release
point and article-body height are unaffected either way - Round 18). */
.article-body:has(> .toc) > .toc { grid-column: 2; grid-row: 1 / span 999; position: sticky; top: var(--s6); max-height: calc(100vh - var(--s7)); overflow-y: auto; }
/* Article-template v2 pilot (2026-09-09): the sidebar rail now holds the
TOC (if any) stacked above the new "Decouvrez nos services" widget -
one shared sticky container instead of each fighting for the same
column independently. Direct-child-scoped for the same reason as the
.toc rule above. */
.article-body:has(> .article-rail) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); column-gap: var(--s7); align-items: start; }
.article-body:has(> .article-rail) > :not(.article-rail) { grid-column: 1; }
.article-body:has(> .article-rail) > .article-rail { grid-column: 2; grid-row: 1 / span 999; position: sticky; top: var(--s6); max-height: calc(100vh - var(--s7)); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s5); }
/* Desktop's sticky sidebar is always visible, regardless of the
[open] state - the markup carries no `open` attribute so a phone still
gets a genuinely closed disclosure by default (see article.mjs). A
closed here isn't hiding its content via a plain `display`
on the child (confirmed by direct measurement: the itself keeps
computed display:block/flex either way) - Chromium wraps non-summary
content in an internal `::details-content` box whose own
content-visibility/block-size is what actually clips it, so THAT is
the pseudo-element that has to be overridden, not the .
`::details-content` is a recent feature (Chrome/Edge 131+, Safari
18.4+, Firefox 139+) - on an older browser this whole ruleset is
dropped and the just stays closed on desktop, same as
mobile. That's an acceptable, graceful fallback (the visitor can still
click "Sommaire" to open it) PROVIDED the click still works - do not
add `pointer-events: none` / `cursor: default` to `.toc summary` here
(reviewer finding, 2026-09-09): that would disable the one remaining
way to reach the content on a browser where the force-open trick
doesn't apply. Only the marker/triangle is suppressed, which is purely
cosmetic and harmless either way. */
.toc::details-content { content-visibility: visible !important; block-size: auto !important; overflow: visible !important; }
.toc > ul { display: flex !important; }
.toc summary { list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
}
.byline { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.6; }
.byline a { color: var(--ink-soft); text-decoration-color: var(--paper-edge-2); }
.byline--top { margin-top: var(--s3); margin-bottom: 0; }
.byline--bottom { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--paper-edge); }
.byline strong { color: var(--ink); font-weight: 600; }
/* ===== article-template v2 pilot additions (2026-09-09) ===== */
/* featured image, below the H1 */
/* Cedric's report, 2026-09-09: full-.wrap-width was far too big on desktop
for a single illustrative image - capped and centered to a normal
featured-image size instead, matching .hero__shot's own cap elsewhere. */
.article-hero-img { max-width: 40rem; margin: var(--s5) auto 0; border-radius: var(--r-lg); overflow: clip; }
.article-hero-img img { width: 100%; height: auto; display: block; }
/* "Resumer cet article avec" AI-summary links - unofficial, undocumented
query-param schemes (verified working 2026-09-09, not vendor-guaranteed -
see docs/PILOT-NOTES.md for the periodic-check note). */
.ai-summary { margin: var(--s6) 0; padding: var(--s4) var(--s5); background: var(--surface);
border: 1px solid var(--paper-edge); border-radius: var(--r-md); }
.ai-summary__label { margin: 0 0 var(--s3); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.ai-summary__list { display: flex; flex-wrap: wrap; gap: var(--s3); }
.ai-summary__list a { display: inline-flex; align-items: center; gap: .4ch; padding: .5rem .9rem;
background: #fff; border: 1px solid var(--paper-edge); border-radius: var(--r-sm);
font-size: var(--t-sm); text-decoration: none; color: var(--ink); }
.ai-summary__list a:hover { border-color: var(--accent); }
/* sidebar services widget - shares .article-rail with .toc, see the grid
rules above. Plain box matching .toc's own visual weight. */
.services-widget { background: var(--surface); border: 1px solid var(--paper-edge);
border-radius: var(--r-md); padding: var(--s5); }
.services-widget h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: var(--track-wide);
margin: 0 0 var(--s3); }
.services-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.services-widget a { font-size: var(--t-sm); text-decoration: none; color: var(--ink-soft); }
.services-widget a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
/* boxed author callout, bottom of article only - no CTA button here
(Cedric's report, 2026-09-10): the ctaBand right above the author box
already covers it, so no `.author-box + .btn` rule is needed. */
.author-box { margin-top: var(--s7); padding: var(--s5); background: var(--surface);
border-left: 3px solid var(--accent); border-radius: var(--r-sm); }
.author-box .byline--bottom { margin: 0; padding: 0; border: 0; }
/* share buttons */
.share-buttons { margin-top: var(--s7); text-align: center; }
.share-buttons p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto var(--s4); }
.share-buttons__list { display: flex; justify-content: center; gap: var(--s3); flex-wrap: wrap; }
.share-buttons__list a { display: inline-flex; align-items: center; padding: .55rem 1rem;
border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 600; text-decoration: none; color: #fff; }
.share-buttons__list a:hover { opacity: .88; }
.share--facebook { background: #1877f2; }
.share--twitter { background: #14171a; }
.share--linkedin { background: #0a66c2; }
.share--pinterest { background: #e60023; }
.share--whatsapp { background: #25d366; }
.share--email { background: var(--ink-soft); }
/* "Autres Blogs" related-post grid */
.related-posts { margin-top: var(--s9); }
.related-posts h2 { text-align: center; margin-bottom: var(--s6); }
/* Cedric's report, 2026-09-10: cards need equal height across the row, not
each sized to its own title length. Grid back to default stretch (not
the earlier align-items:start, which fixed a different bug - see the
height:auto note above - but left ragged card bottoms as a side effect);
.related-card itself is now a flex column so the image keeps its fixed
4:3 box and the title span grows to fill whatever extra height the row's
tallest sibling forces, instead of leaving a bare gap under it. */
.related-posts__grid { display: grid; gap: var(--s5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .related-posts__grid { grid-template-columns: repeat(4, 1fr); } }
.related-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
border: 1px solid var(--paper-edge); border-radius: var(--r-md); overflow: clip; background: #fff; }
.related-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; flex: none; }
.related-card span { display: flex; align-items: center; flex: 1; padding: var(--s3); font-size: var(--t-sm); font-weight: 600; line-height: 1.35; }
.related-card:hover span { text-decoration: underline; text-decoration-color: var(--accent); }
/* /blog-siteref/ index - same card language as .related-card, plus an
excerpt and date since this is the full index, not a small sidebar
pick. (2026-09-10) */
.blog-index__grid { display: grid; gap: var(--s6); grid-template-columns: 1fr; }
@media (min-width: 700px) { .blog-index__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blog-index__grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
border: 1px solid var(--paper-edge); border-radius: var(--r-md); overflow: clip; background: #fff; }
.blog-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; flex: none; }
.blog-card__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); flex: 1; }
.blog-card__date { margin: 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--ink-soft); }
.blog-card__title { margin: 0; font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.3; color: var(--ink); }
.blog-card__excerpt { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; flex: 1; }
.blog-card:hover .blog-card__title { text-decoration: underline; text-decoration-color: var(--accent); }
/* /facebook-ads-examples-for-local-businesses/ video gallery (2026-09-10).
Real ad creatives ship in a mix of native aspect ratios (square, 9/16
vertical) - each