/* Replay FA — site public */
:root {
  --bg: #05090F; --bg2: #0B1422; --bg3: #0F1B2D; --line: #1A2638;
  --txt: #E9EEF5; --mut: #A5B3C6; --dim: #6E8099;
  --acc: #7FB1EE; --legal: #3DD68C; --illegal: #A66BFF; --police: #5B8CFF; --ok: #3DD68C; --ko: #E8524A;
  --anton: Anton, Impact, 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: Outfit, system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
.p-legal { --acc: var(--legal); } .p-illegal { --acc: var(--illegal); } .p-police { --acc: var(--police); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.anton, h1, h2, h3 { font-family: var(--anton); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; }
.kicker { display: block; font-family: var(--anton); font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--acc); }
.h2 { margin: 12px 0 32px; font-size: 56px; line-height: 1; }
.muted { color: var(--mut); }
.sec { padding-top: 100px; padding-bottom: 100px; }
.sec-tight { padding-top: 60px; padding-bottom: 60px; }
[hidden] { display: none !important; }
.row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.row-head .h2 { margin-bottom: 0; }
.row-head p { margin: 0; max-width: 420px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 38px; border: 0; cursor: pointer; font-family: var(--anton); font-size: 19px; letter-spacing: 2px; text-transform: uppercase; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: filter .15s, transform .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-p { background: var(--acc); color: var(--bg); }
.btn-s { background: var(--txt); color: var(--bg); }
.btn-g { background: rgba(233, 238, 245, .1); color: var(--txt); }
.btn-sm { min-height: 42px; padding: 0 22px; font-size: 15px; letter-spacing: 1.5px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.lnk { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--anton); font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--acc); border-bottom: 2px solid currentColor; padding-bottom: 3px; }
.lnk:hover { color: var(--txt); }
button.lnk { background: none; border: 0; border-bottom: 2px solid currentColor; padding: 0 0 3px; cursor: pointer; }
.il { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }

/* En-tête */
.hdr { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 34px; padding: 20px 44px; }
.hdr .logo img { height: 42px; width: auto; }
.nav { display: flex; gap: 28px; font-family: var(--anton); font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; }
.nav a { color: var(--mut); padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--txt); }
.nav a.on { color: var(--txt); border-bottom-color: var(--acc); }
.hdr-cta { margin-left: auto; display: flex; gap: 10px; }

