/* Récap de saison (« Wrapped ») : un écran par stat, défilement vertical aimanté */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #0a0c0f; color: #fff; font-family: 'Barlow', system-ui, sans-serif; overflow: hidden; }
a { color: inherit; }

.rc__barre { position: fixed; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: linear-gradient(#0a0c0f 60%, rgba(10, 12, 15, 0)); }
.rc__logo img { display: block; height: 34px; }
.rc__saisons { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.rc__saisons::-webkit-scrollbar { display: none; }
.rc__saisons a { flex-shrink: 0; padding: 6px 12px; border: 1px solid #2a2e36; border-radius: 999px; color: #9da1a8; font-weight: 600; font-size: .85rem; text-decoration: none; }
.rc__saisons a[aria-current] { background: #daf37c; border-color: #daf37c; color: #0a0c0f; }
.rc__fermer { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #2a2e36; border-radius: 50%; font-size: 1.4rem; text-decoration: none; }

.rc__points { position: fixed; z-index: 10; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
.rc__points span { width: 5px; height: 5px; border-radius: 3px; background: #3a3f48; transition: height .25s, background .25s; }
.rc__points span.is-actif { height: 18px; background: #daf37c; }

.rc { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.rc::-webkit-scrollbar { display: none; }
.rc__ecran { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 80px 28px 48px; scroll-snap-align: start; scroll-snap-stop: always; text-align: center; overflow: hidden; isolation: isolate; }
/* Fond : halo + motif différent d'un écran à l'autre */
.rc__ecran::before { content: ''; position: absolute; z-index: -1; width: 120vmax; height: 120vmax; border-radius: 50%; background: radial-gradient(circle, rgba(218, 243, 124, .14), rgba(218, 243, 124, 0) 60%); }
.rc__ecran:nth-child(odd)::before { top: -60vmax; right: -60vmax; }
.rc__ecran:nth-child(even)::before { bottom: -60vmax; left: -60vmax; }
.rc__ecran--heros, .rc__ecran--intro { background: #daf37c; color: #0a0c0f; }
.rc__ecran--heros::before, .rc__ecran--intro::before { background: radial-gradient(circle, rgba(10, 12, 15, .12), rgba(10, 12, 15, 0) 60%); }

/* Apparition */
.rc__ecran > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rc__ecran.is-vu > * { opacity: 1; transform: none; }
.rc__ecran.is-vu > :nth-child(2) { transition-delay: .12s; }
.rc__ecran.is-vu > :nth-child(3) { transition-delay: .24s; }
.rc__ecran.is-vu > :nth-child(4) { transition-delay: .36s; }
.rc__ecran.is-vu > :nth-child(5) { transition-delay: .48s; }

.rc__sur { margin: 0 0 14px; font-weight: 700; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: #daf37c; }
.rc__ecran--heros .rc__sur, .rc__ecran--intro .rc__sur { color: #0a0c0f; opacity: .7; }
.rc h1, .rc__nom { margin: 0; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; text-transform: uppercase; line-height: .9; }
.rc h1 { font-size: clamp(3.6rem, 16vw, 7.5rem); }
.rc h1 span, .rc__nom span { -webkit-text-stroke: 2px var(--trait, #fff); color: transparent; }
.rc__ecran--heros, .rc__ecran--intro { --trait: #0a0c0f; }
.rc__nom { font-size: clamp(3rem, 14vw, 6rem); overflow-wrap: anywhere; }
.rc__geant { margin: 0; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: clamp(7rem, 42vw, 15rem); line-height: .85; color: #daf37c; font-variant-numeric: tabular-nums; }
.rc__texte { margin: 16px auto 0; max-width: 28ch; font-size: clamp(1.15rem, 4.6vw, 1.5rem); font-weight: 600; line-height: 1.35; }
.rc__texte strong { color: #daf37c; font-weight: 800; }
.rc__ecran--heros .rc__texte strong { color: #0a0c0f; text-decoration: underline; text-decoration-thickness: 3px; }
.rc__petit { margin: 14px 0 0; color: #9da1a8; font-size: .95rem; }
.rc__scroll { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .85rem; opacity: .7; animation: rc-rebond 1.6s ease-in-out infinite; }
@keyframes rc-rebond { 50% { transform: translateY(6px); } }

.rc__vnd { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.rc__vnd span { padding: 8px 14px; border: 1px solid #2a2e36; border-radius: 12px; font-weight: 600; color: #d4d6da; }
.rc__vnd b { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 1.5rem; margin-right: 4px; color: #fff; }
.rc__vnd .v b { color: #daf37c; }
.rc__vnd .d b { color: #e38585; }

.rc__maillot { display: grid; place-items: center; width: 150px; height: 160px; margin-bottom: 14px; background: #0a0c0f; color: #daf37c; clip-path: polygon(22% 0, 38% 6%, 62% 6%, 78% 0, 100% 18%, 88% 36%, 82% 32%, 82% 100%, 18% 100%, 18% 32%, 12% 36%, 0 18%); }
.rc__maillot span { margin-top: 14px; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 4.2rem; }
.rc__lien { margin-top: 20px; font-weight: 800; text-decoration: none; border-bottom: 2px solid currentColor; }

.rc__top { width: 100%; max-width: 440px; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: rang; }
.rc__top li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid #1d2026; text-align: left; counter-increment: rang; }
.rc__top li::before { content: counter(rang); grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #1d2026; font-weight: 800; }
.rc__top li:first-child::before { background: #daf37c; color: #0a0c0f; }
.rc__top-nom { grid-column: 2; font-weight: 700; font-size: 1.1rem; }
.rc__top-nom small { color: #6b6f77; }
.rc__top b { grid-column: 3; grid-row: 1 / 3; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 2rem; color: #daf37c; }
.rc__top-barre { grid-column: 2; grid-row: 2; height: 5px; border-radius: 3px; background: #1d2026; overflow: hidden; }
.rc__top-barre span { display: block; height: 100%; width: 0; background: #daf37c; border-radius: inherit; transition: width 1s ease .3s; }
.rc__ecran.is-vu .rc__top-barre span { width: var(--l); }

.rc__match { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.rc__match img { width: clamp(64px, 20vw, 100px); height: clamp(64px, 20vw, 100px); object-fit: contain; }
.rc__match b { font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: clamp(4rem, 18vw, 7rem); line-height: 1; color: #daf37c; font-variant-numeric: tabular-nums; }
.rc__match b i { font-style: normal; color: #3a3f48; margin: 0 .05em; }
.rc__legende { margin: 10px 0 0; color: #9da1a8; font-weight: 600; }

.rc__cartons { width: 100%; max-width: 440px; margin: 0; padding: 0; list-style: none; }
.rc__cartons li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #1d2026; text-align: left; }
.rc__cartons b { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #daf37c; color: #0a0c0f; font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif; font-weight: 900; font-size: 1.9rem; }
.rc__cartons span { color: #9da1a8; }
.rc__cartons strong { color: #fff; font-size: 1.1rem; }

.rc__blason { width: 110px; margin-bottom: 18px; }
.rc__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.rc__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid #daf37c; border-radius: 12px; background: #daf37c; color: #0a0c0f; font: 700 1rem 'Barlow', system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.rc__btn i { font-size: 1.25rem; }
.rc__btn--ghost { background: transparent; color: #fff; border-color: #2a2e36; }
a:focus-visible, button:focus-visible { outline: 2px solid #daf37c; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .rc { scroll-behavior: auto; }
    .rc__ecran > *, .rc__top-barre span { transition: none; }
    .rc__scroll { animation: none; }
}