@keyframes nav-enter{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes nav-glow{to{opacity:.95}}
.site-nav{
  position:relative;isolation:isolate;z-index:10;max-width:1320px;margin:20px auto 0;
  padding:13px 16px;display:flex;align-items:center;gap:20px;
  border:1px solid #3b292d;border-radius:22px;
  background:linear-gradient(115deg,#181011,#0b0b0d 30%,#170d0e);
  box-shadow:inset 0 1px #ffffff12,0 12px 40px #b91c1c20;
  animation:nav-enter .55s ease-out both
}
.site-nav::after{
  content:"";position:absolute;pointer-events:none;bottom:-1px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,#ff3b3b,transparent);
  box-shadow:0 0 16px #ff3b3b;opacity:.35;animation:nav-glow 3s ease-in-out infinite alternate
}
.site-nav a,.site-nav button{text-decoration:none;color:#f4f4f5;font:inherit;cursor:pointer}
.site-nav :is(a,button):focus-visible{outline:2px solid #ff8282;outline-offset:3px}
.site-nav .brand{display:flex;align-items:center;gap:9px;font-size:clamp(21px,2.2vw,29px);font-weight:850;white-space:nowrap}
.site-nav .brand img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 7px #ff393966)}
.site-nav .brand span{color:var(--red2)}
.site-links,.site-actions{display:flex;align-items:center;gap:8px;font-size:13px}
.site-links{margin-left:auto}
.site-links a,.site-actions :is(a,button){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  padding:10px 13px;border:1px solid #443438;border-radius:15px;
  background:linear-gradient(#21191b,#120e10);box-shadow:inset 0 1px #ffffff16;
  transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease
}
.site-nav svg{width:17px;height:17px;flex:none}
.site-nav [aria-current]{border-color:#e74c51;background:linear-gradient(#3e1a1e,#210f12);box-shadow:0 0 16px #ed33332b}
.site-nav .start{background:linear-gradient(120deg,#fb3038,#b51720);border-color:#ff686d;font-weight:750;box-shadow:0 0 20px #e9293b54,inset 0 1px #ffffff38}
@media(hover:hover){
  .site-links a:hover,.site-actions :is(a,button):hover{transform:translateY(-3px);border-color:#ff7479;box-shadow:0 6px 18px #ed333343}
}
@media(max-width:1050px){
  .site-nav{flex-wrap:wrap;justify-content:space-between;gap:12px;padding:10px 12px}
  .site-links{order:1;flex-basis:100%;margin:0;padding-top:9px;border-top:1px solid var(--bd);flex-wrap:wrap}
}
@media(max-width:480px){
  .site-links,.site-actions{gap:6px;font-size:11px}
  .site-links a,.site-actions :is(a,button){padding:8px;gap:5px;border-radius:11px}
  .site-nav svg{width:14px;height:14px}
  .site-nav .brand img{width:28px;height:28px}
}

.new-home .site-nav{width:calc(100% - 32px)}
.site-nav [hidden]{display:none!important}
.site-nav .brand:hover img{filter:drop-shadow(0 0 10px #ff3939aa)}
.site-nav .brand img{transition:filter .2s ease}
@media(prefers-reduced-motion:no-preference-off){
  .site-nav,.site-nav::after{animation:none}
  .site-nav *{transition:none}
  .site-nav a:hover,.site-nav button:hover{transform:none}
}

/* ===== Navbar v2 : flottante, verre dépoli, effets ===== */
.site-nav{
  position:sticky;top:12px;
  background:linear-gradient(115deg,#1a0f11cc,#09090bd9 32%,#180d0fcc);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  transition:padding .3s ease,box-shadow .3s ease,border-color .3s ease,max-width .3s ease
}
.site-nav.scrolled{padding-block:8px;border-color:#ff3b3b55;box-shadow:inset 0 1px #ffffff14,0 14px 44px #000b,0 0 34px #ff2d3a26}
.site-nav::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--na,0deg),transparent 0 70%,#ff4a4a 85%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:nav-orbit 7s linear infinite;opacity:.8
}
@property --na{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes nav-orbit{to{--na:360deg}}
.site-nav .brand{transition:transform .25s ease}
.site-nav .brand:hover{transform:scale(1.04)}
.site-nav .brand img{animation:nav-logo 3.5s ease-in-out infinite alternate}
@keyframes nav-logo{from{filter:drop-shadow(0 0 5px #ff393955)}to{filter:drop-shadow(0 0 13px #ff3939cc)}}
.site-links a,.site-actions :is(a,button){position:relative;overflow:hidden;font-weight:550}
.site-links a::before,.site-actions a::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,#ffffff2a 50%,transparent 65%);transform:translateX(-130%);transition:transform .55s ease
}
@media(hover:hover){
  .site-links a:hover::before,.site-actions a:hover::before{transform:translateX(130%)}
  .site-links a:hover svg{transform:scale(1.18) rotate(-6deg)}
}
.site-nav svg{transition:transform .25s cubic-bezier(.22,1.4,.4,1)}
.site-nav [aria-current]{position:relative}
.site-nav [aria-current]::after{content:"";position:absolute;left:22%;right:22%;bottom:3px;height:2px;border-radius:2px;background:#ff5a5a;box-shadow:0 0 10px #ff4a4a}
.site-nav .start{animation:nav-start 2.8s ease-in-out infinite}
@keyframes nav-start{50%{box-shadow:0 0 30px #e9293bb0,inset 0 1px #ffffff38}}
.site-nav a:active,.site-nav button:active{transform:scale(.96)}
@media(max-width:1050px){.site-nav{top:8px}}
@media(prefers-reduced-motion:no-preference-off){.site-nav::before,.site-nav .brand img,.site-nav .start{animation:none}}

/* ===== v3 : liens centrés dans la barre ===== */
@media(min-width:1051px){
  .site-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:20px}
  .site-nav .brand{justify-self:start}
  .site-links{margin:0;justify-self:center}
  .site-actions{justify-self:end}
}