@charset "UTF-8";

/* ===============  INITIALISATION  ================== */

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

/* =======  VARIABLES ======== */

 :root {
      --SIZEfont: 24px;
      --colorSECTION1: rgba(122,122,122,1.00);
}

body {
    display: grid;
    font-size: var(--SIZEfont);
    grid-gap: 33px;
    grid-template-columns: 1fr repeat(4, 250px) 1fr;
    grid-template-rows: 380px auto auto auto auto 170px;
    grid-template-areas:              
            "z cour head head contact w"
            "z alter alter alter alter w"
            "z aid aid aid aid w"
            "z refl refl refl refl w"
            "z inspi inspi inspi inspi w"
            "z foot foot foot foot w";
    padding: 0;
    font-family: "GaleyRounded-Variable";
    /*font-variant-ligatures: normal;*/
    /*font-variant-numeric: ordinal; */
    /*font-variant-numeric: slashed-zero; */
    /*font-variant-numeric: oldstyle-nums; */
    /*font-variant-numeric: proportional-nums; */
    /*font-variant-numeric: tabular-nums; */
    /*font-variant-numeric: diagonal-fractions; */
    /*font-variant-numeric: stacked-fractions;  */
    /*font-variant-numeric: oldstyle-nums stacked-fractions; */
}
body span {
     display: block;
}

/* =======  EN-TETE :::: BODY HEADER  ======== */
body>header {
     grid-area: head;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     text-align: center;
     padding: 10px;
     background-color: rgba(143,183,188,1.00);
 }
body>header h1 {
     order: 3;
     font-family: "TrueNorthRoughBlack-Regular";
     font-size: 2.6em;
     line-height: 0.9em;
     color: rgba(4,75,87,1.00);
}
body>header h2 {
     order: 4;
     font-family: "TrueNorth-Regular";
     font-size: 0.65em;
     flex-grow: 1;
     color: rgba(4,75,87,0.80);
}
body>header h3 {
     order: 5;
     font-size: 0.7em;
     color: rgba(4,75,87,0.60);
}
body>header h4 {
     order: 1;
     font-family: "Hawkes-LightNarrow";
     margin-bottom: 1em;
     color: rgba(11,55,89,0.50);
}
body>header>div {
     order: 2;
     width: 60px;
     height: 50px;
     background-image: url("VISUELS/MOODlogo.svg");
     background-size: cover;
     opacity: 0.3;
     margin-bottom: 8px;
}

/* =======  BOUTONS NAVIGATION :::: BODY A NAV  ======== */
body>a {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
}
body>a nav {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     height: 250px;
     background-color: rgba(0,115,125,1.00);
}
body>a nav span {
     display: block;
}
body>a:nth-of-type(1) {
     grid-area: cour;
}
body>a:nth-of-type(2) {
     grid-area: contact;
}

/* =======  PARTIES CONTENUS :::: BODY SECTIONS  ======== */

body>section {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 360px 260px 260px;
    grid-auto-rows: 260px;
}
body>section>header {
     grid-column: 1/4;
     grid-row: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 30px;
     text-align: center;
     color: rgba(255,255,255,1.00);
}
body>section>header h1 {
     font-family: "TrueNorthRoughBlack-Regular";
     font-weight: normal;
     margin-bottom: 10px;
     opacity: 0.9;
}
body>section>header h2 {
     width: 75%;
     font-size: 1.2em;
     font-weight: normal;
     font-family: "Hawkes-MediumNarrow";
     flex-grow: 1;
     opacity: 0.75;
}
body>section>header h3 {
    width: 70%;
    font-weight: 125;
    font-size: 0.8em;
    opacity: 0.6;
    margin-bottom: 1.1em;
}
body>section>header nav {
    transition: all ease 400ms;
}
body>section>header nav a {
    font-size: 0.7em;
    border-radius: 1em;
    padding: 10px 15px;
    color: rgba(255,255,255,0.60);
    background-color: rgba(64,98,106,1.00);
}
body>section>header nav:hover {
    transform: scale(1.1);
}
body>section>header nav a:hover {
    color: rgba(255,255,255,1.00);
    background-color: rgba(38,68,76,1.00);
}

