/* Le volume du marché (src/volume-marche.js) : la charte des écrans de l'application, sans style maison. */
.vm { max-width: 980px; margin: 0 auto; padding: 20px 24px 56px; color: var(--texte); }
.vm h2 { margin: 0 0 4px; font-size: var(--t-15); font-weight: 600; color: var(--encre); }
.vm h3 { margin: 22px 0 8px; font-size: var(--t-13); font-weight: 600; color: var(--encre); }
.vm-barre, .vm-filtres { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0 0; align-items: end; }
.vm-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-bouton); box-shadow: inset 0 0 0 1px var(--filet-fort); }
.coq-ecran .vm-seg button, .vm-seg button { height: calc(var(--h-bouton) - 4px); padding: 0 10px; border-radius: var(--r-bouton); font-size: var(--t-12); color: var(--attenue); white-space: nowrap; }
.coq-ecran .vm-seg button[aria-pressed="true"], .vm-seg button[aria-pressed="true"] { background: var(--survol); color: var(--encre); font-weight: 600; }
.vm-filtres label { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-11); color: var(--attenue); }
.vm-filtres select { height: var(--h-bouton); min-width: 170px; padding: 0 8px; border-radius: var(--r-bouton); border: 0; box-shadow: inset 0 0 0 1px var(--filet-fort); background: var(--panneau); color: var(--encre); font: inherit; font-size: var(--t-13); }
.vm-reponse { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-moyen); background: var(--survol); font-size: var(--t-14); line-height: 1.5; color: var(--encre); }
.vm-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 0; }
.vm-cles > div { padding: 10px 12px; border-radius: var(--r-moyen); box-shadow: inset 0 0 0 1px var(--filet); }
.vm-cles span { display: block; font-size: var(--t-11); color: var(--attenue); }
.vm-cles b { display: block; margin-top: 2px; font-size: var(--t-15); font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }
.vm-graphe { margin-top: 16px; }
.vm-svg { width: 100%; height: auto; display: block; }
.vm-grille { stroke: var(--filet); stroke-width: 1; }
.vm-axe, .vm-annee, .vm-val { fill: var(--attenue); font-size: 10px; }
.vm-val { fill: var(--encre); font-weight: 600; }
.vm-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: var(--t-12); color: var(--attenue); }
.vm-leg i, .vm-tab th i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.vm-listes { display: grid; grid-template-columns: 1fr; gap: 0 24px; }
.vm-tab { overflow-x: auto; }
.vm-tab table { width: 100%; border-collapse: collapse; font-size: var(--t-12); font-variant-numeric: tabular-nums; }
.vm-tab th, .vm-tab td { padding: 6px 8px; border-bottom: 1px solid var(--filet); text-align: left; white-space: nowrap; }
.vm-tab .num { text-align: right; }
.vm-tab thead button { font-size: var(--t-11); color: var(--attenue); font-weight: 500; }
.vm-tab thead button[aria-pressed="true"] { color: var(--encre); font-weight: 600; }
.vm-tab tbody th { font-weight: 500; color: var(--encre); }
.vm-tab small { color: var(--attenue); margin-left: 4px; }
.vm-source { margin-top: 24px; line-height: 1.5; }
@media (min-width: 1100px) { .vm-listes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .vm { padding: 14px 14px 48px; } .coq-ecran .vm-seg button, .vm-seg button { height: calc(var(--h-bouton) + 10px); } .vm-filtres select { height: 44px; } }