/************************
BLOC PLANNING GLOBAL (vue façon plaquette imprimée)
*************************/

.bloc-planning-global {
    padding: 3rem 0;
}

.planning-global {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 960px;
    margin: 0 auto;
}

/* ── Bascule Jour / Activité / Lieu ──────────────────────────────────── */
/* Choix 100% front (onglets Bootstrap) — voir render.php. Sans icônes,
   avec un libellé "Trier par :". Empilé et centré sur mobile (pour ne pas
   déborder de l'écran avec 3 boutons + icônes) ; sur une seule ligne
   centrée à partir de 768px. */
.planning-global-switcher-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.75rem;
}

.planning-global-switcher-label {
    font-weight: 700;
    color: var(--color-text);
}

.planning-global-switcher {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.planning-global-switcher .nav-link {
    border-radius: var(--radius-pill, 999px);
    padding: .3rem .6rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: #fff;
    border: 1px solid var(--color-border-light);
}

.planning-global-switcher .nav-link.active {
    color: #fff;
    background: var(--color-accent);
    border-color: var(--color-accent);
}

@media (min-width: 768px) {
    .planning-global-switcher-wrap {
        flex-direction: row;
        justify-content: center;
    }
}

/* ── Groupe (jour / activité / lieu selon le mode d'affichage) ──────── */
.planning-global__groupe {
    display: flex;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg, .75rem);
    overflow: hidden;
    background: #fff;
}

.planning-global__groupe-label {
    flex: 0 0 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem .5rem;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
}

/* Mode "Par activité"/"Par lieu" : intitulés plus longs qu'un simple nom
   de jour — étiquette plus large et alignée à gauche plutôt que centrée. */
.planning-global__groupe-label--large {
    flex: 0 0 220px;
    justify-content: flex-start;
    text-align: left;
}

.planning-global__groupe-label--large a {
    color: #fff;
    text-decoration: none;
}

.planning-global__groupe-label--large a:hover {
    text-decoration: underline;
}

/* Mode "Par lieu" : adresse + bouton "Voir sur la carte" dans l'en-tête
   du groupe (voir js/carte-lieux.js pour la modale/carte Leaflet). */
.planning-global__groupe-adresse {
    display: block;
    font-weight: 400;
    font-size: .85em;
    opacity: .9;
}

.planning-global__groupe-carte-btn {
    display: inline-flex;
    align-items: center;
    margin-top: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.planning-global__groupe-carte-btn:hover {
    opacity: .85;
}

.planning-carte-lieu-conteneur {
    width: 100%;
    height: 420px;
}

/* Au clic/tap sur un marqueur, le navigateur affiche par défaut un anneau
   de focus (et sur mobile un halo de "tap highlight") sur l'élément SVG/
   div sous-jacent — visuellement ça ressemble à un gros carré aux bords
   arrondis multicolore par-dessus le marqueur. On le désactive : les
   marqueurs ne servent qu'à afficher un tooltip au survol, pas de vraie
   navigation clavier à préserver ici. */
.planning-carte-lieu-conteneur .leaflet-interactive,
.planning-carte-lieu-conteneur .leaflet-marker-icon,
.planning-carte-lieu-conteneur .leaflet-div-icon {
    -webkit-tap-highlight-color: transparent;
}

.planning-carte-lieu-conteneur .leaflet-interactive:focus,
.planning-carte-lieu-conteneur .leaflet-marker-icon:focus,
.planning-carte-lieu-conteneur .leaflet-div-icon:focus {
    outline: none;
}

/* Mention/passerelle affichées une seule fois dans l'en-tête du groupe en
   mode "Par activité" (au lieu d'être répétées sur chaque ligne). */
.planning-global__mention--groupe,
.planning-global__passerelle-sante--groupe {
    display: block;
    font-weight: 400;
}

.planning-global__passerelle-sante--groupe {
    margin-top: .15rem;
    color: #fff;
    opacity: .9;
}

.planning-global__creneaux {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ── Ligne (un créneau) ───────────────────────────────────────── */
/* Ordre des colonnes : horaire, activité, lieu, animateurs — l'activité
   passe avant le lieu (plus consultée en premier) et récupère la colonne
   flexible pour respirer davantage. */
.planning-global__ligne {
    display: grid;
    grid-template-columns: 140px 1fr 160px 1fr;
    gap: .5rem 1rem;
    align-items: center;
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    font-size: .92rem;
}

/* Modes "Par activité"/"Par lieu" : une colonne de moins (l'axe de
   regroupement n'est pas répété sur chaque ligne, voir render.php). */
.planning-global__ligne--3col {
    grid-template-columns: 140px 1fr 1fr;
}

.planning-global__creneaux .planning-global__ligne:last-child {
    border-bottom: 0;
}

.planning-global__horaire {
    font-weight: 600;
}

/* Jour du créneau (vues "Par activité" et "Par lieu") — sur sa propre
   ligne au-dessus de l'horaire, pour tenir dans la colonne de 140px. */
.planning-global__jour {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-primary, inherit);
}

/* Précision libre de créneau (ex. "1 semaine sur 2") — sur sa propre
   ligne sous l'horaire, en texte normal (pas en gras comme l'horaire). */
.planning-global__horaire-note {
    display: block;
    font-weight: 400;
    color: var(--color-text-secondary);
    font-size: .85em;
}

.planning-global__lieu {
    color: var(--color-text-secondary);
}

/* Nom de l'activité légèrement plus grand que le reste de la ligne (que
   ce soit un lien ou du texte simple, quand aucune page n'y est reliée). */
.planning-global__activite {
    font-size: 1.05em;
}

.planning-global__activite a {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.planning-global__activite a:hover {
    text-decoration: underline;
}

/* Mention sous le nom de l'activité (ex. "premiers pas") — sur sa propre
   ligne, distincte de la mention de créneau (accolée à l'horaire). */
.planning-global__mention {
    display: block;
    color: var(--color-text-muted);
    font-size: .8rem;
    font-style: italic;
}

.planning-global__passerelle-sante {
    display: inline-block;
    margin-top: .15rem;
    color: var(--color-accent);
    font-size: .78rem;
    font-weight: 600;
}

.planning-global__animateurs {
    color: var(--color-text-secondary);
}

/* "Recrutement en cours" — activité en suspens par manque d'animateur
   (case à cocher par créneau, module Planning). À la place de l'animateur
   si aucun n'est renseigné, ou en dessous (via le <br> dans render.php)
   sinon. */
.planning-global__recrutement {
    color: var(--color-accent);
    font-weight: 600;
}

/* ── Responsive : empile les colonnes sous le label du jour ─────── */
@media (max-width: 767px) {
    .planning-global__groupe {
        flex-direction: column;
    }

    .planning-global__groupe-label {
        flex: none;
        padding: .6rem;
        justify-content: center;
        text-align: center;
    }

    .planning-global__ligne,
    .planning-global__ligne--3col {
        grid-template-columns: 1fr;
        gap: .15rem;
        padding: .75rem 1rem;
    }

    .planning-global__lieu::before {
        content: "\1F4CD\0020";
    }
}

/* Picto "Voir sur la carte" à côté du nom du lieu (vues Activité / Jour). */
.planning-global__lieu-carte-btn {
    display: inline-flex;
    align-items: center;
    margin-left: .35rem;
    padding: 0 .15rem;
    border: 0;
    background: none;
    color: var(--color-primary);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}

.planning-global__lieu-carte-btn:hover,
.planning-global__lieu-carte-btn:focus-visible {
    opacity: .75;
}