/* « Où vivre en 2050 ? » (/ou-vivre/2050 et ses profils). Jetons de la charte uniquement. */

.v50-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#outil { padding-top: var(--cs-space-6); }
.v50 { display: flex; flex-direction: column; gap: var(--cs-space-3); }
.v50-mute { color: var(--cs-mute); }

/* Idées de départ et bascules */
.v50-idees { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: var(--cs-text-micro); color: var(--cs-mute); }
.v50-chip { display: inline-flex; align-items: center; min-height: 34px; border: 1px solid var(--cs-line); background: var(--cs-bg-elevated); border-radius: var(--cs-radius-pill); padding: .35rem .8rem; font: inherit; font-size: var(--cs-text-small); font-weight: 700; color: var(--cs-ink-deep); text-decoration: none; cursor: pointer; line-height: 1.25; text-align: left; }
.v50-chip:hover { border-color: var(--cs-line-deep); }
.v50-chip:focus-visible, .v50-seg button:focus-visible, .v50-lettres button:focus-visible { outline: none; box-shadow: var(--cs-shadow-glow); }
.v50-chip.is-on, .v50-chip[aria-pressed="true"] { background: var(--cs-teal-deep); border-color: var(--cs-teal-deep); color: var(--cs-bg-elevated); }
.v50-chip--ghost { background: transparent; color: var(--cs-mute); }
.v50-chip:disabled { opacity: .5; cursor: default; }

/* Scène : carte + panneau */
.v50-scene { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--cs-space-5); align-items: start; }
.v50-carte { position: relative; border: 1px solid var(--cs-line); border-radius: var(--cs-radius-lg); background: var(--cs-bg-elevated); padding: var(--cs-space-3); }
.v50-toile { position: relative; aspect-ratio: 600 / 560; }
.v50-toile canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: manipulation; }
.v50-attente { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--cs-space-6); color: var(--cs-mute); font-size: var(--cs-text-small); background: var(--cs-bg-subtle); border-radius: var(--cs-radius); }
.v50-attente[hidden] { display: none; }
.v50-bulle { position: absolute; pointer-events: none; background: var(--cs-ink-deep); color: var(--cs-bg-elevated); font-size: var(--cs-text-micro); border-radius: var(--cs-radius-sm); padding: .35rem .55rem; white-space: normal; max-width: min(300px, 100%); width: max-content; transform: translate(-50%, -125%); z-index: 5; line-height: 1.35; font-variant-numeric: tabular-nums; }
.v50-bulle[hidden] { display: none; }
.v50-bulle small { color: inherit; opacity: .85; }
.v50-leg { display: flex; flex-wrap: wrap; gap: var(--cs-space-3); font-size: var(--cs-text-micro); color: var(--cs-mute); margin-top: var(--cs-space-2); }
.v50-leg span { display: inline-flex; align-items: center; gap: .35rem; }
.v50-leg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.v50-leg__oui { background: var(--cs-teal); }
.v50-leg__non { background: var(--cs-line-strong); }

