/* =====================================================================
   ClutchCrosshair — univers « Retransmission Major »
   Chaque pro = une fiche joueur de retransmission : bandeau couleur d'équipe,
   nom en majuscules étroites, le crosshair en « stat », COPY en action principale.
   ===================================================================== */

/* ===== Les polices, hébergées sur le site (dossier fonts/, licence OFL) =====
   Aucune requête vers Google Fonts : plus rapide (pas d'autre serveur à contacter) et plus respectueux de la vie privée.
   Sous-ensemble « latin » ; les caractères rares s'affichent avec la police de secours. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/barlow-condensed-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Les variables : couleurs + typographie =====
   Palette « Charbon & Rouge signature » : noir charbon (fond, ~70 %), gris profond (cartes, ~25 %),
   rouge signature (boutons, sélection, interactions, ~5 %). Le jaune est réservé aux couleurs d'équipes.
   Toutes les couleurs et tous les réglages de texte du site sont ici : on change une valeur, tout le site suit.
   Mode sombre d'abord (prioritaire), puis le mode clair juste en dessous. */
:root {
    color-scheme: dark;         /* menus déroulants, barres de défilement... du navigateur en version sombre */

    /* --- Fonds et surfaces (du plus sombre au plus clair) --- */
    --stat: #08090A;            /* fond de la boîte « Crosshair » */
    --sidebar: #0C0D0F;         /* rail des équipes, barre du haut, en-têtes */
    --bg: #111214;              /* fond principal : noir charbon */
    --panel: #1B1D21;           /* cartes et panneaux : gris profond */
    --panel2: #24272C;          /* champs dans les cartes, survols */
    --line: #30343A;            /* séparations de 1 px */

    /* --- Textes --- */
    --text: #ECEDEF;            /* texte principal, titres (16:1 sur le fond) */
    --text-body: #C4C8CE;       /* textes à lire : paragraphes, FAQ, pied de page, fil d'Ariane (11:1 sur le fond, 10:1 sur les cartes) */
    --muted: #A8ADB5;           /* petits libellés secondaires, dates, compteurs (8:1 sur le fond, 7,4:1 sur les cartes) */

    /* --- Rouge signature : boutons, sélection, interactions --- */
    --accent: #D7262F;          /* boutons Copy, barre COPIED, sélection (texte blanc 5,0:1) */
    --accent-hover: #B51C25;    /* survol (6,7:1) */
    --accent-active: #9C1820;   /* bouton appuyé (8,2:1) */
    --accent-text: #FFFFFF;     /* texte posé sur le rouge */
    --accent-line: #D7262F;     /* traits, onglet actif, focus clavier, repères (3,8:1 sur le fond) */
    --link: #FF5C63;            /* liens (6,2:1) */
    --label: #C9CCD1;           /* étiquette « Crosshair » (posée sur la boîte sombre) */
    --alert: #FF5C63;           /* alerte / changement (réservé) */

    /* --- Transparences --- */
    --scrim: rgba(8, 9, 10, 0.8);             /* fond derrière la fiche joueur */
    --chip-scrim: rgba(8, 9, 10, 0.8);        /* fond de l'étiquette « Crosshair » */
    --plate: rgba(0, 0, 0, 0.18);             /* support des photos dans les bandeaux d'équipe */
    --plate-strong: rgba(0, 0, 0, 0.35);      /* bouton fermer posé sur le bandeau */
    --plate-strong-hover: rgba(0, 0, 0, 0.6);
    --slab-rim: rgba(255, 255, 255, 0.12);    /* liseré des bandeaux d'équipe */
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.55);

    /* --- Easter egg de la bombe : scène toujours sombre (les mêmes valeurs en mode clair) --- */
    --c4-black: #08090A;
    --c4-box: #24272C;
    --c4-block: #3A3D42;
    --c4-metal: #4A4E55;
    --c4-tape: #6B7078;
    --c4-wire: #8A9099;
    --c4-red: #FF5C63;

    /* --- Couleurs officielles des réseaux sociaux --- */
    --brand-discord: #5865F2;
    --brand-tiktok: #FFFFFF;
    --brand-tiktok-cyan: #25F4EE;
    --brand-tiktok-pink: #FE2C55;
    --brand-x: #FFFFFF;
    --brand-faceit: #FF5500;    /* bouton « FACEIT profile » (icône + survol) */

    /* --- Typographie : 3 familles --- */
    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;  /* titres : condensée, sportive */
    --font-ui: "Inter", system-ui, sans-serif;                        /* texte courant et interface */
    --font-mono: "JetBrains Mono", ui-monospace, monospace;           /* codes de crosshair et commandes */

    /* Tailles */
    --fs-2xs: 11px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-ui: 14px;
    --fs-body: 15px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-2xl: 32px;
    --fs-3xl: 48px;
    --fs-name: 28px;            /* pseudos des joueurs (cartes, fiche), en vraie casse : « ZywOo », « kennyS » */
    --fs-name-lg: 40px;         /* pseudo dans le titre des pages joueurs */

    /* Graisses */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Interlignages */
    --lh-tight: 1;
    --lh-heading: 1.1;
    --lh-ui: 1.3;
    --lh-body: 1.55;

    /* Espacement des lettres */
    --track-caps: 0.06em;       /* petits libellés en majuscules */
    --track-display: 0.01em;    /* titres condensés */

    /* --- Mouvement --- */
    --ease: cubic-bezier(0.16, 1, 0.3, 1); /* sortie exponentielle */
}

/* Mode clair : on change juste les variables (les bandeaux d'équipe et la boîte « Crosshair » ne bougent pas)
   La classe "light" est posée sur <html> ET <body> : ainsi la barre de défilement de la page suit aussi le thème. */
html.light,
body.light {
    color-scheme: light;        /* menus déroulants, barres de défilement... du navigateur en version claire */
    --sidebar: #FFFFFF;
    --bg: #F3F4F6;
    --panel: #FFFFFF;
    --panel2: #EDEFF2;
    --line: #D9DCE1;
    --stat: #0C0D0F;

    --text: #15171A;
    --text-body: #33373D;       /* 11:1 sur le fond clair */
    --muted: #4F545C;           /* 7:1 sur le fond clair */

    --accent: #C8202A;          /* texte blanc 5,7:1 */
    --accent-hover: #B51C25;
    --accent-active: #9C1820;
    --accent-text: #FFFFFF;
    --accent-line: #C8202A;     /* 5,2:1 sur le fond clair */
    --link: #B51C25;            /* 6,7:1 */
    --alert: #B51C25;

    --scrim: rgba(21, 23, 26, 0.6);
    --shadow: 0 8px 24px rgba(21, 23, 26, 0.12);
    --shadow-modal: 0 24px 60px rgba(21, 23, 26, 0.3);
    --brand-tiktok: #000000;
    --brand-x: #000000;
}

/* ===== Base ===== */
* {
    box-sizing: border-box;
}

html {
    scrollbar-color: var(--line) var(--bg);
}

body {
    margin: 0;
    color: var(--text);
    background-color: var(--bg);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-variant-numeric: tabular-nums;
    caret-color: var(--accent-line);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background-color: var(--accent);
    color: var(--accent-text);
}

a {
    color: var(--link);
    text-underline-offset: 3px;
}

button {
    background-color: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: 2px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}

/* Survol et appui : seulement les boutons d'action rouges (Copy) */
.mini:not(.btn-secondary):hover {
    background-color: var(--accent-hover);
}

.mini:not(.btn-secondary):active {
    background-color: var(--accent-active);
}

button:active {
    transform: translateY(1px);
}

button:disabled {
    cursor: not-allowed;
}

/* Contour visible quand on navigue au clavier */
:focus-visible {
    outline: 2px solid var(--accent-line);
    outline-offset: 2px;
}

.hidden {
    display: none !important;
}

