/* Cartes de France commune par commune (hub /risques, /carte, /catastrophes-naturelles).
   Gabarit : templates/components/carte_france_communes.html ; script : static/js/cs-cartes-france.js.
   Jetons --cs-* seulement. Mobile d'abord : carte pleine largeur, panneau dessous ;
   au-delà de 900 px, carte et panneau côte à côte. Chiffres en tabular-nums. */

.cs-cf { display: grid; gap: var(--cs-space-4); margin: var(--cs-space-4) 0 var(--cs-space-6); }
@media (min-width: 900px) { .cs-cf { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.cs-cf__map { position: relative; aspect-ratio: 600 / 560; background: var(--cs-bg-subtle); border: 1px solid var(--cs-line); border-radius: var(--cs-radius-lg); overflow: hidden; }
.cs-cf__map canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.cs-cf__vide { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--cs-space-5); text-align: center; font-size: var(--cs-text-small); color: var(--cs-mute); }
.cs-cf__tip { position: absolute; z-index: 3; pointer-events: none; max-width: 240px; padding: 7px 10px; border-radius: 8px; background: var(--cs-ink-deep); color: var(--cs-bg-elevated); font-size: 12.5px; line-height: 1.35; box-shadow: var(--cs-shadow-mid); }
.cs-cf__tip b { display: block; font-weight: 700; }
.cs-cf__tip span { display: block; color: var(--cs-dark-text); font-variant-numeric: tabular-nums; }
.cs-cf__panel { display: grid; gap: var(--cs-space-3); align-content: start; min-width: 0; }

/* Choix de la couche (puces) */
.cs-cf__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-cf__chip { border: 1px solid var(--cs-line-strong); background: var(--cs-bg-elevated); color: var(--cs-ink-deep); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.cs-cf__chip:hover { border-color: var(--cs-ink-deep); }
.cs-cf__chip:focus-visible, .cs-cf__btn:focus-visible { outline: 2px solid var(--cs-teal); outline-offset: 2px; }
.cs-cf__chip[aria-pressed="true"] { background: var(--cs-ink-deep); color: var(--cs-bg-elevated); border-color: var(--cs-ink-deep); }
.cs-cf__chip i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cs-cf__chip[aria-pressed="false"].cs-cf__chip--type { opacity: .5; }
.cs-cf__chip[aria-pressed="false"].cs-cf__chip--type i { opacity: .4; }
.cs-cf__chips:not(.is-js) .cs-cf__chip { cursor: default; }

/* Titre de couche + légende */
.cs-cf__titre { margin: 0; font-family: var(--cs-font-display); font-size: 1.05rem; font-weight: 700; color: var(--cs-ink-deep); }
.cs-cf__phrase { margin: 0; font-size: var(--cs-text-small); color: var(--cs-mute); line-height: 1.45; }
.cs-cf__leg { display: grid; gap: 4px; }
.cs-cf__leg-cases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cs-cf__leg-cases > div { display: grid; gap: 2px; text-align: center; }
.cs-cf__leg-cases b { display: block; border-radius: 4px; padding: 3px 0; font-size: 12px; font-weight: 800; }
.cs-cf__leg-cases small { font-size: 10.5px; line-height: 1.2; color: var(--cs-mute); font-variant-numeric: tabular-nums; }
.cs-cf__leg-a b { background: var(--cs-etiq-a); color: var(--cs-etiq-a-ink); }
.cs-cf__leg-b b { background: var(--cs-etiq-b); color: var(--cs-etiq-b-ink); }
.cs-cf__leg-c b { background: var(--cs-etiq-c); color: var(--cs-etiq-c-ink); }
.cs-cf__leg-d b { background: var(--cs-etiq-d); color: var(--cs-etiq-d-ink); }
.cs-cf__leg-e b { background: var(--cs-etiq-e); color: var(--cs-etiq-e-ink); }
.cs-cf__leg-f b { background: var(--cs-etiq-f); color: var(--cs-etiq-f-ink); }
.cs-cf__leg-g b { background: var(--cs-etiq-g); color: var(--cs-etiq-g-ink); }
.cs-cf__leg-bouts { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--cs-mute); }
.cs-cf__leg-grad { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--cs-mute); font-variant-numeric: tabular-nums; }
.cs-cf__leg-grad div { flex: 1; height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--cs-water-0), var(--cs-water-2) 25%, var(--cs-water-3) 50%, var(--cs-water-4) 75%, var(--cs-water-5)); }
.cs-cf__leg-titre { font-size: 11.5px; color: var(--cs-mute); }

