.route {
  --route-largeur: 76px;      
  --route-bras: 96px;         
  --route-marge: 60px;        
  --route-carte: 500px;
  --route-carte-fond: #14151a;
  overflow: hidden;           
}
.route .titre-bloc { max-width: 14ch; margin-bottom: clamp(28px, 5vh, 56px); }

.route__piste { position: relative; isolation: isolate; }
.route__etapes { display: grid; gap: clamp(96px, 14vh, 150px); padding: 8px 0 clamp(56px, 8vh, 96px); }
.route__etape { position: relative; display: grid; }


.route__borne {
  position: absolute; z-index: 3; top: 50%;
  display: grid; place-items: center;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: #0e0f12;
  box-shadow: 0 0 0 4px #e9e6df, 0 10px 24px rgba(21, 23, 28, 0.35);
  color: #9aa0b0;
  font: 800 1.9rem/1 var(--titres);
  pointer-events: none;
}
.route__borne b { grid-area: 1 / 1; font-weight: inherit; }
.route__borne-feu {
  display: grid; place-items: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--accent); color: var(--texte-bouton);
  box-shadow: 0 0 0 10px rgba(242, 106, 31, 0.28), 0 0 34px 6px rgba(242, 106, 31, 0.55);
  will-change: opacity;
}


.route__carte {
  position: relative; z-index: 2; align-self: center;
  width: min(100%, var(--route-carte));
  padding: 22px 24px 26px;
  border: 1px solid #2a2b31; border-radius: 20px;
  background: var(--route-carte-fond); color: #ffffff;
  box-shadow: 0 18px 44px rgba(21, 23, 28, 0.22);
  will-change: transform;
}
.route__halo {
  position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 6px rgba(242, 106, 31, 0.14), 0 16px 44px rgba(242, 106, 31, 0.28);
  will-change: opacity;
}
.route__entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.route__kicker { color: var(--accent); font: 700 0.75rem/1 var(--corps); letter-spacing: 0.18em; text-transform: uppercase; }
.route__icone { flex: none; width: 30px; height: 30px; color: var(--accent); }
.route__carte h3 { font: 800 clamp(1.85rem, 3.2vw, 2.5rem)/0.98 var(--titres); letter-spacing: 0; text-transform: uppercase; }
.route__carte p { margin-top: 10px; max-width: 38ch; color: #c9cdd8; font-size: 1.0625rem; line-height: 1.5; }
.route__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }


.route__paysage {
  position: relative; height: 150px; margin: 22px -24px -26px;
  overflow: hidden; border-radius: 0 0 19px 19px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 70%);
}
.route__paysage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 62%; }


.route__fond, .route__voiture, .route__ligne { position: absolute; pointer-events: none; }
.route__fond {
  inset: 0; z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 170px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 170px), transparent 100%);
}
.route__fond svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__revele, .route__revele-fond { position: absolute; inset: 0; will-change: transform; }
.route__revele { overflow: hidden; }
.route__voiture { top: 0; left: 0; z-index: 2; width: 46px; height: 92px; margin: -46px 0 0 -23px; will-change: transform; }
.route__voiture svg { display: block; width: 100%; height: 100%; overflow: visible; }


.route__ligne { top: 0; bottom: 0; width: 0; border-left: 4px dashed var(--accent); opacity: 0.85; }
.route--route .route__ligne { display: none; }


@media (prefers-reduced-motion: no-preference) {
  .route--anime .route__borne-feu, .route--anime .route__halo { opacity: 0; }
}


