:root {
      --gold-color: #FFD700;
      --dark-bg: #1c1c1c;
      --light-text: #f5f5f5;
      --green-up: #4caf50;
      --red-down: #f44336;
      --tab-bg: rgba(255, 215, 0, 0.1);
      --tab-active: rgba(255, 215, 0, 0.2);
    }
    /* * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: var(--dark-bg);
      color: var(--light-text);
      font-family: Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem;
    } */
    header {
      width: 100%;
      padding: 1rem 0;
      background-color: var(--gold-color);
      color: #000;
      text-align: center;
      font-size: 1.5rem;
      font-weight: bold;
      border-radius: 4px;
      margin-bottom: 1rem;
    }
    /* Onglets */
    .tabs {
      display: flex;
      width: 90%;
      max-width: 800px;
      border-bottom: 2px solid var(--gold-color);
      margin-bottom: 1rem;
    }
    .tab {
      flex: 1;
      text-align: center;
      padding: 0.75rem 0;
      cursor: pointer;
      background-color: var(--tab-bg);
      color: var(--light-text);
      font-weight: bold;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      transition: background-color 0.3s ease;
    }
    .tab.active {
      background-color: var(--tab-active);
      color: #000;
      border: 2px solid var(--gold-color);
      border-bottom: none;
    }
    /* Contenus de chaque onglet */
    .tab-content {
      width: 90%;
      max-width: 800px;
      display: none;
      flex-direction: column;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
    .tab-content.active {
      display: flex;
    }

    /* Carte du prix courant */
    .current-price-card {
      width: 100%;
      background-color: rgba(255, 215, 0, 0.1);
      border: 2px solid var(--gold-color);
      border-radius: 8px;
      padding: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }
    .current-price-card .value {
      font-size: 2.5rem;
      font-weight: bold;
      color: var(--gold-color);
      text-shadow: 0 0 8px var(--gold-color);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .arrow-up {
      color: var(--green-up);
      font-size: 1.5rem;
      vertical-align: middle;
    }
    .arrow-down {
      color: var(--red-down);
      font-size: 1.5rem;
      vertical-align: middle;
    }

    /* Conteneur du graphique */
    .chart-container {
      position: relative;
      width: 100%;
      height: 300px;
      background-color: rgba(255, 215, 0, 0.05);
      border: 1px solid var(--gold-color);
      border-radius: 8px;
      padding: 0.5rem;
    }

    /* Tableau synthétique */
    table {
      width: 100%;
      border-collapse: collapse;
      background-color: rgba(255, 215, 0, 0.05);
      border: 1px solid var(--gold-color);
      border-radius: 8px;
      overflow: hidden;
    }
    thead {
      background-color: var(--gold-color);
      color: #000;
    }
    th, td {
      padding: 0.5rem;
      text-align: center;
      border-bottom: 1px solid var(--gold-color);
      font-size: 0.9rem;
    }
    tbody tr:last-child td {
      border-bottom: none;
    }

    /* Contenu Historique (variation) */
    .period-container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .period-buttons {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .period-button {
      background-color: var(--tab-bg);
      border: 2px solid var(--gold-color);
      color: var(--light-text);
      padding: 0.5rem 1rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: background-color 0.3s ease;
    }
    .period-button.active {
      background-color: var(--gold-color);
      color: #000;
    }
    .history-container {
      width: 100%;
      background-color: rgba(255, 215, 0, 0.05);
      border: 1px solid var(--gold-color);
      border-radius: 8px;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .history-chart {
      position: relative;
      width: 100%;
      height: 250px;
    }
    .history-table {
      width: 100%;
      border-collapse: collapse;
    }
    .history-table th, .history-table td {
      padding: 0.5rem;
      text-align: center;
      border: 1px solid var(--gold-color);
      font-size: 0.85rem;
      color: var(--light-text);
    }
    .history-table th {
      background-color: var(--gold-color);
      color: #000;
    }

    @media (max-width: 600px) {
      .current-price-card .value {
        font-size: 2rem;
      }
      .chart-container {
        height: 200px;
      }
    }