/* ============================================================
   VOIDBELT — VELOCITY
   Course anti-gravite dans la ceinture. La scene 3D occupe tout
   l'ecran ; l'interface reprend le vocabulaire du reste du site
   (Archivo Black, Space Mono, orange et cyan sur noir) et se
   pose par-dessus en cadres nets, sans arrondi.
   ============================================================ */

.vbody{ background:#04040a }

#race{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%; display:block;
}

/* voile : vignette + un soupcon de grain, pour asseoir le rendu 3D */
.vveil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 130% 105% at 50% 48%, transparent 52%, rgba(4,4,10,.6) 100%),
    linear-gradient(180deg, rgba(4,4,10,.5) 0%, transparent 20%, transparent 82%, rgba(4,4,10,.42) 100%);
}

.stage{ pointer-events:none }
.vtop, .vbtn, .vmodal, .vboard, .vhud-bl .vboost-k, .vbrand{ pointer-events:auto }

.view.velocity{ overflow:hidden; position:relative }

/* ============================================================
   BANDEAU HAUT
   ============================================================ */

.vtop{
  position:absolute; z-index:5; left:0; right:0; top:0;
  display:flex; align-items:center; justify-content:space-between; gap:1.4em;
  padding:.85em clamp(14px,2.6vmin,44px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,10,11,.9), transparent);
  font-size:var(--fs-xs); letter-spacing:.24em; text-transform:uppercase;
}
.vbrand{
  display:inline-flex; align-items:center; gap:.9em;
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:1.5em; letter-spacing:.04em; color:var(--bone); text-decoration:none;
}
.vbrand i{ width:2.2em; height:2px; background:var(--orange) }
.vbrand:hover{ color:var(--orange) }
.vsector{ color:var(--txt-3) }
.vsector span{ color:var(--cyan); margin-right:1em }
.vtop-a{ display:flex; align-items:center; gap:.8em }

/* ============================================================
   BOUTONS
   ============================================================ */

.vbtn{
  display:inline-flex; align-items:center; gap:.7em;
  padding:.7em 1.2em; border:1px solid var(--line);
  background:rgba(10,10,11,.82); color:var(--txt-2);
  font:inherit; font-size:var(--fs-xs); letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:color .12s, border-color .12s, background .12s, transform .12s;
}
.vbtn:hover, .vbtn:focus-visible{ color:var(--bone); border-color:var(--orange) }
.vbtn b{ font-weight:400; color:var(--cyan) }
.vbtn.solid{
  border-color:var(--bone); background:var(--orange); color:var(--black);
  font-family:'Archivo Black','Arial Black',sans-serif; letter-spacing:.14em;
  padding:.95em 1.6em; box-shadow:.45em .45em 0 rgba(237,231,218,.16);
}
.vbtn.solid:hover{ transform:translate(-2px,-2px); box-shadow:.65em .65em 0 rgba(237,231,218,.24); color:var(--black) }
.vbtn.solid i{ font-style:normal }
.vbtn.warn{ border-color:var(--orange); color:var(--orange) }
.vbtn .kbd{ font-size:.72em }

/* ============================================================
   TABLEAU DE BORD
   ============================================================ */

.vhud{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase;
}
.vhud-tl{ position:absolute; left:clamp(14px,2.6vmin,44px); top:clamp(72px,9vmin,110px) }
.vhud-tc{ position:absolute; left:50%; top:clamp(70px,8.6vmin,106px); transform:translateX(-50%); text-align:center }
.vhud-br{ position:absolute; right:clamp(14px,2.6vmin,44px); bottom:clamp(16px,3vmin,48px); text-align:right }
.vhud-bl{ position:absolute; left:clamp(14px,2.6vmin,44px); bottom:clamp(16px,3vmin,48px) }

/* --- tour + secteurs --- */
.vlap{ display:flex; align-items:baseline; gap:.5em; color:var(--txt-3) }
.vlap small{ font-size:1em; letter-spacing:.3em }
.vlap b{
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:3.4em; line-height:.85; color:var(--bone); letter-spacing:0;
}
.vlap span{ color:var(--txt-3) }

.vsplits{ display:flex; flex-direction:column; gap:.3em; margin-top:1em }
.vsplits div{
  display:flex; align-items:center; gap:.8em;
  padding:.3em .7em; border-left:2px solid var(--line);
  background:rgba(10,10,11,.55); color:var(--txt-3);
}
.vsplits div.on{ border-left-color:var(--orange); color:var(--txt) }
.vsplits div.done{ border-left-color:var(--cyan) }
.vsplits b{ font-weight:400; color:var(--cyan); font-variant-numeric:tabular-nums }

