/* ============================================================
   Sélecteur d'univers — BOUTON FLOTTANT fixe, identique sur les 3 pages.
   Position fixe (centre-bas) → il ne bouge jamais d'un univers à l'autre ;
   seules ses couleurs changent. Thème via les variables --fn-* (inline).
   Transitions de page = View Transitions natives (glissement, pas un fondu).
   ============================================================ */

.facetnav {
  position: fixed;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 22px;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: 300;
  view-transition-name: facetswitch; /* reste fixe pendant la transition */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* La pilule à 3 onglets */
.facetnav-rail {
  display: inline-flex;
  gap: 3px;
  padding: 5px;
  background: color-mix(in srgb, var(--fn-bg, #fff) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--fn-line, #e0dad0);
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
}

.facet {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--fn-muted, #8a8278);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.facet:not([aria-current]):hover { color: var(--fn-ink, #1b1814); }
.facet[aria-current="page"] {
  background: var(--fn-accent, #b6431d);
  color: var(--fn-on, #fff);
}

/* Petit écran : un cran plus bas et plus compact */
@media (max-width: 560px) {
  .facetnav { bottom: 14px; }
  .facet { padding: 8px 14px; font-size: 12.5px; }
  .facetnav-rail { gap: 2px; }
}

/* ============================================================
   Transition entre pages — glissement (View Transitions, cross-document)
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: .5s cubic-bezier(.4, 0, .2, 1) both fct-out; }
::view-transition-new(root) { animation: .5s cubic-bezier(.4, 0, .2, 1) both fct-in; }
@keyframes fct-out { to   { transform: translateX(-5%); opacity: 0; } }
@keyframes fct-in  { from { transform: translateX(7%);  opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   Impression : pas de chrome de navigation
   ============================================================ */
@media print {
  .facetnav { display: none !important; }
}