/* ==========================================================================
Page-level overrides. Loaded last, so rules here win specificity ties.
Keep this file small — anything reusable belongs in components.css.
========================================================================== */
/* --- Home ---------------------------------------------------------------- */
/* No cap here: the headline's breaks are placed by hand in the field, and a cap
narrower than the design's 1053px frame (layout.css) re-wrapped the lines it
had already been given — three authored lines rendered as four. */
/* Section rhythm. Both headings are 80px Thin on a 75px line — the same display
size as the hero, not a smaller secondary heading.
Measured from the XD's text baselines, not from its reported frame heights:
the frame height it stores is a single line, so using it made every gap under
a wrapped heading too large by one line or more. At 80/75 the CSS box puts the
first baseline 64px below its top and ends 11px below its last.
results band 1054 baselines 1245, 1320 cards 1415 last card ends 3505
process band 3643 baselines 3906..4056 cards 4210 marquee 4838-4886
The bottom values matter as much as the top ones: neither section carries the
base `.section` class, so `padding-block` never applied and the last tile in
each band sat flush against the next one. */
.section--results { padding-block: 127px 138px; }
/* 797 in the design — the heading wraps to two lines rather than running the
full content width. */
.section--results .section__title {
max-width: 797px;
margin-block-end: 84px;
}
/* Where the "Études de cas" menu item lands. The 83 every `section-anchor`
gets put the first card's top at 444, and the card only finishes opening
when its top reaches 40% of the viewport (`end: 'top 40%'` in
initBracket(), animations.js) — 364 on a 911px screen. The reader arrived
facing a green panel stuck at nine-tenths open.
So the offset follows the viewport: the card sits 361 below the section's
top, and this lands it 8px past the opening point. The floor keeps the
heading (127 down) clear of the 83px header on short screens, where the
two cannot both be met — there the card stays a little short of open
rather than the title going under the bar. svh, so a mobile URL bar
can only ever push the card further past the point, never short of it. */
.section--results { scroll-margin-top: clamp(-36px, calc(40svh - 369px), 83px); }
.section--process { padding-block: 199px 37px; }
.section--process .section__title { margin-block-end: 143px; }
.section--process .marquee { margin-block-start: 65px; }
/* The 65 above is the artboard's gap, measured from the grey cards' feet to the
Contact bar — and it was right while the cards were the last thing in the
band. The wide step now closes it, and 65px between a 219px green slab and
the green bar read as a seam rather than a break: two blocks of the same
colour that close enough to look like one interrupted shape. So the gap opens
where that row is present, and stays at the drawn figure where it is not. */
.section--process .process-steps-wide + .marquee { margin-block-start: 120px; }
/* x=494 against a content box starting at 26 — four columns plus their
gutters, expressed as a fraction of the 1388px content width. */
.section__title--indent {
margin-inline-start: 33.72%;
max-width: 920px;
}
/* Host for a sphere instance — the canvas itself is styled by .sphere-canvas
in components.css. Needs a containing block and its own stacking context so
the canvas can sit at z-index -1 without falling behind the section's
background. */
.section-sphere {
position: relative;
isolation: isolate;
}
/* Draw the sphere at the size Accueil's hero gives it, whatever this host's
own height — see fitInstance() in sphere.js. The value is the hero's height
at each width (974 here, 1034 and 653 in responsive.css). `.cta` is left
out: it is Accueil's own band and keeps the scale it always had. */
[data-sphere="section"]:not(.cta) { --sphere-ref: 974px; }
/* No height floor here. The À propos band carried min-height 720 to give the
sphere room, but once the tagline left it that floor only added empty space
above the rule — the band now takes its content's height (see
.about-approche).
Do not put a floor back on `.section-sphere` itself: `.cta` declares
min-height 974 in layout.css, both selectors are a single class, and this
file loads later, so it would win the tie and collapse Accueil's closing
band. */
/* --- Case study detail ---------------------------------------------------
From the "Étude de cas" artboard (1440 x 6411). Text offsets there are frame
origins rather than baselines — that document carries no line data — so each
one below is the frame value plus the 15px that separates a frame top from
the CSS box top at 80/75.
The gaps between the editorial blocks are measured against the artboard's
two-line placeholder copy. Real copy will run longer and push them apart;
that is the same trade the home page makes. */
.page-case .case-hero__inner {
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
gap: var(--grid-gutter);
padding-block-start: 118px; /* title y201, less the 83px header row */
}
/* Two tracks at desktop, and the meta one is sized by its own content.
Counting columns does not work here. Four of twelve is 452 at 1440 and the
longest service value needs 398 with its label, so it fits — but the same
four columns are 336 at 1106 and 390 at 1025, and the value drops to a second
line on the way down. Five columns fixes 1106 and still fails 1025; six fixes
1025 and leaves the title half the row.
`auto` gives the block exactly what its widest row asks for at every width,
and `minmax(0, 1fr)` hands the rest to the title — which is where the title's
line count should come from anyway. The 460 cap is the backstop: a service
value longer than anything currently written wraps rather than eating the
title's half of the hero.
This is the layout the page loads in. As the reader scrolls, initCaseHero()
in animations.js carries the block under the title while the photograph
settles into the right-hand half.
Scoped to ≥1025 because the ≤1024 block stacks these two full width, where
the twelve-column track list is what the rest of that layout expects. */
@media (min-width: 1025px) {
.page-case .case-hero__inner { grid-template-columns: minmax(0, 1fr) auto; }
/* Two lines, always — the shape the board draws and what the hero is built
around. The three titles measure 810, 818 and 861 on one line, and each of
them folds to exactly two anywhere from 560 up to just under its own
one-line width. 560 is the bottom of that shared window, and it is also
inside the narrowest title track on desktop (572, at 1025 against the
widest meta block), so the cap governs rather than the track at every width
here and the break never moves with the viewport. (Under about 1200, six
columns are narrower than 560, and the settled layout initCaseHero()
scrolls into wraps the words to those six instead.)
A cap cannot promise two lines for copy that does not exist yet: a title
much longer than these will take three. The window is wide, though —
anything up to about 1100 on one line still folds to two at 560.
text-wrap: balance evens the pair rather than filling the first line and
leaving a short second.
`.page-case` is on the selector to outrank the `max-width: none` below,
which is a single class like this one and comes later in the file. */
.page-case .case-hero__title {
max-width: 560px;
text-wrap: balance;
}
}
/* Whatever the meta block leaves, and no cap of its own — the track is the cap.
That is what puts most titles onto the two lines the board draws, and it is
the point: the width it gives up is what lets the meta rows hold one line. */
/* Its own row across the hero. The grid's gutter already sits between it and
the title, so the margin only makes up the rest of the expertise hero's 24.
Scoped to the page so it outranks .eyebrow, which comes later in the file. */
.page-case .case-hero__eyebrow {
grid-column: 1 / -1;
margin-block-end: calc(var(--s-3) - var(--grid-gutter));
}
.case-hero__title {
grid-column: 1;
align-self: start; /* otherwise it stretches to the meta column's height */
max-width: none;
}
/* Columns 9-12 — the board has two (x1196 w219) with the block starting 75px
below the title, and neither survives real content.
219 leaves 138 for a value once the 65 label column and its gutter are out,
and the service values run to 317 ("Inventaire mobile, intégré à l'existant")
and 210 ("Transformation numérique"). Four columns is 452, so 371 for the
value — every one of them on one line, with room to spare.
The 75 is gone: the block sits on the foot of the title instead, which is
what the board draws — the last tag row lands on the title's last line, not
its first.
`end` rather than an offset from the top, because it is the one spelling that
does not depend on how many rows the block has or how many lines the title
takes: the row is as tall as the title, so the two bottoms meet whatever the
content does. It leaves the last tag's baseline within a couple of pixels of
the title's last baseline, since 13 below the block's foot and 10 below the
title's come to much the same place.
Two earlier attempts are worth not repeating. `align-self: baseline` aligns
the wrong line: the block's own first baseline is synthesised from the nested
row grid rather than from the value's text, and it landed 20 out. And a
30px top margin measured as correct only because the reveal had not finished
when it was sampled — the rows still carried 20px of transform, which is
exactly the 20 the margin was wrong by. Anything measured on this page has to
have the ScrollTriggers forced to progress(1) first. */
.case-meta {
grid-column: 2;
margin-block-start: 0;
align-self: end;
max-width: 460px;
}
/* The board draws these as three single lines — label left at x1196, value
right at x1261 — on values of two or three words: "ERP", "Manufacturier".
The column is two of twelve, so 218px at 1440 and 149 at 1025, and once the
label and its gutter are out there are 137 left. The real service values run
to a sentence: "Automatiser les processus" measures 209, "Inventaire mobile,
intégré à l'existant" 317.
Stacking the label over the value was the way round that while the block was
two columns wide. It is four now — see .case-meta above — so the board's own
single line fits, and this is the same shape the ≤1024 block has been using
all along. */
.case-meta__row {
display: grid;
grid-template-columns: 65px minmax(0, 1fr);
column-gap: var(--s-2);
row-gap: 0;
align-items: baseline;
/* Padding at the top as well as the foot. It was 0 / 5, which sat the text
hard against the rule of the row above — every row read as belonging to the
line over it rather than to the one under it.
4 / 3 rather than an even split: the row is 28 on the board, and 18 of line
box plus a 1px rule leaves 9 to place. 5 / 5 was the first try and it takes
the pitch to 31, which is 9 of drift down a three-row block. */
padding-block: 4px 3px;
min-height: 28px;
border-bottom: 1px solid rgb(180 195 188 / 0.35);
}
/* Both rows at 70%, like the rest of the copy on this page — they were the one
block on the hero still drawing at full strength, which is what made the
values read as white against a title that had just been taken back to mist. */
.case-meta__label {
font-size: var(--t-micro);
line-height: calc(var(--t-micro-lh) / var(--t-micro));
color: var(--c-mist-70);
}
.case-meta__value {
margin: 0;
min-width: 0;
overflow-wrap: break-word; /* a single word longer than the column still stays inside it */
font-size: var(--t-strong);
line-height: calc(var(--t-strong-lh) / var(--t-strong));
font-weight: var(--fw-bold);
color: var(--c-mist-70);
}
/* 100 below the hero row, not below the title: the meta column runs deeper than
a short title, and the design's y469 is measured from whichever ends lower. */
.case-hero__media {
position: relative;
margin: 100px 0 0;
aspect-ratio: 1388 / 621;
border-radius: var(--radius-card);
overflow: hidden;
}
.case-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Client logo, inset 10 from the image's top-right corner. */
.case-hero__badge {
position: absolute;
inset-block-start: 10px;
inset-inline-end: 10px;
display: grid;
place-items: center;
width: 208px;
height: 85px;
padding: var(--s-2);
border-radius: var(--radius-card);
background: var(--c-mist-3);
}
.case-hero__badge img {
max-width: 100%;
max-height: 100%;
width: auto;
object-fit: contain;
}
/* Rule 113 below the hero image, then 230 between one block and the next. */
.case-intro { padding-block: 113px 0; }
.page-case .separator { margin-block: 230px 43px; }
.page-case .separator:first-child { margin-block-start: 0; }
/* 68, not 230, between the two blocks of this section.
Measured off the shared link rather than the file, which is why it took a
second pass: on the board the last baseline of the Client copy and the first
baseline of the Enjeux copy are 144 apart. In flow that distance is the
Client descent (≈8), this margin, the 1px rule, the 43 under it and the
Enjeux half-leading (≈25) — so the margin is 144 less those, which is 68.
At 230 the two baselines sat 306 apart, 162 too far.
Scoped to .case-intro: the third separator further down the page is outside
this section and keeps the 230 it was given. */
.case-intro .separator { margin-block-start: 68px; }
.page-case .editorial { padding-block-end: 0; }
/* Défi — a light card with the image inset 32 on three sides and the copy
running from column 6. Card 1388 x 794, image 420 x 730. */
.case-defi {
display: grid;
grid-template-columns: 420px minmax(0, 1fr);
gap: 133px; /* image ends x478, text starts x611 */
/* 43, not 321. The 321 is what the artboard draws, and it only works against
the artboard's placeholder copy.
The board fixes the card at y1968 and the first separator at 1203, so the
whole run — two label/body blocks, the 230/43 separator rhythm and this gap
— has 447px to spend on the two bodies plus the gap. At 321 the two bodies
get 126 between them, about four lines. The real copy runs thirteen: 160
and 256 here, 416 of the 447 on its own. So the copy already carries the
section down to where the board puts the card, and the 321 was then added
on top of it — measured on this page, the card lands at 2290 against the
board's 1968.
43 was too tight — measured off the board, the last baseline of the Enjeux
copy and the top edge of this card are 179 apart, which is that copy's
descent (≈8) plus 171 of margin. 170 it is. The 447 arithmetic above still
explains why 321 could never have been right; it just could not say what
the figure should be, because that depended on placeholder copy shorter
than anything the site actually carries. */
margin-block-start: 170px;
padding: 32px;
min-height: 794px;
border-radius: var(--radius-card);
background: var(--c-mist-3);
color: var(--c-ink);
}
.case-defi__media {
border-radius: var(--radius-card);
overflow: hidden;
}
.case-defi__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.case-defi__body { padding-block-start: 78px; } /* title frame y2078, card top 1968 */
.case-defi__title {
max-width: 686px;
font-size: var(--t-h2);
line-height: calc(var(--t-h2-lh) / var(--t-h2));
font-weight: var(--fw-light);
color: var(--c-panel);
}
/* Both copy blocks sit back from the heading at 70% of the ink, which is full
strength only on .case-defi__title above. Written as an alpha colour rather
than `opacity`, for the same reason .case-card__stats is: opacity would make
each block its own stacking context, and these two are inside a card that
already layers an image against a fill. */
.case-defi__lead,
.case-defi__text { color: rgb(58 62 61 / 0.7); }
.case-defi__lead {
max-width: 686px;
margin-block-start: 188px; /* y2320 against the title frame at 2078 */
font-size: var(--t-lead);
line-height: var(--t-editorial-lh);
}
.case-defi__text {
max-width: 686px;
margin-block-start: 121px;
font-size: var(--t-body);
line-height: calc(var(--t-body-lh) / var(--t-body));
}
/* The text is split into paragraphs so each can arrive on its own; the gap is
the blank line the field's
used to make. */
.case-defi__text > p + p { margin-top: var(--t-body-lh); }
/* Solutions — heading indented to column 5, then full-width green rows. */
.section--solutions { padding-block: 185px 0; }
.section--solutions .section__title { margin-block-end: 218px; }
/* The green rows themselves are `.row-card` in components.css — the same
component À propos uses for its Subvention row and its four Approche
steps, because the artboards draw the same object in both files. It lived
here as `.solution` while the case study was the only page carrying one. */
/* Résultats — copy over the particle sphere, which replaced the artboard's
blurred photograph. Shared with the expertise proof panel.
The 809 floor is the artboard's and gives the sphere its room; the copy sits
on the foot. Position and isolation make this the canvas's containing block
and keep it at z-index -1 above the page background; the overflow clip keeps
it inside the rounded corners. The top padding only bites when the copy
outgrows the floor. */
.case-results { padding-block: 20px 0; }
.case-results__panel {
position: relative;
isolation: isolate;
min-height: 809px;
border-radius: var(--radius-card);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-block: 96px 56px;
}
.case-results__content { padding-inline: 0; }
/* The 809 floor was sized for the photograph, and was cut to 640 when the
sphere replaced it and still scaled with the panel. It no longer does — it
is drawn at Accueil's size (--sphere-ref) — so the floor is the sphere plus
~35px either side, the same rule as .about-approche. Desktop only — the 1024
and 767 rules set their own. */
@media (min-width: 1025px) {
.page-case .case-results__panel {
min-height: calc(var(--sphere-ref) * 0.82);
padding-block-end: 24px;
}
}
.case-results__panel .editorial { padding-block-end: 0; }
.case-results__panel .editorial__body { color: var(--c-white); }
.case-results__list {
margin-block-start: 140px;
max-width: 351px; /* rules run x143 to x494 */
color: var(--c-white);
}
/* The artboard sets each row on a 27px rule with the text touching it. Fine
for the one-line samples it was drawn with; real results run two or three
lines and the stack read as one block. The padding lets each rule breathe. */
.case-results__row {
display: flex;
align-items: baseline;
gap: var(--s-2);
min-height: 27px;
padding-block: 14px;
border-bottom: 1px solid rgb(255 255 255 / 0.5);
}
.case-results__row:first-child { padding-block-start: 0; }
.case-results__index {
flex: 0 0 30px;
font-size: var(--t-micro);
line-height: calc(var(--t-micro-lh) / var(--t-micro));
}
.case-results__text {
font-size: var(--t-strong);
line-height: calc(var(--t-strong-lh) / var(--t-strong));
font-weight: var(--fw-bold);
}
/* --- About --------------------------------------------------------------- */
.page-about .hero { min-height: 60svh; }
/* The four Approche steps. The band above already carries the artboard's gap
under its button — 4013 to the first row at 4144 — and the footer's intro
brings its own 240px of head, against the 210 the artboard leaves between the
last row at 5080 and the Contact heading at 5290. So this section adds
nothing at either end; a foot here put 368px under the last row. */
.section--etapes { padding-block: 0; }
/* Where "Découvrez notre approche" lands. The offset carries the sentence that
introduces the steps onto the screen with them — see the note in
templates/about.php.
The figure is the distance from that sentence down to the first step, plus
enough to clear the sticky header — and the two differ by breakpoint, so the
value does too. Here the gap is 458 and the header 83: 470 puts the sentence
about 25px below it. responsive.css carries the 430 measurement. */
.section--etapes { scroll-margin-top: 470px; }
/* `.subvention` and `.subvention__step*` lived here. They set the block as a
46px heading, a lead and a two-column grid of bare text, which is not what
any of the three artboards draw — see `.row-card` in components.css. */
/* --- Politiques ----------------------------------------------------------
title y255 (cols 2-8) · rule y453 · body y513 · aside x1079 (cols 10-12) */
/* 255 is where the artboard puts the title, and the sticky header takes the
first 83 of that out of the flow before this padding starts — the same
subtraction `.about-hero` and `.case-hero__inner` both make. Without it the
title opened on 338 and every row under it followed, which made this the one
page whose heading did not start on the same line as the others'. */
.page-legal { padding-block: 172px 120px; }
.page-legal__title {
grid-column: 2 / 9;
max-width: 803px;
}
/* The rule under the legal page's title is the shared separator — see
`.separator--legal` in layout.css. It used to be a plain content-width line
here, with the alpha on `opacity`, which is the same pairing that dimmed the
green mark everywhere else it was used. */
.page-legal__body { grid-column: 2 / 9; }
.page-legal__aside {
grid-column: 10 / -1;
font-size: var(--t-lead);
line-height: 27px;
}
/* --- 404 -----------------------------------------------------------------
The design is only the numeral and the button, both centred: numeral at
y286 in OT Bulb at 300px, button centred on the artboard at y582. The
explanatory sentence is kept for assistive tech and search engines but not
shown, because the design does not have one. */
.page-404 {
display: grid;
justify-items: center;
padding-block: 286px 200px;
text-align: center;
}
/* The design sets 300px type on a 92px line-height, so the glyphs deliberately
overflow their box. Using that ratio directly would let the numeral collide
with the button, so the box is sized to the face's actual cap height (~0.7em)
and the gap measured from there: glyphs end near y496, button starts at 582. */
.page-404__numeral {
font-family: var(--font-display);
font-size: var(--t-numeral);
line-height: 0.7;
font-weight: 200;
color: var(--c-text-display);
}
.page-404 .btn-arrow { margin-block-start: 86px; }
/* --- Stub pages ----------------------------------------------------------
Études de cas and Expertises exist in the menu but have no design yet.
They render the site shell with a holding message rather than 404ing. */
/* Holding pages — Études de cas and Expertises.
No artboard exists for either, so rather than a centred block that matches
nothing else on the site, they reuse the À propos opening: display title on
the page margin, body in the editorial measure, arrow button under it. Every
value here is one the rest of the site already sets, which is what keeps them
in step at 375, 768, 1440 and beyond without a breakpoint of their own —
`--page-margin` and `--t-display` do the work. */
.page-stub .about-hero {
padding-block-end: 180px;
min-height: 60svh;
}
.page-stub__body {
max-width: 686px; /* the editorial body measure */
margin-block-start: var(--s-5);
}
.page-stub__action { margin-block-start: var(--s-7); }
/* --------------------------------------------------------------------------
À propos — Approche band
The artboard repeats Accueil's closing band here (tagline, lead, rule,
contact button). On this page it read as unclear, so it is now the heading
of the four E-steps below it: the sphere, the rule, and a title under the
rule. See the note in templates/about.php.
The band keeps its 720px sphere floor and stacks its content on the foot,
so the sphere has the space above the rule and the title sits right on top
of the steps.
-------------------------------------------------------------------------- */
/* The floor holds the whole sphere: at Accueil's scale it is about 74% of
--sphere-ref across, and 82% leaves ~35px clear above and below it. Without
it the band took its content's 602px and cut the sphere flat top and bottom. */
.about-approche {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: calc(var(--sphere-ref) * 0.82);
}
/* No film grain. It lifts the flat background a shade and stops dead at the
band's top edge, so the band read as a faintly different patch under the
text above — the same reason the expertise and case study panels dropped
`section-sphere`. */
.about-approche::after { display: none; }
.about-approche__title {
max-width: 1100px;
text-wrap: balance;
}
/* Expertises index — /expertises/. The band under the title is Accueil's
process group, which brings its own 199px of head; the hero only needs the
gap the stub used to leave under its own title. */
.page-expertises .about-hero { padding-block-end: 0; }
.page-expertises .expertises-index__lead { max-width: 686px; margin-block-start: var(--s-6); }
/* --------------------------------------------------------------------------
Expertise — /expertises//
No artboard exists for these pages, so nothing here is a measurement of one.
Every block on the page is a component drawn on another board — À propos'
hero and editorial blocks, the case study's Défi card, solution rows and
Résultats panel, À propos' closing band — and what this section sets is the
vertical rhythm between them, borrowed from the page each component comes
from. That is also why the two breakpoints need so little: the components
bring their own.
-------------------------------------------------------------------------- */
.expertise-hero { padding-block-start: 118px; } /* as .about-hero: y201 less the 83px header row */
/* On the page margin above the title, where the home hero puts its scroll
hint — the one green thing at the top of the page. */
/* The bracketed trail over a detail page's title — z1_eyebrow(). Shared by
the expertise and case study heroes. */
.eyebrow {
display: flex;
align-items: baseline;
/* The space the brackets used to be typed with: a mono face, so one space is
1ch, plus the 0.04em tracking .t-tag puts after it. The bracket boxes carry
their own trailing tracking already. */
column-gap: calc(1ch + 0.04em);
margin-block-end: var(--s-3);
color: var(--c-accent);
}
/* Boxes of their own so they can be transformed — initEyebrows() slides the
closing bracket and pops the trail. A trail long enough to wrap wraps inside
its own box, and the closing bracket follows its last line. */
.eyebrow__bracket { flex: none; }
.eyebrow__bracket--close { align-self: last baseline; }
.eyebrow__text { min-width: 0; }
/* Same colour as the text around it, so hover cannot announce the link by
colour as it does everywhere else; an underline does it instead. */
.eyebrow__link:hover {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.expertise-hero__title { max-width: 1170px; } /* as .about-hero__title */
.expertise-hero__lead-row { margin-block-start: 55px; }
/* Columns 6-11, which is the axis every other paragraph on the page runs on:
the editorial body, the row-card text and the proof entries all start at
x611. A narrow right-hand rail is the home hero's construction and it is
wrong here — this lead is three sentences, not two lines. */
.expertise-hero__lead { grid-column: 6 / 12; }
.expertise-hero__media { margin-block-start: 96px; }
/* The case study's 230 between one editorial block and the next, less the
head the sections carry themselves. `.editorial` keeps no foot — see the
note on it in layout.css. */
.page-expertise .separator { margin-block: 160px 43px; }
.page-expertise .editorial { padding-block-end: 0; }
/* First rule of the page: it opens the intro rather than separating two
blocks, so it takes the case study's gap under a hero instead. */
.expertise-intro { padding-block: 113px 0; }
.expertise-intro .separator:first-child { margin-block-start: 0; }
/* As .section--solutions, which is the same heading over the same rows. */
.section--volets { padding-block: 185px 0; }
.section--volets .section__title { margin-block-end: 218px; }
/* 392 is the cap a process step's description wears, and those run to a line or
two. A volet carries a paragraph: at 392 it folded into fifteen lines beside
693px of empty card. 560 is about 70 characters at this size, and it still
stops short of the card's edge. */
.section--volets .row-card__text { max-width: 560px; }
/* The card carries the case study's own 321px of head, which is measured from
an editorial block and not from a stack of green rows. The section sets the
gap here instead, so it is the same whatever sits above. */
.expertise-encart { padding-block: 200px 0; }
.expertise-encart .case-defi { margin-block-start: 0; }
.expertise-conclusion { padding-block: 0; }
.expertise-encart .case-defi--no-media { grid-template-columns: minmax(0, 1fr); }
.expertise-encart .case-defi--no-media .case-defi__body { padding-block-start: 0; }
.expertise-preuve { padding-block: 40px 0; }
/* Held off the panel's left edge by the editorial grid inside it, exactly as
the Résultats panel is. */
.expertise-preuve__lead {
margin-block-start: var(--s-3);
font-size: var(--t-body);
line-height: calc(var(--t-body-lh) / var(--t-body));
color: var(--c-white);
}
.expertise-preuve__list {
display: grid;
gap: var(--s-6);
color: var(--c-white);
}
/* The index hangs in the gutter to the left of the paragraph, the way the
Résultats list numbers its rows — 30px plus the 16px gutter. */
.expertise-preuve__item {
position: relative;
padding-inline-start: 46px;
}
.expertise-preuve__index {
position: absolute;
inset-inline-start: 0;
top: 0.3em;
font-size: var(--t-micro);
line-height: calc(var(--t-micro-lh) / var(--t-micro));
color: var(--c-accent);
}
/* The client, in the bracketed-tag voice the eyebrows and case meta use, and in
the index's accent so "[01] BORDERON ET FILS" reads as one heading line. */
.expertise-preuve__client {
margin-block-end: var(--s-2);
color: var(--c-accent);
font-size: var(--t-body); /* up from the 12px tag size; the index stays at 10 */
}
/* With a client line to sit on, the index takes that line's height so the two
are centred on one line instead of the index aiming at the paragraph below. */
.expertise-preuve__item--client .expertise-preuve__index {
top: 0;
line-height: calc(var(--t-body) * 1.2); /* the client line's box */
}
/* The first client name sits on the baseline of "La preuve" beside it. Both
columns start at the same top, and the 46/46 heading puts its baseline 39px
down where the 16px client line puts its own at 15 — so 24 of drop. Desktop
only: at 1024 and below the panel stacks the heading over the list (see
responsive.css), and there is nothing beside it to line up with. */
@media (min-width: 1025px) {
.expertise-preuve__list { margin-block-start: 24px; }
}
.expertise-preuve__text { line-height: var(--t-editorial-lh); }
/* 60px pill, so the gap above it is measured to the pill's box and not to its
label — hence var(--s-3) rather than the s-4 the paragraphs keep. */
.expertise-preuve__link { margin-block-start: var(--s-3); }
/* The other expertises. A list of links on the body column, one per row, with
the rule between them rather than around them — the same hairline the
separators draw, at the same alpha. */
.expertise-more { padding-block: 0; }
.expertise-more__item + .expertise-more__item { border-top: 1px solid rgb(255 255 255 / 0.35); }
.expertise-more__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
padding-block: var(--s-4);
font-size: var(--t-h2);
line-height: calc(var(--t-h2-lh) / var(--t-h2));
font-weight: var(--fw-light);
color: var(--c-text-display);
transition: color var(--dur-base) var(--ease-out);
}
.expertise-more__mark {
flex: none;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 2px solid currentColor;
border-radius: var(--radius-card);
color: var(--c-accent);
transition: background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.expertise-more__link:hover,
.expertise-more__link:focus-visible { color: var(--c-accent); }
.expertise-more__link:hover .expertise-more__mark,
.expertise-more__link:focus-visible .expertise-more__mark {
background: var(--c-accent);
color: var(--c-panel);
}
/* The list is the page's last block now that the closing CTA band is gone, and
the footer brings its own 240px of head — the same reason .section--etapes
adds nothing under the Approche rows. */
/* --------------------------------------------------------------------------
Copy held at 70%
Collected here rather than added to a dozen rules, because it is one finding
and it should be revertible as one.
In XD the reduction is an `opacity: 0.7` on a GROUP around the text, so every
one of these nodes reports its full hex on the node itself — #f1f8f1 or
#3a3e3d, exactly what the CSS already had. That is why it was read as "the
colour is right" and the step was lost. Walking the scene graph with the
ancestor opacity accumulated finds 31 such nodes on the Accueil board and 15
on À propos, plus the Footer symbol.
Full strength, deliberately, because the boards draw them that way: the case
and step card titles, the bold values in the case cards' labelled rows, the
1zero1 wordmark, and the footer's own intro heading and paragraph -- see the
note on those two below.
-------------------------------------------------------------------------- */
/* Display type on dark — mist, not off-white. Every one of these is an 80px
node: Accueil 186, 1166, 3827, 5124; À propos 186, 1968, 3310. The spec panel
gives "Des résultats qui parlent d'eux-mêmes" as #B4C3BC at 70%, which is the
--c-text-display .t-display already carried before this block overrode it.
It matters more than a colour usually would. Composited on the #212121 band,
off-white at 70% lands on rgb(179 184 179) against mist's rgb(136 146 141) —
and a brighter stroke on a dark ground blooms into it, so an 80px hairline at
weight 100 read as a heavier face than the board's. The weight was never
wrong; the brightness was. */
/* Every t-display h1 on the site, not just the home page's. `.hero__title` was
the only one in this list for a while, which left the À propos, Expertises,
single-expertise, stub and case study heroes at full strength — same face,
same size, one step brighter, which reads as a heavier weight rather than as
a lighter colour. */
.hero__title,
.about-hero__title,
.expertise-hero__title,
.case-hero__title,
.section__title,
.cta__title,
.about-approche__title,
/* The label/body blocks are mist too, not the off-white they were given first.
Same reading as the headings above: the copy sits back from the ground rather
than sitting on it, and off-white at 70% was bright enough to read as a
different weight of the same face.
One pair of selectors, three places: the Client/Enjeux blocks on a case
study, À propos and Histoire on À propos, and the intro blocks, the
conclusion and the proof panel on every expertise page — all the same
component. */
.editorial__label,
.editorial__body { color: var(--c-mist-70); }
/* On the light and green cards. Accueil 4548 x3 are the step descriptions; the
À propos rows at 2973 and 4183-4900 are the wide green cards' copy. */
.step-card__desc,
.row-card__text { color: var(--c-ink-70); }
/* The Footer symbol carries 0.7 on the address, the menu, the contact pair, the
privacy link and the copyright, and 1.0 on the wordmark alone.
The intro heading and paragraph above them are NOT part of that symbol -- they
sit on the artboard at 6107 and 6123 and both measure 1.00 there, and the
paragraph is confirmed as #f1f8f1 at full strength, so it is out of this list
and keeps the colour its own rule gives it.
The heading beside it is the same case on the board and is still here, since
only the paragraph was called back. */
.site-footer__heading,
.site-footer__address,
.site-footer__menu a,
.site-footer__contact a,
.site-footer__legal a,
.site-footer__credit { color: var(--c-off-white-70); }