@charset "UTF-8";
/* CSS Document */


/******************************************************************
******************************************************************
NE PAS MODIFIER / CES LIGNES ENLEVENT LES PADDING ET MARGIN AJOUTÉS
AUTOMATIQUEMENT PAR LE FICHIER NORMALIZE.CSS
******************************************************************
******************************************************************/

/*retire les padding et margin */
aside, section, article, footer, header, div, p, h1, h2, h3, h4, h5, h6, ol, ul, li, figure { padding:0; margin:0; }

/******************************************************************
******************************************************************
CSS PRÉDÉFINIES
******************************************************************
******************************************************************/

/* les images ne seront jamais plus grandes que le contenant <figure> qui les contient */
img { max-width:100%; height: auto;}

/* ajoutez cette classe si il n'y a qu'une seule image */
/* dans le <figure> et qu'un espace fin apparait sous l'image */
/* par exemple <img class="no-border-down" src="..." */
img.no-border-down { display:block;} 

/* dans le cas où le float est requis */
div.pousse { clear:both; width:0; height:0; overflow:hidden;}

/* polices par défaut */
body { font-family: Helvetica, Arial, sans-serif; }

/* retire le gras par défaut des titres */
h1, h2, h3, h4, h5, h6 { font-weight: 400;}


/************************************************************************************************************************************
/************************************************************************************************************************************
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
PLACEZ LES DÉFINITIONS CSS DE VOS PAGES SOUS CETTE LIGNE
/************************************************************************************************************************************
************************************************************************************************************************************/





/*********** BODY *************/

body { 
	font-size:2vw;
	font-family:'work sans';/* ajuster au besoin */
	background-color: white;
	background-image: url("images/fondrose.jpg");
	background-size: cover; /*full écran*/
	background-attachment: fixed; /*mo scroll*/
} 
/***********MOTION *************/




body.motion{
	background-color: #393B84;
	background-image: url("images/fond fonce.jpg");
	background-size: cover; /*full écran*/
	background-attachment: fixed; /*mo scroll*/
	margin: 0vw 0 0 0;

}
body p {
	font-size: 1.25vw;
	font-weight: 100;
}

main video{ 
	width: 100%;
	
}

main h2{ 
	font-weight: 600;
	margin: 2vw 0 0 0;
	text-decoration: none;
}

h1.motion{ 
	color: #E76368;
}

main.motion p{
	margin: 0 0 4vw 0;
}

header figure.motion { 
	width:25%; /* ajuster au besoin */
	margin: 0vw 0 0 1.5vw;
	
}



/***********active *************/
.active a{ 
	color: #E76368;
	
}


div{
	text-decoration: none;


}


/***********projet1 *************/



main p.projet1{
	margin: 20vw;
}
main p.projet1{
	
	width: 2%;
	position: fixed;
	top: -4vw;
	left: 4vw;
}


/*********** HEADER *************/



header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	font-weight: 600;
}


header figure { 
	
    width:150%; /* ajuster au besoin */
	margin: 0vw 0 0 1.5vw;
} 
header nav { 
	
    width:20%; /* ajuster au besoin */
	margin: 0vw 0 0 6vw;
} 
header nav ul { 
  	list-style-type: none;

}
header nav ul li{ 
	font-size: 120%;
	margin: 2vw 0 0 0;
}
header nav ul a{ 
    color: #B3B3D0;
    text-decoration: none;
	transition: 0.3s;
}
header nav ul a:hover{ 
    color: #E76368;
    
}


/*********** MAIN *************/



main section{
	
	margin: 5vw 0 0 0;
	text-decoration: none;
}

main figure.bonjour{ 
	width: 40vw;
	margin: 5vw 0 0 30vw;
}

main h1{ 
 	font-weight: 600;
	color:  #E76368;
  	font-size: 400%;
  	line-height: 90%;
	margin: 15vw 0 0 29.25vw;
	
}

main article{ 
 	font-weight: 600;
	color:  #E76368;
  	font-size:50%;
 	margin: 1vw 30vw 4vw 30vw;
}
main article.projets{ 
 	width: 30vw;
}

main article p{ 
 	margin: 2vw 0 1vw 0vw;
	font-weight: 100;
	line-height: 300%;
	text-align: left;
}

main section figure{ 
	align-content: space-between;
	width: 400%;
}



