/* nav.css — barre de navigation supérieure, feuille PARTAGÉE.
 *
 * ⚠️ POURQUOI CETTE FEUILLE EXISTE. Les mêmes règles vivaient en DEUX
 * exemplaires : `.lang-bar` + `.logo` + `.nav-right` dans `landing.css`, et
 * un bloc `nav` + `.logo` + `.nav-right` rigoureusement équivalent dans
 * `legal.css`. Deux foyers pour une règle, donc deux endroits à corriger — et
 * de fait, le défaut de débordement corrigé ici sévissait sur les DEUX, la
 * correction de l'un aurait laissé l'autre. Même raisonnement que `lang.css`,
 * qui documente déjà ce choix dans ce dépôt.
 * Les pages légales portent désormais `class="lang-bar"` sur leur `<nav>` :
 * un seul sélecteur sert les trois pages.
 *
 * Ce qui reste propre à chaque page vit dans SA feuille : `.nav-cta`
 * (landing) et `.back` (pages légales) — ce sont des éléments différents,
 * pas une règle dupliquée.
 *
 * 🔴 LE DÉFAUT QUE CE FICHIER CORRIGE, ET POURQUOI RIEN NE L'AVAIT VU.
 * Le contenu de la barre exigeait plus que la largeur d'un téléphone. Mesuré
 * sur la prod le 2026-08-18, à 375 px et en français :
 *   · « Essayer gratuitement » — 141 px de large, 6 px VISIBLES. 96 % hors
 *     écran. Le CTA principal de la page réduit à un liseré doré.
 *   · pages légales — « ← Retour » coupé de 15 px, « Mentions légales »
 *     replié sur deux lignes.
 * `scrollWidth` restait pourtant égal à `clientWidth` : un élément en
 * `position:fixed` ne contribue PAS au débordement défilable du document.
 * Toute garde fondée sur `scrollWidth` était verte. C'est le même angle mort
 * que la barre de titre de l'app, par l'autre chemin (là-bas, un ancêtre en
 * `overflow:hidden`). *Comparer le bord droit des éléments à `clientWidth` —
 * jamais lire une largeur.*
 */

.lang-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  height: 56px;
  background: rgba(8,12,20,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
  text-decoration: none;
}
.logo span { color: var(--gold); }

.nav-right { display: flex; align-items: center; gap: 16px; }

@media (max-width: 768px) {
  .lang-bar { padding: 0 20px; }
}

/* Sous 640 px, le contenu ne tient plus sur une ligne en français — et le
 * français est le cas dimensionnant, ses libellés étant les plus longs.
 * On passe en `sticky` PLUTÔT QU'EN `fixed`, et c'est le cœur du correctif :
 *   1. la barre revient dans le flux, donc sa hauteur pousse le contenu au
 *      lieu de le recouvrir — elle peut grandir sans rien masquer ;
 *   2. son débordement redevient VISIBLE de `scrollWidth`, donc une garde
 *      de géométrie peut enfin le voir ;
 *   3. elle reste collée en haut au défilement, on ne perd pas le CTA.
 * Le retour à la ligne remplace le rognage : rien n'est caché, tout reste
 * cliquable. */
@media (max-width: 640px) {
  .lang-bar {
    position: sticky;
    height: auto;
    min-height: 56px;
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .logo { font-size: 16px; }
  .nav-right { flex-wrap: wrap; gap: 8px; }
}