/* Texte lu par les lecteurs d'écran mais invisible à l'écran (ex. « Copied to clipboard ») */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Lien « aller aux crosshairs » : invisible, il apparaît au premier appui sur Tab (navigation au clavier) */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 20;
    padding: 10px 14px;
    border-radius: 2px;
    background-color: var(--accent);
    color: var(--accent-text);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform 0.18s var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
}

/* La zone principale reçoit le focus via le lien ci-dessus : pas de grand contour autour de toute la liste */
main:focus {
    outline: none;
}

/* ===== Mise en page : rail des équipes à gauche + contenu à droite ===== */
.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    width: 248px;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 18px 12px;
    background-color: var(--sidebar);
    border-right: 1px solid var(--line);
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ===== Logo (version sombre ou claire selon le mode) ===== */
.logo {
    display: block;
    margin: 0 4px 8px;
}

.logo-img {
    display: block;
    width: 100%;
    max-width: 190px;
}

.logo-light {
    display: none;
}

body.light .logo-dark {
    display: none;
}

body.light .logo-light {
    display: block;
}

.side-title {
    margin: 20px 0 6px 10px;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--muted);
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.side-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 2px;
    background-color: transparent;
    color: var(--text);
    text-align: left;
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    font-weight: var(--fw-medium);
}

.side-btn:hover {
    background-color: var(--panel);
}

/* Équipe sélectionnée : fond clair + petit repère rouge (comme un onglet de retransmission) */
.side-btn.active {
    background-color: var(--panel2);
    box-shadow: inset 1px 0 0 var(--accent-line);
}

/* Inventaires des pros (sous les équipes) : nom + miniature de leur plus beau couteau */
.side-skins {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.side-skin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 6px 2px 10px;
    border-radius: 2px;
    color: var(--text);
    font-size: var(--fs-ui);
    font-weight: var(--fw-medium);
    text-decoration: none;
}

.side-skin:hover {
    background-color: var(--panel);
}

.side-skin img {
    width: 48px;
    height: 36px;
    object-fit: contain;
}

.side-skins-all {
    padding: 6px 10px;
    color: var(--link);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.side-skins-all:hover {
    text-decoration: underline;
}

/* ===== Barre du haut ===== */
.topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 32px;
    border-bottom: 2px solid var(--accent-line);
    background-color: var(--sidebar);
    /* Menu à gauche, boutons à droite ; s'il manque de place (tablette),
       le bloc des boutons passe à la ligne au lieu de déborder sur le logo */
    flex-wrap: wrap;
    row-gap: 8px;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

#search,
#cmd-search {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 46px;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-body);
    outline: none;
    transition: border-color 0.18s var(--ease);
}

#search::placeholder,
#cmd-search::placeholder {
    color: var(--muted);
}

#search:focus,
#cmd-search:focus {
    border-color: var(--accent-line);
}

/* Menu principal (à gauche de la barre du haut) : la rubrique actuelle est soulignée en rouge */
.main-nav {
    display: flex;
    align-self: stretch;
    gap: 24px;
}

.main-nav a {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--muted);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s var(--ease);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
    color: var(--text);
}

.main-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background-color: var(--accent-line);
}

/* Choix du jeu : CS2 actif, Valorant bientôt */
.game:not(.active):not(:disabled):hover {
    background-color: var(--panel2);
    color: var(--text);
}

.game-switch {
    display: flex;
    margin-left: auto; /* pousse le jeu, FAQ, la langue et le mode tout à droite */
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
}

.game {
    padding: 0 14px;
    height: 34px;
    border-radius: 0;
    background-color: var(--panel);
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.game.active {
    background-color: var(--text);
    color: var(--bg);
}

.game:disabled {
    background-color: var(--panel);
    color: var(--muted);
}

/* "Valorant soon" : un lien vers la page Coming soon, présenté comme les autres boutons */
.game-soon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.game small {
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.8;
}

/* Boutons de la barre : FAQ, langue, mode clair/sombre */
.top-link,
.lang,
#theme-toggle {
    height: 36px;
    flex-shrink: 0;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.top-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: border-color 0.18s var(--ease);
}

.top-link svg {
    width: 16px;
    height: 16px;
    fill: var(--accent-line);
}

.top-link:hover,
#theme-toggle:hover {
    border-color: var(--accent-line);
    background-color: var(--panel);
}

.lang {
    width: 76px;
    padding: 0 10px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}

#theme-toggle {
    padding: 0 14px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

/* ===== Titre principal ===== */
.hero {
    padding: 40px 32px 8px;
}

.hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--track-display);
}

.hero p {
    margin: 10px 0 0;
    max-width: 62ch;
    color: var(--text-body);
    font-size: var(--fs-body);
}

/* Grande barre de recherche, juste sous le titre */
.hero-search {
    position: relative;
    max-width: 640px;
    margin-top: 22px;
}

.hero-search svg {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 20px;
    height: 20px;
    fill: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Trois accès rapides : Pros, Creators, Trending */
.quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 640px;
    margin-top: 12px;
}

.quick-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    color: var(--text);
    text-align: left;
    transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.quick-btn:hover {
    border-color: var(--accent-line);
    background-color: var(--panel2);
}

.quick-btn svg {
    grid-row: 1 / 3;
    width: 22px;
    height: 22px;
    fill: var(--accent-line);
}

.quick-name {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
}

.quick-count {
    min-height: 1.3em; /* place réservée : pas de saut quand le nombre s'affiche */
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--muted);
}

/* ===== Onglets (rail de retransmission) + tri ===== */
.tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 20px 32px 0;
    border-bottom: 1px solid var(--line);
}

.tab-bar {
    display: flex;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.tab {
    position: relative;
    padding: 10px 18px 12px;
    border-radius: 2px 2px 0 0;
    background-color: transparent;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.tab:hover {
    background-color: var(--panel);
    color: var(--text);
}

/* Onglet actif : bandeau clair + barre rouge en dessous */
.tab.active {
    background-color: var(--text);
    color: var(--bg);
}

.tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background-color: var(--accent-line);
}

.sort {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--muted);
}

.sort select {
    height: 36px;
    padding: 0 10px;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

/* ===== Sections de cartes ===== */
main {
    padding: 0 32px 40px;
}

#trending,
#pros,
#creators {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

main h2 {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-display);
    line-height: var(--lh-heading);
}

/* Petit bandeau rouge biseauté devant les titres de section */
main h2::before {
    content: "";
    width: 6px;
    height: 18px;
    background-color: var(--accent-line);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}

.empty {
    margin-top: 28px;
    color: var(--text-body);
}

/* ===== Carte joueur = fiche joueur de retransmission ===== */
.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    cursor: pointer;
    transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    /* Performance : le navigateur ne dessine pas les cartes hors de l'écran (place réservée : ~440 px) */
    content-visibility: auto;
    contain-intrinsic-size: auto 440px;
}

.card:hover {
    transform: translateY(-2px);
    border-color: var(--team, var(--accent));
    box-shadow: var(--shadow);
}

/* Le bandeau couleur d'équipe : nom + photo découpée, coin coupé en biseau */
.card-top {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 96px;
    padding: 12px 96px 12px 16px;
    background-color: var(--team, var(--accent));
    color: var(--on-team, #FFFFFF);
    box-shadow: inset 0 0 0 1px var(--slab-rim); /* liseré : le bandeau reste visible même sur fond sombre */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

/* Pseudo en vraie casse (« ZywOo », « m0NESY ») : style n°1 choisi par Anto le 19/10/2026 */
.card h3 {
    margin: 0;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--fs-name);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: normal;
    overflow-wrap: anywhere;
}

.card h3 a {
    color: inherit;
    text-decoration: none;
}

.card h3 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.card-photo {
    position: absolute;
    right: 14px;
    bottom: 0;
    width: 76px;
    height: 86px;
    border-radius: 38px 38px 0 0;
    background-color: var(--plate);
    object-fit: cover;
    object-position: center top;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--on-team, #FFFFFF);
}

/* Ligne équipe + date */
.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px 0;
}

