@font-face {
  font-family: "Diatype";
  src: url("/assets/fonts/Cargo-DiatypePlusVariable.woff2") format("woff2");
  font-weight: 100 900; /* Assuming a wide range for variable font */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Diatype";
  src: url("/assets/fonts/Cargo-DiatypePlusVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "InterVariable";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVariable";
  src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
:root {
  --color-light-foreground: rgba(0, 0, 0, 0.85);
  --color-dark-foreground: #b8b5a7ff;
  --color-dark-background: #1e1d1cff;
  --font-letter-spacing: normal;
  --font-text: Diatype;
  --font-header: InterVariable;
  /* Font features & variations */
  --font-feature: "liga", "dlig", "kern", "calt", "ss01", "ss12";
  --font-header-feature:
      "dlig", "case", "kern", "cv01", "cv10", "cv11", "cv12", "cv13";
  --font-size: 1rem;
  --font-density: 1.3;
  --grid-gap: 2rlh;
  --line-width-normal: 60rem;
  --color-logement: var(--color-blue);
  --color-environnement: var(--color-green);
  --color-communaute: var(--color-pink);
  --color-mobilite: var(--color-orange);
}

h1 a {
  text-decoration: none;
}

.vision {
  padding-inline: var(--space);
  padding-block: var(--space-l);
}
.vision h3 {
  margin-top: 0;
}
.vision.logement {
  --color-accent: var(--color-blue);
}
.vision.environnement {
  --color-accent: var(--color-green);
}
.vision.communaute {
  --color-accent: var(--color-pink);
}
.vision.mobilite {
  --color-accent: var(--color-orange);
}
.vision:hover {
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}
.vision:hover h3 a {
  color: var(--color-accent);
}

.back {
  position: fixed;
  top: 0;
  left: 0;
  padding-left: var(--space);
  padding-top: var(--space);
  padding-bottom: var(--space-l);
  overflow-y: auto;
  font-size: var(--scale-s);
}
.back a {
  color: var(--color-foreground);
  text-decoration: none;
}