body>section>a {
     padding: 10px;
     border-bottom: solid 10px rgba(1,1,1,1.00);
     border-top: solid 10px rgba(1,1,1,1.00);
     background-color: rgba(211,171,14,1.00);
     background-size: 45%;
     background-repeat: no-repeat;
}
body>section a article {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr;
     padding: 10px;
}
body>section a article>header {
     display: grid;
     grid-template-columns: 1fr 20px auto 20px 1fr;
     grid-template-rows: 20px 15px auto 58px auto;
}
body>section a article>header h1 {
     grid-column: 3;
     grid-row: 1/3;
     order: 10;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 14px;
     font-family: "GaleyRounded-Variable";
     font-size: 0.75em;
     font-weight: 300;
     background-color: rgba(0,0,0,1.00);
}
body>section a article>header h2 {
     grid-column: 2/5;
     grid-row: 2/4;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: rgba(0,0,0,1.00);
     font-weight: 500;     
     font-family: "GaleyRounded-Variable";
     font-size: 0.7em;
     background-color: rgba(255,255,255,1.00);
     padding: 20px 6px 5px 6px;
}
body>section a article>header h3 {
     grid-column: 1/6;
     grid-row: 5;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
     font-family: "LocalBreweryFour-Regular";
     font-size: 0.9em;
     font-weight: normal;
}

/* =======  PARTIE ALTERNATIVE :::: BODY SECTION NTH1  ======== */
body>section:nth-of-type(1) {
     grid-area: alter;
}
body>section:nth-of-type(1)>header {
     background-color: rgba(67,122,134,1.00);
}
body>section:nth-of-type(1)>a {
     background-position: 15px 0px;
}
body>section:nth-of-type(1)>a:nth-of-type(1) {
     background-color: rgba(51,168,23,1.00);
     background-image: url("VISUELS/MOODaltWEB.png");
}
body>section:nth-of-type(1)>a:nth-of-type(2) {
     background-color: rgba(204,197,0,1.00);
     background-image: url("VISUELS/MOODaltDESIGN.png");
}
body>section:nth-of-type(1)>a:nth-of-type(3) {
     background-color: rgba(193,37,137,1.00);
     background-image: url("VISUELS/MOODaltANIM.png");
}
body>section:nth-of-type(1)>a:nth-of-type(4) {
     background-color: rgba(0,188,190,1.00);
     background-image: url("VISUELS/MOODaltREDIGER.png");
}
body>section:nth-of-type(1) a article header {
    grid-column: 2;
    grid-row: 1;
}