/* Curseur du temps */
.cs-cf__temps { display: grid; gap: 6px; padding: var(--cs-space-3); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: var(--cs-bg-elevated); }
.cs-cf__temps.is-inactif { opacity: .55; }
.cs-cf__temps-l { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--cs-ink-deep); }
.cs-cf__temps input[type="range"] { width: 100%; accent-color: var(--cs-ink-deep); min-height: 28px; }
.cs-cf__stops { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 12px; color: var(--cs-mute); font-variant-numeric: tabular-nums; }
.cs-cf__stops button { background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; cursor: pointer; text-align: center; }
.cs-cf__stops button:first-child { text-align: left; }
.cs-cf__stops button:last-child { text-align: right; }
.cs-cf__stops .is-on { color: var(--cs-ink-deep); font-weight: 800; }
.cs-cf__inactif { font-size: 11.5px; color: var(--cs-mute); margin: 0; }
.cs-cf__temps:not(.is-inactif) .cs-cf__inactif { display: none; }
.cs-cf__btn { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; background: var(--cs-ink-deep); color: var(--cs-bg-elevated); font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; cursor: pointer; min-height: 38px; }
.cs-cf__btn svg { width: 12px; height: 12px; fill: currentColor; }
.cs-cf__btn[aria-pressed="true"] { background: var(--cs-accent-deep); }
.cs-cf__btn:disabled { opacity: .5; cursor: default; }

/* Recherche */
.cs-cf__srch { position: relative; }
.cs-cf__srch label { display: block; font-size: 12.5px; font-weight: 600; color: var(--cs-ink-deep); margin-bottom: 4px; }
.cs-cf__srch input { width: 100%; box-sizing: border-box; border: 1px solid var(--cs-line-strong); border-radius: var(--cs-radius); padding: 10px 12px; font: inherit; font-size: 16px; background: var(--cs-bg-elevated); color: var(--cs-ink-deep); }
.cs-cf__srch input:focus { outline: 2px solid var(--cs-teal); outline-offset: 1px; }
.cs-cf__sugg { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--cs-bg-elevated); border: 1px solid var(--cs-line-strong); border-radius: var(--cs-radius); box-shadow: var(--cs-shadow-mid); overflow: hidden; }
.cs-cf__opt { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--cs-ink-deep); cursor: pointer; }
.cs-cf__opt span { color: var(--cs-mute); }
.cs-cf__opt:hover, .cs-cf__opt.is-actif { background: var(--cs-bg-subtle); }
.cs-cf__aucune { padding: 10px 12px; font-size: 13px; color: var(--cs-mute); }
.cs-cf-sansjs { font-size: var(--cs-text-small); color: var(--cs-mute); margin: 0; }
.cs-cf-js .cs-cf-sansjs { display: none; }

