/* ============================================================
   Sélecteur de langue — feuille partagée site public / back-office.
   Chaque feuille hôte fournit --lang-actif (vert côté public,
   violet côté administration) ; tout le reste est neutre.
   ============================================================ */

.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.lang{position:relative;flex-shrink:0}

.lang > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:var(--lang-fond,#F6F1E4);border:1px solid var(--lang-bord,#E3D8BE);
  font-size:.86rem;font-weight:600;color:var(--lang-texte,#5B5647);
  white-space:nowrap;transition:border-color .15s,background .15s;
}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary::marker{content:''}
.lang > summary:hover{border-color:var(--lang-actif,#7DB928)}
.lang > summary:focus-visible{outline:3px solid var(--lang-actif,#7DB928);outline-offset:2px}

.lang-globe{font-size:1rem;line-height:1}
.lang-code{font-family:var(--latin,sans-serif);font-size:.74rem;letter-spacing:.6px;text-transform:uppercase;
  background:var(--lang-actif,#7DB928);color:#fff;border-radius:999px;padding:2px 8px;line-height:1.5}
.lang-code[lang="ar"]{font-family:'Noto Naskh Arabic',serif;letter-spacing:0;font-size:.85rem}

/* Triangle dessiné en CSS : il pointe vers le bas dans les deux directions
   d'écriture, contrairement à un caractère « ▾ » qui suit le sens du texte. */
.lang-fleche{width:0;height:0;border-inline:5px solid transparent;
  border-top:6px solid currentColor;opacity:.55;transition:transform .15s}
.lang[open] > summary .lang-fleche{transform:rotate(180deg)}

.lang > ul{
  position:absolute;z-index:120;inset-inline-end:0;top:calc(100% + 8px);
  min-width:200px;list-style:none;margin:0;padding:6px;
  background:#fff;border:1px solid var(--lang-bord,#E3D8BE);border-radius:14px;
  box-shadow:0 16px 38px rgba(0,0,0,.16);
}
.lang > ul a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;
  font-size:.92rem;font-weight:500;color:#26251F;transition:background .15s;
}
.lang > ul a:hover,.lang > ul a:focus-visible{background:var(--lang-fond,#F6F1E4)}
.lang > ul a:focus-visible{outline:2px solid var(--lang-actif,#7DB928);outline-offset:-2px}
.lang > ul a[aria-current="true"]{font-weight:700}
.lang-coche{margin-inline-start:auto;color:var(--lang-actif,#7DB928);font-weight:700}

/* Le bouton n'affiche JAMAIS le nom complet de la langue : « Français » y
   prenait autant de place qu'une rubrique du menu, pour une information que la
   pastille « FR » donne aussi bien. Le nom complet reste dans la liste
   déroulante, là où l'on choisit vraiment.

   Le nom est tout de même présent pour les lecteurs d'écran, via
   .visuellement-cache dans le gabarit. */
.lang-actuelle{display:none}
.lang > summary{padding:7px 11px;gap:7px}