/* ============================================================
   lang-switcher.css
   Composant FR / EN partagé par toutes les pages
   ============================================================ */

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid currentColor;
  opacity: .55;
  transition: opacity .2s;
  flex-shrink: 0;
}

.lang-switcher:hover { opacity: 1; }

.lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 9px;
  color: inherit;
  transition: background .15s, color .15s;
  line-height: 1;
}

.lang-btn + .lang-btn {
  border-left: 1px solid currentColor;
  opacity: .5;
}

.lang-btn--active {
  opacity: 1 !important;
  background: rgba(128,128,128,.12);
}

.lang-btn:not(.lang-btn--active):hover {
  background: rgba(128,128,128,.08);
  opacity: .85 !important;
}

/* Flag emoji sizing */
.lang-flag {
  font-size: 13px;
  line-height: 1;
}

/* ── Dark page variant (index, ep, links) ── */
.lang-switcher--dark {
  border-color: #444;
  color: #999;
}

.lang-switcher--dark .lang-btn--active {
  color: #E8E0D0;
  background: rgba(255,255,255,.07);
}

/* ── Light page variant (portfolio) ──────── */
.lang-switcher--light {
  border-color: #ccc;
  color: #888;
}

.lang-switcher--light .lang-btn--active {
  color: #111;
  background: rgba(0,0,0,.05);
}