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

@font-face {
    font-family: 'josefin_slabbold';
    src: url('../polices/josefinslab-bold-webfont.eot');
    src: url('../polices/josefinslab-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../polices/josefinslab-bold-webfont.woff2') format('woff2'),
         url('../polices/josefinslab-bold-webfont.woff') format('woff'),
         url('../polices/josefinslab-bold-webfont.ttf') format('truetype'),
         url('../polices/josefinslab-bold-webfont.svg#josefin_slabbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'josefin_slablight';
    src: url('../polices/josefinslab-light-webfont.eot');
    src: url('../polices/josefinslab-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../polices/josefinslab-light-webfont.woff2') format('woff2'),
         url('../polices/josefinslab-light-webfont.woff') format('woff'),
         url('../polices/josefinslab-light-webfont.ttf') format('truetype'),
         url('../polices/josefinslab-light-webfont.svg#josefin_slablight') format('svg');
    font-weight: normal;
    font-style: normal;

}
/************************************
BODY
************************************/

body {
	background-color:white;
	font-family: 'josefin_slablight', Courier New, Courier, monospace;
	color:black;
	
}


/************************************
WRAPPER
************************************/

div#wrapper {
	margin:0 auto 0 auto;
	width:836px;
	
	
}

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


header figure.logo {
	float:left;
	top:0;
	left:0;
	margin:10px 0 0 30px;
	
}


header figure {
	margin:0 0 0 600px;
	
}

/******************NAV*********************/

nav.menu {
	background-image:url(../images/roseventmenu.jpg);
	padding:100px 0 200px 0;
	background-repeat:no-repeat;
	background-position:center top;
	margin:0 auto 0 auto;
	width:600px;
	
	
	
}

nav.menu ul {
	background-color:white;
	text-align:center;
	
}

nav.menu ul li {
	display:inline-block;
	color:black;
	font-family: 'josefin_slablight';
	font-size:120%;
	margin:2px 10px 2px 10px;
	padding:5px 0 0 0;
	
}



/******************** TRIGGER ***********************/

div.trigger {
		margin:0 auto 0 auto;
		width:836px;
}
	
	div.trigger nav ul li {
		float:left;
		display:inline;
		width:7%; /* a juster selon le nombre */
	}
	
		div.trigger nav ul li img {
			width:100%;
			height:auto;
		}


section.mon-portfolio {
	position:relative;
	width:836px;
	margin:0 auto;
}

	section.mon-portfolio div.conteneur {
		position:relative;
		overflow:hidden;
		min-height:540px;
	}


	section.mon-portfolio div.conteneur div.tousprojets {
		position:absolute;
		/*top:0;*/ /* fadeTO */
		top:1700px; /* fadeTO */
		left:0;
		opacity:0; /* fadeTo */
	}
	
/**************************MERCI*********************/	

div.merci p.message {
	font-size:200%;
	color:#3CC;
	text-align:center;
	padding-top:500px;
	
}

div.merci p.envoi a {
	text-decoration:none;
	text-align:center;
	font-size:200%;
	color:#3CC;
	text-align:center;
	margin:0 auto 0 auto;
	padding-left:25%;
}

/**************************ASIDE*********************/

div#wrapper aside {
	position:absolute;
	right:20px;
	top:40px;
	
}

aside a {
	text-decoration:none;
	color:#999;
	
}


div#wrapper aside ul li a {
	color:#999;
	text-decoration:none;
}

div#wrapper aside ul li a:hover {
	text-decoration:none;
	
}
div#wrapper aside ul li.contact a {
	color:#84af4b;
	text-decoration:none;
	
}

/*************************FIRST PAGE******************************/

div.design {
	position:absolute;
	z-index:1000;
	left:42%;
	top:300px;
	margin-left:-28px;

	
	
}

div.rose {
	position:absolute;
	z-index:900;
	left:50%;
	top:150px;
	margin-left:-300px;
	display:none;
	
}
section.menu nav.firstpage {
	display:none;
	
}