.v50-panneau { display: flex; flex-direction: column; gap: var(--cs-space-3); min-width: 0; }
.v50-compte { display: flex; align-items: baseline; gap: .6rem; margin: 0; }
.v50-compte b { font-family: var(--cs-font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; color: var(--cs-teal-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.v50-compte span { font-size: var(--cs-text-small); color: var(--cs-ink); line-height: 1.35; font-variant-numeric: tabular-nums; }

.v50-filtres { border: 1px solid var(--cs-line); border-radius: var(--cs-radius-lg); background: var(--cs-bg-elevated); padding: var(--cs-space-4); display: flex; flex-direction: column; gap: var(--cs-space-3); }
.v50-curseur label { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--cs-text-small); font-weight: 700; color: var(--cs-ink-deep); }
.v50-curseur output { color: var(--cs-teal-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.v50-curseur input { width: 100%; accent-color: var(--cs-teal-deep); margin: .45rem 0 0; min-height: 24px; }
.v50-curseur small { display: block; font-size: var(--cs-text-micro); color: var(--cs-mute); line-height: 1.4; }
.v50-groupe { display: flex; flex-direction: column; gap: .35rem; }
.v50-sous { font-size: var(--cs-text-micro); font-weight: 700; color: var(--cs-mute); letter-spacing: var(--cs-tracking-eyebrow); text-transform: uppercase; margin: 0; }
.v50-sous b { color: var(--cs-ink-deep); }
.v50-bascules { display: flex; flex-wrap: wrap; gap: .4rem; }
.v50-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--cs-radius); background: var(--cs-bg-subtle); align-self: flex-start; max-width: 100%; }
.v50-seg button { border: 0; background: transparent; border-radius: var(--cs-radius-sm); padding: .45rem .7rem; font: inherit; font-size: var(--cs-text-small); font-weight: 700; color: var(--cs-mute); cursor: pointer; min-height: 34px; }
.v50-seg button[aria-pressed="true"] { background: var(--cs-bg-elevated); color: var(--cs-ink-deep); box-shadow: var(--cs-shadow-low); }
.v50-lettres { display: flex; gap: 4px; flex-wrap: wrap; }
.v50-lettres .cs-class-letter { width: 34px; height: 34px; font-size: 1rem; border: 0; cursor: pointer; padding: 0; transition: opacity var(--cs-duration-fast) var(--cs-ease-default); }
.v50-lettres .cs-class-letter.is-off { opacity: .22; }
.v50-lettres .cs-class-letter[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--cs-bg-elevated), 0 0 0 4px var(--cs-ink-deep); }

/* Liste des plus peuplées */
.v50-liste ol { list-style: none; margin: .3rem 0 0; padding: 0; }
.v50-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .6rem; align-items: center; padding: .55rem .35rem; border-bottom: 1px solid var(--cs-line); font-size: var(--cs-text-small); border-radius: var(--cs-radius-sm); }
.v50-liste li.is-hl { background: var(--cs-bg-subtle); }
.v50-liste small { color: var(--cs-mute); }
.v50-liste__nom { min-width: 0; overflow-wrap: anywhere; }
.v50-liste__val { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v50-liste__vide { padding: var(--cs-space-3) 0; color: var(--cs-mute); font-size: var(--cs-text-small); }
.v50-l { width: 26px; height: 26px; font-size: .85rem; border-radius: var(--cs-radius-sm); }
.v50-l--x { display: inline-flex; align-items: center; justify-content: center; color: var(--cs-mute); background: var(--cs-bg-subtle); }

/* Chiffres clés, idées, tableaux, suite */
.v50-cles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cs-space-3); margin-top: var(--cs-space-8); }
.v50-cles .cs-card, .v50-idee { padding: var(--cs-space-4); display: flex; flex-direction: column; gap: .35rem; }
.v50-cles .cs-stat__value, .v50-idee .cs-stat__value { font-size: var(--cs-text-data-m); font-variant-numeric: tabular-nums; }
.v50-cles .cs-stat__hint, .v50-idee .cs-stat__hint { line-height: var(--cs-leading-normal); }
.v50-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-space-3); }
.v50-idee { text-decoration: none; color: var(--cs-ink); }
.v50-idee__t { font-weight: 800; color: var(--cs-teal-deep); }
.v50-tab th { position: relative; }  /* le libellé masqué de la colonne reste dans le tableau défilant */
.v50-tab td.num, .v50-tab th.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.v50-tab .v50-l { width: 24px; height: 24px; }
.v50-lien { color: var(--cs-teal-deep) !important; white-space: nowrap; }
.v50-h3 { font-family: var(--cs-font-display); font-size: var(--cs-text-h3); margin: var(--cs-space-6) 0 var(--cs-space-3); }
.v50-suite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-space-3); }
.v50-suite__bloc { padding: var(--cs-space-5); display: flex; flex-direction: column; gap: var(--cs-space-3); }
.v50-suite__bloc p { margin: 0; line-height: var(--cs-leading-normal); }
.v50-suite__bloc a { color: var(--cs-teal-deep); font-weight: 600; }
.v50-adresse { display: flex; flex-wrap: wrap; gap: .5rem; }
.v50-adresse input[type="text"], .v50-adresse input[type="email"] { flex: 1 1 200px; min-width: 0; border: 1.5px solid var(--cs-line-deep); border-radius: var(--cs-radius); padding: .7rem .8rem; font: inherit; background: var(--cs-bg-elevated); color: var(--cs-ink-deep); }
.v50-adresse input:focus-visible { outline: none; box-shadow: var(--cs-shadow-glow); border-color: var(--cs-teal); }
.v50-consent { flex: 1 1 100%; display: flex; gap: .45rem; align-items: flex-start; font-size: var(--cs-text-micro); color: var(--cs-mute); line-height: 1.4; }

@media (max-width: 900px) {
    .v50-scene { grid-template-columns: 1fr; }
    .v50-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v50-cartes, .v50-suite { grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .v50-carte { position: sticky; top: 88px; } }
@media (max-width: 480px) {
    .v50-liste li { gap: .45rem; padding: .5rem .15rem; }
    .v50-liste li .cs-btn { padding: .5rem .6rem; }
    .v50-cles { gap: var(--cs-space-2); }
    .v50-cles .cs-card { padding: var(--cs-space-3); }
    .v50-compte b { font-size: 2.1rem; }
    .v50-adresse .cs-btn { flex: 1 1 100%; }
}
@media (max-width: 370px) {
    .v50-lettres { gap: 3px; }
    .v50-lettres .cs-class-letter { width: 30px; height: 30px; }
    .v50-liste li { grid-template-columns: minmax(0, 1fr) auto auto; }
    .v50-liste li .cs-btn { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .v50-lettres .cs-class-letter { transition: none; } }