.horaires {
  margin: 0 auto;
  padding: 0;
}

/* ---- Ligne "en direct" ---- */
.horaires__live {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-white);
  margin-bottom: 30px !important;
}

.horaires__live .statut {
  font-weight: 700;
}

.statut--ouvert {
  color: #7fc8a0;
}

.statut--ferme {
  color: #e08a7d;
}

/* ---- Grille des jours ---- */
.horaires__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;

  .jour {
    /* ---- Jour actif ---- */
    .jour__nom {
      font-family: var(--tipo-titulos);
      font-weight: 400;
      font-size: clamp(24px, 2.4vw, 38px);
      color: var(--c-beige-dark);
      padding-bottom: 10px;
      border-bottom: 1px solid var(--c-beige-dark);
      transition: color .3s ease, border-color .3s ease;
      letter-spacing: .5px;
    }

    .jour__horaire {
      margin-top: 14px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--c-beige-dark);
      transition: color .3s ease;
    }

    &.is-today {
      .jour__nom {
        color: var(--c-white);
        border-bottom: 2px solid var(--c-beige-medium);
      }
      
      .jour__horaire {
        color: var(--c-white);
      }
    }

    &:hover {
      .jour__nom {
        color: var(--c-white);
        border-bottom: 2px solid var(--c-beige-medium);
      }

      .jour__horaire {
        color: var(--c-white);
      }
    }
  }
}

@media(max-width: 900px) {
  .horaires__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }
}

@media(max-width: 400px) {
  .horaires__grid {
    grid-template-columns: 1fr;
  }
}