/* ============================================= */
/* ================= Layout ==================== */
/* ============================================= */

/* Validation W3C CSS : aucune erreur */

/* ====================================== */
/* ======== 1. Grid containers ========== */
/* ====================================== */

/* Des container secondaires sont dans les feuilles css 2 à 4 */

/* Mobile first */

/* Accueil du site */

    .wrapper.home {
        display: grid;
        display: -ms-grid;
        grid-template-areas:
            "tete"
            "intro"
            "main"
            "focus"
            "nuage"
            "pied"}

/* Rubriques */

    .wrapper.rubrique {
        display: grid;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 1em;
        -ms-grid-rows: auto 1em auto 1em auto;
        grid-template-areas:
            "tete"
            "main"
            "pied"}

/* Pages articles et mots, avec main et aside */

    .wrapper.article, .wrapper.mot{
        display: grid;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-row-gap: 1em;
        -ms-grid-rows: auto 1em auto 1em auto 1em auto;
        grid-template-areas:
            "tete"
            "main"
            "aside"
            "pied"}


/* ================================ */
/* ======== 2. Grid items ========= */
/* ================================ */

    header          {grid-area: tete;} /* main-grid-item site */
    footer          {grid-area: pied;} /* main-grid-item site */

/* Accueil */
    .presentation   {grid-area: intro;} /* main-grid-item accueil */
    .galerie        {grid-area: main;} /* main-grid-item accueil */
    .focus          {grid-area: focus;} /* main-grid-item accueil */
    .cloud          {grid-area: nuage;} /* main-grid-item accueil */

/* Rubriques, articles */
    .main           {grid-area: main;} /* main-grid-item rubrique */

/* Article */
    .aside          {grid-area: aside;} /* main-grid-item article */


/* ================================= */
/* ===== 3. Responsive design ====== */
/* ================================= */

/* Small devices (portrait tablets and large phones, 600px and up) */
    @media screen and (min-width: 580px) {} /* end 600px and up */

/* Medium devices (landscape tablets, 768px and up) */
    @media screen and (min-width: 768px) {

        .wrapper.home {
            -ms-grid-columns: 1fr 1em 1fr;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 1em;
            grid-template-areas:
                "tete tete"
                "intro intro"
                "main main"
                "focus nuage"
                "pied pied"}

        .wrapper.article, .wrapper.mot {
            -ms-grid-columns: 1fr 1em 2fr;
            grid-template-columns: 1fr 2fr;
            grid-column-gap: 1em;
            grid-template-areas:
                "tete tete"
                "aside main"
                "pied pied"}

    } /* end 768px and up */

/* Large devices (laptops/desktops, 992px and up) */
    @media screen and (min-width: 992px) {

        .wrapper.home {
            -ms-grid-columns: 1fr 1em 1fr 1em 1fr 1em 1fr;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-column-gap: 1em;
            grid-template-areas:
                "tete tete tete tete"
                "intro intro intro intro"
                "main main main main"
                "focus focus nuage nuage"
                "pied pied pied pied"}

        .wrapper.article, .wrapper.mot {
            -ms-grid-columns: 1fr 1em 3fr;
            grid-template-columns: 1fr 3fr;
            grid-column-gap: 1em;
            grid-template-areas:
                "tete tete"
                "aside main"
                "pied pied"}

    } /* end 992px and up */

/* Extra large devices (large laptops and desktops, 1200px and up) */
    @media screen and (min-width: 1200px) {} /* end 1200px and up */