/* RESULTATS */

.section-resultats {
    background-color: #ffffff;
}

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

  .grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    padding: 1.8rem;
    padding-bottom: 2rem;
    justify-content: center;
    box-sizing: border-box;
  }

  /* CSS DE LA CARTE */

  .match {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.884);

    flex: 1 1 100%;
    box-sizing: border-box;
    min-width: 250px;
    max-width: 100%;
  }

  /* CSS DU LOGO */

  .club-logo {
    text-align: center;
  }

  .club-logo img {
    height: 120px;
    max-width: 80%;
    object-fit: contain;
  }

  /* CSS DE LA DATE */

  .date {
    font-size: 1.2em;
    color: #000000;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  /* CSS DES EQUIPES ET DU SCORE */

  .teams {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    text-align: center;
  }

  .equipe {
    font-size: 1.8rem;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .score {
    font-size: 2.8rem;
    color: #ff0000;
    flex-direction: row;
  }

  .separator {
    font-size: 1.2rem;
    color: #000000;
  }

}

/* DESKTOP */
@media screen and (min-width: 769px) {

  .grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 75px;
    padding: 3.2rem;
    padding-bottom: 2rem;
    justify-content: center;
    box-sizing: border-box;
  }

  /* CSS DE LA CARTE */

  .match {
    background: white;
    border-radius: 10px;
    padding: 15px;

    flex: 1 1 calc(33.33% - 20px);
    box-sizing: border-box;
    min-width: 250px;
    max-width: 100%;

    /* ANIMATION */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* ANIMATION */
  .match:hover {
    transform: scale(1.02); /* Zoom léger */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Ombre plus marquée */
  }

  /* CSS DU LOGO */

  .club-logo {
    text-align: center;
  }

  .club-logo img {
    height: 120px;
    max-width: 80%;
    object-fit: contain;
  }

  /* CSS DE LA DATE */

  .date {
    font-size: 1.2em;
    color: #000000;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  /* CSS DES EQUIPES ET DU SCORE */

  .teams {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 30px;
    font-weight: bold;
  }

  .equipe {
    font-size: 1.8rem;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .score {
    font-size: 2.8rem;
    color: #d32f2f;
  }

  .separator {
    font-size: 1.2rem;
    color: #000000;
  }

}