.team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--muted);
    white-space: nowrap;
}

.date {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    color: var(--muted);
    white-space: nowrap;
}

/* La boîte « Crosshair » : l'aperçu en taille réelle, comme une stat à l'écran */
.stat {
    position: relative;
    margin: 10px 16px 0;
}

.stat-label {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 1;
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    padding: 2px 6px;
    background-color: var(--chip-scrim);
    color: var(--label);
    pointer-events: none;
}

.card .field {
    margin: 10px 16px 0;
}

.card .field:last-child {
    margin-bottom: 16px;
}

.card .field-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card .field-label span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Le "·" sépare le libellé de l'aide quand ils sont sur la même ligne ; sur les cartes l'aide passe à la ligne */
.sep {
    font-style: normal;
}

.card .sep {
    display: none;
}

.card .preview {
    aspect-ratio: 560 / 200;
}

/* ===== Texte SEO + liste des joueurs + pied de page ===== */
.about {
    max-width: 1000px;
    margin-top: 8px;
    padding: 0 32px 8px;
    color: var(--text-body);
    line-height: 1.65;
}

.about h2 {
    margin: 28px 0 8px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-display);
    line-height: var(--lh-heading);
}

.about h3 {
    margin: 14px 0 2px;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
}

.about p {
    margin: 0 0 8px;
    max-width: 75ch;
}

footer {
    margin-top: auto;
    padding: 24px 32px;
    border-top: 1px solid var(--line);
    color: var(--text-body);
    font-size: var(--fs-sm);
}

footer p {
    margin: 4px 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--link);
}

/* ===== Fiche joueur (fenêtre) ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: var(--scrim);
    animation: fade-in 0.2s var(--ease);
}

.modal-box {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px 24px;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    box-shadow: var(--shadow-modal);
    text-align: left;
    animation: rise-in 0.24s var(--ease);
}

/* Bandeau couleur d'équipe en haut de la fiche */
.modal-box::before {
    content: "";
    display: block;
    height: 140px;
    margin: 0 -24px -136px;
    background-color: var(--team, var(--accent));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.modal-photo {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 4px 0 auto;
    overflow: hidden;
    border-radius: 64px 64px 0 0;
    background-color: var(--plate);
}

.modal-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--on-team, #FFFFFF);
    object-fit: cover;
    object-position: center top;
}

#modal-name {
    position: relative;
    max-width: calc(100% - 150px);
    margin: -64px 0 24px;
    color: var(--on-team, #FFFFFF);
    font-family: var(--font-display);
    font-size: var(--fs-name);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: normal;
}

.modal-team,
.modal-date {
    margin: 0;
    color: var(--text-body);
    font-size: var(--fs-sm);
}

.modal-team {
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
}

.modal-date {
    font-size: var(--fs-sm);
}

.modal-close {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 2px;
    background-color: var(--plate-strong);
    color: #FFFFFF; /* posé sur le bandeau d'équipe */
    font-size: var(--fs-lg);
}

.modal-close:hover {
    background-color: var(--plate-strong-hover);
}

/* Lien "Open the full crosshair page ›" en bas de la fiche */
.modal-page-link {
    margin-top: 4px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.modal-page-link:hover {
    text-decoration: underline;
}

/* Liens en bas de la fiche : « FACEIT profile » (créateurs) + page complète */
.modal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 4px;
}

.modal-links .modal-page-link {
    margin-top: 0;
}

/* Bouton « FACEIT profile » : sobre, icône à la couleur officielle de FACEIT */
.faceit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel2);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.faceit-btn[hidden] {
    display: none;
}

.faceit-btn svg {
    width: 14px;
    height: 14px;
    fill: var(--brand-faceit);
}

.faceit-btn:hover {
    border-color: var(--brand-faceit);
    background-color: var(--bg);
}

/* Dans le bandeau d'équipe de la page joueur */
.player-head .faceit-btn {
    margin-top: 10px;
}

/* ===== Pages joueurs (players/...), FAQ, mentions légales et page 404 ===== */
body.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* En-tête des pages : le menu commence exactement au même endroit que sur l'accueil
   (accueil : rail des équipes de 248 px + 32 px de marge = 280 px) et a la même hauteur */
.page-top {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 9px 32px;
    background-color: var(--sidebar);
    border-bottom: 2px solid var(--accent-line);
}

.page-top .logo {
    flex: 0 0 216px;
    margin: 0;
}

.page-top .logo-img {
    height: 40px;
    width: auto;
}

/* Menu principal dans l'en-tête des pages : trait rouge sous la rubrique actuelle */
.page-top .main-nav a[aria-current="page"]::after {
    bottom: -3px;
}

.player-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    line-height: 1.6;
}

.player-page h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-display);
    text-transform: uppercase;
}

.player-page h2 {
    margin: 24px 0 0;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-display);
    line-height: var(--lh-heading);
}

.player-page p,
.player-page ol {
    margin: 0;
    max-width: 75ch;
    color: var(--text-body);
}

.player-page strong {
    color: var(--text);
}

/* Questions des FAQ (pages joueurs, générateur, skins) */
.player-page > h3 {
    margin: 12px 0 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
}

.breadcrumb {
    font-size: var(--fs-sm);
    color: var(--text-body);
}

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

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

/* "Home" avec une petite maison : le retour à l'accueil, visible sur toutes les pages */
.crumb-home {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.crumb-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* En-tête de la page joueur : le même bandeau couleur d'équipe que les cartes */
.player-head {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    min-height: 150px;
    padding: 16px 20px 0;
    background-color: var(--team, var(--accent));
    color: var(--on-team, #FFFFFF);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.player-head > div {
    padding-bottom: 16px;
}

.player-head h1 {
    color: inherit;
    font-size: var(--fs-name-lg);
    letter-spacing: normal;
    text-transform: none; /* pseudo en vraie casse, comme sur les cartes */
}

.player-head .player-team,
.player-head .player-date {
    color: inherit;
    opacity: 0.85;
}

/* Valeur de l'inventaire en gras : même couleur que le bandeau (lisible sur toutes les équipes) */
.player-head strong {
    color: inherit;
}

.player-photo {
    width: 120px;
    height: 134px;
    flex-shrink: 0;
    border-radius: 60px 60px 0 0;
    background-color: var(--plate);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    object-fit: cover;
    object-position: center top;
}

.player-team {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}

.player-team-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.player-preview {
    aspect-ratio: 760 / 300;
}

/* Réglages détaillés du crosshair */
.specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1px;
    margin: 0;
    border: 1px solid var(--line);
    background-color: var(--line);
}

.specs div {
    padding: 10px 12px;
    background-color: var(--panel);
}

.specs dt {
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--muted);
}

.specs dd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    font-weight: var(--fw-semibold);
}

.swatch {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 1px;
    border: 1px solid var(--line);
}

/* Liens vers les coéquipiers */
.related {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.related a {
    display: block;
    padding: 8px 12px;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-ui);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: border-color 0.18s var(--ease);
}

.related a:hover {
    border-color: var(--team, var(--accent));
}

.not-found {
    text-align: center;
    padding-top: 80px;
}

/* ===== Code de partage + commandes console ===== */
.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.field-label {
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--text);
}

.field-label span {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.field-row {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--panel2);
}

.field-row code {
    flex: 1;
    min-width: 0;
    align-self: center;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text);
}

.field-row .console {
    color: var(--muted);
}

