/* ============================================
   STUFF ARENA — Design System
   Cyberpunk maîtrisé, lisibilité prioritaire
   ============================================ */

/* ---------- FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Palette issue du logo */
    --cyan: #5BE4E4;
    --cyan-dim: #3BA8A8;
    --cyan-glow: rgba(91, 228, 228, 0.5);
    --amber: #F4B93C;
    --amber-dim: #B8871F;
    --amber-glow: rgba(244, 185, 60, 0.5);
    --orange: #D95A1F;
    --orange-glow: rgba(217, 90, 31, 0.5);

    /* Fonds */
    --bg-darkest: #060910;
    --bg-dark: #0A0E14;
    --bg-surface: #121821;
    --bg-elevated: #1A2230;
    --bg-hover: #232D3F;

    /* Texte */
    --text-primary: #E8ECF2;
    --text-secondary: #9BA8B8;
    --text-muted: #5C6778;
    --text-dim: #3A4351;

    /* Bordures */
    --border: #1E2838;
    --border-bright: #2A3547;

    /* Typographie */
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Espacements */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-dark);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(91, 228, 228, 0.08), transparent),
        radial-gradient(ellipse 60% 50% at 80% 120%, rgba(244, 185, 60, 0.04), transparent);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Grille fine cyberpunk en fond */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(91, 228, 228, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 228, 228, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, black 40%, transparent 100%);
}

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--text-primary);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }

a {
    color: var(--cyan);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--amber);
}

.mono { font-family: var(--font-mono); }

.text-cyan { color: var(--cyan); }
.text-amber { color: var(--amber); }
.text-orange { color: var(--orange); }
.text-muted { color: var(--text-muted); }

/* ---------- LAYOUT ---------- */
.container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

main {
    padding: 48px 0 96px;
    position: relative;
    z-index: 1;
}

/* Drapeau image (flagcdn.com) — injecté par getCountryFlag() de main.js
   dans les meta-pills joueur, player-cards roster, et subtitle équipe. */
.flag-img {
    width: 32px;
    height: 24px;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 2px;
}

/* ---------- HEADER / NAV ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 14, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent);
    opacity: 0.6;
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    gap: 32px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.nav-logo img {
    height: 80px;
    width: auto;
    filter: drop-shadow(0 0 12px rgba(91, 228, 228, 0.3));
}

.footer-logo img {
    height: 48px;
}

.nav-logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

.nav-logo-text .arena {
    color: var(--amber);
}

.nav-links {
    display: flex;
    gap: 4px;
    list-style: none;
    align-items: center;
}

.nav-links a {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    transition: all 0.2s var(--ease-out);
    position: relative;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--cyan);
    background: rgba(91, 228, 228, 0.08);
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 18px;
    right: 18px;
    height: 1px;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

.nav-mobile-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border-bright);
    color: var(--cyan);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* ---------- BUTTONS ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    position: relative;
}

.btn-primary {
    background: var(--cyan);
    color: var(--bg-darkest);
    box-shadow: 0 0 24px rgba(91, 228, 228, 0.3);
}

.btn-primary:hover {
    background: #7EEFEF;
    box-shadow: 0 0 32px rgba(91, 228, 228, 0.6);
    transform: translateY(-2px);
    color: var(--bg-darkest);
}

.btn-secondary {
    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
}

.btn-secondary:hover {
    background: rgba(91, 228, 228, 0.08);
    border-color: var(--cyan);
    color: var(--cyan);
}

.btn-amber {
    background: var(--amber);
    color: var(--bg-darkest);
    box-shadow: 0 0 24px rgba(244, 185, 60, 0.3);
}

.btn-amber:hover {
    background: #FFCD5C;
    box-shadow: 0 0 32px rgba(244, 185, 60, 0.6);
    transform: translateY(-2px);
    color: var(--bg-darkest);
}

/* ---------- HERO ---------- */
.hero {
    position: relative;
    padding: 64px 0 96px;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 24px;
    padding: 6px 12px;
    border: 1px solid var(--cyan-dim);
    border-radius: var(--radius-sm);
    background: rgba(91, 228, 228, 0.05);
}

