/* ==========================================================================
   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;
  /* svh = plus petit viewport, barre d'URL DÉPLOYÉE. vh vaut le plus grand :
     sur mobile la boîte dépassait donc l'écran puis sursautait quand la barre
     se repliait. La déclaration vh reste en repli pour les navigateurs
     antérieurs aux unités dynamiques (adaptation mobile du 11 août 2026). */
  min-height: 80svh;
}

.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;
  }
}