section.menu nav.firstpage ul li {
	color:#3CC;
	font-size:120%;
	font-family: 'josefin_slabbold';
	
}

section.menu nav.firstpage ul li a {
	text-decoration:none;
	
}

section.menu nav.firstpage ul li.presentation1 a {
	font-family: 'josefin_slabbold';
	color:#3CC;
	padding:-300px;
	position:absolute;
	top:10%;
	left:44%;
	z-index:100000;
	background-color:white;
	
}

section.menu nav.firstpage ul li.portfolio1 a {
	font-family: 'josefin_slabbold';
	color:#dd654d;
	padding:-300px;
	position:absolute;
	top:40%;
	left:63%;
		z-index:100000;
	background-color:white;
	
}

section.menu nav.firstpage ul li.connaissances1 a {
	font-family: 'josefin_slabbold';
	color:#ee517c;
	padding:-300px;
	position:absolute;
	top:42%;
	left:22%;
		z-index:100000;
	background-color:white;
	
}

section.menu nav.firstpage ul li.contact1 a {
	font-family: 'josefin_slabbold';
	color:#84af4b;
	padding:-300px;
	position:absolute;
	top:72%;
	left:46%;
		z-index:100000;
	background-color:white;
	
}
	



/*************************ARTICLE******************************/

div#wrapper article.presentation {
	
	border:2px solid #06b6a9;
	padding:80px;
	margin-bottom:80px;
	margin-top:-100px;
	
}

div#wrapper article.presentation p {
	font-size:100%;
	padding-bottom:20px;
	margin:0 auto 0 auto;
	text-align:justify;
	line-height:150%;
	width:500px;
	
}

div#wrapper article.presentation figure img {
	padding-left:80px;
	
}

div#wrapper article.presentation p.signature {
	font-size:90%;
	text-transform:uppercase;
	
}

div#wrapper nav.menu ul li.presentation a {
	color:#3CC;
	text-decoration:none;
	
}

div#wrapper article.connaissances {
	
	border:2px solid #ee517c;
	padding:80px;
	padding-left:50px;
	margin:0 0 0 20px;
	margin-top:-100px;
	
}

div#wrapper article.connaissances h1,
div#wrapper article.connaissances h2 {
	font-family: 'josefin_slabbold';
	text-decoration:none;
	font-weight:normal;
	font-size:110%;
	color:#ee517c;
	padding-bottom:10px;
	padding-top:50px;
	
}

div#wrapper article.connaissances ul.un li {
	list-style-type:disc;
	padding:5px;
	padding-left:30px;
	float:left;
	top:0;
	left:0;
	width:45%;
	margin-left:100px;

	
}

div#wrapper article.connaissances ul.un li.bold,
div#wrapper article.connaissances ul.deux li.bold {
	font-family: 'josefin_slabbold';
	font-size:115%;
	color:#ee517c;
	padding-top:40px;
	padding-bottom:20px;
	list-style-type:none;
	
}

div#wrapper article.connaissances ul.un li.bold {
	margin-left:-30px;
	
}

div#wrapper article.connaissances ul.deux li.bold {
	padding-right:200px;
	
}


div#wrapper article.connaissances ul.deux {
	float:right;
	top:0;
	left:200px;
	width:48%;
	margin-left:50px;
	margin-top:-320px;
	
}

div#wrapper article.connaissances ul.deux li {
	list-style-type:disc;
	padding:5px;
	padding-left:30px;
	float:right;
	top:0;
	left:300px;
	width:40%;
	margin-left:50px;

	
}

div#wrapper nav.menu ul li.connaissances a {
	color: #ee517c;
	text-decoration:none;

	
}

div#wrapper nav.menu ul li.portfolio a {
	color:#dd654d;
	text-decoration:none;
	
}