/* Bouton Copy : un « onglet » d'action collé à droite du code */
.mini {
    flex-shrink: 0;
    padding: 9px 16px;
    border-radius: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.btn-secondary {
    background-color: var(--bg);
    color: var(--text);
    border-left: 1px solid var(--line);
}

.btn-secondary:hover {
    background-color: var(--text);
    color: var(--bg);
}

/* Geste signature : la barre rouge « COPIED » balaie la ligne du code */
.field-row::after {
    content: "Copied";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: var(--accent);
    color: var(--accent-text);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    transform: translateX(-101%);
    pointer-events: none;
}

.field-row.copied::after {
    animation: copy-wipe 1.5s var(--ease) forwards;
}

@keyframes copy-wipe {
    0% { transform: translateX(-101%); }
    15% { transform: translateX(0); }
    80% { transform: translateX(0); }
    100% { transform: translateX(101%); }
}

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(12px); }
}

/* ===== Aperçu du crosshair ===== */
.preview {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 160;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--stat);
}

#modal-preview {
    aspect-ratio: 760 / 300;
    margin: 4px 0;
}

/* ===== Logos des équipes ===== */
.team-badge {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 2px;
    background-color: var(--c);
}

.team-badge:has(img) {
    background-color: transparent;
}

.team-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.team .team-badge {
    width: 16px;
    height: 16px;
}

/* Logos noirs : en blanc en mode sombre */
body:not(.light) .team-badge img[src*="furia"],
body:not(.light) .team-badge img[src*="spirit"],
body:not(.light) .team-badge img[src*="mibr"],
body:not(.light) .team-badge img[src*="g2"] {
    filter: invert(1);
}

/* Logo blanc : en noir en mode clair */
body.light .team-badge img[src*="fut"] {
    filter: invert(1);
}

/* ===== Bas du menu de gauche : réseaux sociaux + contact ===== */
.side-footer {
    margin-top: auto; /* pousse le bloc tout en bas du menu */
    padding-top: 16px;
}

.socials {
    display: flex;
    gap: 6px;
    padding: 0 10px;
}

.social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 2px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    color: var(--muted);
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.social:hover {
    transform: translateY(-2px);
    border-color: var(--muted);
}

/* Les logos gardent les couleurs officielles des marques, en permanence */
.social-discord {
    color: var(--brand-discord);
}

.social-discord:hover {
    border-color: var(--brand-discord);
}

/* TikTok : logo blanc (noir en mode clair) avec son décalage cyan / rose */
.social-tiktok {
    color: var(--brand-tiktok);
}

.social-tiktok svg {
    filter: drop-shadow(-1px -1px 0 var(--brand-tiktok-cyan)) drop-shadow(1px 1px 0 var(--brand-tiktok-pink));
}

.social-tiktok:hover {
    border-color: var(--brand-tiktok-pink);
}

/* X : blanc en mode sombre, noir en mode clair (ses couleurs officielles) */
.social-x {
    color: var(--brand-x);
}

.social-x:hover {
    border-color: var(--text);
}

.contact-btn {
    display: block;
    margin: 12px 10px 0;
    padding: 9px 12px;
    border-radius: 2px;
    border: 1px solid var(--accent-line);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-align: center;
    text-decoration: none;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.contact-btn:hover {
    background-color: var(--accent);
    color: var(--accent-text);
}

.contact-btn:active {
    background-color: var(--accent-active);
}

.side-note {
    margin: 6px 10px 0;
    font-size: var(--fs-2xs);
    color: var(--text-body);
    text-align: center;
}

/* ===== Générateur de crosshair (generator.html + onglet Generator) =====
   À gauche : l'aperçu (reste visible en défilant) + le code et la console. À droite : les réglages. */
.gen-page {
    max-width: 1120px;
}

.gen-intro {
    margin: 10px 0 0;
    max-width: 75ch;
    color: var(--text-body);
}

.gen {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 16px;
    line-height: var(--lh-ui);
}

.gen-view {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gen-stage {
    position: relative;
}

.gen-preview {
    aspect-ratio: 760 / 320;
}

/* Taille réelle / zoom : posé sur l'aperçu (toujours sombre, même en mode clair) */
.gen-zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    border-radius: 2px;
    overflow: hidden;
    background-color: var(--stat); /* fond opaque : lisible quelle que soit l'image derrière */
}

.gen-zoom button {
    padding: 6px 10px;
    border-radius: 0;
    background-color: transparent;
    color: var(--label);
    font-size: var(--fs-xs);
}

.gen-zoom button[aria-pressed="true"] {
    background-color: var(--label);
    color: var(--stat);
}

.gen-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.gen-group {
    min-width: 0;
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel);
}

/* Le titre du groupe passe à l'intérieur du cadre (et pas sur la bordure) */
.gen-group legend {
    float: left;
    width: 100%;
    margin-bottom: 12px;
    padding: 0;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}

.gen-group legend span {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.gen-group > :not(legend) {
    clear: both;
}

.gen-group > :not(legend) + :not(legend) {
    margin-top: 12px;
}

.gen-start,
.gen-res {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
}

.gen-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--muted);
}

.gen select,
.gen input[type="text"],
.gen input[type="number"] {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel2);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.gen input[type="text"],
.gen input[type="number"] {
    font-family: var(--font-mono);
}

.gen select:focus,
.gen input[type="text"]:focus,
.gen input[type="number"]:focus {
    border-color: var(--accent-line);
    outline: none;
}

.gen select {
    cursor: pointer;
}

.gen-hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-body);
}

.gen-status {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-body);
}

.gen-status:empty {
    display: none;
}

.gen-status-error {
    color: var(--alert);
}

/* Couleurs toutes prêtes + couleur personnalisée */
.gen-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gen-swatch {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--swatch);
}

.gen-swatch[aria-pressed="true"] {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.gen-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px 0 6px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}

.gen-custom:hover {
    border-color: var(--accent-line);
}

.gen-custom input {
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.gen-custom input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.gen-custom input::-webkit-color-swatch {
    border: 1px solid var(--line);
    border-radius: 2px;
}

.gen-custom input::-moz-color-swatch {
    border: 1px solid var(--line);
    border-radius: 2px;
}

/* Curseurs : nom, barre, valeur exacte (modifiable au clavier) */
.gen-slider {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 64px;
    align-items: center;
    gap: 12px;
}

.gen-slider label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.gen-slider input[type="number"] {
    padding: 0 6px;
    text-align: center;
}

.gen-out {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-align: center;
}

.gen input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 24px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.gen input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(var(--accent-line), var(--accent-line)) 0 / var(--fill, 50%) 100% no-repeat, var(--line);
}

.gen input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background-color: var(--line);
}

.gen input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background-color: var(--accent-line);
}

.gen input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 20px;
    margin-top: -8px;
    border: none;
    border-radius: 2px;
    background-color: var(--text);
    transition: background-color 0.18s var(--ease);
}

.gen input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 20px;
    border: none;
    border-radius: 2px;
    background-color: var(--text);
}

.gen input[type="range"]:hover::-webkit-slider-thumb,
.gen input[type="range"]:active::-webkit-slider-thumb {
    background-color: var(--accent-line);
}

.gen input[type="range"]:hover::-moz-range-thumb,
.gen input[type="range"]:active::-moz-range-thumb {
    background-color: var(--accent-line);
}

/* Interrupteurs : contour, point central, style T */
.gen-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gen-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: border-color 0.18s var(--ease);
}

.gen-toggle:hover,
.gen-toggle:has(input:checked) {
    border-color: var(--accent-line);
}

.gen-toggle input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 16px;
    margin: 0;
    border-radius: 2px;
    background-color: var(--line);
    cursor: pointer;
    transition: background-color 0.18s var(--ease);
}

.gen-toggle input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 1px;
    background-color: var(--muted);
    transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
}

.gen-toggle input:checked {
    background-color: var(--accent);
}

.gen-toggle input:checked::before {
    background-color: var(--accent-text);
    transform: translateX(12px);
}

.gen-reset {
    padding: 8px 14px;
    border: 1px solid var(--line);
    background-color: transparent;
    color: var(--muted);
}

