/* Sélecteur « Langue et devise » des headers (themes/builder/partials/headers/_locale-switcher) :
   bouton « FR · MAD » (couleur du texte du header) → panneau (bureau) ou feuille plein écran (mobile, déplacée en fin
   de page par _selectors-script). Couleur d'accent : --main-color (Theme Builder). */

.tl-ls { position: relative; display: inline-flex; --tl-ls-accent: var(--main-color, #2563eb); }
.tl-ls-host { display: inline-flex; }

/* ── Bouton ─────────────────────────────────────────────────────────────────────────────────────── */
.tl-ls__trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease;
}
.tl-ls__trigger:hover, .tl-ls.is-open .tl-ls__trigger { background: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 45%, transparent); }
.tl-ls__trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tl-ls__globe { width: 17px; height: 17px; flex: none; }
.tl-ls__chevron { width: 14px; height: 14px; flex: none; opacity: .7; transition: transform .2s ease; }
.tl-ls.is-open .tl-ls__chevron { transform: rotate(180deg); }
.tl-ls__current { display: inline-flex; align-items: center; gap: 5px; letter-spacing: .02em; }
.tl-ls__sep { opacity: .5; }
.tl-ls.is-loading .tl-ls__trigger { opacity: .6; pointer-events: none; }

/* Mobile du modèle 1 : bouton compact (sans chevron) */
.tl-ls--icon .tl-ls__trigger { height: 36px; padding: 0 10px; gap: 5px; font-size: 12px; }
.tl-ls--icon .tl-ls__chevron { display: none; }
/* Barre du haut du modèle 2 : discret, sans bordure */
.tl-ls--topbar .tl-ls__trigger { height: 28px; padding: 0 8px; border-color: transparent; font-size: 12px; font-weight: 500; }
.tl-ls--topbar .tl-ls__trigger:hover, .tl-ls--topbar.is-open .tl-ls__trigger { border-color: transparent; }
.tl-ls--topbar .tl-ls__globe { width: 15px; height: 15px; }

/* ── Panneau (bureau) ───────────────────────────────────────────────────────────────────────────── */
.tl-ls__backdrop { display: none; }
.tl-ls__panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 1200;
  width: 340px; max-width: calc(100vw - 24px); max-height: min(560px, 75vh); overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; color: #0f172a;
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .28), 0 4px 12px rgba(15, 23, 42, .06);
  text-align: start; animation: tl-ls-pop .16s ease-out;
}
.tl-ls__panel[hidden] { display: none; }
@keyframes tl-ls-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tl-ls__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.tl-ls__head strong { font-size: 15px; font-weight: 700; }
.tl-ls__close {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: #f1f5f9; color: #334155; cursor: pointer;
}
.tl-ls__close svg { width: 16px; height: 16px; }
.tl-ls__close:hover { background: #e2e8f0; }
.tl-ls__body { overflow-y: auto; padding: 0 8px 10px; overscroll-behavior: contain; }
.tl-ls__group + .tl-ls__group { margin-top: 6px; padding-top: 6px; border-top: 1px solid #f1f5f9; }
.tl-ls__label { margin: 8px 8px 6px; color: #64748b; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tl-ls__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tl-ls__opt {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 12px; background: transparent; color: #0f172a; font: inherit; font-size: 14px; text-align: start; cursor: pointer;
  transition: background-color .12s ease;
}
.tl-ls__opt:hover, .tl-ls__opt:focus-visible { background: #f8fafc; outline: none; }
.tl-ls__opt:focus-visible { box-shadow: inset 0 0 0 2px var(--tl-ls-accent); }
.tl-ls__badge {
  display: grid; flex: none; place-items: center; min-width: 38px; height: 32px; padding: 0 6px; border-radius: 9px;
  background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.tl-ls__name { display: flex; flex: 1; flex-direction: column; min-width: 0; font-weight: 600; line-height: 1.25; }
.tl-ls__name small { color: #64748b; font-size: 12px; font-weight: 500; }
.tl-ls__check { width: 18px; height: 18px; flex: none; color: var(--tl-ls-accent); opacity: 0; }
.tl-ls__opt.is-on { background: color-mix(in srgb, var(--tl-ls-accent) 8%, #fff); }
.tl-ls__opt.is-on .tl-ls__badge { background: var(--tl-ls-accent); color: #fff; }
.tl-ls__opt.is-on .tl-ls__check { opacity: 1; }
.tl-ls.is-loading .tl-ls__opt { pointer-events: none; opacity: .6; }

/* ── Feuille plein écran (mobile) ───────────────────────────────────────────────────────────────── */
html.tl-ls-lock { overflow: hidden; }
@media (max-width: 767.98px) {
  .tl-ls--portal { position: fixed; inset: 0; z-index: 2000; display: block; }
  .tl-ls--portal .tl-ls__backdrop { display: block; position: absolute; inset: 0; background: rgba(15, 23, 42, .5); animation: tl-ls-fade .2s ease-out; }
  .tl-ls--portal .tl-ls__backdrop[hidden] { display: none; }
  .tl-ls--portal .tl-ls__panel {
    position: absolute; inset: auto 0 0 0; top: auto; width: auto; max-width: none; max-height: 86vh;
    border: 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom);
    animation: tl-ls-up .22s ease-out;
  }
  .tl-ls--portal .tl-ls__head { padding: 18px 18px 10px; }
  .tl-ls--portal .tl-ls__head::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #e2e8f0;
  }
  .tl-ls--portal .tl-ls__body { padding: 0 10px 16px; }
  .tl-ls--portal .tl-ls__opt { padding: 12px; font-size: 15px; }
}
@keyframes tl-ls-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes tl-ls-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tl-ls__panel, .tl-ls--portal .tl-ls__panel, .tl-ls--portal .tl-ls__backdrop { animation: none; }
  .tl-ls__chevron, .tl-ls__opt, .tl-ls__trigger { transition: none; }
}