/***********footer *************/


footer{ 

	color: #B3B3D0;
	margin: 8vw 0 0 0;
	padding: 3vw;
	text-align: end;
	bottom: 0;
	right: 2vw;
}
footer ul{ 
	
list-style-type: none;
}
footer ul li{ 
font-size: 100%;
	margin: 1vw 0 0 0;
}
footer ul li a{ 
color: #B3B3D0;
  text-decoration: none;
	}
footer p{ 
	font-size: 60%;

	
}



/***********nav contact *************/

section a{
	color:#E76368;
}



/***********logotype *************/
.caption{
	
	position:absolute;
	text-decoration: none;
	text-align: center;
	color: #E76368;
	}


/*figure.galerie { 
	width: 100%;
    display: grid;
    grid-template-columns: grid-gap 4vw; 
} /* donne 2 colonnes */

figure.fotorama {
	width: 100%;
	
}

figure.galerie{
	
	width: 40vw;
	margin: 0 20vw 0 0;
        display: grid;
       	grid-template-columns: 1fr 1fr;
		grid-gap: 4vw;
    }
figure img:hover{
	opacity: 70%;
	
    }



/****************************************/
/* SCÉNARI0 JQUERY
/* SCÉNARI0 JQUERY
/* SCÉNARI0 JQUERY
/****************************************/

/* réglage de l'apparence initiale des objets avant le script jQuery */








/**************************************************************
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
CSS POUR DESIGN REACTIF D'UN ÉCRAN D'UN MAXIMUM DE 680px (cell)
*************************************************************/


@media screen and (max-width: 680px) { 
    
    /* ne pas modifier */
    body { font-size:16px; } 
    h1 { font-size:48px; }
    h2 { font-size:36px; }
    h3 { font-size:24px; }
    h4 { font-size:20px; }
    h5 { font-size:18px; }
    h6 { font-size:16px; }
    /* ne pas modifier */
    
    /* CSS ENTRE CES LIGNES */
	header figure { 
	
    width:150%; /* ajuster au besoin */
	margin: 0vw 0 0 0vw;
} 
header nav { 
	
    width:20%; /* ajuster au besoin */
	margin: 0vw 0 0 7.5vw;
} 
main h1{ 
 	font-weight: 600;
	color:  #E76368;
  	font-size: 300%;
  	line-height: 90%;
	margin: 27vw 0 0 40vw;
	
}
header nav ul li{ 
	font-size: 120%;
	margin: 6vw 0 0 0;
}

	
figure.galerie {
	width: 49vw;
	margin: 2vw 10vw 6vw 10vw;
        display: grid;
       	grid-template-columns: 1fr;
		grid-gap: 4vw;
	}
	
figure.fotorama {
	width: 140%;
	
}


main.motion p{
	margin: 0 -23vw 4vw 11vw;
}

.caption{
	font-size: 4vw;
	margin: -48vw 0 0vw 2vw;
	
}
	
	
	body p {
	font-size: 3.5vw;
	font-weight: 100;
		
}
	
	p a{
		margin: 0 0 0 -5vw;
	}
	
	section figure{
		margin: 0 0 0 10vw;
		width: 50%;
	
	}
	section article p{
		margin: 0 -23vw 0 11vw;
		line-height: 250%;
	
	}
	
	
	
	
	main h2{ 
	font-size: 5vw;
	margin: 2vw 0 0 10.5vw;
}
	
	main video{ 
	width: 140%;
	margin: 0vw 0 0 10.5vw;
}
	main p.projet1{
	margin: 10vw;
}
main p.projet1{
	
	width: 10%;
	position: fixed;
	top: 17vw;
	left: 20vw;
}
	
	
    /* CSS ENTRE CES LIGNES */

    body{
        background-color: #FFFFFF;
    }
    
    
	/* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
}



/******************************************************************
******************************************************************
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
CSS POUR DESIGN REACTIF D'UN ÉCRAN ENTRE 681px (cell) et 1024px (ipad)
******************************************************************
******************************************************************/


@media screen and (min-width:681px) and (max-width: 1024px) { 
    
    /* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */

    body {
        background-color: #ffffff;
    }
    
    
	/* CSS ENTRE CES LIGNES */
    /* CSS ENTRE CES LIGNES */
}