.route__piste::before, .route__piste::after { content: none; }
@media (min-width: 960px) {
  .route__piste::before, .route__piste::after {
    content: ""; position: absolute; z-index: 0; width: 620px; height: 620px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 600%22 fill=%22none%22 stroke=%22%23dcd7cb%22 stroke-width=%221.6%22%3E%3Cpath d=%22M345 295Q350 300 347 305Q344 310 338 313Q331 317 326 319Q320 322 313 323Q307 325 300 324Q293 324 285 325Q277 325 269 323Q261 321 260 315Q259 310 262 305Q265 300 265 296Q264 292 265 287Q266 282 272 278Q278 275 285 273Q292 271 300 271Q308 271 314 275Q320 278 323 282Q326 286 332 289Q339 291 345 295Z%22/%3E%3Cpath d=%22M396 290Q403 300 394 310Q385 320 374 327Q364 334 353 340Q341 346 327 347Q314 349 299 351Q285 353 267 355Q249 357 235 349Q222 342 223 330Q225 317 227 309Q228 300 224 291Q220 281 225 272Q230 262 242 256Q254 249 268 244Q283 239 299 241Q316 242 326 251Q336 260 346 265Q356 270 373 275Q390 279 396 290Z%22/%3E%3Cpath d=%22M447 283Q449 300 436 314Q422 328 410 340Q397 352 379 360Q361 368 341 371Q320 373 298 380Q276 387 248 388Q219 389 206 374Q192 358 194 341Q196 324 190 312Q184 300 179 285Q173 270 184 257Q194 243 211 232Q228 221 251 214Q274 206 298 213Q322 220 337 231Q352 242 373 246Q395 249 420 258Q445 266 447 283Z%22/%3E%3Cpath d=%22M491 277Q487 300 475 319Q462 338 446 354Q430 370 404 378Q378 387 353 395Q328 403 297 415Q265 428 229 423Q194 417 182 393Q170 370 166 351Q162 332 147 316Q132 300 130 280Q129 260 143 242Q158 224 179 207Q201 190 234 184Q267 179 297 192Q326 204 349 212Q372 221 407 222Q442 224 469 239Q496 254 491 277Z%22/%3E%3Cpath d=%22M531 272Q524 300 515 324Q505 348 482 366Q458 385 427 395Q395 406 367 423Q339 441 296 455Q253 470 215 453Q177 437 164 408Q152 379 135 361Q119 342 99 321Q79 300 83 275Q87 250 102 226Q117 202 145 181Q173 159 217 160Q262 161 296 175Q331 189 365 190Q399 190 446 193Q493 196 515 221Q537 245 531 272Z%22/%3E%3Cpath d=%22M568 269Q566 300 556 329Q545 357 513 377Q480 397 449 414Q418 431 385 459Q352 488 298 496Q244 504 205 476Q167 448 147 420Q128 392 98 373Q67 354 49 327Q31 300 37 270Q43 240 56 208Q70 177 110 156Q151 134 205 142Q259 150 298 159Q337 167 385 159Q434 151 486 162Q538 172 554 205Q570 237 568 269Z%22/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .route__piste::before { top: 40px; right: -140px; }
  .route__piste::after { bottom: 60px; left: -200px; transform: rotate(80deg); }
}


@media (min-width: 960px) {
  .route__etape:nth-child(odd) { grid-template-columns: calc(50% + var(--route-bras) - var(--route-largeur) / 2 - var(--route-marge)) 1fr; }
  .route__etape:nth-child(even) { grid-template-columns: 1fr calc(50% + var(--route-bras) - var(--route-largeur) / 2 - var(--route-marge)); }
  .route__etape:nth-child(odd) .route__carte { grid-column: 1; justify-self: end; }
  .route__etape:nth-child(even) .route__carte { grid-column: 2; justify-self: start; }
  .route__etape:nth-child(odd) .route__borne { left: calc(50% + var(--route-bras)); }
  .route__etape:nth-child(even) .route__borne { left: calc(50% - var(--route-bras)); }
  .route__ligne { left: calc(50% - 2px); }
}

@media (min-width: 960px) and (max-width: 1100px) {
  .route__actions .bouton { flex: 1 1 100%; min-height: 52px; }
}


@media (max-width: 959px) {
  .route { --route-largeur: 34px; --route-bras: 20px; --route-centre: 46px; }
  .route__etapes { gap: clamp(48px, 9vh, 72px); }
  .route__etape { padding-left: 96px; }
  .route__carte { width: 100%; max-width: 560px; padding: 20px 18px 22px; }
  .route__borne { width: 46px; height: 46px; margin: -23px 0 0 -23px; font-size: 1.5rem; top: 44px; box-shadow: 0 0 0 3px #e9e6df, 0 8px 18px rgba(21, 23, 28, 0.35); }
  .route__borne-feu { box-shadow: 0 0 0 7px rgba(242, 106, 31, 0.28), 0 0 24px 4px rgba(242, 106, 31, 0.5); }
  .route__etape:nth-child(odd) .route__borne { left: calc(var(--route-centre) - var(--route-bras)); }
  .route__etape:nth-child(even) .route__borne { left: calc(var(--route-centre) + var(--route-bras)); }
  .route__voiture { width: 28px; height: 56px; margin: -28px 0 0 -14px; }
  .route__ligne { left: calc(var(--route-centre) - 2px); }
  .route__carte p { font-size: 1rem; }
  .route__paysage { margin: 20px -18px -22px; height: 130px; }
}

@media (max-width: 559px) {
  .route__actions .bouton { flex: 1 1 100%; min-height: 52px; padding: 0 14px; white-space: nowrap; }
}
@media (max-width: 400px) {
  .route { --route-centre: 42px; --route-bras: 16px; }
  .route__etape { padding-left: 88px; }
  .route__carte { padding: 18px 16px 20px; }
  .route__paysage { margin: 18px -16px -20px; }
}

@media (max-width: 359px) {
  .route { --route-largeur: 26px; --route-centre: 22px; --route-bras: 7px; }
  .route__piste { margin-left: -8px; }
  .route__etape { padding-left: 60px; }
  .route__carte { padding: 16px 14px 18px; }
  .route__borne { width: 38px; height: 38px; margin: -19px 0 0 -19px; font-size: 1.3rem; top: 38px; }
  .route__voiture { width: 24px; height: 48px; margin: -24px 0 0 -12px; }
  .route__paysage { margin: 16px -14px -18px; height: 110px; }
  .route__actions .bouton { padding: 0 12px; font-size: 0.9375rem; gap: 8px; }
}