/* =======  PARTIE TUTORIAUX :::: BODY SECTION NTH2  ======== */
body>section:nth-of-type(2) {
     grid-area: aid;
}
body>section:nth-of-type(2)>header {
     background-color: rgba(92,119,127,1.00);
}
body>section:nth-of-type(2)>a {
     background-position: 295px 0px;
}
body>section:nth-of-type(2)>a:nth-of-type(1) {
     background-color: rgba(80,190,249,1.00);
     background-image: url("VISUELS/MOODbaleine.png");
}
body>section:nth-of-type(2)>a:nth-of-type(2) {
     background-color: rgba(130,193,48,1.00);
     background-image: url("VISUELS/MOODsurf.png");
}
body>section:nth-of-type(2)>a:nth-of-type(3) {
    background-color: rgba(213,21,212,1.00);
    background-image: url("VISUELS/MOODbuffle.png");
    border-bottom: solid 10px rgba(238,16,20,1.00);
}
body>section:nth-of-type(2)>a:nth-of-type(4) {
     background-color: rgba(115,115,116,1.00);
     background-image: url("VISUELS/MOODserviette.png");
    border-bottom: solid 10px rgba(238,16,20,1.00);
}
body>section:nth-of-type(2)>a:nth-of-type(5) {
    background-color: rgba(35,86,193,1.00);
    background-image: url("VISUELS/MOODcarpe.png");
}
body>section:nth-of-type(2)>a:nth-of-type(6) {
    background-color: rgba(227,134,13,1.00);
    background-image: url("VISUELS/MOODchicago.png");
}
body>section:nth-of-type(2)>a:nth-of-type(7) {
    background-color: rgba(112,16,61,1.00);
    background-image: url("VISUELS/MOODbocal.png");
}
body>section:nth-of-type(2)>a:nth-of-type(8) {
    background-color: rgba(97,89,80,1.00);
    background-image: url("VISUELS/MOODchemin.png");
}
body>section:nth-of-type(2)>a:nth-of-type(9) {
    background-color: rgba(124,142,160,1.00);
    background-image: url("VISUELS/MOODinter.png");
    border-bottom: solid 10px rgba(238,16,20,1.00);
}
body>section:nth-of-type(2)>a:nth-of-type(10) {
    background-color: rgba(57,39,37,1.00);
    background-image: url("VISUELS/MOODfeu.png");
    border-bottom: solid 10px rgba(45,169,56,1.00);
}
body>section:nth-of-type(2)>a:nth-of-type(11) {
    background-color: rgba(56,31,61,1.00);
    background-image: url("VISUELS/SOFTaffinityMOOD.png");
    border-bottom: solid 10px rgba(0,174,30,1.00);
}
body>section:nth-of-type(2)>a:nth-of-type(12) {
    background-color: rgba(8,81,110,1.00);
    background-image: url("VISUELS/SOFThypeMOOD.png");
}

body>section:nth-of-type(2) a article header {
    grid-column: 1;
    grid-row: 1;
}
body>section:nth-of-type(2) a article div {
    grid-column: 2;
    grid-row: 1;
}

/* =======  PARTIE PRINCIPES :::: BODY SECTION NTH3  ======== */
body>section:nth-of-type(3) {
     grid-area: refl;    
     grid-template-rows: 360px 400px;
}
body>section:nth-of-type(3)>header {
     background-color: rgba(66,95,103,1.00);
}
body>section:nth-of-type(3)>a:nth-of-type(1) {
     background-color: rgba(15,160,113,1.00);
     background-image: url("VISUELS/PRINCIPnain.png");
}
body>section:nth-of-type(3)>a:nth-of-type(2) {
     background-color: rgba(237,102,25,1.00);
     background-image: url("VISUELS/PRINCIPprof.png");
}

/* =======  PARTIE INSPIRATION :::: BODY SECTION NTH4  ======== */
body>section:nth-of-type(4) {
    grid-template-rows: 320px 260px 260px;
    grid-template-areas:
        "head head head head head"
        "aa tt cc dd kk"
        "ff gg hh ii jj"
        "pp ll mm nn oo"
        "ee ww rr fff bb"
        "uu ss aaa xx jjj"
        "yy bbb ddd ccc qq"
        "eee vv hhh ggg iii"
        "zz kkk lll mmm nnn"
        "cult1 cult2 cult3 cult4"
        "cult5 cult6 cult7 cult8";
    grid-area: inspi;
    grid-gap: 10px;    
}
body>section:nth-of-type(4)>header {
     background-color: rgba(61,81,87,1.00);
}
body>section:nth-of-type(4) article {
    display: grid;
    grid-template-columns: 1fr 140px 1fr;
    grid-template-rows: 2fr 1fr;
    padding: 10px;
    border-bottom: solid 10px rgba(1,1,1,1.00);
    border-top: solid 10px rgba(1,1,1,1.00);
    background-color: rgba(211,171,14,1.00);
    background-size: cover;
    background-position: center bottom;
}
body>section:nth-of-type(4) article header {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 20px auto 20px 1fr;
    grid-template-rows: 20px 15px auto;
}
body>section:nth-of-type(4) article>header h1 {
    grid-column: 3;
    grid-row: 1/3;
    order: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 14px;
    font-family: "GaleyRounded-Variable";
    font-size: 0.75em;
    font-weight: 300;
    color: white;
    background-color: rgba(0,0,0,1.00);
}
body>section:nth-of-type(4) article>header h2 {
    grid-column: 2/5;
    grid-row: 2/4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgba(0,0,0,1.00);
    font-weight: 500;     
    font-family: "GaleyRounded-Variable";
    font-size: 0.7em;
    background-color: rgba(255,255,255,0.85);
    padding: 20px 6px 5px 6px;
}

