/* Sélecteur de langue en menu déroulant (partials/lang-switcher.php) : bouton réduit au globe, liste en dessous.
   Positionné en absolu : aucun élément existant ne bouge, et la liste ouverte passe par-dessus la page.
   Valeurs littérales, sans variable CSS : les pages de contenu ne définissent pas celles de l'accueil. */

.lang-switcher {
  position: absolute;
  z-index: 10;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(0.6875rem, 0.6357rem + 0.221vw, 0.8125rem); /* taille des liens du footer : 11 à 13 px */
  font-weight: 300;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: #58595b;
  white-space: nowrap;
  transform: translateY(-50%);
}

.lang-switcher details {
  position: relative;
}

/* Bouton : le globe seul, centré dans une cible d'au moins 24 × 24 px (WCAG 2.2, critère 2.5.8). */
.lang-switcher summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 2px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.lang-switcher summary::-webkit-details-marker {
  display: none;
}

.lang-switcher-globe {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}

/* Nom de la langue en cours : masqué à l'écran, lu par les lecteurs d'écran. */
.lang-switcher-current {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Liste : sous le bouton, alignée à droite, à la largeur du nom le plus long. Lignes de 36 px de haut. */
.lang-switcher ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #dcdedf;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(29, 34, 40, 0.12);
}

.lang-switcher li > a,
.lang-switcher li > span {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.875rem;
  font-weight: 400;
  color: #1d2228;
  text-decoration: none;
}

.lang-switcher li > a:hover {
  background: #f1f2f2;
}

.lang-switcher li > a:focus-visible {
  outline: 2px solid #1d2228;
  outline-offset: -2px;
}

/* Langue en cours : en gras. */
.lang-switcher li > [aria-current] {
  font-weight: 700;
}

/* Accueil : dans le header, centré sur la hauteur du logo (largeur × 39,55 / 245,92).
   Marge droite en miroir de la marge gauche du logo : 30 px, 60 px dès 900 px, 0 dès 1 700 px. */
header .lang-switcher {
  top: calc(30px + clamp(12.5rem, 11.2051rem + 5.5249vw, 15.625rem) * 39.55 / 245.92 / 2);
  right: 30px;
}

@media screen and (min-width: 900px) {
  header .lang-switcher {
    right: 60px;
  }
}

@media screen and (min-width: 1700px) {
  header .lang-switcher {
    right: 0;
  }
}

/* Très petits écrans (moins de 320 px, pliables fermés) : sous le logo, qui fait alors 200 px de large,
   pour ne pas le chevaucher. Le titre ne commence qu'à 150 px du haut. */
@media screen and (max-width: 319px) {
  header .lang-switcher {
    top: calc(30px + clamp(12.5rem, 11.2051rem + 5.5249vw, 15.625rem) * 39.55 / 245.92 + 14px);
  }
}

/* Autres pages : cadre à la géométrie de .bodyContent (1 280 px + marges de 30 px),
   sélecteur centré sur la flèche retour (icône de 20 px sous 40 px de marge : centre à 50 px). */
.lang-switcher-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 1340px;
  height: 0;
  margin: 0 auto;
  padding: 0 30px;
  box-sizing: border-box;
}

.lang-switcher-frame .lang-switcher {
  top: 50px;
  right: 30px;
}