/* variations */
:root {
  --header: hsl(195,100%,50%); /* bleu clair */
  --h0: 45deg; /* base step */
}

/* variations */
.color-1 { --h: calc(0 * var(--h0)); }
.color-2 { --h: calc(1 * var(--h0)); }
.color-3 { --h: calc(2 * var(--h0)); }
.color-4 { --h: calc(3 * var(--h0)); }
.color-5 { --h: calc(4 * var(--h0)); }
.color-6 { --h: calc(5 * var(--h0)); }
.color-7 { --h: calc(6 * var(--h0)); }
.color-8 { --h: calc(7 * var(--h0)); }

[class*="color-"] {
  --hb: calc(var(--h) + 30deg);

  --base: hsl(var(--h), 85%, 55%);
  --light: hsl(var(--h), 85%, 92%);
  --lighter: hsl(var(--h), 85%, 96%);
  --dark: hsl(var(--h), 85%, 40%);

  --b-base: hsl(var(--hb), 85%, 55%);
  --b-light: hsl(var(--hb), 85%, 92%);
  --b-lighter: hsl(var(--hb), 85%, 96%);
  --b-dark: hsl(var(--hb), 85%, 40%);
}

@font-face {
    font-family: "ComicNeue";
    src: url("../assets/fonts/ComicNeue-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Caveat";
    src: url("../assets/fonts/Caveat-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Gluten";
    src: url("../assets/fonts/Gluten-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "ShantellSans";
    src: url("../assets/fonts/ShantellSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Poetsenone";
    src: url("../assets/fonts/Poetsenone-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Courgette";
    src: url("../assets/fonts/Courgette-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "MeaCulpa";
    src: url("../assets/fonts/MeaCulpa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Miniver";
    src: url("../assets/fonts/Miniver-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Signika";
    src: url("../assets/fonts/Signika-variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}
@font-face {
    font-family: "cossettetitre";
    src: url("../assets/fonts/cossettetitre_regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "ComicRelief";
    src: url("../assets/fonts/ComicRelief-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Sniglet";
    src: url("../assets/fonts/Sniglet-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "PlaywriteFRTrad";
    src: url("../assets/fonts/PlaywriteFRTrad-VariableFont_wght.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Julee";
    src: url("../assets/fonts/Julee-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Oleoscript";
    src: url("../assets/fonts/oleoscript_regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Gabriela";
    src: url("../assets/fonts/Gabriela-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}