.hero-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--cyan);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1;
    margin-bottom: 24px;
}

.hero h1 .accent {
    color: var(--amber);
    text-shadow: 0 0 24px var(--amber-glow);
}

.hero p {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 540px;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Featured player card */
.featured-card {
    position: relative;
    background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(91, 228, 228, 0.1);
    overflow: hidden;
}

.featured-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--amber), transparent);
}

.featured-card-corners {
    position: absolute;
    inset: 8px;
    pointer-events: none;
}
.featured-card-corners::before,
.featured-card-corners::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1px solid var(--cyan);
}
.featured-card-corners::before {
    top: 0; left: 0;
    border-right: none;
    border-bottom: none;
}
.featured-card-corners::after {
    bottom: 0; right: 0;
    border-left: none;
    border-top: none;
}

.featured-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--amber);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--amber);
}

.featured-player {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.featured-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan-dim), var(--amber-dim));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.75rem;
    color: var(--bg-darkest);
    flex-shrink: 0;
    border: 2px solid var(--cyan);
    box-shadow: 0 0 24px var(--cyan-glow);
    overflow: hidden;            /* clipe la photo dans le cercle (gradient/initiale = fallback) */
}

/* Image avatar dans le bloc featured de l'index */
.featured-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.featured-info h2 {
    font-size: 1.75rem;
    margin-bottom: 4px;
    line-height: 1.1;
}

.featured-info .real-name {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.featured-team-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 3px 10px;
    background: rgba(244, 185, 60, 0.1);
    color: var(--amber);
    border: 1px solid var(--amber-dim);
    border-radius: var(--radius-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Encart "Setup en cours de constitution" — affiché dans le bloc featured
   de l'index quand le joueur vedette n'a pas (encore) de gear renseigné.
   Sobre, fond bg-surface, accent ambre sur le titre, lien cyan vers le roster. */
.featured-gear-empty {
    background: var(--bg-surface);
    border: 1px dashed var(--border-bright);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    margin-bottom: 20px;
}

.gear-empty-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--amber);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.gear-empty-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 14px;
}

.gear-empty-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--cyan);
    text-decoration: none;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--cyan-dim);
    padding-bottom: 1px;
    transition: color 0.2s, border-color 0.2s;
}

.gear-empty-link:hover {
    color: var(--amber);
    border-color: var(--amber);
}

.featured-gear {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.gear-mini {
    padding: 12px 14px;
    background: var(--bg-darkest);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}

.gear-mini:hover {
    border-color: var(--cyan-dim);
}

.gear-mini .label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 4px;
}

.gear-mini .value {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* ---------- SECTION HEADERS ---------- */
.section {
    padding: 64px 0;
}

.section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.section-title-group {
    max-width: 600px;
}

.section-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cyan);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--cyan);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.1;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-top: 8px;
}

.section-link {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--amber-dim);
}

.section-link:hover {
    color: var(--amber);
    border-color: var(--amber);
}

/* ---------- CATEGORY CARDS (Accueil) ---------- */
.categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.category-card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    text-align: left;
    overflow: hidden;
    transition: all 0.3s var(--ease-out);
    display: block;
    color: inherit;
    min-height: 220px;
}

/* Stat numérique (8, 24, 5) affichée dans chaque .category-card de l'index.
   Couleur cyan pour la 1re carte, ambre pour la 2e, orange pour la 3e —
   accents progressifs cohérents avec la palette cyberpunk du site. */
.category-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 8px 0 12px;
}

.category-stat-num {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}

.category-stat-unit {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--cyan-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.category-card:nth-child(2) .category-stat-num { color: var(--amber); }
.category-card:nth-child(2) .category-stat-unit { color: var(--amber-dim); }
.category-card:nth-child(3) .category-stat-num { color: var(--orange); }
.category-card:nth-child(3) .category-stat-unit { color: var(--orange); opacity: 0.6; }

.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(91, 228, 228, 0.04));
    transition: opacity 0.3s;
}

