@charset "UTF-8";

body {
    display: grid;
    grid-gap: 0.5em;
    grid-template-columns: 1fr 960px 1fr;
    grid-template-rows: 370px 30px 300px repeat(4, auto) 60px;
    /* police par defaut */
    font-family: "Roboto", serif;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
}
h1, h2, h3, p {
    padding: 0px;
    margin: 0px;
	
}


body>header, nav, section, footer {
    grid-column: 2;
}



/* ASPECT DES LIENS */
a {
    text-decoration: none;
    color: rgba(56,149,248,1.00);
    font-size: 1.1em;
}
a:hover {
    color: rgba(29,77,184,1.00);
}

/* ===== HEADER BANDEAU EN-TETE ===== */

body>header {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    background-color: lavender;

    font-family: "Chango", serif;
    font-weight: 300;
    font-style: normal;
}
body>header h1 {
    font-size: 3em;
}
body>header h2 {
    font-size: 1.5em;
    margin-top: -5px;
    flex-grow: 1;
}
body>header div {
    width: 200px;
    height: 200px;
    background-image: url("indexAVATARbis.png");
    background-size: cover;
    margin-bottom: 10px;
    order: -1;
}


body nav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: white;
    position: sticky;
    top: 0;
	
}

body section {
    padding: 1em 2em 2em 2em;
}

body section article {
    
}
body section article header {
    padding: 1em;    
}
body section article header h1 {
    font-size: 1.4em;
    margin-bottom: 0.4em;
}
body section article header h2 {
    font-size: 1em;


}
body section article header p {
    font-size: 0.95em;
}
body section article div:hover {
    transition: all ease 300ms;
}
body section article div:hover {
    transform: scale(1.4);
}

body section div {
    background-size: cover;
    background-position: center center;
}

body section header {
    margin-bottom: 1.2em;
}
body section header h1 {
    font-weight: 500;
    font-size: 1em;
}
body section header h2 {
    font-weight: 700;
    font-size: 1.8em;
}
body section header h3 {
    font-weight: 300;
    font-size: 1.1em;
}

/* ===== PRÉSENTATION ===== */

section:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background-color:white;
    text-align:left;
    text-align-last: center; /* Centre la dernière ligne du texte */
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
section:nth-of-type(1) h1 span {
    display: flex;
    font-size: 0.8em;
    font-weight: normal;
}
section:nth-of-type(1) p {
    font-size: 1.2em;
    margin-top: 3em;
    width: 50%;
	
}

/* ===== SHOWREEL ===== */

section:nth-of-type(2) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 120px 1fr;
    grid-template-areas: 
        "titre titre "
        "video video";
    background-color: white;
}
section:nth-of-type(2) header {
    grid-area: titre;
}
section:nth-of-type(2) header h2 {
    margin-bottom: 0.2em;    
}
section:nth-of-type(2) div {
    grid-area: video;
}
section:nth-of-type(2) div video {
    width: 100%;
	padding-top: 40px;
	padding-bottom: 60px;
}

/* ===== GRAPHISME ===== */

section:nth-of-type(3) {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 120px 1fr;
    grid-template-areas: 
        "titre titre"
        "graph1 graph2";
    background-color: white;  
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: justify;
}

