@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;600&family=Barlow+Condensed:wght@400;700&display=swap');

/* ─── Variables ───────────────────────────────────────────── */
:root {
  --asphalt:      #1C1C1E;
  --asphalt-mid:  #252528;
  --asphalt-pale: #2E2E32;
  --panel:        #1A1A1F;
  --white-line:   #F0EFE4;
  --yellow-line:  #F5C518;
  --yellow-dim:   rgba(245,197,24,.15);
  --yellow-pale:  rgba(245,197,24,.07);
  --orange:       #E8600A;
  --orange-dim:   rgba(232,96,10,.15);
  --green-sign:   #006B3C;
  --green-pale:   rgba(0,107,60,.18);
  --red-sign:     #C0392B;
  --text:         #C8C8CC;
  --text-hi:      #F0EFE4;
  --text-dim:     #5A5A60;
  --radius:       10px;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-cond:    'Barlow Condensed', sans-serif;
}

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Body ────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--asphalt);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ─── Route centrale animée (fond) ───────────────────────── */
body::before {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background: repeating-linear-gradient(
    to bottom,
    var(--yellow-line) 0px,
    var(--yellow-line) 28px,
    transparent 28px,
    transparent 52px
  );
  opacity: .12;
  pointer-events: none;
  animation: roadScroll 1.4s linear infinite;
  z-index: 0;
}
@keyframes roadScroll { to { background-position: 0 52px; } }

/* Bandes de bas de page */
body::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--yellow-line) 0px, var(--yellow-line) 36px,
    transparent 36px, transparent 60px
  );
  opacity: .35;
  pointer-events: none;
  animation: dashScroll 1.1s linear infinite;
  z-index: 0;
}
@keyframes dashScroll { to { background-position: 60px 0; } }

/* ─── Wrap ────────────────────────────────────────────────── */
.wrap {
  max-width: 1050px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  position: relative;
  z-index: 1;
}

/* ─── HERO — panneau autoroutier ─────────────────────────── */
.hero {
  background: var(--green-sign);
  border-radius: var(--radius);
  padding: 36px 40px 32px;
  position: relative;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 8px rgba(0,107,60,.18), 0 16px 48px rgba(0,0,0,.5);
  animation: heroIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes heroIn {
  from { opacity:0; transform:translateY(-24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Bande réfléchissante */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--yellow-line) 0px, var(--yellow-line) 32px,
    rgba(255,255,255,.4) 32px, rgba(255,255,255,.4) 36px,
    var(--yellow-line) 36px, var(--yellow-line) 68px,
    transparent 68px, transparent 72px
  );
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--yellow-line) 0px, var(--yellow-line) 32px,
    rgba(255,255,255,.4) 32px, rgba(255,255,255,.4) 36px,
    var(--yellow-line) 36px, var(--yellow-line) 68px,
    transparent 68px, transparent 72px
  );
}

/* Numéro autoroutier */
.route-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  background: var(--yellow-line);
  color: #000;
  font-family: var(--font-display);
  font-size: 1.4rem;
  border-radius: 6px;
  margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
  transform: rotate(-2deg);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: #fff;
  letter-spacing: 4px;
  text-shadow: 0 3px 10px rgba(0,0,0,.4);
  margin-bottom: 10px;
  line-height: 1;
}

.hero p {
  color: rgba(255,255,255,.82);
  font-weight: 300;
  font-size: 1rem;
  max-width: 62ch;
}

/* ─── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--asphalt-mid);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 4px solid var(--yellow-line);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: cardIn .5s cubic-bezier(.22,1,.36,1) forwards;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.card:not(.hero):hover {
  border-left-color: var(--orange);
  box-shadow: 0 6px 28px rgba(232,96,10,.12), inset 0 0 40px var(--orange-dim);
  transform: translateX(4px);
}

/* Vitesse km/h — coin supérieur droit */
.card-speed {
  position: absolute;
  top: 10px; right: 14px;
  font-family: var(--font-display);
  font-size: .75rem;
  color: var(--yellow-line);
  letter-spacing: 1px;
  opacity: .45;
}

/* Stagger */
.card:nth-child(1){animation-delay:.05s}.card:nth-child(2){animation-delay:.10s}
.card:nth-child(3){animation-delay:.16s}.card:nth-child(4){animation-delay:.22s}
.card:nth-child(5){animation-delay:.28s}.card:nth-child(6){animation-delay:.34s}
.card:nth-child(7){animation-delay:.40s}.card:nth-child(8){animation-delay:.46s}
.card:nth-child(9){animation-delay:.52s}

@keyframes cardIn {
  from { opacity:0; transform:translateX(-18px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ─── Headings ────────────────────────────────────────────── */
h2 {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--yellow-line);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

p { font-weight: 300; margin-bottom: 10px; color: var(--text); }
p:last-child { margin-bottom: 0; }

/* ─── Lists ───────────────────────────────────────────────── */
ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
li {
  padding-left: 20px;
  position: relative;
  font-weight: 300;
  font-size: .97rem;
}
li::before {
  content: '▸';
  position: absolute; left: 0;
  color: var(--orange);
  font-size: .8rem;
  top: 3px;
}

/* ─── Compteur vitesse (JS-driven) ───────────────────────── */
.speedometer-wrap {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.speedometer-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.speedometer-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green-sign), var(--yellow-line), var(--orange));
  box-shadow: 0 0 8px var(--yellow-line);
  transition: width 1.3s cubic-bezier(.22,1,.36,1);
}
.speedometer-val {
  font-family: var(--font-display);
  font-size: .85rem;
  color: var(--yellow-line);
  min-width: 56px;
  text-align: right;
  letter-spacing: 1px;
}

/* ─── Panneau de signalisation (JS-injected chip) ────────── */
.sign-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-cond);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  border: 2px solid;
}
.sign-chip.green  { background: var(--green-pale); color: #4ADE80; border-color: rgba(74,222,128,.3); }
.sign-chip.yellow { background: var(--yellow-dim); color: var(--yellow-line); border-color: rgba(245,197,24,.35); }
.sign-chip.orange { background: var(--orange-dim); color: #FB923C; border-color: rgba(251,146,60,.3); }

/* ─── Scroll-to-top ───────────────────────────────────────── */
#back-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  background: var(--yellow-line);
  color: #000;
  border: none;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(245,197,24,.3);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s, box-shadow .3s;
  z-index: 100;
  transform: rotate(-2deg);
}
#back-top.visible { opacity: 1; pointer-events: auto; }
#back-top:hover   { transform: rotate(0deg) translateY(-3px); box-shadow: 0 8px 24px rgba(245,197,24,.45); }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero { padding: 28px 20px; }
  h2    { font-size: .9rem; }
}