@charset "UTF-8";

/* Importation de polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&family=DM+Sans:opsz,wght@9..40,500&family=DM+Sans:ital,opsz,wght@1,9..40,500&display=swap');

/**
 * @author X <X@csfoy.ca>
 *
 * TABLE DES MATIERES
 *
 * Reset
 * Utilitaires
 * Charte typographique
 * Grille de mise en page
 *
 */

/* Reset
   ========================================================================== */

@import url(normalize.css);

/* Utilitaires
   ========================================================================== */

/* Définir des variables CSS */
:root {
    /* Couleurs */
    --color-primary: #7551db;
    --color-secondary: #fecc6a;
    --color-tertiary: rgb(221, 209, 252);
}

/* Harmoniser le modèle de boîte avec Box-Sizing */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/* Fluidifier les images et éviter qu'elles ne dépassent leur conteneur */
img {
    max-width: 100%;
}

/* Charte typographique
   ========================================================================== */

body {
    font-family: 'DM Sans', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    /* taille de police du texte sur l'écran étroit: 18px */
    font-size: 1.125rem;
    /* facteur multiplicateur de la taille de la police 1.111x18 = 20px */
    line-height: 1.111;
}

/*
    Hiérarchie responsive
    Styles plus haut dans la feuille = écran plus petit
    Styles plus bas = écran plus grand

    Points de rupture suggérés (en rem, base de 16px) :
    ==========================================================================
    40rem (640px)  - Téléphones en mode paysage (horizontal)
    48rem (768px)  - Tablettes en mode portrait (vertical)
    64rem (1024px)  - Petits ordinateurs portables, tablette en mode paysage (horizontal)
    80rem (1280px)  - Écrans de portables et écrans de bureau
    96rem (1536px)  - Écrans de bureau - souvent écrans de 24 pouces ou plus

    Vous n'êtes PAS OBLIGÉ de tous les utiliser.
    Si vous avez besoin d'un point de rupture plus précis, ajoutez-le.
*/
/*GRID TABLETTE*//*----------------------------------------------------------------------*/
@media (min-width:48rem){
    .main {
        margin: 0 2rem 0 2rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 0.3fr);
    }
    /*ROW-1*/
    .main .main__grid:nth-of-type(1) {
        grid-column: 1/5;
        grid-row: 1/2;
    }
    .main .main__grid:nth-of-type(2) {
        grid-column: 1/3;
        grid-row: 2/3;

    }
    .main .main__grid:nth-of-type(3) {
        grid-column: 3/5;
        grid-row: 2/3;
    }
    /*ROW-2*/
    .main .main__grid:nth-of-type(4) {
        grid-column: 1/5;
        grid-row: 3/4;
    }
    .main .main__grid:nth-of-type(5) {
        grid-column: 1/5;
        grid-row: 4/5;
    }

    .main .main__grid:nth-of-type(6) {
        grid-column: 1/5;
        grid-row: 5/5;
    }
    /*ROW-3*/
    .main .main__grid:nth-of-type(7) {
        grid-column: 1/3;
        grid-row: 6/7;
    }
    .main .main__grid:nth-of-type(8) {
        grid-column: 3/5;
        grid-row: 6/7;
    }
}
/*GRID DESKTOP*//*----------------------------------------------------------------------*/
@media (min-width:64rem){
    .main {
        margin: 0 10rem 0 10rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(10, 0.3fr);
    }
    /*ROW-1*/
    .main .main__grid:nth-of-type(1) {
        grid-column: 2/4;
        grid-row: 1/5;
    }
    .main .main__grid:nth-of-type(2) {
        grid-column: 2/3;
        grid-row: 5/8;

    }
    .main .main__grid:nth-of-type(3) {
        grid-column: 3/4;
        grid-row: 5/8;
    }
    /*ROW-2*/
    .main .main__grid:nth-of-type(4) {
        grid-column: 4/5;
        grid-row: 1/8;
    }
    .main .main__grid:nth-of-type(5) {
        grid-column: 3/5;
        grid-row: 8/11;
    }

    .main .main__grid:nth-of-type(6) {
        grid-column: 2/3;
        grid-row: 8/11;
    }
    /*ROW-3*/
    .main .main__grid:nth-of-type(7) {
        grid-column: 1/2;
        grid-row: 1/6;
    }
    .main .main__grid:nth-of-type(8) {
        grid-column: 1/2;
        grid-row: 6/11;
    }
}
/*BACKGROUND*//*----------------------------------------------------------------------*/
body {
    background-color: #F6F5F6;
}
.main__grid {
    border-radius: 1rem;
    margin: 1rem;
    padding: 1rem;
}
.main .main__grid:nth-of-type(4n+1) {
    background-color: #7551db;
}
.main .main__grid:nth-of-type(5n+3) {
    background-color: #fecc6a;
}
.main .main__grid:nth-of-type(7) {
    background-color: #F9EEE2;
}
.main .main__grid:nth-of-type(4n+2) {
    background-color: white;
}
.main .main__grid:nth-of-type(4) {
    background-color: #DBD1FC;
}
/*TEXTE*//*----------------------------------------------------------------------*/
.main__gros-titre,
.main__moyen-titre,
.main__petit-titre {
    font-weight: 600;
}
.main__gird .main__petit-titre {
    font-size: 1.5rem;
}
.main__grid .main__moyen-titre {
    font-size: 2rem;
}
.main__grid .main__gros-titre {
    font-size: 3rem;
}
.main__grid:nth-of-type(4) {
    text-align: center;
}
/*COULEUR*/
.main .main__grid:first-of-type {
    color: white;
    text-align: center;
}
.main .main__grid:nth-of-type(5) {
    color: white;
}
.main__gros-titre .main__strong:first-of-type {
    color: #fecc6a;
}
.main__gros-titre .main__strong:last-of-type {
    font-style: italic;
}
.main__moyen-titre .main__strong {
    color: #7551db;
    font-style: italic;
}

