/**
 * Planning global (template-parts/global/planning-global.php).
 *
 * Complement de planning.css, jamais charge seul : la grille, les en-tetes et
 * le comportement mobile viennent de la feuille principale. On n'ajoute ici
 * que ce qui distingue le planning global du planning d'un seul programme :
 * la barre de filtres, le code couleur par programme et la ligne de
 * provenance des cartes.
 */

/*
 * Six teintes, reprises par les filtres et par les cartes via
 * [data-program-index]. Les deux premieres sont les couleurs de marque ; les
 * suivantes s'en ecartent assez pour rester distinguables sur le fond pale des
 * creneaux. Au-dela de six programmes, la sequence recommence.
 */
.planning--global {
    --planning-program-0: #CE2B2B;
    --planning-program-1: #001948;
    --planning-program-2: #1F7A5A;
    --planning-program-3: #B26A00;
    --planning-program-4: #5B3E96;
    --planning-program-5: #0E7490;
}

.planning--global [data-program-index="0"] { --slot-accent: var(--planning-program-0); }
.planning--global [data-program-index="1"] { --slot-accent: var(--planning-program-1); }
.planning--global [data-program-index="2"] { --slot-accent: var(--planning-program-2); }
.planning--global [data-program-index="3"] { --slot-accent: var(--planning-program-3); }
.planning--global [data-program-index="4"] { --slot-accent: var(--planning-program-4); }
.planning--global [data-program-index="5"] { --slot-accent: var(--planning-program-5); }

/* ------------------------------------------------------------------
 * Masquage
 *
 * planning-global.js pilote le filtrage par l'attribut hidden. Les elements
 * de la grille portent un display explicite, qui l'emporterait sur le
 * display:none par defaut de [hidden] : on le retablit ici.
 * ------------------------------------------------------------------ */

.planning-global__filters[hidden],
.planning--global .planning__cell[hidden],
.planning--global .planning__slot[hidden],
.planning--global .planning__day-header[hidden],
.planning--global .planning__time-header[hidden] {
    display: none;
}

/* ------------------------------------------------------------------
 * Barre de filtres
 * ------------------------------------------------------------------ */

.planning-global__filters {
    margin: 0 auto 2.5rem;
    text-align: center;
}

.planning-global__filters-label {
    margin: 0 0 0.75rem;
    font-family: var(--font-family-heading);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-color);
}

.planning-global__filters-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.planning-global__filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-family-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary);
    background: var(--secondary);
    border: 1px solid var(--accent-color-5);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.planning-global__filter:hover,
.planning-global__filter:focus-visible {
    border-color: var(--slot-accent, var(--accent-color));
    color: var(--slot-accent, var(--accent-color));
}

/*
 * Le bouton actif prend la couleur de son programme : la barre sert ainsi de
 * legende, meme quand aucun filtre n'est applique.
 */
.planning-global__filter.is-active {
    color: var(--secondary);
    background: var(--slot-accent, var(--primary));
    border-color: var(--slot-accent, var(--primary));
}

.planning-global__filter.is-active .planning-global__chip {
    background: var(--secondary);
}

.planning-global__chip {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    background: var(--slot-accent, var(--accent-color));
}

/* ------------------------------------------------------------------
 * Cartes de creneau
 * ------------------------------------------------------------------ */

/* La couleur du programme remplace l'accent unique de planning.css. */
.planning--global .planning__slot {
    border-left-color: var(--slot-accent, var(--accent-color));
}

.planning__slot-program {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.planning__slot-program a {
    font-weight: 600;
    color: var(--slot-accent, var(--accent-color));
    text-decoration: none;
}

.planning__slot-program a:hover,
.planning__slot-program a:focus-visible {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Introduction, annonce et etat vide
 * ------------------------------------------------------------------ */

.planning-global__intro {
    padding-bottom: 0;
}

/* Vide tant qu'aucun filtre n'est actif : la reserve d'espace serait inutile. */
.planning-global__status {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-color);
}

.planning-global__status:empty {
    display: none;
}

.planning-global__empty {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    color: var(--text-color);
}

/* ------------------------------------------------------------------
 * Mobile : la grille passe sur une colonne (planning.css), les filtres
 * s'alignent a gauche pour suivre le reste du contenu.
 * ------------------------------------------------------------------ */

@media (max-width: 991px) {
    .planning-global__filters {
        margin-bottom: 2rem;
        text-align: left;
    }

    .planning-global__filters-list {
        justify-content: flex-start;
    }
}