.category-card:hover {
    transform: translateY(-4px);
    border-color: var(--cyan-dim);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 32px rgba(91, 228, 228, 0.1);
    color: inherit;
}

.category-card:hover .category-icon {
    color: var(--cyan);
    transform: scale(1.05);
}

.category-card:hover .category-arrow {
    transform: translate(4px, -4px);
    color: var(--amber);
}

.category-num {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.category-icon {
    font-size: 2.25rem;
    color: var(--cyan-dim);
    margin-bottom: 20px;
    transition: all 0.3s var(--ease-out);
    line-height: 1;
}

.category-card h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.category-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.category-arrow {
    position: absolute;
    bottom: 24px;
    right: 24px;
    color: var(--cyan-dim);
    font-size: 1.25rem;
    transition: transform 0.3s var(--ease-out), color 0.3s;
}

/* ---------- TEAM CARDS ---------- */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.team-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    transition: all 0.3s var(--ease-out);
    text-align: center;
    display: block;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--cyan);
    transition: width 0.3s var(--ease-out);
}

.team-card:hover {
    transform: translateY(-3px);
    border-color: var(--cyan-dim);
    color: inherit;
}

.team-card:hover::before {
    width: 60%;
}

.team-badge {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--bg-darkest);
    background: linear-gradient(135deg, var(--cyan), var(--amber));
    border: 2px solid var(--border-bright);
    overflow: hidden;            /* clipe la photo dans le cercle quand img injectée par JS */
}

/* Image avatar joueur dans une .team-card du roster — injectée par team.js */
.team-badge img.player-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Wrapper logo équipe dans une .team-card (equipes.html, liste).
   Remplace .team-badge quand team.logo existe : pas de cercle, pas de gradient.
   Le logo officiel s'affiche tout seul en object-fit contain, garde la même
   place visuelle (80px, centré, marge basse 16px) que le badge originel. */
.team-card-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Liste de tags jeux courts ("LoL", "VAL", "CS2", "RL") sous la ligne region.
   Pills mono cyan, alignées au centre, espacement compact. */
.team-card-games {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}

.team-card-game {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--cyan);
    background: rgba(91, 228, 228, 0.08);
    border: 1px solid var(--cyan-dim);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.team-card h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.team-region {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.team-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.team-stat {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.team-stat span {
    color: var(--cyan);
    font-weight: 600;
}

/* =============================================
   Player-cards "Hero" des rosters d'équipe.
   Layout VERTICAL : zone image hero 280px en haut,
   zone info compacte en bas. Style Pinterest / KC.
   ============================================= */
.players-roster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .players-roster-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .players-roster-grid {
        grid-template-columns: 1fr;
    }
}

.player-card {
    display: block;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;            /* CRITIQUE — clipe la photo hero dans la carte */
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, border-color 0.2s;
}

.player-card:hover {
    border-color: var(--cyan-dim);
}

/* Zone hero : carré 1:1, la hauteur s'adapte à la largeur de la carte.
   Format aligné sur le ratio des avatars IA (1024×1024) → plus de rognage.
   Soit une <img> object-fit: cover, soit une initiale géante en fallback. */
.player-card-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;         /* carré : matche le ratio natif des avatars 1024×1024 */
    overflow: hidden;
    background: var(--bg-darkest);
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-card-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

/* Léger zoom de l'image au hover */
.player-card:hover .player-card-hero img {
    transform: scale(1.05);
}

/* Initiale géante quand player.photo est vide. Le fond gradient team
   est appliqué au .player-card-hero via JS (applyTeamGradientTeam). */
.player-card-hero-initial {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 120px;
    color: var(--bg-darkest);
    opacity: 0.6;
    line-height: 1;
    text-align: center;
}

/* Zone info en bas */
.player-card-info {
    padding: 20px;
}

.player-card-pseudo {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.2;
}

.player-card-realname {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 10px;
    line-height: 1.3;
}

.player-card-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.player-card-stats {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--amber);
    margin: 6px 0 0;
    letter-spacing: 0.5px;
}

