/* =====================================================================
   PREVIEW switch de langue FR <-> EN avec balayage circulaire (curtain).
   Fichier ADDITIF chargé uniquement par lang-preview.html.
   Ne touche pas le site de prod.

   Pourquoi un "curtain" et pas un reveal View-Transitions :
   sur un switch de langue seul le texte change (mêmes couleurs/layout),
   donc un reveal "nouveau par-dessus l'ancien" est invisible. Ici c'est
   un disque couleur lave qui balaie l'écran -> mouvement visible, et qui
   masque l'échange du texte. Fonctionne partout (pas besoin de l'API VT).
   ===================================================================== */

/* --- Le disque qui balaie (centré sur le bouton via --vt-x/--vt-y) --- */
.lang-curtain {
  position: fixed; inset: 0;
  z-index: 9998;
  pointer-events: none;
  /* dégradé brûlé profond : visible sur le basalte sombre sans crier (moins flashy que le lave pur) */
  background: linear-gradient(135deg, #b8451c, #4f2614);
  clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 0%));
  will-change: clip-path;
}
.lang-curtain.is-expanding {
  animation: spk-curtain-expand .40s var(--ease-in, cubic-bezier(.4,0,1,1)) forwards;
}
.lang-curtain.is-contracting {
  animation: spk-curtain-contract .52s var(--ease-out, cubic-bezier(0,0,.2,1)) forwards;
}
@keyframes spk-curtain-expand {
  from { clip-path: circle(0px at var(--vt-x,50%) var(--vt-y,0%)); }
  to   { clip-path: circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,0%)); }
}
@keyframes spk-curtain-contract {
  from { clip-path: circle(var(--vt-r,150vmax) at var(--vt-x,50%) var(--vt-y,0%)); }
  to   { clip-path: circle(0px at var(--vt-x,50%) var(--vt-y,0%)); }
}

/* Petit logo / sigle au centre du disque pendant le balayage (optionnel, discret) */
.lang-curtain::after {
  content: "";
  position: absolute;
  left: var(--vt-x, 50%); top: var(--vt-y, 0%);
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: rgba(255,238,225,.85);
  opacity: 0;
  animation: spk-curtain-pip .92s var(--ease, cubic-bezier(.2,.8,.2,1)) forwards;
}
@keyframes spk-curtain-pip {
  0%, 100% { opacity: 0; transform: scale(.4); }
  45%      { opacity: .5; transform: scale(1); }
}

/* reduced-motion : pas de balayage, échange instantané (géré aussi en JS) */
@media (prefers-reduced-motion: reduce) {
  .lang-curtain { display: none; }
}

/* --- Bouton toggle langue (inséré dans .nav, avant le burger) --- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  height: 38px; padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--basalt3);
  background: color-mix(in srgb, var(--basalt2) 65%, transparent);
  color: var(--stone);
  font: 600 13px/1 var(--font-mono, monospace);
  letter-spacing: .04em;
  cursor: pointer;
  margin-left: var(--sp-4, 16px);
  transition: transform var(--dur-fast,140ms) var(--ease,cubic-bezier(.2,.8,.2,1)),
              border-color var(--dur-base,260ms) var(--ease,cubic-bezier(.2,.8,.2,1)),
              background var(--dur-base,260ms) var(--ease,cubic-bezier(.2,.8,.2,1));
}
.lang-toggle:hover { transform: translateY(-1px); border-color: var(--lava); }
.lang-toggle:active { transform: scale(.96); }
.lang-toggle:focus-visible { outline: 2px solid var(--lava); outline-offset: 2px; }
.lang-toggle svg { width: 15px; height: 15px; opacity: .8; }
.lang-toggle .lang-code { font-weight: 700; }

/* Bandeau PREVIEW pour ne pas confondre avec la prod */
.preview-flag {
  position: fixed; left: 12px; bottom: 12px; z-index: 9999;
  font: 600 11px/1 var(--font-mono, monospace);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 999px;
  background: var(--lava); color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  opacity: .92; pointer-events: none;
}

/* --- Toggle en variante lien (navigation inter-pages FR<->EN) --- */
a.lang-toggle { text-decoration: none; }

/* --- Placement dans la barre des pages legales (.legal-nav) --- */
.legal-nav-inner .back { margin-left: auto; }
.legal-nav-inner .lang-toggle { height: 34px; padding: 0 11px; }
@media (max-width: 600px) {
  .legal-nav-inner { gap: 10px; }
  .legal-nav-inner .lang-toggle { height: 32px; padding: 0 9px; }
}