/* Copyright (c) 2025-2026 Systèmes Calibre Inc. All rights reserved.
Proprietary and confidential. See LICENSE at the repository root. */
/* fr.css: French-only fixes for site/fr/ pages, where French text is longer than the English and overflows a
component. Linked after ../style.css (and the page CSS) from the French pages that need it. Each block is
scoped to its own page, so one page's fix never moves another. Never edit style.css for French. */
/* BEGIN confidentialite.html. « Confidentialité. » is one word that cannot wrap: at the 640 px phone size (3rem)
it runs 43 px past the edge at 390 and the page scrolls sideways. Shrink it with the viewport below 640 px
(39.8 px at 390, 32.6 px at 320), per site-copy-v3-fr-ca.md 5b. Scoped by the page's own aria-current
footer link. Eleventy port, 2026-09-24: the mockup matched href^="confidentialite.html"; the built site's link is
/fr/confidentialite/, so the selector was rewritten. Left as it was, it silently stopped matching and the
title ran 58 px off a 390 px phone. If this link's URL ever changes, change it here too. */
@media (max-width: 640px) {
:where(html:lang(fr)) body:has(a[aria-current="page"][href="/fr/confidentialite/"]) .page-title {
font-size: min(3rem, 10.2vw);
}
}
/* END confidentialite.html */
/* BEGIN coaching.html. Scoped by .coach-hero / .coach-qa, which only the coaching pages carry.
1 « C’est vous
qui menez. » is two lines where "You drive." is one. The "q" of "qui" hangs below the line box
(line-height 0.96) and crowded the lede, 16 px at 1440: pad the title by a descender's depth, which scales with
the size. On phones the English 3.9rem keeps both lines inside 390 but not 320: shrink with the viewport
(montage note, site-copy-v3-fr-ca.md section 2).
2 « Oui, avec prudence. » wraps to two lines where "Yes, with care." is one (column ~660 px at 1440): at the English
line-height 0.9 the comma of "Oui," touched the "d" of "prudence" and the "p" crowded the paragraph. Line-height 1
on both answers keeps "Non." and « Oui, avec prudence. » spaced alike. */
.coach-hero .page-title { padding-bottom: 0.14em; }
.coach-qa .qa-a .coach-qa-no { line-height: 1; }
@media (max-width: 640px) {
.coach-hero .page-title { font-size: min(3.9rem, 15vw); }
}
/* END coaching.html */
/* BEGIN index.html. « Votre IA,
bien configurée. » is wider than "Your AI, set up properly.": at the English
size « configurée. » runs past the hero column. The French home keeps the words and gets its own title size,
per the montage note in site-copy-v3-fr-ca.md section 1: three lines from 320 to 1440 px, about 20 % smaller
than the English on a desktop. Scoped by .hero, which only the home pages carry. */
:where(html:lang(fr)) .hero h1 { max-width: 8.6ch; font-size: clamp(2.9rem, 6vw, 5.5rem); }
@media (min-width: 641px) and (max-width: 900px) {
:where(html:lang(fr)) .hero h1 { font-size: clamp(3.4rem, 9vw, 5.25rem); }
}
@media (max-width: 640px) {
:where(html:lang(fr)) .hero h1 { font-size: min(3.6rem, 14vw); }
}
/* The two hero buttons, « Réservez une heure » and « Comment ça commence », are 562 px at the shared 38 px padding
(English: 424), so above 900 px they stacked in the 557 px hero column at 1440, where the English sits side by
side, and the hero ran past the fold. 24 px padding (the primary then matches the English one's width) puts them
side by side from about 1280 px up; below that they stack, as the English does at 1024. */
@media (min-width: 901px) {
:where(html:lang(fr)) .hero .actions .btn-lg { padding-inline: 24px; }
}
/* On a phone the buttons are full width, so their padding shows nowhere, but it sets the column's floor: at 38 px
« Comment ça commence » needs 301 px and held the hero 13 px wider than a 320 px screen. */
@media (max-width: 640px) {
:where(html:lang(fr)) .hero .actions .btn-lg { padding-inline: 20px; }
}
/* END index.html */
/* BEGIN a-propos.html. « Pourquoi je fais ça » is 19 characters where "Why I do this" is 13: at the English 7ch
the rail heading stacks on three lines with « ça » alone on the last. 10ch gives « Pourquoi / je fais ça »,
per the montage note in site-copy-v3-fr-ca.md section 3. Desktop only: below 961 px about.css already lets the
heading run the width of the rail. Scoped by .essay-title, which only the About pages carry. */
@media (min-width: 961px) {
:where(html:lang(fr)) .essay-title { max-width: 10ch; }
}
/* On a phone the heading sits beside the 120 px portrait, and « Pourquoi » is one word that cannot wrap (208 px at
2.5rem): below ~384 px the portrait was pushed past the gutter (8 px of sideways scroll at 360, 48 at 320). The
heading shrinks with the viewport and takes a zero flex-basis, so it narrows to « Pourquoi » before the portrait
gives way: both stay inside the column down to 320, and the portrait keeps its 120 px wherever it fits. */
@media (max-width: 400px) {
:where(html:lang(fr)) .essay-title { font-size: min(2.5rem, 10.4vw); flex: 1 1 0; }
:where(html:lang(fr)) .essay-photo { flex: 0 1 120px; min-width: 0; }
}
/* END a-propos.html */
/* BEGIN contact.html. Scoped by .contact / .contact-terms / .contact-title, which only the contact pages carry.
1 "une heure." is 545 px at the shared 1440 px title size (92 px) in a 528 px column, so from about 1400 px up the
h1 stacked « Réservez / une / heure. » with « une » alone; the English is two lines. Above 1100 px, cap the
French contact h1 at 5.4rem (and, from 1101 to about 1290 px, at a width-based size, the calc, which keeps
« une heure. » inside the column with a scrollbar showing), so it reads « Réservez / une heure. » as it already
does from 641 to 1100 px. Tablet and phone sizes stay as English.
2 « 350 $ » is 391 px wide in the 384 px price heading at 1440 (the English "$350" fills it exactly): 25rem, per
the montage note in site-copy-v3-fr-ca.md section 5.
3 Phone language pills: the English splits the row into three equal thirds so "Either" never wraps, but
« Peu importe » needs 136 px and got 114 at 390, so it broke onto two lines. Size the three columns to their
words, with tighter padding, and one step smaller type below 390 px; at 320 px « Peu importe » may still wrap
inside its pill (tighter leading keeps the two lines off the border), it never overflows. */
@media (min-width: 1101px) {
:where(html:lang(fr)) .contact-title { font-size: min(var(--fs-title), 5.4rem, calc((100vw - 300px) / 12)); }
}
:where(html:lang(fr)) .contact-terms .price-block-fig { max-width: 25rem; }
@media (max-width: 640px) {
:where(html:lang(fr)) .contact .choices { grid-template-columns: repeat(3, auto); gap: 6px; }
:where(html:lang(fr)) .contact .choices label { gap: 6px; padding: 0 6px; }
}
@media (max-width: 389px) {
:where(html:lang(fr)) .contact .choices label { padding: 0 4px; font-size: 0.9375rem; line-height: 1.15; }
}
/* END contact.html */
/* BEGIN travaux.html. Card 6's caption, « Un dessin d’entraînement généré par ordinateur, avec les étiquettes qui ont
servi à entraîner le programme. », is 104 characters where the English is 64. It sits over the bottom of the
drawing, and in French it grows by a line or two: on a phone (three lines) and a tablet (four) it covered the
green door that the caption and the alt text point at. One column (up to 720 px): the caption moves under the
drawing, so the whole drawing shows. Two across (721 px and up): moving it would drop card 6's title below
card 7's, so the caption gets a size down instead. That holds on a desktop too (QA 2026-09-24): from 1280 px up
the English caption is one line and 66 % of the door shows, the French was two lines at the shared size and
showed 44 %; a size down makes it 59 %. (From 721 to about 900 px the door is covered in BOTH languages: an
English-side matter, style.css.) Scoped by .work-list, which only the Work pages carry. */
@media (max-width: 720px) {
:where(html:lang(fr)) .work-list .card-media.is-drawing { aspect-ratio: auto; }
:where(html:lang(fr)) .work-list .card-media.is-drawing img { height: auto; aspect-ratio: 1200 / 750; }
:where(html:lang(fr)) .work-list .card-media.is-drawing .card-media-cap { position: static; }
}
@media (min-width: 721px) {
:where(html:lang(fr)) .work-list .card-media.is-drawing .card-media-cap { padding: 6px 12px; font-size: 0.8125rem; line-height: 1.35; }
}
/* END travaux.html */