/* /config/custom.css */

/* Desktop / grand écran : calendrier à gauche, Media à droite */
@media (min-width: 1200px) {
  .th-media-row {
    width: 100%;
    display: grid;
    grid-template-columns: 270px 1fr; /* ajuste la largeur du calendrier ici */
    gap: 16px;
    align-items: start;
  }

  .services-group.flex-1.basis-full.px-1.th-media-calendar-group {
    margin-top: 44px;
  }

  /* Empêche les groupes de prendre "full width" dans notre wrapper */
  .th-media-row > .services-group {
    flex: unset !important;
    basis: auto !important;
    width: auto !important;
  }

  /* Optionnel : le calendrier colle en haut si Media est plus grand */
  .th-media-calendar-group {
    position: sticky;
    top: 12px; /* ajuste si tu veux qu'il reste visible au scroll */
    align-self: start;
  }
}

/* Mobile : on laisse en colonne (comportement normal) */
@media (max-width: 1199px) {
  .th-media-row {
    display: block;
  }
}

.relative.flex.flex-row.w-full.service-container {
    overflow-x: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}