:root { --bg:#0b1220; --card:#121a2b; --text:#e8eefc; --muted:#98a2b3; --accent:#4f8cff; --ok:#3ccf91; --warn:#f6c445; --bad:#ef4f4f; --time:#8b5cf6; }
  body { margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto; background:var(--bg); color:var(--text); }
  header { padding:20px; }
  .wrap { max-width:1100px; margin:0 auto; padding:20px; }
  .card { background:var(--card); border-radius:16px; padding:16px 20px; box-shadow:0 2px 20px rgba(0,0,0,.2); margin-bottom:16px; }
  h1 { font-size:22px; margin:0 0 8px; }
  form { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px; align-items:end; }
  label { font-size:13px; color:var(--muted); display:block; margin-bottom:4px; }
  input[type=text], input[type=number], select { 
    width:100%; 
    box-sizing: border-box; /* <--- La propriété magique */
    padding:10px 12px; 
    border-radius:12px; 
    border:1px solid #223; 
    background:#0f172a; 
    color:var(--text); 
}
  .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .actions { display:flex; gap:8px; flex-wrap:wrap; }
  button { padding:10px 14px; border:none; border-radius:12px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; }
  .ghost { background:#1f2937; }
  .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:16px; margin-bottom:16px; }
  .grid > .card { margin-bottom: 0; }
@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}
  .kpi { font-size:14px; color:var(--muted); }
  .kpi b { font-size:20px; color:var(--text); }
  table { width:100%; border-collapse:collapse; font-size:14px; }
  th, td { padding:8px 10px; border-bottom:1px solid #223; text-align:left; }
  th { color:var(--muted); font-weight:600; }
  .ok { color:var(--ok); } .warn{color:var(--warn);} .bad{color:var(--bad);}
  .muted { color:var(--muted); } .small { font-size:12px; color:var(--muted); }
  .section-title { font-weight:700; margin:8px 0 6px; }

/* Amélioration lisibilité liens */
/* Liens discrets (Gris -> Blanc) pour le tableau ET le meilleur jeu */
#gamesTable a, a.game-link {
    color: #bbb;
    text-decoration: none;
}
#gamesTable a:hover, a.game-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* Style du badge ECO */
.eco-tag {
    display: inline-block;
    background: #252b3b;
    color: #98a2b3;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.75rem;
    margin-right: 6px;
    border: 1px solid #353f54;
}

/* ============ STYLE LIEN DÉSACTIVÉ POUR L'INSTANT ============

.game-link {
    color: #e0e0e0;
    text-decoration: none;
    border-bottom: 1px dotted var(--accent);
    transition: all 0.2s;
}

.game-link:hover {
    color: var(--accent);
    border-bottom-style: solid;
}

.link-arrow {
    font-size: 0.7em;
    vertical-align: top;
    color: var(--accent);
    margin-left: 2px;
}

============================================================= */

.text-right {
    text-align: right;
}

/* Bandeau d'info fixé en bas */
.footer-info {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}

/* Padding pour éviter que le contenu soit caché sous le footer */
.wrap {
    padding-bottom: 70px;
}

/* Boutons de navigation scroll inline */
.scroll-btn-inline {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    line-height: 1;
}

.scroll-btn-inline:hover {
    background: #6ba3ff;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(79,140,255,.4);
}

.scroll-btn-inline:active {
    transform: scale(0.95);
}

/* Conteneur scrollable pour graphiques larges */
.chart-scroll-container {
    overflow-x: auto;
}

.chart-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.chart-scroll-container::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}
.chart-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
}
.chart-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
}

.chart-scroll-inner {
    min-height: 250px;
}

@media (max-width: 768px) {
    .scroll-btn-inline {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    .footer-info .small {
        font-size: 10px;
    }
}

/* En-têtes de tableau triables */
th.sortable {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color 0.15s;
    white-space: nowrap;
}
th.sortable:hover {
    color: var(--accent);
}
th.sortable.sort-asc,
th.sortable.sort-desc {
    color: var(--accent);
}

/* Tableau Parties par jour */
#dailyTable th:not(:first-child),
#dailyTable td:not(:first-child) {
    text-align: center;
}

/* Ajustement colonnes tableau parties par jour sur mobile */
@media (max-width: 768px) {
    #dailyTable col:first-child { width: 36% !important; }
    #dailyTable col:nth-child(n+2) { width: 16% !important; }
}

/* Tableau Adversaires */
#rivalsTable td:first-child {
    padding: 0;
    font-size: 1.1em;
}
#rivalsTable th:nth-child(2),
#rivalsTable td:nth-child(2) {
    padding-left: 20px;
}
#rivalsTable td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 0; /* Force ellipsis avec table-layout: fixed */
    text-align: left;
}
.rival-link {
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}
.rival-icon {
    font-size: 12px;
    color: var(--muted);
    font-weight: normal;
    margin-left: 3px;
}

