.grid-container {
  display: grid;
  gap: 5px 5px;
  margin: 0 auto;
  grid-template-areas:
    "head"
    "art"
    "evt"
    "rss";
}
.grid-container-articles {
  display: grid;
  gap: 5px 5px;
  margin: 0 auto;
  grid-template-areas:
    "head"
    "art"
    "evt"
    "rss";
}

.grid-container-rubriques {
  display: grid;
  gap: 5px 5px;
  margin: 0 auto;
  grid-template-areas:
    "head"
    "art"
    "evt"
    "rss";
}

.grid-container-evenements {
  display: grid;
  gap: 5px 5px;
  margin: 0 auto;
  grid-template-areas:
    "head"
    "art"
    "ag"
    "evt"
    "rss";
}

.head { grid-area: head; }
.evt { grid-area: evt; }
.ag { grid-area: ag; }
.foot { grid-area: foot; }
.rss { grid-area: rss; }
.art { grid-area: art; }



ul.tiles{
  display: grid;
  margin: 0 auto;
  gap: 5px;
}

ul.tiles > * {
}






/* Structure pour version bureau */
	@media only screen and (min-width: 800px)  {

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 5px 5px;
      max-width: 1200px;
      min-width: 590px;
      margin: 0 auto;
      grid-template-areas:
        "head head head head"
        "art art art evt"
        "art art art rss";
    }
    .grid-container-articles {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 5px 5px;
      max-width: 1200px;
      min-width: 590px;
      margin: 0 auto;
      grid-template-areas:
        "head head head head"
        "art art art evt"
        "art art art rss";
    }

    .grid-container-rubriques {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 5px 5px;
      max-width: 1200px;
      min-width: 590px;
      margin: 0 auto;
      grid-template-areas:
        "head head head head"
        "art art art evt"
        "art art art rss";
    }

    .grid-container-evenements {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 5px 5px;
      max-width: 1200px;
      min-width: 590px;
      margin: 0 auto;
      grid-template-areas:
        "head head head head"
        "art  art  art  evt"
        "ag   ag   ag  rss";
    }

    .head { grid-area: head; }
    .evt { grid-area: evt; }
    .ag { grid-area: ag; }
    .foot { grid-area: foot; }
    .rss { grid-area: rss; }
    .art { grid-area: art; }



    ul.tiles{
      display: grid;
      margin: 0 auto;
      gap: 5px;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: minmax(150px, auto);
    }

    ul.tiles > * {
    }

    @media all and (-ms-high-contrast:none) {
        .grid-container {
          display: -ms-grid;
          -ms-grid-columns: 1fr 1fr 1fr 1fr;
          -ms-grid-rows: 0.2fr 0.5fr 1.8fr 0.2fr;
          gap: 5px 5px;
        }

        .head {
          -ms-grid-row: 1;
          -ms-grid-row-span: 1;
          -ms-grid-column: 1;
          -ms-grid-column-span: 4;
        }

        .evt {
          -ms-grid-row: 2;
          -ms-grid-row-span: 1;
          -ms-grid-column: 4;
          -ms-grid-column-span: 3;
        }

        .ag {
          -ms-grid-row: 2;
          -ms-grid-row-span: 1;
          -ms-grid-column: 1;
          -ms-grid-column-span: 2;
        }

        .foot {
          -ms-grid-row: 4;
          -ms-grid-row-span: 1;
          -ms-grid-column: 1;
          -ms-grid-column-span: 1;
        }

        .rss {
          -ms-grid-row: 3;
          -ms-grid-row-span: 1;
          -ms-grid-column: 4;
          -ms-grid-column-span: 2;
        }

        .art {
          -ms-grid-row: 3;
          -ms-grid-row-span: 1;
          -ms-grid-column: 1;
          -ms-grid-column-span: 1;
        }
    }


}