/* scenes.css — les mises en scène dessinées par scenes.js */

.scene__visuel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
.scene__visuel .axe text { font: 400 13px var(--f); font-variation-settings: "wdth" var(--etroit); fill: var(--texte-3); }
.scene__visuel .axe line { stroke: var(--trame); }
.scene__visuel .note { font: 600 14px var(--f); font-variation-settings: "wdth" var(--etroit); fill: var(--texte); }
.scene__visuel .note--c { fill: var(--c); }
.scene__visuel .souligne { stroke: var(--texte); stroke-width: 1; stroke-dasharray: 3 4; }
.scene__visuel .reference { stroke: var(--texte-2); stroke-dasharray: 6 6; }
.scene__visuel .zero { stroke: var(--texte-3); }
.scene__visuel .guide { stroke: var(--texte-2); stroke-width: 1; }
.scene__visuel .point { fill: var(--texte); }
.scene__visuel .point.note--c { fill: var(--c); }
.scene__visuel .point--creux { fill: var(--fond); stroke: var(--texte); stroke-width: 2; }
.scene__visuel .point--survol { fill: var(--c); stroke: var(--fond); stroke-width: 2; }
.scene__visuel .point--survol2 { fill: var(--texte-2); stroke: var(--fond); stroke-width: 2; }

/* Bandes */
.scene--bandes .survol { fill: none; stroke: var(--texte); stroke-width: 2; }

/* Barres */
.scene--barres rect { fill: color-mix(in srgb, var(--c) 60%, var(--fond)); }
.scene--barres rect.is-fort { fill: var(--texte); }
.scene--barres rect.is-top { fill: var(--c); }
.scene--barres rect.is-survol { fill: var(--texte); }

/* Courbe */
.scene--courbe .trace { fill: none; stroke: var(--c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.scene--courbe .trace--2 { stroke: var(--texte-2); stroke-width: 2; stroke-dasharray: 1 5; }
.scene--courbe .aire { fill: url(#expli-aire); }

/* Proportion */
.scene--proportion .disque-avant { fill: none; stroke: var(--texte-2); stroke-dasharray: 5 6; stroke-width: 1.5; }
.scene--proportion .disque-apres { fill: color-mix(in srgb, var(--c) 35%, #fff); }
.scene--proportion .disque-perdu { fill: color-mix(in srgb, var(--c) 18%, transparent); }
.scene--proportion .is-survol { stroke: var(--texte); stroke-width: 2; }

/* Unités : fréquences */
.scene--unites .pastille { fill: var(--fond-3); }
.scene--unites .pastille-pleine { fill: var(--c); }

/* Unités : répartition, pastilles et légende côte à côte */
.repartition { display: grid; grid-template-columns: 1fr; gap: 24px; height: 100%; }
.repartition__pastilles { position: relative !important; width: 100%; max-width: 320px; height: auto !important; aspect-ratio: 1; }
.repartition__pastilles circle { transition: opacity .2s; }
.repartition__pastilles .is-eteint { opacity: .15; }
.repartition__legende { margin: 0; padding: 0; list-style: none; overflow-y: auto; max-height: 100%; }
.repartition__legende button {
	display: grid; grid-template-columns: 12px 1fr auto; align-items: baseline; gap: 10px; width: 100%; padding: 6px 4px;
	border: 0; border-radius: 4px; background: none; color: var(--texte-2); font: 400 15px/1.3 var(--f); font-variation-settings: "wdth" var(--etroit); text-align: left; cursor: pointer;
}
.repartition__legende button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--q); align-self: center; }
.repartition__legende button.is-survol, .repartition__legende button:hover { background: var(--fond-3); color: var(--texte); }
.repartition__legende button[aria-pressed="true"] { color: var(--texte); font-weight: 700; }
.repartition__val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.repartition__val small { margin-left: 6px; color: var(--texte-3); font-size: 13px; }
.scene--unites .scene__visuel:has(.repartition) { height: auto; min-height: 320px; }
@media (min-width: 640px) {
	.repartition { grid-template-columns: minmax(200px, 320px) 1fr; align-items: start; }
	.repartition__legende { max-height: 420px; }
}

/* Courbes multiples : une couleur par série, un bouton pour afficher ou masquer chacune */
.scene--courbe .multi { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.scene--courbe .multi--trou { stroke-width: 1.5; stroke-dasharray: 2 5; opacity: .8; }
.scene__series { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scene__series button {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--trame); border-radius: 18px;
	background: none; color: var(--texte-3); font: 600 14px var(--f); font-variation-settings: "wdth" var(--etroit); cursor: pointer;
}
.scene__series button::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--q); opacity: .35; }
.scene__series button[aria-pressed="true"] { border-color: var(--texte-3); color: var(--texte); }
.scene__series button[aria-pressed="true"]::before { opacity: 1; }
.scene__series button:hover { border-color: var(--texte-2); }

/* Carte du monde : un cercle par pays */
.scene--carte .terre { fill: var(--fond-3); stroke: var(--fond); stroke-width: .5; }
.scene--carte .terre.is-survol { fill: var(--trame); }
.scene--carte .rond { fill: var(--c); fill-opacity: .55; stroke: var(--c); stroke-width: 1; }
.scene--carte .rond.is-survol { fill-opacity: .9; }
.scene--carte .etiquette { font: 700 11px var(--f); font-variation-settings: "wdth" var(--etroit); fill: var(--texte); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--fond); stroke-width: 3px; }

/* Pyramide des âges */
.scene--pyramide .scene__visuel { height: clamp(380px, 62vh, 640px); }
.scene--pyramide .pyr--h { fill: #7da7f7; }
.scene--pyramide .pyr--f { fill: #f28db2; }
.scene--pyramide .pyr.is-survol { fill: var(--texte); }
.scene--pyramide .note { paint-order: stroke; stroke: var(--fond); stroke-width: 4px; }
.scene--courbe .note { paint-order: stroke; stroke: var(--fond); stroke-width: 4px; }

/* Choix d'un seuil (menu déroulant) */
.scene__reglage--choix select {
	padding: 8px 34px 8px 12px; border: 1px solid var(--trame); border-radius: 8px; background: var(--fond-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8eef5' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: var(--texte); font: 700 18px var(--f); font-variation-settings: "wdth" var(--etroit); appearance: none; cursor: pointer;
}
.scene__reglage--choix select:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* Comparaison : barres horizontales */
.scene--comparaison .scene__visuel { height: auto; }
.scene--comparaison .comparaison__barre { fill: color-mix(in srgb, var(--c) 55%, var(--fond)); }
.scene--comparaison .comparaison__barre.is-fort { fill: var(--c); }
.scene--comparaison .comparaison__barre.is-repere { fill: var(--trame); }