/* zinema — espacement & rayons. Base 4px. L'air est un matériau :
   peu d'éléments, beaucoup d'espace, l'image respire. */
:root {
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;

  --marge-ecran: 20px;       /* gouttière mobile */
  --zone-tactile: 44px;      /* minimum absolu des cibles tactiles */

  --rayon-xs: 6px;           /* puces, badges */
  --rayon-s: 10px;           /* champs, contrôles */
  --rayon-m: 14px;           /* cartes */
  --rayon-l: 20px;           /* feuilles, vignettes vidéo */
  --rayon-xl: 28px;          /* surfaces plein écran, modales */
  --rayon-pilule: 999px;     /* actions flottant sur l'image */
}