/* Dermazur « Ivoire » v2 — built to DESIGN.md. One system, held everywhere. */ /* ---------- tokens ---------- */ /* DEFAULT = « Dermazur », the LIVE SITE'S OWN PALETTE (owner 2026-08-23: "use the current colors of the current live website, and make the buttons similar to it too"). Every value below was read off a real render of dermazur.ca with getComputedStyle — not copied out of its stylesheet, which carries several overridden variants. Two deliberate departures from live, both for contrast (memory: never copy a reference's accessibility bug): · --muted is #5A6080, not live's #8A90B0 — the live value is ~3.4:1 on this ground and is used here for 13px captions, which must clear 4.5:1. · --brass-text is #8A6A12, not live's --gold-2 #B8952A (~3.3:1) — small gold text only. The gold METAL itself is live's #D4AF37 exactly; only gold WORDS are darkened. */ :root{ --paper:#FFFDF7; --paper-2:#F7F2E6; --paper-3:#F6F0E3; --surface:#FFFFFF; --night:#141B3D; --ink:#141B3D; --ink-2:#2E3860; --muted:#5A6080; --line:#E7DECA; --line-strong:#DACFB4; --royal:#1A23BA; --royal-2:#2A38D6; --brass:#D4AF37; --brass-text:#8A6A12; /* ---- --gold-opt: the gold that survives the contrast gate as WORDS (2026-09-01) ---- The three colour rows at the end of this file offer « Or » on the arrow links, the section titles and the entry gate. Neither standing gold token can carry it. Measured with a WCAG script against --paper, --paper-2, --paper-3 and --surface in versions L, A and B — twelve grounds — plus the gate's real ground at 375px: --brass-text worst 3.39:1 (#8A6A12 on version A's --paper-3 #DFD2BA) → under 4.5 --gold-dk worst 2.31:1 (#A8861F on the same ground) → under even 3.0 Picking the other token rescues nothing: --gold-dk is the LIGHTER of the two. The value had to go darker. ⚠ AND THE FLAT GROUNDS ARE NOT THE HARD CASE — THE GATE IS. Under 900px the gate photo becomes the ground (.sp-photo, absolute inset:0, --paper-2 with the image at opacity .16 and grayscale(.2) over it). Reading the real composited pixels under the gate's own text boxes at 375px, the darkest ground is #CFCBC1 / #C5BBAC / #BFC6CA in versions L / A / B. #6E550E — the obvious 80 %-of---brass-text pick, and 4.74:1 on the worst flat ground — measures only 3.73:1 there. #5A450B measures 4.84:1 on that same darkest pixel and 6.14:1 on the worst flat ground, so it is the value that ships. ⚠ ONE gold for the whole row, not a second lighter one for the big headings. .title and .sp-title only need 3.0:1 and could take a lighter gold, but a section title and its own sub-title in two visibly different golds reads as a fault, and this value clears the stricter 4.5 floor everywhere anyway. ⚠ Declared HERE, in :root, and deliberately NOT re-declared inside html[data-version="A"|"B"]: inheriting version A's own darker --brass-text is exactly what produced the 3.39 above. ⛔ Pre-existing and NOT fixed here, but found by the same measurement and worth someone's time: .sp-eyebrow and .sp-ed already paint var(--brass-text) on that gate ground, and they measure 3.05–3.12:1 at 375px today, before any row is touched. */ --gold-opt:#5A450B; --gold-dk:#A8861F; --metal-hi:rgba(255,255,255,.45); --metal-lo:rgba(70,52,6,.42); --sheen:rgba(255,255,255,.55); --cta-bg:#D4AF37; --cta-ink:#2C2408; --cta-bg-hover:#C9A42E; /* squared, like every other shape on this site (owner 2026-08-23: "the buttons are all rounded, it makes the website look bad, make the shapes back to how it was"). His complaint was the SHAPE only — the gold body, the bevel, the sheen sweep and the hover lift below are the live site's and stay. Versions A and B already said 2px, so all three agree now; the token stays to document that the radius is one decision. */ --btn-radius:2px; /* Azur's reply bubble = --royal 7% over --surface, WORKED OUT ONCE AND WRITTEN DOWN. ⚠ Do not put color-mix() back here. Chrome computes color-mix(in srgb, …) to the string `color(srgb 0.937137 0.939608 0.981059)`, and every contrast checker — craft-audit included — reads backgroundColor by pulling the numbers out of an rgb() string. It scored that as a 1.25:1 failure on a bubble that actually measures ~15:1. A false failure is worse than no check: it teaches you to wave through the gate that exists to catch the real one. color-mix stays fine for shadows and veils, which no checker walks. A painted TEXT background has to resolve to rgb(). */ --azur-bubble:#EFF0FA; --nav-link:#1A23BA; --nav-link-hover:#8A6A12; --nav-line:linear-gradient(100deg,#D8CDB4 0%,#FFFDF4 50%,#D8CDB4 100%); --serif:'Cormorant Garamond',Georgia,serif; --sans:'Work Sans',"Helvetica Neue",Arial,system-ui,sans-serif; --gap:24px; --wrap:1280px; --pad:clamp(20px,5vw,64px); --sec:clamp(72px,9vw,136px); /* ONE place the header's height lives. The sticky Femmes/Hommes switch parks under it (.seg-wrap top), so a hard-coded 64px in two files is how that switch ends up half behind the header the next time the header changes. Owner 2026-08-23: bigger header, bigger words in it. */ --nav-h:84px; --ease-rise:cubic-bezier(.25,1,.5,1); --ease-cine:cubic-bezier(.83,0,.17,1); color-scheme:only light; } /* ---------- headline type, switchable (owner 2026-08-24) ---------- Badia finds the Bodoni headers hard to read — the hairline strokes vanish at a glance and the swash italic reads as handwriting. Elegant-but-sturdier faces to compare on the real pages, same sizes, same italic device. All keep a true italic (the ONE contrast device, DESIGN.md §2). Every display rule already reads var(--serif), so one token swaps the whole site. The faces are self-hosted and load only when picked. ⭐ CORMORANT IS THE DEFAULT SINCE 2026-08-30 (owner set the demo's defaults to his own picks, screenshot in hand, so Badia's first open shows the version he chose). The default is always the attribute-less state, so cormorant has NO html[data-font=…] rule — the base tokens above and the base weight rules below ARE cormorant. Bodoni became the option: · bodoni — Bodoni Moda: the old default; still PINNED on the home page (see below). · cormorant — Cormorant Garamond: garalde, calligraphic but open; runs light, so the display weight sits at 600 in the base rules (400 is wire-thin at 85px). Bodoni, Fraunces (500) and DM Serif (400) each carry their own weight override. · fraunces — Fraunces: soft old-style, the warmest and most readable; has a real opsz axis, so the existing "opsz" variation settings keep working. */ /* ---- the BODY typeface is settled: Work Sans, and nothing else ---- There used to be a ?corps= palette row here that swapped `--sans` between Work Sans, Karla, Lora and Source Serif 4. The owner picked Work Sans on 2026-09-01 and asked for the other three to go, so the row, its boot segment, its labels, its query param and the three `html[data-corps=…]` rules were all deleted, and Karla/Lora/Source Serif 4 were dropped from build/fonts.mjs (their .woff2 files removed). `--sans` in :root above is now the whole story. ⚠ Work Sans never had a rule here and must not get one: it was the default, and the default is always the attribute-less state. */ /* Playfair out, DM Serif Display in (owner 2026-08-26). Chosen because it has a REAL ITALIC: these headlines set their second half in , and craft-audit's C2 fails a hero with no contrast device — which rules out every italic-less display serif (Marcellus, Prata, Italiana, Gilda Display) however well it would otherwise suit a med spa. It ships at weight 400 only, so it must NOT be given the 500/600 the variable faces use, or the browser fakes the bold. */ /* Crimson Pro is the one alternate left (owner 2026-09-05: "leave the current option for cormorant as default, take out the other options and add Crimson Pro"). Bodoni, DM Serif and Fraunces are gone. The face is already self-hosted for the ?accueil= row below. */ html[data-font="crimsonpro"]{--serif:'Crimson Pro',Georgia,serif} html[data-font="crimsonpro"] .display,html[data-font="crimsonpro"] .title,html[data-font="crimsonpro"] h3,html[data-font="crimsonpro"] .tlist-name{font-weight:600} /* ⭐ THE HOME PAGE IS ALWAYS BODONI. Owner 2026-08-26: *"For the home headline, I want it to be Bodoni, the current one… as for the other pages I want the headline to be Fraunces or Cormorant."* So ?font= now chooses the face for every page EXCEPT the home page. It re-declares the TOKEN, not the property, so every serif element on the home page moves together and the page can never end up half-Bodoni. ⚠ It must sit AFTER the html[data-font=…] rules: `body[...]` and `html[...]` are the same specificity for a custom property on different elements — but --serif set on is INHERITED by , and a value declared on itself wins over an inherited one, so this works regardless of order. It is placed here anyway so a reader sees the exception beside the rule it excepts. The weight overrides above are element-scoped and would still apply on home, so they are neutralised too. */ /* ⭐ THE HOME PAGE'S PIN — EB Garamond since 2026-09-04 (owner: *"make it EB garamond"*). It was Bodoni Moda. Being the PIN is what makes it the attribute-less ?accueil= default, so there is deliberately no html[data-accueil="ebgaramond"] rule at the end of this file. */ body[data-page="home"]{--serif:'EB Garamond',Georgia,serif} body[data-page="home"] .display,body[data-page="home"] .title,body[data-page="home"] h3,body[data-page="home"] .tlist-name{font-weight:500} /* ---------- body ink, switchable (owner 2026-08-24: running text in dark blue) ---------- Swaps the SECONDARY ink only — ledes, paragraphs, asides, list copy, prices — the tier that carries the running text. Headings stay --ink so the hierarchy still steps. #232F80 is a true navy (bluer than --night, calmer than --royal) and clears AA on every ground it sits on (10.4:1 on --paper-2, the worst case). Night-ground text is set in explicit light colours and is untouched. */ /* 🗑 Version A « Ivoire » was DELETED on 2026-09-04 — *"remove Ivory as a palette option."* Two palettes remain: the attribute-less default (Dermazur, the live site) and B « Azur ». ⚠ THE `:not()` CHAINS BELOW LOST A LINK WITH IT. `html:not([data-version="A"]):not(…"B")` was how the default palette's own button treatment was scoped; with A gone the A clause would have matched everything forever — harmless-looking, and exactly the kind of leftover that makes the next reader think A still exists. They now read `html:not([data-version="B"])`. */ /* Version B « Azur » — sampled from the beach photo (sky #ABCBDD/#D5E0E7, sea #6B9ECC/#6493AA, sand) */ html[data-version="B"]{ --btn-radius:2px; --azur-bubble:#EBF1F5; --nav-link:#3E5068; --nav-link-hover:#10233D; --nav-line:#7FA6BF; --paper:#F3F6F8; --paper-2:#E3ECF1; --paper-3:#D3E0E8; --surface:#FBFCFD; --night:#0F2D4A; --ink:#10233D; --ink-2:#3E5068; --muted:#56687C; --line:rgba(16,35,61,.16); --line-strong:rgba(16,35,61,.38); --royal:#175A85; --royal-2:#1B6795; --brass:#7FA6BF; --brass-text:#2B6384; /* ⚠ --royal-2 IS REDEFINED HERE ON PURPOSE. :root's #2A38D6 is a lighter BLUE royal; inherited into this teal palette it made the Azur launcher jump hue on hover — a blue flash on a sea-green page. #1B6795 is B's own royal lifted the same way :root lifts its own. White on it measures 6.14:1, the mint presence dot 4.01:1 (script, not eyeball). Version A needs no line: its --royal IS :root's, so :root's --royal-2 is already correct. */ /* gold, like the default palette — the owner ruled buttons gold on 2026-09-04 and the ruling is not per-palette. #2C2408 on #D4AF37 measures 9.1:1. */ --cta-bg:#D4AF37; --cta-ink:#2C2408; --cta-bg-hover:#C9A42E; } html[data-version="B"] .ground-night .eyebrow,html[data-version="B"] .ground-night .b-n,html[data-version="B"] .ground-night .step-n,html[data-version="B"] .ground-night .tlist-n{color:#9CCBE8} html[data-version="B"] .ground-night .eyebrow::before{background:#9CCBE8} html[data-version="B"] ::selection{background:#C9DEEA} html[data-version="B"] .hero-media::after{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 12%,transparent) 58%,color-mix(in srgb,var(--paper) 30%,transparent) 76%,color-mix(in srgb,var(--paper) 78%,transparent) 90%,var(--paper) 99%)} /* ⭐ GOLD, EVERYWHERE, NO LONGER A CHOICE (owner 2026-09-04: *"Remove the buttons option in palette i decided it to be gold."*) :root's --cta-* tokens ARE the gold, so the default palette needed nothing. What DID need changing is version B: it declared its own dark-blue --cta-bg a few lines above and won on the element, which is the only reason `html[data-cta="or"]` ever existed. B's declaration is now the same gold, so one ruling holds on both palettes instead of one palette quietly disagreeing. 🗑 Both `html[data-cta=…]` blocks are gone, and so is every trace of « Encre ». */ /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html:focus-within{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern";overflow-x:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul,ol,dl,dd,h1,h2,h3,h4,p,figure{margin:0;padding:0} ul,ol{list-style:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:12px;top:-80px;background:var(--ink);color:var(--paper);padding:14px 16px;min-height:48px;border-radius:2px;z-index:100} .skip:focus{top:12px} :focus-visible{outline:2px solid var(--royal);outline-offset:3px} ::selection{background:#DCCDA7;color:var(--ink)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} /* ---------- type ---------- READABILITY FIX, owner 2026-08-23 ("it looks nice, but it's just hard to read"). Bodoni Moda is a Didone with a real OPTICAL SIZE axis (6-96). The site was pinning `opsz 96` - the DISPLAY cut - at every size, including 20px headings. That is the textbook Didone mistake: at small sizes the heavy verticals dominate while the hairlines vanish, which typographers call "dazzle". Every serif rule below now names an opsz close to its own rendered pixel size, and the serif runs at weight 500 instead of 400. Same typeface, same character, sturdier strokes. And DESIGN.md's own floor is enforced at last: NOTHING is set in Bodoni under 22px. Several rules were breaking it at 1.25rem/1.35rem (20-21.6px) - the exact sizes where a Didone falls apart. Do not shrink a serif rule back under 1.45rem. */ /* weight 600 IS Cormorant's weight (the default face since 2026-08-30 — it runs light, 400 is wire-thin at 85px). Each other face carries its own override up beside its --serif rule. */ .display{font-family:var(--serif);font-weight:600;font-size:clamp(3.25rem,7.6vw,7.25rem);line-height:.96;letter-spacing:-.015em;text-wrap:balance;font-variation-settings:"opsz" 72} .title{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,4.4vw,4.1rem);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;font-variation-settings:"opsz" 48} h3{font-family:var(--serif);font-weight:600;font-size:1.6rem;line-height:1.18;letter-spacing:-.005em;font-variation-settings:"opsz" 20} .display em,.title em{font-style:italic;font-weight:500} /* Owner 2026-08-25: *"the paragraph text on the bottom of the treatment page titles is hard to read. Maybe make the text smaller."* Two things were working against it and only one was size: it set 19.44px at 1440, and `max-width:62ch` rendered **799px** — the `ch` unit is the width of a ZERO, which is much narrower than an average letter, so 62ch buys roughly 88 characters a line. The comfortable range is 55–65. Smaller type AND a real 55-ish measure: 17.28px over ~600px. Line-height goes up, not down — a shorter line with more air is the readable trade. */ /* Owner 2026-08-26: *"make the body text have longer space for the sentences to appear longer in width… not the header of the pages, more so just the paragraph."* Yesterday's 46ch measured 527px in a 738px column — textbook-correct at 62 characters, but visibly cramped next to a headline twice its width, which is what he is reacting to. 56ch lands ~640px / ~70 characters: still inside the readable band (55–75), and it no longer reads as a narrow ribbon. ⚠ The size is NOT touched — he asked for width only. `.story-p` (62ch ≈ 630px) and `.faq dd` (60ch ≈ 617px) were already measured in range and are deliberately left alone. */ .lede{font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.62;color:var(--ink-2);max-width:56ch;margin-top:24px} .eyebrow{font-family:var(--sans);font-weight:500;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--royal);display:flex;align-items:center;gap:12px;margin-bottom:14px} /* 🗑 THE GOLD HAIRLINE BEFORE EVERY EYEBROW IS GONE (owner 2026-09-04: *"remove the EM dash. It feels AI-made."*) ⚠ REMOVED SITE-WIDE, NOT JUST IN THE HERO HE WAS LOOKING AT, and that is a deliberate reading of the note. The objection is to the DEVICE — a decorative rule before a small-caps label is one of the commonest tells of a generated page — and the device sits on 13 eyebrows per page across all 50. Taking it off one and leaving twelve would not read as a choice, it would read as a bug. 🗑 The entry gate's own copy (.sp-eyebrow::before, far below) went with it for the same reason. ↩ ONE LINE TO RESTORE, in each place: content:"";width:24px;height:1px;background:var(--brass) ⚠ The two colour overrides for the night bands and version B now have nothing to paint. They are left in place on purpose — they are two harmless declarations, and deleting them would mean re-deriving both colours if the rule ever comes back. */ .sec-head .title,.thero .display{margin-top:0} .sec-head{max-width:760px;margin-bottom:clamp(36px,4vw,56px)} .sec-head-wide{max-width:900px} .aside{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:62ch;margin-top:32px;padding-top:18px;border-top:1px solid var(--line)} small{font-size:.82em} /* buttons — one language: squared letterspaced caps, 52px */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;background:var(--cta-bg);color:var(--cta-ink);border-radius:var(--btn-radius);font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;transition:background .25s var(--ease-rise),transform .15s var(--ease-rise)} .btn::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--brass);transition:right .45s var(--ease-rise)} .btn:hover{background:var(--cta-bg-hover)} .btn:hover::after{right:0} .btn:active{transform:scale(.985)} .btn-sm{min-height:50px;padding:0 22px;font-size:12.5px} /* the header book button holds an invisible copy of the OTHER language's label in the same grid cell, so FR and EN render at identical width — see navBookBtn() in build/build.mjs for why the width is derived from a word and never typed as a pixel value */ /* the hidden-sizer trick is shared with the hero BOOK (see btnBook in build.mjs), so both buttons are the same box in both languages without either one naming a pixel width. */ .nav-book,.btn-book{display:grid;place-items:center} .nav-book>*,.btn-book>*{grid-area:1/1} .nav-book-sizer{visibility:hidden;pointer-events:none;user-select:none} /* THE LIVE SITE'S BUTTON (default version only). Flat gold body — Badia rejected a gradient body, it read striped — with the two cues real metal actually has: bevelled edges (bright inner top, dark inner bottom) and a reflection that SWEEPS across on hover. Ported from dermazur.ca so Badia meets the button she already knows. ⚠️ The hover re-declares `background` in full. The live file carries a scar here: a hover that only moved background-position lost to a `background:` shorthand elsewhere and made the gold button flash blue. Do not "simplify" these back to single-property hovers. */ html:not([data-version="B"]) .btn{ border:1px solid var(--gold-dk); box-shadow:inset 0 1px 0 var(--metal-hi), inset 0 -2px 0 var(--metal-lo), inset 1px 0 0 rgba(255,255,255,.14), 0 6px 16px -10px rgba(90,68,10,.55); transition:box-shadow .2s ease, transform .18s ease, filter .2s ease} html:not([data-version="B"]) .btn::after{ top:-4px;bottom:auto;left:-70%;right:auto;width:46%;height:auto; background:linear-gradient(105deg,transparent 0%,var(--sheen) 50%,transparent 100%); transform:skewX(-18deg);pointer-events:none;transition:left .55s ease;z-index:1} html:not([data-version="B"]) .btn:hover{ background:var(--cta-bg);border-color:var(--gold-dk);color:var(--cta-ink); filter:brightness(1.05);transform:translateY(-1px); box-shadow:inset 0 1px 0 var(--metal-hi), inset 0 -2px 0 var(--metal-lo), inset 1px 0 0 rgba(255,255,255,.14), 0 12px 26px -12px rgba(124,96,20,.8)} html:not([data-version="B"]) .btn:hover::after{left:125%;right:auto} html:not([data-version="B"]) .btn:active{ transform:translateY(0);filter:brightness(.97);box-shadow:inset 0 2px 6px rgba(90,68,10,.4)} .link{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:13.5px;letter-spacing:.02em;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--line-strong)} /* ---- the 24px tap floor for standalone CTAs — M6, 2026-08-30, and it is v2.15's OWN ruling finally applied at every width ---- v2.15 measured « Voir les tarifs → » at 22px and decided to raise it: *"Standalone CTAs measured 22px tall — 2px under the 24px floor in WCAG 2.2 AA (2.5.8 Target Size Minimum). Only STANDALONE controls are raised."* ⛔ **But the rule was written INSIDE the `@media (max-width:600px)` block**, so for five weeks it only ever applied to phones and `.link` still measured **21.6px at 1440**. Nobody had probed a desktop viewport — `tap.mjs` hard-coded 375. The owner re-ruled it on 2026-08-30 as the same decision, correctly scoped. ⚠ NO `display` CHANGE IS NEEDED AND NONE IS WANTED: `.link` is already `inline-flex` above, so `min-height` applies as it stands. (The M5 lesson: read the computed display first — an element that is already inline-flex or a flex ITEM honours min-height without help, and adding `align-items:center` to "tidy" it shifts the text off its line-mates' baseline.) ⚠ EXACTLY 24, NEVER 25. craft-audit's C7 enrols any a/button/[class*=btn] wider than 60px and **taller than 24px** that is filled, bordered or named — and then demands 48. At 24 these stay outside it; at 25 every one of them would fail all 50 pages. Cost, measured at 1440 on /tarifs and /epilation-laser: page height Δ0, nav row Δ0, horizontal overflow 0. It buys 2.4px of target and moves nothing. */ .link,.brand{min-height:24px} .link span{transition:transform .3s var(--ease-rise)} .link:hover{text-decoration-color:var(--brass-text)} .link:hover span{transform:translateX(4px)} /* ---------- layout / grounds ---------- */ .sec{padding:var(--sec) 0;position:relative} .ground-1{background:var(--paper)} .ground-2{background:var(--paper-2)} .ground-3{background:var(--paper-3)} .ground-night{background:var(--night);color:var(--paper)} .ground-night .lede,.ground-night .aside,.ground-night p{color:#D7D9E6} .ground-night .eyebrow{color:#CDB577} .ground-night .eyebrow::before{background:#CDB577} .ground-night .link{text-decoration-color:rgba(244,238,227,.4)} .ground-night .link:hover{text-decoration-color:#CDB577} .ground-night .display,.ground-night .title,.ground-night h3,.ground-night dt{color:var(--paper)} .ground-night .btn{--cta-bg-hover:#E2BE49} /* ⚠ NO PER-VERSION NIGHT RULE ANY MORE. B used to swap the night button to ivory because its own --cta-bg was dark blue and vanished on a dark band; now that B's button IS the gold, the base `.ground-night .btn` hover above is correct for both palettes and a version rule would only re-introduce the disagreement the gold ruling just removed. */ /* ---------- nav ---------- */ /* the header runs 8px wider than the page column on each side (56px pad vs 64px). That is the last 16px the row needed; 8px of off-grid on a sticky bar reads as nothing, a wrapped nav reads as broken. */ /* The header spans the FULL viewport since 2026-08-24 (owner: "utilize the entire header space — put Dermazur more on the left, away from the section names, but balance the section names"). The wordmark sits at the page's true left edge, the links are centred in the viewport, phone + Réserver + langue sit at the true right — a 1fr | auto | 1fr grid, so the two sides always mirror. Page CONTENT stays in the 1152px column; only the header escapes it. */ /* ⭐ ASYMMETRIC PADDING (owner 2026-09-03): the LEFT keeps the wordmark where he put it in August ("put Dermazur more on the left"); the RIGHT gives the cluster ~19px back. ⛔ AND FIRST, THE PREMISE THAT HAD TO BE CORRECTED. DESIGN.md §2 still says the row is full at 1280 with 21px spare, and the brief for this round repeated it. It is not true any more: `@media (max-width:1365px)` below turns the links into a burger, so AT 1280 AND 1320 THERE IS NO DESKTOP ROW AT ALL, and the nav ships EIGHT links, not seven (« Accueil » was added 2026-08-25). The only widths where this row exists are 1366 and up. DESIGN.md line 385 is the one entry that already said 1365; the other three are stale. ⚠ AND AT 1366 THE ROW WAS ALREADY OVER CAPACITY — measured, not felt: `.nav-links`'s auto-margin computed to 0px in both languages and the cluster stood 18.2px (FR) / 32.5px (EN) PAST the wrap's own right padding, leaving EN 8.47px from the window edge. It never scrolled because it was eating padding, not viewport — a silent failure exactly as §2 warns. So this change is not only "push it right": widening the box AND shrinking the cluster (see `.nav-right` below) pulls its right edge back off the edge at 1366 while moving it outward at 1440, where there were 43.2px going spare. */ .nav .wrap{max-width:none;padding:0 clamp(20px,3vw,44px)} .nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)} /* ⚠ THE HEADER IS FULL. Measured at 1280px (the narrowest width the full row serves, and the content column is 1152px there and at every width above it): brand + 7 links + phone + Réserver + the language link need 1131px of the 1152, leaving 21px. That is the whole budget. The 15px link size, these gaps, the 56px nav padding and the SHORT « EN »/« FR » toggle were all chosen together to buy it — at 13.5px and the old loose gaps the row was already at 100.0%, so the bigger type the owner asked for on 2026-08-23 had to be paid for. Change ANY of them, or add a link, and re-measure at 1440/1366/1320 before shipping. */ /* Owner 2026-08-25: "keep the Dermazur logo where it is… make the other headers nicer in their placement." MEASURED before changing anything — the grid was `1fr auto 1fr`, which only centres the middle track when the two side tracks are equal. They were not: the actions block (phone + RÉSERVER + EN) is 277px and the wordmark is 123px, so the wider side forced its track open and dragged everything right. The result at 1440 was 118px of air after the logo and only **24px** before the phone number — a lonely wordmark and a crush on the right, which is exactly what the owner was looking at. Flex with `margin-inline:auto` on the links splits the LEFTOVER space equally instead, so the two gaps are always the same number whatever the two side blocks weigh: 75/75 at 1440, 146/146 at 1600, 41/41 at 1366. It also cannot overflow, because auto margins only ever distribute space that is already free — a true centre would need 802px of links centred inside 884px of room at 1366 and would collide with the actions. ⚠ `.nav-right` must NOT also carry `margin-left:auto`. Auto margins share free space between ALL of them, so a third one would hand the right gap two thirds and re-break the balance the other way. The stripped ads-page nav (`.nav-bare`, no links at all) re-adds it on purpose below. */ .nav-in{height:var(--nav-h);display:flex;align-items:center;column-gap:24px} .nav-in .nav-links{margin-inline:auto} /* the bare (ads) header has no centre column — brand left, actions right, same edges */ .nav-bare .nav-in .nav-right{margin-left:auto} /* BLUE, because the logo is blue (owner 2026-08-24: black "is out of place, and the writing for the Dermazur logo is blue to begin with"). dermazur.ca's own wordmark computes to rgb(26,35,186) — read off a real render, and the same value this system already calls --royal, which is also the nav links and the hero's blue option. One blue, used three times, not three blues. --brand-light below keeps the footer wordmark ivory on navy. */ .brand{font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--royal);padding-left:.24em} .brand-light{color:var(--paper)} .nav-links ul{display:flex;gap:clamp(16px,2vw,30px)} /* the hairline under a nav word is DRAWN from the left on hover, not faded in — growth reads as intent, a fade reads as a glitch (the live site's rule, ported) */ /* six links since « Soins » absorbed the laser entry (2026-08-24) — they must never wrap mid-word */ .nav-links a{position:relative;white-space:nowrap;font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--nav-link);padding:6px 0;transition:color .2s} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:var(--nav-line);transition:right .28s ease} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--nav-link-hover)} /* a hairline between "where can I go" and "what can I do" — the phone number, the booking button and the language switch are actions, not more navigation, and reading as one undivided run of nine items is half of why the right side felt crowded */ /* 16px → 12px between phone · RÉSERVER · FR/EN, and the divider's 4px right margin goes: 12px reclaimed for the links at every width, and 12px of headroom handed back at 1366, where the cluster is overflow-driven and its right edge therefore moves LEFT as it narrows. The three items keep a 12px gap, which is the same step `.nav-in` uses on a phone — not a new number. */ .nav-right{display:flex;align-items:center;gap:12px} .nav-right::before{content:"";flex:0 0 1px;width:1px;height:20px;background:var(--line);margin-right:0} .nav-bare .nav-right::before{display:none} .nav-tel{white-space:nowrap;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-2)} /* ---- the FR/EN toggle's tap floor — M6, 2026-08-30 ---- It measured **26 × 19.9px**: tall enough, and 4.1px too NARROW. ⚠ 2.5.8 wants a 24×24 AREA, not a 24px height — the same axis that hid `.bk-x` at 34 × 23.7px in M5. Check both. ⚠ min-WIDTH ALONE, NO `display` CHANGE, and that is measured rather than assumed: this `` is a flex ITEM of `.nav-right` (which is `display:flex`), so it computes to `display:block` and honours `min-width` as it stands. Reaching for `inline-flex` here would be the mistake M5 recorded — read the computed display before changing it. `text-align:center` keeps « EN » centred in the 24px box instead of sitting left of it, which matters because the box is now wider than its own text. Cost, measured at 1440: nav row Δ0, page height Δ0, overflow 0. The nav has 118px (FR) / 141px (EN) of slack at 1440 and is not near its 1365px burger breakpoint. */ .nav-lang{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:6px 0;line-height:1;border-bottom:1px solid transparent;min-width:24px;text-align:center} .nav-lang:hover{border-bottom-color:var(--brass)} .nav-lang:hover,.nav-tel:hover{color:var(--nav-link-hover)} .nav-burger{display:none;width:48px;height:48px;border-radius:2px;flex-direction:column;align-items:center;justify-content:center;gap:6px;margin-right:-10px} .nav-burger span:not(.vh){display:block;width:22px;height:1.5px;background:var(--ink)} /* sheets (mobile nav, booking note, chat note) */ .sheet{position:fixed;inset:0;z-index:90;background:var(--paper);color:var(--ink);padding:24px var(--pad) 40px;overflow:auto} .sheet[hidden]{display:none} .sheet-head{display:flex;align-items:center;justify-content:space-between;min-height:40px;margin-bottom:24px} .sheet-x{width:48px;height:48px;border-radius:2px;font-size:30px;line-height:1;margin-right:-12px;color:var(--ink-2)} .sheet-links li{border-top:1px solid var(--line)} .sheet-links li:last-child{border-bottom:1px solid var(--line)} .sheet-links a{display:block;padding:18px 0;font-family:var(--serif);font-weight:500;font-size:2.4rem;line-height:1.05;letter-spacing:-.01em;font-variation-settings:"opsz" 32} .sheet-foot{display:flex;gap:28px;margin-top:32px;font-size:15px;font-weight:500} .sheet-book,.sheet-chat,.sheet-cart{inset:auto 16px 16px auto;width:min(440px,calc(100vw - 32px));border:1px solid var(--line-strong);background:var(--surface);box-shadow:0 24px 60px rgba(20,27,61,.18);padding:22px 24px 26px;border-radius:2px} /* the cart panel rises from the pill, not from the corner — same object, same place */ .sheet-cart{inset:auto auto 78px 50%;transform:translateX(-50%);width:min(460px,calc(100vw - 32px));border-top:2px solid var(--brass)} .sheet-cart .cart-total b{color:var(--brass-text)} .sheet-cart .sheet-head{margin-bottom:4px} /* the treatment the visitor actually pressed, named back to them before the demo notice */ .book-pick{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:12px 14px;background:var(--paper);border-left:2px solid var(--brass)} .book-pick[hidden]{display:none} .book-pick-l{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500} .book-pick-v{font-size:15.5px;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums} .sheet-alt{margin-top:12px;font-size:14px} .sheet-book h3{margin-bottom:10px} .sheet-book p,.sheet-chat p{color:var(--ink-2);font-size:15.5px;line-height:1.55} .sheet-actions{display:flex;flex-wrap:wrap;gap:18px 24px;align-items:center;margin-top:18px} .sheet-actions .btn{min-height:48px;padding:0 20px} /* ---- the Azur launcher reads as a CHAT (owner 2026-08-26) ---- A speech bubble with three dots, then the name. The bubble carries the presence dot in its top-right corner — the placement every messaging app uses — instead of a loose dot in front of a word. Sized so the whole control stays 8px clear of the cart pill's row at 375px; the pill rides at bottom:66px on a phone and this sits at bottom:8px, so they never share a line. */ /* ---- FILLED, NOT OUTLINED (owner 2026-09-01: "make Azur more obvious") ---- It was an ivory chip with an ivory-chip neighbour on either side — three quiet outlines in a row, and the one that opens the assistant looked like the one that changes the palette. It is now the only SOLID control on the page, so it reads first without shouting: one field, royal, white type, and the same 2px corner as everything else. ⚠ --azur-fab-bg IS THE POINT OF THE CUSTOM PROPERTY, not decoration. The field, the border and the presence dot's ring must all be the SAME colour; hover changes one declaration and the three follow. Setting them separately is how a hover state drifts by one token and nobody notices until a screenshot. */ .chat-fab{--azur-fab-bg:var(--royal);position:fixed;right:16px;bottom:16px;z-index:80;display:inline-flex;align-items:center;gap:9px;min-height:56px;padding:0 18px 0 14px;border-radius:2px;background:var(--azur-fab-bg);border:1px solid var(--azur-fab-bg);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#fff;box-shadow:0 12px 34px rgba(20,27,61,.20)} .chat-fab-ic{position:relative;display:inline-flex;color:#fff;line-height:0} .chat-fab-ic svg{display:block} /* the presence dot rides the bubble's corner; the RING is what keeps it legible against the stroke it overlaps, so do not remove the box-shadow thinking it is decoration. ⚠ TWO VALUES CHANGED HERE AND BOTH WERE MEASURED. (1) The ring is the pill's OWN ground, not ivory: an ivory ring on a royal field reads as a white dot with a green speck in it. (2) The green went #2F8F5B → #6EE7AE, because #2F8F5B on royal measures 2.61:1 — a dot nobody can see is not a presence indicator. #6EE7AE measures 6.88 / 5.20 / 4.83 / 4.01:1 on the four royal fields this pill can wear (default, its hover, version B, B's hover); the floor for a non-text graphic is 3:1. */ .chat-fab .dot{position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:#6EE7AE;box-shadow:0 0 0 2px var(--azur-fab-bg)} .chat-fab-l{line-height:1} .chat-fab:hover{--azur-fab-bg:var(--royal-2)} /* ---- ONE ring, ONCE per session ---- A launcher that pulses forever is an ad. This fires a single 1.9 s expansion on the first page of a session and is then never added again (site.js, sessionStorage 'dz2-azur-ring'), so the attention is spent once. ⚠ The reduced-motion rule REMOVES it from paint (`display:none`), it does not slow it down: a ring that still expands, only politely, is the same thing the setting asked us not to do. */ .chat-fab.azur-ring::after{content:'';position:absolute;inset:-1px;border-radius:2px;border:2px solid var(--royal);opacity:0;pointer-events:none;animation:azur-ring 1.9s ease-out 1} @keyframes azur-ring{0%{opacity:.5;transform:scale(1)}70%{opacity:.12}100%{opacity:0;transform:scale(1.13)}} @media (prefers-reduced-motion:reduce){.chat-fab.azur-ring::after{display:none;animation:none}} body.sheet-open .chat-fab{display:none} /* ---------- home hero (full-bleed media) ---------- */ .hero{min-height:clamp(640px,100svh,960px);display:flex;align-items:flex-start;padding:0 0 clamp(92px,9vw,124px);overflow:hidden;background:var(--paper-2)} .hero-media{position:absolute;inset:0;z-index:0} .hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform-origin:50% 50%} /* a haze from the top-left so the headline sits on calm sky whatever the crop; the wave stays clear on the right */ /* TWO gradients, and they do different jobs. 1. A haze from the top-left, only as wide as the words need. The hero carries far less text since Badia asked for it (headline, one line, two buttons), so this is lighter than it was and lets more of the photo through. 2. The BOTTOM FADE, ported from the live site (`.hero-sea::after` on dermazur.ca, owner 2026-08-23: "the gradient following the beach at the bottom of the picture"). It has to reach the ground colour FULLY - live goes to `var(--bg)` at 94%. Ours stopped at 72% opacity, which left a visible seam where the photo ended instead of the sand melting into the page. Do not lower that last stop below 100%; the seam comes back. */ /* ⚠ THE WASH OVER THE PHOTO IS GONE (owner 2026-08-23: "take out the gradient in the main picture"). What was here was TWO stacked gradients: a 102deg haze from the top-left that veiled the picture so the headline could sit on it, and a 180deg fade so the photo meets the page cleanly at the bottom. Only the HAZE was removed — the bottom fade stays, or the photo ends on a hard horizontal edge against the ivory ground. Legibility now comes ENTIRELY from the per-glyph halo on .hero-in below, which is what DESIGN.md §3 asked for in the first place ("legibility comes from a per-glyph halo, never more veil"). ⚠ If the hero photo is ever swapped for a busier or darker one, re-check the headline BY EYE and measure contrast — there is no veil left to hide behind. */ /* ⭐ THE TOP OF THIS GRADIENT IS 12 % PAPER, NOT 0 %, AND IT IS THE PRICE OF DELETING THE HALOS. Removing the per-letter glow (owner 2026-09-04) was measured on composited screenshot pixels straight afterwards, and it broke the contrast the glow had been buying: royal #1A23BA headline, worst pixel inside its own box ... 2.95:1 at 1280 · 3.03:1 at 1440 The headline is 76-85px, so its bar is WCAG AA large text = 3:1 - and 2.95 is a FAIL, by 0.05, on the commonest laptop width. A 12 % wash of paper over the whole photograph lifts that worst pixel from rgb(88,139,194) toward paper and clears the bar with room. THIS IS NOT THE THING HE ASKED ME TO REMOVE, and the difference is the point: a text-shadow is a white glow that hugs each letter and is visible AS a glow - that is what "some white surrounding the words" named. This is a uniform tint on the picture, with no edge and no relationship to the type; it reads as the light in the photograph, not as a highlight. 12 % IS THE MINIMUM THAT CLEARS THE BAR, solved for rather than dialled in by eye. Do not lower it without re-running the contrast probe, and re-run it too if the hero photograph is ever swapped for a darker or busier one. Applied to all THREE copies of this gradient (here, version B's, and the <=900px one) - a veil on two of three is a page that fails at one screen size. */ .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 12%,transparent) 58%,color-mix(in srgb,var(--paper) 30%,transparent) 76%,color-mix(in srgb,var(--paper) 78%,transparent) 90%,var(--paper) 99%)} /* Raised (2026-08-23): with the wash removed, the actions row sat ON the dark sea and the « Voir les tarifs » link nearly vanished. The block moves up and the photo's horizon moves down (object-position below) so the ask lands on sky. ⚠ Re-check this pair together if either the hero height or the headline size changes. */ .hero-in{position:relative;z-index:1;width:100%;padding-top:clamp(72px,8.5vh,104px)} /* Legibility on the photo comes from a PER-GLYPH HALO, never from more veil over the picture - the live site's rule, and the reason Badia can keep her beach visible. The halo is the paper colour, so it reads as light haze around the letters rather than a box. */ /* ⭐ EVERY HALO IS OFF (owner 2026-09-04: *"remove the highlight behind the blue words. there's like some white surrounding the words."*) Four rules used to paint a white glow behind the hero text so it lifted off the photograph — the headline, the eyebrow, the lede and the action link. All four are gone. The gradient on `.hero-media::after` is UNTOUCHED and is now the only thing separating text from picture; it is what the copy actually sits on by the time it is read, and it is why the words do not need the glow. ⚠ Contrast was re-measured on composited screenshot pixels after this, not assumed. */ .hero-in .eyebrow{margin-bottom:0} /* Smaller (owner 2026-08-23). Was clamp(3.25rem,7.6vw,7.25rem) = 109px at 1440; now 85px — below the live site's own 92.5px, and still clear of craft-audit C2's 72px hero floor. The halo is stacked tight-to-wide instead of one soft blur: with the veil gone it has to carry the whole job, and a tight ring reads as crisp type while one big blur reads as glow. */ .hero .display{font-size:clamp(2.9rem,5.9vw,5.6rem)} /* the hero ink defaults to BLEU (#1A23BA via --royal) since 2026-08-30 — the owner's pick, and the live site's own hero blue. The halo is the thicker one a lighter ink needs (see the ?h= block near the end of this file); ?h=encre carries the old navy + thinner halo. */ /* ⭐ TWO LINES, MAX — AND THE CAP IS PER LANGUAGE (owner 2026-09-04: *"make it longer. I want them on 2 lines MAX. Laser hair removal first, and then virtually painless after."*) It was 14ch, which broke the English into THREE ("Laser hair / removal, / virtually painless."). The cap has to sit ABOVE the longest single line and BELOW the whole string, and those two numbers are different in the two languages, so one value cannot serve both: EN "Laser hair removal," 19 · "virtually painless." 19 · whole 39 → cap between 20 and 38 FR "L'épilation au laser," 21 · "pratiquement sans douleur." 26 · whole 47 → between 27 and 46 ⚠ ch IS NOT A CHARACTER. It is the advance width of "0", and EB Garamond's zero is narrower than its average letter — so these were set by MEASURING the rendered line count at 375 / 768 / 1280 / 1440 / 1920 in both languages, not by counting characters. Re-measure if the face changes. ⚠ NO
. A hard break is right at one width and wrong at every other; below ~600px the phone genuinely needs three or four lines and the cap lets it have them. */ .hero-in .display{max-width:26ch;color:var(--royal)} html[lang="fr"] .hero-in .display{max-width:33ch} /* ⛔ THE HOME HEADLINE NEVER HYPHENATES, AND THIS BUG WAS INVISIBLE TO THE LINE COUNTER. The ≤600px block far above sets `hyphens:auto` on every `.display` — written for « Thermocoagulation », a one-word headline with nowhere to wrap — and its comment claims it "does not touch a headline that already has somewhere to wrap". Once this headline was widened to two lines that claim became FALSE: at 320–480px the browser preferred to fill line 1 and split the word, rendering « L'épilation au laser, prat / iquement sans douleur. » ⚠ A LINE COUNT SAID 2 AND WAS RIGHT. It was 2 lines. It was the wrong 2 lines, and only a screenshot showed it — the probe now reads the GLYPHS ON EACH LINE, not just how many. `.hero-in .display` is (0,2,0) against that rule's (0,1,0), so it wins wherever it is written. It is scoped to the home hero: /thermocoagulation still needs and still gets `hyphens:auto`. */ .hero-in .display{hyphens:manual;-webkit-hyphens:manual} /* ⭐ AND WITH HYPHENATION OFF, THE PHONE SIZE HAS TO EARN THE SECOND LINE — measured, per language. The break has to land at the comma, so line 2 must hold the whole second half; the size where that becomes true was found by shrinking in 0.5px steps until the rendered glyphs came back as exactly two lines, at five real phone widths: FR « pratiquement sans douleur. » 320→27px · 360→30.5px · 375→32px · 414→36px · 430→37px = 8.44 / 8.47 / 8.53 / 8.70 / 8.60 vw → 8.4vw is under all ⭐ WHY `min()` AND NOT A MEDIA QUERY. 8.4vw crosses the clamp's own 46.4px floor at 552px, so min() hands over exactly there and the two curves meet at the same number — no step, no breakpoint to maintain, and nothing to re-derive if the clamp changes. A @media (max-width:479px) would have dropped 6px in one pixel of width. ⚠ THE COST, STATED PLAINLY: a French phone headline is ~30 % smaller than the English one on the same screen. French is simply longer here — 21 + 26 characters against 19 + 19 — and "2 lines MAX" on the longer language has to be paid for somewhere. The alternatives were three clean lines, or the hyphen-split above; the owner ruled two lines. */ .hero-in .display{font-size:min(9.2vw, clamp(2.9rem,5.9vw,5.6rem))} html[lang="fr"] .hero-in .display{font-size:min(8.4vw, clamp(2.9rem,5.9vw,5.6rem))} /* ⭐ THE BOTTOM LINE — the lede and the place, side by side (owner 2026-09-04). The eyebrow used to sit ABOVE the headline; it now closes the hero beside the lede. `.eyebrow` is itself `display:flex` (for its own gold rule ::before), so it stays a flex ITEM here and its rule and letterspacing are untouched — nothing about the eyebrow component changed, only where it is placed. It wraps to its own line below ~520px rather than squeezing. */ /* ⚠ THE COLUMN GAP GREW WHEN THE DASH LEFT, AND THAT IS ARITHMETIC, NOT TASTE. The eyebrow's gold hairline was 24px of rule plus its own 12px gap — 36px of separation between the two halves of this line. Removing it (owner 2026-09-04) left only this 22px gap, so the sentence and the place read closer together than before rather than the same. 34px puts the rhythm back without the device. The two halves are still told apart by their own type: sentence case against letterspaced small caps. */ .hero-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 34px;margin-top:26px} .hero-sub .lede{margin-top:0;max-width:none} .hero-sub .eyebrow{align-self:center} .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:36px} /* ⭐ The treatment hero's three links sit in a 2×2 beside « Réserver » (owner 2026-09-03, corrected the same day). His words: *"I want 'understand the treatment' to the right of 'See the prices' and 'Ask Azur for a price' under 'See the prices'."* So: [ RÉSERVER ] See the prices → Understand the treatment → Ask Azur for a price → A first pass stacked all three in ONE column, which is not what he asked for. ⚠ THE ORDER FALLS OUT OF THE DOM, NOT OUT OF PLACEMENT RULES. `grid-auto-flow` is row by default, so the three links land r1c1, r1c2, r2c1 in the order build.mjs prints them — prices, understand, Azur. Nothing is hand-placed, so adding or removing a link cannot leave a hole. ⚠ `justify-items:start`, or a 13.5px link would stretch to its whole grid track and its underline would run the full column width instead of the width of its own words. `.hero-actions` is already `align-items:center`, so the block centres itself on the button. */ .hero-links{display:grid;grid-template-columns:auto auto;gap:12px clamp(24px,2.6vw,40px);justify-items:start;align-items:center} .hero-meta{margin-top:28px;font-size:13.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center} .hero-meta .sep{color:var(--muted)} .hero-meta a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)} .hero-meta a:hover{text-decoration-color:var(--royal)} /* ---------- sub-page hero ---------- */ /* ⚠ SUB-PAGE HEROES CAME DOWN ~12% on 2026-08-25. Owner: *"the header texts or images are maybe too big on other pages… I think it's the pictures that are too big and it forces you to make the text bigger."* That diagnosis is the fix: the PHOTO column was driving the headline, so the photo was narrowed first (5fr → 4.5fr of a 12fr row: 450 → 402px wide, and the 4:5 ratio then takes the height down with it, 563 → 502px) and the display cut followed it (6.3vw → 5.5vw: 91 → 79px at 1440). ⚠ FLOOR: craft-audit C2 wants a real hero headline at 1440 — 5.5vw leaves 79px, and going much below this starts failing the gate rather than looking quieter. Re-run the audit after any further trim. ⚠ The HOME hero is a different component (.hero) and is untouched, and the ADS landing page overrides both rules below (.ads-hero .thero-grid is one column, .ads-fig img sets its own 16:9) — its full-width faded photo was a deliberate ask and must not follow this change. */ .thero{padding-top:clamp(48px,6vw,88px)} /* Owner 2026-08-25: *"'Laser hair removal, virtually painless.' — there's too much space on the right side of it… It's like an amateur did it."* He was right, and the cause is mechanical. These headlines are written `Text before, *italic word* rest.` and the italic is forced onto a NEW LINE (`em::before{content:"\A"}`, see the Dead ends note — `display:block` strands the closing period). So the half BEFORE the italic must fit on one line, or it wraps and leaves a stub. It did not fit: at 1440 « Laser hair removal, » measures 665px against a 649px cap (`max-width:13ch`), missing by 16px, so it broke into 356 + 309 and left the long italic half at 616 underneath — two stubs and a ragged hole beside the photo. Worse on French: « La microdermabrasion, » stranded **« La » alone on an 80px line.** Measured, not guessed: 12 treatment pages × 5 widths (1280→1920) were rendered against 15 combinations of type-cap, vw-step and column split. The old values scored **17/60 clean, 12 orphaned lines and 8 overflow/overlap cases**. These score **43/60 clean, 0 orphans, 0 overflow**. "Clean" = both halves each on exactly one line. The column also grew 7.5fr → 8.2fr, which is what directly answers "too much space on the right" — the copy gets the room and the gap to the photo closes. ⚠ FLOOR: craft-audit fails a photo-led hero under 56px (72px without a photo). The narrowest this renders is **63px at 1280**. Do not lower the vw step without re-running that gate. */ /* ⭐ `start`, NOT `end` — THE STANDING RULE (owner 2026-09-03). `align-items:end` bottom-aligned the two tracks: measured across all 68 two-column hero rows, copy.bottom === fig.bottom to within 0.1px, so whenever the photo was the taller column the whole copy block was pushed down by the difference. On /en/chemical-peel-montreal that was 145.0px at 1440 and 160.2px at 1280 — the eyebrow began a screen-and-a-half of white below the photo's top edge and the block read as floating. 67 of 72 measured rows failed a 24px top-gap bar; `start` makes the gap 0 by construction on every one of them. ⚠ It also fixes the mirror case nobody had named: on /epilation-laser the COPY is taller, so `end` was pushing the PHOTO down 40px instead. Same defect, other column. ⛔ `.ads-hero .thero-grid` (further down) already says `start` and is a one-column stack; it is unaffected and deliberately excluded from the 24px bar. The rule generalises and is written down as a standing rule for every site build, Part 1 §4 of ~/.claude/skills/repond-allo-client-sites/references/design-rulebook.md — ⚠ that file is OUTSIDE this worktree, so a grep scoped to the repo will not find it (one already didn't). In short: a text block aligns to the TOP of the thing beside it — never centred or bottomed against a taller neighbour, never left holding a blank column under a short heading — and the top gap gets measured before the layout is called done. */ .thero-grid{display:grid;grid-template-columns:minmax(0,8.2fr) minmax(0,3.8fr);gap:clamp(32px,5vw,80px);align-items:start} .thero-copy .display{max-width:none;font-size:clamp(2.5rem,4.9vw,4.3rem)} /* ⚠ THE COLUMN GAP IS 12px, NOT 14px, AND THE 2px IS MEASURED (2026-09-03). This row is the hero's « Durée · X · à partir de N $ » on treatments and « Aller à : a · b · c » on concerns. It wraps by design and has never broken — but /en/mens-facial-montreal carries EIGHT items and used 736.55px of a 738.00px column at 1440: 1.45px of headroom, i.e. one glyph of font drift from dropping a treatment name onto a second row. Seven gaps × 2px returns 14px and takes that page to ~15px. Every other .thero-meta on the site had ≥312px spare, so nothing else is affected and 2px is invisible at 13.5px type. */ .thero-meta{margin-top:22px;font-size:13.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:8px 12px;font-variant-numeric:tabular-nums} .thero-meta .sep{color:var(--muted)} .thero-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.88) sepia(.06)} /* The technology hero is a PRODUCT shot, not a photograph of a person, and the two cannot share one rule. `object-fit:cover` on a 4/5 box crops a 520×720 render — it would slice the top of the machine off — and on a phone the shared rule squeezes it to 16/10, which would cut a standing 1.5m device down to a letterbox. So: `contain`, its own taller box, no crop at any width. It also sits on a plinth. The render's own background is pure white, and dropped straight onto this site's cream paper a white rectangle reads as a pasted cutout — one of the "looks AI-generated" tells DESIGN.md exists to avoid. A soft surface panel with a hairline makes the same white read as deliberate product photography. The warm `sepia(.06)` is dropped here too: it is there to marry skin tones to the paper, and on brushed metal it just looks dirty. */ .thero-fig-device img{aspect-ratio:5/6;object-fit:contain;filter:none;background:var(--surface);border:1px solid var(--line);padding:clamp(18px,2.4vw,34px)} @media (max-width:900px){.thero-fig-device img{aspect-ratio:5/6}} .thero-fig figcaption,figure figcaption{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.5;max-width:48ch} .thero-plain .sec-head{margin-bottom:clamp(40px,5vw,64px)} .thero-plain{padding-bottom:clamp(40px,5vw,64px)} /* ---- the contact page's head, smaller (owner 2026-08-26) ---- Measured before: craft-audit read this h1 at 109.4px on a page whose job is to hand over a phone number. .display-sm caps it at 64px, which is still comfortably above craft-audit's C2 floor (56px for a photo-led hero; this one has no photo at all). The head block also gives back ~24px of its own margin, so a LONGER sentence and a LONGER paragraph still occupy less height than the short ones did. */ .display-sm{font-size:clamp(2.1rem,4.2vw,4rem)} /* ---- WIDER HEAD, ONE-LINE HEADLINE (owner 2026-08-27) ---- *"make the header and the first paragraph longer in width. Especially the header, I think the header being 1 line is better."* ⚠ THE ONE LINE IS BOUGHT WITH TYPE SIZE, and there is no other currency. The head can only be as wide as .wrap allows — 1152px at 1440, and STILL 1152 at 1920, because --wrap caps at 1280 and the pads at 64. The FRENCH headline is the long one at 63 characters. Measured: it draws 25.8px of width per point of font size, so 1152px of room buys about 44px and this caps at 40px, which lands the line at 1033px with 119px of slack at every width from 1280 up. That is down from the 64px .display-sm gave it: **this page's headline is deliberately smaller than every other page's, and the one line is what was bought with it.** If you re-word the headline, re-measure — a longer sentence spends the slack. ⚠ NO white-space:nowrap. A headline that cannot wrap turns a narrow window into sideways scroll. This one is SIZED to fit, and below 900px it goes back to the ordinary .display-sm scale and wraps like every other headline — 63 French characters on one 375px line would be 5px type, so the phone was never going to hold it and should not pay for the attempt. ⚠ craft-audit's C2 wants a bigger hero headline and will flag this page. That was already true at 64px and is recorded in content.mjs: this page has no hero photo and its job is to hand over a phone number, so the home-page rule does not apply to it. */ .sec-head-full{max-width:none} /* ⚠ THE CAP IS THE MEASURED ONE-LINE MAXIMUM, NOT A TASTE CALL (owner 2026-08-27: "as big as possible to keep it on one line"). The FRENCH headline draws 25.8px of line width per point of font size and the head is capped at 1152px by --wrap, so the ceiling is 1152 / 25.8 = 44.6px; 44 leaves 17px of slack. The slope keeps the same guarantee below 1280 (avail ≈ 90vw, so ≤ 3.42vw always fits). English is shorter and could carry ~56px, but the two languages share one scale everywhere else on this site and French is the one that governs. Re-word the headline one word longer and the cap must be re-measured. */ .display-line{font-size:clamp(1.8rem,3.42vw,2.75rem);line-height:1.14} /* ⚠ 940px IS MEASURED, NOT ROUND. The opening sentence draws 820px (FR) / 813px (EN) at 17.28px, so the measure has to clear ~820 for line one to hold it; and the REST is 207 French characters ≈ 1786px, which needs ≥ ~900px a line to land in two rather than spilling three words onto a fourth. 940 satisfies both with slack. Re-measure if the copy changes. ⚠ THIS IS ~95 CHARACTERS, WIDER THAN THE 55–75 THE REST OF THE SITE HOLDS TO. The owner asked for this exact break on this page. Do not copy the width to another one. */ .lede-wide{max-width:940px} /* ---- the /tarifs headline: ONE line at the craft floor (owner 2026-08-27) ---- It rendered 109.4px over three lines in half a grid; the owner called it too huge. 72px is not a taste number: craft-audit's C2 floor for a typographic hero is 72px, and its C4 accepts this photo-less hero only as "type-as-image", which needs ≥64px. This is the smallest header the gates permit — and at full width it is one line, so the block loses ~75 % of its height. The slope (5.6vw) keeps the ENGLISH line (the long one, ~15.5px of width per point of font) inside the head down to ~1024; below that it wraps like any headline. */ .display-one{font-size:clamp(2.2rem,5.6vw,4.5rem)} /* ⚠ display:block IS THE LINE BREAK. See the note in content.mjs: it holds at every width, where a width-tuned break moves the first time a word changes. */ .lede-a{display:block} .thero-tight{padding-top:clamp(36px,4.4vw,64px)} .thero-tight .sec-head{margin-bottom:clamp(28px,3.2vw,40px)} .thero-tight .lede{max-width:64ch} .thero-tight .lede-wide{max-width:940px} /* below 900 the headline cannot be one line at a readable size, so it stops trying and takes the page's ordinary scale back */ @media (max-width:899px){.display-line{font-size:clamp(2.1rem,4.2vw,4rem)}} /* ---------- treatments list (home + soins + "other treatments") ---------- */ .tlist-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start} .tlist{border-top:1px solid var(--line)} .tlist-row{border-bottom:1px solid var(--line)} .tlist-row a{display:grid;grid-template-columns:44px 1fr auto 28px;gap:20px;align-items:baseline;padding:22px 0;transition:padding .3s var(--ease-rise)} .tlist-row a:hover{padding-left:8px} .tlist-n{font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums} .tlist-main{display:flex;flex-direction:column;gap:4px} .tlist-name{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.14;letter-spacing:-.005em;font-variation-settings:"opsz" 26} .tlist-hook{font-size:16px;color:var(--ink-2)} .tlist-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap} .tlist-arrow{color:var(--muted);transition:transform .3s var(--ease-rise),color .2s} .tlist-row a:hover .tlist-arrow{transform:translateX(4px);color:var(--ink)} .tlist-fig{position:sticky;top:96px;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)} .tlist-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88) sepia(.06);display:none} .tlist-fig img.is-on{display:block} .sec-others .tlist-grid{grid-template-columns:1fr} .sec-others .eyebrow{margin-bottom:24px} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);border-top:1px solid var(--line);padding-top:32px} .steps li{display:flex;flex-direction:column;gap:12px} .step-n{font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums} .steps h3{font-size:1.75rem;font-variation-settings:"opsz" 24} .steps p{color:var(--ink-2);font-size:16px;line-height:1.6;max-width:38ch} .ground-night .steps{border-top-color:rgba(244,238,227,.2)} .ground-night .steps p,.ground-night .steps h3{color:#D7D9E6} .ground-night .steps h3{color:var(--paper)} .ground-night .step-n,.ground-night .tlist-n{color:#CDB577} /* ---------- tech / benefits (night band) ---------- */ .tech-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start} /* ---- the six Soprano benefits (owner 2026-08-26) ---- ⚠ WHAT THIS REPLACED, so nobody rebuilds it: a 2-column grid whose rows were `36px 1fr` — a number, then the text. Two of the six titles wrap to a second line, which pushed their row's bottom hairline out of line with its neighbour's, and the section read as broken rather than as dense. The numbers are gone (nothing was counting benefits) and the mark is now the icon the extractor already reads off the live site. The component is shared: three columns on the home technology section, two and smaller (.benefits-sm) inside the laser page's hero. `data-cols` carries the count so the grid and the ring animation agree about how many items are on a row. */ .benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,36px)} .benefits[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr))} /* ---- column flow: fill the FIRST column top to bottom, then the second (2026-08-27) ---- Only the laser hero asks for it, so that its six benefits read down the left column and then down the right — and so a phone, which flattens the grid to one column, reads them in that same order instead of the interleaved one row-flow produces. ⚠ --b-rows IS SET BY build.mjs FROM THE ITEM COUNT. A hard-coded 3 here is right until the extraction returns five benefits or seven. ⚠ IT MUST BE UNDONE WHERE THE GRID COLLAPSES TO ONE COLUMN — see the phone block. With one explicit column and auto-flow:column, the browser invents an implicit second column and the list goes back to two-across, which is the exact bug the phone rule already exists to stop. */ .benefits[data-flow="col"]{grid-auto-flow:column;grid-template-rows:repeat(var(--b-rows,3),auto)} .benefits li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:5px;align-content:start} /* the icon square: a tinted chip, not a filled button — DESIGN.md §Shape, radius 2px, no shadow */ .b-ic{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:2px;font-size:15px;line-height:1; color:var(--brass-text);background:color-mix(in srgb,var(--brass) 12%,transparent);border:1px solid color-mix(in srgb,var(--brass) 42%,transparent)} .benefits .b-t{font-family:var(--serif);font-weight:500;font-size:1.28rem;line-height:1.2;letter-spacing:-.004em;margin:0;color:var(--ink);font-variation-settings:"opsz" 18;align-self:center} .benefits p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0} /* on the inverted ground the chip has to carry its own contrast — the tint is invisible on navy */ .ground-night .b-ic{color:#E8CE7A;background:rgba(232,206,122,.13);border-color:rgba(232,206,122,.42)} .ground-night .benefits .b-t{color:var(--paper)} .ground-night .benefits p{color:#C3C7DA} /* ---- the technology section head: the display headline gets the WIDE side ---- */ .tech-head{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,4vw,56px);align-items:end;margin-bottom:clamp(34px,4vw,52px)} .tech-head .sec-head{margin-bottom:0;max-width:none} .tech-side{display:flex;flex-direction:column;gap:18px;align-items:flex-start} /* compact: the laser hero, where these sit under the h1 in a ~600px column */ .benefits-sm{gap:16px 26px} .benefits-sm li{column-gap:11px;row-gap:3px} .benefits-sm .b-ic{width:28px;height:28px;font-size:13px} .benefits-sm .b-t{font-family:var(--sans);font-weight:500;font-size:14.5px;line-height:1.25;letter-spacing:.005em} .benefits-sm p{font-size:13.5px;line-height:1.45;color:var(--muted)} /* the strip inside the laser hero: it takes the vertical space the lede used to, no more. The ring animation still drives it — .thero-benefits carries the wrapper ring, the items carry their own, so the six arrive as two rows rather than six separate beats. */ .thero-benefits{margin:clamp(20px,2.2vw,30px) 0 clamp(22px,2.4vw,30px)} .thero-benefits .benefits{gap:15px 24px} /* ---------- price tables (the printed card) ---------- */ .ptable{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:6px 22px 8px;margin-top:22px} .ptable:first-child{margin-top:0} .pt-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0 12px;border-bottom:1px solid var(--line-strong)} .pt-head>span:first-child{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.15;font-variation-settings:"opsz" 20} .pt-meta{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500} /* ⚠ `minmax(0,1fr)`, never a bare `1fr`, on the NAME column. A `1fr` track carries an automatic minimum of its content, so a long treatment name cannot shrink and the whole grid silently overflows its container instead — which is exactly what happened when the action column grew from 44px to 152px to fit « Réserver » beside the +: the table pushed ~66px past the 1152px text column. It went unseen at 1440 (the overspill still landed inside the viewport) and only surfaced as a horizontal scrollbar at 1280. minmax(0,…) lets the name wrap instead. */ .pt-cols,.pt-row{display:grid;grid-template-columns:minmax(0,1fr) 100px 136px 136px 152px;gap:12px 18px;align-items:baseline} /* Laser has no Cure Essentielle, so its tables run one column shorter (see cureTable). The two price columns are given ROOM rather than left hugging the name — a table that simply lost a column reads as broken; one that re-spaces reads as designed. */ .pt-cols-3,.pt-row-3{grid-template-columns:minmax(0,1fr) 116px 168px 152px} .pt-cols{padding:12px 0 8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line);text-align:right} .pt-cols small{display:block;font-size:10px;letter-spacing:.06em;color:var(--brass-text);text-transform:none;margin-top:2px;white-space:nowrap} .pt-row{padding:11px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums} .pt-row:last-child{border-bottom:0} .pt-row:hover{background:linear-gradient(90deg,transparent,rgba(20,27,61,.025) 20%,rgba(20,27,61,.025) 80%,transparent)} .pt-name{font-size:15.5px;color:var(--ink);line-height:1.35} .pt-sub{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px;max-width:52ch} .pt-p{text-align:right;font-size:15.5px;color:var(--ink-2);white-space:nowrap} .pt-p b{font-weight:500;color:var(--ink)} /* Each price's own column name (M1, 2026-08-27). ABOVE 600px it is VISUALLY hidden but still in the accessibility tree — the .pt-cols header strip is aria-hidden="true", so until now a screen reader heard « Front 75 $ 360 $ » with no idea which figure was which, at every width. ⚠ Do NOT "tidy" this to display:none — that removes it from the a11y tree and puts the defect back on desktop. The phone rule below turns it visible; that is the only difference. */ .pt-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .pt-row-flat{grid-template-columns:minmax(0,1fr) auto 152px} .pt-row-req,.pt-row-norm{grid-template-columns:minmax(0,1fr) auto} .pt-row-flat .pt-p{color:var(--ink);font-weight:500} /* ---- the add-to-cart button on every priced row (owner 2026-08-24, like the live site) ---- 48px tall for the C7 tap floor; the negative margins hand the extra height back to the row, so the tables gain a little air instead of doubling in length. Radius 2px = the one button radius this site allows. On the night ground the tables sit on their own --surface card, so one colour set works everywhere. */ /* Réserver leads, + follows — the order the owner asked for: booking one treatment must not require assembling a cart first. Both are 48px for the C7 tap floor and hand the extra height back to the row with negative margins, so the tables gain air instead of doubling in length. */ .pt-acts{grid-column:-2/-1;justify-self:end;align-self:center;display:inline-flex;gap:6px;margin:-9px 0} .pt-book{min-height:48px;padding:0 14px;background:var(--surface);border:1px solid var(--gold-dk);border-radius:2px;color:var(--brass-text);font:500 12.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s} .pt-book:hover{background:var(--cta-bg);color:var(--cta-ink)} .pt-book:focus-visible{outline:2px solid var(--royal);outline-offset:2px} .pt-add{width:44px;height:48px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;color:var(--royal);font:500 20px/1 var(--sans);cursor:pointer;transition:border-color .18s,color .18s,background .18s} .pt-add:hover{border-color:var(--gold-dk);color:var(--brass-text)} .pt-add:focus-visible{outline:2px solid var(--royal);outline-offset:2px} .pt-add.added{border-color:var(--gold-dk);color:var(--brass-text);background:#FBF6E7} /* A required add-on carries a word where the others carry a button — there is nothing to press, because site.js adds and removes it with its treatment. The line under the name says so. */ .pt-req-tag{grid-column:-2/-1;justify-self:end;align-self:center;font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text);border:1px solid var(--line-strong);border-radius:2px;padding:7px 10px;white-space:nowrap} .pt-row-req-addon .pt-name{color:var(--ink)} .pt-row-req-addon .pt-sub{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);letter-spacing:0;text-transform:none} .cart-li-req{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text)} .pt-req{font-style:italic;color:var(--muted);font-size:14.5px} .pt-h3{margin:40px 0 14px;font-size:1.3rem;color:var(--ink-2)} .sec-tprices .title{margin-bottom:36px} .sec-tprices .lede{margin-top:-12px;margin-bottom:32px} .pt-note{font-size:15px;color:var(--ink-2);max-width:62ch;margin-top:18px;line-height:1.6} /* ⚠ 14.5px IS A FLOOR, NOT A PREFERENCE — do not shrink these three rules back. design-rulebook.md §1: small type (11–14px) is for LABELS only; a running SENTENCE never goes under 14.5px. These three carried real sentences at 12.5–13px (the footer's 243-char price/GST note, the same note above the price tables, and the hero figcaption that defends the « pratiquement » claim), in BOTH languages. Measured 2026-08-31 on /epilation-laser. ⚠ AND `ch` IS NOT CHARACTERS: `ch` is the width of "0", which is wider than the average letter in Work Sans, so the old 80ch/86ch rendered as 104 and 111 REAL characters — well past the 88 the rulebook bans. Measured ratio here is ~1.30 real chars per ch, so 54ch lands at ~70, inside the 65–75 target. Re-measure that ratio before changing the face. */ .pt-legal{font-size:14.5px;color:var(--muted);max-width:54ch;margin-top:36px;line-height:1.6} /* ---- GAP 4 — « Certaines conditions s'appliquent », three forms, ONE hex ---- #7A5E16 is the live site's own conditions gold, copied on purpose: live's rule is "one hex for one meaning across the site", and this note means the same thing on both. Measured on this site's four light grounds — --paper 6.00:1 · --paper-2 5.46:1 · --paper-3 5.38:1 · --surface 6.10:1. All AA with room. ⛔ DO NOT "tidy" this to var(--brass-text) (#8A6A12): it measures 4.45:1 on --paper-3, which the tarifs and treatment price sections actually use — i.e. it FAILS AA on a ground this note is printed on. The rulebook's own line: contrast is measured per SURFACE, not per token. ⚠ 14.5px, NOT live's 12.4/11px. Same reason .pt-legal is 14.5 six lines up: these are legal sentences about money, and 11–14px is for labels. The words are live's; the size is this site's floor. If it reads heavy on a package card that is a taste call and cheap to reverse — shipping legal fine print under the floor is the thing the floor exists to stop. */ .cond-note{font-size:14.5px;color:#7A5E16;max-width:54ch;margin-top:26px;line-height:1.6} /* the same sentence, under a package LIST (owner 2026-09-01). Its own class so assertConditions() can count it against .pkg-set; same hex and same 14.5px floor as .cond-note, because it is literally the same words and one meaning gets one look. ⚠ ITALIC IS THE ONLY DIFFERENCE, and it is what the owner asked for. It sets the note apart from the card text above it without reaching for a second colour or a smaller size — the two moves the rulebook bans on a running legal sentence. ⚠ text-align:left is explicit, not inherited: the home page's set sits inside .sec-prices, whose head block is centred at some widths, and a centred legal line reads as a caption. */ .pkg-legal{font-size:14.5px;font-style:italic;color:#7A5E16;max-width:54ch;margin:26px 0 0;line-height:1.6;text-align:left} .ground-night .cond-note,.ground-night .pkg-legal,.ground-night .cond-inline{color:#CDB577} .ptable-extras .pt-head>span:first-child{font-size:1.45rem} .seg-wrap{position:sticky;top:var(--nav-h);z-index:6;padding:12px 0 14px;margin-bottom:14px;background:var(--paper)} .ground-2 .seg-wrap{background:var(--paper-2)} .seg-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)} .seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:2px;background:var(--surface)} .seg-btn{min-height:48px;border-radius:2px;padding:0 22px;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink-2)} .seg-btn+.seg-btn{border-left:1px solid var(--line-strong)} .seg-btn.is-on{background:var(--ink);color:var(--paper)} .seg-pane[hidden]{display:none} /* ---- the pane's own

(task 9a, owner 2026-09-01) ---- « Épilation laser pour femmes / pour hommes » is a REAL heading, so it is a `.title` and keeps `.title`'s family, weight, colour and reveal. Only the SIZE is narrowed: the section heading directly above it runs up to 4.1rem and two headlines that size in a row read as a duplicated title rather than as a section and its part. ⚠ PLACED AFTER `.sec-tprices .title{margin-bottom:36px}` ON PURPOSE. That rule is (0,2,0) and so is this one — a tie, which the LATER rule wins. Move this block above line 700 and the 36px bottom margin comes back and the heading floats away from its own table. */ .seg-pane>.seg-h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 22px} /* Femmes and Hommes stopped being side-by-side COLUMNS when the packages became cards (2026-08-25): a card is ~330px wide, so two columns of them left one card per row and a page that scrolled for ever. Each segment now takes the full text column and its cards run three across, the way dermazur.ca lays them out. */ /* .pkg-cols was deleted 2026-08-27 with the combined packages section — each gender's cards now sit in their own full-width section on /tarifs (see tarifsPage). */ /* ---- the /tarifs jump bar (M2, 2026-08-27) ---- Measured before: every one of the 10 links rendered 21.6px tall — 2.4px UNDER the 24px floor of WCAG 2.2 AA 2.5.8 (Target Size Minimum), at EVERY width, not only on a phone. They are not inline-in-a-sentence links, so the 2.5.8 inline exemption v2.15 leaned on does not reach them: each one is a standalone navigation control, and on a phone it is the ONLY in-page navigation the reader gets (.rail is desktop-only, see the 1279px rule below). ⚠ HOW IT SURVIVED EVERY SWEEP: sweep.mjs reports these as `TOUCH<40px`, and the documented `grep -v "TOUCH<40px"` noise filter swallows the sub-24 rows together with the benign 24–39px ones. Verify this bar with a DIRECT getBoundingClientRect probe, never through the filtered sweep. ⚠ THE MIN-HEIGHT ONLY WORKS BECAUSE THE LINKS ARE FLEX ITEMS of .jump and are re-declared inline-flex here — a plain inline ignores min-height entirely, which is how 21.6px (a bare line-height) is what was rendering. */ .jump{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:13.5px;font-weight:500;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0} .jump span{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:11.5px} .jump a{display:inline-flex;align-items:center;min-height:24px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line-strong)} .jump a:hover{text-decoration-color:var(--royal)} /* On a phone they become real chips — the same affordance .bk-day/.bk-time already use in the booking modal, so this is the site's existing "pick one of these" object, not a new one. The underline goes: a bordered chip already reads as a target, and 10 underlined full-width rows read as a wall of links. ⚠ 48px, NOT the 34px of the booking drawer's chips, AND THE REASON IS MEASURED: the moment these gained a fill they became BUTTONS to craft-audit's C7 (a/button wider than 60px, taller than 24px, filled or bordered or named), which fails a page whose shortest button is under 48. At 34px it reported `✗ C7 a button is 34px (<48)` on a page that was CRAFT FLOOR CLEAN at HEAD. The drawer's 34px chips escape C7 only because the drawer is `hidden` when closed and the gate cannot see it (v2.20) — that is an accident of visibility, not a lower standard. ⚠ THIS OVERRIDE LIVES BESIDE THE BASE RULE, not in the shared responsive block — that block is declared EARLIER in this file (line ~1281) and would win here by source order today, but the .cart-pill lesson is that the moment a component moves, a distant override silently dies. */ @media (max-width:600px){ .jump{gap:8px;padding:14px 0} .jump span{width:100%;margin-bottom:2px} .jump a{min-height:48px;padding:0 14px;background:var(--paper);border:1px solid var(--line);border-radius:2px;color:var(--ink-2);text-decoration:none;font-size:13px} .jump a:active{background:var(--night);border-color:var(--night);color:var(--paper)} } .prices-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start} /* ---- the pricing key: a flat 4-column legend strip (owner 2026-08-27) ---- It replaced .legend-grid + .legend — a bordered box floating right of the headline, sharing its grid but not its baseline, which the owner called "ugly and out of place". Flat on the ground, each term over its meaning, a hairline above each column: it reads as a legend FOR the tables below instead of competing with the headline as a second card. ⚠ THE MEDIA RULES LIVE HERE, BESIDE THE BASE RULE — the shared responsive block is declared EARLIER in this file and loses on source order (the .cart-pill lesson, already recorded). */ .pkey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin:clamp(30px,3.4vw,44px) 0 0} .pkey div{border-top:1px solid var(--line-strong);padding-top:14px} .pkey dt{font:500 11.5px/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--royal)} .pkey dd{margin:7px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)} @media (max-width:900px){.pkey{grid-template-columns:1fr 1fr}} @media (max-width:600px){.pkey{grid-template-columns:1fr;gap:14px}.pkey div{padding-top:12px}} /* ---------- who / proof ---------- */ .who-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start} .who-grid-rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .who-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9)} .who-role{font-size:14px;letter-spacing:.02em;color:var(--ink-2);margin:12px 0 26px} .who-copy>p.r{color:var(--ink-2);max-width:60ch;margin-bottom:16px;font-size:16.5px} /* the one lead paragraph the home page keeps: a size up from body, so it reads as the statement it is rather than as the first of two identical grey blocks */ .who-lead{font-size:17.5px!important;line-height:1.6;color:var(--ink-2)} .who-more{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center} .who-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 26px;border-top:1px solid var(--line);padding-top:22px;margin:28px 0 24px} /* ⚠ 1.15rem, DOWN FROM 1.45. At 1.45 every one of the three titles wrapped to two lines inside a ~200px column, so the row read as three little headings arguing with the h2 above them. These are labels on a definition list, not headings. */ .who-facts dt{font-family:var(--serif);font-weight:500;font-size:1.15rem;line-height:1.25;margin-bottom:5px;font-variation-settings:"opsz" 16} .who-facts dd{font-size:15px;color:var(--ink-2);line-height:1.55} /* ---------- faq (open, two columns) ---------- */ .faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start} .faq-grid .sec-head{margin-bottom:0;position:sticky;top:96px} .faq{border-top:1px solid var(--line)} .faq-item{padding:24px 0;border-bottom:1px solid var(--line)} .faq dt{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.2;letter-spacing:-.005em;margin-bottom:10px;text-wrap:balance;font-variation-settings:"opsz" 20} .faq dd{color:var(--ink-2);font-size:15.5px;max-width:60ch} .ground-night .faq,.ground-night .faq-item{border-color:rgba(244,238,227,.2)} .ground-night .faq dd{color:#C9CCDD} /* ⭐ THE AZUR CONTROL NEEDS AIR ABOVE IT (2026-09-03) — caught by LOOKING, not by measuring. Its

inherits margin-top:0, so on the six treatment pages the link sat 2.8px under the price card while the conditions note below it sat 26.4px away. Every number about it was correct and it still read as the last row OF the card rather than as its own control. 26px matches the gap underneath, so the link sits in its own band with equal air on both sides. ⚠ Scoped to `.pt-azur`, which build.mjs stamps ONLY on the treatment pages. The two Tarifs nudges sit directly under an

that already carries its own margin; giving them this rule would double the space there. */ /* two links side by side on the laser page (Ask Azur · Laser configurator), one everywhere else — flex with the same column gap the hero's link grid uses, so the pair reads like that pair. */ .pt-azur{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px clamp(24px,2.6vw,40px);align-items:center} /* ---------- brief / concerns / room / contact ---------- */ /* Owner 2026-08-25: *"the in-brief section in every page should maybe go at the end, or you can make that section much smaller and just take up less space so that people can get to the point more. Don't make the website like a labyrinth."* Kept where it is and shrunk, rather than moved to the end — it is a SUMMARY, and a summary that arrives after the thing it summarises is furniture. What made it a wall was not the words: on /electrolyse it is two short lines, but it wore a full `--sec` band (129.6px of padding top AND bottom at 1440, ~260px of empty ground) and set them in 1.45rem serif across a 3-column grid. It is now one hairline-separated strip that sits under the hero and is read in a glance. The section is ~85 % shorter and no fact was dropped. */ .sec-brief{padding:clamp(18px,2vw,26px) 0} .brief-wrap{display:flex;align-items:baseline;gap:clamp(18px,2.6vw,40px)} .brief-wrap .eyebrow{margin:0;flex:0 0 auto} .brief{display:flex;flex-wrap:wrap;gap:6px 26px;border-top:none;padding-top:0} .brief li{font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:56ch;padding-left:26px;border-left:1px solid var(--line)} .brief li:first-child{padding-left:0;border-left:none} /* ---- ⭐ THE STRIP NEVER BREAKS MID-LIST (owner 2026-09-03) ---- Two different defects lived in the four lines above, and only one of them was visible. (1) `.brief li{max-width:56ch}` = 522.5px. On FR /electrolyse item 2 is 547px of natural text, so it was CLIPPED to the cap and wrapped to a second text line — inside a row with 141.6px of unused width beside it. Because `.brief` is a flex row with the default `align-items:stretch`, its neighbour stretched to the same 45px and the whole strip stood two lines tall for no reason. No checker saw it: the items were still on ONE row, so a row-break test reads clean. `max-width:none` + `white-space:nowrap` ends that class of failure everywhere — an item is now atomic and either sits on the row or moves to the next. (2) The ROW break the owner named, on /microneedling (3 items; every other page has 2). `.brief-wrap-stack` (build.mjs stamps it at >=3 points) puts the label on its own line and hands the list the full 1152px content box instead of 1020.6px. That is +131.4px and it is what puts /en/microneedling on one row (needs 1085.1px). ⚠ FR /microneedling needs 1198.3px and therefore still wraps — by 46.3px, at EVERY width, because the column is 1152px from 1280 up. It now wraps by whole item with a real row-gap. ⛔ SCOPED TO >=701px. Below that the block above turns the strip into a stacked list and `white-space:nowrap` would push a 547px sentence off the side of a 375px phone. ⛔ AFTER the rules it overrides, not before — `flex` and `max-width` are re-declared here and a later declaration wins on a tie, whatever the selector. (The `gap:` / `row-gap:` lesson this file records three times over.) */ @media (min-width:701px){ .brief{flex:1 1 auto;min-width:0;row-gap:12px} .brief li{max-width:none;flex:0 1 auto;min-width:0} .brief-wrap-stack{display:block} .brief-wrap-stack .eyebrow{margin-bottom:10px} } /* ⛔ `white-space:nowrap` STARTS AT 900, AND THE 769 IT SAID FIRST WAS WRONG BY 85× ---- Written at 701 with `flex:0 0 auto`, an item could neither wrap nor shrink, so on FR /electrolyse-montreal — whose second fact is 547px of unbreakable text, « Forfaits Fidélité : 5 h −10 % · 10 h −15 % *certaines conditions s'appliquent » — a 573.6px box escaped a 514.6px list and `body{overflow-x:hidden}` CUT IT OFF. The reader saw « …certaines conditions s'appliqu ». A condition notice truncated mid-word is worse than any layout defect this round set out to fix. ⚠⚠ THEN 769 WAS PICKED FROM THE WRONG MEASUREMENT, AND AN ADVERSARIAL PASS CAUGHT IT. 727 was the width at which the DOCUMENT stopped overflowing; the real question is whether the widest item fits its own LIST, and at 769 that headroom is 0.47px on /electrolyse and −71.9px on the worst page in the set. The comment claimed "~40px". It was off by 85×, and one character added upstream would have re-opened the same clip. ⭐ THE RULE THAT COMES OUT OF IT: measure the constraint you are actually asserting, on the worst member of the set, not the one page that prompted the bug. Re-measured across all 10 strips × 9 widths, min widest-item headroom: 769 → −71.9 800 → −44.9 900 → +42.5 960 → +95 1024 → +150.9 1280 → +374.7 900 is the first width where EVERY item fits its list, and it is a step this file already uses. Below 900 items keep `max-width:none` and simply wrap inside their own full width — a two-line item, never a cut one. */ @media (min-width:900px){ .brief li{white-space:nowrap;flex:0 0 auto} } /* ⭐ NO HAIRLINE ON THIS STRIP AT ALL — IT SEPARATES BY SPACE (2026-09-03) ---- `.brief li{border-left}` + `:first-child{border-left:none}` strips the divider from the first item of the LIST, not from the first item of each ROW. A wrapped row therefore opens with an orphan 1px rule and a 26px indent, which reads as a rendering fault. There is no CSS selector for "first in row". ⚠⚠ AND THE FIRST FIX SCOPED THIS TO THE THREE-FACT STRIP ONLY, on the written claim that "the five two-fact strips provably never wrap". THAT CLAIM WAS FALSE and an adversarial pass proved it: the claim was measured at ≥1280, where the column is at its widest. Measured across every width, the number of strips wrapping to two rows is 769 → 10/10 900 → 8/10 960 → 7/10 1024 → 4/10 1152 → 2/10 ≥1280 → 1/10. Nine of the twelve pages showed the orphan rule somewhere between 700 and 1280. A rule that is only true at the width you happened to measure is not a rule. So every `.brief` separates by a 36px gap, at every width. One treatment, no orphan rule possible, nothing depending on which page or which window is in front of you. */ .brief li{padding-left:0;border-left:none} @media (min-width:701px){ .brief{column-gap:36px} } @media (max-width:700px){ .brief-wrap{display:block} .brief-wrap .eyebrow{margin-bottom:10px} .brief{display:block} .brief li{padding-left:0;border-left:none;max-width:none} .brief li+li{margin-top:6px} } .concerns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);border-top:1px solid var(--line)} /* one sentence per card since 2026-08-24 (see firstSentence() in build.mjs) — the padding comes down with the text, or nine short cards just sit in nine tall boxes and read as empty */ .concerns li{padding:20px 0;border-bottom:1px solid var(--line)} .concerns h3{font-size:1.35rem;margin-bottom:7px;font-variation-settings:"opsz" 18} .concerns p{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:40ch} .concern-go{margin-top:12px;font-size:13px;font-weight:500} .concern-go a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)} /* ═══ THE CONCERNS SECTION CLOSES ON A 28px LINK, SO IT DOES NOT NEED A BLOCK'S PADDING ═══ Only /soins-de-la-peau and /skin-treatments carry .sec-concerns, so this is scoped to them. THE MEASUREMENT (1440, before): the grid's last row is three short cards, and grid rows stretch to the tallest, so columns 2 and 3 already run empty for 77-101px up to the closing rule. Under that rule sits « Every concern, in detail » — a 28px utility line, in column 1 only. Then the section's own --sec bottom (129.6px) and the CTA's --sec top (129.6px) add 259px more. Columns 2 and 3 therefore held ~400px of unbroken paper between their last word and the BOOK band, and that is the hole the owner pointed at on 2026-09-05. --sec is sized for a section that ends in a content block. This one does not, so BOTH sides of that one boundary come in: the grid's bottom, and the CTA's top on these two pages only. Cutting the concerns side alone was measured first and left 178px — better, still a band, because half the gap was never the concerns section's to give. 1440: 129.6 + 129.6 = 259px → 49 + 95 = 143px. ⛔ ABOVE 600px ONLY, AND THAT BOUND IS THE WHOLE REASON THE RULE IS CORRECT. The hole is made by a PARTLY FILLED last grid row: 9 cards over 3 columns (>900px) leave a row of three short ones, and over 2 columns (601-900px) leave a single card beside an empty column. At <=600px the grid is ONE column (see the max-width:600px block below), every row is full, the link follows the last card directly and there is no hole — so the site's normal --sec rhythm is right there and this must not touch it. Measured before adding the bound: 375px was being pulled from the standard 144px to 96px, tighter than every other section break on the phone, fixing nothing. ⛔ NOT a --sec override like .sec-story's: that pulls the TOP in too, and the space ABOVE this grid is doing its job — it separates the grid from the section head. ⛔ The CTA rule is scoped by the adjacent sibling, so the gold band keeps its full air on the other 50 pages. Only .sec-concerns can trigger it, and only 2 pages carry that. */ @media (min-width:601px){ .sec-concerns{padding-bottom:clamp(40px,3.4vw,52px)} .sec-concerns + .sec-cta{padding-top:clamp(56px,6.6vw,96px)} } .concern-go a:hover{text-decoration-color:var(--royal)} .room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)} .room-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92)} .room-grid figure:first-child{grid-column:span 2} .room-grid figure:first-child img{aspect-ratio:2/1} .contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)} .contact-card{background:var(--surface);border:1px solid var(--line);padding:26px 28px 30px;border-radius:2px} .contact-card .eyebrow{margin-bottom:12px} .contact-card .contact-big{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--ink);line-height:1.2;margin-bottom:10px;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 26} .contact-card p{color:var(--ink-2);font-size:15px} .contact-card .cta-actions{margin-top:18px} /* ---------- story (the education, after the prices) ---------- */ .story-anchor{position:relative;top:-72px;height:0} .sec-story .title{margin-bottom:28px;max-width:22ch} .story-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start} .story-grid-1{grid-template-columns:minmax(0,760px)} .story-p{color:var(--ink-2);font-size:16.5px;line-height:1.65;max-width:62ch;margin-bottom:16px} .story-p strong{color:var(--ink);font-weight:500} .ground-night .story-p{color:#D7D9E6} .story-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.88) sepia(.06)} .story-items{border-top:1px solid var(--line);margin-top:8px} .story-items li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-2);line-height:1.5} .story-items strong{color:var(--ink);font-weight:500} .story-items-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,48px)} .punch{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.5rem,2vw,1.8rem);line-height:1.34;color:var(--ink);max-width:30ch;margin:8px 0 8px;padding-left:20px;border-left:1px solid var(--brass);font-variation-settings:"opsz" 24} .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);border-top:1px solid var(--line);margin-top:8px} .cards-3{grid-template-columns:repeat(3,minmax(0,1fr))} .cards-4{grid-template-columns:repeat(4,minmax(0,1fr))} .cards li{padding:20px 0 22px;border-bottom:1px solid var(--line)} .cards h3{font-size:1.45rem;margin-bottom:8px;font-variation-settings:"opsz" 18} .cards p{font-size:15.5px;color:var(--ink-2);line-height:1.55;margin:0} .timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);border-top:1px solid var(--line);padding-top:22px;margin-top:12px} .timeline li{display:flex;flex-direction:column;gap:8px} .tl-tag{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--royal);font-weight:500} .timeline h3{font-size:1.45rem;font-variation-settings:"opsz" 18} .timeline p{font-size:15.5px;color:var(--ink-2);line-height:1.55} .steps-n{margin-top:8px} .story-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:40px} .story-photos img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.9)} .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .tags li{border:1px solid var(--line-strong);border-radius:2px;padding:7px 12px;font-size:12.5px;letter-spacing:.06em;color:var(--ink-2)} .sec-story-quiet .story-p{font-size:15.5px} /* concerns: hub list + per-concern answers */ .clist{border-top:1px solid var(--line);max-width:900px} .tlist-grid .clist{max-width:none} .clist li{border-bottom:1px solid var(--line)} .clist a{display:grid;grid-template-columns:44px 1fr 28px;gap:20px;align-items:start;padding:24px 0;transition:padding .3s var(--ease-rise)} .clist a:hover{padding-left:8px} .clist-main{display:flex;flex-direction:column;gap:6px} .clist-name{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.14;letter-spacing:-.005em;font-variation-settings:"opsz" 26} .clist-say{font-size:15px;color:var(--ink-2);line-height:1.55;max-width:62ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .clist-go{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-top:4px} .clist-tight a{padding:16px 0} .clist-tight .clist-name{font-size:1.45rem;font-variation-settings:"opsz" 18} .clist .tlist-n{padding-top:6px} .clist .tlist-arrow{padding-top:6px} .clist a:hover .tlist-arrow{transform:translateX(4px);color:var(--ink)} .answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:start} /* ⭐ ROOM TO BREATHE (owner 2026-09-05: "the headlines, titles, body txt all feel a bit too condensed. Put a bit of space in-between them"). Four gaps opened, each one a different relationship: rule → title 20→30, title → the price meta 6→10, meta → body 14→20, and the body → « Learn more » 0→22. The h2 above the grid gets its own space from .sec-head. */ .answer{border-top:1px solid var(--line);padding-top:30px} .answer h3{font-size:1.6rem;margin-bottom:10px;font-variation-settings:"opsz" 20} .answer .story-p{margin-top:0;line-height:1.66} .answer .story-p + p{margin-top:22px} .answer h3 a{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line-strong)} .answer h3 a:hover{text-decoration-color:var(--royal)} .answer-meta{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:20px;font-variant-numeric:tabular-nums} .thero-meta a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)} .thero-meta a:hover{text-decoration-color:var(--royal)} /* ---- M5, 2026-08-28: the concern pages' « Le soin : » strip, 21.6px × 30 links ---- The third and last family the corrected tap probe found. 18 concern pages (9 FR + 9 EN), one to four links each, every one under the 24px floor of WCAG 2.2 AA 2.5.8. ⚠ NO `display` CHANGE IS NEEDED HERE, AND THAT DIFFERENCE IS THE WHOLE POINT OF THE FAMILY. `.thero-meta` is `display:flex` (line ~438), so its links are already flex ITEMS and therefore blockified — computed display:block, each with a box of its own. min-height applies straight away. It also means 2.5.8's inline exception CANNOT reach them: a flex item's height is not constrained by the line-height of surrounding text, because there is no surrounding text on its line — the « · » beside it is an aria-hidden separator between two targets, not prose. ⚠ min-height ALONE — NO `display` AND NO `align-items`, AND BOTH OMISSIONS ARE DELIBERATE. A first version added `display:flex;align-items:center`; an adversarial review measured what that actually did, and it was strictly negative: · `display:flex` buys nothing. The anchor is already a flex ITEM of `.thero-meta`, so it is blockified to display:block and honours min-height without help. · `align-items:center` centres the 21.6px line inside its 24px box, which pushes the link's baseline **1.2px below** « Le soin : » and the « · » sitting on the same line — Range- measured on /acne-cicatrices-montreal: SPAN 536.39 · A 537.59 · SPAN.sep 536.39 · A 537.59 with it, and 536.39 across the board without it. The strip is 24px tall either way. The comment here previously claimed centring was needed "or the underline drops away from the separator". **That was backwards** — the top position is the one that shares the separator's baseline. Measured, not reasoned. Cost, measured on /acne-cicatrices-montreal: strip 51.2 → 56px and page +5px at 375; strip 21.6 → 24px and page +0 at 1440. Zero overflow at both. */ .thero-meta a{min-height:24px} .sec-qa .sec-head .lede{font-size:1rem;max-width:44ch} /* concerns (legacy hub blocks) */ .concern-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(24px,3vw,40px)} .concern-h{font-size:1.45rem;margin:22px 0 8px;font-variation-settings:"opsz" 18} .concern-h a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)} .concern-h a:hover{text-decoration-color:var(--royal)} .limits{border-left:1px solid var(--brass);padding-left:20px;margin:26px 0 10px} .limits .concern-h{margin-top:0} .limits p{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:58ch} .faq-tight{margin-top:16px} .faq-tight .faq-item{padding:16px 0} .faq-tight dt{font-size:1.45rem;font-variation-settings:"opsz" 18} .faq-tight dd{font-size:15px} .concern-go{margin-top:20px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center} .concern-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.88) sepia(.06)} .concern-fig{position:sticky;top:96px} .palette-panel{width:260px} /* ---------- the pricing rail (tarifs only): quiet ticks, labels on hover, active follows scroll ---------- */ /* no transform and no opacity here — the design gate treats those as stuck animations (memory rule: deliberate hiding is display, deliberate fades are colour) */ .rail{position:fixed;left:14px;top:0;bottom:0;z-index:40;display:none;pointer-events:none} /* Owner 2026-08-25 asked for this on every page that has sections worth jumping to, so the `body[data-page="tarifs"]` gate is gone. `railFor()` in build.mjs decides WHICH pages get one (3 sections minimum); this rule only decides when it is big enough to show. */ .rail{display:flex;align-items:center} @media (max-width:1279px),(max-height:640px){.rail{display:none}} .rail ul{display:flex;flex-direction:column;gap:2px;pointer-events:auto} .rail a{display:flex;align-items:center;gap:10px;padding:6px 4px;color:var(--ink-2)} /* ⚠ The tick was a 1px `--line-strong` hairline — #DACFB4, pale sand. That was fine while the rail only ever appeared on /tarifs, which is cream paper. Now it appears on the home page too, where it lands on a bright sky photo, and pale-on-pale is invisible: zoomed in at 3× the eight ticks read as scratches on the image rather than as a control. `--muted` (#5A6080) with a soft paper glow holds on a light photo, on cream, and on the night grounds, and is still quiet enough to stay the discreet device it was designed to be. 2px rather than 1 so the active tick has somewhere to go. */ .rail i{width:16px;height:2px;border-radius:2px;background:var(--muted);box-shadow:0 0 4px rgba(255,253,247,.9);transition:width .25s var(--ease-rise),background .25s} /* The open labels FLOAT OVER the page, and they have to look like they mean to. Measured with the labels forced open: the widest chip reaches 148px on a treatment page and 216px on /tarifs, while the text column starts at 64px (1280), 107px (1366) and 144px (1440) — so on every common laptop the chips land on top of the copy. That is inherent to a fixed hover-menu at the screen edge, it pre-dates this change (/tarifs overlapped by 152px at 1280 before the rail went anywhere else), and the owner likes the interaction as it is, so the interaction is not what changes here. What changes is that an opaque chip with a hairline and no depth reads as a COLLISION, while the same chip with a shadow reads as a menu open above the page. Shadow + a slightly stronger border, and the paper-coloured ring keeps it legible where it lands on a photo. */ .rail span{display:none;font-size:12px;font-weight:500;letter-spacing:.03em;line-height:1;background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;padding:6px 9px;white-space:nowrap;box-shadow:0 0 0 3px var(--paper),0 10px 26px -10px rgba(20,27,61,.45)} /* ⚠ ONE label at a time — the tick the pointer is actually on. This rule used to be `.rail:hover span`, which opened ALL of them together: eight chips, ~30px apart, forming a 150px-wide wall down the left edge. Measured, that wall lands ON the copy at every common laptop width (text starts at 64px @1280, 107 @1366, 144 @1440; the widest chip reaches 148 on a treatment page and 216 on /tarifs) and a screenshot at the worst case shows it covering the H1's second line and three lines of the lede. A shadow was tried first and was not enough — it made the wall read as a floating wall. A single transient chip is the standard flyout behaviour and is the one the reader is looking at anyway, so the overlap costs one line instead of a column. Every label is still reachable, and the ticks themselves stay clickable with no hover at all. ⚠ Do NOT add `.rail a.is-active span` here: the active tick is always somewhere on screen, so that would put a permanent chip on top of the copy — the same bug, minus the hover. */ .rail a:hover span,.rail a:focus-visible span{display:inline-block} .rail a:hover i{width:24px;background:var(--ink)} .rail a.is-active i{width:24px;background:var(--royal)} .rail a.is-active{color:var(--ink)} .rail a.is-active span{border-color:var(--line-strong)} /* The « Aperçu » tick means "back to the top of the page", so it must land at 0, not at the hero section's own offset. The hero starts 85px down (the sticky header occupies that space in flow), so clicking it stopped at scrollY 85 — visually identical under an 84px sticky nav, but not actually the top. An over-large scroll-margin makes the browser clamp the target to 0. ⚠ scroll-margin does not move the element, so the rail's scroll-spy is unaffected. */ #apercu{scroll-margin-top:200px} @media (prefers-reduced-motion:reduce){.rail i,.rail span{transition:none}} /* ---------- the phone jump bar (M3, 2026-08-27) — the rail's stand-in below 1280px ---------- The rail is `display:none` under 1280px wide, so on a phone /tarifs (32.4 screens after M1) and /epilation-laser (30.7) had nothing to navigate with once the hero scrolled away. This is a 44px sticky bar under the header: the section you are in, and a tap to go somewhere else. ⭐ IT HAS NO LIST OF ITS OWN — build.mjs hands it the rail's rows, and site.js marks it active from the SAME `data-rail` scroll-spy the rail uses. One list, one spy, two presentations. ⚠ HIDDEN ABOVE 1024px, WHERE THE RAIL IS STILL HIDDEN TOO. The rail's own cut-off is 1279px, so 1024–1279 is a real gap; the bar covers it rather than leaving tablet users with nothing. Do not "align" this to the rail's 1279 without checking that gap again. ⚠ --pjump-h IS LOAD-BEARING: `.seg-wrap` on /epilation-laser is ALSO sticky at var(--nav-h), so without the offset below the two would stack on the same line and the segment control would be swallowed. The offset is written against the variable, not a copied 44. */ /* 48px button + its 1px rule. ⚠ THE 48 IS craft-audit's C7 FLOOR, not taste: C7 counts any a/button/[class*=btn] wider than 60px, taller than 24px, that is filled, bordered or NAMED a button — `.pjump-btn` and the chips are all three — and fails the page if the shortest is under 48. Measured at 34/44px first: `✗ C7 a button is 34px (<48)` on all four combos, on a page that was CRAFT FLOOR CLEAN at HEAD. */ :root{--pjump-h:49px} .pjump{display:none} @media (max-width:1024px){ /* ⚠ A SOLID BACKGROUND, NOT color-mix(), AND THAT IS A RULE THIS REPO ALREADY LEARNED ONCE: "a painted TEXT background must resolve to rgb()". Chrome computes `color-mix(in srgb, var(--paper) 94%, transparent)` to `color(srgb 1 0.992 0.969 / 0.94)`, and every contrast checker (craft-audit's bgOf included) pulls numbers out of an `rgb()` string — it read that as near-BLACK and reported 1.25:1 on the section label and 3.4:1 on « Aller à », both of which actually measure 6.07:1 and better on paper. The second reason is not the gate at all: this bar scrolls OVER the navy package cards and the navy CTA bands, and a 94 % bar would take their colour up into the one label whose job is to stay readable. Solid is correct here even without a checker. */ .pjump{display:block;position:sticky;top:var(--nav-h);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)} /* stood down while the page's own « Aller à » strip is on screen — see site.js. ⚠ `display:none`, not opacity/visibility: this codebase's rule is that deliberate hiding is `display` and deliberate fades are colour, and design-capture's checker flags anything under 0.99 opacity as a possible frozen reveal (recorded in Dead ends). */ .pjump.is-idle{display:none} /* ⚠ minus the 1px rule, so --pjump-h is the WHOLE bar's height and every consumer of it (.seg-wrap's sticky top, :target's scroll-margin) offsets by a number that is actually true. Measured before this line existed: bar bottom y117 against a seg-wrap pinned at 116. */ .pjump-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:calc(var(--pjump-h) - 1px);padding:0 clamp(16px,4vw,32px);background:none;border:0;text-align:left;cursor:pointer} .pjump-lab{flex:0 0 auto;font:500 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* the section you are in — it truncates rather than wraps, because the bar's height is the thing keeping it out of the reader's way */ .pjump-now{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px/1.2 var(--sans);color:var(--ink)} .pjump-caret{flex:0 0 auto;width:9px;height:9px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s} .pjump-btn[aria-expanded="true"] .pjump-caret{transform:rotate(225deg) translate(-2px,-2px)} /* the open list: the same chip the /tarifs « Aller à » strip uses, so it is one object the reader has already met at the top of the page rather than a second kind of control */ .pjump-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:4px clamp(16px,4vw,32px) 14px;list-style:none;max-height:min(52vh,340px);overflow-y:auto;border-top:1px solid var(--line);background:var(--paper)} .pjump-list[hidden]{display:none} .pjump-list a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;background:var(--surface);border:1px solid var(--line);border-radius:2px;color:var(--ink-2);font:500 13px/1 var(--sans)} .pjump-list a.is-active{background:var(--night);border-color:var(--night);color:var(--paper)} /* ⚠ stack the segment control BELOW the bar — both are sticky and both would otherwise pin to var(--nav-h). Scoped to the laser page because that is the only page carrying both. */ body[data-page="laser"] .seg-wrap{top:calc(var(--nav-h) + var(--pjump-h))} /* every jump target has to clear the header AND the bar, or the section title lands underneath them. ⚠ #apercu keeps its own 200px (it means "the very top", see above) — an ID selector outranks :target, so that rule wins without needing to be repeated here. */ :target{scroll-margin-top:calc(var(--nav-h) + var(--pjump-h) + 12px)} } @media (prefers-reduced-motion:reduce){.pjump-caret{transition:none}} /* ---------- the combination ladder (laser + tarifs) ---------- */ /* a band that carries only two short sentences must not keep a full-height section's padding */ .sec-tight{padding:clamp(48px,6vw,84px) 0} .sec-tight .story-p:last-child{margin-bottom:0} .sec-ladder .steps{margin-bottom:clamp(36px,4vw,56px)} /* ⭐ THE MULTI-ZONE HEADING GETS THE ROW, SO IT HOLDS ONE LINE (owner 2026-09-04: "make it 'Several areas, same day, lower price' in ONE line… it saves space and makes it look elegant"). Shortening the words was not enough on its own: `.sec-head` caps at 760px and the line needs more than that at 63.36px, so it still broke after two commas — the worst place to break, since the three beats are the whole point of the rewrite. ⚠ ONLY THE HEADING WIDENS. `.sec-head` also holds the lede, and a paragraph set to 1152px would run past 90 characters a line — so the lede keeps the old 760px measure and the h2 alone escapes. Widening the shared container would have fixed the heading by breaking the paragraph under it. */ .sec-ladder .sec-head{max-width:none} .sec-ladder .sec-head .lede{max-width:760px} .ladder-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start} .ladder-notes .pt-note{margin-top:16px} .ladder-notes .pt-note b{font-weight:500;color:var(--ink)} .stack-note{font-size:16.5px;line-height:1.6;color:var(--ink);max-width:60ch;padding-left:20px;border-left:1px solid var(--brass)} /* the form that RIDES WITH THE DISCOUNT, inside the ladder card itself (owner 2026-08-28: "all 'Conditions apply' next to the multizone discount text. In gold too like the other places"). A block, not an inline span, because it follows .pt-row rows — its hairline separates it from the last rung the way the rungs are separated from each other. Colour + size: see .cond-note. */ .cond-inline{display:block;font-size:14.5px;color:#7A5E16;line-height:1.45;padding:12px 0 6px} /* ⚠ NO border-top HERE, and the reason is one line further up: `.pt-row:last-child{border-bottom:0}` stopped firing the moment this note became the table's last child, so the final rung kept its hairline. A border of its own drew a SECOND one 1px below — visible as a double rule under « 4+ grandes zones ». The row's own border is the separator; this note just sits under it. */ /* the zones whose price is set in person: named compactly, not 26 rows of "Sur demande" */ .req-block{margin-top:44px;border-top:1px solid var(--line-strong);padding-top:26px} .req-block .pt-h3{margin-top:0} .req-block .pt-note{margin-bottom:26px} .req-block .eyebrow{margin:22px 0 12px} .req-block .tags li{background:var(--surface)} /* ---------- reviews, quoted with the name ---------- */ /* ---- reviews, reformatted (owner 2026-08-26: "make it easier to read, better formatted") ---- Cards, not three paragraphs sharing two hairlines — see the note above reviewsSection() for what each change is answering. No shadow: DESIGN.md §Shape, "depth is colour and hairlines". */ .rev-score{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-variant-numeric:tabular-nums} .rev-score b{font-weight:500;font-size:15px;color:var(--ink)} .rev-stars{color:var(--brass-text);letter-spacing:.14em;font-size:15px;line-height:1} .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)} .quotes li{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:22px 24px 18px} .q-stars{color:var(--brass-text);letter-spacing:.16em;font-size:14px;line-height:1;margin:0} /* a blockquote, because these are somebody's words; the browser's default margin is cleared here rather than in a reset so the element keeps its meaning */ .q-t{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0;flex:1} .q-f{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)} .q-src{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .ground-night .quotes li{background:rgba(244,238,227,.05);border-color:rgba(244,238,227,.2)} .ground-night .q-t{color:#D7D9E6} .ground-night .q-f{border-top-color:rgba(244,238,227,.2)} .q-by{font-family:var(--serif);font-weight:500;font-size:1.05rem;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);font-variation-settings:"opsz" 16} .ground-night .q-by{color:var(--paper)} .sec-proof .wrap>p.r{margin-top:26px} /* ---------- Azur (home) ---------- */ /* ---- Azur: what she can do, and the chat that shows it (rebuilt 2026-08-23) ---- The explaining paragraph is gone. Left = the ranked capability list, right = the conversation. Equal columns: neither half is the illustration of the other, they are the two halves of the same claim. */ .azur-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:start} .azur-can{border-top:1px solid var(--line);margin:28px 0 0} .azur-can li{padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.3;font-variation-settings:"opsz" 18;color:var(--ink)} .azur-grid .cta-actions{margin-top:32px} /* the chat, dressed as a chat — a card, a live dot, one exchange, a message box */ .azur-chat{background:var(--surface);border:1px solid var(--line);border-radius:2px;overflow:hidden} .azur-chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)} .azur-av{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--royal);color:#fff;font-weight:500;font-size:16px;letter-spacing:.02em;border-radius:2px} .azur-who{display:flex;flex-direction:column;gap:3px;min-width:0} .azur-who b{font-size:15px;font-weight:500;color:var(--ink)} .azur-who i{font-style:normal;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px} .azur-dot{width:7px;height:7px;border-radius:50%;background:#1F9D55;flex:none} .azur-chat-body{padding:18px} .azur-msg{margin:0;font-size:15.5px;line-height:1.55;padding:13px 15px;border-radius:2px;max-width:92%} .azur-msg-you{background:var(--paper-2);color:var(--ink-2);margin-left:auto} .azur-msg-az{background:var(--azur-bubble);border-left:2px solid var(--royal);color:var(--ink);margin-top:12px} .azur-msg-az+.azur-msg-you{margin-top:16px} /* the conversation is shorter than the list beside it; centring splits the leftover height above and below instead of hanging it all under the card */ .azur-col{align-self:center} /* looks like a message box, IS a button — it opens the honest "this is a demo" notice */ .azur-chat-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border-radius:2px;padding:15px 18px;border-top:1px solid var(--line);background:var(--paper);color:var(--muted);font:400 15px/1 var(--sans);text-align:left;cursor:pointer;transition:background .2s,color .2s} .azur-chat-foot:hover{background:var(--paper-2);color:var(--ink-2)} .azur-send{display:grid;place-items:center;width:34px;height:34px;flex:none;background:var(--royal);color:#fff;border-radius:2px;font-size:15px} /* ---------- legal page (the live Law 25 text, re-set in this system) ---------- */ /* the legal title is the live page's own sentence, so it is long — smaller than a marketing hero but still above the design floor (≥72px at 1440), and it keeps the italic device */ .display-legal{font-size:clamp(2.8rem,5.4vw,5rem);font-variation-settings:"opsz" 48} .legal-body{max-width:74ch} .legal-body h2{font-family:var(--serif);font-weight:500;font-size:1.7rem;line-height:1.2;color:var(--ink);margin:44px 0 12px;padding-top:22px;border-top:1px solid var(--line);font-variation-settings:"opsz" 22} .legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0} .legal-body p,.legal-body li{font-size:16px;line-height:1.7;color:var(--ink-2)} .legal-body p{margin-bottom:14px} .legal-body ul{list-style:none;padding:0;margin:8px 0 18px} .legal-body li{padding:10px 0 10px 22px;border-bottom:1px solid var(--line);position:relative} .legal-body li::before{content:"";position:absolute;left:0;top:1.05em;width:10px;height:1px;background:var(--brass)} .legal-body b{font-weight:500;color:var(--ink)} .legal-body a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)} .legal-body a:hover{text-decoration-color:var(--royal)} .legal-body .note{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:16px 18px;margin:8px 0 18px;font-size:15px} .sec-ask .cta-actions{margin-top:8px} /* ---------- technology page ---------- */ .claims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);border-top:1px solid var(--line)} .claims li{padding:20px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.3;font-variation-settings:"opsz" 18;max-width:34ch} .numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,48px);border-top:1px solid var(--line-strong)} .numbers li{padding:26px 0 28px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px} .numbers b{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,4.6vw,4rem);line-height:1;letter-spacing:-.01em;font-variation-settings:"opsz" 44;font-variant-numeric:tabular-nums} .numbers span{font-size:15px;color:var(--ink-2);line-height:1.5;max-width:24ch} /* the Fitzpatrick strip — six real tones, the one component on this site that is a picture made of data rather than a photo; ported from the live page, which already carries it */ .fitz{background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:26px 28px 24px;max-width:820px} .fitz-lab{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--royal);font-weight:500;margin-bottom:18px} .fitz-scale{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .fitz-scale li{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .fitz-scale i{display:block;width:100%;height:56px;border-radius:2px;border:1px solid var(--line)} .fitz-scale span{font-size:12.5px;font-weight:500;letter-spacing:.1em;color:var(--ink-2)} .fitz-note{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:62ch;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)} /* ⭐ 7/5 + a 4/3 photo (owner 2026-09-04, the empty-space sweep). The « Viora Pristine » row ran a 735px photo beside a 359px list — a 371px void, 51 % of the row, and the second-worst on the site. Measured after: 34px at 1440, 36.5 at 1280 (−91 %). ⭐ AND 4/3 IS THE FILE'S OWN SHAPE. clinic-machines.jpg is natively 1600×1200 = 4:3, so the old 4/5 was cropping 40 % of the picture away to make a hole underneath it. This is the rare fix that costs nothing: the image gets bigger AND the void goes. */ .dev-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start} .devices{border-top:1px solid var(--line)} .devices li{padding:22px 0;border-bottom:1px solid var(--line)} .devices h3{font-size:1.5rem;margin-bottom:6px;font-variation-settings:"opsz" 20} .devices p{font-size:15.5px;color:var(--ink-2);line-height:1.55;max-width:44ch} .dev-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92)} .sec-trio .tech-copy .tags li,.sec-tech .tech-copy .tags li{border-color:rgba(244,238,227,.34);color:#D7D9E6} .sec-tech .tech-side .tags{margin:0} .sec-tech .tech-copy p.r{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center} .sec-trio .lede{max-width:52ch} /* ---------- cta band ---------- */ .cta-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:end} .cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:32px} .cta-meta{display:grid;gap:18px;border-top:1px solid var(--line-strong);padding-top:22px} .cta-meta dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:4px} .cta-meta dd{font-size:15px;color:var(--ink);line-height:1.5} .cta-meta a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)} /* ---- M5, 2026-08-28: the CTA band's Google-reviews link, 18px, on 48 of the 50 pages ---- Same defect and same link TEXT as the footer one raised below — and v2.15's ruling named the `
` alongside the footer, so this reverses that half of it too. ⚠ IT LOOKS EXEMPT AND IS NOT. The markup is `
20 min, par téléphone
5,0 · 200+ avis Google
` — the `
` puts the link alone on its own line, so neither half of 2.5.8's inline exception applies: it is not in a sentence, and no non-target text shares its line to constrain it. ⭐ THIS IS THE ONE THE PROBE ITSELF WAS HIDING. `tap.mjs` v1 tested "does the parent hold ≥12 more characters than the link", which the `
`-separated sibling satisfied, so it reported this as *exempt* on every page. The heuristic now walks siblings and stops at a
. **A checker that over-exempts is the same failure as the sweep filter this probe exists to answer** — fix the checker first, then look at what it finds. Cost, measured: the
grows 1.5px, the page 1px at 375 and 0 at 1440. */ .cta-meta dd a{display:inline-flex;align-items:center;min-height:24px} /* ---------- footer ---------- */ .foot{background:var(--night);color:#C9CCDD;padding:clamp(56px,7vw,88px) 0 28px;font-size:14.5px} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding-bottom:40px;border-bottom:1px solid rgba(244,238,227,.16)} .foot h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8E94B4;font-weight:500;margin:0 0 10px} .foot h4+p+h4{margin-top:22px} .foot p{margin:0 0 10px;line-height:1.55;max-width:34ch} .foot a:hover{color:#fff} .foot li{margin-bottom:6px} /* ---- M5, 2026-08-28: the footer links meet the 24px tap floor ---- ⭐ THIS REVERSES v2.15's RULING, ON THE OWNER'S WORD (2026-08-28), AND THE REASON IS THAT THE OLD RULING RESTED ON TWO WRONG FACTS. v2.15 left these at their natural height because "2.5.8 exempts inline links" and "padding them out would wreck that text's rhythm". · The exemption does NOT reach them. WCAG 2.2 AA 2.5.8 exempts a target IN A SENTENCE, or one whose size is constrained by surrounding non-target text. An
  • whose entire content is one link is not a sentence, and neither is an e-mail address alone on its line. These were real AA failures — same class as the /tarifs jump links v2.27 fixed. · The rhythm cost is half a percent. MEASURED before changing anything, by injecting this exact rule into the live page: the footer goes 818.8 → 822.8px at 375 (+4.0) and 457.2 → 462.1 at 1440 (+4.9). Each link box goes 17 → 24px, but `.foot li{margin-bottom:6px}` already reserved most of that space, so the footer absorbs the rest. Before/after screenshots at 375 and 1440 are indistinguishable. ⚠ THE `display` IS THE WHOLE FIX; min-height ALONE DOES NOTHING. A plain inline has no height of its own — 17px was a bare line-height, exactly as the /tarifs jump links' 21.6px was. ⚠ IT CLEARS TEN LINKS, NOT THE SEVEN THE HANDOFF NAMED. The seven were what the tap probe reported as failures; it had exempted three more (the phone number, « Confidentialité », the address) as arguably-inline. This rule raises all of them, which is the right side to err on. ⚠ Three already-tall links grow ~5px too (the 3-line address, « Clientèle trans & non-binaire », and « Peelings chimiques + LED » when it wraps at 375) — inline-flex changes their line-box maths. Verified they still wrap identically; do not add exceptions to chase those 5px. */ .foot li a,.foot-rev a,.foot p a{display:inline-flex;align-items:center;min-height:24px} .foot-rev a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(244,238,227,.3)} .foot-legal{font-size:14.5px;color:#8E94B4;margin-top:22px;line-height:1.6} /* ⚠ `.foot .foot-legal`, not `.foot-legal`. The `max-width:86ch` here used to sit on the bare class and was silently beaten by `.foot p{max-width:34ch}` two rules up — same weight class, but the `p` type selector wins — so DESIGN.md §2's "one-line legal strip" rendered as a 282px, six-line column on ALL 50 pages. Both gates pass it either way: the text is visible and AA-legible, just the wrong shape. Found 2026-08-23 by looking at the footer while building the ads page. */ .foot .foot-legal{max-width:54ch} .foot .foot-demo{max-width:86ch} .foot-demo{font-size:12px;color:#8E94B4;margin-top:12px} /* ---- M4, 2026-08-27: the last footer lines were under the three floating widgets ---- Measured at 375 with 2 items in the selection, scrolled to the very bottom of /tarifs: .cart-pill y 698–746 covered .foot-legal (the price/GST paragraph, y 648–745) .palette y 756–804 covered .foot-demo (the "this is a demo" note, y 755–774) .chat-fab y 756–804 covered .foot-demo as well Nothing overflowed and nothing was hidden, so no gate in this repo could see it — the pill is `position:fixed` and simply paints on top. Found by screenshot, confirmed by intersecting the widget boxes with the text boxes. ⚠ THE NUMBER IS THE TOP OF THE HIGHEST WIDGET, NOT A ROUND FIGURE. The pill's top sits 114px off the bottom of an 812px viewport, and the last line used to end 38px off it, so the footer owes the widgets 114 − 38 = 76px more than its 28px — 112px, with the remainder as slack for a longer pill label. The pill is the deciding one because it is the highest of the three; solve for palette/chat-fab alone and an occupied cart puts the legal text back under it. ⚠ THIS OVERRIDE LIVES BESIDE THE FOOTER'S OWN RULE, not in the shared responsive block — the .cart-pill lesson, recorded twice in the handoff: a distant override dies silently the moment a component moves. */ @media (max-width:600px){.foot{padding-bottom:112px}} /* ---------- palette panel (QA gate 30) ---------- */ .palette{position:fixed;left:16px;bottom:16px;z-index:80;font-size:12.5px} .palette-btn{min-height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:var(--ink-2)} /* ⚠ THE PANEL IS TALLER THAN THE SCREEN AND MUST SCROLL. Owner 2026-08-26: *"I'm not sure if I can see everything right now."* He could not: measured with all rows open, the panel stands **965px** tall and its top sat at **−129px on a 900px screen, −217px at 812, −329px at 700** — the first rows (the version and CTA choices) were simply above the window with no way to reach them, because the panel is anchored to its button at the BOTTOM and grows upward off-screen. Capped to the viewport minus the button and a margin, and scrolled internally. `overscroll-behavior` stops a flick inside the panel from scrolling the page behind it once it hits the end. */ .palette-panel{position:absolute;left:0;bottom:48px;width:240px;background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;padding:16px 16px 14px;box-shadow:0 18px 50px rgba(20,27,61,.16);max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain} .palette-panel[hidden]{display:none} .palette-lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:10px 0 6px;font-weight:500} .palette-row{display:flex;flex-wrap:wrap;gap:6px} .palette-row button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:2px;padding:5px 8px;font-size:12px} .palette-row button i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line-strong);display:inline-block} .palette-row button.is-on{border-color:var(--ink)} .palette-reset{margin-top:12px;font-size:11.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px} /* ================================================================== BOOKING ==== The funnel's own surface. Every token here is the site's — ivory surface, hairlines, 2px radius, Bodoni for the screen headings, brass for anything about money. DESIGN.md §Shape: "no shadows; depth is colour and hairlines" — the ONE shadow below is the modal's lift off the dimmed page, which is the only place this design admits depth, and it matches .sheet's. ⚠ It is a real modal: it dims the page, traps focus and locks the body scroll. The corner .sheet pattern could not hold this — the laser service list alone is 33 rows. */ .bk-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px} .bk-ov[hidden]{display:none} .bk-back{position:absolute;inset:0;background:rgba(20,27,61,.42);backdrop-filter:saturate(1.1) blur(2px)} .bk-modal{position:relative;display:flex;flex-direction:column;width:min(680px,100%);max-height:calc(100dvh - 48px); background:var(--surface);border:1px solid var(--line-strong);border-top:2px solid var(--brass);border-radius:2px; box-shadow:0 30px 80px rgba(20,27,61,.28)} body.bk-lock{overflow:hidden} .bk-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 12px;border-bottom:1px solid var(--line);flex:0 0 auto} .bk-crumb{font:500 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* ⚠ min-WIDTH as well as min-height (2026-08-28). 2.5.8 wants a 24×24 AREA, and this one had `min-height:34px` but only `padding:0 4px` around a 26px « × » — it measured **34 × 23.7px**, 0.3px short on the axis nobody had checked. On the button that CLOSES the modal. ⛔ IT IS INSIDE THE `hidden` MODAL, WHICH IS WHY IT SURVIVED EVERYTHING: craft-audit skips a hidden drawer (v2.20), the 50-page sweep never opens the modal, and `build/tap.mjs` measures only what is painted and says so. It was found by opening the modal and measuring on purpose. 34 matches every other control in that modal. */ .bk-x{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-2);cursor:pointer;padding:0 4px;min-height:34px;min-width:34px} .bk-x:hover{color:var(--ink)} .bk-body{padding:22px 24px 26px;overflow-y:auto;flex:1 1 auto;min-height:0} .bk-loading{color:var(--muted);padding:40px 0;text-align:center} .bk-h{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.16;color:var(--ink);margin:0 0 8px;font-variation-settings:"opsz" 28} .bk-sub{color:var(--ink-2);font-size:15px;line-height:1.55;margin:0 0 18px;max-width:60ch} .bk-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} /* the family label above a run of options — a label, not a heading, so it stays quiet */ .bk-fam{font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:14px 0 2px} .bk-fam:first-child{margin-top:0} .bk-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:2px; padding:13px 14px;cursor:pointer;transition:border-color .16s,background .16s} .bk-opt:hover{border-color:var(--line-strong);background:var(--surface)} .bk-opt:focus-visible{outline:2px solid var(--royal);outline-offset:2px} /* the family stripe: colour is the only thing separating hair removal from skin from other, exactly as on the live booking modal, and it is a 3px edge rather than a tint so the rows stay ivory. ⚠ THE CLASS SAYS hair, NOT laser (2026-08-27): the family now holds électrolyse, which is a filament, beside the laser menus and the packages. */ .bk-fam-hair{border-left:3px solid var(--royal)} .bk-fam-skin{border-left:3px solid #2F8F8B} .bk-fam-other{border-left:3px solid var(--line-strong)} .bk-consult{border-left:3px solid var(--brass);background:color-mix(in srgb,var(--brass) 7%,var(--paper))} .bk-opt-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0} .bk-opt-t b{font-weight:500;font-size:15px;color:var(--ink);line-height:1.3} .bk-opt-t small{font-size:13px;line-height:1.45;color:var(--ink-2)} .bk-svc-p{font-size:13px;color:var(--ink-2);margin-top:3px;font-variant-numeric:tabular-nums} .bk-svc-p b{font-weight:500;color:var(--ink)} .bk-svc-p s{color:var(--muted)} /* the is the package's « Économisez » figure. ⚠ .bk-svc-cure was DELETED here on 2026-08-27 with the « 6 séances … » upsell line it painted — see the note in bkSvc(). */ .bk-svc-p em{font-style:normal;color:var(--brass-text)} .bk-dur{font-size:12.5px;color:var(--muted);white-space:nowrap} .bk-chev{color:var(--muted);font-size:19px;line-height:1} /* ---- the way back, bottom left, on every step after the first (owner 2026-08-27) ---- ⚠ IT IS ALWAYS THE LAST THING IN .bk-body AND ALWAYS LEFT. That is the whole point: the same word, in the same corner, on all five screens, so it is found by position and not re-read. The paragraph is what guarantees the "last thing" part — before this the link was a bare