.gen-reset:hover {
    border-color: var(--text);
    color: var(--text);
}

/* ===== Skins des pros (onglet Pro Skins + pages skins/) =====
   Carte de skin : image sur un léger halo de la couleur de rareté (couleur officielle Steam, donnée par skins.json),
   trait de rareté en bas, état, barre d'usure (float) et prix (bientôt). */
.skins-page {
    max-width: 1120px;
}

.skin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

.skin {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-bottom: 3px solid var(--rarity);
    border-radius: 2px;
    background-color: var(--panel);
    content-visibility: auto;
    contain-intrinsic-size: auto 330px;
}

.skin-img {
    aspect-ratio: 4 / 3;
    padding: 8px;
    background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--rarity) 30%, transparent), transparent 70%), var(--panel2);
}

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

.skin-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 12px;
    line-height: var(--lh-ui);
}

.skin .skin-weapon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--muted);
}

.skin-badge {
    padding: 0 5px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: var(--fs-2xs);
    color: var(--text);
}

.skin .skin-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-display);
    line-height: var(--lh-heading);
}

.skin-count {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--muted);
}

.skin .skin-ext {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--muted);
}

/* Petit carré de la couleur de rareté devant son nom (le texte reste lisible dans les deux modes) */
.skin-rarity::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 1px;
    background-color: var(--rarity);
}

/* Barre d'usure : de Factory New (gauche) à Battle-Scarred (droite), avec les limites des états */
.skin-wear {
    padding: 6px 0 2px;
}

.wear-bar {
    position: relative;
    display: block;
    height: 4px;
    border-radius: 2px;
    background:
        linear-gradient(90deg, transparent calc(7% - 1px), var(--panel) 7%, transparent calc(7% + 1px)),
        linear-gradient(90deg, transparent calc(15% - 1px), var(--panel) 15%, transparent calc(15% + 1px)),
        linear-gradient(90deg, transparent calc(38% - 1px), var(--panel) 38%, transparent calc(38% + 1px)),
        linear-gradient(90deg, transparent calc(45% - 1px), var(--panel) 45%, transparent calc(45% + 1px)),
        var(--line);
}

.wear-bar i {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 10px;
    margin-left: -1px;
    border-radius: 1px;
    background-color: var(--text);
}

.skin-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin: 4px 0 0;
}

/* Float et prix : libellé à gauche, valeur à droite */
.skin-meta div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 8px;
}

/* Le float exact est long : toujours sous son libellé (toutes les cartes alignées pareil) */
.skin-meta div:first-child {
    display: block;
}

.skin-meta dt {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--muted);
}

.skin-meta dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Prix : dollars en avant, euros juste en dessous */
.skin-meta .skin-price {
    font-weight: var(--fw-semibold);
    text-align: right;
}

.skin-eur {
    display: block;
    font-weight: var(--fw-regular);
    color: var(--muted);
}

/* Source des prix (transparence) */
.skin-note {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-body);
}

.ps .skin-note {
    margin-top: 6px;
}

/* Raccourcis vers les rubriques (Knives, Gloves, Rifles...) */
.skin-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skin-jump a {
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: border-color 0.18s var(--ease);
}

.skin-jump a:hover {
    border-color: var(--accent-line);
}

.skin-jump span {
    margin-left: 4px;
    color: var(--muted);
}

.skin-section {
    scroll-margin-top: 16px;
}

.skin-section h2 {
    margin-bottom: 12px;
}

.skin-section > p {
    margin-top: 12px;
}

/* Onglet Pro Skins de l'accueil : choix du joueur */
.ps {
    margin-top: 16px;
}

.ps-players {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ps-player,
.ps-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel);
    color: var(--text);
    text-align: left;
    text-decoration: none;
    transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.ps-player:hover,
.ps-tile:hover {
    border-color: var(--accent-line);
}

/* Joueur choisi : couleurs inversées, comme l'onglet actif */
.ps-player[aria-pressed="true"] {
    border-color: var(--text);
    background-color: var(--text);
    color: var(--bg);
}

.ps-player[aria-pressed="true"] .ps-info {
    color: inherit;
    opacity: 0.75;
}

.ps-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 45px;
    border-radius: 20px 20px 0 0;
    background-color: var(--team, var(--panel2));
    color: var(--on-team, var(--text));
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    object-fit: cover;
    object-position: center top;
}

.ps-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ps-name {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-ui);
}

.ps-info {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--muted);
}

.ps-panel {
    margin-top: 16px;
}

.ps-summary,
.ps-more {
    margin: 0 0 12px;
    max-width: 75ch;
    font-size: var(--fs-ui);
    color: var(--text-body);
}

.ps-more {
    margin: 16px 0 0;
}

/* Page skins/ : une tuile par joueur */
.ps-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.ps-tile .ps-photo {
    width: 56px;
    height: 63px;
    border-radius: 28px 28px 0 0;
}

.ps-tile .ps-text {
    flex: 1;
}

.ps-tile-skin {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    object-fit: contain;
}

/* ===== Commandes console (commands/) ===== */
.cmd-hub {
    max-width: 1120px;
}

/* Petits bouts de code dans le texte (noms de commandes, valeurs) */
.player-page p code,
.player-page li code,
.player-page td code,
.player-page dt code {
    padding: 1px 5px;
    border-radius: 2px;
    background-color: var(--panel2);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

.player-page p a code,
.player-page li a code {
    color: inherit;
}

/* Le nom de la commande en titre : en police "code", sans majuscules */
.player-page .cmd-title {
    font-family: var(--font-mono);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
}

.cmd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
}

.cmd-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    vertical-align: middle;
}

.cmd-meta .cmd-badge {
    margin-left: 0;
}

.cmd-removed {
    border-color: var(--alert);
    color: var(--alert);
}

.player-page .cmd-lead {
    color: var(--text);
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
}

.cmd-syntax {
    font-size: var(--fs-body);
}

/* Tableau des valeurs possibles */
.cmd-values {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--line);
    font-size: var(--fs-ui);
}

.cmd-values th,
.cmd-values td {
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}

.cmd-values th {
    background-color: var(--panel);
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}

.cmd-values td {
    border-top: 1px solid var(--line);
    color: var(--text-body);
}

.cmd-values td:first-child {
    width: 30%;
    white-space: nowrap;
}

/* Statistiques des pros : une barre par valeur */
.cmd-stats {
    display: grid;
    gap: 6px;
    margin: 0;
}

.cmd-stats div {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.cmd-stats dd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.cmd-bar {
    flex: 1;
    max-width: 240px;
    height: 6px;
    border-radius: 2px;
    background-color: var(--line);
    overflow: hidden;
}

.cmd-bar i {
    display: block;
    height: 100%;
    background-color: var(--accent-line);
}

/* Liste de toutes les commandes : recherche + filtres collés en haut pendant le défilement */
.cmd-tools {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
    background-color: var(--bg);
}

.cmd-tools .cmd-search {
    max-width: none;
    margin-top: 0;
}

.cmd-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cmd-filter {
    padding: 6px 12px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    color: var(--text);
    font-size: var(--fs-sm);
}

.cmd-filter:hover {
    border-color: var(--accent-line);
}

.cmd-filter span {
    margin-left: 4px;
    color: var(--muted);
    font-weight: var(--fw-medium);
}

.cmd-filter[aria-pressed="true"] {
    border-color: var(--text);
    background-color: var(--text);
    color: var(--bg);
}

.cmd-filter[aria-pressed="true"] span {
    color: inherit;
    opacity: 0.7;
}

.cmd-section,
.cmd {
    scroll-margin-top: 150px;
}

.cmd-section h2 {
    margin-bottom: 12px;
}

.cmd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.cmd {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel);
}

.cmd:target {
    border-color: var(--accent-line);
}