@media (min-width:64rem) {
    .main__grid:nth-of-type(1) {
        padding-top: 10%;
    }
}
/*IMAGES*//*----------------------------------------------------------------------*/
.main__grid:nth-of-type(1) .main__img {
    width: 40%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.main__grid:nth-of-type(2) .main__img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.main__grid:nth-of-type(3) {
    background-image: url(../images/illustration-consistent-schedule.webp);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: 20% 100%;
    padding-bottom: 15rem;
}
.main__grid:nth-of-type(3) .main__img {
    display: none;
}
.main__grid:nth-of-type(5) {
    display: flex;
    flex-direction: column-reverse;
}
.main__grid:nth-of-type(5) .main__img {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.main__grid:nth-of-type(6) .main__img {
    width: 60%
}
.main__grid:nth-of-type(7) .main__img {
    width:60%
}
.main__grid:nth-of-type(8) .main__img {
    width:60%
}
@media (max-width:64rem) {
@media (min-width:48rem) {
    .main__grid:nth-of-type(2) .main__img {
        display: none;
    }
    .main__grid:nth-of-type(2) {
        background-image: url(../images/illustration-multiple-platforms.webp);
        background-repeat: no-repeat;
        background-size: 110%;
        padding-top: 5rem;
    }
    .main__grid:nth-of-type(3) {
        background-image: url(../images/illustration-consistent-schedule.webp);
        background-repeat: no-repeat;
        background-size: 80%;
        background-position: 20% 100%;
        padding-bottom: 15rem;
    }
    .main__grid:nth-of-type(3) .main__img {
        display: none;
    }
    .main__grid:nth-of-type(4) {
        padding-left: 25%;
        padding-right: 25%;
    }
    .main__grid:nth-of-type(5) {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    } 
    .main__grid:nth-of-type(5) .main__img {
        width: 60%;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .main__grid:nth-of-type(6) .main__img {
        display:none;
    }
    .main__grid:nth-of-type(6) {
        background-image: url(../images/illustration-audience-growth.webp);
        background-repeat: no-repeat;
        background-position: 95% 50%;
        background-size: 40%;
    }
}
}
@media (min-width:64rem) {
    .main__grid:nth-of-type(7) .main__img {
        width: 100%;
   }
   .main__grid:nth-of-type(4) .main__img {
        display: none;
   }
   .main__grid:nth-of-type(4) {
        padding: 10%;
        text-align: left;
        background-image: url(../images/illustration-schedule-posts.webp);
        background-repeat: no-repeat;
        background-size: 150%;
        background-position: -25% 30%;
   }
   .main__grid:nth-of-type(4) .main__texte:last-of-type {
        padding-top: 200%;
   }
   .main__grid:nth-of-type(2) {
        background-image: url(../images/illustration-multiple-platforms.webp);
        background-repeat: no-repeat;
        background-size: 135%;
        background-position: 0% 10%;
        padding-top: 7rem;
   }
   .main__grid:nth-of-type(2) .main__img {
        display: none;
   }
   .main__grid:nth-of-type(3) {
        background-size: 85%;
        background-position: 50% 135%;
   }
   .main__grid:nth-of-type(8) .main__img {
        width: 100%;
   }
   .main__grid:nth-of-type(6) {
        background-size: 70%;
        background-position: 30% 70%;
   }
   .main__grid:nth-of-type(5) {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
   }
   .main__grid:nth-of-type(5) .main__img {
        width: 50%;
   }
}
/*ATTRIBUTION*//*-----  -----------------------------------------------------------------*/
.attribution {
    text-align: center;
}