/* Shared site chrome: top header, language switcher, language blocks.
   Pages set --measure to match their own content column. */

:root { --measure:720px; }

.site-header { border-bottom:1px solid var(--line); }
.site-header__inner { align-items:center; display:flex; gap:1rem; margin:0 auto;
                      max-width:var(--measure); padding:.85rem 24px; }
.site-header__home { border:0; color:var(--ink-2); font-size:.9rem; text-decoration:none; }
.site-header__home:hover { color:var(--green-2); }

.lang { display:flex; gap:.35rem; margin-left:auto; }
.lang button { background:transparent; border:1px solid var(--line); border-radius:999px;
               color:var(--ink-2); cursor:pointer; font:inherit; font-size:.78rem; letter-spacing:.04em;
               line-height:1; padding:.42rem .72rem; transition:border-color .15s ease, color .15s ease; }
.lang button:hover { border-color:var(--green); color:var(--green-2); }
.lang button[aria-pressed="true"] { background:var(--wash,#F6F9F4); border-color:var(--green); color:var(--green-2); }

/* One block per language. The inline <head> snippet sets html[lang] before paint,
   so the right one is displayed without a flash. */
[data-lang] { display:none; }
html[lang="fr"] [data-lang="fr"], html[lang="en"] [data-lang="en"] { display:block; }