.cmd-is-removed {
    border-left: 3px solid var(--alert);
}

.cmd .cmd-name {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    overflow-wrap: anywhere;
}

.cmd-name a {
    color: var(--text);
    text-decoration: none;
}

.cmd-name a:hover {
    color: var(--link);
    text-decoration: underline;
}

.player-page .cmd p {
    font-size: var(--fs-sm);
}

.cmd-default {
    white-space: nowrap;
}

.cmd-empty {
    color: var(--text-body);
}

/* ===== Guides (guides/) ===== */
.guide-hub {
    max-width: 1120px;
}

/* Titre des guides : phrase normale (pas tout en majuscules, plus lisible pour un long titre) */
.player-page .guide-title {
    text-transform: none;
    line-height: var(--lh-heading);
}

.player-page .guide-meta {
    font-size: var(--fs-sm);
}

.player-page .guide-lead {
    color: var(--text);
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
}

.player-page ul {
    margin: 0;
    padding-left: 20px;
    color: var(--text-body);
}

.player-page .related,
.player-page .guide-toc ol {
    padding-left: 0;
}

.player-page ol > li + li,
.player-page ul:not(.related) > li + li {
    margin-top: 4px;
}

/* Sommaire "On this page" */
.guide-toc {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-line);
    border-radius: 2px;
    background-color: var(--panel);
}

.player-page .guide-toc-title {
    margin-bottom: 6px;
    color: var(--text);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}

.player-page .guide-toc ol {
    list-style: none;
    counter-reset: toc;
}

.guide-toc li {
    counter-increment: toc;
}

.guide-toc li::before {
    content: counter(toc) ".";
    display: inline-block;
    width: 22px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.guide-toc a {
    font-size: var(--fs-ui);
}

.guide-page section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guide-page h2 {
    scroll-margin-top: 16px;
}

/* Encadré "conseil" */
.player-page .guide-tip {
    padding: 12px 14px;
    border-left: 3px solid var(--accent-line);
    border-radius: 2px;
    background-color: var(--panel);
    color: var(--text);
}

.player-page .guide-note {
    font-size: var(--fs-sm);
}

/* Tableau qui défile sur téléphone au lieu de déborder */
.table-wrap {
    overflow-x: auto;
}

.table-wrap .cmd-values td:first-child {
    white-space: normal;
}

/* Les noms de commandes ne se coupent pas au milieu (le tableau défile si besoin) */
.table-wrap .cmd-values td code {
    white-space: nowrap;
    overflow-wrap: normal;
}

/* Bloc de plusieurs commandes avec un seul bouton Copy */
.code-block {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel2);
}

.code-block pre {
    margin: 0;
    padding: 12px 90px 12px 14px;
    overflow-x: auto;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.code-block .mini {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 2px 0 2px;
}

/* Calculatrice de sensibilité */
.sens-calc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel);
}

.sens-calc label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.sens-calc input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel2);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
}

.sens-calc input:focus {
    border-color: var(--accent-line);
    outline: none;
}

.player-page .sens-out {
    grid-column: 1 / -1;
    color: var(--text);
}

.sens-out strong {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
}

/* Cartes de la page d'accueil des guides */
.guide-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.guide-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.18s var(--ease);
}

.guide-card:hover {
    border-color: var(--accent-line);
}

.guide-card-title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
}

.guide-card-desc {
    color: var(--text-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-ui);
}

/* ===== Générateur de binds (tools/bind-generator.html) =====
   À gauche : touche + action ; à droite (reste visible en défilant) : le bind, et "My binds". */
.bind-page {
    max-width: 1120px;
}

.bind {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 8px;
    line-height: var(--lh-ui);
}

.bind-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.bind-key {
    display: flex;
    gap: 8px;
}

.bind select,
.bind input[type="text"] {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel2);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

.bind input[type="text"] {
    font-family: var(--font-mono);
}

.bind select:focus,
.bind input[type="text"]:focus {
    border-color: var(--accent-line);
    outline: none;
}

.bind-capture {
    flex-shrink: 0;
    padding: 0 14px;
    border: 1px solid var(--line);
    background-color: var(--panel2);
    color: var(--text);
    font-size: var(--fs-sm);
}

.bind-capture:hover,
.bind-capture[aria-pressed="true"] {
    border-color: var(--accent-line);
}

/* Choix de l'action : même style que les filtres des commandes */
.bind-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bind-actions button {
    padding: 6px 12px;
    border: 1px solid var(--line);
    background-color: var(--panel2);
    color: var(--text);
    font-size: var(--fs-sm);
}

.bind-actions button:hover {
    border-color: var(--accent-line);
}

.bind-actions button[aria-pressed="true"] {
    border-color: var(--text);
    background-color: var(--text);
    color: var(--bg);
}

.bind-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.bind-buy-group + .bind-buy-group {
    margin-top: 6px;
}

.bind-buy-group .gen-label {
    margin: 0 0 6px;
}

.bind-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bind-checks .gen-toggle {
    padding: 6px 10px;
}

.bind-result {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.bind-now {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bind-result .code-block pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.bind-add {
    width: 100%;
}

.bind-add:hover {
    background-color: var(--accent-hover);
}

.bind-add:disabled,
.bind-buttons .mini:disabled {
    opacity: 0.5;
}

.bind-mine {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel);
}

.bind-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bind-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 10px;
    border-radius: 2px;
    background-color: var(--panel2);
}

.bind-list code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}

.bind-remove {
    flex-shrink: 0;
    padding: 4px 8px;
    border: 1px solid var(--line);
    background-color: transparent;
    color: var(--text-body);
    font-size: var(--fs-xs);
}

.bind-remove:hover {
    border-color: var(--accent-line);
    color: var(--text);
}

.bind-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bind-buttons .mini {
    border-radius: 2px;
}

.bind-buttons .btn-secondary {
    border: 1px solid var(--line);
}

/* ===== Page Valorant "Coming soon" (valorant.html) : la tourelle de Killjoy se construit =====
   Tourelle 100 % SVG aux couleurs du site (aucune image officielle). */
.vk-page {
    align-items: center;
    text-align: center;
}

.vk-page .breadcrumb {
    align-self: flex-start;
}

.vk-stage {
    width: 100%;
    max-width: 260px;
    margin-top: 8px;
}

.vk-turret {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.vk-shadow {
    fill: var(--line);
}

.vk-legs path {
    fill: none;
    stroke: var(--muted);
    stroke-width: 7;
    stroke-linecap: round;
}

.vk-body rect,
.vk-head rect,
.vk-barrel rect {
    fill: var(--panel2);
    stroke: var(--line);
    stroke-width: 2;
}

.vk-turret .vk-panel {
    fill: var(--line);
    stroke: none;
}

.vk-eye-socket {
    fill: var(--stat);
}

.vk-eye {
    fill: var(--accent);
}

.vk-antenna {
    stroke: var(--muted);
    stroke-width: 3;
    stroke-linecap: round;
}

.vk-antenna-tip {
    fill: var(--accent);
}

.vk-sparks circle {
    fill: var(--accent-line);
    opacity: 0;
}

.player-page .vk-title {
    margin-top: 8px;
    text-transform: none;
}

.player-page .vk-lead {
    color: var(--text);
    font-size: var(--fs-lg);
}

/* Barre de progression qui monte jusqu'à 87 % puis se bloque */
.vk-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
}

.vk-bar {
    flex: 1;
    height: 12px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background-color: var(--panel);
    overflow: hidden;
}

.vk-bar i {
    display: block;
    width: 87%;
    height: 100%;
    background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, var(--accent-hover) 8px 16px);
}

.vk-percent {
    min-width: 44px;
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: var(--fw-semibold);
    text-align: right;
}

.player-page .vk-eta {
    font-size: var(--fs-sm);
}

