:root {

  --dark-mode: 1;

  --r-sombre: 0;
  --g-sombre: 0;
  --b-sombre: 0;

  --r-clair: 245;
  --g-clair: 245;
  --b-clair: 240;

  --rgb-sombre: var(--r-sombre), var(--g-sombre), var(--b-sombre);
  --rgb-clair: var(--r-clair), var(--g-clair), var(--b-clair);

  --couleur-sombre: rgb(var(--rgb-sombre));
  --couleur-clair: rgb(var(--rgb-clair));

  --couleur-texte: black;
  --couleur-fond: var(--couleur-clair);

  --header-height: 400px;
  --nav-height: 80px;
  --synthese-min-height: 150px;
  --principale-min-height: 1000px;
  --footer-min-height: 80px;
}

html {
  font-family: monospace;
  max-width: 95%;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
  background: var(--couleur-fond);
}

body {
  padding: 0;
  margin: 0;
  min-height:1000px;
}

header {
    color: var(--couleur-texte);
    background-color: aqua;
    height: var(--header-height);
}

nav {
    position: sticky;
    top: 0px;
    color: var(--couleur-texte);
    background-color: yellow;
    height: var(--nav-height);
}

#synthese {
    color: var(--couleur-texte);
    background-color: rgb(252, 130, 201);
    min-height: var(--synthese-min-height);
}

#principale {
    color: var(--couleur-texte);
    background-color: rgb(63, 15, 177);
    min-height: var(--principale-min-height);
}

footer {
    position: sticky;
    bottom: 0px;
    color: var(--couleur-texte);
    background-color: rgb(9, 138, 15);
    min-height: var(--footer-min-height);
}