: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-primary), 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);
}


/* Topbar */
.site-header{
  display: flex;
  justify-content: var(--topbar-alignment);
}


/* 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;
  }
}

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


/* Grid */

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

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

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