main { max-width: 1200px; margin: 120px auto 0 auto; padding: 0 20px; }

/* Particules */
.particles-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -3; background-image: radial-gradient(1px 1px at 10% 10%, rgba(255, 255, 255, 0.1), transparent), radial-gradient(1.5px 1.5px at 30% 40%, rgba(0, 229, 255, 0.15), transparent), radial-gradient(1px 1px at 60% 80%, rgba(255, 255, 255, 0.15), transparent), radial-gradient(0.5px 0.5px at 80% 20%, rgba(0, 229, 255, 0.1), transparent), radial-gradient(2px 2px at 90% 70%, rgba(255, 255, 255, 0.1), transparent), radial-gradient(1px 1px at 40% 90%, rgba(0, 229, 255, 0.2), transparent), radial-gradient(1.5px 1.5px at 50% 30%, rgba(255, 255, 255, 0.15), transparent); background-size: 120px 160px, 200px 180px, 150px 200px, 100px 100px, 250px 250px, 180px 140px, 300px 220px; animation: falling-particles 25s linear infinite; }
@keyframes falling-particles { 0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 0px 160px, 0px 180px, 0px 200px, 0px 100px, 0px 250px, 0px 140px, 0px 220px; } }

/* HERO CYBERPUNK */
#hero { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 80px; margin-top: 150px; }
.hero-bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; display: flex; justify-content: center; align-items: center; }
.hero-logo-large-faded { max-width: 100vw; max-height: 80vh; object-fit: contain; opacity: 0.12; filter: brightness(60%); }
.hero-hud-layer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, 90vw); height: 400px; z-index: -1; }
.hud-frame { position: absolute; width: 40px; height: 40px; border-color: var(--neon-blue); border-style: solid; opacity: 0.5; z-index: 10;}
.hud-frame.top-left { border-width: 3px 0 0 3px; top: -3px; left: -3px; }
.hud-frame.top-right { border-width: 3px 3px 0 0; top: -3px; right: -3px; }
.hud-frame.bottom-left { border-width: 0 0 3px 3px; bottom: -3px; left: -3px; }
.hud-frame.bottom-right { border-width: 0 3px 3px 0; bottom: -3px; right: -3px; }
.hud-scanline { position: absolute; left: 0; width: 100%; height: 2px; background: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); animation: scan 3s linear infinite; z-index: 8; }
@keyframes scan { 0% { top: 0%; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 100%; opacity: 0; } }
.hero-content-layer { text-align: center; z-index: 1; }
.hero-tagline { font-family: var(--font-heading); font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; }
.hero-slogan { font-size: clamp(2.5rem, 6vw, 4rem); color: #fff; margin-top: 10px; font-weight: 700;}

/* ROSTER INFINI */
#roster-section { width: 100%; overflow: hidden; margin-bottom: 60px;}
.infinite-carousel { width: 100%; overflow: hidden; padding: 20px 0; -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.infinite-carousel-track { display: flex; width: max-content; animation: scroll-roster 25s linear infinite; }
.infinite-carousel-track:hover { animation-play-state: paused; }
.carousel-set { display: flex; gap: 30px; padding-right: 30px; }
@keyframes scroll-roster { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.roster-card { width: 280px; flex-shrink: 0; text-align: center; }
.player-pseudo { font-size: 1.6rem; margin-bottom: 15px; letter-spacing: 2px; }
.roster-showcase { position: relative; width: 100%; height: 320px; background: radial-gradient(circle at center, #0a1f3d 0%, #030a14 100%); border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 229, 255, 0.3); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8); transition: transform 0.3s ease, border-color 0.3s ease; }
.roster-card:hover .roster-showcase { transform: translateY(-10px); border-color: var(--neon-blue); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 229, 255, 0.3); }
.roster-bg-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; opacity: 0.15; z-index: 1; filter: drop-shadow(0 0 10px var(--neon-blue)); }
.roster-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 150px 80px, rgba(0, 229, 255, 0.8), transparent), radial-gradient(1px 1px at 80px 160px, #fff, transparent), radial-gradient(2px 2px at 220px 40px, #fff, transparent), radial-gradient(1px 1px at 280px 120px, rgba(0, 229, 255, 0.6), transparent), radial-gradient(1.5px 1.5px at 50px 220px, #fff, transparent), radial-gradient(2px 2px at 200px 250px, rgba(0, 229, 255, 0.5), transparent); background-size: 350px 350px; animation: twinkle 4s infinite alternate; }
@keyframes twinkle { 0% { opacity: 0.4; } 100% { opacity: 1; } }
.player-png { position: relative; z-index: 5; width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.8)); transition: transform 0.3s ease; }
.roster-card:hover .player-png { transform: scale(1.05); }

/* --- MATCH CARDS OPTIMISÉES --- */
.match-card { display: flex; flex-direction: column; gap: 15px; } /* Gap réduit de 20 à 15 */
.match-header { 
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; 
    gap: 8px; /* Gap réduit pour rapprocher le texte des scores */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    padding-bottom: 12px; 
}

.team-info { 
    display: flex; 
    align-items: center; 
    gap: 6px; /* Gap réduit entre le logo et le texte */
    font-family: var(--font-heading); 
    font-size: clamp(0.7rem, 2vw, 1.1rem); /* Texte légèrement réduit */
    font-weight: 700;
    white-space: nowrap; 
}

.team-name { white-space: nowrap; }
.deus-team { justify-content: flex-end; }
.opp-team { justify-content: flex-start; }

.team-logo { 
    width: clamp(20px, 3.5vw, 30px); /* Logos légèrement plus petits */
    height: clamp(20px, 3.5vw, 30px); 
    object-fit: contain; 
    flex-shrink: 0; 
}

.match-score-global { 
    font-family: var(--font-heading); 
    font-size: clamp(1.1rem, 2.5vw, 1.4rem); 
    font-weight: 700; 
    padding: 4px 10px; /* Moins de padding sur le score pour gagner de la place */
    border-radius: 4px; 
    white-space: nowrap;
}
.match-score-global.win { color: #00e5ff; background: rgba(0, 229, 255, 0.1); }
.match-score-global.loss { color: #ff0055; background: rgba(255, 0, 85, 0.1); }
.match-score-global.upcoming { color: var(--ice-blue); background: rgba(136, 192, 208, 0.1); font-size: 1.1rem; }

.match-upcoming-details { text-align: center; font-size: 0.85rem; color: var(--ice-blue); font-style: italic; }
.competition-name { text-align: center; color: var(--ice-blue); font-size: 0.85rem; text-transform: uppercase; margin-bottom: 5px; }

/* Maps en Flexbox adaptatif */
.maps-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.map-item { flex: 1 1 80px; background: rgba(0, 0, 0, 0.3); border-radius: 4px; overflow: hidden; text-align: center; border: 1px solid rgba(255, 255, 255, 0.05); }
.map-thumbnail { width: 100%; height: 50px; object-fit: cover; border-bottom: 1px solid rgba(0, 229, 255, 0.2); }
.map-info { padding: 4px; display: flex; flex-direction: column; }
.map-name { font-size: 0.7rem; color: var(--ice-blue); }
.map-score { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; }

/* FILTRES HISTORIQUE */
#hero-history { text-align: center; padding: 40px 0; margin-bottom: 40px; }
#hero-history h1 { font-size: 3rem; margin-bottom: 10px; }
#hero-history p { color: var(--ice-blue); font-size: 1.4rem; }
.filters-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; }
.filter-btn { background: transparent; color: var(--ice-blue); border: 1px solid rgba(0, 229, 255, 0.2); padding: 10px 25px; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; text-transform: uppercase; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; }
.filter-btn:hover { border-color: var(--neon-blue); color: #fff; box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); }
.filter-btn.active { background: var(--neon-blue); color: #000; border-color: var(--neon-blue); box-shadow: 0 0 15px rgba(0, 229, 255, 0.5); }

/* CONTACT */
#contact-section { max-width: 900px; margin: 0 auto; }
.contact-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.contact-card { flex: 1 1 280px; max-width: 350px; text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; cursor: pointer; text-decoration: none;}
.contact-card:hover { border-color: var(--neon-blue); transform: scale(1.02); }
.contact-card h3 { color: #fff; }
.contact-icon { font-size: 2.5rem; margin-bottom: 10px; }
.contact-link { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
.neon-card { border-color: var(--neon-blue); box-shadow: 0 0 20px rgba(0, 229, 255, 0.2); }
.neon-card:hover { box-shadow: 0 0 30px rgba(0, 229, 255, 0.5); }