/* Walilock — French typography.
   Loaded ONLY by /fr/ pages, after walilock.css and each page's own <style>.
   The English site never requests this file.

   FONTS: none. French is Latin script; Inter already draws every glyph it
   needs, including the accented capitals (É, À, Ç) and the œ ligature. No web
   font is added, so scripts/verify-site-fonts-self-hosted.sh stays green and
   nothing new is downloaded.

   WHY THERE ARE NO LAYOUT FIXES HERE. ja.css carries a long list of them, one
   per measured overflow. French was expected to need the same, because it runs
   about 1.5x the length of English. MEASURED 2026-09-20, against the real
   translated pages: it does not.

   At 375px, document.scrollWidth on /fr/ is IDENTICAL to the English page on
   all eleven pages checked (index, pricing, security, enterprise, download,
   signup, login, contact, docs, support, terms). The only overflow found was on
   /login, and it was 425px on the ENGLISH page too — a pre-existing bug, not a
   French one.

   2026-10-06: /fr/login measured 425px at every phone width. The cause was a
   nowrap button, « 📱 Se connecter avec votre téléphone »; the sign-in pages'
   nav button also ran past the edge. Both are fixed for every language in
   walilock.css (.btn under 480px, .nav-min), not here: English /login
   overflowed at 320px as well. A French sweep at 320px found five more pages
   widened by long button labels, now covered by the same rule.

   Japanese needed rules because its glyphs are wider and unbreakable; French
   is Latin text in a layout already built for Latin text. Rules are added here
   when something is measured to overflow, never before.

   2026-10-06: the desktop nav is the exception. The 2026-09-20 note said it
   fit at 769-1280px; it did not. It needs 1308px in French against 1111 in
   English, and it ran off the right edge at every width below that. The rules
   at the end of this file give French its own nav widths.

   PUNCTUATION IS NOT CSS. The narrow no-break space before : ; ! ? and inside
   « » is part of the string, not a stylesheet rule: the translator writes
   U+202F and the build splices it in unchanged. See i18n/STYLE.fr.md. */

html:lang(fr) {
  /* Hyphenation is the one thing French needs that English does not. French
     has more long words (« renseignements », « authentification ») and they
     land in narrow columns — pricing cards, the footer, feature cards on a
     phone. Browsers hyphenate only when the language is declared, which
     <html lang="fr"> now does. */
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Headings and short labels must never be hyphenated: a broken word in a hero
   title or a button reads as a typo, and these boxes are sized for them. */
html:lang(fr) :is(h1, h2, h3, h4, .section-label, .hero-badge, .tier-name,
                  .feat-head, .card-title, .nav-link, .btn, .badge) {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* The desktop nav, measured 2026-10-06. Its natural width is 1308px in French
   against 1111 in English, so the widths in walilock.css ("Nav width") are
   too narrow for it:
   - the hamburger takes over below 1200px instead of 1024px. The four lines
     are the same switch walilock.css uses;
   - the tighter spacing holds up to 1339px instead of 1199px. At that spacing
     the bar needs 1176px; from 1340px the normal spacing's 1308 fits.
   /fr/enterprise is narrower (1112 tight, 1244 normal) since its buttons
   became « Connexion admin » and « Nous contacter »; it used to need 1469px,
   which is why this range once ran to 1499px. */
@media (max-width: 1199.98px) {
  html:lang(fr) .nav-links { display: none; }
  html:lang(fr) .nav-hamburger { display: flex; }
  html:lang(fr) .nav-links ~ .nav-actions { display: none; }
  html:lang(fr) .nav-mobile { display: flex; }
}
@media (min-width: 768.02px) and (max-width: 1339.98px) {
  html:lang(fr) .nav { --nav-pad: 24px; --nav-gap: 20px; --nav-link-pad: 8px; --nav-actions-gap: 8px; }
}

/* Pricing cards, measured 2026-10-06. With five in a row, French needs about
   182px for « Sur mesure » at price size and wraps its trial buttons onto
   three lines below 1280px (« Démarrer l'essai gratuit de 30 jours » is 283px
   on one line). Between 1200 and 1279px French keeps the two-column layout
   the other languages leave at 1200 (pricing.html, and the home page's
   pricing preview, which shows the same five plans). */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  html:lang(fr) :is(.pricing-grid, .pricing-preview) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}