/* Gestion Physalis : écran Statistiques. Tout passe par des variables (couleurs des séries --s1…--s8, fonds de carte et de
   chaleur) pour que les 20 designs (designs.css) puissent tout changer sans toucher à ces règles. */

:root {
	--s1: #eb6834;
	--s2: #2f6f8f;
	--s3: #726d2a;
	--s4: #8a4f9e;
	--s5: #c9a227;
	--s6: #2f8f6f;
	--s7: #b5445a;
	--s8: #5f5a45;
	--sg: #8c8670;
	--carte-vide: #efe8d6;
	--chaleur-vide: #f3ecdc;
}

/* ——— Filtres ——— */
.st-filtres { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.st-filtres .champ { min-width: 0; }
.st-filtres select { min-width: 12rem; }
.st-filtres .puces { margin: 0; }
.st-dates { position: relative; }
.st-dates summary { list-style: none; cursor: pointer; }
.st-dates summary::-webkit-details-marker { display: none; }
.st-dates > div { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: 12px; box-shadow: 0 10px 30px rgba(42, 39, 24, .18); min-width: 20rem; }
.st-dates input[type=date] { width: auto; min-height: 38px; }
.st-bascules { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.st-bascules .puces { margin: 0; }
.st-menu-export { position: relative; }
.st-menu-export summary { list-style: none; cursor: pointer; }
.st-menu-export summary::-webkit-details-marker { display: none; }
.st-menu-export > div { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); display: grid; min-width: 15rem; padding: 6px; background: var(--blanc); border: 1px solid var(--trait-fort); border-radius: 12px; box-shadow: 0 10px 30px rgba(42, 39, 24, .18); }
.st-menu-export a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--encre); }
.st-menu-export a:hover { background: var(--beige-2); }

/* ——— Chiffres clés ——— */
.st-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.st-kpis .chiffre { display: flex; flex-direction: column; }
.st-kpis .chiffre .etincelle { margin-top: auto; padding-top: 8px; }
.etincelle { display: block; width: 100%; height: 34px; }
.st-couv { margin: -8px 0 0; }

/* ——— En direct ——— */
.st-point { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--bon); margin-right: 6px; box-shadow: 0 0 0 0 color-mix(in srgb, var(--bon) 55%, transparent); animation: st-pouls 2s infinite; vertical-align: 1px; }
@keyframes st-pouls { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .st-point { animation: none; } }
.st-direct-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px 28px; align-items: start; }
.st-direct-nb .valeur { font-size: 3.25rem; font-weight: 700; line-height: 1; color: var(--vert); }
.st-direct-min { margin-top: 10px; }
.st-direct h3 { font-size: .875rem; color: var(--ardoise); margin-bottom: 8px; }
.st-direct-pages, .st-direct-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9375rem; }
.st-direct-pages li { display: flex; justify-content: space-between; gap: 12px; }
.st-direct-pages .nom, .st-direct-liste .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-direct-liste li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 10px; }
.st-direct-liste .sous { grid-column: 2; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-direct-liste .quand { font-size: .8125rem; grid-row: span 2; padding-top: 2px; }

/* ——— Carte de chaleur ——— */
.chaleur { display: grid; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
.ch-ligne { display: grid; grid-template-columns: 2.6em repeat(24, minmax(11px, 1fr)); gap: 3px; align-items: center; min-width: 440px; }
.ch-ligne b { font-weight: 400; font-size: .75rem; color: var(--ardoise); }
.ch-tete span { font-size: .6875rem; color: var(--brume); text-align: left; }
.ch-ligne i { display: block; aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--s1) var(--niv, 0%), var(--chaleur-vide)); }

/* ——— Provenance, appareils, listes ——— */
.st-empile { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 12px; background: var(--chaleur-vide); }
.st-empile span { min-width: 4px; }
.st-legende { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; font-size: .9375rem; }
.st-legende li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 3.5rem; gap: 10px; align-items: center; }
.st-legende i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.st-legende small { color: var(--ardoise); text-align: right; }
.st-sous { margin-top: 18px; gap: 24px; }
.st-sous h3 { font-size: .9375rem; margin-bottom: 10px; }
.st-anneau-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: center; }
.anneau { display: flex; justify-content: center; }
.anneau-total { font-size: 22px; font-weight: 700; fill: var(--encre); font-variant-numeric: tabular-nums; font-family: var(--police); }
.st-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 4px; }
.st-mini .chiffre .valeur { font-size: 1.5rem; }
.st-pied { margin: 4px 0 0; }
.st-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.st-etapes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: baseline; }
.st-etapes .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.st-etapes .val small { font-weight: 400; color: var(--ardoise); margin-left: 8px; }
.st-etapes .rail { grid-column: 1 / -1; height: 14px; background: var(--chaleur-vide); border-radius: 7px; overflow: hidden; }
.st-etapes .rail span { display: block; height: 100%; background: var(--s1); border-radius: 7px; min-width: 3px; }
.st-anomalie b { font-weight: 700; }

/* ——— Carte du monde ——— */
.st-carte { margin-bottom: 4px; }
.st-zoom { margin-bottom: 8px; }
.st-carte-svg { display: block; width: 100%; height: auto; border-radius: 10px; background: color-mix(in srgb, var(--chaleur-vide) 55%, var(--blanc)); }
.st-carte-svg path { fill: var(--carte-vide); stroke: var(--blanc); stroke-width: var(--trait-carte, .5); stroke-linejoin: round; }
.st-carte-svg path.visite { fill: color-mix(in srgb, var(--s1) var(--niv, 40%), var(--carte-vide)); }
.st-carte-svg path:hover { stroke: var(--encre); stroke-width: calc(var(--trait-carte, .5) * 2); }
.st-carte-svg .villes circle { fill: var(--s2); fill-opacity: .72; stroke: var(--blanc); stroke-width: var(--trait-carte, .5); cursor: pointer; }
.st-carte-svg .villes circle:hover { fill-opacity: 1; }

/* ——— Rapport imprimable ——— */
.rapport { max-width: 1000px; margin: 0 auto; padding: 24px 20px 48px; }
.rapport-barre { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 20px; }
.rapport-tete { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 2px solid var(--trait-fort); }
.rapport-tete .logo { width: 64px; height: 64px; }
.rapport-tete p { margin: 2px 0 0; color: var(--ardoise); }
.rapport .st-bascules { display: none; }

@media (max-width: 1100px) {
	.st-direct-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.st-direct-grille > :last-child { grid-column: 1 / -1; }
	.duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.st-direct-grille { grid-template-columns: minmax(0, 1fr); }
	.st-anneau-ligne { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.st-anneau-ligne .st-legende { justify-self: stretch; }
	.tiers, .moitie { grid-template-columns: minmax(0, 1fr); }
	.st-mini { grid-template-columns: minmax(0, 1fr); }
	.st-filtres select { min-width: 0; width: 100%; }
	.st-filtres .champ { flex: 1 1 100%; }
	.st-dates > div { position: static; margin-top: 6px; min-width: 0; }
	.st-menu-export > div { right: auto; left: 0; }
}

@media print {
	@page { margin: 14mm; }
	body { background: #fff; }
	.rapport-barre, .st-zoom, .bulle { display: none !important; }
	.rapport { padding: 0; max-width: none; }
	.panneau, .chiffres { box-shadow: none; break-inside: avoid; }
	.pile { gap: 14px; }
	.st-carte-svg path, .ch-ligne i, .st-empile span, .rail span { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}