/* ---------- GEAR CATEGORY PAGE ---------- */
.gear-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 56px;
}

.gear-cat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease-out);
    display: block;
    color: inherit;
}

.gear-cat-card:hover {
    border-color: var(--cyan-dim);
    transform: translateY(-2px);
    color: inherit;
}

.gear-cat-card .icon {
    font-size: 2rem;
    color: var(--amber);
    margin-bottom: 16px;
    display: block;
}

.gear-cat-card h3 {
    font-size: 1.2rem;
    margin-bottom: 6px;
}

.gear-cat-card .count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

/* ---------- PRODUCT CARDS ---------- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.product-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s var(--ease-out);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--cyan-dim);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.product-image {
    aspect-ratio: 4/3;
    background: var(--bg-darkest);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(10, 14, 20, 0.6));
}

.product-image .placeholder-icon {
    font-size: 3.5rem;
    color: var(--border-bright);
    opacity: 0;                          /* hydratation JS : caché par défaut, JS décide quoi afficher */
    transition: opacity 0.15s ease;
}

/* Image réelle injectée par hydrateProductCards() — superposée à l'emoji-placeholder */
.product-image img.card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
}
/* Désactive le gradient overlay quand une vraie image est affichée */
.product-image:has(img.card-img)::after {
    display: none;
}

.product-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 3px 8px;
    background: rgba(91, 228, 228, 0.1);
    color: var(--cyan);
    border-radius: var(--radius-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
    align-self: start;
}

.product-card h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.product-brand {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 14px;
    letter-spacing: 0.1em;
}

.product-used-by {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    flex: 1;
}

.product-used-by strong {
    color: var(--amber);
    font-weight: 600;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;        /* pousse le footer en bas du .product-body flex column
                                 → tous les footers alignés horizontalement dans la grille */
}

.product-price {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--cyan);
    font-weight: 700;
}

.btn-buy {
    padding: 8px 14px;
    font-size: 0.75rem;
    background: var(--amber);
    color: var(--bg-darkest);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.2s;
}

.btn-buy:hover {
    background: #FFCD5C;
    color: var(--bg-darkest);
    box-shadow: 0 0 16px var(--amber-glow);
}

/* Placeholder "Lien à venir" — affiché par buildProductCard() quand
   product.affiliate_url est manquante ou "À vérifier". Signal visuel
   désaturé + curseur not-allowed pour indiquer l'inactivité. */
.btn-buy-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.btn-buy-disabled:hover {
    background: var(--bg-elevated);
    color: var(--text-muted);
    box-shadow: none;
}

/* ---------- PLAYER PROFILE PAGE ---------- */
.player-header {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.player-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--amber));
}

.player-header-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
}

.player-avatar-large {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan-dim), var(--amber-dim));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.75rem;
    color: var(--bg-darkest);
    border: 3px solid var(--cyan);
    box-shadow: 0 0 40px var(--cyan-glow);
    overflow: hidden;            /* clipe la photo dans le cercle quand img injectée par JS */
}

/* Image avatar joueur — injectée par player.js si player.photo est défini */
.player-avatar-large img.player-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Wrapper du logo équipe dans le header de la fiche équipe (equipe.html).
   Remplace .player-avatar-large quand team.logo existe : pas de cercle,
   pas de bordure, pas de halo — juste l'image 80×80 en object-fit contain.
   La bascule de classe est faite par team.js (renderTeam). */
.team-header-logo {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.team-header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.player-title .pseudo {
    font-size: clamp(2rem, 4.5vw, 3rem);
    margin-bottom: 4px;
}

.player-title .realname {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.player-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.meta-pill {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 6px 12px;
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.meta-pill .icon { color: var(--cyan); margin-right: 6px; }

.player-stats-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 160px;
}

.stat-block {
    background: var(--bg-darkest);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    text-align: right;
}

.stat-block .label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.stat-block .value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--amber);
    font-weight: 700;
}

/* Setup gear grid */
.setup-section { margin-bottom: 40px; }

.setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.setup-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    gap: 16px;
    transition: all 0.3s;
    align-items: flex-start;
}

.setup-item:hover {
    border-color: var(--cyan-dim);
    transform: translateY(-2px);
}

.setup-item-img {
    width: 72px;
    height: 72px;
    position: relative;            /* contexte de positionnement pour l'image absolute */
    background: var(--bg-darkest);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--border-bright);
}

/* Wrapping span créé dynamiquement par hydrateProductCards() autour de l'emoji */
.setup-item-img > .emoji-fallback {
    opacity: 0;
    transition: opacity 0.15s ease;
}
/* Image réelle injectée par hydrateProductCards() */
.setup-item-img img.card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    box-sizing: border-box;
}

.setup-item-body {
    flex: 1;
    min-width: 0;
}

.setup-item .category {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--cyan);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.setup-item h4 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.setup-item .brand {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.setup-item .buy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--amber);
    padding: 6px 12px;
    border: 1px solid var(--amber-dim);
    border-radius: var(--radius-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.2s;
}

.setup-item .buy-link:hover {
    background: var(--amber);
    color: var(--bg-darkest);
}

/* Settings table (sensi, DPI etc.) */
.settings-block {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px 28px;
}

.settings-block h3 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-block h3::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--cyan);
    display: block;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.setting-item {
    background: var(--bg-darkest);
    padding: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.setting-item .label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.setting-item .value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--cyan);
    font-weight: 700;
}

/* Placeholder affiché quand le setup d'un joueur n'est pas renseigné.
   Cadre sobre en pointillé, texte centré, accent ambre sur "Données à venir". */
.setup-empty {
    background: var(--bg-surface);
    border: 1px dashed var(--border-bright);
    border-radius: var(--radius-md);
    padding: 40px 32px;
    text-align: center;
    color: var(--text-secondary);
}

.setup-empty h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.setup-empty p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.95rem;
}

.setup-empty strong {
    color: var(--amber);
    font-family: var(--font-mono);
    font-weight: 600;
}

/* État erreur "Joueur introuvable" sur joueur.html */
.player-error {
    padding: 80px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.player-error h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--cyan);
    margin-bottom: 16px;
}

.player-error p {
    line-height: 1.6;
}

.player-error a {
    color: var(--amber);
    text-decoration: underline;
}

