/* Page article — Course St-Ursanne / Les Rangiers */
.rangiers-article {
  background:
    radial-gradient(circle at 78% 7%, rgba(239,23,37,.07), transparent 24%),
    var(--bg);
}
.rangiers-article .nav a[aria-current="page"] { color: #fff; }
.rangiers-article .nav a[aria-current="page"]::after { right: 0; }

.article-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 78% 35%, rgba(239,23,37,.16), transparent 29%),
    linear-gradient(135deg, #07090c 0%, #0d1117 58%, #07090c 100%);
}
.article-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,7,10,.96) 0%, rgba(5,7,10,.78) 43%, rgba(5,7,10,.28) 72%, rgba(5,7,10,.72) 100%);
}
.article-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 920px;
  height: 2px;
  right: -120px;
  top: 64%;
  transform: rotate(-7deg);
  background: linear-gradient(90deg, transparent, rgba(239,23,37,.8), transparent);
  box-shadow: 0 24px 0 rgba(255,255,255,.08), 0 -19px 0 rgba(255,255,255,.045);
}
.article-hero__grid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .26;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
}
.article-hero__layout {
  min-height: 720px;
  padding-block: 72px 76px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(390px, .82fr);
  align-items: center;
  gap: 70px;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: #8e949f;
  font-size: 11px;
  font-weight: 750;
}
.breadcrumbs a { color: #cbd0d7; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs strong { color: #fff; }
.article-overline {
  margin: 0 0 13px;
  color: #d8dbe0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.article-hero h1 { max-width: 730px; font-size: clamp(58px, 7vw, 104px); }
.article-hero__lead {
  max-width: 670px;
  margin: 28px 0 10px;
  color: #f1f2f4;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
}
.article-hero__text { max-width: 660px; margin: 0; color: var(--muted); }
.article-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.article-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 670px;
  margin: 38px 0 0;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.article-hero__meta div { padding-inline: 16px; border-right: 1px solid var(--line); }
.article-hero__meta div:first-child { padding-left: 0; }
.article-hero__meta div:last-child { border-right: 0; }
.article-hero__meta dt { color: #858c97; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.article-hero__meta dd { margin: 5px 0 0; color: #fff; font-size: 12px; font-weight: 800; }

.article-hero__visual { position: relative; min-height: 565px; }
.article-hero__photo {
  position: absolute;
  inset: 0 26px 42px 20px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 27px;
  box-shadow: 0 32px 90px rgba(0,0,0,.48);
}
.article-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.13) 45%, rgba(0,0,0,.86));
}
.article-hero__photo img { height: 100%; object-fit: cover; transform: scale(1.12); filter: saturate(.75) contrast(1.08); }
.article-hero__photo figcaption {
  position: absolute;
  z-index: 2;
  left: 25px;
  right: 115px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
}
.article-hero__photo figcaption small { color: #d0d4da; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.article-hero__photo figcaption strong { margin-top: 5px; font-size: 19px; line-height: 1.25; }
.article-hero__detail {
  position: absolute;
  z-index: 3;
  width: 198px;
  height: 142px;
  right: -4px;
  top: 32px;
  margin: 0;
  border: 6px solid #10141a;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
}
.article-hero__detail img { height: 100%; object-fit: cover; }
.article-hero__badge {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 3px;
  min-width: 190px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 17px;
  background: rgba(17,21,27,.94);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
}
.article-hero__badge strong { color: var(--red); font-size: 37px; line-height: 1; }
.article-hero__badge span { color: #d7dbe1; font-size: 10px; font-weight: 850; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; }
.article-hero__route {
  position: absolute;
  z-index: 5;
  left: -12px;
  bottom: 8px;
  width: 248px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8,10,13,.9);
  color: #dce0e5;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.article-hero__route i { flex: 1; height: 2px; position: relative; background: linear-gradient(90deg, var(--red), rgba(239,23,37,.15)); }
.article-hero__route i::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transform: translateY(-50%); box-shadow: 0 0 12px rgba(239,23,37,.8); }

.article-summary { position: relative; z-index: 4; margin-top: -26px; }
.article-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(17,21,27,.96);
  box-shadow: 0 25px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
}
.article-summary article { min-height: 90px; padding: 15px 22px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.article-summary article:last-child { border-right: 0; }
.article-summary strong { color: var(--red); font-size: 29px; line-height: 1; }
.article-summary span { margin-top: 7px; color: #aeb4bd; font-size: 11px; line-height: 1.35; }

.article-story { padding-top: 116px; }
.article-story__layout { display: grid; grid-template-columns: minmax(280px, .68fr) minmax(0, 1.32fr); gap: 82px; align-items: start; }
.article-aside { position: sticky; top: 126px; }
.article-aside h2 { font-size: clamp(38px, 4.3vw, 62px); }
.article-aside > p:not(.section-kicker) { margin: 23px 0 0; color: var(--muted); }
.article-aside__facts { display: grid; gap: 9px; margin-top: 28px; }
.article-aside__facts span { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: #bfc4cc; font-size: 11px; }
.article-aside__facts b { color: #fff; margin-right: 7px; }
.article-prose { max-width: 760px; color: #c0c5cd; font-size: 17px; line-height: 1.9; }
.article-prose p { margin: 0 0 24px; }
.article-prose__intro { color: #f4f5f6; font-size: 22px; line-height: 1.65; }
.article-prose__intro::first-letter { float: left; margin: 12px 11px 0 0; color: var(--red); font-size: 66px; font-weight: 900; line-height: .75; }
.article-prose blockquote { position: relative; margin: 42px 0; padding: 30px 35px 30px 72px; border: 1px solid rgba(239,23,37,.25); border-radius: 20px; background: linear-gradient(135deg, rgba(239,23,37,.09), rgba(255,255,255,.025)); }
.article-prose blockquote > span { position: absolute; left: 22px; top: 18px; color: var(--red); font-family: Georgia, serif; font-size: 66px; line-height: 1; }
.article-prose blockquote p { margin: 0; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.55; }

.article-timeline-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0c0f14; }
.article-timeline { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.article-timeline::before { content: ""; position: absolute; left: 50%; top: 28px; bottom: 28px; width: 1px; background: linear-gradient(transparent, rgba(239,23,37,.55), transparent); }
.article-timeline__item {
  min-height: 190px;
  padding: 27px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 22px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: linear-gradient(145deg, #141820, #0f1217);
  transition: transform .25s ease, border-color .25s ease;
}
.article-timeline__item:hover { transform: translateY(-4px); border-color: rgba(239,23,37,.42); }
.article-timeline__item time { color: var(--red); font-size: 28px; font-weight: 950; letter-spacing: -.04em; }
.article-timeline__item span { color: #9097a1; font-size: 9px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.article-timeline__item h3 { margin: 6px 0 10px; font-size: 20px; line-height: 1.25; }
.article-timeline__item p { margin: 0; color: var(--muted); font-size: 13px; }

.article-scale-section { background: #090b0f; }
.article-scale__layout { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr); gap: 70px; align-items: center; }
.article-scale__visual { position: relative; min-height: 570px; }
.article-scale__photo { position: absolute; inset: 0; margin: 0; border: 1px solid var(--line); border-radius: 25px; box-shadow: var(--shadow); }
.article-scale__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.72)); }
.article-scale__photo img { height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); transform: scale(1.12); }
.article-scale__overlay { position: absolute; z-index: 2; left: 23px; right: 23px; bottom: 23px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; background: rgba(12,15,20,.88); backdrop-filter: blur(12px); }
.article-scale__overlay small { color: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.article-scale__overlay strong { display: block; margin-top: 5px; font-size: 17px; }
.article-scale__copy h2 { font-size: clamp(40px, 4.8vw, 67px); }
.article-scale__copy > p:not(.section-kicker) { max-width: 680px; margin: 24px 0 0; color: var(--muted); }
.article-scale__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 31px; }
.article-scale__stats article { min-height: 112px; padding: 18px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.026); }
.article-scale__stats article:last-child { grid-column: 1 / -1; }
.article-scale__stats strong { color: #fff; font-size: 28px; line-height: 1; }
.article-scale__stats span { margin-top: 7px; color: #9da4ae; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.article-drivers-section { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0f1217; }
.driver-cloud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.driver-cloud span { min-height: 83px; padding: 16px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, #151a21, #101319); color: #f5f6f7; font-size: 15px; font-weight: 850; text-align: center; transition: border-color .2s ease, transform .2s ease, color .2s ease; }
.driver-cloud span:hover { transform: translateY(-3px); border-color: rgba(239,23,37,.46); color: var(--red); }

.article-heritage-section { background: #080a0d; }
.article-heritage__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: 66px; align-items: center; }
.article-heritage__copy h2 { font-size: clamp(40px, 4.7vw, 66px); }
.article-heritage__copy > p:not(.section-kicker) { color: var(--muted); }
.article-heritage__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 29px; }
.article-heritage__gallery { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 260px 260px; gap: 12px; }
.article-heritage__gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 18px; }
.article-heritage__gallery figure:first-child { grid-row: 1 / -1; }
.article-heritage__gallery img { height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.06); transition: transform .45s ease; }
.article-heritage__gallery figure:hover img { transform: scale(1.035); }

.article-return-section { padding: 10px 0 90px; }
.article-return-panel {
  padding: 39px 42px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 27px;
  border-radius: 24px;
  background: linear-gradient(120deg, #c20f1b, #f01725);
  box-shadow: 0 25px 70px rgba(239,23,37,.19);
}
.article-return-panel__mark { width: 58px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 13px; background: rgba(255,255,255,.1); }
.article-return-panel__mark span { position: relative; width: 27px; height: 27px; }
.article-return-panel__mark span::before, .article-return-panel__mark span::after { content: ""; position: absolute; background: white; border-radius: 1px; }
.article-return-panel__mark span::before { width: 8px; height: 27px; left: 9px; }
.article-return-panel__mark span::after { width: 27px; height: 8px; top: 9px; }
.article-return-panel .section-kicker { color: rgba(255,255,255,.72); }
.article-return-panel h2 { font-size: clamp(29px, 3.3vw, 45px); line-height: 1.05; }
.article-return-panel p:not(.section-kicker) { margin: 10px 0 0; color: rgba(255,255,255,.8); }
.article-return-panel__actions { display: grid; gap: 9px; min-width: 210px; }
.article-return-panel__actions .button--ghost { border-color: rgba(255,255,255,.45); }
.article-footer-links { display: flex; gap: 22px; }
.article-footer-links a { text-decoration: none; color: #d4d7dc; }
.article-footer-links a:hover { color: #fff; }

@media (max-width: 1080px) {
  .article-hero__layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 38px; }
  .article-hero__visual { min-height: 510px; }
  .article-story__layout { gap: 55px; }
  .article-scale__layout { gap: 45px; }
  .article-heritage__layout { gap: 44px; }
  .driver-cloud { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .article-hero__layout { min-height: auto; grid-template-columns: 1fr; gap: 48px; padding-block: 58px 72px; }
  .article-hero__visual { width: min(100%, 560px); min-height: 560px; margin-inline: auto; }
  .article-summary { margin-top: -20px; }
  .article-summary__grid { grid-template-columns: repeat(2, 1fr); }
  .article-summary article:nth-child(2) { border-right: 0; }
  .article-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .article-story__layout { grid-template-columns: 1fr; gap: 46px; }
  .article-aside { position: static; }
  .article-prose { max-width: none; }
  .article-scale__layout, .article-heritage__layout { grid-template-columns: 1fr; }
  .article-scale__visual { min-height: 520px; }
  .article-heritage__gallery { max-width: 650px; width: 100%; margin-inline: auto; }
  .article-return-panel { grid-template-columns: auto 1fr; }
  .article-return-panel__actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; width: 100%; }
}

@media (max-width: 640px) {
  .article-hero__layout { padding-top: 44px; }
  .article-hero h1 { font-size: clamp(50px, 15vw, 72px); }
  .article-hero__lead { font-size: 17px; }
  .article-hero__actions .button { width: 100%; }
  .article-hero__meta { grid-template-columns: 1fr; padding: 5px 0; }
  .article-hero__meta div { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .article-hero__meta div:last-child { border-bottom: 0; }
  .article-hero__visual { min-height: 450px; }
  .article-hero__photo { inset: 0 0 38px; }
  .article-hero__detail { width: 145px; height: 104px; right: -3px; top: 18px; border-width: 5px; }
  .article-hero__badge { right: 7px; bottom: 2px; min-width: 166px; padding: 14px 15px; }
  .article-hero__badge strong { font-size: 30px; }
  .article-hero__route { left: 7px; bottom: 4px; width: 205px; padding: 9px 11px; font-size: 7.5px; }
  .article-hero__photo figcaption { left: 18px; right: 18px; bottom: 72px; }
  .article-summary__grid { padding: 9px; }
  .article-summary article { min-height: 96px; padding: 14px; }
  .article-summary strong { font-size: 24px; }
  .article-summary span { font-size: 9.5px; }
  .article-story { padding-top: 82px; }
  .article-prose { font-size: 15.5px; line-height: 1.82; }
  .article-prose__intro { font-size: 19px; }
  .article-prose blockquote { padding: 66px 22px 24px; }
  .article-prose blockquote > span { left: 20px; top: 12px; }
  .article-prose blockquote p { font-size: 17px; }
  .article-timeline { grid-template-columns: 1fr; }
  .article-timeline::before { display: none; }
  .article-timeline__item { min-height: auto; grid-template-columns: 72px 1fr; padding: 21px; }
  .article-timeline__item time { font-size: 23px; }
  .article-scale__visual { min-height: 430px; }
  .article-scale__stats { grid-template-columns: 1fr; }
  .article-scale__stats article:last-child { grid-column: auto; }
  .driver-cloud { grid-template-columns: repeat(2, 1fr); }
  .driver-cloud span { min-height: 72px; font-size: 13px; }
  .article-heritage__gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 270px 180px; }
  .article-heritage__gallery figure:first-child { grid-column: 1 / -1; grid-row: auto; }
  .article-return-panel { padding: 29px 23px; grid-template-columns: 1fr; }
  .article-return-panel__mark { display: none; }
  .article-return-panel__actions { grid-column: auto; grid-template-columns: 1fr; min-width: 0; }
  .article-footer-links { flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
}

@media (max-width: 420px) {
  .article-hero__visual { min-height: 410px; }
  .article-hero__detail { display: none; }
  .article-hero__photo figcaption { bottom: 78px; }
  .article-hero__route { width: 184px; }
  .article-summary__grid { grid-template-columns: 1fr; }
  .article-summary article { border-right: 0; border-bottom: 1px solid var(--line); }
  .article-summary article:last-child { border-bottom: 0; }
  .article-heritage__gallery { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 220px); }
  .article-heritage__gallery figure:first-child { grid-column: auto; }
}
.article-heritage__poster { background: linear-gradient(145deg, #e8e3d8, #beb6a5); }
.article-heritage__poster img { object-fit: contain; padding: 18px; }