@charset "UTF-8";

/* === INITIALISATION === */

body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd {
     padding: 0;
     margin: 0;
     font-weight: normal;
}
body span {
     display: block;
}
a {
     color: white;
     text-decoration: none;
}

/* === VARIABLES === */

 :root {
      --SIZEfont: 24px;
}

/* ========= RÉGLAGES GÉNÉRAUX ======== */

body {
    display: grid;
    grid-template-columns: 1fr 1080px 1fr;
    background-color: rgba(51,51,51,1.00);
    font-size: var(--SIZEfont);
    font-family: "GaleyRounded-Variable";
}
main {
    grid-column: 2;
    display: grid;
    grid-row-gap: 1em;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto 200px 160px;
    padding: 1em;
    background-color: white;
}

main>section a, main>section aside, main>section article {
    background-size: cover;
}
main>section a {
    transition: all ease 400ms 400ms;
    box-sizing: border-box;
}
main>section a:hover {
    transform: scale(1.02);
    box-shadow: 3px 3px 5px rgba(37,37,37,0.80);
    border: solid thin black;
}

/* ===== ENTETE PAGE ==== */

main>header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 20px 10px 10px 10px;
    margin-bottom: 0.3em;
}

main>header>h1 {
    order: 3;
    font-family: "GaleyRounded-Variable";
    font-size: 2.1em;
    font-weight: 800;
    color: rgba(194,29,99,1.00);
    text-transform: uppercase;
}
main>header>h2 {
    order: 4;
    font-family: "Pitcher";
    font-size: 1.6em;
    color: rgba(139,9,92,1.00);
    position: relative;
    top: -0.6em;
}
main>header>h3 {
    order: 1;
    font-family: "Hawkes-LightNarrow";
    font-size: 1em;
    color: rgba(177,67,208,1.00);
    margin-bottom: 0.3em;
}