/* --- chronos --- */
.vchrono small{ display:block; font-size:1em; letter-spacing:.32em; color:var(--txt-3) }
.vchrono b{
  display:block; margin-top:.25em;
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:2.9em; line-height:1; letter-spacing:.01em;
  color:var(--bone); font-variant-numeric:tabular-nums;
  text-shadow:0 0 1.4em rgba(4,4,10,.9);
}
.vbest{ margin-top:.5em; display:flex; align-items:center; gap:.8em; justify-content:center; color:var(--txt-3) }
.vbest b{ font-weight:400; color:var(--cyan); font-variant-numeric:tabular-nums }
.vdelta{ margin-top:.4em; min-height:1.4em; color:var(--orange); opacity:0; transition:opacity .2s }
.vdelta.on{ opacity:1 }
.vdelta.good{ color:var(--cyan) }

/* --- vitesse --- */
.vspeed b{
  display:block;
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:6.4em; line-height:.78; letter-spacing:-.02em;
  color:var(--bone); font-variant-numeric:tabular-nums;
  text-shadow:0 0 1.6em rgba(4,4,10,.95);
}
.vspeed small{ display:block; font-size:1em; letter-spacing:.36em; color:var(--cyan) }
.vspeed-arc{
  width:clamp(140px,17vmin,260px); height:3px; margin-top:.9em; margin-left:auto;
  background:var(--line); overflow:hidden;
}
.vspeed-arc i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--cyan), var(--bone) 62%, var(--orange));
  transform:scaleX(0); transform-origin:right center;
}

/* --- surtension + adherence --- */
.vboost{ width:clamp(180px,22vmin,320px) }
.vboost > span{ display:block; color:var(--txt-3) }
.vboost em{ font-style:normal; color:var(--orange) }
.vboost-rail{ height:8px; margin-top:.6em; border:1px solid var(--line); background:rgba(10,10,11,.6) }
.vboost-rail i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, rgba(255,77,0,.55), var(--orange));
  transform:scaleX(1); transform-origin:left center;
  transition:background .2s;
}
.vboost.hot .vboost-rail i{ background:linear-gradient(90deg, var(--orange), var(--bone)) }
.vboost-k{ margin-top:.7em; font-size:.9em; color:var(--txt-3); letter-spacing:.14em }
.vboost-k s{ text-decoration:none; color:var(--line) }

.vgrip{ margin-top:1.1em; width:clamp(120px,15vmin,220px); color:var(--txt-3) }
.vgrip-rail{ height:2px; margin-top:.5em; background:var(--line) }
.vgrip-rail i{
  display:block; height:100%; width:100%; background:var(--cyan);
  transform:scaleX(1); transform-origin:left center;
}

/* --- alertes --- */
.vwarn{
  position:absolute; left:50%; top:38%; transform:translateX(-50%);
  padding:.5em 1.2em; background:var(--orange); color:var(--black);
  font-family:'Archivo Black','Arial Black',sans-serif; letter-spacing:.18em;
  opacity:0; transition:opacity .12s;
}
.vwarn.on{ opacity:1 }

.vflash{
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(255,77,0,.5) 100%);
}
.vflash.on{ animation:vhit .32s ease-out }
@keyframes vhit{ from{ opacity:1 } to{ opacity:0 } }

.vevent{
  position:absolute; left:50%; top:56%; transform:translate(-50%,0);
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:2.2em; letter-spacing:.1em; color:var(--cyan);
  text-shadow:0 0 1.2em rgba(95,235,247,.55); opacity:0;
}
.vevent.on{ animation:vpop 1s cubic-bezier(.2,.7,.2,1) }
@keyframes vpop{
  0%{ opacity:0; transform:translate(-50%,14px) scale(.94) }
  22%{ opacity:1; transform:translate(-50%,0) scale(1) }
  100%{ opacity:0; transform:translate(-50%,-16px) scale(1) }
}

/* --- verriere --- */
.canopy{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  transform:translateX(var(--tilt-x,0px)) rotate(var(--tilt-r,0deg));
  transform-origin:50% 120%;
}
.canopy i, .canopy u{
  position:absolute; bottom:0; width:52%; height:26vh;
  background:linear-gradient(180deg, rgba(10,12,18,.72), rgba(6,7,12,.97));
  border-top:2px solid rgba(95,235,247,.22);
  box-shadow:0 -1.2em 3em rgba(0,0,0,.5);
}
.canopy i{ left:-14%; transform:skewX(24deg) }
.canopy u{ right:-14%; transform:skewX(-24deg) }

/* --- compte a rebours --- */
.vcount{
  position:absolute; z-index:7; left:50%; top:46%; transform:translate(-50%,-50%);
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:min(26vmin,22vw); line-height:.8; color:var(--bone);
  text-shadow:0 0 .3em rgba(4,4,10,.95); pointer-events:none;
}
.vcount.go{ color:var(--orange) }
.vcount b{ display:block; animation:vtick .8s cubic-bezier(.2,.8,.2,1) }
@keyframes vtick{ from{ opacity:0; transform:scale(1.5) } to{ opacity:1; transform:scale(1) } }

/* ============================================================
   FENETRES — depart, arrivee, reglages
   ============================================================ */

.vmodal{
  position:absolute; inset:0; z-index:8;
  display:flex; align-items:center; gap:clamp(20px,4vmin,70px);
  padding:clamp(70px,9vmin,120px) clamp(20px,6vmin,110px) clamp(24px,4vmin,60px);
  background:linear-gradient(100deg, rgba(4,4,10,.96) 0%, rgba(4,4,10,.88) 46%, rgba(4,4,10,.42) 100%);
  overflow-y:auto; overscroll-behavior:contain;
  animation:vfade .3s ease both;
}
.vmodal[hidden]{ display:none }
@keyframes vfade{ from{ opacity:0 } to{ opacity:1 } }
.vmodal.out{ opacity:0; pointer-events:none; transition:opacity .35s ease }

.vkicker{
  display:flex; align-items:center; gap:.9em;
  font-size:var(--fs-xs); letter-spacing:.3em; text-transform:uppercase; color:var(--cyan);
}
.vkicker i{ width:2.6em; height:1px; background:var(--orange) }

/* --- depart --- */
.vintro-in{ flex:1 1 34em; min-width:0; max-width:44em }
.vtitle{
  margin:.22em 0 .1em;
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:clamp(58px,11.5vmin,168px); line-height:.82; letter-spacing:-.035em;
}
.vtitle span{ color:var(--bone) }
.vtitle em{ font-style:normal; color:transparent; -webkit-text-stroke:2px var(--orange) }

.vlede{ max-width:34em; margin:1.2em 0 1.6em; color:var(--txt-2); line-height:1.6 }

.vfield{ display:block; max-width:24em; margin-bottom:1.5em }
.vfield > span{
  display:block; font-size:var(--fs-xs); letter-spacing:.3em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:.6em;
}
.vfield input{
  width:100%; padding:.8em .9em;
  border:1px solid var(--line); background:rgba(10,10,11,.85);
  color:var(--bone); font:inherit; font-size:1.1em; letter-spacing:.1em; text-transform:uppercase;
  outline:0;
}
.vfield input::placeholder{ color:var(--txt-3); letter-spacing:.2em }
.vfield input:focus{ border-color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange) }
.vfield em{
  display:block; min-height:1.4em; margin-top:.5em;
  font-style:normal; font-size:var(--fs-xs); letter-spacing:.14em; color:var(--orange);
}

.vkeys{
  display:flex; flex-wrap:wrap; gap:.7em 1.5em; margin-bottom:2em;
  font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--txt-3);
}
.vkeys span{ display:inline-flex; align-items:center; gap:.4em }

.vstart{ display:flex; align-items:center; gap:1.6em; flex-wrap:wrap }
.vhint{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:var(--fs-xs); letter-spacing:.24em; color:var(--txt-3);
}
.vhint i{ font-style:normal; color:var(--orange); animation:vbob 2.2s ease-in-out infinite }
@keyframes vbob{ 0%,100%{ opacity:.4; transform:translateY(2px) } 50%{ opacity:1; transform:translateY(-2px) } }

/* --- classement --- */
.vboard{
  flex:0 1 26em; min-width:0; align-self:stretch; max-height:100%;
  display:flex; flex-direction:column;
  border:1px solid var(--line); background:rgba(10,10,11,.8);
}
.vboard-side{ margin-top:auto; margin-bottom:auto; max-height:min(62vh,34em) }
.vboard-h{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9em 1.1em; border-bottom:2px solid var(--orange);
  font-size:var(--fs-xs); letter-spacing:.28em; text-transform:uppercase; color:var(--bone);
}
.vboard-h b{ font-weight:400; color:var(--cyan) }
.vboard ol{ list-style:none; margin:0; padding:.4em 0; overflow-y:auto; min-height:0 }
.vboard li{
  display:grid; grid-template-columns:2.6em 1fr auto; gap:1em; align-items:center;
  padding:.55em 1.1em; border-bottom:1px solid rgba(237,231,218,.07);
  font-size:var(--fs-sm); letter-spacing:.08em;
}
.vboard li i{ font-style:normal; color:var(--txt-3); font-variant-numeric:tabular-nums }
.vboard li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt-2) }
.vboard li time{ color:var(--cyan); font-variant-numeric:tabular-nums }
.vboard li.me{ background:rgba(255,77,0,.14) }
.vboard li.me i, .vboard li.me span{ color:var(--bone) }
.vboard li.top i{ color:var(--orange) }
.vboard li.none{ display:block; color:var(--txt-3); text-align:center; padding:1.6em }

