/* ==========================================================================
   Page Horaires — CSS exact porté depuis _floot-export/pages/horaires.module.css
   Chaque sélecteur est préfixé par .page--horaires pour cloisonner ces
   règles (les CSS Modules d'origine étaient cloisonnés par le bundler ;
   ce fichier classique ne l'est pas). Valeurs recopiées à l'identique.
   Source : _floot-export/pages/horaires.tsx / horaires.module.css
   ========================================================================== */

.page--horaires .container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-8);
  min-height: 80vh;
}

.page--horaires .header {
  margin-bottom: var(--spacing-12);
  text-align: center;
}

.page--horaires .title {
  font-family: var(--font-family-heading);
  font-size: clamp(3rem, 5vw, 5rem);
  margin: 0 0 var(--spacing-4) 0;
  color: var(--foreground);
  text-transform: uppercase;
  /* "D'ENTRAÎNEMENT" est un seul mot insécable de 315px à 48px (le plancher
     du clamp sous 320px) : sans point de coupure, il déborde du conteneur en
     "ink overflow" (le mot déborde visuellement de sa boîte sans l'agrandir,
     donc invisible à un audit qui ne regarde que les rects des éléments,
     mais bien mesuré par document.scrollWidth). overflow-wrap permet la
     coupure en dernier recours, uniquement si le mot ne tient vraiment pas. */
  overflow-wrap: break-word;
}

.page--horaires .subtitle {
  font-size: 1.25rem;
  color: var(--muted-foreground);
  max-width: 600px;
  margin: 0 auto;
}

.page--horaires .contentGrid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-8);
}

/* Schedule Styles */
.page--horaires .scheduleSection {
  width: 100%;
  /* Un élément de grille garde par défaut min-width:auto (= la taille min-
     content de son contenu). En dessous de 1024px, .contentGrid repasse en
     une seule colonne, mais ce plancher implicite continue d'imposer sa
     largeur intrinsèque (~300px de contenu flex non compressible dans
     .dayRow/.group) et fait déborder le document à 320px. min-width:0
     autorise l'élément à se réduire jusqu'à la largeur du viewport. */
  min-width: 0;
}

.page--horaires .scheduleCard {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.page--horaires .dayRow {
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page--horaires .dayRow:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.page--horaires .dayHeader {
  background-color: var(--surface);
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page--horaires .dayHeader h2 {
  font-family: var(--font-family-heading);
  font-size: 1.75rem;
  margin: 0;
  color: var(--primary);
}

.page--horaires .dayIcon {
  color: var(--muted-foreground);
}

.page--horaires .slots {
  padding: var(--spacing-4) var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.page--horaires .slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--border);
}

.page--horaires .slot:last-child {
  border-bottom: none;
}

.page--horaires .time {
  font-family: var(--font-family-monospace);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--foreground);
  min-width: 140px;
}

.page--horaires .group {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  flex-grow: 1;
  justify-content: flex-end;
}

.page--horaires .groupName {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
}

/* Sidebar Styles */
.page--horaires .infoSidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  min-width: 0; /* même correctif de blowout de grille que .scheduleSection */
}

.page--horaires .locationCard, .page--horaires .ctaCard {
  background-color: var(--card);
  border: 1px solid var(--border);
  padding: var(--spacing-6);
}

.page--horaires .cardHeader {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--spacing-4);
}

.page--horaires .cardIcon {
  color: var(--secondary);
}

.page--horaires .cardHeader h3 {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  margin: 0;
}

.page--horaires .cardContent {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.page--horaires .address {
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0;
}

.page--horaires .dojoImage {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.page--horaires .accessInfo {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin: 0;
}

.page--horaires .ctaCard {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.page--horaires .ctaCard h3 {
  font-family: var(--font-family-heading);
  font-size: 1.75rem;
  margin: 0;
}

.page--horaires .ctaCardImage {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 2px solid var(--voile-clair-marque);
  display: block;
}

.page--horaires .ctaCard p {
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
}

.page--horaires .requirements {
  font-size: 0.9rem;
  background-color: var(--voile-sombre-moyen);
  padding: var(--spacing-3);
  border-radius: var(--radius-sm);
}

.page--horaires .ctaButton {
  width: 100%;
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border: none;
}

.page--horaires .ctaButton:hover {
  background-color: color-mix(in srgb, var(--secondary), white 10%);
}

/* Responsive */
@media (max-width: 1024px) {
  .page--horaires .contentGrid {
    grid-template-columns: 1fr;
  }

  .page--horaires .infoSidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .page--horaires .locationCard, .page--horaires .ctaCard {
    flex: 1;
    min-width: 300px;
  }
}

@media (max-width: 640px) {
  .page--horaires .slot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
  }

  .page--horaires .group {
    width: 100%;
    justify-content: space-between;
  }

  /* Le min-width:300px posé à 1024px pour la mise en page en rangée (deux
     cartes flex côte à côte) n'était jamais réinitialisé une fois
     .infoSidebar repassé en colonne ci-dessous : chaque carte restait
     forcée à 300px de large, débordant l'écran à 320px. */
  .page--horaires .locationCard, .page--horaires .ctaCard {
    min-width: 0;
  }

  .page--horaires .infoSidebar {
    flex-direction: column;
  }
}