:root {

  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", monospace;

  --gutter: 1rem;

}


/* CSS d'attente. Ne pas hésiter à supprimer */

body {
  font-family: var(--font-family-main), var(--font-family-sans);
  color: var(--color-text, CanvasText);
  background: var(--color-background, Canvas);
}

a {
  color: var(--color-link, LinkText);
}
a:hover {
  color: var(--color-link, LinkText);
}
a:visited {
  color: var(--color-link, VisitedText);
}


/* Images */

img {
  width: 100%;
}
figure {
  margin: 0;
}


/* Menu  */

#menu {
  display: flex;
  /*justify-content: end;*/
  gap: 1em;
  /*margin: 0 1em;*/
  /*a{
    color: inherit;
  }*/
}

@media screen{
  [data-print-only="true"]{
    display: none;
  }
}

/*main {
 max-width: 960px;
  margin: 5em auto 0 auto;

  > header {
    .subtitle {
      max-width: 30em;
    }
  }

  .pageslist {
    all: unset;
    
    li{
      max-width: 25em;
      a{
        text-decoration: none;
        display: inline-block;
      }


      dl{
        all: unset;
        display: flex;
      }
    }
  }

}*/

/* Pages list */
.pageslist {
  dl {
    all: unset;
    display: flex;
  }
}


/* Grid */

.grid {
  --columns: 12;
  --gap: 3rem;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .grid {
    grid-template-columns: repeat(var(--columns), 1fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }
}

.autogrid {
  --gap: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}