/* Panneau d'une commune */
.cs-cf__fiche { border: 1px solid var(--cs-line); border-radius: var(--cs-radius); background: var(--cs-bg-elevated); padding: var(--cs-space-3) var(--cs-space-4); display: grid; gap: var(--cs-space-2); }
.cs-cf__p-nom { margin: 0; font-family: var(--cs-font-display); font-weight: 800; font-size: 1.1rem; color: var(--cs-ink-deep); }
.cs-cf__p-nom span { font-weight: 500; color: var(--cs-mute); font-size: .9rem; }
.cs-cf__p-ligne { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--cs-ink); line-height: 1.4; font-variant-numeric: tabular-nums; }
.cs-cf__p-hz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cs-cf__p-hz > div { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; background: var(--cs-bg-subtle); font-variant-numeric: tabular-nums; }
.cs-cf__p-hz > div.is-on { outline: 2px solid var(--cs-ink-deep); }
.cs-cf__p-hz span { font-size: 11px; color: var(--cs-mute); }
.cs-cf__p-hz b { font-size: 15px; color: var(--cs-ink-deep); }
.cs-cf__p-hz .cs-viz-lettre { transform: scale(.85); }
.cs-cf__p-liens { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.cs-cf__p-liens a { color: var(--cs-teal-deep); font-weight: 600; }
.cs-cf__form { display: grid; gap: 6px; }
.cs-cf__form-l { display: flex; gap: 6px; }
.cs-cf__form input[type="text"] { flex: 1; min-width: 0; border: 1px solid var(--cs-line-strong); border-radius: var(--cs-radius); padding: 10px 12px; font: inherit; font-size: 16px; }
.cs-cf__form small { font-size: 12px; color: var(--cs-mute); }

/* Animation des catastrophes */
.cs-cf__an { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cs-cf__an-n { font-family: var(--cs-font-display); font-size: 48px; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--cs-ink-deep); font-variant-numeric: tabular-nums; }
.cs-cf__an-c { font-size: 14px; color: var(--cs-ink); }
.cs-cf__an-c b { font-size: 21px; color: var(--cs-ink-deep); font-variant-numeric: tabular-nums; }
.cs-cf__legende { margin: 0; min-height: 3em; font-size: 13.5px; line-height: 1.45; color: var(--cs-ink); }
.cs-cf__tb { display: grid; gap: 5px; }
.cs-cf__tb > div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 3.6rem; gap: 8px; align-items: center; font-size: 12.5px; }
.cs-cf__tb > div.is-off { opacity: .35; }
.cs-cf__tb b { text-align: right; font-variant-numeric: tabular-nums; }
.cs-cf__tb-t { height: 9px; border-radius: 5px; background: var(--cs-bg-subtle); overflow: hidden; }
.cs-cf__tb-t i { display: block; height: 100%; border-radius: 5px; transition: width .3s; }
@media (prefers-reduced-motion: reduce) { .cs-cf__tb-t i { transition: none; } }
.cs-cf__frise { display: flex; flex-wrap: wrap; gap: 5px; }
.cs-cf__frise span { font-size: 12px; font-weight: 700; color: var(--cs-bg-elevated); border-radius: 10px; padding: 2px 8px; font-variant-numeric: tabular-nums; }

/* Barres par année */
.cs-cf-barres { border: 1px solid var(--cs-line); border-radius: var(--cs-radius-lg); background: var(--cs-bg-elevated); padding: var(--cs-space-3) var(--cs-space-4); margin: 0 0 var(--cs-space-6); }
.cs-cf-barres__h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cs-cf-barres__h b { color: var(--cs-ink-deep); }
.cs-cf-barres__h span { color: var(--cs-mute); }
.cs-cf-barres svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.cs-cf-barres .b { opacity: .55; }
.cs-cf-barres .b.is-on { opacity: 1; }
.cs-cf-barres .z { fill: transparent; cursor: pointer; }
.cs-cf-barres .z:hover { fill: var(--cs-bg-subtle); fill-opacity: .6; }
.cs-cf-barres .cadre { fill: none; stroke: var(--cs-ink-deep); stroke-width: 1.5; }
.cs-cf-barres .ax { font-size: 11px; fill: var(--cs-mute); font-family: var(--cs-font-body); }

/* Répartition des lettres (lisible sans JavaScript) */
.cs-cf-rep { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 4px 0; }
.cs-cf-rep i { display: block; height: 100%; }
.cs-cf-rep .a { background: var(--cs-etiq-a); } .cs-cf-rep .b { background: var(--cs-etiq-b); }
.cs-cf-rep .c { background: var(--cs-etiq-c); } .cs-cf-rep .d { background: var(--cs-etiq-d); }
.cs-cf-rep .e { background: var(--cs-etiq-e); } .cs-cf-rep .f { background: var(--cs-etiq-f); }
.cs-cf-rep .g { background: var(--cs-etiq-g); }

/* Tableaux */
.cs-cf-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--cs-space-2) 0 var(--cs-space-5); }
.cs-cf-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--cs-mute); border-bottom: 1px solid var(--cs-line-strong); padding: 6px 8px; }
.cs-cf-table td { border-bottom: 1px solid var(--cs-line); padding: 8px; vertical-align: top; line-height: 1.45; }
.cs-cf-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; color: var(--cs-ink-deep); }
@media (max-width: 560px) { .cs-cf-table .cs-cf-hm { display: none; } }
.cs-cf__fiche[hidden], .cs-cf__sugg[hidden], .cs-cf__tip[hidden], [data-cs-cf-leg][hidden] { display: none; }