/* B2A — Page Créneaux (Incrément 5)
 * Réutilise les classes partagées (.btn-violet, .t-display, .t-meta, .t-num,
 * .page-section, .page-hero) de tokens.css / styles.css. */

/* ── Bascule calendrier / liste (mobile) ───────────────────────────
   Le planning reste en vue calendrier par défaut (desktop et mobile).
   Sur mobile, un utilisateur peut basculer vers une vue liste par jour
   (cf. .week-overview sur la page d'accueil), plus lisible qu'une grille
   avec défilement horizontal sur petit écran. */
.creneaux-view-toggle {
    display: none;
}
.filter-btn {
    font: var(--weight-medium) var(--text-sm)/1 var(--font-body);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--rule-strong);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
}
.filter-btn.is-active {
    border: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
}

/* ── Planning ───────────────────────────────────────────────────── */
.creneaux-planning__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.creneaux-planning__title {
    font-size: var(--text-3xl);
    margin: 0;
}
.creneaux-planning__legend {
    display: flex;
    gap: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: var(--ink-3);
}
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: var(--space-2);
}
.legend-dot--jeu-libre { background: var(--ink); }
.legend-dot--entrainement { background: var(--violet); }

.creneaux-grid-wrapper {
    overflow-x: auto;
}
.creneaux-grid {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(140px, 1fr));
    min-width: 1080px;
    border: 1px solid var(--rule);
}
.creneaux-grid__hours-spacer,
.creneaux-day__name {
    padding: var(--space-3) var(--space-3);
    border-bottom: 1.5px solid var(--ink);
    background: var(--paper-2);
    box-sizing: border-box;
}
.creneaux-grid__hours {
    border-right: 1px solid var(--rule);
}
.creneaux-grid__hour {
    height: 64px;
    padding: var(--space-1) var(--space-2);
    box-sizing: border-box;
    border-top: 1px dashed var(--rule);
}
.creneaux-grid__hour:first-child {
    border-top: none;
}
.creneaux-day {
    border-left: 1px solid var(--rule);
}
.creneaux-day__body {
    position: relative;
    background-image: repeating-linear-gradient(to bottom,
        var(--rule) 0, var(--rule) 1px, transparent 1px, transparent 64px);
}
.slot-card {
    position: absolute;
    padding: var(--space-2) var(--space-3);
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    box-sizing: border-box;
    /* Permet aux règles @container ci-dessous de réagir à la hauteur propre de la
       carte (durée du créneau) plutôt qu'au viewport. */
    container-type: size;
    container-name: slot-card;
}
.slot-card--jeu-libre { background: var(--ink); color: var(--paper); }
.slot-card--entrainement { background: var(--violet); color: #fff; }

/* Par défaut (créneau court, peu de hauteur) : une ligne par info, tronquée avec
   une ellipse si besoin — évite qu'une ligne soit coupée à mi-hauteur par l'
   `overflow: hidden` de la carte. */
.slot-card__time,
.slot-card__label,
.slot-card__gym {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slot-card__time {
    color: inherit;
    opacity: 0.75;
}
.slot-card__label {
    font-weight: var(--weight-semibold);
    margin: var(--space-1) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
}
.slot-card__gym {
    color: inherit;
    opacity: 0.75;
}

/* Créneau assez long (>= ~1h25) : assez de hauteur pour revenir à la ligne comme
   avant plutôt que de tronquer — y compris l'horaire, qui peut être coupé (ellipse)
   dans une carte étroite (créneaux partagés) même quand la carte est haute. */
@container slot-card (min-height: 90px) {
    .slot-card__time,
    .slot-card__label,
    .slot-card__gym {
        white-space: normal;
        overflow-wrap: break-word;
        text-overflow: clip;
    }
}

/* Créneau partagé avec un ou plusieurs autres sur la même tranche horaire :
   la carte est plus étroite (cf. CreneauxService#toCards / leftPercent-widthPercent),
   on resserre le texte pour que les 3 lignes (horaire, libellé, gymnase) restent lisibles. */
.slot-card--shared {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}
.slot-card--shared .slot-card__label {
    font-size: var(--text-xs);
    margin: 2px 0;
}

/* ── Vue liste (mobile uniquement) ──────────────────────────────── */
.creneaux-list {
    display: none;
}
.creneaux-list__day {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--rule);
}
.creneaux-list__day:first-child {
    border-top: none;
}
.creneaux-list__day-name {
    flex: 0 0 auto;
    width: 5rem;
}
.creneaux-list__slots {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.creneaux-list__slot {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--rule);
}
.creneaux-list__slot:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.creneaux-list__slot .legend-dot {
    flex: 0 0 auto;
    margin-right: 0;
    align-self: center;
}
.creneaux-list__slot-time {
    flex: 0 0 auto;
    font-size: var(--text-base);
}
.creneaux-list__slot-body {
    min-width: 0;
}
.creneaux-list__slot-label {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
}
.creneaux-list__slot-gym {
    color: var(--ink-3);
}

/* ── Salles ─────────────────────────────────────────────────────── */
.creneaux-salles {
    background: var(--paper-3);
    border-top: 1px solid var(--rule);
}
.creneaux-salles__title {
    font-size: var(--text-3xl);
    margin: var(--space-3) 0 var(--space-8);
}
.creneaux-salles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-8);
}
.salle-card {
    border: 1.5px solid var(--ink);
    background: var(--paper-2);
}
.salle-card__photo {
    aspect-ratio: 16 / 9;
}
.salle-card__map {
    position: relative;
    overflow: hidden;
}
.salle-card__map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* La carte n'est qu'un aperçu : toute l'interaction (pan/zoom) se fait
       après clic, sur Google Maps — évite qu'un scroll de page se retrouve
       capté par l'iframe (piège au clavier/trackpad). */
    pointer-events: none;
}
.salle-card__map-link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: var(--space-3);
    box-sizing: border-box;
}
.salle-card__map-link:focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: -2px;
}
.salle-card__map-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--ink);
    color: var(--paper);
    font: var(--weight-medium) var(--text-xs)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
}
.salle-card__body {
    padding: var(--space-6);
}
.salle-card__name {
    font-size: var(--text-xl);
    margin: 0 0 var(--space-2);
}
.salle-card__address {
    font-size: var(--text-sm);
    color: var(--ink-2);
    margin-bottom: var(--space-5);
}
.salle-card__details {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
}
.salle-card__courts {
    font-size: var(--text-xl);
    color: var(--violet);
}
.salle-card__access {
    font-size: var(--text-sm);
}

/* ── CTA ────────────────────────────────────────────────────────── */
.creneaux-cta {
    background: var(--ink);
    color: var(--paper);
}
.creneaux-cta__inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-10);
    align-items: center;
}
.creneaux-cta__title {
    font-size: var(--text-3xl);
    margin: 0;
}
.creneaux-cta__text {
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--leading-relaxed);
}

/* ── Responsive (mobile < 769px) ────────────────────────────────── */
/* Le planning garde la vue calendrier par défaut (défilement horizontal,
   .creneaux-grid-wrapper). Sur mobile seulement, un utilisateur peut basculer
   vers la vue liste par jour via .creneaux-view-toggle. */
@media (max-width: 768px) {
    .creneaux-salles__grid {
        grid-template-columns: 1fr;
    }
    .creneaux-cta__inner {
        grid-template-columns: 1fr;
    }

    .creneaux-view-toggle {
        display: flex;
        gap: var(--space-2);
        margin-bottom: var(--space-5);
    }
    .creneaux-planning.is-list-view .creneaux-grid-wrapper {
        display: none;
    }
    .creneaux-planning.is-list-view .creneaux-list {
        display: block;
    }
}