/* ============================================================
   Selecteur de langue — drapeau et liste deroulante
   16/09
   ------------------------------------------------------------
   Remplace le « FR · EN » de la barre. Chargee apres style.css,
   qui porte .lang-btn et .lang-toggle, et avant mobile.css.

   CONTRAT A NE PAS CASSER : js/i18n.js s'accroche a .lang-btn et
   a son attribut data-lang. Il bascule .is-active et aria-pressed
   dessus, aux lignes 1063 et 1086. Ces deux crochets sont donc
   CONSERVES a l'identique dans le nouveau balisage, et i18n.js
   n'a pas ete touche. Le selecteur se contente de les envelopper.

   Pas d'emoji drapeau : les deux drapeaux sont dessines en SVG
   dans le HTML. Un emoji ne se colore pas de la meme facon d'un
   systeme a l'autre, ne s'aligne pas sur la ligne de base du
   texte, et ne peut pas etre desature au repos.

   Les regles de style.css sur .lang-btn restent en place : elles
   sont neutralisees ici pour le contexte de la liste, ou le
   bouton n'est plus un mot de deux lettres mais une ligne.

   Pour tout annuler : retirer le <link> et le <script> des six
   pages, supprimer ce fichier et js/selecteur-langue.js, puis
   reprendre le balisage dans archive/avant-selecteur-20260916/
   ============================================================ */

.lang-select{
  position: relative;
  /* Au-dessus du reste de la barre, sinon la liste passe dessous. */
  z-index: 30;
}

/* --- Le declencheur ---------------------------------------------------
   Il porte le drapeau courant et son code. Volontairement discret : ce
   n'est pas une commande principale, elle ne doit pas concurrencer
   « Prendre contact » juste a cote. */
.lang-actuelle{
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.35s var(--ease, ease),
    background 0.35s var(--ease, ease);
}

@media (hover: hover){
  .lang-actuelle:hover{
    border-color: rgba(240, 234, 223, 0.18);
    background: rgba(240, 234, 223, 0.05);
  }
}

.lang-actuelle:focus-visible{
  outline: 2px solid var(--brass-400);
  outline-offset: 2px;
}

/* Le chevron tourne quand la liste s'ouvre : c'est le seul indice que
   l'element est depliable, il doit donc rester lisible. */
.lang-chevron{
  display: block;
  inline-size: 0.5rem;
  block-size: auto;
  opacity: 0.55;
  transition: transform 0.3s var(--ease, ease), opacity 0.3s var(--ease, ease);
}

.lang-select.est-ouvert .lang-chevron{
  transform: rotate(180deg);
  opacity: 1;
}


/* --- Les drapeaux -----------------------------------------------------
   Petits, coins arrondis, legerement desatures au repos. Deux aplats
   tricolores en pleine saturation seraient l'element le plus bruyant
   d'une barre qui ne contient par ailleurs que de l'os et du laiton. */
.drapeau{
  display: block;
  inline-size: 1.05rem;
  block-size: auto;
  border-radius: 0.12rem;
  /* Le trait exterieur empeche le blanc du drapeau francais de se fondre
     dans le fond de la liste. */
  box-shadow: 0 0 0 1px rgba(8, 9, 10, 0.25);
  filter: saturate(0.82);
  transition: filter 0.35s var(--ease, ease);
}

.lang-btn.is-active .drapeau,
.lang-actuelle .drapeau{
  filter: none;
}


/* --- La liste ---------------------------------------------------------
   Posee sous le declencheur, alignee a droite pour ne jamais sortir de
   l'ecran : le selecteur est deja tres a droite dans la barre. */
.lang-liste{
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-end: 0;
  min-inline-size: 9.5rem;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid rgba(240, 234, 223, 0.12);
  border-radius: 0.7rem;
  background: rgba(16, 16, 18, 0.97);
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.45);
  /* visibility plutot que display: none : la transition existe, et le
     contenu sort quand meme du parcours de tabulation une fois ferme. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition:
    opacity 0.28s var(--ease, ease),
    transform 0.28s var(--ease, ease),
    visibility 0.28s;
}

.lang-select.est-ouvert .lang-liste{
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lang-liste li{ margin: 0; }

/* .lang-btn garde son nom de classe : c'est lui que i18n.js ecoute. Tout
   ce qui suit ne fait que le redessiner dans son nouveau contexte, ou il
   n'est plus un mot de deux lettres mais une ligne de menu. */
.lang-liste .lang-btn{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  inline-size: 100%;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-radius: 0.45rem;
  background: none;
  color: var(--bone, #f0eadf);
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-align: start;
  text-transform: none;
  opacity: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease, ease), color 0.25s var(--ease, ease);
}

@media (hover: hover){
  .lang-liste .lang-btn:hover{ background: rgba(240, 234, 223, 0.07); }
}

.lang-liste .lang-btn:focus-visible{
  outline: 2px solid var(--brass-400);
  outline-offset: -2px;
}

/* La langue active se signale par un point laiton a droite, et non par le
   soulignement de style.css, qui n'a plus de sens sur une ligne entiere. */
.lang-liste .lang-btn.is-active{
  color: var(--brass-400);
  font-weight: 400;
  text-decoration: none;
}

.lang-liste .lang-btn.is-active::after{
  content: "";
  inline-size: 4px;
  block-size: 4px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--brass-400);
}


/* --- Telephone --------------------------------------------------------
   La barre se resserre : on retire le code de langue du declencheur et on
   ne garde que le drapeau et le chevron. La liste, elle, garde ses noms
   de langue en toutes lettres — c'est la qu'on choisit. */
@media (max-width: 560px){
  .lang-actuelle .lang-code{ display: none; }

  /* Cible tactile a 44px, comme le reste de la barre depuis la reprise
     mobile. La marge negative empeche la barre de grandir. */
  .lang-actuelle{
    gap: 0.3rem;
    padding-inline: 0.3rem;
    min-block-size: 44px;
    margin-block: -13px;
  }
}

@media (prefers-reduced-motion: reduce){
  .lang-chevron,
  .lang-liste,
  .drapeau{ transition: none; }
}