/*  === VISUELS :::  INSPIRATION === */

body>section:nth-of-type(4) article:nth-of-type(1)  {
    background-image: url("VISUELS/cultRichardEVEDON.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(2)  {
    background-image: url("VISUELS/cultMiltonGLASER.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(3)  {
    background-image: url("VISUELS/cultAlphonseMUCHA.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(4)  {
    background-image: url("VISUELS/cultTCHOUANGtseu.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(5)  {
    background-image: url("VISUELS/cultIrvingPENN.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(6)  {
    background-image: url("VISUELS/cultFCGUNDLACH.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(7)  {
    background-image: url("VISUELS/cultReneGRUAU.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(8)  {
    background-image: url("VISUELS/cultMOEBIUS.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(9)  {
    background-image: url("VISUELS/cultJackKIRBY.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(10)  {
    background-image: url("VISUELS/cultBillGOLD.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(11)  {
    background-image: url("VISUELS/cultGeorgeHOYNINGE.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(12)  {
    background-image: url("VISUELS/cultJohnBUSCEMA.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(13)  {
    background-image: url("VISUELS/cultAdrianFRUTIGER.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(14)  {
    background-image: url("VISUELS/cultRobertMASSIN.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(15)  {
    background-image: url("VISUELS/cultKUBRICK.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(16)  {
    background-image: url("VISUELS/cultBOORMAN.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(17)  {
    background-image: url("VISUELS/cultPaulBACON.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(18)  {
    background-image: url("VISUELS/cultMONDINO.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(19)  {
    background-image: url("VISUELS/cultTEZUKA.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(20)  {
    background-image: url("VISUELS/cultJPGOUDE.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(21)  {
    background-image: url("VISUELS/cultGustaveDORE.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(22)  {
    background-image: url("VISUELS/cultHerbRITTS.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(23)  {
    background-image: url("VISUELS/cultBOBPEAK.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(24)  {
    background-image: url("VISUELS/cultMIYAZAKI.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(25)  {
    background-image: url("VISUELS/cultSTARWARS.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(26)  {
    background-image: url("VISUELS/cultOGILVY.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(27)  {
    background-image: url("VISUELS/cultPERRIAND.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(28)  {
    background-image: url("VISUELS/cultJeanGIRAUD.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(29)  {
    background-image: url("VISUELS/cultJohnROMITAsr.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(30)  {
    background-image: url("VISUELS/cultGOLDORAK.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(31)  {
    background-image: url("VISUELS/cultSaulBASS.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(32)  {
    background-image: url("VISUELS/cultBULLIT.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(33)  {
    background-image: url("VISUELS/cultPIERREGILLES.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(34)  {
    background-image: url("VISUELS/cultBAUHAUS.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(35)  {
    background-image: url("VISUELS/cultTerryONEIL.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(36)  {
    background-image: url("VISUELS/cultHelmutNEWTON.jpg");
    }
body>section:nth-of-type(4) article:nth-of-type(37)  {
    background-image: url("VISUELS/cultLittleNEMO.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(38)  {
    background-image: url("VISUELS/cultBINDER.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(39)  {
    background-image: url("VISUELS/cultBLADE.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(40)  {
    background-image: url("VISUELS/cultBLADEcaca.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(41)  {
    background-image: url("VISUELS/cultDUNE1.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(42)  {
    background-image: url("VISUELS/cultDUNE2.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(43)  {
    background-image: url("VISUELS/cultDUNE3.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(44)  {
    background-image: url("VISUELS/cultFONDATION1.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(45)  {
    background-image: url("VISUELS/cultFONDATION2.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(46)  {
    background-image: url("VISUELS/cultORANGINA1.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(47)  {
    background-image: url("VISUELS/cultORANGINA2.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(48)  {
    background-image: url("VISUELS/cultKISSCOOL1.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(49)  {
    background-image: url("VISUELS/cultKISSCOOL2.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(50)  {
    background-image: url("VISUELS/cultKISSCOOL3.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(51)  {
    background-image: url("VISUELS/cultPUB.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(52)  {
    background-image: url("VISUELS/cultBATMAN.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(53)  {
    background-image: url("VISUELS/cultVALSE.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(54)  {
    background-image: url("VISUELS/cultJOKERcaca.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(55)  {
    background-image: url("VISUELS/cultJOKER.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(56)  {
    background-image: url("VISUELS/cultBATMANcaca.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(57)  {
    background-image: url("VISUELS/cultSANCTUARY.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(58)  {
    background-image: url("VISUELS/cultBlueEYES.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(59)  {
    background-image: url("VISUELS/cultFRENCH.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(60)  {
    background-image: url("VISUELS/cultFANTASTIQUES.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(61)  {
    background-image: url("VISUELS/cultARCANE1.jpg");
}
body>section:nth-of-type(4) article:nth-of-type(62)  {
    background-image: url("VISUELS/cultARCANE2.jpg");
}

/* =======  PARTIE PIED DE PAGE :::: BODY FOOTER  ======== */
body>footer {
     grid-area: foot;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-family: "GaleyRounded-Variable";
     font-size: 0.6em;
     font-weight: 200;
     color: rgba(23,23,23,0.65);
     padding-bottom: 1.5em;
     background-color: white;
     text-align: center;
}
footer a span {
     display: inline-block;
}
footer>a> span {
     background-image: url("VISUELS/LOGOsite.svg");
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     margin-bottom: 5px;
     height: 64px;
     width: 90px;
}


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

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

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

     :root {
          --SIZEfont: 18px;
    }
    
    body {
        grid-gap: 10px;
        grid-template-columns: 1fr 280px 1fr;
        grid-template-rows: 380px auto auto auto auto 180px 180px 170px;
        grid-template-areas: 
            "z head w" 
            "z alter w" 
            "z aid w"
            "z refl w" 
            "z inspi w"
            "z cour w" 
            "z contact w" 
            "z foot w";
        padding: 10px;
    }

    /* =======  BOUTONS NAVIGATION :::: BODY A NAV  ======== */
    
    body>a nav {
         height: 100%;
    }

    /* =======  PARTIES CONTENUS :::: BODY SECTIONS  ======== */
       
    body>section {
         grid-gap: 10px;
         grid-template-columns: 1fr;
         grid-template-rows: 430px repeat(4, 420px);
         grid-auto-rows: 420px;
    }
    
    body>section>header {
         grid-column: 1;
         padding: 15px;
    }	
    body>section>header h2 {
         width: 92%;
         font-size: 1em;
    }    
    body>section>header h3 {
         width: 80%;
         font-size: 0.7em;
         opacity: 0.8;
    }
	
    body>section a {
        padding: 10px;
        background-size: 75%;
    }    
	
    body>section a article {
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 1fr;
         padding: 10px;
    }
    
    body>section a article>header {
         grid-template-columns: 1fr 20px auto 20px 1fr;
         grid-template-rows: 20px 15px auto 28px auto;
    }   

    /* =======  PARTIE ALTERNATIVE :::: BODY SECTION NTH1  ======== */
    
    body>section:nth-of-type(1)>a {
        background-position: bottom center;
    }
    
    body>section:nth-of-type(1) a article header {
        grid-column: 1;
        grid-row: 1;
    }
    
    /* =======  PARTIE TUTORIAUX :::: BODY SECTION NTH2  ======== */   
    
    body>section:nth-of-type(2)>a {
        background-position: bottom center;
    }
    
    body>section:nth-of-type(2) a article header {
        grid-column: 1;
        grid-row: 1;
    }
    body>section:nth-of-type(2) a article div {
        grid-column: 1;
    }
    body>section:nth-of-type(2)>a:nth-of-type(6) {
    background-position: center bottom;
}
    
    /* =======  PARTIE PRINCIPES :::: BODY SECTION NTH3  ======== */   
    
    body>section:nth-of-type(3) {
         grid-gap: 10px;
         grid-template-rows: 340px 440px;
         grid-auto-rows: 440px;
    }
    
    body>section:nth-of-type(3)>a {
        background-position: bottom center;
    }
    
    body>section:nth-of-type(3) a article header {
        grid-column: 1;
        grid-row: 1;
    }
    body>section:nth-of-type(3) a article div {
        grid-column: 1;
    }
    
    /* =======  PARTIE INSPIRATION :::: BODY SECTION NTH4  ======== */   
    
    body>section:nth-of-type(4) {
        grid-template-rows: 320px 320px 320px;
        grid-auto-rows: 320px;
        grid-template-columns: 1fr;
    }
    body>section:nth-of-type(4) header {
        grid-column: 1;
    }
	
}
/* =================================================== LARGEUR 640 PIXELS ======= */

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

     :root {
          --SIZEfont: 20px;
    }
    
	body {
        grid-gap: 20px;
        grid-template-columns: 1fr repeat(2, 270px) 1fr;
        grid-template-rows: 380px auto auto auto auto 180px 170px;
        grid-template-areas: 
            "z head head w" 
            "z alter alter w" 
            "z aid aid w"
            "z refl refl w" 
            "z inspi inspi w"            
            "z cour contact w" 
            "z foot foot w";
        padding: 20px;
    }

    /* =======  BOUTONS NAVIGATION :::: BODY A NAV  ======== */
    
    body>a nav {
         height: 100%;
    }

    /* =======  PARTIES CONTENUS :::: BODY SECTIONS  ======== */
           
    body>section:nth-of-type(1) {
         grid-gap: 10px;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 340px repeat(4, 240px);
    }
    
     body>section:nth-of-type(2) {
         grid-gap: 10px;
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: 340px 440px;
         grid-auto-rows: 440px;
    }
    
    body>section:nth-of-type(3) {
         grid-gap: 10px;
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: 340px 440px;
         grid-auto-rows: 440px;
    }
    
    body>section>header {
         grid-column: 1/3;
         padding: 20px;
    }	
    body>section>header h2 {
         width: 90%;
         font-size: 1em;
    }    
    body>section>header h3 {
         width: 75%;
         font-size: 0.75em;
         opacity: 0.74;
    }
	
    body>section a {
        padding: 10px;
        background-size: contain;
    }    
	
    body>section a article {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr;
         padding: 10px;
    }
    
    body>section a article>header {
         grid-template-columns: 1fr 20px auto 20px 1fr;
         grid-template-rows: 20px 15px auto 20px auto;
    }   

    /* =======  PARTIE ALTERNATIVE :::: BODY SECTION NTH1  ======== */
    
    body>section:nth-of-type(1)>a {
        grid-column: 1/3;
        background-position: 60px bottom;
    }
    
    body>section:nth-of-type(1) a article header {
        grid-column: 2;
        grid-row: 1;
    }
    
    /* =======  PARTIE TUTORIAUX :::: BODY SECTION NTH2  ======== */   
    
    body>section:nth-of-type(2)>a {        
        background-size: 82%;
        background-position: bottom center;
    }
    
    body>section:nth-of-type(2) a article header {
        grid-column: 1/3;
        grid-row: 1;
    }
    body>section:nth-of-type(2) a article div {
        grid-column: 1;
    } 
    
    /* =======  PARTIE PRINCIPES :::: BODY SECTION NTH3  ======== */   
    
    body>section:nth-of-type(3)>a {        
        background-size: 82%;
        background-position: bottom center;
    }
    
    body>section:nth-of-type(3) a article header {
        grid-column: 1/3;
        grid-row: 1;
    }
    body>section:nth-of-type(3) a article div {
        grid-column: 1;
    } 
    
    /* =======  PARTIE INSPIRATION :::: BODY SECTION NTH4  ======== */    
    body>section:nth-of-type(4) {
        grid-template-rows: 300px 330px 330px;
        grid-auto-rows: 330px;
        grid-template-columns: repeat(2, 1fr);
    }
    body>section:nth-of-type(4) header {
        grid-column: 1/3;
    }
    body>section:nth-of-type(4)>article {
        background-position: right bottom;
    }
	
}

/* =================================================== LARGEUR 1024 PIXELS ======= */

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

     :root {
          --SIZEfont: 22px;
    }
    
	body {
        grid-gap: 20px;
        grid-template-columns: 1fr repeat(4, 220px) 1fr;
        grid-template-rows: 360px auto auto auto auto 170px;
        grid-template-areas: 
            "z cour head head contact w" 
            "z alter alter alter alter w" 
            "z aid aid aid aid w"
            "z refl refl refl refl w"
            "z inspi inspi inspi inspi w"
            "z foot foot foot foot w";
        padding: 20px;
    }

    /* =======  BOUTONS NAVIGATION :::: BODY A NAV  ======== */
        
    body>a nav {
         height: 220px;
    }

    /* =======  PARTIES CONTENUS :::: BODY SECTIONS  ======== */
    
           
    body>section:nth-of-type(1) {
         grid-gap: 10px;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 320px repeat(2, 270px);
    }
    
     body>section:nth-of-type(2) {
         grid-gap: 10px;
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: 320px 270px;
         grid-auto-rows: 270px;
    }
    
    body>section:nth-of-type(3) {
         grid-gap: 10px;
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: 320px 270px;
         grid-auto-rows: 270px;
    }
    
    body>section>header {
         grid-column: 1/3;
         padding: 20px;
    }	
    body>section>header h2 {
         width: 75%;
         font-size: 1.1em;
    }    
    body>section>header h3 {
         width: 70%;
         font-size: 0.74em;
         opacity: 0.65;
    }
	
    body>section a {
        padding: 10px;
        background-size: 48%;
    }    
    body>section a:nth-of-type(odd) {
        grid-column: 1;
    }
    body>section a:nth-of-type(even) {
        grid-column: 2;
    }
	
    body>section a article {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr;
         padding: 10px;
    }
    
    body>section a article>header {
         grid-template-columns: 1fr 20px auto 20px 1fr;
         grid-template-rows: 20px 15px auto 40px auto;
    }
    
    /* =======  PARTIE ALTERNATIVE :::: BODY SECTION NTH1  ======== */
    
    body>section:nth-of-type(1)>a {
        background-position: left top;
    }
    
    body>section:nth-of-type(1) a article header {
        grid-column: 2;
        grid-row: 1;
    }
    
    /* =======  PARTIE TUTORIAUX :::: BODY SECTION NTH2  ======== */   
    
    body>section:nth-of-type(2)>a {        
        background-size: contain;
        background-position: bottom right;
    }
    
    body>section:nth-of-type(2) a article header {
        grid-column: 1;
        grid-row: 1;
    }
    body>section:nth-of-type(2) a article div {
        grid-column: 1;
    }
    body>section:nth-of-type(2)>a:nth-of-type(6) {
    background-position: right top;
}
    
    /* =======  PARTIE PRINCIPES :::: BODY SECTION NTH3  ======== */   
    
    body>section:nth-of-type(3)>a {        
        background-size: contain;
        background-position: bottom right;
    }
    
    body>section:nth-of-type(3) a article header {
        grid-column: 1;
        grid-row: 1;
    }
    body>section:nth-of-type(3) a article div {
        grid-column: 1;
    }
    
     /* =======  PARTIE INSPIRATION :::: BODY SECTION NTH4  ======== */
    
    body>section:nth-of-type(4) {
        grid-template-rows: 310px 280px 280px;
        grid-auto-rows: 280px;
        grid-template-columns: repeat(4, 1fr);
    }
    body>section:nth-of-type(4) header {
        grid-column: 1/5;
    }
    body>section:nth-of-type(4)>article {
        background-position: right bottom;
    }
	
}

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

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

     :root {
          --SIZEfont: 24px;
    }
    
	body {
        grid-gap: 33px;
        grid-template-columns: 1fr repeat(4, 250px) 1fr;
        grid-template-rows: 380px auto auto auto auto 170px;
        ggrid-template-areas:  
            "z cour head head contact w"
            "z alter alter alter alter w"
            "z aid aid aid aid w"
            "z refl refl refl refl w"
            "z inspi inspi inspi inspi w"
            "z foot foot foot foot w";
        padding: 0;
    }

    /* =======  BOUTONS NAVIGATION :::: BODY A NAV  ======== */
    
    body>a nav {
         height: 250px;
    }

    /* =======  PARTIES CONTENUS :::: BODY SECTIONS  ======== */
        
    body>section {
         grid-gap: 20px;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 360px 280px 280px;
    }
    
    body>section>header {
         grid-column: 1/3;
         padding: 30px;
    }	
    body>section>header h2 {
         width: 75%;
         font-size: 1.2em;
    }    
    body>section>header h3 {
         width: 70%;
         font-size: 0.8em;
         opacity: 0.6;
    }
    
    body>section a {
        padding: 10px;
        background-size: contain;
    }
    body>section a:nth-of-type(odd) {
        grid-column: 1;
    }
    body>section a:nth-of-type(even) {
        grid-column: 2;
    }
    body>section a article {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr;
         padding: 10px;
    }
    
    body>section a article>header {
        grid-template-columns: 1fr 20px auto 20px 1fr;
        grid-template-rows: 20px 15px auto 58px auto;
    }    

    /* =======  PARTIE ALTERNATIVE :::: BODY SECTION NTH1  ======== */
    
    body>section:nth-of-type(1)>a {
        background-position: 15px 0px;
    }
    
    body>section:nth-of-type(1) a article header {
        grid-column: 2;
        grid-row: 1;
    }
    
    /* =======  PARTIE TUTORIAUX :::: BODY SECTION NTH2  ======== */    
    
    body>section:nth-of-type(2)>a {
        background-position: right bottom;
    }
    
    body>section:nth-of-type(2) a article header {
        grid-column: 1;
        grid-row: 1;
    }
    body>section:nth-of-type(2) a article div {
        grid-column: 2;
        grid-row: 1;
    }    
    body>section:nth-of-type(2)>a:nth-of-type(6) {
        background-position: 270px top;
    }
    body>section:nth-of-type(2)>a:nth-of-type(9) {
        background-position: 280px top;
    }
    
    /* =======  PARTIE PRINCIPES :::: BODY SECTION NTH3  ======== */   
    body>section:nth-of-type(3)>a {
        background-position: right bottom;
    }
    
    body>section:nth-of-type(3) a article header {
        grid-column: 1;
        grid-row: 1;
    }
    body>section:nth-of-type(3) a article div {
        grid-column: 2;
        grid-row: 1;
    }
    
    /* =======  PARTIE INSPIRATION :::: BODY SECTION NTH4  ======== */    
    body>section:nth-of-type(4) {
        grid-template-rows: 310px 320px 320px;
        grid-auto-rows: 320px;
        grid-template-columns: repeat(4, 1fr);
    }
    body>section:nth-of-type(4) header {
        grid-column: 1/5;
    }
    body>section:nth-of-type(4)>article {
        background-position: right bottom;
    }
    
    
}