/* Page des événements (/assistant/events) : bandeau, filtres, fiche de chaque jeu, édition à la une et grille des autres éditions.
   Chaque événement définit son accent avec --ev-rgb. Préfixe « ev- ». */

.ev-page { --ev-rgb: 126, 200, 227; }

/* ---------- Bandeau ---------- */
.ev-hero { position: relative; overflow: hidden; margin-bottom: 20px; padding: clamp(22px, 4vw, 48px); border-radius: 28px; border: 1px solid rgba(255, 200, 61, .25); isolation: isolate;
    background: radial-gradient(60% 130% at 100% 0%, rgba(255, 200, 61, .16) 0%, rgba(255, 200, 61, 0) 60%), radial-gradient(50% 120% at 0% 100%, rgba(126, 200, 227, .14) 0%, rgba(126, 200, 227, 0) 60%), linear-gradient(135deg, #10141f 0%, #0b0d14 75%); }
.ev-hero::after { content: "\f091"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif; font-weight: 900; position: absolute; z-index: -1; right: 5%; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: clamp(6rem, 18vw, 13rem); line-height: 1; color: rgba(255, 200, 61, .08); }
.ev-eyebrow { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffc83d; }
.ev-hero h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.ev-lead { margin: 12px 0 0; max-width: 58ch; color: var(--pyl-muted); font-size: 1.02rem; }
.ev-counters { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.ev-counters li { display: flex; flex-direction: column; min-width: 96px; padding: 10px 16px; border-radius: 16px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, .05); }
.ev-counters strong { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.ev-counters span { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pyl-muted); }

/* ---------- Filtres ---------- */
.ev-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ev-filter { padding: 7px 18px; border-radius: 999px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, .04); color: var(--pyl-text); font-size: .88rem; font-weight: 600; cursor: pointer; }
.ev-filter:hover { border-color: rgba(255, 255, 255, .3); }
.ev-filter.is-active { border-color: rgba(255, 200, 61, .7); background: rgba(255, 200, 61, .16); color: #fff; }

/* ---------- Un événement ---------- */
.ev-event { margin: 0 0 24px; padding: clamp(18px, 3vw, 32px); border-radius: 28px; border: 1px solid rgba(var(--ev-rgb), .3);
    background: radial-gradient(60% 90% at 0% 0%, rgba(var(--ev-rgb), .12) 0%, rgba(var(--ev-rgb), 0) 70%), var(--pyl-surface); }
.ev-event[hidden], .ev-featured[hidden], .ev-card[hidden], .ev-subtitle[hidden], .ev-grid[hidden], .ev-empty[hidden] { display: none; }
.ev-event-head { display: flex; align-items: center; gap: 14px; }
.ev-event-icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 18px; font-size: 1.6rem; color: rgb(var(--ev-rgb)); background: rgba(var(--ev-rgb), .14); border: 1px solid rgba(var(--ev-rgb), .4); }
.ev-event-head > div { flex: 1 1 auto; min-width: 0; }
.ev-event-head h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 800; color: #fff; }
.ev-tagline { margin: 2px 0 0; color: rgb(var(--ev-rgb)); font-weight: 600; font-size: .92rem; }
.ev-badge { flex: none; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, .05); color: var(--pyl-muted); font-size: .8rem; font-weight: 600; }
.ev-text { margin: 16px 0 10px; max-width: 78ch; color: #d3d9e8; }
.ev-howto { margin: 0 0 20px; }
.ev-howto summary { cursor: pointer; font-weight: 600; color: rgb(var(--ev-rgb)); }
.ev-howto ol { margin: 10px 0 0; padding-left: 1.3rem; color: var(--pyl-muted); display: flex; flex-direction: column; gap: 6px; }

/* ---------- Édition à la une ---------- */
.ev-featured { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; padding: clamp(16px, 2.5vw, 26px); border-radius: 22px; border: 1px solid rgba(var(--ev-rgb), .4);
    background: linear-gradient(135deg, rgba(var(--ev-rgb), .16) 0%, rgba(var(--ev-rgb), .04) 100%); }
.ev-kicker { margin: 0 0 6px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pyl-muted); }
.ev-featured h3 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 800; color: #fff; }
.ev-dates { margin: 0 0 10px; color: var(--pyl-muted); font-size: .9rem; }
.ev-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--pyl-line); font-size: .78rem; font-weight: 700; }
.ev-pill--running { border-color: rgba(76, 217, 130, .5); background: rgba(76, 217, 130, .12); color: #b9f5cf; }
.ev-pill--running::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4cd982; box-shadow: 0 0 10px #4cd982; animation: ev-pulse 1.8s ease-in-out infinite; }
.ev-pill--upcoming { border-color: rgba(255, 200, 61, .5); background: rgba(255, 200, 61, .12); color: #ffe39a; }
.ev-pill--ended { background: rgba(255, 255, 255, .06); color: var(--pyl-muted); }
@keyframes ev-pulse { 50% { opacity: .35; } }
.ev-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.ev-figures li { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--pyl-line); }
.ev-figures strong { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: rgb(var(--ev-rgb)); }
.ev-figures span { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pyl-muted); }
.ev-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: rgb(var(--ev-rgb)); color: #0b0d14; font-weight: 800; text-decoration: none; }
.ev-cta:hover { filter: brightness(1.1); color: #0b0d14; }
.ev-note { margin: 14px 0 0; color: var(--pyl-muted); font-size: .9rem; }
.ev-top { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ev-top li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--pyl-line); background: rgba(0, 0, 0, .25); }
.ev-top-1 { border-color: rgba(255, 200, 61, .5) !important; background: rgba(255, 200, 61, .1) !important; }
.ev-top-medal { font-size: 1.4rem; }
.ev-top-name { font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.ev-top-points { font-weight: 800; font-variant-numeric: tabular-nums; color: rgb(var(--ev-rgb)); white-space: nowrap; }

/* ---------- Autres éditions ---------- */
.ev-subtitle { margin: 24px 0 12px; font-size: 1.05rem; font-weight: 800; color: #fff; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ev-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--pyl-line); background: rgba(255, 255, 255, .04); }
.ev-card:hover { border-color: rgba(var(--ev-rgb), .5); }
.ev-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ev-card h4 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #fff; }
.ev-card .ev-dates { margin: 2px 0 6px; font-size: .82rem; }
.ev-card-line { margin: 0; font-size: .86rem; color: var(--pyl-muted); }
.ev-champion { color: #e8ecf5; }
.ev-link { margin-top: auto; padding-top: 10px; font-weight: 700; color: rgb(var(--ev-rgb)); text-decoration: none; }
.ev-link:hover { text-decoration: underline; }

/* ---------- Divers ---------- */
.ev-empty { margin: 0; padding: 28px 12px; text-align: center; color: var(--pyl-muted); }
.ev-soon { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 22px; border: 1px dashed rgba(255, 255, 255, .2); color: var(--pyl-muted); }
.ev-soon i { font-size: 1.5rem; color: #ffc83d; }
.ev-soon strong { color: #fff; }
.ev-soon p { margin: 2px 0 0; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .ev-pill--running::before { animation: none; } }
@media (max-width: 767.98px) {
    .ev-featured { grid-template-columns: 1fr; }
    .ev-event-head { flex-wrap: wrap; }
    .ev-badge { order: 3; }
}