@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --asphalt:#07111d; --panel:#0f1726; --panel-2:#142338;
  --hairline:rgba(255,255,255,.10);
  --chrome-1:#f5f7fb; --chrome-2:#dfe7f2; --chrome-3:#8ea0b7;
  --amber:#5da8ff; --amber-dim:#274d7c; --amber-glow:rgba(93,168,255,.24);
  --shadow-hard:0 18px 45px rgba(2,10,20,.45);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--asphalt); color:var(--chrome-2); font-family:'Work Sans',sans-serif; min-height:100vh; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--amber); color:#06101c;}

/* Boutons */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 22px;
  font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; font-weight:700;
  border-radius:999px; cursor:pointer; border:none; font-family:'Work Sans',sans-serif;
  transition:transform .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.05);}
.btn-discord{background:linear-gradient(135deg,#4c7dff,#2d5ddf); color:#fff; box-shadow:0 12px 28px rgba(37,88,215,.24);}
.btn-ghost{background:rgba(5,6,8,.35); color:var(--chrome-2); border:1px solid rgba(93,168,255,.45);}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber);}
.btn-truckbook{background:linear-gradient(135deg,#4cc9f0,#2a7fb8); color:#f4fbff; box-shadow:0 12px 28px rgba(42,127,184,.22);}
.btn-haulmp{background:linear-gradient(135deg,#f39c12,#c2780a); color:#1a1200; box-shadow:0 12px 28px rgba(194,120,10,.22);}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}

/* Sections */
section{position:relative; z-index:2; padding:90px 6vw; scroll-margin-top:90px;}
.section-head{max-width:700px; margin-bottom:48px;}
.eyebrow{display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:14px;}
.section-head h2{font-family:'Anton',sans-serif; font-size:clamp(30px,4.6vw,48px); text-transform:uppercase; color:var(--chrome-1);}
.section-head p{margin-top:14px; color:var(--chrome-3); line-height:1.7; font-size:15px;}

/* À propos */
.route-strip{display:flex; justify-content:center; gap:12px; margin:0 auto 52px; flex-wrap:wrap;}
.route-chip{display:flex; flex-direction:column; gap:6px; padding:16px 26px; background:#0b0d11; border:1px solid var(--hairline); border-radius:16px;}
.route-chip-value{font-weight:800; font-size:16px; color:var(--chrome-1);}
.route-chip-label{font-size:12px; color:var(--amber);}
.plates{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto;}
.plate{padding:28px 24px;}
.plate .num{display:block; font-family:'Space Mono',monospace; font-size:12px; color:var(--amber); margin-bottom:14px;}
.plate h3{font-weight:800; font-size:18px; color:var(--chrome-1); margin-bottom:10px;}
.plate p{color:var(--chrome-3); font-size:14px; line-height:1.65;}
@media (max-width:980px){.plates{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.plates{grid-template-columns:1fr;}}
.road{position:relative; max-width:760px; margin:0 auto; padding-left:38px;}
.road::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:repeating-linear-gradient(180deg,var(--amber) 0 18px,transparent 18px 32px); opacity:.55;}
.road-stop{position:relative; padding-bottom:44px;}
.road-stop:last-child{padding-bottom:0;}
.road-stop-marker{position:absolute; left:-38px; top:2px; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--chrome-1),var(--chrome-3) 70%); box-shadow:0 0 0 4px #050608, 0 0 14px var(--amber-glow); display:flex; align-items:center; justify-content:center;}
.road-stop-marker::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--amber);}
.road-pk{display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber); font-weight:700; margin-bottom:8px;}
.road-stop h3{font-weight:800; font-size:19px; color:var(--chrome-1); margin-bottom:8px;}
.road-stop p{color:var(--chrome-3); font-size:14px; line-height:1.65; max-width:520px;}

/* Carte prochain événement */
.event-card{display:none; flex-direction:column; gap:16px; background:#0b0d11; border:1px solid rgba(93,168,255,.25); border-radius:20px; padding:26px 24px; box-shadow:var(--shadow-hard); text-align:left;}
.event-card.visible{display:flex;}
.ec-label{align-self:flex-start; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:700; color:var(--amber); background:rgba(93,168,255,.1); border:1px solid rgba(93,168,255,.3); border-radius:20px; padding:6px 14px;}
.ec-slider{overflow:hidden; width:100%;}
.ec-track{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1);}
.ec-slide{flex:0 0 100%; min-width:0; display:flex; flex-direction:column; gap:10px;}
.ec-title{font-family:'Anton',sans-serif; font-size:19px; line-height:1.25; text-transform:uppercase; color:var(--chrome-1);}
.ec-desc{font-size:13px; line-height:1.65; color:var(--chrome-3);}
.ec-meta-row{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--chrome-3);}
.ec-meta-row svg{flex-shrink:0; width:15px; height:15px; color:var(--amber);}
.ec-countdown{align-self:flex-start; font-family:'Space Mono',monospace; font-weight:700; font-size:13px; background:rgba(255,255,255,.05); border:1px solid var(--hairline); border-radius:8px; padding:9px 15px; color:var(--chrome-1);}
.ec-btn{display:flex; justify-content:center; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700; background:linear-gradient(135deg,#f7fbff,#dce9f9 50%,#8fbcee); color:#0f1f33; border-radius:999px; padding:13px 18px; transition:transform .2s ease;}
.ec-btn:hover{transform:translateY(-2px);}
.ec-dots{display:flex; gap:6px; justify-content:center;}
.ec-dot{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.22); cursor:pointer;}
.ec-dot.active{background:var(--amber); transform:scale(1.25);}

/* Footer */
footer{padding:0 6vw 28px; position:relative; z-index:2;}
.footer-shell{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:18px 22px; border:1px solid var(--hairline); color:var(--chrome-3); font-size:12px; font-family:'Space Mono',monospace;}

/* Preloader */
#preloader{position:fixed; inset:0; z-index:999; background:#050608; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; transition:opacity .6s ease, visibility .6s ease;}
#preloader.hidden{opacity:0; visibility:hidden; pointer-events:none;}
.preloader-logo{font-family:'Anton',sans-serif; font-size:16px; letter-spacing:3px; color:#fff;}
.preloader-ring{width:50px; height:50px; border-radius:50%; border:2px solid rgba(255,255,255,.08); border-top-color:var(--amber); animation:spin .9s linear infinite;}
.preloader-bar{width:220px; height:3px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden;}
.preloader-bar-fill{height:100%; width:0; background:linear-gradient(90deg,var(--amber-dim),var(--amber)); transition:width .25s ease-out;}
.preloader-percent{font-family:'Space Mono',monospace; font-size:13px; color:var(--chrome-3); min-width:42px; text-align:center;}
.preloader-status{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(214,205,190,.4);}
@keyframes spin{to{transform:rotate(360deg);}}