/* ==========================================================================
   La Grande Bataille — feuille de style unique (Static SSR, sans framework)
   Breakpoints : desktop ≥ 1200px · tablette 768–1199px · mobile < 768px
   ========================================================================== */

/* ---------- Polices (auto-hébergées) ---------- */
@font-face { font-family: "Roundo"; src: url("../fonts/roundo-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roundo"; src: url("../fonts/roundo-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roundo"; src: url("../fonts/roundo-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Staatliches"; src: url("../fonts/staatliches-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Panchang"; src: url("../fonts/panchang-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
    --purple: #6B42FE;
    --purple-300: #B5A0FF;
    --purple-50: #F4F1FF;
    --purple-700: #5032BF;
    --purple-900: #35217F;
    --orange: #FF6E1E;
    --orange-700: #BF5317;
    --orange-300: #FFB78F;
    --blue: #0072FF;
    --green: #00963C;
    --red: #F00000;
    --ink: #000;
    --grey: #5D5D5D;
    --line: #D9D9D9;
    --bg: #fff;

    --font: "Roundo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --display: "Staatliches", Impact, "Arial Narrow", sans-serif;
    --numbers: "Panchang", var(--font);

    --gutter: 40px;
    --radius: 30px;
    --container: 1520px;
    --ease-out: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 1199px) { :root { --gutter: 28px; } }
@media (max-width: 767px) { :root { --gutter: 16px; --radius: 24px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: 500; color: var(--ink); }
[id] { scroll-margin-top: 96px; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; top: 16px; left: 16px; z-index: 100;
    padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff;
    transform: translateY(-200%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Typographie ---------- */
.mono { font-family: var(--mono); font-size: 14px; line-height: 1.4; }
.eyebrow { font-family: var(--mono); font-size: 14px; line-height: 1.4; margin-bottom: 30px; }
.eyebrow--purple { color: var(--purple); }
.eyebrow--orange { color: var(--orange); }
.eyebrow--blue { color: var(--blue); }
.eyebrow--green { color: var(--green); }

.h1, .h2 { font-weight: 500; font-size: 60px; line-height: .95; letter-spacing: -.03em; }
.h2--wide, .h1 { max-width: 945px; }
.h2--narrow { max-width: 525px; }
.h3 { font-weight: 500; font-size: 18px; line-height: 1; letter-spacing: -.03em; }
.h3--large { font-size: 26px; line-height: 1.05; }
.lead { font-weight: 500; font-size: 20px; line-height: 1.25; margin-top: 40px; max-width: 660px; }
.lead--purple { color: var(--purple); }
.lead--orange { color: var(--orange); }
.lead--blue { color: var(--blue); }
.lead--green { color: var(--green); }
.text { font-size: 16px; line-height: 1.4; color: var(--grey); }
.text-link {
    color: var(--purple); font-weight: 500;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.text-link .arrow { display: inline-block; vertical-align: -5px; margin-left: 2px; }
.text-link:hover { text-decoration-thickness: 2px; }

@media (max-width: 1199px) {
    .h1, .h2 { font-size: 54px; }
}
@media (max-width: 767px) {
    .h1, .h2 { font-size: 48px; line-height: .95; }
    .h3--large { font-size: 22px; }
    .lead { font-size: 16px; margin-top: 30px; }
}

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 22px; border-radius: 1000px;
    font: 500 14px/1.4 var(--font); color: #fff; white-space: nowrap;
    transition: filter .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.btn .arrow { transition: transform .2s var(--ease-out); }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:hover .arrow { transform: translate(2px, -2px); }
.btn:active { transform: none; }
.btn--purple { background: var(--purple); }
.btn--blue { background: var(--blue); }
.btn--green { background: var(--green); }
.btn--orange { background: var(--orange); }
.btn--wide { min-width: 250px; }
.btn--nav { min-width: 99px; padding: 0 20px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.cta-row--center { justify-content: center; }

/* ---------- En-tête ---------- */
.site-header { position: absolute; inset: 0 0 auto; z-index: 50; }
.site-header__bar {
    max-width: var(--container); margin-inline: auto; padding: 24px var(--gutter) 0;
    display: flex; align-items: center; justify-content: space-between;
}
.site-header__logo { display: block; }
.site-header__logo .logo-mobile { display: none; }
.site-nav {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    width: max-content; height: 60px; padding: 0 24px; border-radius: 100px;
    background: rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
    display: flex; align-items: center; z-index: 60;
}
.site-nav ul { list-style: none; padding: 0; display: flex; gap: 27px; }
.site-nav a { font-weight: 500; font-size: 14px; line-height: 1.4; white-space: nowrap; transition: color .2s; }
.site-nav a:hover { color: var(--purple); }
.site-header__burger, .mobile-menu { display: none; }

@media (max-width: 859px) {
    .site-header {
        position: sticky; top: 0; background: #fff;
        border-radius: 0 0 20px 20px; box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    }
    .site-header__bar { height: 78px; padding: 0 16px; }
    .site-header__logo .logo-desktop { display: none; }
    .site-header__logo .logo-mobile { display: block; }
    .site-nav, .site-header__cta { display: none; }
    .site-header__burger { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; }
    .mobile-menu { padding: 30px 20px 36px; }
    .mobile-menu ul { list-style: none; padding: 0; display: grid; gap: 40px; margin-bottom: 60px; }
    .mobile-menu a:not(.btn) { font-weight: 500; font-size: 14px; }
    .site-header[data-menu="open"] .mobile-menu { display: block; }
    .site-header[data-menu="open"] { max-height: 100dvh; overflow-y: auto; }
}

/* ---------- Sections génériques ---------- */
.section { padding-bottom: 60px; }
.section__rule { border-top: 1px solid var(--line); padding-top: 70px; }
.intro { margin-bottom: 88px; }
.intro--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro--center .lead { max-width: 745px; }
.intro--asso .lead { max-width: 865px; }
.intro .cta-row { margin-top: 40px; }

.media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--purple-50); }
.media img { width: 100%; height: 100%; object-fit: cover; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.split__text { padding-top: 30px; }
.split__text .h2 { margin-top: 0; }
.split__text > .h3--large + .prose,
.split__text > .h3--large + .numbered { margin-top: 30px; }
.split__text > .prose + .h3--large,
.split__text > table + .h3--large,
.split__text > .numbered + .h3--large { margin-top: 60px; }
.h3--spaced { margin: 50px 0 20px; }

@media (max-width: 1199px) {
    .split { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 767px) {
    .section { padding-bottom: 50px; }
    .section__rule { padding-top: 50px; }
    .intro { margin-bottom: 60px; }
}

/* Listes numérotées (Règles, Asso…) */
.numbered { list-style: none; padding: 0; margin-top: 50px; }
.numbered li { display: flex; gap: 30px; border-top: 1px solid var(--line); padding: 11px 0 29px; color: var(--grey); }
.numbered__n { flex: none; font-weight: 700; color: var(--ink); }
.numbered--dark li { color: var(--ink); }
.numbered--dark .numbered__n { color: var(--grey); }
.numbered--compact { margin-top: 10px; }
.numbered--large li { font-size: 18px; line-height: 1.45; padding: 18px 0 30px; }
.numbered--large { max-width: 945px; }

/* ---------- Hero ---------- */
.hero { padding-top: 88px; }
.hero__heading { display: flex; flex-direction: column; align-items: center; text-align: center; font-weight: 400; }
.hero__eyebrow { margin-bottom: 14px; }
.hero__title {
    display: flex; flex-direction: column; align-items: center;
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(75px, 10.77vw, 155px); line-height: .85; letter-spacing: -.031em;
}
.hero__line--purple { color: var(--purple); }
.hero__lead {
    max-width: 614px; margin: 72px auto 0; text-align: center;
    font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--purple);
}
.hero__stage {
    --u: calc(100cqw / 1345);
    position: relative; container-type: inline-size; isolation: isolate;
    aspect-ratio: 1345 / 811; margin-top: 0;
    border-radius: var(--radius); overflow: hidden; background: var(--purple-300);
}
.hero__bg { position: absolute; left: 0; top: calc(-69 * var(--u)); width: 100%; height: calc(950 * var(--u)); object-fit: cover; }
.hero__layer {
    position: absolute;
    left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
    rotate: var(--r, 0deg);
}
.hero__crop { position: absolute; inset: 0; overflow: hidden; }
.hero__layer img {
    position: absolute; max-width: none;
    left: calc(var(--ix, 0) * var(--u)); top: calc(var(--iy, 0) * var(--u));
    width: calc(var(--iw, var(--w)) * var(--u)); height: calc(var(--ih, var(--h)) * var(--u));
}
.hero__layer--purple { --i: 0; --x: 728; --y: -89; --w: 491; --h: 624; --r: 15.16deg; --ix: -296; --iw: 787; --ih: 624; }
.hero__layer--orange { --i: 1; --x: 113; --y: 100; --w: 449; --h: 452; --r: -15.45deg; --ix: -194; --iw: 643; --ih: 454; }
.hero__layer--red { --i: 2; --x: -107; --y: 316; --w: 854; --h: 563; scale: -1 1; }
.hero__layer--teal { --i: 3; --x: 827; --y: 161; --w: 447; --h: 795; --ix: -349; --iy: -38; --iw: 1180; --ih: 833; }
.hero__layer--phone { --i: 4; --x: 412; --y: 4; --w: 520; --h: 1025; }
.hero__layer--yellow { --i: 5; --x: 694; --y: 399; --w: 407; --h: 482; --ix: -159; --iw: 725; --ih: 482; }
.hero__layer--pink { --i: 6; --x: 221; --y: 484; --w: 483; --h: 404; }

@media (max-width: 859px) {
    .hero { padding-top: 43px; }
}
@media (max-width: 767px) {
    .hero__title { line-height: .8; letter-spacing: -.0225em; }
    .hero__lead { max-width: 280px; margin-top: 47px; font-size: 16px; }
    .hero__stage { --u: calc(100cqw / 343); aspect-ratio: 343 / 401; margin-top: 20px; }
    .hero__bg { top: 0; height: 100%; }
    .hero__layer--purple { --x: 192; --y: 83.4; --w: 162; --h: 206; --ix: -98; --iw: 260; --ih: 206; }
    .hero__layer--orange { --x: -7.3; --y: 135.4; --w: 148; --h: 149; --ix: -64; --iw: 212; --ih: 150; }
    .hero__layer--red { --x: -83; --y: 217; --w: 282; --h: 186; }
    .hero__layer--teal { --x: 223; --y: 175; --w: 148; --h: 262; --ix: -115; --iy: -12; --iw: 389; --ih: 275; }
    .hero__layer--phone { --x: 67.8; --y: 44; --w: 206; --h: 407; }
    .hero__layer--yellow { --x: 171; --y: 255; --w: 134; --h: 159; --ix: -53; --iw: 239; --ih: 159; }
    .hero__layer--pink { --x: 35; --y: 282; --w: 159; --h: 133; }
}

/* ---------- Courses (logos) ---------- */
.races { padding: 66px 0 70px; }
.races__title {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px;
    font-weight: 500; font-size: 26px; line-height: 1.05; letter-spacing: -.03em; color: var(--grey); text-align: center;
}
.races__uci { width: 103px; height: 40px; }
.races__grid {
    list-style: none; padding: 0; margin: 57px auto 0; max-width: 990px;
    display: flex; flex-wrap: wrap; justify-content: center; column-gap: 60px; row-gap: 20px;
}
.races__item { display: flex; align-items: center; justify-content: center; width: 150px; height: 118px; transition: transform .25s var(--ease-out), opacity .25s; }
.races__item img { width: auto; max-width: 155px; height: auto; max-height: 118px; }
.races__item:hover { transform: translateY(-3px) scale(1.04); }

@media (max-width: 767px) {
    .races { padding: 60px 0 60px; }
    .races__title { flex-direction: column; gap: 14px; font-size: 22px; }
    .races__grid { display: grid; grid-template-columns: repeat(2, 150px); column-gap: 20px; row-gap: 16px; margin-top: 60px; }
}

/* ---------- App LGB ---------- */
#app .section__rule { padding-top: 50px; }
.media--app { aspect-ratio: 1345 / 805; }
.app-card {
    position: relative; margin-top: 30px; height: 400px;
    display: flex; justify-content: center; align-items: center; gap: 60px;
    background: var(--purple); color: #fff; border-radius: var(--radius); overflow: hidden;
}
.app-card__col { display: flex; flex-direction: column; align-items: center; flex: none; }
.app-card__col--store { width: 208px; }
.app-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.app-card__link:focus-visible { outline: none; }
.app-card__link:focus-visible::after { outline: 3px solid #fff; outline-offset: -6px; }
.app-card__play { width: 208px; height: 49px; }
.app-card__icons { display: flex; align-items: flex-start; gap: 30px; margin-top: 16px; }
.app-card__www { position: relative; width: 107px; height: 88px; }
.app-card__www img { position: absolute; left: 27px; top: 8px; width: 80px; height: 80px; }
.app-card__www-badge {
    position: absolute; left: 0; top: 0; z-index: 1; width: 52px; height: 38px;
    display: grid; place-items: center; background: #fff; border-radius: 5px; rotate: -13.1deg;
    font-family: var(--mono); font-size: 20.27px; line-height: 1; color: var(--purple);
}
.app-card__android { width: 70px; height: 83px; margin-top: 2px; }
.app-card__label {
    margin-top: 39px; text-align: center;
    font-family: var(--mono); font-size: 25px; line-height: 1.1; letter-spacing: -.01em; color: #fff;
}
.app-card__col--qr { width: 192px; transition: transform .25s var(--ease-out); }
.app-card:hover .app-card__col--qr { transform: translateY(-3px); }
.app-card__col--qr .app-card__label { margin-top: 40px; }
.app-card__qr {
    display: grid; place-items: center; width: 150px; height: 150px; border-radius: 20.27px;
    background: linear-gradient(180deg, var(--purple) 0%, var(--purple-700) 50%, var(--purple-900) 100%);
}
.app-card__qr-inner { position: relative; width: 127px; height: 127px; border-radius: 8.7px; overflow: hidden; background: #fff; }
.app-card__qr-inner img { position: absolute; left: -8px; top: -8px; width: 142px; height: 142px; max-width: none; image-rendering: pixelated; }
.app-card__phone { align-self: flex-start; flex: none; width: 375px; height: 360px; margin-top: 40px; overflow: hidden; }
.app-card__phone img { width: 100%; height: auto; }

@media (max-width: 1099px) {
    .app-card { gap: 32px; }
    .app-card__phone { width: 300px; }
}
@media (max-width: 767px) {
    #app .h2 { max-width: 330px; }
    .media--app { aspect-ratio: 343 / 600; margin-top: -8px; }
    .app-card { flex-direction: column; justify-content: flex-start; height: auto; gap: 0; padding-top: 40px; margin-top: 34px; }
    .app-card__col--qr { display: none; }
    .app-card__col--store { width: 100%; }
    .app-card__play { width: 187px; height: 44px; }
    .app-card__icons { gap: 27px; margin-top: 22px; }
    .app-card__www { width: 96px; height: 79px; }
    .app-card__www img { left: 25px; top: 6px; width: 72px; height: 72px; }
    .app-card__www-badge { width: 47px; height: 34px; font-size: 18.25px; }
    .app-card__android { width: 63px; height: 75px; }
    .app-card__label { margin-top: 22px; font-size: 22.5px; }
    .app-card__phone { align-self: center; width: 279px; height: 265px; margin-top: 60px; }
}

/* ---------- Cycling Fantasy ---------- */
#fantasy .section__rule { padding-top: 80px; }
.features { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature { border-top: 1px solid var(--line); padding: 40px 20px 0 0; }
.feature__icon { width: 66px; height: 66px; margin-bottom: 27px; }
.feature .h3 { margin-bottom: 20px; }
.media--helicopter { margin-top: 80px; aspect-ratio: 1345 / 620; }

@media (max-width: 1199px) {
    .features { grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
}
@media (max-width: 767px) {
    .features { grid-template-columns: 1fr; gap: 0; }
    .feature { padding: 40px 0 40px; }
    .feature__icon { margin-bottom: 23px; }
    .media--helicopter { margin-top: 60px; aspect-ratio: 343 / 600; }
}

/* ---------- Règles + témoignage ---------- */
#regles .split__text .lead { max-width: 583px; }
.media--rules { aspect-ratio: 663 / 802; }
.media--rules img { object-position: 28% 50%; }
.testimonial { margin-top: 60px; align-items: stretch; }
.media--testimonial { aspect-ratio: 663 / 720; }
.testimonial__body { display: flex; flex-direction: column; justify-content: center; padding: 30px 0 30px 50px; }
.testimonial__quote p { font-size: 40px; line-height: 1.05; letter-spacing: -.03em; }
.testimonial__body figcaption { display: flex; flex-direction: column; gap: 8px; margin-top: 50px; }
.testimonial__fan { color: var(--red); }

@media (max-width: 1199px) {
    .media--rules { aspect-ratio: 4 / 3; }
    .media--testimonial { aspect-ratio: 4 / 3; }
    .testimonial__body { padding: 40px 0 0; }
    .testimonial__quote p { font-size: 38px; }
}
@media (max-width: 767px) {
    .media--rules { aspect-ratio: 343 / 627; }
    .media--rules img { object-position: 50% 50%; }
    .media--testimonial { aspect-ratio: 343 / 600; }
    .testimonial { margin-top: 30px; gap: 50px; }
    .testimonial__body { padding: 30px 16px 0; }
    .testimonial__quote p { font-size: 32px; }
    .testimonial__body figcaption { margin-top: 40px; }
}

/* ---------- Association ---------- */
.split--asso .media--team { order: 2; aspect-ratio: 1 / 1; }
.split__text--asso { padding-top: 50px; }
.split__text--asso .text { margin-top: 40px; }

@media (max-width: 1199px) {
    .split--asso .media--team { order: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
    .split--asso .media--team { aspect-ratio: 343 / 600; }
    .split--asso { gap: 50px; }
}

/* ---------- Roadmap ---------- */
.intro--roadmap { margin-bottom: 49px; }
.intro--roadmap .lead { margin-top: 80px; }
.roadmap { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.roadmap__item { border-top: 1px solid var(--line); padding: 51px 30px 0 0; }
.roadmap__num { display: block; font-family: var(--numbers); font-weight: 500; font-size: 80px; line-height: 1; letter-spacing: -.04em; }
.roadmap__num--1 { color: var(--orange-700); }
.roadmap__num--2 { color: var(--orange); }
.roadmap__num--3 { color: var(--orange-300); }
.roadmap__card { margin-top: 39px; aspect-ratio: 405 / 300; border-radius: var(--radius); overflow: hidden; background: var(--orange); }
.roadmap__card img { width: 100%; height: 100%; object-fit: cover; }
.roadmap__item .h3 { margin-top: 21px; }
.roadmap__item .text { margin-top: 20px; }
.media--road { margin-top: 80px; aspect-ratio: 1345 / 745; }

@media (max-width: 1199px) {
    .roadmap__num { font-size: 64px; }
    .roadmap__item { padding-right: 0; }
}
@media (max-width: 767px) {
    .intro--roadmap { text-align: center; display: flex; flex-direction: column; align-items: center; }
    .intro--roadmap .lead { margin-top: 30px; }
    .roadmap { grid-template-columns: 1fr; gap: 50px; }
    .roadmap__item { padding-top: 40px; }
    .cta-row--roadmap { justify-content: center; }
    .media--road { margin-top: 50px; aspect-ratio: 343 / 627; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 945px; margin-inline: auto; border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); }
.faq__question {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 22px 0; cursor: pointer; list-style: none;
    font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.01em;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--purple-50); transition: background .2s, rotate .3s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--purple); border-radius: 2px; }
.faq__icon::after { rotate: 90deg; transition: rotate .3s var(--ease-out); }
.faq__item[open] .faq__icon { background: var(--purple); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: #fff; }
.faq__item[open] .faq__icon::after { rotate: 0deg; }
.faq__question:hover { color: var(--purple); }
.faq__answer { padding: 0 52px 26px 0; color: var(--grey); max-width: 820px; }
.faq__answer .text-link { display: inline-block; margin-top: 12px; }

@media (max-width: 767px) {
    .faq__question { font-size: 18px; padding: 18px 0; }
    .faq__answer { padding-right: 0; }
}

/* ---------- Contact + dégradé de fin de page ---------- */
.contact .intro { margin-bottom: 80px; }
.contact .lead { margin-top: 40px; }
.contact .intro .btn { margin-top: 40px; }
.media--contact { aspect-ratio: 1345 / 745; z-index: 1; }
.page-end { position: relative; }
.contact { position: relative; padding-bottom: 50px; }
/* Le fond violet du footer monte en dégradé derrière la seconde moitié de l'illustration. */
.contact::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
    height: calc((min(100vw, var(--container)) - 2 * var(--gutter)) * 745 / 1345 * .83 + 50px);
    background: linear-gradient(180deg, rgba(107, 66, 254, 0) 0%, var(--purple) calc(100% - 18px));
}
.page-end { isolation: isolate; }

@media (max-width: 767px) {
    .contact .intro { margin-bottom: 80px; }
    .media--contact { aspect-ratio: 343 / 600; }
    .contact::after { height: calc((100vw - 32px) * 600 / 343 * .83 + 50px); }
}

/* ---------- Pied de page ---------- */
.site-footer { background: var(--purple); color: #fff; }
.site-footer__inner { border-top: 1px solid var(--line); padding: 40px 0; }
.site-footer__logo img { width: 100%; height: auto; }
.site-footer__nav { margin-top: 81px; display: grid; gap: 23px; }
.site-footer__nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 25px; }
.site-footer__nav a { font-weight: 500; font-size: 14px; line-height: 1.4; }
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom { display: flex; align-items: center; gap: 10px; margin-top: 104px; }
.site-footer__bottom p:first-child { margin-right: auto; }
.site-footer__bottom p span { margin-left: 10px; }
.site-footer__symbol { width: 40px; height: 40px; }

@media (max-width: 767px) {
    .site-footer__inner { padding-top: 30px; }
    .site-footer__nav { margin-top: 60px; gap: 20px; }
    .site-footer__nav ul { flex-direction: column; gap: 20px; }
    .site-footer__bottom {
        display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
        column-gap: 10px; row-gap: 0; align-items: start; margin-top: 60px;
    }
    .site-footer__symbol { grid-row: 1 / 3; grid-column: 1; }
    .site-footer__bottom p:first-child { margin-right: 0; }
    .site-footer__bottom p { grid-column: 2; }
}

/* ---------- Pages internes ---------- */
.page-intro { padding: 150px 0 70px; }
.page-intro .intro { margin-bottom: 0; }
.page-intro__logo { margin-top: 40px; }
.page-intro__logo img { height: 90px; width: auto; }
.breadcrumbs { color: var(--grey); font-size: 13px; }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.breadcrumbs a:hover { color: var(--purple); }
.breadcrumbs [aria-current] { color: var(--ink); }

.prose { font-size: 17px; line-height: 1.55; color: var(--grey); max-width: 720px; }
.prose p + p { margin-top: 16px; }
.prose a:not(.text-link) { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
.prose--legal { max-width: 860px; }
.prose--legal h2 { font-size: 26px; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); margin: 50px 0 16px; }
.prose--legal h2:first-child { margin-top: 0; }
.prose--legal ul { margin: 12px 0 16px; padding-left: 22px; }
.prose--legal li + li { margin-top: 6px; }
.prose--legal ul + p { margin-top: 16px; }
.legal { max-width: 945px; }
.legal__note { margin-top: 30px; }

.media--phone { display: grid; place-items: center; aspect-ratio: 663 / 802; padding: 48px; }
.media--phone img { width: auto; height: 100%; object-fit: contain; }

.points-table { width: 100%; max-width: 560px; margin-top: 24px; border-collapse: collapse; font-size: 16px; }
.points-table th { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--grey); text-align: left; padding: 0 0 10px; }
.points-table td { border-top: 1px solid var(--line); padding: 10px 0; }
.points-table td:nth-child(even) { color: var(--blue); font-weight: 500; }

.jerseys { list-style: none; padding: 0; }
.jerseys li { border-top: 1px solid var(--line); padding: 12px 0; color: var(--grey); }

.race-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.race-card {
    display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 30px;
    border-radius: var(--radius); background: var(--purple-50);
    transition: transform .25s var(--ease-out), background .25s;
}
.race-card:hover { transform: translateY(-4px); background: #EBE5FF; }
.race-card__logo { width: auto; height: 90px; max-width: 170px; object-fit: contain; object-position: left center; margin-bottom: 14px; }
.race-card__name { font-weight: 500; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.race-card__meta { color: var(--purple); font-size: 12px; }
.race-card__text { color: var(--grey); font-size: 15px; line-height: 1.45; }
.race-card--large .text-link { margin-top: auto; padding-top: 10px; }

@media (max-width: 859px) {
    .page-intro { padding-top: 50px; }
}
@media (max-width: 767px) {
    .page-intro { padding-bottom: 50px; }
    .prose { font-size: 16px; }
    .media--phone { aspect-ratio: 3 / 4; padding: 30px; }
    .race-card { padding: 24px; }
}

/* ---------- Statistiques de saison ---------- */
.stats-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-card {
    display: flex; flex-direction: column; gap: 18px; padding: 26px 28px;
    border-radius: var(--radius); background: var(--purple-50);
    transition: transform .25s var(--ease-out), background .25s;
}
.stat-card:hover { transform: translateY(-3px); background: #EBE5FF; }
.stat-card--wide { grid-column: span 2; }
.stat-card__title { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--purple); }
.stat-card__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgba(107, 66, 254, .18); }
.stat-card__number { font-family: var(--numbers); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -.04em; color: var(--purple); }
.stat-card__list { list-style: none; padding: 0; display: grid; gap: 8px; font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.stat-card__list i { font-weight: 400; color: var(--grey); }

@media (max-width: 1199px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card--wide { grid-column: auto; }
    .stat-card__number { font-size: 48px; }
}

/* ---------- Animations ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes hero-rise { from { opacity: 0; translate: 0 12%; } to { opacity: 1; translate: 0 0; } }
.hero__layer { animation: hero-rise 1s var(--ease-out) both; animation-delay: calc(150ms + var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .hero__layer { animation: none; }
    .btn, .races__item, .race-card { transition: none; }
}