.player-page .vk-joke {
    min-height: 3.2em;
    max-width: 46ch;
    margin-top: 8px;
    color: var(--text);
    font-style: italic;
    transition: opacity 0.25s var(--ease);
}

.player-page .vk-joke.vk-fade {
    opacity: 0;
}

.vk-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 20px;
}

.vk-back {
    padding: 12px 20px;
    border-radius: 2px;
    background-color: var(--accent);
    color: var(--accent-text);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.vk-back:hover {
    background-color: var(--accent-hover);
}

/* Les animations, seulement si le visiteur n'a pas demandé moins d'animations */
@media (prefers-reduced-motion: no-preference) {
    .vk-legs,
    .vk-body,
    .vk-head,
    .vk-barrel {
        transform-box: fill-box;
        transform-origin: center;
    }

    .vk-legs {
        animation: vk-drop 0.5s var(--ease) 0.1s both;
    }

    .vk-body {
        animation: vk-rise 0.55s var(--ease) 0.55s both;
    }

    .vk-head {
        animation: vk-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both;
    }

    .vk-barrel {
        transform-origin: left center;
        animation: vk-extend 0.45s var(--ease) 1.6s both;
    }

    .vk-antenna {
        stroke-dasharray: 24;
        animation: vk-draw 0.35s var(--ease) 2s both;
    }

    .vk-antenna-tip {
        transform-box: fill-box;
        transform-origin: center;
        animation: vk-pop 0.25s var(--ease) 2.3s both, vk-blink 1.2s steps(1) 2.6s infinite;
    }

    .vk-sparks circle {
        animation: vk-spark 0.18s steps(1) 0.6s 10;
    }

    .vk-sparks circle:nth-child(2) {
        animation-delay: 0.69s;
    }

    .vk-sparks circle:nth-child(3) {
        animation-delay: 0.78s;
    }

    .vk-eye {
        animation: vk-scan 2.4s ease-in-out 2.6s infinite;
    }

    .vk-bar i {
        animation: vk-fill 3.2s var(--ease) both, vk-stuck 1.4s ease-in-out 3.2s infinite;
    }
}

@keyframes vk-drop {
    from { opacity: 0; transform: translateY(-40px); }
}

@keyframes vk-rise {
    from { opacity: 0; transform: translateY(30px) scaleY(0.6); }
}

@keyframes vk-pop {
    from { opacity: 0; transform: scale(0); }
}

@keyframes vk-extend {
    from { transform: scaleX(0); }
}

@keyframes vk-draw {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

@keyframes vk-blink {
    50% { opacity: 0.2; }
}

@keyframes vk-spark {
    0% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes vk-scan {
    0%, 100% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
}

@keyframes vk-fill {
    from { width: 0; }
}

@keyframes vk-stuck {
    0%, 100% { width: 87%; }
    50% { width: 88%; }
}

/* ===== "HEADSHOT" façon killfeed après un Copy (crosshair.js) =====
   Toujours sombre comme le killfeed du jeu (aussi en mode clair), bord rouge comme vos propres kills */
.headshot {
    position: fixed;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 7px;
    border: 1px solid var(--accent);
    border-radius: 2px;
    background-color: var(--stat);
    color: var(--label);
    font-family: var(--font-ui);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-caps);
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow);
    animation: headshot 1.1s var(--ease) forwards;
}

.headshot svg {
    width: 14px;
    height: 14px;
    fill: var(--accent-line);
}

@keyframes headshot {
    0% { opacity: 0; transform: translateX(14px); }
    15% { opacity: 1; transform: translateX(0); }
    75% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* ===== Easter egg "rush b" (script.js) : un bonhomme traverse l'écran en courant =====
   Sans mouvement (moins d'animations) : il reste au centre, en bas, 1,5 seconde */
.rushb {
    position: fixed;
    bottom: 16px;
    left: 50%;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    transform: translateX(-50%);
}

.rushb-bubble {
    position: relative;
    margin-bottom: 8px;
    padding: 6px 12px;
    border-radius: 2px;
    background-color: var(--text);
    color: var(--bg);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-display);
    white-space: nowrap;
    box-shadow: var(--shadow);
}

/* Petite pointe de la bulle, vers la tête */
.rushb-bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    border: 7px solid transparent;
    border-top-color: var(--text);
    border-bottom: 0;
    transform: translateX(-50%);
}

.rushb-guy {
    width: 84px;
    height: 105px;
    overflow: visible;
    /* Contour couleur du fond : il se détache même quand il passe sur du texte */
    filter: drop-shadow(0 0 2px var(--bg)) drop-shadow(0 0 2px var(--bg));
}

.rushb-limb {
    stroke: var(--text);
    stroke-width: 6;
    stroke-linecap: round;
}

.rushb-head {
    fill: var(--text);
}

.rushb-band {
    fill: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
    .rushb {
        left: 0;
        transform: translateX(-180px);
        animation: rushb-run 2.6s linear forwards;
    }

    .rushb-guy {
        animation: rushb-bob 0.26s ease-in-out infinite alternate;
    }

    .rushb-lean {
        transform: rotate(8deg);
        transform-origin: 32px 50px;
    }

    .rushb-leg-a,
    .rushb-leg-b {
        transform-origin: 30px 48px;
        animation: rushb-swing 0.26s ease-in-out infinite alternate;
    }

    .rushb-arm-a,
    .rushb-arm-b {
        transform-origin: 33px 30px;
        animation: rushb-swing 0.26s ease-in-out infinite alternate;
    }

    .rushb-leg-b,
    .rushb-arm-a {
        animation-direction: alternate-reverse;
    }
}

@keyframes rushb-run {
    to { transform: translateX(calc(100vw + 40px)); }
}

@keyframes rushb-bob {
    to { transform: translateY(-4px); }
}

@keyframes rushb-swing {
    from { transform: rotate(-32deg); }
    to { transform: rotate(32deg); }
}

/* ===== Easter egg "7355608" (script.js) : la C4 est posée, bips visuels, petite explosion cartoon =====
   Bon enfant : pas de son, pas de flash, fond sombre doux, 4 s maximum, un clic ferme tout */
.c4 {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    background-color: color-mix(in srgb, var(--stat) 90%, transparent);
    cursor: pointer;
    animation: fade-in 0.2s var(--ease);
}

.c4-scene {
    position: relative;
    width: min(340px, 80vw);
}

.c4-bomb {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    animation: c4-drop 0.35s var(--ease);
}

.c4-block {
    fill: var(--c4-block);
    stroke: var(--c4-metal);
    stroke-width: 2;
}

.c4-tape {
    fill: var(--c4-tape);
}

.c4-wire {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
}

.c4-wire-b {
    stroke: var(--c4-wire);
}

.c4-box {
    fill: var(--c4-box);
    stroke: var(--c4-tape);
    stroke-width: 2;
}

.c4-screen {
    fill: var(--c4-black);
}

.c4-digits {
    fill: var(--c4-red);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: var(--fw-semibold);
    letter-spacing: 1px;
}

.c4-key {
    fill: var(--c4-metal);
}

.c4-led {
    fill: var(--accent);
    opacity: 0.35;
}

.c4-led.c4-beep {
    animation: c4-led 0.3s ease-out;
}

.c4.c4-pulse .c4-bomb {
    animation: c4-thump 0.18s ease-out;
}

.c4-title {
    margin: 12px 0 0;
    color: var(--accent-text);
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-display);
    text-align: center;
}

.c4-sub {
    margin: 0;
    color: var(--label);
    font-size: var(--fs-ui);
    text-align: center;
}

.c4-ended .c4-title {
    color: var(--c4-red);
    font-size: var(--fs-3xl);
}

.c4-ended .c4-sub {
    color: var(--accent-text);
    font-size: var(--fs-lg);
}