div#wrapper section.mon-portfolio div.images fotorama img {
	margin:0 auto 0 auto;
	
}


div#wrapper article.contact {
	border:2px solid #a0cc5c;
	padding:80px;
	margin-top:-100px;
}

div#wrapper article.contact figure img {
	float:left;
	top:0;
	left:0;
	width:45%;
	height:auto;

	
}

div#wrapper article.contact section {
	float:right;
	top:0;
	left:268px;
	width:45%;
	margin-top:-420px;

	
}

div#wrapper article.contact section h2 {
	margin:0 0 20px 0;
	font-size:130%;
	color:#a0cc5c;
	
}

div#wrapper article.contact section p {
	margin:0 10px 10px 0;
	font-size:90%;
	
}

/***********************************
FORMULAIRE
***********************************/

form label, form input {
	display:block;
	
}

form label {
	margin:0 0 5px 0;
	
}

form input, form textarea {
	margin:0 0 10px 0;
	width:300px;
	background-color:#f1f1f1;
	border:none;
	padding:4px;
	color:#84af4b;
	font-size:120%;
	font-family: 'josefin_slabbold';
	

	
}

form textarea {
	height:100px;
	
}

/***************************************
PADDING FOTORAMA
***************************************/

div.conteneur {
	padding-bottom:30px;
	margin:10px 0 10px 180px;
	
}

div.conteneur p span.classes {
	background-color:#0F0;
	
}


div.trigger nav ul li {
	padding-bottom:5px;
	
}


/***************************************
MODIF. FOTORAMA
***************************************/


 div.fotorama {
	 width:1000px;
	 margin:0 auto;
 }


/* Vignettes */

 /*div.fotorama__thumb-border {
	border-color:rgba(230,0,0,1);
	background-color:rgba(255,255,255,0.7);
	
}

/* Légendes des images */

/* div.fotorama__caption__wrap {
	background-color:rgba(0,0,0,0.9);
	width:100%;
	color:#eee;
	font-size:125%;
	text-align:center;
	position:absolute;
	bottom:0;
	width:100%;
	
} */

/***************************************
MOBILE
***************************************/

div.portfolio-mobile {
	display:none;
	
}

div.presentation-mobile1 {
	display:none;
	
}

div.connaissances-mobile1 {
	display:none;
	
}

div.contact-mobile1 {
	display:none;
	
}

div.index-mobile {
	display:none;
}





/*ACCUEIL*/

div.objet {
	position:absolute;
	width:500px;
	height:550px;
	left:50%;
	top:50%;
	margin:-275px 0 0 -250px;
	z-index:20000;
	background-image:url(../images/rosesdesvents.gif);
	background-size:cover;
	opacity:0;
	
}

div.objet ul li {
	position:absolute;
	
}

div.objet ul li.connaissances1 {
	width:200px;
	left:-195px;
	top:48%;
	text-align:right;
	font-family: 'josefin_slabbold';
	
}

div.objet ul li.connaissances1 a {
	color:#ee517c;
	text-decoration:none;
	font-size:120%;
	
}

div.objet ul li.portfolio1 {
	width:200px;
	right:-225px;
	top:45%;
	text-align:left;
	font-family: 'josefin_slabbold';
	
}

div.objet ul li.portfolio1 a {
	color:#dd654d;
	text-decoration:none;
	font-size:120%;
}
	



div.objet ul li.contact1 {
	width:200px;
	left:53%;
	bottom:-17px;
	text-align:center;
	margin:0 0 0 -100px;
	font-family: 'josefin_slabbold';
	
}

div.objet ul li.contact1 a {
	color:#a0cc5c;
	text-decoration:none;
	font-size:120%;
	
}

div.objet ul li.presentation1 {
	width:200px;
	left:52%;
	top:-30px;
	text-align:center;
	margin:0 0 0 -100px;
	font-family: 'josefin_slabbold';
	
	
}
div.objet ul li.presentation1 a {
	color:#3CC;
	text-decoration:none;
	font-weight:bold;
	font-size:120%;
	
}
	






