/*
 * Navigation des pages commune : rubriques clés sur mobile, états vides orientants.
 * Fichier distinct de collectivities.css (pas de CSS_VERSION à monter à son ajout).
 */

/* Rubriques clés (mobile) : Événements, À voir & à faire, Vidéos & Photos, visibles sans faire défiler la barre. */
.commune-key-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid #f1f1f1;
}

.commune-key-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 8px 4px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    color: var(--text-dark, #1f2937);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.commune-key-link i {
    color: var(--primary-color, #b91c1c);
    font-size: 1.1rem;
}

.commune-key-link:hover,
.commune-key-link:focus-visible,
.commune-key-link.is-current {
    background: #fff5f5;
    border-color: var(--primary-color, #b91c1c);
    color: var(--primary-color, #b91c1c);
}

@media (max-width: 991.98px) {
    /* La barre défilante ne répète pas les rubriques clés, et ses intertitres n'y sont pas des liens. */
    .collectivity-sidebar-menu .nav .commune-nav-key,
    .collectivity-sidebar-menu .nav .sidebar-divider {
        display: none !important;
    }

    /* En arabe, les liens hors champ sont à gauche : le fondu suit le sens de lecture. */
    [dir="rtl"] .collectivity-sidebar-menu .nav {
        -webkit-mask-image: linear-gradient(to left, black calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to left, black calc(100% - 28px), transparent 100%);
    }

    [dir="rtl"] .collectivity-sidebar-menu .nav-link {
        border-right: none;
        border-left: 1px solid #f1f1f1;
    }
}

/* « Poursuivre la visite » et contenus venus d'une commune voisine. */
.commune-continue {
    margin: 1.5rem 0;
}

.commune-continue__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.commune-origin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
}

.commune-origin a {
    font-weight: 600;
}

.commune-spots-empty .spot-related-card small {
    display: block;
}