/* --- arrivee --- */
.vresult{ justify-content:center; text-align:center;
  background:linear-gradient(180deg, rgba(4,4,10,.95), rgba(4,4,10,.92)) }
.vresult-in{ display:flex; flex-direction:column; align-items:center; gap:.6em; width:min(100%,52em) }
.vfinal{
  font-family:'Archivo Black','Arial Black',sans-serif;
  font-size:clamp(56px,12vmin,170px); line-height:.85; letter-spacing:-.03em;
  color:var(--bone); font-variant-numeric:tabular-nums;
}
.vfinal-sub{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8em 2.2em;
  font-size:var(--fs-xs); letter-spacing:.24em; text-transform:uppercase; color:var(--txt-3);
}
.vfinal-sub b{ font-weight:400; color:var(--cyan); font-variant-numeric:tabular-nums }
.vsave{ margin:.5em 0 1em; font-size:var(--fs-xs); letter-spacing:.24em; text-transform:uppercase; color:var(--orange) }
.vsave.ok{ color:var(--cyan) }
.vresult .vboard{ flex:0 0 auto; width:min(100%,40em); max-height:min(38vh,24em); text-align:left }
.vresult-a{ display:flex; gap:1em; flex-wrap:wrap; justify-content:center; margin-top:1.4em }

/* --- reglages --- */
.vset{ justify-content:center; background:rgba(4,4,10,.9);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) }
.vset-in{
  width:min(100%,52em);
  border:var(--edge) solid var(--bone);
  background:linear-gradient(180deg, rgba(20,20,22,.98), rgba(10,10,11,.98));
  box-shadow:.5em .5em 0 rgba(255,77,0,.9);
  padding:clamp(16px,2.6vmin,34px);
}
.vset-h{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.8em; margin-bottom:1em; border-bottom:2px solid var(--orange);
  font-family:'Archivo Black','Arial Black',sans-serif; letter-spacing:.14em;
}
.vset-p{ font-size:var(--fs-xs); letter-spacing:.16em; color:var(--txt-3); margin-bottom:1.2em }
.vbinds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15em,1fr)); gap:.5em 1.4em }
.vbind{
  display:flex; align-items:center; justify-content:space-between; gap:1em;
  padding:.6em 0; border-bottom:1px solid rgba(237,231,218,.09);
  font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--txt-2);
}
.vbind button{
  min-width:9em; padding:.55em .8em;
  border:1px solid var(--line); background:rgba(10,10,11,.9);
  color:var(--bone); font:inherit; font-size:1em; letter-spacing:.14em; cursor:pointer;
}
.vbind button:hover{ border-color:var(--orange) }
.vbind button.wait{ border-color:var(--cyan); color:var(--cyan) }

.vrange{
  display:grid; grid-template-columns:minmax(9em,auto) 1fr 6em; gap:1.2em; align-items:center;
  margin-top:1.4em; font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--txt-2);
}
.vrange input{ width:100%; accent-color:var(--orange) }
.vrange output{ text-align:right; color:var(--cyan) }
.vset-a{ display:flex; justify-content:space-between; gap:1em; flex-wrap:wrap; margin-top:1.8em }

/* ============================================================
   ADAPTATIF
   ============================================================ */

@media (max-width:1080px){
  .vboard-side{ display:none }
  .vmodal{ padding-left:clamp(18px,5vmin,60px) }
}
@media (max-width:820px){
  .vsector{ display:none }
  .vhud-tl{ top:clamp(64px,8vmin,90px) }
  .vspeed b{ font-size:4.4em }
  .vboost{ width:min(46vw,220px) }
  .vgrip{ display:none }
  .canopy i, .canopy u{ height:18vh }
}
@media (max-width:560px){
  .vtop-a .vbtn span.kbd{ display:none }
  .vchrono b{ font-size:2em }
  .vhud-tc{ top:auto; bottom:calc(clamp(16px,3vmin,48px) + 8.5em) }
  .vbest, .vdelta{ display:none }
}