/* ------------------------------------------------------------------------------- */
/* X.RESPONSIVE DESIGN
/* ------------------------------------------------------------------------------- */ 
@media only screen and (max-width : 680px) { /* pour les écrans sous 680px */

/* --------------------------------------------- */

/* l'idée ici est de modifier les paramètres des éléments
/* en fonction de la largeur d'un téléphone mobile
/* souvent les css doivent être annulées ou modifiées */

/* --------------------------------------------- */

/* MOBILE RESET */
body, section, aside, article, div, nav, footer, ul, li, p { margin:0; padding:0; }
img { max-width:100%; /* au maximum 100% de la largeur de l'élément qui la contient */ height:auto; /* hauteur automatique */ }
h1 { font-size:42px; }
h2 { font-size:30px; }
h3 { font-size:24px; }
h4 { font-size:18px; }
h5 { font-size:14px; }
h6 { font-size:12px; }
p { font-size:small; }
/* MOBILE RESET */

/* PLACER VOS CSS MOBILES SOUS LA LIGNE SUIVANTE*/ 

div.index-mobile {
	display:block;
	
}

div.objet {
	display:none;
	opacity:0 !important;
	width:0;
	height:0;
	overflow:hidden;
	z-index:-1000;
	
}


body {
	/* background-color:red; */
	width:100%;
	
}

header figure.logo img {
	display:none;
	
}

h3 {
	font-size:14px;
	
}

nav figure {
	display:none;
	
}

div.inner {
	width:80%;
	
}

div.index {
	display:none;
	
}

 /* PORTFOLIO */
 
section.mon-portfolio {
	 display:none;
	 
}

div.trigger {
	display:none;
	
}




aside ul li {
	font-size:100%;
	
}

/******************************INDEX_MOBILE****************************/


div.index-mobile img.feemobile {
	width:10%;
	height:auto;
	margin-left:48%;
	padding-top:20px;

	
}



/*******************************NAV***********************************/

nav.menu {
	display:none;
}


div#wrapper aside {
	display:none;

	
}

nav.menu-mobile {
	font-family: 'josefin_slablight';
	font-size:80%;
	display:inline-block;
	margin-left:35%;
	padding:10px;
	
}

nav.menu-mobile a {
	text-decoration:none;
	
}

nav.menu-mobile ul li {
	text-decoration:none;
	text-align:center;
	color:black;
	padding:5px;
	
}
nav.menu-mobile ul li a {
	text-decoration:none;
	padding:5px;
	
}

nav.menu-mobile ul li.portfolio a {
	color:#dd654d;
	
}

nav.menu-mobile ul li.connaissances a {
	color:#ee517c;
	
}

nav.menu-mobile ul li.presentation a {
	color:#3CC;
	
}

nav.menu-mobile ul li.contact a {
	color:#a0cc5c;
	
}

nav.menu-mobile ul li a:hover {
	text-decoration:none;
	
}


/*******************************INDEX***********************************/

div.index {
	display:none;
	
}



/*******************************PORTFOLIO***********************************/

div.presentation-portfolio1 {	
display:block;

}

article h3 {
	font-size:100%;
	
}

article p {
	font-size:110%;
	
}

div.portfolio-mobile article {
	padding-top:40px;
	
}

div.portfolio-mobile article h3 {
	margin-left:0;
	text-align:center;
	
}

div.portfolio-mobile article figure img {
	margin-left:25%;
	
}

div.portfolio-mobile p {
	font-size:90%;
	margin-left:0;
	text-align:center;
	
}

div.portfolio-mobile p.version {
	font-size:100%;
	margin-left:0;
	padding:10px;
	text-align:center;
	
}

div.portfolio-mobile img.feemobile {
	width:10%;
	height:auto;
	margin-left:40%;
	padding-top:20px;
	
}


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

