/* ============================================================
   dot-field.css — illustration en points de l'accueil (2026-10-12)
   Pleine largeur ; les couleurs des points sont lues par dot-field.js
   dans les variables --df-*.
   ============================================================ */
.df { position: relative; margin-top: clamp(70px, 9vw, 130px); overflow: hidden;
  --df-ink: #1c1c22; --df-faint: rgba(20,20,30,.16); --df-acc: #2f4cf0; }
html:not(.light) .df { --df-ink: #e4e6ee; --df-faint: rgba(230,232,240,.14); --df-acc: #7c93ff; }
.df-copy { text-align: center; margin-bottom: clamp(8px, 2vw, 20px); }
.df-copy .v3-kicker { justify-content: center; }
.df-copy .v3-title { margin-left: auto; margin-right: auto; }
.df-hint { margin: 12px 0 0; font-size: 13.5px; color: var(--mb-2, var(--ng-t60)); }
.df-hint b { color: var(--acc, #2f4cf0); font-weight: 600; }
.df-canvas { display: block; width: 100%; height: clamp(280px, 38vw, 500px); touch-action: pan-y; cursor: crosshair; }
/* Fondu en haut et en bas pour fondre la trame dans la page */
.df::after { content: ''; position: absolute; inset: auto 0 0 0; height: 60px; pointer-events: none;
  background: linear-gradient(transparent, var(--pro-bg, #fff)); }