/* Site multilingue (lot 2) : sélecteur de langue et bandeau « This page is available in
 * English ». Une feuille à part, chargée par les 7 pages du périmètre, parce qu'elle doit
 * vivre sur deux systèmes de couleurs : les jetons du site (--site-*) et le thème nuit de
 * /course (--surface, --ink, --line). Chaque variable retombe sur l'autre, puis sur une
 * valeur sûre. Rien ici ne touche site.css ni le thème de /course. */
:root {
  --lang-bg: var(--site-surface, var(--surface, #f5f3ee));
  --lang-bg-2: var(--site-surface-2, var(--surface-2, #ede9e0));
  --lang-ink: var(--site-ink, var(--ink, #16140f));
  --lang-ink-2: var(--site-ink-2, var(--ink-2, #5c574d));
  --lang-line: var(--site-line, var(--line, #e8e4db));
  --lang-accent: var(--blue, var(--accent, #2a5bd7));
}

/* Sélecteur : une pastille « EN » / « FR », capitales espacées comme les kickers du site.
 * Cible tactile 44 px garantie par la hauteur, largeur compacte pour tenir à 320 px. */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--lang-line); border-radius: 999px;
  font: 700 12px/1 var(--font-display, inherit); letter-spacing: .12em; text-transform: uppercase;
  color: var(--lang-ink-2); background: transparent; text-decoration: none;
  transition: color .16s, border-color .16s, background-color .16s;
}
.lang-switch:hover { color: var(--lang-ink); background: var(--lang-bg-2); }
.lang-switch:focus-visible { outline: 2px solid var(--lang-accent); outline-offset: 3px; }
/* Dans la barre du site, aligné sur « Mon compte » (40 px mobile, 44 px desktop). Sous 360 px
 * la barre est déjà pleine (logotype + « Mon compte » + burger) : la pastille passerait la
 * page en débordement horizontal. Elle s'efface et le tiroir mobile prend le relais. */
.site-nav__actions .lang-switch { min-height: 40px; }
@media (max-width: 359px) { .site-nav__actions .lang-switch { display: none; } }
@media (min-width: 900px) { .site-nav__actions .lang-switch { min-height: 44px; } }
.drawer__lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-1, 4px); color: var(--lang-ink-2); text-decoration: none; font-weight: 600; }
.drawer__lang:hover { color: var(--lang-ink); }
.drawer__lang:focus-visible { outline: 2px solid var(--lang-accent); outline-offset: 3px; }
/* Rappel en pied de page : un lien texte, discret, mais toujours 44 px de haut. */
.site-footer__lang { margin-top: var(--s-4, 16px); font-size: var(--fs-sm, 14px); color: var(--lang-ink-2); }
.site-footer__lang a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--lang-line); line-height: 1.2; }
.site-footer__lang a:hover { color: var(--lang-ink); border-bottom-color: var(--lang-accent); }
.site-footer__lang a:focus-visible { outline: 2px solid var(--lang-accent); outline-offset: 3px; }
/* Sur /course, la pastille s'aligne sur le bouton de thème (38 px, encre secondaire). */
.top-actions .lang-switch { min-height: 38px; min-width: 38px; }

/* Bandeau : une ligne posée au-dessus de la page, jamais par-dessus le contenu. Il pousse la
 * page, il ne la couvre pas ; il se ferme d'un geste, et ne revient pas (lang.js). */
.lang-banner {
  display: flex; align-items: center; gap: var(--s-3, 12px); flex-wrap: wrap;
  padding: 8px max(var(--s-4, 16px), env(safe-area-inset-right, 0px)) 8px max(var(--s-4, 16px), env(safe-area-inset-left, 0px));
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: var(--lang-bg); color: var(--lang-ink); border-bottom: 1px solid var(--lang-line);
  font-size: var(--fs-sm, 14px); line-height: 1.35;
  position: relative; z-index: 1; /* au-dessus du grain fixe de /course (body::before, z-index 0) */
  animation: lang-banner-in .32s var(--ease, ease-out) both;
}
/* /course centre .app dans un body en flex : sans retour à la ligne, le bandeau se poserait à
 * côté de l'écran et le pousserait hors du viewport. Le bandeau prend toute la ligne. */
body:has(> .lang-banner) { flex-wrap: wrap; align-content: flex-start; }
.lang-banner { flex: 0 0 100%; width: 100%; box-sizing: border-box; }
.lang-banner__text { flex: 1 1 200px; min-width: 0; margin: 0; }
.lang-banner__go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 700; color: #fff; background: var(--lang-accent); text-decoration: none; white-space: nowrap; }
.lang-banner__go:hover { filter: brightness(1.08); }
.lang-banner__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 999px; background: transparent; color: var(--lang-ink-2); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.lang-banner__close:hover { color: var(--lang-ink); background: var(--lang-bg-2); }
.lang-banner__go:focus-visible, .lang-banner__close:focus-visible { outline: 2px solid var(--lang-accent); outline-offset: 3px; }
@keyframes lang-banner-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lang-banner { animation: none; } .lang-switch { transition: none; } }