/* webrun.ai in French: layout adjustments. includes/header.php links this file on /fr/ pages
   only (lang.php on the /fr/ 404 too), after the page stylesheets. English never loads it. */

/* Header nav between 901 and 1199 px, where the bar shows every link. The French labels run
   longer than the English ones. No label or button wraps (nowrap). Below 1100 px the links sit
   closer together and the two buttons get slimmer side padding; from 1100 px the bar keeps the
   English spacing. Free space each side of the links, measured 31 Oct (English in brackets):
   developer-style nav at 901 px 61 (25), business nav at 1025 px 90 (69), at 1100 px 94 (106).
   With the glossary's long forms swapped in ("Pour les développeurs", "Pour les entreprises", "Se
   connecter"), still 23 px or more everywhere, so a reviewer can restore them without touching
   this file. */
@media (min-width: 901px) and (max-width: 1199px) {
  :lang(fr) .nav-links > li > a,
  :lang(fr) .nav-cta .btn { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1099px) {
  :lang(fr) .nav-links { gap: 1.5rem; }
  :lang(fr) .nav-cta .btn { padding-left: 0.95rem; padding-right: 0.95rem; }
}
@media (min-width: 901px) and (max-width: 979px) {
  :lang(fr) .nav-links { gap: 1.1rem; }
  :lang(fr) .nav-cta .btn { padding-left: 0.8rem; padding-right: 0.8rem; }
}

/* Environments, dashboard with notes: the middle column and the two panel columns may shrink
   below their content, as the memory lines are one-line text that ends in an ellipsis. Without
   this the French memory lines widen the dashboard and push the right-hand notes off the screen
   (53 px clipped at 1440, 130 to 260 px at 1280 and 1100). English has the same fault, smaller
   (61 px clipped at 1280, 175 px at 1100): reported in build/notes/polish-ja-es-fr.md. Phones
   keep their one-column panels (environments.php, 768 px and below). */
@media (min-width: 769px) {
  html:lang(fr) .env-dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1025px) {
  html:lang(fr) .env-dash-wrapper { grid-template-columns: 170px minmax(0, 1fr) 170px; }
}
/* Between 1025 and 1199 px the panels are narrowest (266 to 330 px): slimmer Chrome stat boxes,
   and a panel header may put its badge on a second line instead of running past the panel
   ("Instructions personnalisées définies"). */
@media (min-width: 1025px) and (max-width: 1199px) {
  html:lang(fr) .env-chrome-stat-box { padding-left: 6px; padding-right: 6px; }
  html:lang(fr) .env-dash-panel-header { flex-wrap: wrap; row-gap: 6px; }
}

/* Blog tables on phones: the French column heads and cells hold longer words than the English
   ones, and the table ran past the screen (to 450 px at 390). Smaller type and tighter cells; the
   row labels in the first column stay whole, long words in the other columns are hyphenated
   (with "-", which Inter has; words of 8 letters or more, 3 or more on each side), and a word
   that still does not fit breaks where it must. (The English table is 425 px wide at 390 too.) */
@media (max-width: 600px) {
  html:lang(fr) .article-body table { font-size: 0.875rem; }
  html:lang(fr) .article-body :is(th, td) {
    padding: 0.7rem 0.55rem;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-character: "-";
    hyphenate-character: "-";
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    hyphenate-limit-chars: 8 3 3;
  }
  html:lang(fr) .article-body :is(th, td):first-child { overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; }
  html:lang(fr) .article-body th { font-size: 0.75rem; letter-spacing: 0; }
}

/* Template library (English-only pages, read with the French cookie): the category menu's
   first link, the industry name, wraps onto a second line instead of ending in "…" when the
   name is long ("Logiciels, données et outils de développement"). */
.agl-browse:lang(fr) .agl-mega-sub-all { white-space: normal; }