/* Héros */
.hero { position: relative; display: flex; flex-direction: column; background-color: var(--bg2); background-size: cover; background-position: center; }
.hero-home { min-height: 860px; background-image: linear-gradient(180deg, rgba(5,9,15,.55) 0%, rgba(5,9,15,.35) 45%, var(--bg) 100%), url(img/hero-ville.webp); }
.hero-legal { background-image: linear-gradient(180deg, rgba(5,9,15,.55) 0%, rgba(5,9,15,.4) 40%, var(--bg) 100%), url(img/legal.webp); }
.hero-illegal { background-image: linear-gradient(180deg, rgba(5,9,15,.55) 0%, rgba(5,9,15,.4) 40%, var(--bg) 100%), url(img/illegal-hero.webp); background-position: center 35%; }
.hero-police { background-image: linear-gradient(180deg, rgba(5,9,15,.55) 0%, rgba(5,9,15,.4) 40%, var(--bg) 100%), url(img/police-v2.webp); background-position: center 30%; }
.hero-regles { background-image: linear-gradient(180deg, rgba(5,9,15,.7) 0%, rgba(5,9,15,.6) 40%, var(--bg) 100%), url(img/regles.webp); background-position: center 60%; }
.hero-in { flex: 1; width: 100%; padding-top: 150px; padding-bottom: 70px; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; min-height: 600px; }
.hero-in h1 { margin: 0; font-size: 96px; line-height: .95; }
.hero-in p { margin: 0; max-width: 640px; font-size: 19px; color: #C3CEDC; }
.hero-center { align-items: center; justify-content: center; text-align: center; padding: 150px 24px 90px; gap: 22px; min-height: 860px; }
.hero-center h1 { font-size: 128px; line-height: .9; letter-spacing: 2px; }
.hero-center h1 span { color: var(--acc); }
.hero-center p { max-width: 560px; }
.tag { display: inline-block; align-self: flex-start; font-family: var(--anton); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; background: var(--acc); color: var(--bg); }
.btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hero-center .btns { justify-content: center; }

/* Statut + chrono */
.statut { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(5,9,15,.65); border: 1px solid var(--line); font-size: 15px; color: #C3CEDC; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(61,214,140,.15); }
.dot.ko { background: var(--ko); }
.chrono { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.chrono[hidden] { display: none; }
.chrono div { min-width: 92px; padding: 14px 10px 10px; background: rgba(5,9,15,.7); border: 1px solid var(--line); border-top: 3px solid var(--acc); }
.chrono b { display: block; font-family: var(--anton); font-weight: 400; font-size: 46px; line-height: 1; }
.chrono span { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--mut); }
.chrono-titre { font-family: var(--anton); font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--mut); }

/* Cartes */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-2 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--bg2); border: 1px solid var(--line); padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.card .sect { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--acc); }
.card .nom { font-family: var(--anton); font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.card .desc { color: var(--mut); font-size: 15px; }
.card .num { font-family: var(--anton); font-size: 42px; line-height: 1; color: var(--acc); }
.card .ttl { font-family: var(--anton); font-size: 26px; line-height: 1.1; text-transform: uppercase; }
.card .grow { flex: 1; }
.card-step { gap: 10px; padding: 30px 28px; }
.badge { align-self: flex-start; margin-top: 6px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--acc); color: var(--acc); }
.skel { min-height: 120px; background: linear-gradient(90deg, var(--bg2), #0F1B2D, var(--bg2)); background-size: 200% 100%; animation: skel 1.4s infinite; border: 1px solid var(--line); }
@keyframes skel { to { background-position: -200% 0; } }
.vide { padding: 28px; border: 1px dashed var(--line); color: var(--mut); }

/* Annonces */
.annonce { border-left: 4px solid var(--acc); }
.annonce time { font-size: 13px; color: var(--dim); }

/* Agenda */
.agenda { border-top: 1px solid var(--line); }
.ev { display: flex; align-items: center; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ev .jour { font-family: var(--anton); font-size: 36px; line-height: 1; color: var(--acc); min-width: 120px; }
.ev .titre { flex: 1; min-width: 220px; font-family: var(--anton); font-size: 26px; letter-spacing: .5px; text-transform: uppercase; }
.ev .quand { color: var(--mut); }
.ev.live .quand { color: var(--ok); }

/* Ville */
.ville { display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.ville .img { flex: 1 1 520px; aspect-ratio: 16 / 10; background: url(img/ville-nuit-v2.webp) center / cover; }
.ville .txt { flex: 1 1 380px; display: flex; flex-direction: column; gap: 20px; }
.ville .txt .h2 { margin: 0; }
.ville .txt p { margin: 0; color: #B4C0D0; }

/* Camps */
.camps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px; }
.camp { position: relative; height: 480px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 32px; background-size: cover; background-position: center; transition: filter .2s; }
.camp:hover { filter: brightness(1.15); }
.camp .tag { position: absolute; top: 24px; left: 32px; }
.camp .nom { font-family: var(--anton); font-size: 46px; line-height: 1; text-transform: uppercase; }
.camp .res { color: #C3CEDC; }
.camp-legal { --acc: var(--legal); background-image: linear-gradient(180deg, rgba(5,9,15,.05) 25%, rgba(5,9,15,.94) 100%), url(img/legal.webp); }
.camp-illegal { --acc: var(--illegal); background-image: linear-gradient(180deg, rgba(5,9,15,.05) 25%, rgba(5,9,15,.94) 100%), url(img/illegal-v2.webp); }
.camp-police { --acc: var(--police); background-image: linear-gradient(180deg, rgba(5,9,15,.05) 25%, rgba(5,9,15,.94) 100%), url(img/lspd-v2.webp); }

/* Bandeaux */
.band { background-size: cover; background-position: center; }
.band-staff { background-image: linear-gradient(180deg, rgba(5,9,15,.86), rgba(5,9,15,.95)), url(img/ville-jour.webp); }
.band-in { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.band-in > div:first-child { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; }
.band-in > div:first-child p { margin: 0; font-size: 18px; color: #B4C0D0; }
.band-in .h2 { margin: 0; font-size: 64px; }
.band-in .h2 span { color: var(--acc); }
.band-in .grid-2 { flex: 1 1 520px; }
.shop { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 44px 48px; background: linear-gradient(120deg, #101E33, #0B1422); border: 1px solid var(--line); border-left: 4px solid var(--acc); }
.shop .h2 { margin: 8px 0 8px; font-size: 44px; }
.shop p { margin: 0; color: #B4C0D0; max-width: 560px; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-family: var(--anton); font-size: 24px; line-height: 1.2; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--acc); font-size: 30px; line-height: .9; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 24px; max-width: 820px; color: var(--mut); }

/* Règlement */
.search { display: flex; gap: 0; max-width: 760px; margin-top: 8px; }
.search input { flex: 1; min-width: 0; height: 60px; padding: 0 22px; border: 1px solid var(--line); border-right: 0; background: rgba(5,9,15,.8); color: var(--txt); font: inherit; font-size: 18px; outline: none; }
.search input:focus { border-color: var(--acc); }
.res-info { margin: 0 0 18px; color: var(--mut); }
.res { display: block; padding: 20px 24px; background: var(--bg2); border: 1px solid var(--line); margin-bottom: 10px; transition: border-color .15s; }
.res:hover { border-color: var(--acc); }
.res .ou { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--acc); }
.res .txt { margin-top: 6px; }
.res mark { background: rgba(127,177,238,.25); color: var(--txt); padding: 0 2px; }
.pole { gap: 10px; }
.pole .nom { font-size: 30px; }

/* Pied de page */
.foot { border-top: 1px solid #13233A; background: #04070C; }
.foot-in { padding: 56px 40px 40px; display: flex; gap: 56px; flex-wrap: wrap; }
.foot-in > div:first-child { flex: 1 1 260px; display: flex; flex-direction: column; gap: 14px; }
.foot-in > div:first-child img { height: 40px; width: auto; align-self: flex-start; }
.foot-col { display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.foot-col .kicker { color: var(--dim); }
.foot a { color: var(--mut); }
.foot a:hover { color: var(--txt); }
.foot-bas { padding: 18px 40px 28px; border-top: 1px solid #101C2E; font-size: 13px; color: var(--dim); }

/* Copie */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 20; padding: 12px 20px; background: var(--txt); color: var(--bg); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s; }
.toast.on { opacity: 1; }

/* Mobile */
@media (max-width: 980px) {
  .hdr { flex-wrap: wrap; gap: 14px 24px; padding: 16px 20px; }
  .nav { order: 3; width: 100%; overflow-x: auto; gap: 22px; padding-bottom: 4px; }
  .hdr-cta .btn-s { display: none; }
  .wrap { padding: 0 20px; }
  .hero-in { padding-top: 170px; min-height: 520px; }
  .hero-in h1 { font-size: 60px; }
  .hero-center { padding-top: 170px; min-height: 0; }
  .hero-center h1 { font-size: 76px; }
  .h2 { font-size: 40px; }
  .band-in .h2 { font-size: 46px; }
  .sec { padding-top: 70px; padding-bottom: 70px; }
  .grid-2 { grid-template-columns: 1fr; }
  .chrono div { min-width: 70px; } .chrono b { font-size: 34px; }
  .camp { height: 380px; }
  .shop { padding: 32px 24px; }
  .foot-in, .foot-bas { padding-left: 20px; padding-right: 20px; }
}
.grid + .h2 { margin-top: 64px; }

/* En-tête centré : logo | menu | boutons */
.hdr { display: grid; grid-template-columns: 1fr auto 1fr; }
.hdr .logo { justify-self: start; }
.hdr .nav { justify-self: center; }
.hdr-cta { justify-self: end; margin-left: 0; }
.hero-court .hero-in { min-height: 460px; }
.hero-shop { background-image: linear-gradient(180deg, rgba(5,9,15,.6) 0%, rgba(5,9,15,.45) 40%, var(--bg) 100%), url(img/ville-nuit-v2.webp); }

/* Règlement */
.rg { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.rg-nav { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 6px; }
.rg-pole { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; text-align: left; font-family: var(--anton); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--mut); }
.rg-pole small { font-family: Outfit, sans-serif; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--dim); }
.rg-pole.on { color: var(--txt); border-left-color: var(--acc); background: var(--bg3); }
.rg-secs { display: flex; flex-direction: column; margin: 4px 0 10px; }
.rg-secs a { padding: 6px 14px 6px 17px; font-size: 14px; color: var(--mut); border-left: 1px solid var(--line); }
.rg-secs a:hover, .rg-secs a.on { color: var(--txt); border-left-color: var(--acc); }
.rg-main h2 { margin: 0 0 6px; font-size: 48px; line-height: 1; }
.rg-intro { margin: 0 0 30px; color: var(--mut); max-width: 760px; }
.rg-sec { padding-top: 28px; scroll-margin-top: 20px; }
.rg-sec h3 { display: flex; gap: 14px; align-items: baseline; margin: 0 0 14px; font-size: 26px; line-height: 1.15; }
.rg-sec h3 span { color: var(--acc); font-size: 20px; }
.rg-r { display: flex; gap: 14px; padding: 10px 14px; border-left: 2px solid transparent; scroll-margin-top: 20px; }
.rg-r .ref { flex: none; min-width: 44px; font-family: var(--anton); font-size: 15px; color: var(--dim); padding-top: 2px; }
.rg-r.sub { padding-left: 46px; }
.rg-r.sub .ref { min-width: 24px; }
.rg-r strong { color: var(--txt); font-weight: 600; }
.rg-r p { margin: 0; color: #C9D3E0; }
.rg-r.warn { background: rgba(232,82,74,.08); border-left-color: var(--ko); }
.rg-r.note { background: rgba(127,177,238,.07); border-left-color: var(--acc); }
.rg-r .lab { flex: none; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 8px; height: fit-content; }
.rg-r.warn .lab { color: var(--ko); border: 1px solid var(--ko); }
.rg-r.note .lab { color: var(--acc); border: 1px solid var(--acc); }
.rg-sub { margin: 18px 0 6px; font-family: var(--anton); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--acc); }
.rg-r.flash { animation: flash 2s ease-out; }
@keyframes flash { from { background: rgba(127,177,238,.35); } }
.res { cursor: pointer; }

/* Boutique */
.shop-cat { margin-bottom: 64px; }
.shop-cat .h2 { margin-bottom: 8px; }
.shop-cat > p { margin: 0 0 24px; color: var(--mut); }
.shop-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.art { background: var(--bg2); border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.art:hover { border-color: var(--acc); transform: translateY(-2px); }
.art .img { aspect-ratio: 16 / 10; background: #0F1B2D center / contain no-repeat; }
.art .img img { width: 100%; height: 100%; object-fit: contain; }
.art .in { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.art .nom { font-family: var(--anton); font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.art .prix { font-family: var(--anton); font-size: 30px; color: var(--acc); }
.art .prix small { font-family: Outfit, sans-serif; font-size: 14px; color: var(--mut); }
.art ul { margin: 0; padding-left: 18px; color: var(--mut); font-size: 14px; flex: 1; }
.art li { margin: 3px 0; }
.art .btn { align-self: stretch; }
.note-shop { border-left: 4px solid var(--acc); }

/* Fiche entreprise */
.card.clic { cursor: pointer; transition: border-color .15s, transform .15s; }
.card.clic:hover { border-color: var(--acc); transform: translateY(-2px); }
.card .voir { margin-top: 8px; font-family: var(--anton); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--acc); }
.fiche { width: min(640px, calc(100% - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--line); border-top: 4px solid var(--acc); background: var(--bg2); color: var(--txt); }
.fiche::backdrop { background: rgba(2,5,10,.75); }
.fiche-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; color: var(--mut); font-size: 30px; cursor: pointer; }
.fiche-x:hover { color: var(--txt); }
#fiche-corps { padding: 30px 32px 32px; display: flex; flex-direction: column; gap: 14px; }
#fiche-corps h2 { margin: 0; font-size: 44px; line-height: 1; }
.fiche .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.fiche .stat { background: var(--bg); border: 1px solid var(--line); padding: 12px 14px; }
.fiche .stat b { display: block; font-family: var(--anton); font-weight: 400; font-size: 28px; color: var(--acc); }
.fiche .stat span { font-size: 13px; color: var(--mut); }
.fiche .grs { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche .grs span { padding: 4px 10px; border: 1px solid var(--line); font-size: 14px; color: #C9D3E0; }
.fiche h3 { margin: 6px 0 0; font-size: 18px; letter-spacing: 1px; color: var(--mut); }

@media (max-width: 980px) {
  .hdr { display: flex; }
  .rg { grid-template-columns: 1fr; }
  .rg-nav { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .rg-nav .rg-secs { display: none; }
  .rg-pole { width: auto; }
  .rg-main h2 { font-size: 36px; }
}

/* Services en direct */
.svcs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.svc { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--bg2); border: 1px solid var(--line); }
.svc .n { flex: 1; font-family: var(--anton); font-size: 18px; letter-spacing: .5px; text-transform: uppercase; color: var(--mut); }
.svc b { font-family: var(--anton); font-weight: 400; font-size: 26px; color: var(--dim); }
.svc.on .n { color: var(--txt); } .svc.on b { color: var(--ok); }
.fiche .stat b.nomrp { font-size: 20px; line-height: 1.2; color: var(--txt); }
.an-img { width: 100%; max-height: 280px; object-fit: cover; margin: 4px 0; }
.an-txt { max-height: 260px; overflow: auto; line-height: 1.6; }
.an-txt .an-h { display: inline-block; font-family: Anton, sans-serif; font-weight: 400; font-size: 1.2em; letter-spacing: .02em; text-transform: uppercase; margin: 2px 0; }
.an-txt small { color: var(--dim); }
.an-txt .an-q { display: inline-block; border-left: 3px solid var(--dim); padding-left: 8px; }
#annonces { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }