/* --- Le sélecteur de langue ------------------------------------------------
   Une pilule segmentée : deux langues, deux boutons, un clic.

   ## Pourquoi une pilule et pas un menu

   Il y a deux langues. Un menu déroulant cacherait derrière un clic la seule
   information que la zone doit faire passer : quelles sont les langues, et
   laquelle je regarde. Un bouton par langue montre les deux en permanence.

   ## Pourquoi deux états visuels, et non un

   L'état est dans le **lien** — `aria-current="true"` — et dans le style. Le
   style fait le sighted ; l'attribut fait le lecteur d'écran. Un bouton dont
   l'état n'existe que dans une couleur n'est pas accessible, et « quelle langue
   est-ce ? » est exactement la question que l'on pose à voix haute.

   ## Le contraste sur fond clair et sur fond sombre

   L'en-tête passe du sombre au clair au défilement, et le pied de page est
   sombre. Le même composant doit donc être lisible dans les deux cas : la
   variante est portée par un modificateur sur le conteneur, pas par une classe
   par lien.

   ## La cible tactile

   44 px de haut, la même valeur que le reste du site. Un sélecteur de langue
   qu'on rate du doigt est un sélecteur de langue qui n'existe pas. */

.lang-pill {
    display: inline-flex;
}

.lang-pill__list {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 3px;
    list-style: none;
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    /* Le trait ne sert qu'au repos : actif, c'est le fond qui porte l'état. */
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
}

.lang-pill__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;

    /* 44 px : la cible minimale, sur les deux segments. */
    min-height: 44px;
    padding: 0 0.85rem;

    border-radius: 999px;
    color: var(--mk-on-dark-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s var(--mk-ease), color 0.18s var(--mk-ease);
}

.lang-pill__item:hover {
    color: #ffffff;
    background: rgb(255 255 255 / 10%);
}

.lang-pill__item.is-active {
    color: var(--mk-navy);
    background: var(--mk-on-dark);
    /* L'ombre est ce qui distingue l'actif sur fond sombre : sans elle, un
       blanc sur blanc ne se voit pas au défilement. */
    box-shadow: 0 1px 3px rgb(11 23 42 / 22%);
}

.lang-pill__item:focus-visible {
    outline: 2px solid var(--mk-turquoise-light);
    outline-offset: 2px;
}

.lang-pill__code {
    font-variant-numeric: tabular-nums;
}

.lang-pill__nom {
    display: none;
}

/* Le nom complet n'apparaît qu'à partir d'une largeur où il tient sans
   concurrencer le logo. En dessous, « FR | EN » est universellement lisible ;
   « Français » ne l'est pas. */
@media (min-width: 62rem) {
    .lang-pill__nom {
        display: inline;
    }
}

/* --- L'en-tête, au défilement : fond clair ---------------------------------
   Le sélecteur suit le fond. Sans ce bloc, il resterait lisible sur le fond
   sombre une fois l'en-tête passé en blanc — et l'inverse sur le pied de page. */
.site-header.is-scrolled .lang-pill__list {
    /* `--mk-paper-warm`, pas un `--mk-surface-muted` inventé : le jeton existe,
       et l'inventer aurait donné au repos une pastille gris bleuté au lieu du
       papier du site — visible seulement au défilement, donc facile à rater. */
    background: var(--mk-paper-warm);
    box-shadow: inset 0 0 0 1px rgb(11 23 42 / 10%);
}

.site-header.is-scrolled .lang-pill__item {
    color: var(--mk-navy);
}

.site-header.is-scrolled .lang-pill__item:hover {
    color: var(--mk-electric);
    background: rgb(11 23 42 / 6%);
}

.site-header.is-scrolled .lang-pill__item.is-active {
    color: var(--mk-on-dark);
    background: var(--mk-navy);
    box-shadow: 0 1px 2px rgb(11 23 42 / 18%);
}

/* --- Sur le pied de page ---------------------------------------------------
   Le même composant, mais toujours sur fond sombre : pas de variante à créer,
   les règles de base suffisent déjà. */
.site-footer .lang-pill__list {
    margin-top: 18px;
}

.site-footer .lang-pill__item {
    font-size: 0.75rem;
}

/* --- Dans le chrome d'un catalogue -----------------------------------------
   Deux familles de gabarits, donc deux noms de conteneur. Elles partagent le
   même composant ; seule la taille change, parce que l'en-tête d'un catalogue
   est plus compact que celui de la vitrine — et parce qu'un catalogue est
   souvent lu sur un téléphone, où la place est comptée.

   Pas de variante de fond : les deux en-têtes de catalogue sont sombres, et les
   deux pieds de page aussi. Un fond clair ici n'existe pas, et ajouter la
   variante pour elle serait du code qui ne sert à rien aujourd'hui. */
.t-entete__actions .lang-pill__item,
.shop-header__actions .lang-pill__item {
    min-height: 40px;
    padding: 0 0.7rem;
    font-size: 0.75rem;
}

.t-pied__bas .lang-pill__list,
.shop-footer__bottom .lang-pill__list {
    margin-top: 0;
}

.t-pied__bas .lang-pill__item,
.shop-footer__bottom .lang-pill__item {
    min-height: 36px;
    font-size: 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
    .lang-pill__item {
        transition: none;
    }
}

/* --- Variante `codes` : l'en-tête de la vitrine ---------------------------
   Codes seuls (« FR | EN »), même en grand écran : le nom complet ne doit
   jamais concurrencer le logo. La règle écrase le media à 62 rem par sa
   spécificité, pas par son ordre. */

.lang-pill--codes .lang-pill__nom {
    display: none;
}

.lang-pill--codes .lang-pill__item {
    min-height: 40px;
    padding: 0 0.7rem;
    font-size: 0.75rem;
}

/* --- Variante `pied` : le pied de page ------------------------------------
   Noms visibles mais très petits : c'est ce qui a été demandé — garder les
   noms, sans qu'ils prennent la place. La marge au-dessus est réduite avec. */

.lang-pill--pied .lang-pill__list {
    margin-top: 10px;
}

.lang-pill--pied .lang-pill__item {
    min-height: 32px;
    padding: 0 0.6rem;
    font-size: 0.68rem;
}

.lang-pill--pied .lang-pill__nom {
    display: inline;
}

/* --- Sur téléphone, la pastille quitte l'en-tête pour le tiroir ------------
   Dans `.site-header__actions`, elle concurrencerait le logo et le burger :
   elle n'y est rendue qu'à partir du desktop (1024 px, là où le burger
   disparaît). Dans le tiroir, elle est centrée au-dessus de l'appel. */

@media (max-width: 1023.98px) {
    .site-header__actions .lang-pill {
        display: none;
    }
}

.mobile-menu .lang-pill {
    display: flex;
    justify-content: center;
    /* Entre le bouton pleine largeur et le texte : assez d'air pour que les
       trois ne se touchent pas, pas assez pour faire un trou. Le texte garde
       sa propre marge haute de 12 px en dessous. */
    margin-top: 18px;
    margin-bottom: 2px;
}

@media (min-width: 1024px) {
    .mobile-menu .lang-pill {
        display: none;
    }
}