:root {
  --pas: 4px;
  --densite: 1;

  --e1:  calc(var(--pas) * 1  * var(--densite));
  --e2:  calc(var(--pas) * 2  * var(--densite));
  --e3:  calc(var(--pas) * 3  * var(--densite));
  --e4:  calc(var(--pas) * 4  * var(--densite));
  --e5:  calc(var(--pas) * 5  * var(--densite));
  --e6:  calc(var(--pas) * 6  * var(--densite));
  --e8:  calc(var(--pas) * 8  * var(--densite));
  --e10: calc(var(--pas) * 10 * var(--densite));
  --e13: calc(var(--pas) * 13 * var(--densite));
  --e16: calc(var(--pas) * 16 * var(--densite));

  --rythme:        clamp(44px, 6vw, 80px);
  --rythme-serre:  clamp(28px, 4vw, 52px);
  --rythme-ouvert: clamp(48px, 7vw, 88px);

  --gouttiere:   clamp(16px, 4.5vw, 40px);
  --largeur:     1200px;
  --largeur-etroite: 780px;
  --mesure:      65ch;

  --rayon-xs: 3px;
  --rayon-s:  6px;
  --rayon-m:  10px;
  --rayon-l:  16px;
  --rayon-pastille: 999px;

  --filet: 1px;
  --filet-accent: 3px;

  --ombre-1: 0 1px 2px var(--teinte-ombre-legere), 0 8px 24px -12px var(--teinte-ombre);
  --ombre-2: 0 2px 4px var(--teinte-ombre-legere), 0 18px 40px -18px var(--teinte-ombre);
  --ombre-3: 0 4px 10px var(--teinte-ombre-legere), 0 32px 64px -24px var(--teinte-ombre);

  --transition: cubic-bezier(.2, .7, .3, 1);
  --sortie:     cubic-bezier(.16, 1, .3, 1);
  --duree-1: .15s;
  --duree-2: .28s;

  --plan-entete:  40;
  --plan-panneau: 60;
  --plan-atelier: 80;

  --hauteur-champ: 46px;
}

[data-densite="compacte"] {
  --densite: .8;
  --rythme:        clamp(32px, 4.5vw, 60px);
  --rythme-serre:  clamp(22px, 3vw, 40px);
  --rythme-ouvert: clamp(36px, 5.5vw, 68px);
  --hauteur-champ: 42px;
}

[data-densite="aeree"] {
  --densite: 1.3;
  --rythme:        clamp(60px, 8.5vw, 128px);
  --rythme-serre:  clamp(40px, 5.5vw, 76px);
  --rythme-ouvert: clamp(64px, 9vw, 132px);
  --hauteur-champ: 52px;
}

[data-rayon="net"] {
  --rayon-xs: 0; --rayon-s: 0; --rayon-m: 0; --rayon-l: 0; --rayon-pastille: 2px;
}

[data-rayon="rond"] {
  --rayon-xs: 8px; --rayon-s: 12px; --rayon-m: 18px; --rayon-l: 28px;
}