/* ==========================================================================
   REMIND — i18n.css
   Sélecteur de langue (drapeaux) dans le header + version mobile.
   Réutilise les tokens de base.css.
   ========================================================================== */

.lang-switch{ position: relative; display: inline-flex; }

.lang-switch__btn{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255,255,255,.5);
  font-family: var(--sans);
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lang-switch__btn:hover{ background: #fff; border-color: rgba(24,26,20,.28); }
.lang-switch__flag{ font-size: 16px; line-height: 1; }
.lang-switch__code{ font-size: 12px; }
.lang-switch__chev{
  width: 14px; height: 14px; color: var(--ink-50);
  transition: transform .2s var(--ease);
}
.lang-switch.is-open .lang-switch__chev{ transform: rotate(180deg); }

.lang-switch__menu{
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 172px;
  margin: 0; padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(24,26,20,.4);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 80;
}
.lang-switch.is-open .lang-switch__menu{ opacity: 1; transform: none; pointer-events: auto; }

.lang-switch__menu li{ margin: 0; }
.lang-switch__opt{
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0; border-radius: 9px;
  background: transparent;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  text-align: left; cursor: pointer;
}
.lang-switch__opt:hover{ background: var(--cream-2); }
.lang-switch__opt .flag{ font-size: 17px; line-height: 1; }
.lang-switch__opt[aria-selected="true"]{ font-weight: 700; }
.lang-switch__opt[aria-selected="true"]::after{
  content: '✓'; margin-left: auto; color: var(--terra); font-weight: 700;
}

/* Header : le sélecteur est placé À DROITE du bouton « Disponible dans WhatsApp ».
   Le pill prend margin-left:auto → il pousse le groupe (pill + sélecteur) à droite,
   ce qui laisse logo + nav alignés à gauche sur une seule ligne. */
.site-header .pill{ margin-left: auto; }
.site-header .lang-switch{ margin-left: 12px; }

/* Mobile (≤1080px) : le pill du header est masqué (déplacé dans le menu) →
   le sélecteur reprend la poussée à droite, juste avant le burger. */
@media (max-width: 1080px){
  .site-header .lang-switch{ margin-left: auto; }
}
@media (max-width: 560px){
  .lang-switch__btn{ padding: 7px 9px; }
  .lang-switch__code{ display: none; }   /* ne garde que le drapeau + chevron */
  .lang-switch__menu{ min-width: 168px; }
}

/* Sélecteur dans le menu mobile (pleine largeur) */
.mobile-menu .lang-switch{ display: flex; width: 100%; }
.mobile-menu .lang-switch__btn{ width: 100%; justify-content: center; }
.mobile-menu .lang-switch__menu{ left: 0; right: 0; }
.mobile-menu .lang-switch__code{ display: inline; }