#tableau, #finDeTableau {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 colonnes fixes */
}
#finDeTableau{
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--topnav_width);
    right: 0;
    z-index: -1;
}

/* Par défaut */
.cell{
    min-height: 100%;
}
.cell:hover .texteTitre{
    text-decoration: underline;
    text-underline-offset: 3px;
}
#tableau  .cell {
  min-height: 12.941rem;
  max-height: 12.941rem;
  display: flex;
  flex-direction: column;
  gap: var(--margin1);
  border-bottom: solid var(--borderWidth);
}

/* Colonnes impaires */
.cell:nth-child(5n+1),
.cell:nth-child(5n+3),
.cell:nth-child(5n+5) {
  background-color: var(--couleurFond1);
  color: var(--couleurText1);
  border-color: var(--couleurText1);
}

/* Colonnes paires */
.cell:nth-child(5n+2),
.cell:nth-child(5n+4) {
  background-color: var(--couleurFond2);
  color: var(--couleurText2);
  border-color: var(--couleurText2);
}



/*en fonction de la largeur de la page--------------------------------------------- */
@media (max-width: 1930px) {
    #tableau, #finDeTableau {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* 4 colonnes fixes */
    }
    #finDeTableau .cell:nth-child(5){
        display: none;
    }

    /* Colonnes impaires */
    .cell:nth-child(odd){
      background-color: var(--couleurFond1);
      color: var(--couleurText1);
      border-color: var(--couleurText1);
    }

    /* Colonnes paires */
    .cell:nth-child(even){
      background-color: var(--couleurFond2);
      color: var(--couleurText2);
      border-color: var(--couleurText2);
    }
}
@media (max-width: 1620px) {
    #tableau, #finDeTableau {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 colonnes fixes */
    }
    #finDeTableau .cell:nth-child(5),
    #finDeTableau .cell:nth-child(4){
        display: none;
    }

    /* Colonnes impaires */
    .cell:nth-child(3n+1),
    .cell:nth-child(3n+3){
      background-color: var(--couleurFond1);
      color: var(--couleurText1);
      border-color: var(--couleurText1);
    }

    /* Colonnes paires */
    .cell:nth-child(3n+2){
      background-color: var(--couleurFond2);
      color: var(--couleurText2);
      border-color: var(--couleurText2);
    }
}
@media (max-width: 1290px) {
    #tableau, #finDeTableau {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 5 colonnes fixes */
    }
    #finDeTableau .cell:nth-child(5),
    #finDeTableau .cell:nth-child(4),
    #finDeTableau .cell:nth-child(3){
        display: none;
    }

    /* Colonnes impaires */
    .cell:nth-child(odd){
      background-color: var(--couleurFond1);
      color: var(--couleurText1);
      border-color: var(--couleurText1);
    }

    /* Colonnes paires */
    .cell:nth-child(even){
      background-color: var(--couleurFond2);
      color: var(--couleurText2);
      border-color: var(--couleurText2);
    }
}
/*phone*/
@media (max-width: 916px) {
    #tableau  .cell {
      min-height: 0;
      max-height: none;
      border-bottom: none;
    }
    .caseAvecPadding{
        padding-bottom: var(--margin2);
    }



    #tableau, #finDeTableau {
      display: grid;
      grid-template-columns: 1fr; /* 1 colonnes fixes */
    }
    #finDeTableau .cell:nth-child(5),
    #finDeTableau .cell:nth-child(4),
    #finDeTableau .cell:nth-child(3),
    #finDeTableau .cell:nth-child(2){
        display: none;
    }

    /* Colonnes impaires */
    .cell:nth-child(odd){
      background-color: var(--couleurFond1);
      color: var(--couleurText1);
      border-color: var(--couleurText1);
    }

    /* Colonnes paires */
    .cell:nth-child(even){
      background-color: var(--couleurFond2);
      color: var(--couleurText2);
      border-color: var(--couleurText2);
    }
}