/* ==========================================================================
   lang.css — sélecteur de langue FR / EN
   --------------------------------------------------------------------------
   Fichier à part, chargé par TOUTES les pages (française comme anglaise).
   Raison : le site a deux gabarits d'en-tête différents — `.minimal-header`
   (articles, recettes, carnets, à propos) et `.entete` (accueil, voyages) —
   qui ne partagent pas la même feuille de style. Un fichier dédié évite de
   dupliquer la règle dans les deux et de la voir diverger.

   FORME : reprise de `aide/index.html` (bloc `.commandes-page`) — deux
   boutons rectangulaires séparés, capitales espacées, celui de la langue
   courante rempli. Les COULEURS diffèrent : l'aide pose ses boutons sur un
   héros sombre (texte blanc, bordure blanche translucide), alors que les
   en-têtes du site sont clairs. Reprendre le blanc tel quel les aurait
   rendus invisibles ; on garde donc la forme et on prend l'encre du site.

   Le sélecteur pointe toujours vers la MÊME page dans l'autre langue :
   les versions anglaises vivent dans /en/ et portent le même nom de fichier.
   ========================================================================== */

.lang-switch {
  display: flex;
  gap: .4rem;
  flex: none;
  align-items: center;
}

.lang-switch a {
  font-family: "Mulish", "Open Sans", Arial, sans-serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
  padding: .38rem .8rem;
  background: transparent;
  color: #6c7a7a;
  border: 1px solid rgba(116, 140, 140, .55);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}

.lang-switch a:hover {
  background: rgba(116, 140, 140, .16);
  border-color: #748c8c;
  color: #3f4f4f;
  opacity: 1;
}

/* Langue courante : bouton plein, comme `aria-pressed="true"` sur l'aide. */
.lang-switch a[aria-current="page"] {
  background: #748c8c;
  color: #fff;
  border-color: #748c8c;
  cursor: default;
}
.lang-switch a[aria-current="page"]:hover {
  background: #748c8c;
  color: #fff;
  opacity: 1;
}

.lang-switch a:focus-visible {
  outline: 2px solid #748c8c;
  outline-offset: 2px;
}

/* --- insertion dans les deux gabarits d'en-tête --- */
.header-nav .nav-right .lang-switch { margin-left: .55rem; }
.entete-nav .nav-social .lang-switch { margin-left: .55rem; }

/* Accueil et Voyages : l'en-tête `.entete` est TRANSPARENT et posé sur la
   photo du héros, en texte blanc. L'encre sombre utilisée ailleurs y devient
   illisible — on reprend donc exactement le traitement de `aide/index.html`,
   qui est dans la même situation : blanc translucide, actif en blanc plein. */
.entete-nav .lang-switch a {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
}
.entete-nav .lang-switch a:hover {
  background: rgba(255, 255, 255, .18);
  border-color: #fff;
  color: #fff;
}
.entete-nav .lang-switch a[aria-current="page"],
.entete-nav .lang-switch a[aria-current="page"]:hover {
  background: #fff;
  color: #434343;
  border-color: #fff;
}

/* Sur l'en-tête teinté des pages de voyage, on éclaircit à peine le fond
   pour que les boutons se détachent du vert d'eau. */
.minimal-header.voyage-teinte .lang-switch a { background: rgba(255, 255, 255, .38); }
.minimal-header.voyage-teinte .lang-switch a[aria-current="page"] { background: #748c8c; }

/* --- largeurs intermédiaires (tablette, petit portable) ---
   Entre 769 et 1100px l'en-tête est encore sur UNE seule ligne : cinq liens
   de navigation + le titre + quatre icônes sociales. Les deux boutons de
   langue ajoutent ~100px et faisaient déborder la ligne de 27px à 1024px
   (mesuré). On resserre donc l'écart des icônes sociales et le bouton
   lui-même sur cette plage, plutôt que de rétrécir la navigation. */
@media (min-width: 769px) and (max-width: 1100px) {
  /* On reprend telle quelle la recette compacte que le site applique déjà
     sous 768px (responsive.css) : retour à la ligne autorisé et écarts
     resserrés. Elle n'existait simplement pas sur cette plage, où l'en-tête
     restait figé en trois colonnes rigides — d'où le débordement dès que le
     sélecteur de langue s'y ajoute (96px de trop à 900px, mesuré). */
  .header-nav { gap: 14px; }
  .header-nav .nav-left,
  .header-nav .nav-right { flex-wrap: wrap; justify-content: center; gap: 8px 14px; min-width: 0; }
  .header-nav .nav-right.social-links { gap: 10px !important; }
  .header-nav a { font-size: .7rem; }
  .entete-nav .nav-social { gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
  .lang-switch a { padding: .34rem .6rem; letter-spacing: .14em; }
  .header-nav .nav-right .lang-switch,
  .entete-nav .nav-social .lang-switch { margin-left: .4rem; }
}

/* --- mobile ---
   Même bouton que sur ordinateur, simplement resserré. Les en-têtes passent
   en colonne sous 768px (responsive.css) : le sélecteur suit le flux et se
   centre avec le reste au lieu de rester collé à droite. */
@media (max-width: 768px) {
  .lang-switch { gap: .35rem; }
  .lang-switch a { font-size: .6rem; padding: .34rem .7rem; letter-spacing: .16em; }
  .header-nav .nav-right .lang-switch,
  .entete-nav .nav-social .lang-switch { margin-left: .45rem; }
}

@media (max-width: 420px) {
  .lang-switch a { font-size: .58rem; padding: .3rem .58rem; letter-spacing: .12em; }
}

/* ---- cible tactile sur telephone ----
   Mesure : 40 x 27 px, texte a 10,9 px. Sous les 44 px recommandes pour un
   pouce, et le bouton de langue est le seul controle vraiment interactif de
   l'en-tete. On l'agrandit uniquement sur petit ecran — sur ordinateur il est
   vise a la souris et sa taille actuelle convient. */
@media (max-width: 820px) {
  .lang-switch a {
    padding: .55rem .8rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}
/* Pas de font-size ici : mesure faite, le corps reste a 10,9 px, tenu par une
   regle d'en-tete plus specifique. C'est le meme corps que les autres liens de
   l'en-tete, et il s'agit de deux capitales — la lisibilite n'en souffre pas.
   Ce qui manquait etait la CIBLE, passee de 40x27 a 47x40 px. Une declaration
   que la cascade n'honore pas n'a rien a faire dans un fichier qui sert de
   modele : on ne la laisse pas trainer. */