#index {

  font-family: Palatino Linotype;

  display: inline-block;

  margin: 0px auto;

  text-align: center;


  h1 {

    color:antiquewhite;

    text-shadow: 3px 3px 8px black;

  }

  /* Exception pour l'image principale */

  .hero-image {

    padding: 0;

    width: 100%;

    height: auto;

    max-width: 1000px; /* ou selon ce que tu veux */

    display: block;

    margin: 0 auto;

  }

  .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; /* ✅ centre horizontalement */
      gap: 10px;               /* ✅ optionnel : ajoute de l’espace entre les box */
      position: relative;
  }

  .box {
      width: 500px;
      height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px;
      padding: 20px;
      font-size: 2rem;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);  /* 🌑 ombre */
      border-radius: 15px;
  }

  .relative {
      background-color: beige;
      border: chocolate solid 2px;
      position: relative;
      top: 1px;

      /* left: 10px;

      right: 10px; */

  }

  .box h3, .box p {

    background-color: rgba(255, 255, 255, 0.7); /* fond blanc semi-transparent */

    padding: 5px;

    border-radius: 15px;

  }

  .belle_epoque {
      background-image: url("../images/belle_epoque-jEbYFfK.jpg");
      background-size: cover;
      background-position: center;
  }

  .roaring_twenties {

      background-image: url("../images/roaring_twenties-YD3vgm3.jpg");

      background-size: cover;

      background-position: center;

  }

  .classic_era {

      background-image: url("../images/classic_era-_4AjkaG.jpg");

      background-size: cover;

      background-position: center;

  }

  .golden_age {

      background-image: url("../images/golden_age-J0pW_dx.jpg");

      background-size: cover;

      background-position: center;

  }

  .centaurs {

      background-image: url("../images/centaurs-mr8f9MT.jpg");

      background-size: cover;

      background-position: center;

  }

  .speed {

      background-image: url("../images/speed-3_GoGQl.jpg");

      background-size: cover;

      background-position: center;

  }

  .continental {

      background-image: url("../images/continental-bE7Mb08.jpg");

      background-size: cover;

      background-position: center;

  }

  .space {

      background-image: url("../images/space-ZTGD_Ib.jpg");

      background-size: cover;

      background-position: center;

  }

  /* ---------------Style de la navbar----------- */

  /* ----------- NAVBAR FIXÉE, FLOUTÉE, RESPONSIVE ----------- */

  #navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 10px;

    backdrop-filter: blur(8px);       /* 🎯 flou */

    background-color: rgba(119, 119, 119, 0.8); /* 🎨 couleur semi-transparente */

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);  /* 🌑 ombre */

  }

  .navbar a:visited {

    color: white;

  }



  /* Liens */

  .navbar-left {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

  }



  .navbar-left a {

    color: #f2f2f2;

    text-decoration: none;

    padding: 8px 12px;

    transition: background-color 0.3s;

    white-space: nowrap;

  }

  .navbar-left a img {

    vertical-align: middle;

    margin-right: 1px; /* espace entre l'icône et le texte */

  }

  .navbar-left a:hover {

    color: hotpink;

    background-color: #555;

    border-radius: 4px;

  }

  /* Menu dropdown "About" */

  /* Container du menu déroulant */

  .dropdown-container {

    position: relative;

    display: inline-block;

  }

  /* Menu caché par défaut */

  .dropdown-menu {

    display: none;

    position: absolute;

    top: 100%; /* juste en dessous du lien parent */

    left: 0;

    background-color: rgba(119, 119, 119, 0.8); /* 🎨 couleur semi-transparente */

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);  /* 🌑 ombre */

    min-width: 160px;

    z-index: 1;

    border-radius: 4px;

    text-align: left; /* <-- ASSURE L’ALIGNEMENT À GAUCHE */

    padding: 0;        /* Enlève tout centrage implicite */

  }

  /* Lien dans le menu déroulant */

  .dropdown-menu a {

    color: antiquewhite;

    padding: 10px 15px;

    text-decoration: none;

    display: block;

    text-align: left; /* <-- ALIGNEMENT À GAUCHE POUR LES LIENS */

  }

  .dropdown-menu a:hover {

    background-color: #555;

  }

  /* Affiche le menu au survol du conteneur */

  .dropdown-container:hover .dropdown-menu {

    display: block;

  }

  /* Fin menu dropdown "About" */



  /* Champ de recherche */

    .custom-search {

      display: inline-flex;

      align-items: center;

      margin-left: 20px;

    }



    .custom-search input {

      padding: 5px 10px;

      font-size: 14px;

      border: 1px solid #ccc;

      border-radius: 6px 0 0 6px;

      outline: none;

      width: 200px;

    }



    .custom-search button {

      padding: 5px 10px;

      background-color: #333;

      color: white;

      border: none;

      border-radius: 0 6px 6px 0;

      cursor: pointer;

    }

  /* Fin champ de recherche */



  /* Responsive */

  @media (max-width: 768px) {

    #navbar {

      flex-direction: column;

      align-items: flex-start;

      padding: 10px;

    }



    .navbar-left {

      flex-direction: column;

      align-items: flex-start;

      width: 100%;

      gap: 5px;

    }



    .right-logo {

      align-self: flex-end;

    }

  }





  /* ------------Fin style de la navbar----------- */



  body {

    background-color: #1c87c9;

    padding-top: 60px; /* Pour ne pas que la navbar masque le haut du contenu */

  }



  table {

    background-color: beige;

    border: 1px solid black;

    border-collapse: collapse;

    text-align: center;

    margin-left: auto;

    margin-right: auto;

  }



  th {

    border: 1px solid #808080;

    border-color: #1c87c9;

    padding-left: 5px;

    padding-right: 5px;

    height: 40px;

  }

  tr:hover {

    background-color: #D6EEEE;

  }



  td {

    border: 1px solid #808080;

    border-color: #1c87c9;

    padding: 0cm 0.05cm;

  }





  .t1 {

    table-layout: fixed;

  }



  .th-left {

    text-align: left;

    padding-left: 10px;

  }



  .td-left {

    text-align: left;

    padding-left: 10px;

  }



  .table-top {

    background-color: #1c87c9;

    border: 1px solid black;

    border-collapse: collapse;

    text-align: center;

    margin-left: auto;

    margin-right: auto;

  }



  p {

    text-align: center;

    font-size: small;

  }



  img {

    padding: 2px;

    width: 80px;

  }



  .button {

    background-color: #3f6fad;

    border: none;

    border-radius: 10px;

    color: white;

    height: 40px;

    width: 90px;

  }



  .button,

  .button-encours {

    border: none;

    border-radius: 10px;

    color: white;

    height: 40px;

    width: 90px;

  }



  .button {

    background-color: #3f6fad;

  }



  .button-encours {

    background-color: #1e06a1;

    font-size: large;

    text-decoration: none;

  }



  .button a:link,

  .button a:visited {

    color: white;

  }

  /* unvisited link */

  span.dates a:link {

    color: blue;

  }



  /* visited link */

  span.dates a:visited {

    color: blue;

  }



  /* mouse over link */

  a:hover {

    color: hotpink;

  }

  /* selected link */

  a:active {

    color: yellow;

  }



  /* Style the footer */

  footer {

    background-color: rgba(119, 119, 119, 0.8); /* 🎨 couleur semi-transparente */

    padding: 10px;

    text-align: center;

    color: white;

  }

  .footer-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  /* --- pour fixer la première ligne du tableau -- */

  /* Style pour la ligne sticky */

  .sticky-header {

      position: sticky;

      top: 60px; /* Ajustez cette valeur en fonction de la hauteur de votre navbar */

      background-color: #e6e6e6; /* Assurez-vous que le fond est visible */

      z-index: 100; /* Assurez-vous que la ligne est au-dessus des autres éléments */

  }



  /* Style pour les cellules de la ligne sticky */

  .sticky-header th {

      border: 1px solid black; /* Ajoutez la bordure intérieure */

      padding: 0; /* Ajoutez un peu de padding pour un meilleur rendu */

  }



  .Mydiv {

    font-size: 0.9em;

    line-height: 1.4em;

    text-align: center;

    background-color: rgba(255, 255, 255, 0.7); /* fond blanc semi-transparent */

    border-radius: 15px;

  }

  .Mysubdiv {

    display:inline-flexbox;

    gap: 8px;

    background-color: rgba(255, 255, 255, 0.7); /* fond blanc semi-transparent */

    padding: 5px;

    border-radius: 15px;

  }



  .dates {

    margin-right: 10px;

  }

  /* span.dates:hover {

    color: darkblue;

    text-decoration: underline;

  } */

  /* --- Hamburger button --- */

  .hamburger {

    display: none;

    font-size: 28px;

    background: none;

    border: none;

    color: white;

    cursor: pointer;

    z-index: 1001;

  }



  /* Responsive navbar */

  @media (max-width: 768px) {

    #navbar {

      flex-direction: column;

      align-items: stretch;

      position: fixed;

    }



    .right-logo {

      width: 100%;

      display: flex;

      justify-content: space-between;

      align-items: center;

    }



    .navbar-left {

      flex-direction: column;

      align-items: flex-start;

      width: 100%;

      background-color: rgba(119, 119, 119, 0.95);

      overflow: hidden;

      max-height: 0;

      transition: max-height 0.4s ease, padding 0.3s ease;

      padding: 0 10px;

    }



    .navbar-left.show {

      max-height: 500px; /* Ajuste selon le contenu */

      padding: 10px;

    }



    .hamburger {

      display: block;

      position: absolute;

      top: 15px;

      right: 15px;

    }

  }

  /* -------- Section latest news ----------- */

  .news-block {

    display: flex;

    flex-direction: column;

    max-width: 900px;

    margin: 0 auto;

    padding: 0 1em;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);  /* 🌑 ombre */

    border-radius: 15px;

  }



  .news-block h1 {

    font-size: 1.5em;

    text-align: center;

  }



  /* Conteneur pour rendre l'iframe responsive */

  .iframe-container {

    position: relative;

    width: 100%;

    padding-bottom: 30%; /* Rapport 16:9 = (9 / 16) * 100 */

    height: 0;

    overflow: hidden;

  }



  /* Iframe responsive */

  .iframe-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: none;

  }

  @media screen and (max-width: 768px) {

      .iframe-container {

      padding-bottom: 75%; /* un peu plus haut sur petits écrans */

    }

  }



  /* Pour la ligne de titre des 1xxx_menu.html*/

  .responsive-title {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 700px;

    gap: 1rem;

    padding: 1rem;



    max-width: 900px; /* Limite la largeur totale */

    margin: auto;     /* Centre le bloc */

    flex-wrap: nowrap;

    text-align: center;

  }



  .title-logo {

    width: 50px;

    height: auto;

    flex-shrink: 0; /* Empêche le logo de rétrécir */

  }



  .title-text {

    font-size: 1.5rem;

    margin: 0;

    flex: 1;

    max-width: 100%;

  }



  /* Responsive pour petits écrans */

  @media screen and (max-width: 768px) {

    .responsive-title {

      flex-direction: column;

    }



    .title-text {

      font-size: 1.2rem;

    }



    .title-logo {

      display: none;

    }

  }

  /* Fin Pour la ligne de titre */



  @media screen and (max-width: 768px) {

    .table-header {

      display: none;

    }

    tbody .table-main td {

      display: block;

      text-align: right;

      color: #888;

    }

  }

  /* pour essayer de faire un menu "déroulant" pour les pages de calendrier 19XX */

  /* }

    .toggle-button {

      cursor: pointer;

      font-size: 32px;

      margin: 80px 0;

      user-select: none;

      color: darkblue;

    }

    .hidden-table {

      display: none;

    } */



  .menu-main-table {

    width: 1100px;

  } 

  .menu-main-table td { 

    padding-left: 10px;

    padding-right: 10px;

  }



  .race-main-table {

    width: 1250px;

  } 

  .race-main-table th { 

    padding-left: 10px;

    padding-right: 10px;

    background-color: #e6e6e6;

  }

  .race-main-table td { 

    padding-left: 10px;

    padding-right: 10px;

  }





  .rounds-popup {

    position: absolute;

    top: 50px;

    left: 150px;

    background-color: white;

    border: 1px solid #ccc;

    padding: 10px;

    display: none;

    z-index: 999;

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

  }



  .rounds-popup a {

    display: block;

    text-decoration: none;

    color: #333;

    margin: 2px 0;

  }



  .cell-hover:hover + .rounds-popup,

  .rounds-popup:hover {

    display: block;

  }
}