/* ====== Couleurs du TTB (maillot rouge, écusson noir & jaune) ====== */
:root {
  --black: #0b0b0b;
  --black-2: #151515;
  --black-3: #222;
  --red: #d7141f;
  --red-dark: #a00d16;
  --yellow: #f6b70e;
  --yellow-2: #ffd34d;
  --ink: #111;
  --muted: #6b6b6b;
  --line: #e7e3da;
  --bg: #ffffff;
  --tint: #f7f3ea;
  --win: #16a34a;
  --loss: #d7141f;
  --radius: 16px;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --brush: "Permanent Marker", "Comic Sans MS", cursive;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='56' viewBox='0 0 80 56'%3E%3Cpath d='M0 46 40 18l40 28' stroke='%23f6b70e' stroke-width='10' fill='none'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

/* Typo "pinceau" façon affiche */
.brush { font-family: var(--brush); color: var(--red); font-size: 1.15rem; margin: 0 0 .3rem; transform: rotate(-2deg); transform-origin: left; display: inline-block; }
.brush.center { display: block; text-align: center; transform: none; }
.brush--tag { background: var(--red); color: #fff; padding: .35rem 1rem .25rem; clip-path: polygon(2% 8%, 100% 0, 97% 92%, 0 100%); font-size: 1.2rem; }
.brush--dark { color: var(--black); }

/* ====== Boutons ====== */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.1rem; letter-spacing: .02em; text-decoration: none; border: 2px solid transparent; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; white-space: nowrap; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); padding-inline: 1.9rem; }
.btn:hover { transform: translateY(-2px); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: #ee1b27; box-shadow: 0 10px 30px -10px var(--red); }
.btn--ghost { background: var(--yellow); color: var(--black); }
.btn--ghost:hover { background: var(--yellow-2); }
.btn--dark { background: var(--black); color: var(--yellow); }
.btn--sm { padding: .5rem 1.5rem; font-size: 1rem; }

/* ====== Header ====== */
.header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s, padding .3s; padding: 16px 0; color: #fff; }
/* Le fond flouté est porté par ::before : un backdrop-filter sur .header lui-même ferait du header le cadre
   de référence du menu mobile (position: fixed), qui serait alors limité à la hauteur de l'en-tête. */
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 11, 11, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .3s; pointer-events: none; }
.header.is-scrolled::before { opacity: 1; }
.header.is-scrolled { padding: 8px 0; box-shadow: 0 2px 0 var(--red); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; }
.logo__crest { width: auto; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); transition: transform .5s var(--ease); }
.logo:hover .logo__crest { transform: rotate(-8deg) scale(1.06); }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__text b { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 2rem; color: var(--red); text-shadow: 2px 2px 0 var(--yellow); letter-spacing: .02em; }
.logo__text small { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; opacity: .85; margin-top: 2px; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a:not(.btn) { text-decoration: none; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; letter-spacing: .03em; position: relative; opacity: .85; transition: opacity .2s, color .2s; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--yellow); transform: scaleX(0) skewX(-20deg); transition: transform .3s var(--ease); }
.nav a:not(.btn):hover, .nav a.is-active { opacity: 1; color: var(--yellow); }
.nav a:not(.btn):hover::after, .nav a.is-active::after { transform: scaleX(1) skewX(-20deg); }
.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 3px; background: #fff; transition: transform .3s var(--ease), top .3s; }
.burger span:first-child { top: 16px; } .burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
@media (max-width: 960px) {
  .burger { display: block; }
  .nav { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; background: var(--black) var(--chevrons) center bottom / 120px repeat-x; flex-direction: column; justify-content: flex-start; justify-content: safe center; gap: clamp(.6rem, 2.2vh, 1.4rem); padding: calc(80px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; clip-path: circle(0 at calc(100% - 38px) 38px); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s .6s; z-index: -1; }
  .nav a:not(.btn) { font-size: clamp(1.7rem, 5.2vh, 2.4rem); font-style: italic; line-height: 1.1; }
  .nav .btn { margin-top: .6rem; }
  .nav.is-open { clip-path: circle(150% at calc(100% - 38px) 38px); visibility: visible; transition: clip-path .6s var(--ease), visibility 0s; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}

/* ====== Hero ====== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--black); color: #fff; overflow: hidden; padding: 120px 0 60px; display: flex; flex-direction: column; justify-content: center; }
.hero::before { content: ""; position: absolute; right: -10%; top: 0; bottom: 0; width: 55%; background: linear-gradient(160deg, var(--yellow), #e09b00); clip-path: polygon(30% 0, 100% 0, 100% 100%, 3% 100%); opacity: .95; }
.hero::after { content: ""; position: absolute; right: -10%; top: 0; bottom: 0; width: 55%; background: var(--red); clip-path: polygon(27% 0, 30% 0, 3% 100%, 0 100%); }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__chevrons { position: absolute; left: -5%; bottom: -10%; width: 50%; height: 60%; background: var(--chevrons) 0 0 / 80px 56px; opacity: .06; transform: rotate(-8deg); }
/* Balle de ping-pong blanche : posée à côté de « TTB », suit la souris au survol (derrière les images) */
.ttb-wrap { position: relative; align-self: flex-start; }
.hero__ball { position: absolute; left: calc(100% + 14px); top: 16%; pointer-events: none; will-change: transform; }
.hero__ball span { display: block; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 35%, #ececec 65%, #c4c4c4 100%); box-shadow: 0 0 22px rgba(255,255,255,.4), 0 8px 16px rgba(0,0,0,.35); will-change: transform; }
.hero__marquee { position: absolute; bottom: 2vh; left: 0; display: flex; white-space: nowrap; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(5rem, 14vw, 12rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); animation: marquee 45s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.hero__title { margin: .8rem 0 .4rem; display: flex; flex-direction: column; }
.ttb { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(6rem, 17vw, 13rem); line-height: .82; color: var(--red); text-shadow: .05em .05em 0 var(--yellow); letter-spacing: -.01em; }
.hero__sub { font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.15; margin-top: 1rem; }
.hero__season { font-family: var(--brush); font-size: clamp(1.4rem, 3vw, 2.1rem); margin: .4rem 0 1rem; transform: rotate(-2deg); transform-origin: left; }
.hero__season b { color: var(--yellow); font-weight: 400; }
.hero__lead { font-size: 1.08rem; max-width: 32rem; color: rgba(255,255,255,.8); margin: 0 0 1.8rem; }
.hero__lead strong { color: var(--yellow); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Photos hexagonales (comme sur l'affiche) */
.hero__visual { position: relative; aspect-ratio: 1 / 1; max-width: 560px; justify-self: center; width: 100%; }
.hex { position: absolute; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: var(--red); padding: 10px; }
.hex > * { width: 100%; height: 100%; clip-path: inherit; object-fit: cover; }
.hex img { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.hex--big { inset: 4% 0 14% 6%; animation: float 7s ease-in-out infinite; }
.hex--small { width: 34%; aspect-ratio: 1.12; left: -4%; bottom: 0; padding: 7px; animation: float 7s ease-in-out -3s infinite; }
.hex__fill { background: var(--black); display: grid; place-items: center; }
.hex__fill img { width: 64%; height: 76%; object-fit: contain; clip-path: none; }
@keyframes float { 50% { transform: translateY(-10px); } }
.trial { position: absolute; right: -2%; bottom: 2%; width: 150px; height: 150px; border-radius: 50%; background: var(--black); border: 4px solid var(--yellow); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: #fff; transform: rotate(-8deg); transition: transform .4s var(--ease); box-shadow: 0 20px 40px -10px rgba(0,0,0,.6); }
.trial:hover { transform: rotate(0) scale(1.06); }
.trial__ico { font-size: 1.4rem; }
.trial b { font-family: var(--brush); font-weight: 400; font-size: 1.15rem; line-height: 1.05; }
.trial em { font-style: normal; color: var(--yellow); }
.trial small { font-size: .66rem; line-height: 1.2; opacity: .85; margin-top: .2rem; }
@media (max-width: 900px) {
  .hero::before, .hero::after { width: 100%; top: auto; height: 42%; right: 0; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }
  .hero::after { clip-path: polygon(0 15%, 100% -3%, 100% 0, 0 18%); }
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero__visual { max-width: 420px; }
  .trial { width: 120px; height: 120px; }
  .trial b { font-size: .95rem; } .trial small { display: none; }
}

/* Bandeau prochain match */
.next { position: relative; z-index: 2; margin-top: 2.5rem; background: var(--black-2); border: 1px solid rgba(255,255,255,.1); border-left: 6px solid var(--red); display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2rem; align-items: center; padding: 1.2rem 1.6rem; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.next__label { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; line-height: 1.05; }
.next__label .live-dot { font-size: 1.4rem; color: var(--yellow); }
.next__label small { display: block; font-family: var(--body); font-style: normal; font-weight: 600; font-size: .8rem; color: rgba(255,255,255,.6); text-transform: none; margin-top: .2rem; }
.live-dot { display: inline-flex; align-items: center; gap: .5rem; }
.live-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(215,20,31,.8); } 100% { box-shadow: 0 0 0 12px rgba(215,20,31,0); } }
.next__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; text-align: center; }
.next__team { display: flex; align-items: center; gap: .7rem; font-weight: 700; line-height: 1.2; }
.next__team:first-child { justify-content: flex-end; text-align: right; }
.next__team:last-child { justify-content: flex-start; text-align: left; }
.next__team:first-child .crest { order: 2; }
.next__vs { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 1.8rem; color: var(--red); }
.next__meta { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: .3rem; }
.crest { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.1rem; background: var(--black-3); border: 2px solid rgba(255,255,255,.2); color: #fff; }
.crest--us { background: none; border: 0; border-radius: 0; width: auto; height: 50px; object-fit: contain; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(54px, 1fr)); gap: .4rem; }
.countdown div { background: var(--red); padding: .45rem .3rem; text-align: center; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.countdown strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; opacity: .85; }
@media (max-width: 900px) { .next { grid-template-columns: 1fr; text-align: center; } .next__label small { display: inline; } }
@media (max-width: 520px) { .next__team { flex-direction: column !important; font-size: .85rem; } .next__team:first-child .crest { order: 0; } .next__team, .next__team:first-child, .next__team:last-child { text-align: center; justify-content: center; } }

/* ====== Ticker ====== */
.ticker { display: flex; background: var(--yellow); color: var(--black); overflow: hidden; font-weight: 700; }
.ticker__label { flex: none; background: var(--red); color: #fff; padding: .9rem 1.6rem .9rem 1.2rem; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.15rem; text-transform: uppercase; position: relative; z-index: 1; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.ticker__track { overflow: hidden; flex: 1; display: flex; align-items: center; }
.ticker__inner { display: flex; gap: 2.5rem; white-space: nowrap; animation: marquee 35s linear infinite; padding-left: 2rem; }
.ticker:hover .ticker__inner { animation-play-state: paused; }
.ticker__item { display: inline-flex; gap: .6rem; align-items: center; }
.ticker__item em { font-style: normal; background: var(--black); color: var(--yellow); padding: .1rem .55rem; font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.ticker__item small { color: var(--red); font-weight: 800; text-transform: uppercase; font-size: .75rem; }

/* ====== Sections ====== */
.section { padding: 100px 0; position: relative; }
.section--dark { background: var(--black); color: #fff; }
.section--dark .brush { color: var(--yellow); }
.section--tint { background: var(--tint); }
.section--slant { clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%); padding: 140px 0; margin: -20px 0; }
.section__head { display: flex; align-items: flex-end; gap: 1.2rem; margin-bottom: 2.5rem; }
.section__num { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(4rem, 9vw, 6.5rem); line-height: .78; color: transparent; -webkit-text-stroke: 2px var(--red); }
.section--dark .section__num { -webkit-text-stroke-color: var(--yellow); }
.section__title { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: .95; margin: 0; }
.h3 { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.8rem; margin: 0 0 .8rem; color: var(--yellow); }
.note { color: var(--muted); font-size: .85rem; margin-top: 1rem; }
@media (max-width: 600px) { .section { padding: 70px 0; } .section--slant { padding: 100px 0; } }

/* Toolbar / segmented / chips */
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.seg { display: inline-flex; background: var(--black); padding: 4px; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.seg__btn { border: 0; background: transparent; padding: .55rem 1.4rem; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.05rem; color: rgba(255,255,255,.7); transition: background .25s, color .25s; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.seg__btn.is-active { background: var(--red); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { border: 2px solid var(--black); background: #fff; padding: .35rem 1rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: .95rem; color: var(--ink); transition: all .2s; }
.chip:hover { background: var(--yellow); }
.chip.is-active { background: var(--black); color: var(--yellow); }
.chips--tabs { margin-bottom: 1.2rem; }

/* ====== Matchs ====== */
.matches { display: grid; gap: .7rem; }
.match { position: relative; display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 1.2rem; padding: 1rem 1.4rem; border: 1px solid var(--line); border-left: 5px solid var(--black); background: #fff; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; animation: fadeUp .5s var(--ease) both; }
.match:hover { transform: translateX(6px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.4); border-left-color: var(--red); }
.match__date { display: flex; flex-direction: column; line-height: 1.05; }
.match__date strong { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 1.8rem; text-transform: uppercase; }
.match__date span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.match__body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.match__comp { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.match__comp b { color: var(--red); }
.match__line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; font-weight: 700; }
.match__line .t-home { text-align: right; }
.match__line .us { color: var(--red); }
.match__score { font-family: var(--display); font-weight: 900; font-size: 1.6rem; background: var(--black); color: var(--yellow); padding: .05rem .9rem; min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.match__score.vs { background: var(--tint); color: var(--ink); font-size: 1.1rem; padding: .4rem .9rem; }
.badge { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .4rem .7rem; white-space: nowrap; }
.badge--V { background: var(--win); color: #fff; }
.badge--N { background: #8a8a8a; color: #fff; }
.badge--D { background: var(--red); color: #fff; }
.badge--home { background: var(--yellow); color: var(--black); }
.badge--away { background: var(--black); color: #fff; }
.empty { padding: 2rem; text-align: center; color: var(--muted); border: 2px dashed var(--line); }
@media (max-width: 640px) {
  .match { grid-template-columns: 1fr auto; padding: 1rem; gap: .6rem 1rem; }
  .match__date { flex-direction: row; gap: .5rem; align-items: baseline; }
  .match__date strong { font-size: 1.3rem; }
  .match__body { grid-column: 1 / -1; grid-row: 2; }
  .match__line { font-size: .88rem; gap: .5rem; }
  .match__score { min-width: 64px; font-size: 1.3rem; padding: .05rem .5rem; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ====== Équipes ====== */
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.team { position: relative; text-align: left; border: 0; background: var(--black-2); color: #fff; padding: 1.6rem; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; transition: transform .4s var(--ease), background .4s; border-top: 5px solid var(--red); }
.team::before { content: attr(data-num); position: absolute; right: 10px; top: -20px; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 11rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(246,183,14,.14); transition: -webkit-text-stroke-color .4s, transform .5s var(--ease); }
.team::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: var(--chevrons) center bottom / 60px 42px repeat-x; opacity: .08; transition: opacity .4s; }
.team:hover { transform: translateY(-8px); background: var(--red); }
.team:hover::before { -webkit-text-stroke-color: rgba(255,255,255,.35); transform: translateX(-10px); }
.team:hover::after { opacity: .3; }
.team__div { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); position: relative; }
.team__name { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 2.8rem; text-transform: uppercase; margin: .2rem 0 1rem; line-height: 1; position: relative; }
.team__players { display: flex; margin-bottom: 1.2rem; position: relative; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .8rem; background: var(--red); border: 2px solid var(--black-2); margin-left: -8px; }
.team:hover .avatar { background: var(--black); border-color: var(--red); }
.avatar:first-child { margin-left: 0; }
.team__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; position: relative; z-index: 1; }
.team__rank strong { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 3rem; line-height: 1; color: var(--yellow); }
.team__rank sup { font-size: 1rem; }
.team__rank span { display: block; font-size: .78rem; color: rgba(255,255,255,.7); }
.form { display: flex; gap: 4px; }
.form i { width: 22px; height: 22px; display: grid; place-items: center; font-style: normal; font-size: .7rem; font-weight: 800; }
.form .V { background: var(--win); } .form .N { background: #8a8a8a; } .form .D { background: #fff; color: var(--red); }
.team__more { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--yellow); margin-top: 1rem; position: relative; z-index: 1; }

/* ====== Classements ====== */
.standing { overflow-x: auto; border: 2px solid var(--black); }
.table { width: 100%; border-collapse: collapse; min-width: 520px; font-variant-numeric: tabular-nums; }
.table th { background: var(--black); color: var(--yellow); font-family: var(--display); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; padding: .8rem; text-align: center; }
.table th:nth-child(2) { text-align: left; }
.table td { padding: .8rem; border-top: 1px solid var(--line); text-align: center; font-weight: 500; }
.table td:nth-child(2) { text-align: left; font-weight: 700; }
.table tr { animation: fadeUp .45s var(--ease) both; }
.table tr.us td { background: var(--red); color: #fff; border-top-color: var(--red); }
.table tr.club-row td { background: #fff1f1; }
.table tr.club-row td:nth-child(2) { color: var(--red); }
.table .pos { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 1.4rem; }
.table .pts { font-weight: 800; font-size: 1.05rem; }
.bar { height: 6px; background: var(--tint); overflow: hidden; width: 80px; margin: 0 auto; }
.bar span { display: block; height: 100%; background: var(--yellow); transition: width 1s var(--ease); }
.standing__caption { padding: .9rem 1.2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-family: var(--display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; font-style: italic; }
.standing__caption span { color: var(--muted); font-family: var(--body); font-style: normal; text-transform: none; font-size: .9rem; font-weight: 500; }

/* ====== Évènements ====== */
.featured { display: grid; grid-template-columns: 1fr 1.2fr; background: var(--black); color: #fff; margin-bottom: 2.5rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.featured__visual { position: relative; min-height: 320px; background: var(--black) var(--chevrons) center / 80px 56px; display: grid; place-items: center; overflow: hidden; }
.featured__visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(11,11,11,.55), rgba(11,11,11,.85)); }
.featured__date { position: relative; text-align: center; line-height: .85; text-transform: uppercase; background: var(--red); color: #fff; padding: 1.4rem 2.2rem 1.2rem; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.featured__date strong { display: block; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 7.5rem; }
.featured__date span { font-family: var(--display); font-weight: 800; font-size: 1.8rem; letter-spacing: .04em; }
.featured__body { padding: 2.4rem; display: flex; flex-direction: column; gap: .8rem; justify-content: center; }
.featured__body .brush { color: var(--yellow); }
.featured__body h3 { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(2.2rem, 4vw, 3.2rem); text-transform: uppercase; margin: 0; line-height: .95; }
.featured__body p { color: rgba(255,255,255,.78); margin: 0; }
.featured .countdown { max-width: 340px; margin: .4rem 0; }
.featured .btn { align-self: flex-start; }
@media (max-width: 800px) { .featured { grid-template-columns: 1fr; } .featured__visual { min-height: 220px; } .featured__date strong { font-size: 5rem; } .featured__body { padding: 1.6rem; } }

.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
@media (max-width: 400px) { .events { grid-template-columns: 1fr; } }
.event { background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; animation: fadeUp .5s var(--ease) both; border-bottom: 4px solid var(--red); }
.event:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(0,0,0,.45); }
.event__top { position: relative; height: 130px; display: flex; align-items: flex-end; padding: 1rem; background: var(--black) var(--chevrons) right -10px bottom -6px / 50px 35px; color: #fff; overflow: hidden; }
.event__top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--black) 35%, rgba(11,11,11,.4)); }
.event.is-past { border-bottom-color: #9a9a9a; }
.event.is-past .event__top { filter: grayscale(1); }
.event__cal { position: relative; z-index: 1; background: var(--red); color: #fff; padding: .45rem .9rem; text-align: center; line-height: 1; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.event__cal strong { display: block; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 2.2rem; }
.event__cal span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.event__tag { position: absolute; top: 1rem; left: 1rem; z-index: 1; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); color: var(--black); padding: .3rem .7rem; }
.event__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.event__body h3 { margin: 0; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; }
.event__body p { margin: 0; color: var(--muted); font-size: .95rem; }
.event__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; font-weight: 700; margin-top: auto; padding-top: .6rem; }
.event__meta span::before { content: "▸ "; color: var(--red); }
.event__done { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* ====== Club ====== */
.club { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; }
.club__text p { color: rgba(255,255,255,.78); }
.club__text .big { font-size: 1.35rem; color: #fff; line-height: 1.5; margin-top: 0; }
.club__text strong { color: var(--yellow); }
.club__text em { font-family: var(--brush); font-style: normal; color: var(--red); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.stat { border-top: 4px solid var(--red); padding-top: .8rem; }
.stat strong { display: block; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1; color: var(--yellow); }
.stat span { font-size: .8rem; color: rgba(255,255,255,.65); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.club__side { background: var(--black-2); border-top: 5px solid var(--yellow); padding: 1.8rem; }
.schedule { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.schedule li { display: grid; grid-template-columns: 90px 1fr; gap: .2rem 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.schedule li strong { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.2rem; }
.schedule li em { font-style: normal; color: var(--yellow); font-weight: 700; }
.schedule li span { grid-column: 2; font-size: .88rem; color: rgba(255,255,255,.65); }
.place { display: flex; gap: .8rem; align-items: flex-start; text-decoration: none; padding: 1rem; background: rgba(255,255,255,.04); transition: background .2s; }
.place:hover { background: var(--red); }
.place svg { width: 26px; flex: none; color: var(--yellow); }
.place strong { display: block; }
.place span { display: block; font-size: .9rem; color: rgba(255,255,255,.7); }
.place small { display: block; margin-top: .3rem; font-weight: 700; color: var(--yellow); }
@media (max-width: 900px) { .club { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } }

/* ====== Nous rejoindre (bloc jaune façon affiche) ====== */
.join { position: relative; background: linear-gradient(160deg, var(--yellow), #eaa400); color: var(--black); padding: 90px 0 80px; overflow: hidden; }
.join::before { content: ""; position: absolute; right: -60px; top: 40px; width: 420px; height: 300px; background: var(--chevrons) 0 0 / 80px 56px; filter: brightness(0); opacity: .07; }
.join .section__num { -webkit-text-stroke-color: var(--black); }
.stripes { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(-45deg, #fff 0 18px, var(--yellow) 18px 36px); }
.join .stripes { background: repeating-linear-gradient(-45deg, #fff 0 18px, var(--black) 18px 36px); }
.join__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.info { padding: 0 1.6rem; display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.info + .info { border-left: 2px solid rgba(11,11,11,.18); }
.info__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--black); display: grid; place-items: center; font-size: 1.4rem; }
.info h3 { margin: 0; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.7rem; line-height: 1; }
.info h3 em { display: block; font-style: italic; color: var(--red); font-size: 1.3rem; }
.pill { margin: 0; background: var(--black); color: #fff; padding: .55rem 1.1rem; font-weight: 800; text-transform: uppercase; font-size: .88rem; border-radius: 999px; }
.info ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: .92rem; font-weight: 500; }
.info p { margin: 0; font-weight: 500; }
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 3rem; position: relative; }
.contact { display: flex; flex-direction: column; background: var(--black); color: #fff; padding: 1rem 1.3rem; text-decoration: none; transition: transform .3s var(--ease), background .3s; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.contact:hover { transform: translateY(-4px); }
.contact span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--yellow); }
.contact strong { word-break: break-word; }
.contact--red { background: var(--red); }
.contact--red span { color: #fff; opacity: .8; }
@media (max-width: 900px) {
  .join__grid { grid-template-columns: 1fr; gap: 2rem; }
  .info { padding: 0; } .info + .info { border-left: 0; border-top: 2px solid rgba(11,11,11,.18); padding-top: 2rem; }
  .contacts { grid-template-columns: 1fr; }
}

/* ====== Partenaires / footer ====== */
.partners { padding: 60px 0 70px; }
.partners__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.2rem; }
.partner { flex: 1 1 160px; max-width: 200px; height: 80px; display: grid; place-items: center; border: 2px dashed var(--line); color: var(--muted); font-weight: 700; font-size: .85rem; text-align: center; padding: .5rem; transition: border-color .2s, color .2s; }
.partner:hover { border-color: var(--red); color: var(--red); }
.footer { position: relative; background: var(--black); color: rgba(255,255,255,.7); padding: 50px 0 40px; }
.footer .stripes { top: 0; bottom: auto; height: 10px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__nav a { text-decoration: none; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; }
.footer__nav a:hover { color: var(--yellow); }
.footer__copy { margin: 0; font-size: .85rem; width: 100%; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.2rem; }

/* ====== Images gérées depuis l'admin ====== */
.team__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: grayscale(.3); transition: opacity .4s, transform .6s var(--ease); }
.team:hover .team__photo { opacity: .2; transform: scale(1.05); }
.team > span { position: relative; }
.event__img, .featured__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event__top .event__img + .event__tag { z-index: 2; }
.event__top:has(.event__img)::after { background: linear-gradient(0deg, rgba(11,11,11,.75), rgba(11,11,11,.1)); }
.featured__visual:has(.featured__img)::before { background: rgba(11,11,11,.35); }
.modal__photo { display: block; width: 100%; max-height: 300px; object-fit: cover; }
.partner img { max-width: 100%; max-height: 60px; object-fit: contain; }
a.partner { text-decoration: none; }
.footer__copy a { color: rgba(255,255,255,.5); }

/* ====== Modale ====== */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; visibility: hidden; }
.modal.is-open { visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__panel { position: relative; width: 100%; max-width: 720px; max-height: 90vh; overflow: auto; background: #fff; transform: translateY(30px) scale(.97); opacity: 0; transition: transform .4s var(--ease), opacity .3s; border-top: 6px solid var(--red); }
.modal.is-open .modal__panel { transform: none; opacity: 1; }
.modal__close { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--yellow); color: var(--black); font-size: 1.6rem; line-height: 1; z-index: 2; }
.modal__head { background: var(--black) var(--chevrons) right -20px bottom -10px / 90px 63px; color: #fff; padding: 2rem; position: relative; }
.modal__head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--black) 45%, rgba(11,11,11,.5)); }
.modal__head > * { position: relative; }
.modal__head .brush { color: var(--yellow); }
.modal__head h3 { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 3.4rem; margin: .1rem 0 .3rem; line-height: 1; color: var(--red); text-shadow: 2px 2px 0 var(--yellow); }
.modal__head p { margin: 0; color: rgba(255,255,255,.75); }
.modal__content { padding: 1.6rem 2rem 2rem; display: grid; gap: 1.6rem; }
.modal__content h4 { margin: 0 0 .8rem; font-family: var(--display); font-weight: 800; font-style: italic; font-size: 1.3rem; text-transform: uppercase; color: var(--red); }
.roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.player { display: flex; align-items: center; gap: .8rem; padding: .7rem; border: 1px solid var(--line); border-left: 4px solid var(--yellow); }
.player .avatar { margin: 0; color: #fff; border: 0; }
.player strong { display: block; font-size: .95rem; }
.player span { font-size: .8rem; color: var(--muted); }
.mini { display: grid; gap: .4rem; }
.mini__row { display: grid; grid-template-columns: 50px 1fr auto; gap: .8rem; align-items: center; padding: .55rem .8rem; background: var(--tint); font-size: .9rem; }
.mini__row b { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 1.2rem; }
@media (max-width: 520px) { .roster { grid-template-columns: 1fr; } .modal__head h3 { font-size: 2.4rem; } .modal__content { padding: 1.4rem; } }

/* ====== Reveal au scroll ====== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.brush.reveal.is-in { transform: rotate(-2deg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ====== Compétitions (Secteurs, Indiv', Coupes) ====== */
.chips--dark .chip { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.chips--dark .chip:hover { background: rgba(255,255,255,.08); }
.chips--dark .chip.is-active { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.chip b { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; margin-left: .3rem; padding: 0 .3em; border-radius: 999px; background: var(--red); color: #fff; font-size: .75rem; }
.season-select { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 800; text-transform: uppercase; color: var(--yellow); }
.season-select select { font: inherit; text-transform: none; background: var(--black-2); color: #fff; border: 2px solid rgba(255,255,255,.3); padding: .3rem .6rem; }
.comp__intro { color: rgba(255,255,255,.7); margin: -.4rem 0 1.4rem; max-width: 46rem; }
.comp__intro:empty { display: none; }
.comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.comp { background: var(--black-2); border-top: 5px solid var(--yellow); cursor: pointer; display: flex; flex-direction: column; transition: transform .35s var(--ease), background .35s; animation: fadeUp .5s var(--ease) both; }
.comp:hover, .comp:focus-visible { transform: translateY(-6px); background: #1d1d1d; outline: none; }
.comp__cover { position: relative; height: 150px; background: var(--black) var(--chevrons) center / 70px 49px; overflow: hidden; }
.comp__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.comp:hover .comp__cover img { transform: scale(1.05); }
.comp__cat { position: absolute; left: 1rem; bottom: 1rem; background: var(--red); color: #fff; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; padding: .25rem .8rem; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.comp__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.comp__body h3 { margin: 0; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.7rem; line-height: 1; }
.comp__meta { margin: 0; color: rgba(255,255,255,.6); font-size: .88rem; }
.podium { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.podium li { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .5rem; padding: .35rem .6rem; background: rgba(255,255,255,.05); }
.podium__place { font-size: 1.1rem; text-align: center; }
.podium small { color: rgba(255,255,255,.5); font-size: .75rem; }
.comp__more { margin-top: auto; padding-top: .6rem; font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; color: var(--yellow); }
.empty--dark { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.2); }

/* Compte-rendu (dans la fenêtre) */
.palmares { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.palmares li { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: .2rem 1rem; align-items: center; padding: .6rem .8rem; background: var(--tint); border-left: 4px solid var(--yellow); }
.palmares li:first-child { border-left-color: var(--red); }
.palmares__place { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; }
.palmares__name { font-weight: 700; }
.palmares small { grid-column: 2; color: var(--muted); }
.rich { line-height: 1.7; }
.rich > :first-child { margin-top: 0; }
.rich h3, .rich h4, .rich h5 { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; margin: 1.4rem 0 .5rem; line-height: 1.1; }
.rich h3 { font-size: 1.6rem; } .rich h4 { font-size: 1.3rem; } .rich h5 { font-size: 1.1rem; }
.rich p { margin: 0 0 .9rem; }
.rich a { color: var(--red); font-weight: 600; }
.rich ul, .rich ol { padding-left: 1.4rem; margin: 0 0 .9rem; }
.rich blockquote { margin: 1rem 0; padding: .8rem 1.2rem; border-left: 5px solid var(--red); background: var(--tint); font-style: italic; }
.rich blockquote p { margin: 0; } .rich cite { display: block; margin-top: .4rem; font-style: normal; font-weight: 700; color: var(--muted); font-size: .9rem; }
.rich hr { border: 0; height: 18px; margin: 1.6rem 0; background: var(--chevrons) center / 40px 28px repeat-x; opacity: .6; }
.rich figure { margin: 1rem 0; }
.rich figure img { width: 100%; max-height: 520px; object-fit: cover; cursor: zoom-in; }
.rich figcaption { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.tagref { background: rgba(246,183,14,.3); color: inherit; padding: 0 .2em; border-radius: 3px; font-weight: 600; }
.tagref--team { background: rgba(215,20,31,.12); color: var(--red); cursor: pointer; }
.chip-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-tag { display: inline-flex; align-items: center; gap: .3rem; border: 0; font: inherit; font-size: .82rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; background: var(--tint); color: var(--ink); }
.chip-tag--player::before { content: "👤"; font-size: .8em; }
.chip-tag--team { background: var(--black); color: var(--yellow); cursor: pointer; }
.chip-tag--team::before { content: "🏓"; font-size: .8em; }

/* ====== Galerie : mosaïque + visionneuse ====== */
.mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.mosaic__item { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; background: var(--tint); cursor: zoom-in; overflow: hidden; animation: fadeUp .5s var(--ease) both; }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease), filter .4s; }
.mosaic__item:hover img { transform: scale(1.04); filter: brightness(.85); }
.mosaic__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .8rem .6rem; color: #fff; font-size: .82rem; font-weight: 600; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,.75)); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.mosaic__item:hover .mosaic__cap, .mosaic__item:focus-visible .mosaic__cap { opacity: 1; transform: none; }
.mosaic--home .mosaic__item:nth-child(n+9) { display: none; }
.center-cta { text-align: center; margin-top: 1.6rem; }
.event__photos { font-weight: 700; color: var(--red); text-decoration: none; font-size: .9rem; }
.event__photos:hover { text-decoration: underline; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5,5,5,.94); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; height: 100vh; min-width: 0; padding: 3.5rem 0 1.2rem; }
.lightbox__fig img { flex: 1; min-height: 0; width: 100%; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.lightbox__fig figcaption { color: #fff; text-align: center; display: grid; gap: .3rem; max-width: 46rem; padding: 0 1rem; }
.lightbox__fig figcaption small { color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.lightbox__tags { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.lightbox__nav, .lightbox__close { border: 0; background: rgba(255,255,255,.1); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; justify-self: center; transition: background .2s; }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--red); }
.lightbox__close { position: absolute; top: 14px; right: 14px; font-size: 1.8rem; }
.lightbox__count { position: absolute; top: 24px; left: 20px; color: rgba(255,255,255,.7); font-weight: 700; font-size: .85rem; }
@media (max-width: 640px) { .lightbox { grid-template-columns: 1fr; } .lightbox__nav { position: absolute; bottom: 18px; } .lightbox__nav--prev { left: 18px; } .lightbox__nav--next { right: 18px; } .lightbox__fig { padding-bottom: 5rem; } }

/* ====== Page Galerie ====== */
.page-hero { background: var(--black) var(--chevrons) right -40px bottom -20px / 90px 63px; color: #fff; padding: 140px 0 70px; position: relative; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--black) 40%, rgba(11,11,11,.6)); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(3.5rem, 10vw, 7rem); line-height: .9; margin: .8rem 0 .6rem; color: var(--red); text-shadow: .04em .04em 0 var(--yellow); }
.page-hero__lead { color: rgba(255,255,255,.75); max-width: 36rem; margin: 0; font-size: 1.1rem; }
.album { margin-top: 2.5rem; }
.album__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: 1rem; border-bottom: 3px solid var(--black); padding-bottom: .6rem; }
.album__head h2 { margin: 0; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; }
.album__head p { margin: 0; color: var(--muted); font-weight: 600; }
.album__head .album__desc { width: 100%; font-weight: 400; color: var(--ink); }

/* Menu : 7 liens, on resserre un peu sur les écrans moyens */
.nav a, .logo__text small { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1400px) { .nav { gap: 1.05rem; } .nav a:not(.btn) { font-size: 1rem; } .nav .btn--sm { padding-inline: 1.1rem; } }
@media (min-width: 961px) and (max-width: 1120px) { .nav { gap: .75rem; } .nav a:not(.btn) { font-size: .92rem; } .logo__text small { display: none; } }

/* Niveau des tableaux (départementaux / régionaux / nationaux) */
.comp__level { position: absolute; right: 1rem; bottom: 1rem; background: var(--yellow); color: var(--black); font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: .9rem; padding: .2rem .7rem; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.comp__level--national { background: #fff; }

/* Remarque d'un créneau d'entraînement (ex. « une semaine sur 2 ») */
.schedule__note { grid-column: 2; justify-self: start; margin-top: .25rem; font-size: .78rem; font-weight: 700; color: var(--black); background: var(--yellow); padding: .2rem .55rem; border-radius: 4px; line-height: 1.35; }
.schedule__note::before { content: "↻ "; }

/* Tarifs (section « Nous rejoindre », fond jaune) */
.tarifs { margin-top: 3rem; position: relative; }
.tarifs__title { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 2rem; line-height: 1; margin: 0 0 1rem; color: var(--black); }
.tarifs__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.tarif { background: var(--black); color: #fff; padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .2rem; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); transition: transform .3s var(--ease); }
.tarif:hover { transform: translateY(-4px); }
.tarif span { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--yellow); }
.tarif strong { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 2.6rem; line-height: 1.05; }
.tarif small { color: rgba(255,255,255,.7); font-size: .85rem; }
.tarif--hl { background: var(--red); }
.tarif--hl span { color: #fff; opacity: .85; }
.tarifs__note { margin: .9rem 0 0; color: var(--black); font-weight: 600; font-size: .95rem; white-space: pre-line; }

/* Diaporama de l'hexagone d'accueil : fondu enchaîné + léger zoom lent */
.slides { position: relative; overflow: hidden; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 1.2s ease; clip-path: none; }
.slides img.is-active { opacity: 1; animation: kenburns 7s ease-out both; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }

/* ====== Bandeau défilant des partenaires ====== */
.sponsors-band { position: relative; display: flex; align-items: stretch; background: var(--black); color: #fff; border-top: 4px solid var(--yellow); border-bottom: 4px solid var(--yellow); overflow: hidden; }
.sponsors-band__label { flex: none; display: grid; place-items: center; background: var(--yellow); color: var(--black); padding: 0 1.6rem 0 1.2rem; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; text-align: center; max-width: 190px; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); position: relative; z-index: 2; }
.sponsors-band__track { flex: 1; overflow: hidden; display: flex; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sponsors-band__inner { display: flex; width: max-content; animation: sponsors-scroll var(--duration, 40s) linear infinite; }
.sponsors-band:hover .sponsors-band__inner { animation-play-state: paused; }
.sponsors-band__seq { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem .6rem; }
@keyframes sponsors-scroll { to { transform: translateX(-50%); } }
.sponsors-band a, .sponsors-band span[title] { display: block; text-decoration: none; color: inherit; }
/* Mode logos : pastille blanche, logo gris → couleurs au survol */
.sponsor--logo { display: grid; place-items: center; width: 170px; height: 76px; padding: .6rem 1rem; background: #fff; border-radius: 10px; }
.sponsor--logo img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .3s, opacity .3s, transform .3s var(--ease); }
.sponsors-band a:hover .sponsor--logo img, .sponsors-band span:hover > .sponsor--logo img { filter: none; opacity: 1; transform: scale(1.06); }
/* Mode texte (ou partenaire sans logo) : nom en grandes lettres, séparés par des points jaunes */
.sponsor--text { display: inline-flex; align-items: center; gap: 1.2rem; font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.7rem; letter-spacing: .02em; color: rgba(255,255,255,.7); white-space: nowrap; transition: color .2s; }
.sponsor--text::after { content: "●"; font-size: .5em; color: var(--yellow); }
.sponsors-band a:hover .sponsor--text, .sponsors-band span:hover > .sponsor--text { color: var(--yellow); }
.sponsors-band--text .sponsors-band__seq { gap: 1.2rem; padding-block: 1.3rem; }
@media (max-width: 640px) { .sponsors-band__label { font-size: .85rem; padding: 0 1.1rem 0 .8rem; max-width: 110px; } .sponsor--logo { width: 130px; height: 62px; } .sponsor--logo img { max-height: 44px; } .sponsor--text { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .sponsors-band__track { overflow-x: auto; } }

/* Mentions légales */
.legal h4 { margin-bottom: .5rem; }
.legal ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.legal p { margin: 0 0 .6rem; line-height: 1.6; }
.legal a { color: var(--red); font-weight: 600; }
.footer__copy a[data-legal] { color: rgba(255,255,255,.7); }

/* ====== Clin d'œil : /lens → habillage Sang & Or (inspiré du style graphique du Racing) ====== */
.theme-lens {
  --black: #c31316;      /* sang */
  --black-2: #a90f12;
  --black-3: #8f0c0f;
  --red: #ffd500;        /* or */
  --red-dark: #e6c000;
  --yellow: #ffd500;
  --yellow-2: #ffe34d;
  --tint: #fff6cc;
  --ink: #111;
  --display: "Rubik", "Arial Black", sans-serif;
  --body: "Poppins", "Inter", system-ui, sans-serif;
  --chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='56' viewBox='0 0 80 56'%3E%3Cpath d='M0 46 40 18l40 28' stroke='%23ffd500' stroke-width='10' fill='none'/%3E%3C/svg%3E");
}
/* Titres droits et massifs, plus d'italique */
.theme-lens .section__title, .theme-lens .ttb, .theme-lens .team__name, .theme-lens .comp__body h3, .theme-lens .event__body h3,
.theme-lens .featured__body h3, .theme-lens .match__date strong, .theme-lens .h3, .theme-lens .info h3, .theme-lens .stat strong,
.theme-lens .tarif strong, .theme-lens .tarifs__title, .theme-lens .btn, .theme-lens .seg__btn, .theme-lens .nav a, .theme-lens .logo__text b,
.theme-lens .section__num, .theme-lens .table .pos, .theme-lens .modal__head h3, .theme-lens .next__label, .theme-lens .next__vs, .theme-lens .comp__more,
.theme-lens .team__more, .theme-lens .team__rank strong, .theme-lens .sponsors-band__label, .theme-lens .sponsor--text, .theme-lens .ticker__label,
.theme-lens .comp__cat, .theme-lens .comp__level, .theme-lens .featured__date strong, .theme-lens .event__cal strong, .theme-lens .standing__caption,
.theme-lens .page-hero__title, .theme-lens .countdown strong { font-style: normal; letter-spacing: 0; }
.theme-lens .ttb { color: var(--yellow); text-shadow: none; }
.theme-lens .logo__text b, .theme-lens .modal__head h3 { color: var(--yellow); text-shadow: none; }
.theme-lens .section__title { text-transform: uppercase; }
.theme-lens .section--dark .section__title, .theme-lens .hero .hero__sub { color: #fff; }
/* La police ronde est plus large : menu un peu plus compact */
@media (min-width: 961px) { .theme-lens .nav { gap: .9rem; } .theme-lens .nav a:not(.btn) { font-size: .82rem; } .theme-lens .logo__text small { display: none; } }
/* Fini les biseaux : grands arrondis et boutons en pastille */
.theme-lens .btn, .theme-lens .seg, .theme-lens .seg__btn, .theme-lens .countdown div, .theme-lens .match__score, .theme-lens .contact,
.theme-lens .tarif, .theme-lens .comp__cat, .theme-lens .comp__level, .theme-lens .event__cal, .theme-lens .featured__date, .theme-lens .brush--tag,
.theme-lens .ticker__label, .theme-lens .sponsors-band__label, .theme-lens .chip, .theme-lens .form i { clip-path: none; border-radius: 999px; }
.theme-lens .btn { padding-inline: 1.6rem; }
.theme-lens .btn--red, .theme-lens .btn--ghost { background: var(--yellow); color: #111; }
.theme-lens .btn--dark { background: #111; color: var(--yellow); }
.theme-lens .featured__date, .theme-lens .event__cal, .theme-lens .countdown div { border-radius: 18px; }
.theme-lens .team, .theme-lens .comp, .theme-lens .event, .theme-lens .match, .theme-lens .featured, .theme-lens .club__side, .theme-lens .standing,
.theme-lens .info, .theme-lens .modal__panel, .theme-lens .album, .theme-lens .mosaic__item, .theme-lens .place, .theme-lens .sponsor--logo { border-radius: 32px; overflow: hidden; }
.theme-lens .match { border-left: 0; }
.theme-lens .hex, .theme-lens .hex > *, .theme-lens .hex img { border-radius: 0; }
/* Bandeau « prochain match » façon barre de match noire */
.theme-lens .next { background: #111; border: 0; border-radius: 28px; }
.theme-lens .next__label .live-dot { color: var(--yellow); }
.theme-lens .countdown div { background: var(--yellow); color: #111; }
.theme-lens .countdown span { color: #111; }
/* Couleurs de texte sur fonds or */
.theme-lens .ticker__label, .theme-lens .brush--tag, .theme-lens .match__score, .theme-lens .comp__cat, .theme-lens .event__cal,
.theme-lens .featured__date, .theme-lens .table tr.us td, .theme-lens .tarif--hl, .theme-lens .tarif--hl span, .theme-lens .tarif--hl strong { color: #111; }
.theme-lens .match__score { background: var(--yellow); }
.theme-lens .table tr.us td { background: var(--yellow); }
.theme-lens .table th { background: #111; }
.theme-lens .section__num { -webkit-text-stroke-color: var(--yellow); }
.theme-lens .section:not(.section--dark) .section__num { -webkit-text-stroke-color: #c31316; }
.theme-lens .ticker { background: #111; color: #fff; }
.theme-lens .ticker__item em { background: var(--yellow); color: #111; }
.theme-lens .ticker__item small { color: var(--yellow); }
.theme-lens .hero::before { background: linear-gradient(160deg, #ffd500, #f2b800); }
.theme-lens .hero__season b { color: var(--yellow); }
.theme-lens .stripes { background: repeating-linear-gradient(-45deg, #c31316 0 18px, #ffd500 18px 36px); }
.theme-lens .footer { background: #111; }
/* Bandeau et confettis */
.lens-banner { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: 18px; z-index: 150; display: flex; align-items: center; gap: .9rem; background: #111; border: 3px solid #ffd500; color: #ffd500; padding: .6rem .7rem .6rem 1.2rem; border-radius: 999px; box-shadow: 0 15px 40px -10px rgba(0,0,0,.5); font-family: "Rubik", var(--display); font-weight: 900; text-transform: uppercase; font-size: 1rem; max-width: calc(100% - 24px); animation: fadeUp .6s var(--ease) both; }
.lens-banner b { color: #fff; font-weight: 900; }
.lens-banner a { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ffd500; color: #111; text-decoration: none; font-size: 1.2rem; }
.lens-confetti { position: fixed; top: -20px; width: 10px; height: 14px; border-radius: 2px; z-index: 160; pointer-events: none; animation: lens-fall linear forwards; }
@keyframes lens-fall { to { transform: translateY(110vh) rotate(720deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .lens-confetti { display: none; } }
@media (max-width: 640px) { .lens-banner { font-size: .78rem; gap: .5rem; padding-left: .9rem; } }
/* Mode Lens : sur fond clair, ce qui était rouge passe en rouge sang (l'or y serait illisible) */
.theme-lens .section:not(.section--dark) .brush, .theme-lens .match__line .us, .theme-lens .match__comp b, .theme-lens .event__photos,
.theme-lens .rich a, .theme-lens .tagref--team, .theme-lens .partner:hover, .theme-lens .legal a, .theme-lens .palmares__place,
.theme-lens .album__head h2, .theme-lens .modal__content h4 { color: #c31316; }
.theme-lens .section:not(.section--dark) .brush--tag { color: #111; }
.theme-lens .event { border-bottom-color: #c31316; }
.theme-lens .palmares li:first-child { border-left-color: #c31316; }
.theme-lens .mosaic__item, .theme-lens .chip { border-color: #c31316; }
.theme-lens .badge--home { background: var(--yellow); color: #111; }
.theme-lens .badge--away { background: #c31316; color: #fff; }
.theme-lens .avatar { color: #111; } .theme-lens .team:hover .avatar { background: #111; color: var(--yellow); }