/* ============================================================================ * SuperAndy — onglet « Tableau de bord » (assets/dashboard/view.js + charts.js). * Tokens de la console uniquement (--bg, --panel, --panel2, --border, --text, * --soft, --accent, --ok, --ko, --warn, --radius) : sombre par défaut, le mode * clair est porté par la media query de :root (même règle que styles.css). * * Palette CATÉGORIELLE des graphes (--dash-s1…s5) : ordre FIXE, validée * (bande de luminance, chroma, séparation daltonisme ≥ 8, contraste) sur le * fond --panel des deux thèmes. En clair, s3–s5 passent sous 3:1 face au fond : * les valeurs sont donc toujours écrites en clair (légendes, infobulles, * libellés), jamais portées par la seule couleur. Les couleurs d'ÉTAT * (--ok / --warn / --ko / --dash-crit) restent réservées aux états. * * Posées sur :root (et non sur .dash-root) : l'infobulle des graphes est * rattachée à , hors de la vue, et doit connaître ces couleurs. * ========================================================================== */ :root{ --dash-s1:#3987e5; --dash-s2:#d95926; --dash-s3:#199e70; --dash-s4:#c98500; --dash-s5:#d55181; --dash-crit:#b91c1c; --dash-ok-bg:rgba(34,197,94,.10); --dash-warn-bg:rgba(245,158,11,.11); --dash-ko-bg:rgba(239,68,68,.11); --dash-accent-bg:rgba(59,130,246,.13); } @media (prefers-color-scheme: light){ :root{ --dash-s1:#2a78d6; --dash-s2:#eb6834; --dash-s3:#1baf7a; --dash-s4:#eda100; --dash-s5:#e87ba4; --dash-crit:#991b1b; --dash-ok-bg:rgba(34,197,94,.10); --dash-warn-bg:rgba(245,158,11,.13); --dash-ko-bg:rgba(239,68,68,.09); --dash-accent-bg:rgba(59,130,246,.10); } } /* ---- Racine : un conteneur de requêtes (largeur du CONTENU, pas de l'écran : * la barre latérale disparaît sous 720 px, la zone utile ne suit pas le * viewport). Élément de bloc : sa largeur ne dépend pas de son contenu, * container-type n'y écrase donc aucune taille intrinsèque. ---- */ .dash-root{ container-type:inline-size; container-name:dash; max-width:1600px; } .dash-head{ margin-bottom:14px; } .dash-stamp{ color:var(--soft); font-size:12px; } .dash-refresh{ display:inline-flex; align-items:center; gap:6px; } .dash-slot:empty{ display:none; } .dash-soft{ color:var(--soft); } .dash-ko{ color:var(--ko); font-weight:700; } /* ---- Bandeau d'état global ---- */ .dash-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; padding:16px 18px; margin-bottom:16px; background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--ok); border-radius:var(--radius); } .dash-hero.is-ok{ border-left-color:var(--ok); background:linear-gradient(90deg, var(--dash-ok-bg), var(--panel) 55%); } .dash-hero.is-warn{ border-left-color:var(--warn); background:linear-gradient(90deg, var(--dash-warn-bg), var(--panel) 55%); } .dash-hero.is-danger{ border-left-color:var(--ko); background:linear-gradient(90deg, var(--dash-ko-bg), var(--panel) 55%); } .dash-hero.is-pending{ border-left-color:var(--border); } .dash-hero-main{ display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 280px; } .dash-hero-ic{ flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; font-size:22px; background:var(--panel2); color:var(--soft); } .dash-hero.is-ok .dash-hero-ic{ color:var(--ok); background:var(--dash-ok-bg); } .dash-hero.is-warn .dash-hero-ic{ color:var(--warn); background:var(--dash-warn-bg); } .dash-hero.is-danger .dash-hero-ic{ color:var(--ko); background:var(--dash-ko-bg); } .dash-hero-t{ font-size:18px; font-weight:750; line-height:1.25; } .dash-hero-s{ color:var(--soft); font-size:13px; margin-top:2px; } .dash-doms{ display:flex; flex-wrap:wrap; gap:6px; flex:2 1 420px; justify-content:flex-end; } .dash-dom{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:650; background:var(--panel2); color:var(--text); border:1px solid var(--border); } .dash-dom .saIcon{ width:14px; height:14px; color:var(--soft); } .dash-dom:hover{ border-color:var(--accent); } .dash-dom.is-on{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); } .dash-dom-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; } .dash-dom.is-warn .dash-dom-dot{ background:var(--warn); } .dash-dom.is-danger .dash-dom-dot{ background:var(--ko); } .dash-dom.is-info .dash-dom-dot{ background:var(--accent); } .dash-dom-n{ font-variant-numeric:tabular-nums; color:var(--soft); } /* ---- Tuiles de chiffres clés ---- */ .dash-kpis{ display:grid; grid-template-columns:repeat(auto-fill, minmax(205px, 1fr)); gap:12px; margin-bottom:14px; } .dash-kpi{ position:relative; display:flex; flex-direction:column; gap:2px; min-width:0; padding:13px 14px 10px; background:var(--panel); border:1px solid var(--border); border-radius:12px; color:var(--text); overflow:hidden; transition:border-color .15s ease, transform .15s ease; } a.dash-kpi:hover{ border-color:var(--accent); transform:translateY(-1px); } a.dash-kpi:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .dash-kpi::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:transparent; } .dash-kpi.is-ok::before{ background:var(--ok); } .dash-kpi.is-warn::before{ background:var(--warn); } .dash-kpi.is-ko::before{ background:var(--ko); } .dash-kpi-h{ display:flex; align-items:center; gap:8px; min-width:0; } .dash-kpi-h .sp{ flex:1; } .dash-kpi-ic{ flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:8px; font-size:15px; background:var(--dash-accent-bg); color:var(--accent); } .dash-kpi.is-ok .dash-kpi-ic{ background:var(--dash-ok-bg); color:var(--ok); } .dash-kpi.is-warn .dash-kpi-ic{ background:var(--dash-warn-bg); color:var(--warn); } .dash-kpi.is-ko .dash-kpi-ic{ background:var(--dash-ko-bg); color:var(--ko); } .dash-kpi-l{ font-size:12px; font-weight:650; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .dash-kpi-v{ font-size:25px; font-weight:800; line-height:1.15; margin-top:6px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dash-kpi-v.is-pending{ font-size:16px; } .dash-kpi-s{ font-size:11.5px; color:var(--soft); min-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dash-spark{ display:block; width:100%; height:30px; margin-top:6px; } .dash-spark-ph{ height:30px; margin-top:6px; } .dash-trend{ flex:none; font-size:11px; font-weight:750; padding:1px 7px; border-radius:999px; font-variant-numeric:tabular-nums; background:var(--panel2); color:var(--soft); } .dash-trend.is-good{ background:var(--dash-ok-bg); color:var(--ok); } .dash-trend.is-bad{ background:var(--dash-ko-bg); color:var(--ko); } .dash-trend.is-neutral{ color:var(--text); } /* ---- Navigation interne (boutons : le routeur de la console occupe le #) ---- */ .dash-jumps{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 16px; } .dash-jump{ background:transparent; border:1px solid var(--border); color:var(--soft); border-radius:999px; padding:4px 11px; font-size:12px; font-weight:650; } .dash-jump:hover{ color:var(--text); border-color:var(--accent); } /* ---- Grilles ---- */ .dash-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 18px; align-items:start; } .dash-row--main{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); } .dash-grid2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:12px; } .dash-split{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:22px; } .dash-multiples{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:12px; } @container dash (max-width: 1060px){ .dash-row, .dash-row--main{ grid-template-columns:minmax(0,1fr); } .dash-split{ grid-template-columns:minmax(0,1fr); } } @container dash (max-width: 620px){ .dash-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); } .dash-grid2, .dash-multiples{ grid-template-columns:minmax(0,1fr); } .dash-doms{ justify-content:flex-start; } .dash-kpi-v{ font-size:21px; } } @container dash (max-width: 380px){ .dash-kpis{ grid-template-columns:minmax(0,1fr); } } /* ---- Cartes ---- */ .dash-card{ min-width:0; } .dash-card-h{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; } .dash-card-h h3{ margin:0; font-size:15px; } .dash-card-h .sp{ flex:1; } .dash-card-ic{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--panel2); color:var(--accent); font-size:15px; } .dash-card-link{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:650; } .dash-card-sub{ margin-top:-4px !important; } .dash-loading{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--soft); padding:26px 10px; font-size:13px; } .dash-na{ color:var(--soft); font-size:13px; margin:6px 0; padding:10px 12px; background:var(--panel2); border-radius:9px; } .dash-note{ color:var(--soft); font-size:11.5px; margin:12px 0 0; line-height:1.45; } .dash-empty{ color:var(--soft); font-size:12.5px; margin:6px 0; } .dash-state{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:11px 12px; border-radius:9px; font-size:13px; font-weight:600; background:var(--dash-warn-bg); color:var(--warn); border:1px solid rgba(245,158,11,.35); } .dash-state-link{ margin-left:auto; font-weight:700; } /* ---- Statistiques en ligne ---- */ .dash-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(135px, 1fr)); gap:10px; margin:4px 0 6px; } .dash-stat{ background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:9px 11px; min-width:0; } .dash-stat-v{ font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dash-stat-l{ font-size:11.5px; color:var(--soft); margin-top:1px; } .dash-stat-s{ font-size:11px; color:var(--soft); margin-top:3px; opacity:.9; overflow-wrap:anywhere; } .dash-stat.is-ok .dash-stat-v{ color:var(--ok); } .dash-stat.is-warn .dash-stat-v{ color:var(--warn); } .dash-stat.is-ko .dash-stat-v{ color:var(--ko); } /* ---- Flux d'alertes ---- */ .dash-filters{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } .dash-filter{ display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:999px; padding:4px 11px; font-size:12px; font-weight:650; } .dash-filter.is-on{ border-color:var(--accent); background:var(--dash-accent-bg); } .dash-filter-n{ font-variant-numeric:tabular-nums; color:var(--soft); } .dash-filter.is-danger .dash-filter-n{ color:var(--ko); } .dash-filter.is-warn .dash-filter-n{ color:var(--warn); } .dash-filter-src{ margin-bottom:10px; } .dash-alerts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .dash-alert{ display:flex; align-items:flex-start; gap:11px; padding:10px 12px; border-radius:10px; color:var(--text); background:var(--panel2); border:1px solid var(--border); border-left:3px solid var(--accent); } a.dash-alert:hover{ border-color:var(--accent); } a.dash-alert:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } .dash-alert.is-danger{ border-left-color:var(--ko); } .dash-alert.is-warn{ border-left-color:var(--warn); } .dash-alert-ic{ flex:none; font-size:17px; line-height:1; margin-top:1px; color:var(--accent); } .dash-alert.is-danger .dash-alert-ic{ color:var(--ko); } .dash-alert.is-warn .dash-alert-ic{ color:var(--warn); } .dash-alert-b{ flex:1; min-width:0; } .dash-alert-t{ font-weight:700; font-size:13.5px; line-height:1.35; overflow-wrap:anywhere; } .dash-alert-d{ font-size:12.5px; color:var(--soft); margin-top:2px; overflow-wrap:anywhere; } .dash-alert-m{ display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:5px; font-size:11px; color:var(--soft); } .dash-alert-sev{ font-weight:750; text-transform:uppercase; letter-spacing:.3px; } .dash-alert.is-danger .dash-alert-sev{ color:var(--ko); } .dash-alert.is-warn .dash-alert-sev{ color:var(--warn); } .dash-alert-go{ flex:none; align-self:center; display:inline-flex; align-items:center; font-size:12px; font-weight:700; color:var(--accent); } .dash-more{ margin-top:10px; } .dash-allclear{ display:flex; align-items:center; gap:10px; padding:14px 12px; border-radius:10px; font-size:13px; font-weight:600; background:var(--dash-ok-bg); color:var(--ok); } .dash-allclear .saIcon{ width:18px; height:18px; } /* ---- Disponibilité ---- */ .dash-av{ display:flex; flex-direction:column; gap:12px; margin-bottom:6px; } .dash-av-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:5px; } .dash-av-h .sp{ flex:1; } .dash-av-name{ font-weight:700; font-size:13px; } .dash-av-srv{ font-size:11.5px; color:var(--soft); } .dash-av-pct{ font-weight:800; font-variant-numeric:tabular-nums; font-size:13px; } .dash-av-pct.is-ok{ color:var(--ok); } .dash-av-pct.is-warn{ color:var(--warn); } .dash-av-pct.is-ko{ color:var(--ko); } .dash-av-pct.is-muted{ color:var(--soft); } .dash-uptime{ display:flex; gap:2px; height:24px; } .dash-uptime-c{ flex:1 1 0; min-width:1px; border-radius:2px; background:var(--panel2); border:1px solid var(--border); } .dash-uptime-c.is-up{ background:var(--ok); border-color:transparent; opacity:.85; } .dash-uptime-c.is-part{ background:var(--warn); border-color:transparent; } .dash-uptime-c.is-down{ background:var(--ko); border-color:transparent; } .dash-uptime-c:hover{ opacity:1; outline:1px solid var(--text); } .dash-av-scale{ display:flex; justify-content:space-between; color:var(--soft); font-size:11px; margin:2px 0 10px; } /* ---- Graphes (charts.js) : SVG étiré + libellés d'axes en HTML ---- */ /* Le graphe est son propre conteneur : ses étiquettes se clairsèment selon SA * largeur (une demi-carte, un petit multiple, un téléphone), pas celle de l'écran. */ .dash-plot{ position:relative; padding:6px 6px 20px 48px; container-type:inline-size; } .dash-plot-area{ position:relative; height:var(--plot-h); } .dash-plot-area > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; display:block; } .dash-plot-y{ position:absolute; left:0; top:6px; width:42px; height:var(--plot-h); } .dash-plot-yl{ position:absolute; right:0; transform:translateY(-50%); font-size:11px; line-height:1; color:var(--soft); font-variant-numeric:tabular-nums; white-space:nowrap; } .dash-plot-x{ position:absolute; left:48px; right:6px; bottom:0; height:18px; } .dash-plot-xl{ position:absolute; top:4px; transform:translateX(-50%); font-size:11px; line-height:1; color:var(--soft); white-space:nowrap; } .dash-plot-xl.is-start{ transform:none; } .dash-plot-xl.is-end{ transform:translateX(-100%); } .dash-plot .dash-grid{ stroke:var(--border); stroke-width:1; stroke-dasharray:3 4; } .dash-plot .dash-axis{ stroke:var(--border); stroke-width:1.2; } .dash-plot .dash-zero{ fill:var(--border); } .dash-plot g.is-hover .dash-bar{ filter:brightness(1.18); } .dash-plot-hit{ position:absolute; inset:0; cursor:crosshair; } .dash-plot-cross{ position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--soft); pointer-events:none; display:none; } .dash-plot-dot{ position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; border:2px solid var(--panel); pointer-events:none; display:none; box-sizing:border-box; } .dash-chart-h{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 6px; } .dash-chart-h .sp{ flex:1; } .dash-chart-t{ font-size:12.5px; font-weight:700; color:var(--text); margin:12px 0 6px; } .dash-chart-h .dash-chart-t{ margin:0; } .dash-legend{ display:flex; flex-wrap:wrap; gap:4px 12px; } .dash-legend-i{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--soft); } .dash-dot{ width:10px; height:10px; border-radius:3px; flex:none; display:inline-block; } .dash-donut{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .dash-donut-svg{ width:128px; height:128px; flex:none; } .dash-donut-bg{ stroke:var(--panel2); } .dash-donut-v{ fill:var(--text); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; } .dash-donut-l{ fill:var(--soft); font-size:8.5px; } .dash-legend-col{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1 1 140px; } .dash-legend-row{ display:flex; align-items:center; gap:7px; font-size:12px; } .dash-legend-k{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dash-legend-v{ color:var(--soft); font-variant-numeric:tabular-nums; white-space:nowrap; } .dash-hbars{ display:flex; flex-direction:column; gap:9px; } .dash-hbar{ display:block; color:var(--text); border-radius:8px; padding:2px 0; } a.dash-hbar:hover .dash-hbar-label{ color:var(--accent); } .dash-hbar-head{ display:flex; align-items:baseline; gap:10px; font-size:12.5px; } .dash-hbar-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; } .dash-hbar-val{ font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; } .dash-hbar-track{ height:7px; border-radius:4px; background:var(--panel2); margin-top:4px; overflow:hidden; } .dash-hbar-fill{ height:100%; border-radius:4px; } .dash-hbar-sub{ font-size:11px; color:var(--soft); margin-top:2px; } .dash-meter{ height:6px; border-radius:4px; background:var(--panel2); overflow:hidden; margin-top:4px; } .dash-meter-fill{ height:100%; border-radius:4px; background:var(--accent); } .dash-meter.is-ok .dash-meter-fill{ background:var(--ok); } .dash-meter.is-warn .dash-meter-fill{ background:var(--warn); } .dash-meter.is-ko .dash-meter-fill{ background:var(--ko); } /* Infobulle partagée (rattachée à ). */ .dash-tip{ position:fixed; z-index:60; pointer-events:none; display:none; min-width:150px; max-width:300px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:9px; box-shadow:var(--shadow); padding:8px 10px; font-size:12px; } .dash-tip-h{ font-weight:750; margin-bottom:4px; } .dash-tip-r{ display:flex; align-items:center; gap:7px; padding:1px 0; } .dash-tip-dot{ width:9px; height:9px; border-radius:3px; flex:none; } .dash-tip-k{ flex:1; color:var(--soft); } .dash-tip-v{ font-weight:750; font-variant-numeric:tabular-nums; } /* ---- Listes clé / valeur, quotas, sauvegardes ---- */ .dash-kv{ margin-top:12px; display:flex; flex-direction:column; gap:6px; } .dash-kv-row{ display:flex; align-items:center; gap:10px; font-size:12.5px; min-width:0; } .dash-kv-row .sp{ flex:1; } .dash-kv-row strong{ font-variant-numeric:tabular-nums; } .dash-quota{ display:flex; flex-direction:column; gap:10px; } .dash-quota-row{ display:block; color:var(--text); } .dash-quota-row:hover .dash-quota-n{ color:var(--accent); } .dash-quota-n{ font-weight:650; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dash-quota-sub{ font-size:11px; color:var(--warn); margin-top:2px; } .dash-backups{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; } .dash-backup{ background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; } .dash-backup-m{ font-size:11.5px; color:var(--soft); margin-top:4px; } .dash-backup-e{ font-size:11.5px; color:var(--ko); margin-top:4px; overflow-wrap:anywhere; } /* ---- Listes (support, journal, console) ---- */ .dash-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; } .dash-list-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; background:var(--panel2); border:1px solid var(--border); color:var(--text); min-width:0; } a.dash-list-row:hover{ border-color:var(--accent); } .dash-list-row .grow{ flex:1; min-width:0; } .dash-list-t{ font-size:12.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dash-list-m{ font-size:11.5px; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dash-list--compact .dash-list-row{ padding:6px 10px; } .dash-list-row .badge{ font-size:10.5px; padding:2px 7px; } /* ---- Tableau des clients : défile DANS son conteneur, jamais la page ---- */ .dash-tableWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; border:1px solid var(--border); border-radius:9px; } .dash-table{ border-collapse:collapse; width:100%; min-width:1020px; font-size:12.5px; } .dash-table th{ text-align:left; white-space:nowrap; padding:8px 10px; font-size:11px; font-weight:700; color:var(--soft); text-transform:uppercase; letter-spacing:.4px; background:var(--panel2); border-bottom:1px solid var(--border); } .dash-table td{ padding:8px 10px; border-top:1px solid var(--border); vertical-align:top; font-variant-numeric:tabular-nums; } .dash-table th.is-num, .dash-table td.is-num{ text-align:right; white-space:nowrap; } .dash-table tbody tr:hover{ background:var(--panel2); } .dash-table tr.is-click{ cursor:pointer; } .dash-table td .dash-meter{ min-width:80px; } .dash-cl-name{ font-weight:650; } .dash-cl-sub{ color:var(--soft); font-size:11.5px; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dash-cl-badges{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; } .dash-cl-badges .badge, .dash-table td > .badge{ font-size:10.5px; padding:2px 7px; } /* Réduction des animations demandée par le système : aucun déplacement. */ @media (prefers-reduced-motion: reduce){ .dash-kpi, a.dash-kpi:hover{ transition:none; transform:none; } } /* Ligne de valeur d'une tuile : la tendance suit le chiffre (le libellé garde toute la largeur). */ .dash-kpi-vrow{ display:flex; align-items:baseline; gap:8px; min-width:0; margin-top:6px; } .dash-kpi-vrow .dash-kpi-v{ margin-top:0; min-width:0; } .dash-kpi-vrow .dash-trend{ align-self:center; } @container (max-width: 520px){ .dash-plot-xl.is-odd{ display:none; } } @container (max-width: 250px){ .dash-plot-xl.is-mid{ display:none; } }