/* XANDERDELY V9 — barre commune (accueil + /ugc). Autonome : ses jetons sont posés sur la nav elle-même.
   Composition : signature à gauche (lien vers l'accueil), langues à droite. Voile flou seulement après défilement. */
.nav, .skip {
  --n-ink: #EFEBE4; --n-ink-2: #D6D0C6; --n-muted: #A69E94; --n-line: rgba(214, 208, 198, .12); --n-line-2: rgba(214, 208, 198, .2);
  --n-raise: #2A2628; --n-serif: 'Instrument Serif', 'Songti SC', Georgia, serif; --n-sans: 'Instrument Sans', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --n-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --n-ease: cubic-bezier(.2, .7, .2, 1); --n-safe: env(safe-area-inset-top, 0px);
  --sun: radial-gradient(circle at 40% 35%, #F7B27F 0%, #D9774A 55%, #9E4A33 100%);
}
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #D6D0C6; color: #1D1A1C; font: 600 14px/1 var(--n-sans); text-decoration: none; }
.skip:focus { top: calc(12px + var(--n-safe)); }
.nav { position: fixed; z-index: 50; left: 0; right: 0; top: 0; padding: calc(10px + var(--n-safe)) clamp(12px, 4.4vw, 48px) 0; font-family: var(--n-sans); }
.nav a { text-decoration: none; }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1200px; margin: 0 auto; height: 52px; padding: 0 4px; border-radius: 12px;
  transition: background-color 240ms var(--n-ease), box-shadow 240ms var(--n-ease), padding 240ms var(--n-ease); }
.nav.is-scrolled .nav__bar { padding: 0 6px 0 14px; background: rgba(20, 17, 19, .78); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(239, 235, 228, .05), 0 0 0 1px var(--n-line), 0 14px 30px -18px rgba(0, 0, 0, .9); }

/* Signature : capitales serif, approche ouverte et régulière, suivie du « point soleil » (le soleil levant du hero, réduit à un signe).
   Le point est le seul ornement de la marque ; on le retrouve sur l'état « en cours » du parcours. */
.nav__brand { position: relative; display: inline-flex; align-items: baseline; gap: 7px; min-height: 44px; align-items: center; padding: 0 2px; border-radius: 8px; color: var(--n-ink); }
.nav__name { font: 400 19px/1 var(--n-serif); letter-spacing: .085em; font-feature-settings: 'kern', 'case'; padding-top: 2px; }
.nav__sun { width: 6px; height: 6px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 6px rgba(232, 128, 80, .45); opacity: .9; align-self: center; margin-top: -9px;
  transition: box-shadow 240ms var(--n-ease), opacity 240ms var(--n-ease), transform 240ms var(--n-ease); }
.nav__brand:hover .nav__sun, .nav__brand:focus-visible .nav__sun { opacity: 1; box-shadow: 0 0 12px 1px rgba(240, 140, 90, .7); transform: translateY(-1px); }
.nav__brand:focus-visible, .nav .langs a:focus-visible { outline: 2px solid #E9C9A8; outline-offset: 3px; }

.nav .langs { display: flex; gap: 2px; margin: 0; padding: 3px; list-style: none; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--n-line); }
.nav .langs a { display: grid; place-items: center; min-width: 40px; height: 38px; padding: 0 8px; border-radius: 7px; font: 500 11px/1 var(--n-mono); letter-spacing: .08em; color: var(--n-muted);
  transition: color 160ms var(--n-ease), background-color 160ms var(--n-ease); }
.nav .langs a:hover { color: var(--n-ink); background: rgba(239, 235, 228, .05); }
.nav .langs a[aria-current] { color: var(--n-ink); background: var(--n-raise); box-shadow: inset 0 1px 0 rgba(239, 235, 228, .07), 0 0 0 1px var(--n-line-2); }
@media (max-width: 359px) { .nav__name { font-size: 17px; letter-spacing: .06em; } .nav .langs a { min-width: 34px; padding: 0 5px; } }
@media (prefers-reduced-motion: reduce) { .nav__bar, .nav__sun, .nav .langs a { transition: none; } .nav__brand:hover .nav__sun { transform: none; } }