/* ============ TABLEAUX DE BORD 3D ============ */
.dash { padding: clamp(90px, 13vh, 170px) var(--gut); scroll-margin-top: 0; }
.dash__lede {
  max-width: 19em; margin: 26px auto 0; text-align: center;
  font-size: clamp(1.75rem, 3.5vw, 3.4rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 90; text-wrap: balance;
}
.dash__lede b { font-weight: 720; }
.dash__sub { max-width: 40em; margin: 18px auto 0; text-align: center; font-size: 17px; line-height: 1.55; color: var(--mute); text-wrap: pretty; }

/* Les démos sont des cartes .card dans une bande .strip : même taille que les sites web (16:10, --card-h). */
.dash__strip { margin-top: clamp(40px, 6vh, 70px); }
.dash__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--online); animation: dash-live 1.8s infinite; }
@keyframes dash-live { from { box-shadow: 0 0 0 0 rgba(63, 207, 116, 0.6); } to { box-shadow: 0 0 0 7px rgba(63, 207, 116, 0); } }
.dash__note { max-width: var(--maxw); margin: 16px auto 0; font-size: 14px; color: var(--mute); }

.dash__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1180px; margin: clamp(36px, 5vh, 56px) auto 0; }
.dash__cards li { padding: 22px; border-radius: var(--r-card); background: var(--ink-2); }
.dash__cards li::before { content: ''; display: block; width: 26px; height: 3px; margin-bottom: 16px; border-radius: 2px; background: var(--taxi); }
.dash__cards b { display: block; font-size: 19px; font-weight: 660; letter-spacing: -0.02em; line-height: 1.2; }
.dash__cards span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--mute); }

.dash__sources { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; max-width: 1180px; margin: 28px auto 0; }
.dash__sources p { font-size: 14px; color: var(--mute); }
.dash__sources ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dash__sources li { padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--faint); font-size: 14px; font-weight: 560; }

.dash__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(36px, 5vh, 56px); }

@media (max-width: 1020px) {
  .dash__cards { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 700px) {
  .dash__sub { font-size: 16px; }
  .dash__cta .btn { width: 100%; }
  /* Sur téléphone, chaque démo tient en entier dans l'écran. */
  .dash__card { height: auto; width: calc(100vw - 2 * var(--gut)); }
}
@media (prefers-reduced-motion: reduce) {
  .dash__dot { animation: none; }
}