section:nth-of-type(3) header {
    grid-area: titre;
}
section:nth-of-type(3) article {
    display: grid;
    grid-gap: 5px;
}
section:nth-of-type(3) article h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

}
section:nth-of-type(3) article div {
    background-color: lavender;
}
section:nth-of-type(3) article:nth-of-type(1) {
    grid-area: graph1;
    grid-template-columns: repeat(4, 1fr);
	text-align: justify;
    grid-template-rows: 210px 180px 140px 120px 140px 130px;
    grid-template-areas:		
        "titre titre titre titre"
        "visu1 visu1 visu2 visu2"
        "visu1 visu1 visu3 visu3"
        "visu5 visu5 visu5 visu5"
        "visu7 visu10 visu4 visu8"
        "visu7 visu9 visu9 visu8";
	background-color: lavender;
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(1){    
    grid-area: visu1;
	background-image: url("01-VAINCOURT/VAINCOURTcouverture.png");
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(2){    
    grid-area: visu2;
    background-image: url("01-VAINCOURT/VAINCOURTatelier.jpg");
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(3){    
    grid-area: visu3;
    background-image: url("01-VAINCOURT/VAINCOURTrecherche.png");
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(4){    
    grid-area: visu4;
    background-image: url("01-VAINCOURT/VAINCOURTcroquis.png");
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(5){    
    grid-area: visu5;
    background-image: url("01-VAINCOURT/VAINCOURTstory.png");
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(6){    
    grid-area: visu6;
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(7){    
    grid-area: visu7;
    background-image: url("01-VAINCOURT/VAINCOURTmannequin.png");
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(8){    
    grid-area: visu8;
    background-image: url("01-VAINCOURT/VAINCOURTportrait.jpg");
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(9){    
    grid-area: visu9;
    background-image: url("01-VAINCOURT/VAINCOURT3D.png");
}
section:nth-of-type(3) article:nth-of-type(1) div:nth-of-type(10){    
    grid-area: visu10;
    background-image: url("01-VAINCOURT/VAINCOURTcards.png");
}

section:nth-of-type(3) article:nth-of-type(2) {
    grid-area: graph2;    
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 250px 300px 60px 180px 175px;
    grid-template-areas:	
        "titre titre titre titre"
        "visu1 visu1 visu1 visu1"        
        "visu3 visu3 visu3 visu3"
        "visu5 visu5 visu5 visu2"
        "visu4 visu4 visu6 visu6";
	background-color: lavender;
}
section:nth-of-type(3) article:nth-of-type(2) div:nth-of-type(1){    
    grid-area: visu1;
    background-image: url("02-LAENAM/LAENAM09.png");
}
section:nth-of-type(3) article:nth-of-type(2) div:nth-of-type(2){    
    grid-area: visu2;
    background-image: url("02-LAENAM/LAENAM03b.png");
}
section:nth-of-type(3) article:nth-of-type(2) div:nth-of-type(3){    
    grid-area: visu3;
    background-image: url("02-LAENAM/LAENAM06b.png");
}
section:nth-of-type(3) article:nth-of-type(2) div:nth-of-type(4){    
    grid-area: visu4;
    background-image: url("02-LAENAM/LAENAM03a.png");
}
section:nth-of-type(3) article:nth-of-type(2) div:nth-of-type(5){    
    grid-area: visu5;
    background-image: url("02-LAENAM/LAENAM04.png");
}
section:nth-of-type(3) article:nth-of-type(2) div:nth-of-type(6){    
    grid-area: visu6;
    background-image: url("02-LAENAM/LAENAM07.png");
}

/* ===== ILLUSTRATION KAYA ===== */

section:nth-of-type(4) {
    /*background-color: rgba(0,114,184,1.00);*/
}
section:nth-of-type(4) article {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 390px 464px 290px 360px;
    grid-template-areas: 
        "visu1 visu1 visu2 visu2 visu2 visu2"
        "visu3 visu3 visu3 visu3 visu3 visu3"
        "visu4 visu5 visu5 visu5 visu6 visu6"
        "visu7 visu7 visu7 visu7 visu7 visu7";
}
section:nth-of-type(4) article div {
    
}
section:nth-of-type(4) article div:nth-of-type(1){    
    grid-area: visu1;
    background-image: url("03-LIVREkaya/KAYAaffiche.jpg");
}
section:nth-of-type(4) article div:nth-of-type(2){    
    grid-area: visu2;
    background-image: url("03-LIVREkaya/KAYAmockup.png");
}
section:nth-of-type(4) article div:nth-of-type(3){    
    grid-area: visu3;
}
section:nth-of-type(4) article div:nth-of-type(3):hover {    
    transform: scale(1);
}
section:nth-of-type(4) article div:nth-of-type(3) video{    
    width: 100%;
}
section:nth-of-type(4) article div:nth-of-type(4){    
    grid-area: visu4;
    background-image: url("03-LIVREkaya/KAYAfleur.jpg");
    background-position: 0px top;
}
section:nth-of-type(4) article div:nth-of-type(5){    
    grid-area: visu5;
    background-image: url("03-LIVREkaya/KAYAcharadesign-recherche.jpg");
}
section:nth-of-type(4) article div:nth-of-type(6){    
    grid-area: visu6;
    background-image: url("03-LIVREkaya/KAYAcharadesign-colora.jpg")
}
section:nth-of-type(4) article div:nth-of-type(7){    
    grid-area: visu7;
    background-image: url("03-LIVREkaya/KAYAaurore.jpg");
}

/* ===== PHOTOS ===== */

section:nth-of-type(5) {
    background-color: white;
}

section:nth-of-type(5) article {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 280px);
    grid-template-areas: 
        "visu1 visu1 visu2 visu2"
        "visu3 visu4 visu4 visu5"
	    "visu6 visu6 visu7 visu7";
    background-color: black;
    padding: 10px;
}
section:nth-of-type(5) article div:nth-of-type(1){    
    grid-area: visu1;
	background-image: url("04-PHOTOargentique/Montreal24c.jpg");
}
section:nth-of-type(5) article div:nth-of-type(2){    
    grid-area: visu2;
	background-image:  url("04-PHOTOargentique/Montreal24b.jpg");
}
section:nth-of-type(5) article div:nth-of-type(3){    
    grid-area: visu3;
	background-image:  url("04-PHOTOargentique/Quiberon24c.jpg");
    background-position: -75px bottom;
    background-size: 260%;
}
section:nth-of-type(5) article div:nth-of-type(4){    
    grid-area: visu4;
	background-image:  url("04-PHOTOargentique/Duperre20.jpg");
}
section:nth-of-type(5) article div:nth-of-type(5){    
    grid-area: visu5;
	background-image:  url("04-PHOTOargentique/Prague24a.jpg");
    background-position: -230px bottom;
    background-size: 260%;
}
section:nth-of-type(5) article div:nth-of-type(6){    
    grid-area: visu6;
	background-image:  url("04-PHOTOargentique/Paris23.jpg");	
}
section:nth-of-type(5) article div:nth-of-type(7){    
    grid-area: visu7;
	background-image:  url("04-PHOTOargentique/Florence22a.jpg");	
}


footer {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	background-color: lavender;
}

/* ====================== */
/* ===== RESPONSIVE ===== */
/* ====================== */

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

@media screen and (min-width: 320px){
    
    body {
        grid-template-columns: 1fr 300px 1fr;
        grid-template-rows: 350px 40px 320px repeat(4, auto) 80px;
        font-size: 14px;
		text-align: left;
    }
    body nav {
        font-size: 0.8em;
        padding: 0 8px;
    }
    section:nth-of-type(1) p {
        width: 100%;
    }        
    
    /* ===== SHOWREEL ===== */

    section:nth-of-type(2) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: 
            "titre"
            "video";
        background-color: white;
    }
    
    section:nth-of-type(2) header h2 {
        margin-bottom: 0.1em;    
    }
    section:nth-of-type(2) div video {
        width: 100%;
        padding: 10px 0;
    }
    
    /* ===== GRAPHISME ===== */

    section:nth-of-type(3) {
        grid-gap: 1em;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: 
            "titre"
            "graph1"
            "graph2"; 
        padding: 20px 0;
        text-align: left;
    }    

    section:nth-of-type(3) article:nth-of-type(1) {
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
        grid-template-rows: 220px 390px 160px 140px 380px 180px;
        grid-template-areas:		
            "titre titre"
            "visu1 visu1"
            "visu2 visu3"
            "visu5 visu5"
            "visu7 visu10"
            "visu4 visu8"
            "visu9 visu8";
    }

    section:nth-of-type(3) article:nth-of-type(2) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 270px 280px 80px 180px 175px;
        grid-template-areas:	
            "titre titre"
            "visu1 visu1"        
            "visu3 visu3"
            "visu5 visu2"
            "visu4 visu6";
    }    

    /* ===== ILLUSTRATION KAYA ===== */

    section:nth-of-type(4) {
        text-align: left;
    }
    section:nth-of-type(4) article {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 390px 240px 115px 110px 220px 120px;
        grid-template-areas: 
            "visu1 visu1"
            "visu2 visu2"
            "visu3 visu3"
            "visu4 visu5"
            "visu6 visu6"
            "visu7 visu7";
    }

    /* ===== PHOTOS ===== */
    
    
    section:nth-of-type(5) {
        text-align: left;
    }

    section:nth-of-type(5) article {
        grid-template-columns: 1fr;
        grid-template-rows: 140px 160px 220px 210px 310px 220px 260px;
        grid-template-areas: 
            "visu1"
            "visu2"
            "visu3"
            "visu4"
            "visu5"
            "visu6"
            "visu7";
        padding: 10px;
    }
    
}

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

@media screen and (min-width: 1024px){
    
    body {
        grid-template-columns: 1fr 960px 1fr;
        grid-template-rows: 340px 30px 250px 664px repeat(3, auto) 80px;
        font-size: 16px;
    }
    body nav {
        font-size: 0.99em;
        padding: 0 240px;
		margin-top: auto;
		padding-top: 20px;
    }
    
    section:nth-of-type(1) p {       
		text-align:justify;		
    }    
    
    /* ===== SHOWREEL ===== */

    section:nth-of-type(2) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 120px 1fr;
        grid-template-areas: 
            "titre titre "
            "video video";
        background-color: white;
    }
    
    section:nth-of-type(2) header h2 {
        margin-bottom: 0.2em;    
    }
    section:nth-of-type(2) div video {
        width: 100%;
        padding-top: 40px;
        padding-bottom: 60px;
    }
    
    /* ===== GRAPHISME ===== */

    section:nth-of-type(3) {
        grid-gap: 1em;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 120px 1fr;
        grid-template-areas: 
            "titre titre"
            "graph1 graph2"; 
        padding-top: 40px;
        padding-bottom: 40px;
        text-align: justify;
    }    

    section:nth-of-type(3) article:nth-of-type(1) {
        grid-template-columns: repeat(4, 1fr);
        text-align: justify;
        grid-template-rows: 210px 180px 140px 120px 140px 130px;
        grid-template-areas:		
            "titre titre titre titre"
            "visu1 visu1 visu2 visu2"
            "visu1 visu1 visu3 visu3"
            "visu5 visu5 visu5 visu5"
            "visu7 visu10 visu4 visu8"
            "visu7 visu9 visu9 visu8";
    }

    section:nth-of-type(3) article:nth-of-type(2) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 250px 300px 60px 180px 175px;
        grid-template-areas:	
            "titre titre titre titre"
            "visu1 visu1 visu1 visu1"        
            "visu3 visu3 visu3 visu3"
            "visu5 visu5 visu5 visu2"
            "visu4 visu4 visu6 visu6";
    }

    /* ===== ILLUSTRATION KAYA ===== */

    section:nth-of-type(4) {
        text-align: left;
    }
    section:nth-of-type(4) article {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 390px 464px 290px 360px;
        grid-template-areas: 
            "visu1 visu1 visu2 visu2 visu2 visu2"
            "visu3 visu3 visu3 visu3 visu3 visu3"
            "visu4 visu5 visu5 visu5 visu6 visu6"
            "visu7 visu7 visu7 visu7 visu7 visu7";
    }

    /* ===== PHOTOS ===== */
    
    section:nth-of-type(5) {
        text-align: left;
    }
    
    section:nth-of-type(5) article {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 280px);
        grid-template-areas: 
            "visu1 visu1 visu2 visu2"
            "visu3 visu4 visu4 visu5"
            "visu6 visu6 visu7 visu7";
        padding: 10px;
    }
}