/* Realname discret affiché sous le pseudo dans les player-cards d'un roster d'équipe */
.team-realname-mini {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* Mention "Roster mis à jour en mai 2026" sous chaque section roster */
.roster-update {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 16px;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

/* ---------- GAME CARDS ---------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.game-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    display: block;
    color: inherit;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.game-card:hover {
    border-color: var(--cyan-dim);
    transform: translateY(-3px);
    color: inherit;
}

.game-icon {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2.5rem;
    color: var(--amber);
    margin-bottom: 16px;
    line-height: 1;
    letter-spacing: -0.04em;
}

/* Wrapper logo officiel dans une .game-card — alternative au .game-icon emoji.
   Le JS (buildGameCard) bascule entre .game-logo (img) et .game-icon (emoji) selon game.logo. */
.game-card .game-logo {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.game-card .game-logo img {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.game-card h3 {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.game-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.game-stats {
    display: flex;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.game-stats span {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.game-stats span strong {
    color: var(--cyan);
    font-weight: 600;
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--text-secondary);
}

.breadcrumb a:hover { color: var(--cyan); }

.breadcrumb .separator { color: var(--text-dim); }

.breadcrumb .current { color: var(--cyan); }

/* ---------- FOOTER ---------- */
.site-footer {
    background: var(--bg-darkest);
    border-top: 1px solid var(--border);
    padding: 56px 0 32px;
    margin-top: 96px;
    position: relative;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

.footer-brand p {
    color: var(--text-secondary);
    margin-top: 16px;
    font-size: 0.9rem;
    max-width: 340px;
}

.footer-col h4 {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 16px;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col a {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer-col a:hover { color: var(--cyan); }

.footer-bottom {
    padding-top: 32px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.disclosure {
    font-size: 0.7rem;
    color: var(--text-muted);
    max-width: 680px;
    line-height: 1.5;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .categories { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .player-header-grid { grid-template-columns: 1fr; text-align: center; }
    .player-avatar-large { margin: 0 auto; }
    .player-meta { justify-content: center; }
    .player-stats-col { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .stat-block { text-align: center; flex: 1; min-width: 120px; }
}

@media (max-width: 768px) {
    .nav-logo img { height: 48px; }
    .nav-logo-text { font-size: 1.25rem; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        padding: 16px;
        gap: 4px;
    }
    .nav-links.open { display: flex; }
    .nav-links a { width: 100%; padding: 12px 16px; }
    .nav-mobile-toggle { display: flex; }

    .hero { padding: 32px 0 64px; }
    .section { padding: 40px 0; }
    .categories { grid-template-columns: 1fr; }
    .featured-gear { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .featured-card { padding: 24px; }
    .featured-player { flex-direction: column; text-align: center; }
    .player-header { padding: 24px; }
    .section-header { flex-direction: column; align-items: flex-start; }
}

/* ---------- UTILS ---------- */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.6s var(--ease-out) forwards;
}

@keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.6s var(--ease-out) forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }

/* ============================================
   PRODUCT DETAIL PAGE — Fiche produit
   ============================================ */

.product-detail {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    margin-bottom: 64px;
    padding: 32px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.product-detail-image {
    position: relative;
    aspect-ratio: 1/1;
    background: var(--bg-darkest);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-detail-image .product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
}

/* Placeholder filigrane (fallback tant qu'il n'y a pas d'image) */
.product-image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
}

.product-image-placeholder .watermark {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 60%;
    max-width: 240px;
    height: auto;
    opacity: 0.08;
    pointer-events: none;
}

.product-image-placeholder .placeholder-name {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--text-primary);
    margin-bottom: 14px;
    line-height: 1.2;
}

.product-image-placeholder .placeholder-category {
    position: relative;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 4px 12px;
    background: rgba(91, 228, 228, 0.1);
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    border-radius: var(--radius-sm);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.product-image-placeholder .placeholder-note {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Bloc d'infos produit */
.product-detail-info {
    display: flex;
    flex-direction: column;
}

.product-detail-name {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin: 12px 0 8px;
    line-height: 1.1;
}

.product-detail-brand {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

.product-detail-desc {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 32px;
}

.product-detail-buy {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.product-detail-price {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--cyan);
    font-weight: 700;
}

.affiliate-disclosure {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.affiliate-disclosure a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-decoration-color: var(--text-dim);
}

.affiliate-disclosure a:hover {
    color: var(--cyan);
}

/* Sections sous la fiche */
.product-section { margin-bottom: 64px; }

.product-section .section-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-section .section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

/* Tableau caractéristiques */
.product-specs-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.product-specs-table tr { border-bottom: 1px solid var(--border); }
.product-specs-table tr:last-child { border-bottom: none; }

.product-specs-table th,
.product-specs-table td {
    padding: 14px 20px;
    text-align: left;
    font-size: 0.95rem;
}

.product-specs-table th {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    width: 40%;
    background: var(--bg-darkest);
}

.product-specs-table td {
    color: var(--text-primary);
    font-weight: 500;
}

.product-specs-placeholder {
    padding: 32px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-bright);
    border-radius: var(--radius-md);
    text-align: center;
}

/* Cartes pros qui utilisent le produit */
.product-pros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.product-pro-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.2s var(--ease-out);
    color: inherit;
}

.product-pro-card:hover {
    border-color: var(--cyan-dim);
    transform: translateY(-2px);
    color: inherit;
}

.product-pro-card .pro-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan-dim), var(--amber-dim));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--bg-darkest);
    flex-shrink: 0;
}

.product-pro-card .pro-pseudo {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
}

.product-pro-card .pro-realname {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.product-pro-card .pro-role {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--cyan);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* État erreur (produit introuvable) */
.product-error {
    text-align: center;
    padding: 96px 24px;
}

.product-error h1 {
    color: var(--orange);
    margin-bottom: 16px;
}

.product-error p {
    color: var(--text-secondary);
    margin-bottom: 32px;
    font-size: 1.1rem;
}

/* Pattern overlay link : carte cliquable avec bouton interne d'affiliation */
.product-card,
.setup-item {
    position: relative;
}

.card-overlay-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
}

.product-card .btn-buy,
.setup-item .buy-link {
    position: relative;
    z-index: 2;
}

/* ============================================
   Barres de stats pixel (style rétro) — fiche produit
   ============================================
   Visualisation rapide des performances clés par catégorie.
   Une rangée = label + barre pixel 16 cases + valeur brute.
   Couleurs dynamiques injectées en inline-style par product.js. */
.product-stat-bars {
    margin-bottom: 32px;
}

.stat-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.stat-bar-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
    width: 100px;
    flex-shrink: 0;
    letter-spacing: 0.08em;
}

.stat-pixel-bar {
    display: flex;
    gap: 3px;
    flex: 1;
}

.stat-pixel {
    flex: 1;
    height: 14px;
    border-radius: 2px;
    background: var(--bg-elevated);
}

.stat-pixel-on {
    /* couleur appliquée inline par makePixelBar() */
}

.stat-bar-val {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-primary);
    width: 80px;
    text-align: right;
    flex-shrink: 0;
}

/* ============================================
   Bloc review (avis Stuff Arena) — fiche produit.
   Affiché si product.review existe dans gear.json.
   ============================================ */
.product-review-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-top: 48px;
}

/* Ajustements spécifiques quand le cadre review est dans le wrapper avec titre extérieur :
   on rapproche le cadre du titre "Notre Avis" pour qu'ils forment un bloc visuel cohérent. */
#product-review-wrapper .section-title { margin-bottom: 12px; }
#product-review-wrapper .product-review-section { margin-top: 0; }

.product-review-section .section-header {
    margin-bottom: 24px;
}

.review-score-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-stars {
    font-size: 1.5rem;
    color: var(--amber);
    letter-spacing: 2px;
    line-height: 1;
}

.review-score-num {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--cyan);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.review-intro {
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.8;
    margin-bottom: 28px;
    padding-left: 16px;
    border-left: 2px solid var(--cyan-dim);
}

.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}

.review-col {
    background: var(--bg-darkest);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.review-col-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 14px;
    font-weight: 700;
}

.review-col-pros .review-col-title { color: var(--cyan); }
.review-col-cons .review-col-title { color: var(--orange); }

.review-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.review-list li {
    padding: 6px 0 6px 22px;
    position: relative;
    line-height: 1.6;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.review-list-pros li::before {
    content: '+';
    position: absolute;
    left: 0;
    color: var(--cyan);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.4;
}

.review-list-cons li::before {
    content: '−';
    position: absolute;
    left: 0;
    color: var(--orange);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.4;
}

.review-verdict-wrap {
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.review-verdict-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--amber);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 10px;
    font-weight: 700;
}

.review-verdict {
    color: var(--text-primary);
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0;
}

/* Responsive : 1 colonne sous 900px */
@media (max-width: 900px) {
    .product-detail {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 24px;
    }
    .review-grid {
        grid-template-columns: 1fr;
    }
    .product-review-section .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ============================================
   Bio & Palmarès joueur (page joueur.html)
   Cards sombres, accent cyan, cohérence design system.
   Variables ajustées : --bg-elevated (équivalent card), --cyan (accent).
   ============================================ */
.player-bio-section,
.player-palmares-section {
    margin-bottom: 32px;
    padding: 0;
}

.player-bio-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan);
    border-radius: var(--radius-md);
    padding: 24px 28px;
}

.player-bio-text {
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1.9;
    margin: 0;
}

.player-palmares-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.player-palmares-list li {
    color: var(--text-primary);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.palm-icon {
    font-size: 1rem;
    flex-shrink: 0;
}