/* ============================================================
   Pages locales /ecuries — hub, région, département, ville.
   ============================================================ */

.local-wrap { max-width: 820px; }

/* Compteur d'écuries sous le H1 */
.local-count {
    display: inline-block; margin: 4px 0 0;
    background: var(--green-soft); border-radius: var(--radius-sm);
    padding: 10px 16px; font-size: .94rem; color: var(--ink);
}

/* Contexte équestre local : c'est le texte qui porte la page */
.local-context { font-size: 1.03rem; line-height: 1.72; }
.local-context p { margin: 0 0 16px; }
.local-context sup { font-size: .7em; }

.local-angles { margin: 4px 0 22px; padding: 0; list-style: none; }
.local-angles li {
    position: relative; padding: 8px 0 8px 28px;
    border-bottom: 1px solid var(--line); line-height: 1.55;
}
.local-angles li:last-child { border-bottom: none; }
.local-angles li::before {
    content: "▸"; position: absolute; left: 6px; top: 8px;
    color: var(--gold-dark); font-weight: 700;
}

.local-disc { margin: 0 0 8px; }
.local-disc .chip { margin: 0 4px 6px 0; }

/* Listes de liens (villes, départements) */
.local-links { display: flex; flex-wrap: wrap; gap: 8px; }
.local-links .chip { text-decoration: none; }

/* Hub national : une section par région */
.local-region { padding: 22px 0; border-bottom: 1px solid var(--line); }
.local-region:last-child { border-bottom: none; }
.local-region h2 { margin: 0 0 6px; font-size: 1.35rem; }
.local-region h2 a { color: inherit; text-decoration: none; }
.local-region h2 a:hover { color: var(--green); }
.local-region p { max-width: 74ch; margin: 0 0 14px; font-size: .95rem; }

/* Grille de villes */
.local-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.local-city {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 18px 20px; text-decoration: none; color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.local-city:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cfd6e2; color: inherit; }
.local-city-dep { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--gold-dark); }
.local-city strong { font-family: var(--font-display); font-size: 1.1rem; }
.local-city-line { color: var(--muted); font-size: .89rem; line-height: 1.5; }

@media (max-width: 640px) {
    .local-context { font-size: 1rem; }
    .local-count { display: block; }
}