/*
 * Gazo, pages « province » : annuaire des stations-service et des bornes de recharge par localité
 * (chargé par ces pages seulement, après site.css). Mêmes jetons que site.css.
 */

.dir-pager { margin: 0 0 28px; }
.dir-pager ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dir-pager a, .dir-pager [aria-current] {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
    background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-weight: 700; text-decoration: none;
}
.dir-pager a:hover { box-shadow: inset 0 0 0 2px var(--petrol); color: var(--petrol); }
.dir-pager [aria-current] { background: var(--petrol-deep); box-shadow: none; color: #fff; }
.dir-pager [aria-current] small { opacity: 1; }
.dir-pager small { font-weight: 600; opacity: .75; }

.dir-groups { columns: 1; column-gap: 36px; }
@media (min-width: 760px) { .dir-groups { columns: 2; } }
@media (min-width: 1100px) { .dir-groups { columns: 3; } }
.dir-group { break-inside: avoid; margin: 0 0 24px; }
.dir-group h3 { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.dir-group h3::after { content: ""; flex: 1; height: 1.5px; background: var(--line); }
.dir-group h3 small { font-weight: 700; letter-spacing: 0; }
.dir-list { list-style: none; padding: 0; margin: 0; }
.dir-list li + li { border-top: 1px solid var(--line); }
.dir-list a { display: flex; flex-direction: column; padding: 8px 0; min-height: 44px; justify-content: center; color: var(--ink); text-decoration: none; }
.dir-list a:hover strong { color: var(--petrol); text-decoration: underline; }
.dir-list strong { font-weight: 700; }
.dir-list span { font-size: .86rem; color: var(--muted); }
.dir-list .dir-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--green-soft); color: var(--ink); font-size: .7rem; font-weight: 800; vertical-align: middle; }

.dir-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.dir-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 18px; }
.dir-how { margin-top: clamp(36px, 5vw, 56px); }