/* === Listing — uses .fv5 container from fiche-base.css for breadcrumb/layout === */
.fv5 .listing { width: 100%; }
@media (min-width:481px)  { .fv5 .listing { width: 420px; } }
@media (min-width:769px)  { .fv5 .listing { width: 700px; } }
@media (min-width:961px)  { .fv5 .listing { width: 900px; } }
@media (min-width:1200px) { .fv5 .listing { width: 1136px; } }
.fv5 .listing h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1rem; }
.fv5 .listing h2 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ex-green-700); margin: 1.5rem 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--ex-stone-100); }
.fv5 .listing h3 { font-size: 0.78rem; font-weight: 600; color: var(--ex-stone-600); margin: 1.25rem 0 0.5rem; }
.fv5 .listing h3 > a { color: var(--ex-link); text-decoration: none; }
.fv5 .listing h3 > a:hover { color: var(--ex-link-hover); }
.fv5 .listing p { font-size: 0.88rem; color: var(--ex-stone-600); line-height: 1.6; }

/* === Filter === */
.listing input[type="text"] { width: 100%; padding: 0.6rem 0.85rem; border: 1px solid var(--ex-stone-200); border-radius: 8px; font-size: 0.9rem; font-family: var(--ex-font); color: var(--ex-stone-800); background: var(--ex-surface); transition: border-color 0.15s; margin-bottom: 1.25rem; }
.listing input[type="text"]:focus { outline: none; border-color: var(--ex-green-400); box-shadow: 0 0 0 3px rgba(255,187,9,0.12); }
.listing input[type="text"]::placeholder { color: var(--ex-stone-400); }
.filter-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; position: relative; flex-wrap: wrap; }
.filter-bar input[type="text"] { flex: 1; min-width: 200px; margin-bottom: 0; }
.toggle-active { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.82rem; font-weight: 500; color: var(--ex-stone-600); white-space: nowrap; user-select: none; }
.toggle-active input { display: none; }
.toggle-slider { width: 32px; height: 18px; background: var(--ex-stone-300); border-radius: 9px; position: relative; transition: background 0.2s; flex-shrink: 0; }
.toggle-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.toggle-active input:checked + .toggle-slider { background: var(--ex-green-700); }
.toggle-active input:checked + .toggle-slider::after { transform: translateX(14px); }

/* === Grid lists — tile style === */
.listing ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
@media (min-width:481px)  { .listing ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width:961px)  { .listing ul { grid-template-columns: repeat(3, 1fr); } }
.listing ul > li { display: flex; }
.listing ul > li > a { display: block; width: 100%; padding: 0.9rem 1rem; border-radius: 8px; font-size: 0.92rem; font-weight: 500; color: var(--ex-stone-800); text-decoration: none; text-align: center; background: var(--ex-surface); border: 1px solid var(--ex-stone-200); transition: all 0.15s var(--ex-ease); box-shadow: var(--ex-shadow-sm); }
.listing ul > li > a:hover { background: var(--ex-green-50); border-color: var(--ex-green-300); color: var(--ex-green-900); transform: translateY(-1px); box-shadow: var(--ex-shadow-md); }
.listing ul > li > a::first-letter { text-transform: capitalize; }
.cat-count { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ex-stone-500); font-family: var(--ex-mono); margin-top: 0.15rem; }

/* === Grouped sections (EPCI > communes) === */
.listing > div > section { margin-bottom: 0.75rem; border: 1px solid var(--ex-stone-200); border-radius: 10px; padding: 1rem 1.25rem; background: var(--ex-surface); box-shadow: var(--ex-shadow-sm); }
.listing > div > section > h3 { margin: 0 0 0.6rem; }
.listing > div > section ul > li > a { border-color: var(--ex-stone-100); background: var(--ex-stone-50); box-shadow: none; }
.listing > div > section ul > li > a:hover { background: var(--ex-green-50); border-color: var(--ex-green-300); box-shadow: none; }
.note-multi-dept { font-size: 0.78rem; color: var(--ex-stone-500); margin: 0.6rem 0 0; padding-top: 0.5rem; border-top: 1px dashed var(--ex-stone-200); }
.note-multi-dept a { color: var(--ex-link); text-decoration: none; font-weight: 500; }
.note-multi-dept a:hover { color: var(--ex-link-hover); }

/* === Association list items === */
.listing-asso ul { display: block; width: 100%; }
.listing-asso ul > li { display: block; }
.listing-asso ul > li > a { display: block; padding: 0.75rem 1rem; border: 1px solid var(--ex-stone-200); border-radius: 8px; margin-bottom: 0.5rem; background: var(--ex-surface); box-shadow: var(--ex-shadow-sm); transition: border-color 0.15s; font-size: 0.95rem; font-weight: 600; color: var(--ex-stone-800); text-decoration: none; text-align: left; }
.listing-asso ul > li > a::first-letter { text-transform: capitalize; }
.listing-asso ul > li > a:hover { border-color: var(--ex-green-300); color: var(--ex-link); }
.listing-asso ul > li > a > .asso-date { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ex-stone-500); font-family: var(--ex-mono); margin-top: 0.2rem; }
.listing-asso ul > li > a > .dissolved { color: var(--ex-red); }
.listing-asso ul > li > a > .asso-desc { display: block; font-size: 0.82rem; font-weight: 400; color: var(--ex-stone-600); margin-top: 0.35rem; line-height: 1.5; }
.listing-asso.hide-desc ul > li > a > .asso-desc { display: none; }
.listing-asso.hide-desc ul > li.match-desc > a > .asso-desc { display: block; }
.listing-asso mark { background: var(--ex-green-100); color: inherit; border-radius: 2px; padding: 0 1px; }
.listing-asso h2 { cursor: default; }

/* === View switch (geo ↔ catégories) === */
.view-switch { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; font-size: 0.88rem; }
.view-switch-label { color: var(--ex-stone-500); font-weight: 500; white-space: nowrap; }
.view-switch-pills { display: inline-flex; border: 1px solid var(--ex-stone-200); border-radius: 8px; overflow: hidden; padding-left: 0; }
.view-switch-pills > a { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; text-decoration: none; font-weight: 500; color: var(--ex-stone-600); background: var(--ex-surface); transition: all 0.15s var(--ex-ease); white-space: nowrap; }
.view-switch-pills > a:first-child { border-right: 1px solid var(--ex-stone-200); }
.view-switch-pills > a:hover:not(.active) { background: var(--ex-stone-50); color: var(--ex-stone-800); }
.view-switch-pills > a.active { background: var(--ex-green-700); color: #fff; pointer-events: none; }
.view-switch-pills > a > svg { width: 14px; height: 14px; flex-shrink: 0; }