main>header>div {
    order: 2;
    width: 380px;
    height: 540px;
    background-image: url("logo.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ===== ÉLÉMENTS SECTIONS ==== */

main>section {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto repeat(4, 200px);
}

/* ========== EN TETE SECTION ========== */

main>section>header {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: 
            "espa1 h1 h1 espa2"
            "espa1 h2 h2 espa2"
            "espa1 h3 h3 espa2"
            "espa1 h4 h4 espa2"
            "espa1 asid1 asid2 espa2";
    padding: 1em;
    text-align: center;
}

main>section>header>h1 {
    grid-area: h2;
    font-size: 1em;
    font-weight: 500;
    color: rgba(92,59,43,1.00);
}
main>section>header>h2 {
    grid-area: h1;
    font-size: 0.95em;
    font-family: "Hawkes-LightNarrow";
}
main>section>header>h3 {
    grid-area: h3;
    font-size: 2.4em;
    text-transform: uppercase;
    font-family: "MalamondoBold";
    color: rgba(218,0,100,1.00);
}
main>section>header>h4 {
    grid-area: h4;
    font-family: "Hawkes-MediumNarrow";
    color: rgba(17,84,89,1.00);
}

/* ==== ASIDE HEADER :: membres équipe ==== */

main>section>header>aside {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 320px auto;
}
main>section>header aside:nth-of-type(1) {
    grid-area: asid1;
}
main>section>header aside:nth-of-type(2) {
    grid-area: asid2;
}

main>section>header>aside header {
    padding: 0 10px;
    grid-row: 2;
}
main>section>header>aside header h1 {
    font-size: 1.4em;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(48,43,43,1.00);
}
main>section>header>aside header h2 {
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 1em;
}
main>section>header>aside header h3 {
    font-size: 0.8em;
    margin-bottom: 0.6em;
    color: rgba(86,86,86,1.00);
}
main>section>header>aside header h4 {
    font-size: 0.8em;
}
main>section>header>aside header span:nth-of-type(1) {
    display: inline;    
    font-weight: 500;
    margin-right: 0.3em;
    color: rgba(165,14,72,1.00);
}

main>section>header>aside div {
    grid-row: 1;
    background-size: cover;
    margin-bottom: 1em;
}

/* ====== PORTRAITS EQUIPE ===== */

main>section:nth-of-type(1)>header aside:nth-of-type(1) div {
    background-image: url("VISUELS/equipeVICTOR.png");
}
main>section:nth-of-type(1)>header aside:nth-of-type(2) div {
    background-image: url("VISUELS/equipeCAMILLE.png");
}
main>section:nth-of-type(2)>header aside:nth-of-type(1) div {
    background-image: url("VISUELS/equipeSTAN.png");
}
main>section:nth-of-type(2)>header aside:nth-of-type(2) div {
    background-image: url("VISUELS/equipeEMILIE.png");
}
main>section:nth-of-type(3)>header aside:nth-of-type(1) div {
    background-image: url("VISUELS/equipeJST.png");
}
main>section:nth-of-type(3)>header aside:nth-of-type(2) div {
    background-image: url("VISUELS/equipeJUSTIN.png");
}

/* ===== SECTIONS 1 ==== */

main>section:nth-of-type(1) {
    grid-row: 2;    
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto repeat(7, 500px);
}
main>section:nth-of-type(1) a:nth-of-type(1) {
    grid-area: esp;
    background-image: url("VISUELS/conceptESP.jpg");
    background-position: right bottom;
    color: rgba(154,204,201,1.00);
}
main>section:nth-of-type(1) a:nth-of-type(1) header p {
}
main>section:nth-of-type(1) a:nth-of-type(1) header h1 {
    background-color: rgba(84,187,6,1.00);
}
main>section:nth-of-type(1) a:nth-of-type(2) {
    grid-area: myle;
    display: flex;
    flex-direction: column;
    text-align: right;
    background-image: url("VISUELS/conceptMYLENE.jpg");
    color: rgba(101,101,101,1.00);
}
main>section:nth-of-type(1) a:nth-of-type(2) header p {
    padding-left: 300px;
}
main>section:nth-of-type(1) a:nth-of-type(2) header h1 {
    background-color: rgba(13,130,190,1.00);
}
main>section:nth-of-type(1) a:nth-of-type(3) {
    grid-area: japo;
    background-image: url("VISUELS/conceptYUSHI.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-color: rgba(0,140,178,1.00);
    color: rgba(11,76,92,1.00);
}
main>section:nth-of-type(1) a:nth-of-type(3) header h1 {
    background-color: rgba(255,141,0,1.00);
}
main>section:nth-of-type(1) article:nth-of-type(1) {
    grid-area: beli;
    background-image: url("VISUELS/bookBELIFLOR.jpg");
}
main>section:nth-of-type(1) article:nth-of-type(2) {
    grid-area: sylv;
    background-image: url("VISUELS/bookSYLVAIN.jpg");
    color: rgba(96,56,30,1.00);
}
main>section:nth-of-type(1) article:nth-of-type(3) {
    grid-area: crane;
    background-image: url("VISUELS/bookSERGE.jpg");
    background-position: right top;
    color: rgba(134,184,219,1.00);
}
main>section:nth-of-type(1)>aside:nth-of-type(1) {
    grid-area: asidA1;
}
main>section:nth-of-type(1)>aside:nth-of-type(2) {
    grid-area: asidA2;
}
main>section:nth-of-type(1)>aside:nth-of-type(3) {
    grid-area: asidA3;
    background-image: url("VISUELS/interludeVAN-WW.jpg");
}
main>section:nth-of-type(1)>aside:nth-of-type(4) {
    grid-area: asidA4;
    background-image: url("VISUELS/interludeBUFFLE-AI.jpg");
}
main>section:nth-of-type(1)>aside:nth-of-type(5) {
    grid-area: asidA5;
    background-image: url("VISUELS/interludeAVATAR.jpg");
    background-position: center bottom;
}
main>section:nth-of-type(1)>aside:nth-of-type(6) {
    grid-area: asidA6;
    background-image: url("VISUELS/interludeTITANIC.png");
    background-position: center bottom;
}
main>section:nth-of-type(1)>aside:nth-of-type(7) {
    grid-area: asidA7;
    display: flex;
    flex-direction: column;
    background-image: url("VISUELS/LUTIN.jpg");
    background-position: right bottom;
}
main>section:nth-of-type(1)>aside:nth-of-type(7)>div {
    margin-top: 8px;
    padding: 20px;
    width: 280px;
    font-size: 0.8em;
    flex-grow: 1;
    text-align: center;
    color: rgba(16,104,159,1.00);
}
main>section:nth-of-type(1)>aside:nth-of-type(7)>div span {
    margin-top: 1em;
}
main>section:nth-of-type(1)>aside:nth-of-type(7)>div strong {
    font-size: 1.3em;
    color: rgba(11,81,107,1.00);
}
main>section:nth-of-type(1)>aside:nth-of-type(7)>span {
    height: 25px;
    color: rgba(134,232,161,1.00);
    text-align: center;
    font-size: 0.6em;
    font-weight: 500;
}

/* ===== SECTIONS 2 ==== */

main>section:nth-of-type(2) {
    grid-row: 3;
    display: grid;
    grid-gap: 0.7em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto repeat(7, 300px);
    grid-template-areas: 
        "header header header"
        "adibou rolles thales"
        "asidB1 asidB2 asidB3"
        "sochic sochic tictac"
        "limind limind tictac"
        "asidB4 asidB4 asidB5"
        "electro given given"
        "electro photo photo";
}

main>section:nth-of-type(2) article:nth-of-type(1) {
    grid-area: adibou;
    background-image: url("VISUELS/bookADIBOU.jpg");
    background-position: bottom center;
    color: rgba(18,60,80,1.00);
}
main>section:nth-of-type(2) article:nth-of-type(2) {
    grid-area: rolles;
    background-image: url("VISUELS/bookEYROLLES.jpg");
    background-position: bottom center;
    color: rgba(77,49,30,1.00);
}
main>section:nth-of-type(2) article:nth-of-type(3) {
    grid-area: thales;
    background-image: url("VISUELS/bookTHALES.jpg");
    background-position: bottom center;
    color: rgba(180,213,167,1.00);
}
main>section:nth-of-type(2) article:nth-of-type(4) {
    grid-area: limind;
    background-image: url("VISUELS/bookREVLIMIND.jpg");
    background-position: right center;
    background-size: cover;
    color: rgba(37,89,104,1.00);
}
main>section:nth-of-type(2) article:nth-of-type(4) header p {
    padding-right: 480px;
}
main>section:nth-of-type(2) article:nth-of-type(5) {
    grid-area: sochic;
    background-image: url("VISUELS/bookSOCHIC.jpg");
    color: rgba(67,21,13,1.00);
}
main>section:nth-of-type(2) article:nth-of-type(5) header p {
    padding-right: 480px;
}
main>section:nth-of-type(2) article:nth-of-type(6) {
    grid-area: tictac;
    background-image: url("VISUELS/bookTICTACTOC.jpg");
    background-position: right bottom;
    color: rgba(13,91,105,1.00);
}
main>section:nth-of-type(2) article:nth-of-type(7) {
    grid-area: given;
    background-image: url("VISUELS/bookGYVENCHY.jpg");
    color: rgba(47,98,118,1.00);
}
main>section:nth-of-type(2) article:nth-of-type(7) header {    
    text-align: right;
}
main>section:nth-of-type(2) article:nth-of-type(7) header p {
    padding-left: 480px;
}
main>section:nth-of-type(2) article:nth-of-type(8) {
    grid-area: electro;
    background-image: url("VISUELS/bookARTISTE.jpg");
    background-position: center bottom;
    color: rgba(185,230,243,1.00);
}
main>section:nth-of-type(2) article:nth-of-type(9) {
    grid-area: photo;
    background-image: url("VISUELS/bookLIVRE.jpg");
    background-position: right top;
}

main>section:nth-of-type(2)>aside:nth-of-type(1) {
    grid-area: asidB1;
}
main>section:nth-of-type(2)>aside:nth-of-type(2) {
    grid-area: asidB3;
    background-image: url("VISUELS/interludeDESSIN2.jpg");
    background-position: center bottom;
}
main>section:nth-of-type(2)>aside:nth-of-type(3) {
    grid-area: asidB2;
    background-image: url("VISUELS/interludeDESSIN3.jpg");
    background-position: center center;
}
main>section:nth-of-type(2)>aside:nth-of-type(4) {
    grid-area: asidB4;
    background-image: url("VISUELS/interludeGALOPanim.png");
}
main>section:nth-of-type(2)>aside:nth-of-type(5) {
    grid-area: asidB5;
    background-image: url("VISUELS/interludeBULL.png");
    background-position: center left;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(16,25,33,1.00);
}
main>section:nth-of-type(2)>aside:nth-of-type(5):hover {
    
}
main>section:nth-of-type(2)>aside:nth-of-type(5) div {
    font-size: 0.8em;
    color: white;
    text-align: left;
    margin: 20px 210px 0 360px;
    padding: 0 0 10px 20px;
    border-bottom: solid 2px white;
}

/* ===== SECTIONS 3 ==== */

main>section:nth-of-type(3) {
    grid-row: 4;
    display: grid;
    grid-gap: 1em;
}

main>section:nth-of-type(3) article:nth-of-type(1) {
    grid-area: thev;
    display: flex;
    flex-direction: column;
    background-image: url("VISUELS/THEVERT.jpg");
    background-position: center bottom;
}
main>section:nth-of-type(3) article:nth-of-type(1) div {
    flex-grow: 1;
}
main>section:nth-of-type(3) article:nth-of-type(1) span {
    height: 25px;
    color: rgba(247,246,244,0.80);
    text-align: center;
    font-size: 0.6em;
    font-weight: 500;
}
main>section:nth-of-type(3) article:nth-of-type(2) {
    grid-area: chien;
    background-image: url("VISUELS/interludeFIN.jpg");
    background-position: center bottom;
}

main>section:nth-of-type(3)>aside:nth-of-type(1) {
    grid-area: asidC1;
    background-image: url("VISUELS/interludeDESSIN.jpg");
    background-position: center bottom;
}

/* ===== SECTION LIENS A & ARTICLES ==== */

main>section a header, main>section article header {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

main>section article header h1, main>section a header h1 {
    order: 1;
    font-size: 0.75em;
    padding: 8px 10px;
    color: white;
}
main>section article header h1 {
    background-color: rgba(75,70,78,1.00);
}

main>section article header h2, main>section a header h2 {
    order: 3;    
    font-size: 1.3em;
    margin: 0 15px 0 15px;
    font-weight: 500;
}
main>section article header h3, main>section a header h3 {
    order: 2;  
    font-size: 0.74em;
    margin: 15px 15px 0 15px;
    font-weight: 400;
}
main>section article header p, main>section a header p {
    order: 4;
    font-size: 0.8em;
    margin: 10px 15px 0 15px;
    font-weight: 400;
}

/* ===== SECTION ARTICLES ==== */

/* ===== SECTION ASIDE ==== */

/* ==================== ASIDE :: INTERLUDE ========= */

main>section>aside[title="accroche"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main>section>aside[title="accroche"] h2 {
    font-size: 1.8em;
    text-align: center;
    font-family: "Hawkes-MediumNarrow";
    text-transform: uppercase;
    margin-bottom: 0.80em;
    color: rgba(133,20,68,1.00);
}
main>section>aside[title="accroche"] h3 {
    font-size: 1.5em;
    text-align: center;
    font-family: "Hawkes-LightNarrow";
    text-transform: uppercase;
    color: rgba(199,15,94,1.00);
}

main>section>aside nav, main>section>article nav  {
    font-size: 0.8em;
    padding: 6px 12px;
    background-color: rgba(102,69,95,1.00);
    color: white;
}

/* ===== NAVIGATION PAGE ==== */

main>nav {
    grid-row: 5;
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr repeat(4, 200px) 1fr;
    grid-template-rows: 200px;
    grid-template-areas:         
        "esp1 bout1 divJO bout2 bout3 esp2";
}
main>nav a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: grey;
}
main>nav a:nth-of-type(1){
    grid-area: bout1;
}
main>nav a:nth-of-type(2){
    grid-area: bout2;
}
main>nav a:nth-of-type(3){
    grid-area: bout3;
}

main>nav div {
    grid-area: divJO;
    background-image: url("VISUELS/awareJOJO.gif");
    background-size: cover;
    background-position: left bottom;
}

/* ===== FOOTER PAGE ==== */

main>footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "GaleyRounded-Variable";
    font-size: 0.6em;
    font-weight: 125;
    color: rgba(60,118,146,0.90);
    margin-top: 2.6em;
    padding-bottom: 1.5em;
    text-align: center;
}
footer a span {
    display: inline-block;
}
footer>a> span {
    opacity: 0.3;
    background-image: url("THEVERTlogo-gris.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 5px;
    height: 64px;
    width: 90px;
}
footer>a> span:hover {
    opacity: 0.6;
}

/* ====== RESPONSIVE ET FLUIDE ======= */
/* =================================== */

/* ==================================================== LARGEUR 320 PIXELS ======= */

@media screen and (min-width: 320px){
    
    /* === VARIABLES === */

     :root {
          --SIZEfont: 18px;
    }
    
    body {
        grid-template-columns: 1fr 320px 1fr;
    }
    
    main {
        grid-template-rows: 450px auto auto auto auto 160px;
    }
    
    main>section a:hover {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(37,37,37,0.80);
        border: none;
    }
    
    /* ===== ENTETE PAGE ==== */

    main>header>div {
        width: 250px;
        height: 370px;
    }        
    
    
    /* ===== ENTETE SECTION ==== */
    
    main>section>header {
        grid-template-columns: 1fr 260px 1fr;
        grid-template-rows: 50px 90px 100px 70px auto;
        grid-template-areas: 
            "esp1 h1 esp2"
            "esp1 h2 esp2"
            "esp1 h3 esp2"
            "esp1 h4 esp2"
            "esp1 asid1 esp2"
            "esp1 asid2 esp2";
        margin-bottom: 1em;
    }
    
    main>section>header>h1 {
        font-size: 0.9em;
    }
    main>section>header>h2 {
        font-size: 1.2em;
    }
    main>section>header>h3 {
        font-size: 1.8em;
    }
    main>section>header>h4 {
    }
    
    /* ==== ASIDE HEADER :: membres équipe ==== */
    main>section>header>aside {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 270px auto;
    }
    main>section>header>aside:nth-of-type(2) {
        margin-top: 30px;
    }    
    
    /* ===== SECTIONS 1 ==== */
    
    main>section:nth-of-type(1) {
        grid-gap: 0.4em;
        grid-template-columns: 290px;
        grid-template-rows: auto 450px 600px 300px 300px 600px 620px 280px 300px 560px 550px 220px 300px 560px;
        grid-template-areas: 
            "header"
            "esp"
            "beli"
            "asidA3"
            "asidA1"
            "myle"
            "crane"
            "asidA2"
            "asidA4"
            "japo"
            "sylv"
            "asidA6"
            "asidA5"
            "asidA7";
    }
    
    /* === Mylene === */ 
    main>section:nth-of-type(1) a:nth-of-type(2) {
        text-align: right;
        background-image: url("VISUELS/conceptMYLENE2.jpg");
    }
    main>section:nth-of-type(1) a:nth-of-type(2) header p {
        padding-left: 0;
    }
    /* === Yushi16 === */
    main>section:nth-of-type(1) a:nth-of-type(3) {
        background-image: url("VISUELS/conceptYUSHI2.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right bottom;
    }
    
    /* === ESP === */ 
    main>section:nth-of-type(1) a:nth-of-type(1) {
        background-image: url("VISUELS/conceptESP2.jpg");
        background-position: center bottom;
    }
    /* === Beliflor === */ 
    main>section:nth-of-type(1) article:nth-of-type(1) {
        background-image: url("VISUELS/bookBELIFLOR2.jpg");
        background-position: center bottom;
    }
    
    /* === Lutins === */
    main>section:nth-of-type(1)>aside:nth-of-type(7) {
        background-image: url("VISUELS/LUTIN2.jpg");
        background-position: center bottom;
    }    
    main>section:nth-of-type(1)>aside:nth-of-type(7)>div {
        font-size: 0.9em;
        margin-top: 15px;
        padding: 10px;
        width: auto;
    }
    main>section:nth-of-type(1)>aside:nth-of-type(7)>span {
        height: 35px;
        padding: 0 30px;
        font-size: 0.6em;
    }
    
    /* ===== SECTIONS 2 ==== */

    main>section:nth-of-type(2) {
        grid-template-columns: 290px;
        grid-template-rows: auto 500px 540px 420px 520px 260px 480px 320px 440px 480px 300px 300px 520px 340px 520px;
        grid-template-areas: 
            "header"
            "adibou"
            "rolles"
            "asidB5"
            "tictac"
            "asidB1"
            "thales"
            "asidB3"            
            "sochic"
            "limind"
            "asidB2"
            "asidB4"
            "given"
            "photo"            
            "electro";
    }
    
    /* === Revlimind === */
    main>section:nth-of-type(2) article:nth-of-type(4) {
        background-image: url("VISUELS/bookREVLIMIND2.jpg");
        background-position: right bottom;
    }
    main>section:nth-of-type(2) article:nth-of-type(4) header p {
        padding-right: 10px;
    }
    
    /* === SoChic === */
    main>section:nth-of-type(2) article:nth-of-type(5) {
        background-image: url("VISUELS/bookSOCHIC2.jpg");
        background-position: center bottom;
    }
    main>section:nth-of-type(2) article:nth-of-type(5) header p {
        padding-right: 10px;
    }
    
    /* === Givenchy === */   
    main>section:nth-of-type(2) article:nth-of-type(7) {
        background-image: url("VISUELS/bookGYVENCHY2.jpg");
    }
    main>section:nth-of-type(2) article:nth-of-type(7) header p {
        padding-left: 10px;
    }
    
    /* ===== SECTIONS 3 ==== */
    
    main>section:nth-of-type(3) {
        grid-template-columns: 290px;
        grid-template-rows: auto 320px 600px 280px;
        grid-template-areas: 
            "header"
            "thev"
            "asidC1"
            "chien";
    }
    
    /* === TheVert === */
    main>section:nth-of-type(3)>article:nth-of-type(1) {
        background-image: url("VISUELS/THEVERT2.jpg");
        background-position: center bottom;
    }
    /* === Chien === */
    main>section:nth-of-type(3)>article:nth-of-type(2) {
        background-image: url("VISUELS/interludeFIN2.jpg");
        background-position: center bottom;
    }
    /* === Dessin === */
    main>section:nth-of-type(3)>aside:nth-of-type(1) {
        background-image: url("VISUELS/interludeDESSIN.jpg");
        background-position: center bottom;
    }
    
    /* ===== NAVIGATION PAGE ==== */

    main>nav {
        grid-gap: 0.5em;
        grid-template-columns: 1fr repeat(2, 120px) 1fr;
        grid-template-rows: 120px 120px;
        grid-template-areas:         
            "esp1 bout1 divJO esp2"
            "esp1 bout2 bout3 esp2";
    }
}

/* ==================================================== LARGEUR 640 PIXELS ======= */

@media screen and (min-width: 640px){
    
    /* === VARIABLES === */

     :root {
          --SIZEfont: 20px;
    }
    
    body {
        grid-template-columns: 1fr 620px 1fr;
    }
    
    main {
        grid-template-rows: 480px auto auto auto auto 140px;
    }
    
    main>section a:hover {
        transform: scale(1.02);
        box-shadow: 3px 3px 5px rgba(37,37,37,0.80);
        border: solid thin black;
    }
    
    /* ===== ENTETE PAGE ==== */

    main>header>div {
        width: 280px;
        height: 440px;
    }    
    
    /* ========== EN TETE SECTION ========== */

    main>section>header {
        grid-template-columns: 1fr repeat(2, 240px) 1fr;
        grid-template-rows: 46px 120px 120px 100px 1fr;
        grid-template-areas: 
            "espa1 h1 h1 espa2"
            "espa1 h2 h2 espa2"
            "espa1 h3 h3 espa2"
            "espa1 h4 h4 espa2"
            "espa1 asid1 asid2 espa2";
        margin-bottom: 1em;
    }
    
    main>section>header>h1 {
        font-size: 1em;
    }
    main>section>header>h2 {
        font-size: 0.95em;
    }
    main>section>header>h3 {
        font-size: 2.4em;
    }
    main>section>header>h4 {
    }
    
    /* ==== ASIDE HEADER :: membres équipe ==== */
    main>section>header>aside {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 260px auto;
    }
    
    main>section>header>aside:nth-of-type(2) {
        margin-top: 0px;
    }
         
    /* ===== SECTIONS 1 ==== */
    
    main>section:nth-of-type(1) {
        grid-gap: 0.5em;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto 330px 340px 280px 310px 280px 350px 280px 350px 240px 280px 340px;
        grid-template-areas: 
            "header header"
            "esp esp"
            "beli beli"
            "asidA3 asidA1"
            "myle myle"
            "asidA2 asidA4"
            "japo japo"
            "asidA6 asidA6"
            "crane sylv"            
            "crane sylv"
            "asidA5 asidA5"
            "asidA7 asidA7";
    }
    
    /* === ESP === */ 
    main>section:nth-of-type(1) a:nth-of-type(1) {
        background-image: url("VISUELS/conceptESP.jpg");
        background-position: right bottom;
    }
    /* === Mylene === */ 
    main>section:nth-of-type(1) a:nth-of-type(2) {
        text-align: right;
        background-image: url("VISUELS/conceptMYLENE.jpg");
    }
    main>section:nth-of-type(1) a:nth-of-type(2) header p {
        padding-left: 180px;
    }
    /* === Yushi16 === */
    main>section:nth-of-type(1) a:nth-of-type(3) {
        background-image: url("VISUELS/conceptYUSHI.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right bottom;
    }
    
    /* === Beliflor === */ 
    main>section:nth-of-type(1) article:nth-of-type(1) {
        background-image: url("VISUELS/bookBELIFLOR.jpg");
        background-position: center bottom;
    }
    
    /* === Avatars === */ 
    main>section:nth-of-type(1)>aside:nth-of-type(5) {
        background-image: url("VISUELS/interludeAVATAR2.png");
        background-position: center bottom;
    }
    
    /* === Lutins === */
    main>section:nth-of-type(1)>aside:nth-of-type(7) {
        background-image: url("VISUELS/LUTIN.jpg");
        background-position: right bottom;
    }    
    main>section:nth-of-type(1)>aside:nth-of-type(7)>div {
        font-size: 0.75em;
        margin-top: 25px;
        padding: 10px;
        width: 220px;
    }
    main>section:nth-of-type(1)>aside:nth-of-type(7)>span {
        height: 25px;
        width: auto;
        font-size: 0.6em;
    }
    
    /* ===== SECTIONS 2 ==== */

    main>section:nth-of-type(2) {
        grid-gap: 0.6em;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto 540px 280px 540px 280px 290px 280px 280px 280px 300px 280px;
        grid-template-areas: 
            "header header"
            "adibou rolles"
            "asidB5 asidB5"
            "tictac thales"
            "asidB3 asidB1"
            "sochic sochic"
            "limind limind"
            "asidB2 asidB4"
            "given given"
            "photo photo"            
            "electro electro";
    }
    
    /* === Revlimind === */
    main>section:nth-of-type(2) article:nth-of-type(4) {
        background-image: url("VISUELS/bookREVLIMIND.jpg");
        background-position: right bottom;
    }
    main>section:nth-of-type(2) article:nth-of-type(4) header p {
        padding-right: 300px;
    }
    
    /* === SoChic === */
    main>section:nth-of-type(2) article:nth-of-type(5) {
        background-image: url("VISUELS/bookSOCHIC.jpg");
        background-position: right bottom;
    }
    main>section:nth-of-type(2) article:nth-of-type(5) header p {
        padding-right: 320px;
    }
    
    /* === Givenchy === */   
    main>section:nth-of-type(2) article:nth-of-type(7) {
        background-image: url("VISUELS/bookGYVENCHY.jpg");
    }
    main>section:nth-of-type(2) article:nth-of-type(7) header p {
        padding-left: 320px;
    }    
    
    /* === Electro === */
    main>section:nth-of-type(2) article:nth-of-type(8) {
        background-image: url("VISUELS/bookARTISTE2.jpg");
        background-position: center bottom;
    }
    main>section:nth-of-type(2) article:nth-of-type(8) p {
        padding: 0 280px 0 0;
    }
    
    /* === RedBull === */
    main>section:nth-of-type(2)>aside:nth-of-type(5) {
        background-position: left center;
        background-size: 40%;
    }
    main>section:nth-of-type(2)>aside:nth-of-type(5) div {
        font-size: 0.7em;
        color: white;
        text-align: left;
        margin: 20px 150px 0 230px;
        padding: 0 0 10px 20px;
        border-bottom: solid 2px white;
    }
    
    /* ===== SECTIONS 3 ==== */
    
    main>section:nth-of-type(3) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto 330px 300px 340px;
        grid-template-areas: 
            "header header"
            "thev thev"
            "chien chien"
            "asidC1 asidC1";
    }
    
    /* === TheVert === */
    main>section:nth-of-type(3)>article:nth-of-type(1) {
        background-image: url("VISUELS/THEVERT.jpg");
        background-position: center bottom;
    }
    /* === Chien === */
    main>section:nth-of-type(3)>article:nth-of-type(2) {
        background-image: url("VISUELS/interludeFIN.jpg");
        background-position: center bottom;
    }
    
    /* === Dessin === */
    main>section:nth-of-type(3)>aside:nth-of-type(1) {
        background-image: url("VISUELS/interludeDESSINb.jpg");
        background-position: center bottom;
    }
    
    /* ===== NAVIGATION PAGE ==== */

    main>nav {
        grid-gap: 1em;
        grid-template-columns: 1fr repeat(4, 120px) 1fr;
        grid-template-rows: 130px;
        grid-template-areas:         
            "esp1 bout1 divJO bout2 bout3 esp2";
    }
    
}

/* ==================================================== LARGEUR 960 PIXELS ======= */

@media screen and (min-width: 960px){
    
    /* === VARIABLES === */

     :root {
          --SIZEfont: 22px;
    }
    
    body {
        grid-template-columns: 1fr 940px 1fr;
    }
    
    main {
        grid-template-rows: 540px auto auto auto 200px 160px;
    }
    
    /* ===== ENTETE PAGE ==== */

    main>header>div {
        width: 380px;
        height: 540px;
    }    
    
    /* ========== EN TETE SECTION ========== */

    main>section>header {
        grid-template-columns: 1fr repeat(2, 400px) 1fr;
        grid-template-rows: 40px 120px 120px 100px 1fr;
        grid-template-areas: 
            "espa1 h1 h1 espa2"
            "espa1 h2 h2 espa2"
            "espa1 h3 h3 espa2"
            "espa1 h4 h4 espa2"
            "espa1 asid1 asid2 espa2";
        margin-bottom: 2em;
    }
    /* ==== ASIDE HEADER :: membres équipe ==== */

    main>section>header>aside {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 410px auto;
    }
    
    /* ===== SECTIONS 1 ==== */
    
    main>section:nth-of-type(1) {
        grid-gap: 0.6em;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto 360px 300px 280px 310px 360px 300px 300px;
        grid-template-areas: 
            "header header header header header header header header header header header header"
            "esp esp esp esp esp esp esp sylv sylv sylv sylv sylv"
            "beli beli beli beli beli beli beli sylv sylv sylv sylv sylv"
            "asidA3 asidA3 asidA3 asidA3 asidA1 asidA1 asidA1 asidA1 asidA4 asidA4 asidA4 asidA4"
            "crane crane crane crane crane myle myle myle myle myle myle myle"
            "crane crane crane crane crane japo japo japo japo japo japo japo"
            " asidA6 asidA6 asidA6 asidA6 asidA6 asidA6 asidA6 asidA6 asidA2 asidA2 asidA2 asidA2"
            "asidA5 asidA5 asidA5 asidA5 asidA7 asidA7 asidA7 asidA7 asidA7 asidA7 asidA7 asidA7";
    }  
    
    /* === Mylene === */ 
    main>section:nth-of-type(1) a:nth-of-type(2) header p {
        padding-left: 180px;
    }
    /* === Yushi16 === */
    main>section:nth-of-type(1) a:nth-of-type(3) {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right bottom;
    }
    /* === Avatars === */ 
    main>section:nth-of-type(1)>aside:nth-of-type(5) {
        background-image: url("VISUELS/interludeAVATAR.jpg");
        background-position: center bottom;
    }
    
    /* === Lutins === */
    main>section:nth-of-type(1)>aside:nth-of-type(7) {
        background-image: url("VISUELS/LUTIN.jpg");
        background-position: right bottom;
    }    
    main>section:nth-of-type(1)>aside:nth-of-type(7)>div {
        font-size: 0.7em;
        margin-top: 8px;
        padding: 12px;
        width: 230px;
    }
    main>section:nth-of-type(1)>aside:nth-of-type(7)>span {
        height: 25px;
        width: auto;
        font-size: 0.6em;
    }
    
    /* ===== SECTIONS 2 ==== */

    main>section:nth-of-type(2) {
        grid-gap: 0.7em;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto 620px 310px repeat(5, 300px);
        grid-template-areas: 
            "header header header"
            "adibou rolles thales"
            "asidB2 asidB1 asidB3"
            "sochic sochic tictac"
            "limind limind tictac"
            "asidB5 asidB5 asidB4"
            "electro given given"
            "electro photo photo";
    }
    
    /* === Revlimind === */
    main>section:nth-of-type(2) article:nth-of-type(4) {
        background-image: url("VISUELS/bookREVLIMIND.jpg");
        background-position: -10px 20px;
    }
    main>section:nth-of-type(2) article:nth-of-type(4) header p {
        padding-right: 280px;
    }
    
    /* === SoChic === */
    main>section:nth-of-type(2) article:nth-of-type(5) {
        background-image: url("VISUELS/bookSOCHIC.jpg");
    }
    main>section:nth-of-type(2) article:nth-of-type(5) header p {
        padding-right: 340px;
    }
    /* === Givenchy === */   
    main>section:nth-of-type(2) article:nth-of-type(7) {
        background-image: url("VISUELS/bookGYVENCHY.jpg");
    }
    main>section:nth-of-type(2) article:nth-of-type(7) header p {
        padding-left: 300px;
    }    
    
    /* === Electro === */
    main>section:nth-of-type(2) article:nth-of-type(8) {
        background-image: url("VISUELS/bookARTISTE.jpg");
        background-position: center bottom;
    }
    main>section:nth-of-type(2) article:nth-of-type(8) p {
        padding: 0;
    }
    
    /* === RedBull === */
    main>section:nth-of-type(2)>aside:nth-of-type(5) {
        background-position: left center;
        background-size: 40%;
    }
    main>section:nth-of-type(2)>aside:nth-of-type(5) div {
        font-size: 0.7em;
        color: white;
        text-align: left;
        margin: 20px 150px 0 230px;
        padding: 0 0 10px 20px;
        border-bottom: solid 2px white;
    }
    
    /* ===== SECTIONS 3 ==== */
    
    main>section:nth-of-type(3) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto 350px 300px;
        grid-template-areas: 
            "header header header"
            "asidC1 thev thev"
            "asidC1 chien chien";
    }
    
    /* === Dessin === */
    main>section:nth-of-type(3)>aside:nth-of-type(1) {
        background-image: url("VISUELS/interludeDESSIN.jpg");
        background-position: center bottom;
    }
    
    /* ===== NAVIGATION PAGE ==== */

    main>nav {
        grid-template-columns: 1fr 200px 150px repeat(2, 200px) 1fr;
        grid-template-rows: 200px;
    }
    
}

/* ==================================================== LARGEUR 1280 PIXELS ======= */

@media screen and (min-width: 1280px){
    
    /* === VARIABLES === */

     :root {
          --SIZEfont: 24px;
    }
    
    body {
        grid-template-columns: 1fr 1280px 1fr;
    }
    
    main {
        grid-template-rows: auto auto auto auto 200px 160px;
    }
    
    /* ===== ENTETE PAGE ==== */

    main>header>div {
        width: 420px;
        height: 520px;
    }    
    
    /* ========== EN TETE SECTION ========== */

    main>section>header {
        grid-template-columns: 1fr repeat(2, 400px) 1fr;
        grid-template-rows: 40px 120px 120px 100px 1fr;
        grid-template-areas: 
            "espa1 h1 h1 espa2"
            "espa1 h2 h2 espa2"
            "espa1 h3 h3 espa2"
            "espa1 h4 h4 espa2"
            "espa1 asid1 asid2 espa2";
        margin-bottom: 2em;
    }
    
    /* ==== ASIDE HEADER :: membres équipe ==== */

    main>section>header>aside {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 420px auto;
    }
    
    /* ===== SECTIONS 1 ==== */
    
    main>section:nth-of-type(1) {
        grid-gap: 0.7em;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto repeat(7, 390px);
        grid-template-areas: 
            "header header header header header header header header header header header header"
            "esp esp esp esp esp esp esp sylv sylv sylv sylv sylv"
            "beli beli beli beli beli beli beli sylv sylv sylv sylv sylv"
            "asidA3 asidA3 asidA3 asidA3 asidA1 asidA1 asidA1 asidA1 asidA4 asidA4 asidA4 asidA4"
            "crane crane crane crane crane myle myle myle myle myle myle myle"
            "crane crane crane crane crane japo japo japo japo japo japo japo"
            " asidA6 asidA6 asidA6 asidA6 asidA6 asidA6 asidA6 asidA6 asidA2 asidA2 asidA2 asidA2"
            "asidA5 asidA5 asidA5 asidA5 asidA7 asidA7 asidA7 asidA7 asidA7 asidA7 asidA7 asidA7";
    }
    
    /* === Mylene === */ 
    main>section:nth-of-type(1) a:nth-of-type(2) header p {
        padding-left: 300px;
    }
    /* === Yushi16 === */
    main>section:nth-of-type(1) a:nth-of-type(3) {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right bottom;
    }
    /* === Avatars === */ 
    main>section:nth-of-type(1)>aside:nth-of-type(5) {
        background-image: url("VISUELS/interludeAVATAR.jpg");
        background-position: center bottom;
    }
    /* === Lutins === */
    main>section:nth-of-type(1)>aside:nth-of-type(7) {
        background-image: url("VISUELS/LUTIN.jpg");
        background-position: right bottom;
    }    
    main>section:nth-of-type(1)>aside:nth-of-type(7)>div {
        font-size: 0.8em;
        margin-top: 8px;
        padding: 20px;
        width: 280px;
    }
    main>section:nth-of-type(1)>aside:nth-of-type(7)>span {
        height: 25px;
        width: auto;
        font-size: 0.6em;
    }
    
    /* ===== SECTIONS 2 ==== */

    main>section:nth-of-type(2) {
        grid-gap: 0.7em;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto 720px 390px repeat(5, 360px);
        grid-template-areas: 
            "header header header"
            "adibou rolles thales"
            "asidB2 asidB1 asidB3"
            "sochic sochic tictac"
            "limind limind tictac"
            "asidB5 asidB5 asidB4"
            "electro given given"
            "electro photo photo";
    }
    
    /* === Revlimind === */    
    main>section:nth-of-type(2) article:nth-of-type(4) {
        background-image: url("VISUELS/bookREVLIMIND.jpg");
        background-position: right top;
    }
    main>section:nth-of-type(2) article:nth-of-type(4) header p {
        padding-right: 480px;
    }
    
    /* === SoChic === */
    main>section:nth-of-type(2) article:nth-of-type(5) {
        background-image: url("VISUELS/bookSOCHIC.jpg");
    }
    main>section:nth-of-type(2) article:nth-of-type(5) header p {
        padding-right: 480px;
    }
    /* === Givenchy === */    
    main>section:nth-of-type(2) article:nth-of-type(7) {
        background-image: url("VISUELS/bookGYVENCHY.jpg");
    }
    main>section:nth-of-type(2) article:nth-of-type(7) header p {
        padding-left: 480px;
    }    
    /* === RedBull === */
    main>section:nth-of-type(2)>aside:nth-of-type(5) {
        background-position: left center;
        background-size: contain;
    }
    main>section:nth-of-type(2)>aside:nth-of-type(5) div {
        font-size: 0.8em;
        color: white;
        text-align: left;
        margin: 20px 210px 0 360px;
        padding: 0 0 10px 20px;
        border-bottom: solid 2px white;
    }

    /* ===== SECTIONS 3 ==== */
    
    main>section:nth-of-type(3) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto 450px 400px;
        grid-template-areas: 
            "header header header"
            "asidC1 thev thev"
            "asidC1 chien chien";
    }
    
    /* ===== NAVIGATION PAGE ==== */

    main>nav {
        grid-template-columns: 1fr 200px 140px repeat(2, 200px) 1fr;
        grid-template-rows: 200px;
    }
    
}