/* L'explosion cartoon : des cercles qui s'agrandissent et "BOOM!" façon BD (pas de flash) */
.c4-boom {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.c4-boom i,
.c4-boom b {
    grid-area: 1 / 1;
    opacity: 0;
}

.c4-boom i {
    width: 70px;
    height: 70px;
    border: 4px solid var(--accent);
    border-radius: 50%;
}

.c4-boom b {
    color: var(--c4-red);
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-display);
    text-shadow: 0 3px 0 var(--c4-black);
}

.c4.c4-exploded .c4-bomb {
    animation: c4-vanish 0.25s var(--ease) forwards;
}

.c4-exploded .c4-boom i {
    animation: c4-ring 0.7s var(--ease) forwards;
}

.c4-exploded .c4-boom i:nth-child(2) {
    animation-delay: 0.08s;
}

.c4-exploded .c4-boom i:nth-child(3) {
    animation-delay: 0.16s;
}

.c4-exploded .c4-boom b {
    animation: c4-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes c4-drop {
    from { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

@keyframes c4-led {
    0% { opacity: 1; filter: drop-shadow(0 0 6px var(--accent)); }
    100% { opacity: 0.35; }
}

@keyframes c4-thump {
    50% { transform: scale(1.03); }
}

@keyframes c4-vanish {
    to { opacity: 0; transform: scale(0.6); }
}

@keyframes c4-ring {
    0% { opacity: 0.9; transform: scale(0.3); }
    100% { opacity: 0; transform: scale(4); }
}

@keyframes c4-pop {
    0% { opacity: 0; transform: scale(0.3) rotate(-8deg); }
    35% { opacity: 1; transform: scale(1.15) rotate(3deg); }
    75% { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: scale(1.05); }
}

/* ===== Moins d'animations pour ceux qui le demandent ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .field-row::after {
        display: none;
    }
}

/* ===== Téléphone (TOUJOURS EN DERNIER) ===== */
/* « Same crosshair as … » : petite ligne discrète sous l'aperçu (fiche + pages joueurs) */
.same-xhair {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-ui);
}

.same-xhair[hidden] {
    display: none;
}

.same-xhair a {
    color: var(--text-body);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.same-xhair a:hover,
.same-xhair a:focus-visible {
    color: var(--link);
    text-decoration: underline;
}

@media (max-width: 800px) {
    .layout {
        flex-direction: column;
    }

    /* Le rail se « déplie » : logo et équipes en haut, réseaux sociaux tout en bas de la page */
    .sidebar {
        display: contents;
    }

    .logo {
        order: 0;
        margin: 0;
        padding: 14px 16px 0;
        background-color: var(--sidebar);
    }

    .logo-img {
        max-width: 160px;
    }

    .sidebar > .side-title {
        order: 1;
        margin: 0;
        padding: 10px 16px 4px;
        background-color: var(--sidebar);
    }

    .side-nav {
        order: 2;
        flex-direction: row;
        overflow-x: auto;
        padding: 0 12px 10px;
        background-color: var(--sidebar);
        scrollbar-width: none;
    }

    .side-btn {
        white-space: nowrap;
    }

    .content {
        order: 3;
    }

    .side-footer {
        order: 4;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 16px;
        border-top: 1px solid var(--line);
        background-color: var(--sidebar);
    }

    .side-footer .side-title,
    .side-note {
        display: none;
    }

    .socials {
        padding: 0;
    }

    .contact-btn {
        flex: 1;
        margin: 0;
    }

    .topbar,
    .hero,
    main,
    .about,
    footer,
    .page-top {
        padding-left: 16px;
        padding-right: 16px;
    }

    .tabs {
        margin-left: 16px;
        margin-right: 16px;
    }

    /* Barre du haut : la recherche prend toute la ligne, les boutons passent en dessous */
    .topbar {
        flex-wrap: wrap;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #search {
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
    }

    .game-switch {
        margin-left: 0;
    }

    /* Menu principal : sur sa propre ligne, au-dessus des boutons */
    .main-nav {
        flex: 1 1 100%;
        gap: 14px;
        min-height: 32px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .main-nav a[aria-current="page"]::after {
        bottom: 0;
    }

    .main-nav a {
        font-size: var(--fs-sm);
    }

    .top-actions {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .game-soon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1;
        gap: 0;
    }

    .game small {
        font-size: var(--fs-2xs);
    }

    .tab-bar {
        -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
        mask-image: linear-gradient(90deg, #000 82%, transparent);
        padding-right: 24px;
    }

    .game,
    #theme-toggle,
    .top-link {
        padding: 0 10px;
        font-size: var(--fs-sm);
    }

    .lang {
        width: 60px;
        font-size: var(--fs-sm);
    }

    .page-top .logo-img {
        height: 32px;
    }

    /* En-tête des pages : le logo, puis le menu sur sa propre ligne */
    .page-top {
        flex-wrap: wrap;
        row-gap: 4px;
        padding-top: 10px;
        padding-bottom: 6px;
    }

    .page-top .main-nav a[aria-current="page"]::after {
        bottom: 0;
    }

    .page-top .logo {
        flex: 0 0 auto;
    }

    /* Sur téléphone, le bouton FAQ n'affiche que l'icône "?" */
    .top-link span {
        display: none;
    }

    .top-link {
        margin-left: auto;
    }

    .hero {
        padding-top: 20px;
    }

    .hero h1 {
        font-size: var(--fs-2xl);
    }

    .quick {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* Inventaires des pros : en bas de page sur téléphone, juste avant les réseaux sociaux */
    .side-skins {
        order: 4;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px 16px;
        border-top: 1px solid var(--line);
        background-color: var(--sidebar);
    }

    .side-skins .side-title,
    .side-skins-all {
        grid-column: 1 / -1;
    }

    .side-skins .side-title {
        margin: 0 0 6px 10px;
    }

    .quick-btn {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .quick-btn svg {
        display: none;
    }

    .quick-name {
        font-size: var(--fs-ui);
    }

    .quick-count {
        font-size: var(--fs-2xs);
    }

    .hero p {
        margin-top: 6px;
        font-size: var(--fs-ui);
    }

    .tabs {
        margin-top: 14px;
    }

    .player-head {
        gap: 14px;
        min-height: 120px;
        padding: 12px 14px 0;
    }

    .player-photo {
        width: 84px;
        height: 96px;
        font-size: var(--fs-xl);
    }

    .player-page h1 {
        font-size: var(--fs-2xl);
    }

    /* Générateur : une colonne ; l'aperçu reste collé en haut de l'écran pendant les réglages,
       le code et la console passent sous les réglages */
    .gen {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .gen-view {
        display: contents;
    }

    .gen-stage {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 8px 0;
        background-color: var(--bg);
    }

    .gen-zoom {
        top: 16px;
        right: 8px;
    }

    .gen-controls {
        order: 1;
    }

    .gen-view > .field {
        order: 2;
    }

    .gen-start {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .gen-slider {
        grid-template-columns: 72px minmax(0, 1fr) 56px;
        gap: 10px;
    }

    /* Skins : 2 cartes par ligne sur téléphone */
    .skin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .skin-body {
        padding: 8px 10px 10px;
    }

    /* Générateur de binds : une colonne, le résultat sous les réglages */
    /* Le bind et "Add to my binds" restent collés en haut pendant les choix ; "My binds" passe en bas */
    .bind {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .bind-result {
        display: contents;
    }

    .bind-now {
        order: -1;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 8px 0;
        background-color: var(--bg);
    }

    .bind-mine {
        order: 2;
    }

    .bind-result .code-block pre {
        max-height: 96px;
    }

    /* Guides : calculatrice et cartes sur une colonne */
    .sens-calc,
    .guide-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Commandes : une colonne, filtres sur une ligne qui défile */
    .cmd-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cmd-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .cmd-filter {
        flex-shrink: 0;
    }

    .cmd-stats div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .ps-players {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ps-player {
        flex-shrink: 0;
    }
}