/* ----------------------------------------
   GLOBAL
----------------------------------------- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #393939;
    color: #f0f0f0;
    margin: 20px;
    padding-left: 40px;
    padding-right: 40px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    text-align: center;
    color: #be5014;
    margin-bottom: 40px;
}

h2 {
    color: #ffffff;
    border-bottom: 2px solid #f39c12;
    padding-bottom: 5px;
}



/* ----------------------------------------
   TOP BAR + BUTTONS
----------------------------------------- */
.top-bar--fixed {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.bet-button {
    background-color: #f39c12;
    color: #1c1c1c;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

.bet-button:hover {
    background-color: #e6b800;
}



/* ----------------------------------------
   TABLEAU STANDARD (utilisé partout)
----------------------------------------- */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 40px;
    background-color: #2c2c2c;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
}

th, td {
    border: 1px solid #444;
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
    word-wrap: break-word;
}

th {
    background-color: #333;
    color: #f39c12;
}

td {
    color: #f0f0f0;
}



/* ----------------------------------------
   TRIPLE TABLES (page Classements)
----------------------------------------- */
.triple-tables {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 30px 0 10px;
}

.triple-tables .table-wrapper {
    flex: 1 1 0;
    max-width: 33.33%;
}

.table-title {
    text-align: center;
    color: #ffffff;
    margin: 8px 0 12px;
    font-weight: 700;
}

@media (max-width: 960px) {
    .triple-tables {
        flex-wrap: wrap;
    }
    .triple-tables .table-wrapper {
        max-width: 100%;
        flex-basis: 100%;
    }
}

/* === 3 TABLEAUX ALIGNÉS (Points / Exemples) === */

.points-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin: 20px 0;
}

.points-row .points-table-wrapper {
  flex: 1 1 0;
  max-width: 33.33%;
  min-width: 280px;
  margin: 0;
}

/* Responsive : empile sous 1000px */
@media (max-width: 1000px) {
  .points-row {
    flex-wrap: wrap;
  }
  .points-row .points-table-wrapper {
    max-width: 100%;
    flex-basis: 100%;
  }
}

/* ----------------------------------------
   POINT TABLES (3 tableaux de la page règlement)
----------------------------------------- */
.points-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #9b9b9b;
    color: #1c1c1c;
    box-shadow: 0 0 0 2px #bfbfbf;
}

.points-table thead th {
    background-color: #7f7f7f;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
    padding: 10px 8px;
    border: 1px solid #cfcfcf;
}

.points-table tbody td {
    padding: 10px 8px;
    border: 1px solid #cfcfcf;
    text-align: center;
}

.points-table .rank-cell {
    background-color: #9b9b9b;
    font-size: 1.2rem;
    font-weight: 700;
    vertical-align: middle;
}

.points-table tbody tr:hover td {
    background-color: #a9a9a9;
}

table tbody tr:hover td {
    background-color: #535050;
}

table tbody tr:hover td {
    font-weight: bold;
}


/* ----------------------------------------
   CANVAS (Chart.js)
----------------------------------------- */
canvas {
    background: #7f7f7f;
    border-radius: 8px;
}



/* ----------------------------------------
   FORMS (inputs calculateur)
----------------------------------------- */
.form-field label {
    color: #f0f0f0;
    font-weight: 600;
}

.form-field input[type="number"] {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #555;
    background: #1f1f1f;
    color: #f0f0f0;
    box-sizing: border-box;
}

/* Transforme le conteneur principal en grille 2 colonnes */
.calc-container {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 2 colonnes de même largeur */
    grid-template-rows: auto auto;   /* 2 lignes */
    gap: 20px;
}

/* Place les deux champs l'un au-dessus de l'autre à gauche */
.calc-grid {
    grid-column: 1;                  /* colonne gauche */
    grid-row: 1 / span 2;            /* occupe les 2 lignes */
    display: grid;
    grid-template-rows: auto auto;   /* deux champs empilés */
    gap: 16px;
}

/* Carte résultat à droite, occupant aussi les 2 lignes */
.result-card {
    grid-column: 2;          /* colonne droite */
    grid-row: 1 / span 2;    /* hauteur = 2 champs */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centre verticalement */
    margin-top: 16px;
    background: #1f1f1f;
    border: 1px solid #444;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.calc-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: #f0f0f0;
    margin: 6px 0 14px;
}

.calc-row code {
    background: #1f1f1f;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #444;
}

.result-card .value {
    font-size: 2rem;
    color: #f39c12;
    font-weight: 800;
}

.small {
    font-size: 0.9rem;
    color: #cfcfcf;
}



/* ----------------------------------------
   GENERAL SCROLL FIX
----------------------------------------- */
html {
  overflow-y: scroll;
  scroll-behavior: smooth;
}