/* Liens tableau parties nulles */
.draw-link {
    text-decoration: none;
    color: #bbb;
}
.draw-link:hover {
    color: #fff;
}
.draw-icon {
    font-size: 11px;
    color: var(--muted);
    margin-left: 4px;
}
#rivalsTable th:not(:first-child):not(:nth-child(2)):not(:nth-child(7)):not(:last-child),
#rivalsTable td:not(:first-child):not(:nth-child(2)):not(:nth-child(7)):not(:last-child) {
    text-align: center;
}

/* Tableau Ouvertures */
#openingsTable th:not(:first-child):not(:last-child),
#openingsTable td:not(:first-child):not(:last-child) {
    text-align: center;
}
#openingsTable td:first-child > div {
    max-height: 7.8em; /* ~6 lignes avec line-height 1.3 */
    overflow: hidden;
}

/* Tableaux Ouvertures par couleur (Blancs/Noirs) */
#openingsWhiteTable th:not(:first-child):not(:last-child),
#openingsWhiteTable td:not(:first-child):not(:last-child),
#openingsBlackTable th:not(:first-child):not(:last-child),
#openingsBlackTable td:not(:first-child):not(:last-child) {
    text-align: center;
}
#openingsWhiteTable td,
#openingsBlackTable td {
    height: 65px;
    min-height: 65px;
    vertical-align: top;
}
#openingsWhiteTable td:first-child,
#openingsBlackTable td:first-child {
    overflow: hidden;
}

/* Flèche de tri : largeur minimale pour éviter le décalage */
.sort-arrow {
    display: inline-block;
    min-width: 0.7em;
}

/* Ajustement colonnes tableau ouvertures sur mobile */
@media (max-width: 768px) {
    #openingsTable col:first-child { width: 140px !important; }
    #openingsTable col:nth-child(2) { width: 12% !important; }
    #openingsTable col:nth-child(3),
    #openingsTable col:nth-child(4),
    #openingsTable col:nth-child(5) { width: 10% !important; }
    #openingsTable col:last-child { width: 17% !important; }
    #openingsTable th, #openingsTable td { padding: 8px 3px; }
    #openingsTable td:first-child {
        min-height: 80px;
        height: 80px;
        vertical-align: top;
    }
    /* Tableaux détail Blancs/Noirs */
    #openingsWhiteTable col:first-child,
    #openingsBlackTable col:first-child { width: 140px !important; }
    #openingsWhiteTable col:nth-child(2),
    #openingsBlackTable col:nth-child(2) { width: 12% !important; }
    #openingsWhiteTable col:nth-child(3),
    #openingsWhiteTable col:nth-child(4),
    #openingsWhiteTable col:nth-child(5),
    #openingsBlackTable col:nth-child(3),
    #openingsBlackTable col:nth-child(4),
    #openingsBlackTable col:nth-child(5) { width: 10% !important; }
    #openingsWhiteTable col:last-child,
    #openingsBlackTable col:last-child { width: 17% !important; }
    #openingsWhiteTable th, #openingsWhiteTable td,
    #openingsBlackTable th, #openingsBlackTable td { padding: 8px 3px; }
    #openingsWhiteTable td:first-child,
    #openingsBlackTable td:first-child {
        min-height: 75px;
        height: 75px;
        vertical-align: top;
    }
}

/* Détail par couleur : ajustements sur mobile */
@media (max-width: 768px) {
    .openings-color-left {
        padding-right: 0 !important;
    }
    .openings-color-right {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid #555;
        padding-top: 15px;
        margin-top: 15px;
    }
}

/* Par défaut (desktop) : cacher le header mobile */
.rivals-stats-header-mobile { display: none; }

/* Ajustement colonnes tableau adversaires sur mobile */
@media (max-width: 768px) {
    #rivalsTable col:first-child { width: 30px !important; }
    #rivalsTable col:nth-child(3) { width: 12% !important; }
    #rivalsTable col:nth-child(4),
    #rivalsTable col:nth-child(5),
    #rivalsTable col:nth-child(6) { width: 10% !important; }
    #rivalsTable col:nth-child(7) { width: 20% !important; }
    #rivalsTable col:last-child,
    #rivalsTable th:last-child,
    #rivalsTable td:last-child { display: none; }
    #rivalsTable th, #rivalsTable td { padding: 8px 4px; }
    .rivals-stats-header-desktop { display: none; }
    .rivals-stats-header-mobile { display: inline; }
}

/* Tableau Parties */
.games-scroll-container {
    overflow-x: auto;
}
.games-scroll-container::-webkit-scrollbar {
    height: 10px;
}
.games-scroll-container::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
}
.games-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.4);
    border-radius: 5px;
}
.games-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.6);
}

#gamesTable {
    font-size: 13px;
}
#gamesTable td:nth-child(1),
#gamesTable td:nth-child(2),
#gamesTable td:nth-child(3),
#gamesTable td:nth-child(4) {
    white-space: nowrap;
}
#gamesTable th:nth-child(5),
#gamesTable td:nth-child(5),
#gamesTable th:nth-child(6),
#gamesTable td:nth-child(6) {
    text-align: center;
}