/* Header : tenir dans la fenêtre entre 1291 px et ~1780 px.

   Défaut mesuré dans Chromium sur la page d'accueil. La barre `.nav-container`
   est plafonnée à `max-width: 1400px` avec `padding: 0 32px` — 1336 px utiles —
   et sépare ses sept enfants par `gap: 32px`, soit 192 px. Or ses enfants
   réclament 1344 px :

       logo 220 (+16)   nav-links 367 (+48 de marge)   flex-spacer 0
       user-type 353 (+19)   lang-selector 50 (+19)   auth-buttons 236

   Total exigé : 1344 + 192 = **1536 px** pour 1336 px disponibles. Comme les
   enfants gardent `min-width: auto`, ils refusent de se comprimer : la ligne
   déborde de 200 px vers la droite. Au-dessus de ~1780 px de fenêtre ce
   débordement reste à l'écran et ne se voit pas ; en dessous, il sort — et
   « Inscription », dernier élément de la barre, disparaît le premier :

       fenêtre 1910 px → rien ne dépasse
       fenêtre 1590 px → Inscription dépasse de  25 px
       fenêtre 1430 px → Inscription dépasse de 105 px
       fenêtre 1356 px → Inscription dépasse de 171 px, Connexion de 46 px

   D'où le réflexe de dézoomer à 80 % : la fenêtre CSS s'élargit d'autant
   (1366 / 0,8 = 1707 px) et le bouton rentre. En dessous de 1291 px le menu
   bascule sur le burger et le problème disparaît de lui-même — ce qui laissait
   une bande d'environ 500 px, celle des portables courants, où le header était
   inutilisable.

   La place est reprise sur les écarts, les marges et la taille du logo, sur
   cette seule plage. Au-delà de 1780 px et en dessous de 1291 px, aucune règle
   ne s'applique : le rendu d'origine y est strictement inchangé.

   **Ce qu'il ne faut pas faire** : poser `min-width: 0` sur `.nav-links`. Ce
   bloc est en `flex: 1 1 0%` et centre ses trois entrées ; libéré de son
   plancher, il se réduit au partage de l'espace libre (191 px pour 335 px de
   contenu) et ses entrées débordent alors **des deux côtés** — « Recherche »
   passait sous le logo, avec 24 à 54 px de chevauchement selon la largeur. */

/* La barre ne peut jamais être plus large que la fenêtre. */
.nav-container {
  max-width: min(1400px, 100%);
  box-sizing: border-box;
}

@media screen and (min-width: 1291px) and (max-width: 1780px) {
  /* Marges latérales et écarts : 32 → 12 px.
     Gain : 40 px de padding + 6 × 20 px d'écarts = 160 px. */
  .nav-container {
    padding: 0 0.75rem;
    gap: 0.75rem;
  }

  /* La marge de 48 px devant le menu suffit à 12 px. Gain : 36 px. */
  .nav-links {
    margin-left: 0.75rem;
    gap: 1rem;          /* 40 → 16 px entre les entrées. Gain : 48 px. */
  }

  /* Les deux blocs de droite se resserrent. Gain : ~22 px. */
  .user-type-container,
  .lang-selector {
    margin-right: 0.5rem;
  }

  /* Le logo passe de 220 à 170 px. Gain : 50 px. `!important` est nécessaire :
     la largeur est posée en style en ligne dans le balisage, comme dans
     l'original (`width: 220px; height: auto`). */
  .logo-container img {
    width: 170px !important;
  }

  /* Les boutons d'authentification et le logo gardent leur taille : ce sont la
     cible de clic principale et l'identité de la marque. Tout le reste peut se
     comprimer, mais aucun bloc ne descend sous la largeur de son contenu — sans
     quoi il déborderait sur ses voisins. */
  .auth-buttons,
  .logo-container {
    flex-shrink: 0;
  }
}