/* ============================================================
   Clicavis Hotel LangSwitcher (FR / EN / ES)
   Selecteur de langue, drapeaux SVG ronds. Composant portable, replique
   du site mere. Ne depend que des variables --accent-deep, --ink, --ink-soft
   et --line de landing.css (fallbacks inclus). Aucun asset externe.

   Le header de la home n'a pas de burger : la nav se cache sous 900px et
   seuls le brand + les CTA restent. On expose donc deux variantes :
     - desktop : dans le groupe CTA de la nav, visible >= 900px
     - mobile  : compact (drapeaux seuls) dans le header, visible < 900px,
                 sans compresser le header (pas de nav a reveler).
   ============================================================ */

.lang-switch { display: flex; align-items: center; gap: 4px; }

.lang-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 9px;
  text-decoration: none; line-height: 1;
  opacity: .6;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.lang-flag:hover,
.lang-flag:focus-visible {
  opacity: 1; transform: translateY(-1px);
  background: rgba(27, 24, 21, .05); outline: none;
}
.lang-flag.is-active { opacity: 1; cursor: default; }

.lang-flag-svg {
  width: 22px; height: 22px;
  border-radius: 50%; overflow: hidden;
  display: block; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(27, 24, 21, .12);
}
.lang-flag.is-active .lang-flag-svg { box-shadow: 0 0 0 2px var(--accent-deep, #8E6839); }

.lang-code {
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: var(--ink-soft, #3A332C);
  font-family: 'Manrope', system-ui, sans-serif;
}
.lang-flag.is-active .lang-code { color: var(--ink, #1B1815); }

/* ---- Variante desktop (dans le groupe CTA de la nav) ---- */
.lang-switch-desktop { margin-right: 4px; }
@media (max-width: 899px) {
  .lang-switch-desktop { display: none; }
}

/* ---- Variante mobile (drapeaux compacts dans le header, < 900px) ---- */
.lang-switch-mobile { display: none; }
@media (max-width: 899px) {
  .lang-switch-mobile {
    display: flex; gap: 2px;
    margin-left: auto; margin-right: 4px;
  }
  .lang-switch-mobile .lang-code { display: none; }
  .lang-switch-mobile .lang-flag { padding: 4px; opacity: .7; }
  .lang-switch-mobile .lang-flag.is-active { opacity: 1; }
}

/* ---- Variante plain (pages legales, toujours visible) ---- */
.lang-switch-plain { margin-left: auto; }
@media (max-width: 560px) {
  .lang-switch-plain { gap: 2px; }
  .lang-switch-plain .lang-code { display: none; }
}