/* ==========================================================================
   choix_langue.css — l'apparence du sélecteur de langue, en UN SEUL endroit.

   `choix_langue.js` fabrique les boutons depuis la liste du serveur ; ce
   fichier dit à quoi ils ressemblent. Les deux pages d'entrée le
   chargent, donc elles ne peuvent plus diverger.

   POURQUOI CE FICHIER EXISTE
   --------------------------
   Le 08/10, les deux pages portaient chacune leur copie des mêmes
   règles. Mesuré : sur la page d'essai, le bouton inactif gardait le
   fond gris par défaut du navigateur — `rgb(240, 240, 240)` — et les
   boutons faisaient 29 px au lieu de 26. La page d'essai avait reçu les
   tailles mais pas la remise à zéro du fond. Personne ne l'avait vu
   écrit ; Joël l'a vu à l'écran.

   Deux pages qui recopient les mêmes règles finissent toujours par
   diverger : ce n'est pas une faute d'attention, c'est la duplication.

   IL NE POSE AUCUNE COULEUR EN DUR. Tout passe par les jetons de la
   page (`--os`, `--os-dim`, `--os-faible`, `--rouge`), donc le même
   fichier habille une page sombre et une page claire.

   Il ne s'applique QUE dans une place explicite (`#choix-langue-place`) :
   une page qui laisse le script se coller au coin garde l'apparence
   neutre qu'il pose lui-même, et ce fichier ne la dérange pas.
   ========================================================================== */

#choix-langue-place { display: flex; align-items: center; }
#choix-langue-place #choix-langue { position: static !important; }

#choix-langue-place .choix-langue-bouton {
  /* La remise à zéro, celle qui manquait : sans elle, le navigateur
     pose son propre fond gris et son propre relief. */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.35;
  letter-spacing: .04em;
  padding: 4px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
  color: var(--os-faible, #8a837d);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

#choix-langue-place .choix-langue-bouton:hover {
  color: var(--os-dim, #b3aca6);
}

/* La langue active : un verre clair, et un FILET ROUGE.
   Le rouge n'est pas un fond de bouton sur cette plateforme, c'est un
   accent rare — la tête de la courbe, le filet du bouton d'essai. Le
   pied de page était le seul endroit où l'œil ne le retrouvait pas. */
#choix-langue-place .choix-langue-bouton[aria-pressed="true"] {
  color: var(--os, #f2eeea);
  /* Un jeton, pas une valeur : sur une page CLAIRE, un verre
     presque blanc serait invisible. La page qui change de
     fond redefinit `--verre-actif` et le selecteur suit. */
  background: var(--verre-actif, rgba(242, 238, 234, .07));
  border-color: rgba(139, 26, 26, .55);
}

#choix-langue-place .choix-langue-bouton:focus-visible {
  outline: 1px solid rgba(139, 26, 26, .85);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #choix-langue-place .choix-langue-bouton { transition: none; }
}