/* Carte économique interactive 2026 (core/templates/core/carte_eco/carte.html) — jetons du socle (frontend/socle/jetons.css). */
.ce-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3, 16px); align-items: start; }
@media (min-width: 1024px) { .ce-grille { grid-template-columns: 300px minmax(0, 1fr); } }
.ce-choix { display: grid; gap: var(--s-2, 12px); min-width: 0; }
@media (min-width: 640px) and (max-width: 1023.98px) { .ce-choix { grid-template-columns: 1fr 1fr; } }
.ce-groupe { margin: 0; padding: var(--s-2, 12px); border: 1px solid var(--c-border); border-radius: var(--r-md, 8px); background: var(--c-bg, #fff); min-width: 0; }
.ce-groupe legend { padding: 0 6px; margin: 0; font-size: 1rem; }
.ce-option { display: flex; align-items: center; gap: 8px; min-height: var(--tap, 44px); font: var(--t-compact); color: var(--c-text-body); cursor: pointer; overflow-wrap: anywhere; }
.ce-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--c-brand); }
.ce-option input:focus-visible { outline: 2px solid var(--ui-focus, #006AB5); outline-offset: 2px; }
.ce-pastille { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .35); }
.ce-pastille--zone { border-radius: 2px; }
.ce-nb { color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.ce-carte { min-width: 0; }
.ce-carte .ce-carte__cadre { height: 520px; }
@media (max-width: 639.98px) { .ce-carte .ce-carte__cadre { height: 380px; } }
.ce-legendes { margin-top: var(--s-2, 12px); min-width: 0; }
.ce-legende__titre { margin: 0; font: var(--t-compact); font-weight: 600; color: var(--c-text); }
.ce-legendes .ui-source { overflow-wrap: anywhere; }
.ce-tableau { margin-top: var(--s-2, 12px); }
.ce-tableau .ui-table__cadre { max-height: 480px; overflow: auto; }
.ce-tableau caption { text-align: left; font-weight: 600; padding: 8px 0; }

/* #256 : page « Carte économique » — filtres en bandeau au-dessus, carte pleine largeur, image fixe d'aperçu avant Leaflet */
.ce-choix--bandeau { margin-bottom: var(--s-3, 16px); }
@media (min-width: 1024px) {
    .ce-choix--bandeau { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .ce-choix--bandeau .ce-groupe:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-3, 16px); align-content: start; }
    .ce-choix--bandeau .ce-groupe:last-child legend { grid-column: 1 / -1; }
}
.ce-carte--pleine { margin: 0; }
.ce-carte--pleine .ce-carte__cadre { height: clamp(420px, 72vh, 760px); }
@media (max-width: 639.98px) { .ce-carte--pleine .ce-carte__cadre { height: 440px; } }
.ce-attente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 12px; background: var(--c-bg-2); }
.ce-attente p { margin: 0; font: var(--t-compact); color: var(--c-text-2); }
.ce-attente svg { width: 100%; height: auto; max-height: calc(100% - 32px); }

/* Aperçu dans « Chiffres clés » : l'image fixe, en lien vers la page de la carte */
.ce-apercu__lien { display: grid; gap: var(--s-2, 12px); justify-items: start; text-decoration: none; color: inherit; }
.ce-apercu__cadre { display: block; width: 100%; aspect-ratio: 918 / 500; padding: 8px; box-sizing: border-box; border: 1px solid var(--c-border); border-radius: var(--r-md, 8px); background: var(--c-bg-2); }
.ce-apercu__svg { display: block; width: 100%; height: 100%; }
.ce-apercu__lien:hover .ce-apercu__cadre { border-color: var(--c-brand); }
.ce-apercu__lien:focus-visible { outline: 2px solid var(--ui-focus, #006AB5); outline-offset: 4px; border-radius: var(--r-md, 8px); }
.ce-apercu__legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: var(--s-2, 12px) 0 0; padding: 0; list-style: none; font: var(--t-compact); color: var(--c-text-body); }
.ce-apercu__legende li { display: flex; align-items: center; gap: 8px; }