div.presentation {
	display:none;
	
}

div.presentation-mobile1 {	
display:block;

}

div.presentation-mobile1 nav.menu-mobile {
	
	font-family: 'josefin_slablight';
	font-size:80%;
	display:inline-block;
	margin-left:35%;
	padding:10px;
	
	
	
}


div.presentation-mobile1 {
	padding:20px 20px 10px 20px;
	
}

div.presentation-mobile1 article {
	border:1px solid #3CC;
	padding:20px;
	
}
	
	

div.presentation-mobile1 p {
	margin-left:10%;
	width:80%;
	text-align:justify;
	font-size:90%;
	padding-bottom:10px;
	
}


div.presentation-mobile1 p.version {
	padding-top:20px;
	font-size:80%;
	
}

div.presentation-mobile1 figure img {
	margin-left:30px;
	
}

div.presentation-mobile1 img.feemobile {
	width:10%;
	height:auto;
	margin-left:50%;
	padding-top:20px;
	
}

/*******************************CONNAISSANCES***********************************/

div.connaissances-mobile1 {	
display:block;

}


div.connaissances-mobile1 img.feemobile {
	width:10%;
	height:auto;
	margin-left:50%;
	padding-top:20px;
	
}

div.connaissances-ecran {
	display:none;
	
}

div.connaissances-mobile1 {
	
}

	
div.connaissances-mobile1 article.connaissances {
	border:1px solid #ee517c;
	padding-bottom:40px;
	width:80%;
	margin-left:10%;
	
}


div.connaissances-mobile1 article.connaissances h1,
div.connaissances-mobile1 article.connaissances h2 {
	font-family: 'josefin_slablight';
	text-decoration:none;
	font-size:90%;
	color:#ee517c;
	padding-bottom:10px;
	padding-top:50px;
	margin-left:25%;
	
}

div.connaissances-mobile1 article.connaissances ul.un {
	padding-bottom:60px;
	
}

div.connaissances-mobile1 article.connaissances ul.un li {
	list-style-type:disc;
	padding:0;
	padding-left:0;
	float:none;
	margin-left:0;
	font-size:80%;
	margin-left:35%;

	
}

div.connaissances-mobile1 article.connaissances ul.un li.bold,
div.connaissances-mobile1 article.connaissances ul.deux li.bold {
	font-family: 'josefin_slabbold';
	font-size:115%;
	color:#ee517c;
	padding-top:40px;
	padding-bottom:20px;
	padding-left:-50px;
	list-style-type:none;
	font-size:90%;
	margin-left:35%;
	
}


div.connaissances-mobile1 article.connaissances ul.deux {
	float:none;
	margin-left:0;
	margin-top:0;
	
}

div.connaissances-mobile1 article.connaissances ul.deux li {
	list-style-type:disc;
	padding:0;
	padding-left:0;
	float:none;
	width:40%;
	margin-left:0;
	font-size:80%;
	margin-left:35%;

	
}

div.connaissances-mobile1 p.version {
	font-size:80%;
	margin-left:0;
	padding:10px;
	text-align:center;
	
}


section {
	font-size:70%;
	padding-top:200px;
	width:90%;
	
}

/*******************************CONTACT***********************************/

div.contact-mobile1 {	
display:block;

}

div.contact {
	display:none;
	
}
div.contact-mobile1 {
	padding:0 15px 0 40px;
	
}

div.contact-mobile1 img.feemobile {
	width:10%;
	height:auto;
	margin-left:48%;
	padding-top:20px;
	
}



/*******************************??????????***********************************/
	
div.portfolio-mobile {
	display:block;
	
}

div.portfolio-mobile article {
	width:90%;
	margin:0 5% 20px 5%;
	
}

form input, form textarea {
	margin:0 0 10px 0;
	width:100%;
	background-color:#f1f1f1;
	border:none;
	color:#a0cc5c;

	
}
}