html
{
	font-family: Arial;
	font-size:0.9em;
	height:100%; /* pour le pied de page */
	
}

body
{
	height:100%; /* pour le pied de page */
	/* texture de fond */
	background-image:url('fond.jpg');
	background-repeat:repeat;
}

h1
{
	margin:1em 0em 0em 1.45em;
	font-weight:bold;
	font-size:1.3em;
}

h2
{
	margin:0.5em;
	font-weight:bold;
	font-size:1.2em;
	font-style:italic;
}

h3
{
	font-weight:bold;
	font-size:1em;
}


abbr
{
	border-bottom:1px dotted black;
}


/* pour le pied de page, le centrage et l'elasticité */
div.page
{
	position:relative;
	min-height:100%;
	max-width: 65em;
	margin:0 auto;
}

/* pour le responsive, les images se retaillent automatiquement */
img 
{
	max-width: 100%;
	height: auto; width: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* entête */
div.clear 
{
	clear:both;
}

/* positionnement du logo à gauche */
#logo
{
	float:left;
	margin:2em 0em 2em 2em;
}

#bandeau
{
	float:left;
	text-align:left;
	margin-left:0.6em;
	margin-top:2.8em;
}

/* nom, en haut de la page */
#nom
{
	font-family: 'Josefin Sans', sans-serif;
	color:black;
	font-size:1.7em;
	font-weight:bold;
}

/* titre, role, en haut de la page */
#statut
{
	font-family: 'Josefin Sans', sans-serif;
	font-weight:bold;
	color:#7b7435;
	font-size:1.2em;
	line-height:0.5em;
}

/* barre de navigations (menu) */
nav
{
	font-family: 'Josefin Sans', sans-serif;
	font-weight:bold;
	font-size:1.2em;
	height:1.4em;
	background-color:#e9e4d1;
	margin-bottom:0.3em;
}

nav a
{
	padding:0.15em 2em 0em 1.6em;
	text-align:center;
	color : #d86169;
	text-decoration:none;
	display : block;
	float :left;
}

/* un effet d'illumination au passage de la souris, et lorsque le bouton est actif */
nav a:hover, nav a[href="#"], nav a.active 
{
	color : #f03f3f;
}


article
{
	/* pour le pied de page */
	overflow:auto;
	padding-bottom:3em;
}

/* page d'accueil */
li.disc 
{
	list-style-type:disc;
	margin-left:2em;
}

div.texte_image_droite
{
	text-align:justify;
	padding:2em;
}

span.image_droite
{ 
margin: 0em 0em 0em 2em;
	float:right;
}

span.image_droite img.accueil
{
	border:0.4em solid #e9e1ba; /* doré */
}

div.bloc{
  float:left;
  padding : 1em;
  margin : 3em 0.5em 3em 0.5em;
  width:28%; /* 3 cadres sur la meme ligne */
  background-color:#dcd5c1; /* fond doré */
  min-height:12em; /* hauteur min du cadre, afin de les avoir tous de la même taille */
}

div.bloc h2
{
  text-align:center;
}


/* page réalisations */

div.grid-item { 
  width: 8.5em; /* set thumbnail size */
  height: 8.5em;
  line-height: 8.4em;
  border:1em solid #eeebe5; /* grey thick border */ 
  background-color:white;
  text-align:center; /* center align images */
  margin:0.2em;
}

div.grid-item img
{
  vertical-align:middle; /* verticaly center images */
} 

div.button-group
{
  text-align:center; /* center the button group on screen */
}

div.grid 
{
  margin-left:5.5em; /* dirty hack to center thumbnails grid */
  margin-top:1em;
}

button.grid-button {
  padding:0.2em 0.5em 0em 0.5em;
  border: none; /* buttons looks like span */
  background-color:#eeebe5; /* grey */
  cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
  font-size:1.1em;
  font-weight:bold;
}

button.grid-button:hover {
	background-color:#e9e4d1; /* gold */

}

section.temoignages
{
  clear:both;
  padding:1em;

}

section.temoignages p
{
  margin-top: 1em;
  font-size:0.8em;
  text-align:justify;
  font-style:italic;
}

/*page cv */

article.CV
{
	margin:0 auto;
	overflow:auto;
	padding:0em 1em 3em 1em;
}

div.CV_section
{
	width:100%;
	background-color:#e9e1ba; /* fond doré */
	text-align: center;
	font-weight:bold;
	margin:1em 0em 1em 0em;
}

li.cdp
{
	margin-top:0.5em;
	color:red
}

li.artistique
{
	margin-top:0.5em;
	margin-bottom:0.5em;
	color:#0b3a4c;
}


/* contenu des onglets */
.content 
{ 
	float: left;
	clear: both;
	border: none;
	width: 100%; 
}

/* page contact */
h1.contact_section
{
	width:100%;
	background-color:#e9e1ba; /* fond doré */
	text-align: center;
	font-weight:bold;
	margin:1em 0em 1em 0em;
}


article.contact
{
	margin:0 auto;
	overflow:auto;
	padding:1em 1em 3em 1em;
	max-width:30em;
}

h2.idee
{
	font-weight:bold;
	color:#0b3a4c;
}

form
{
	margin-right:1em;
}

label
{
	display:block;
	margin-top:1em;
}

label.error 
{ 
	color: red; 
	padding-left: 0.5em;
}

input, textarea 
{
	width:100%;
	padding: 0.3em;
	border: solid 1px #E5E5E5;

	box-shadow: rgba(0,0,0, 0.1) 0px 0px 0.3em inset;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0em 0em 0.3em inset;/*For Mozilla Firefox Browsers*/
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0em 0em 0.3em inset;/*For Webkite browsers - Chrome and Safari*/

	border-radius:0.4em;
	-moz-border-radius:0.4em;
	-webkit-border-radius:0.4em;
}


#submit 
{
	margin-top:1em;
	width:auto;
	padding: 0.5em;
	cursor:pointer;
}

/* erreur sur la page contact */       
span.message_erreur
{
	margin:1em;
	display:block;
	color:red;
}

/* confirmation d'envoi de message */
div.message_envoye
{
	width:100%;
	text-align:center;
	font-weight:bold;
	padding-top: 2em;
}

/* pied de page */
footer
{
	position:absolute;
	margin-top:-3em;
	bottom:0;
	width:100%;
	clear:both;
	background-color:#e9e4d1;
}

footer ul 
{
	text-align:center;
}

footer ul li
{
	display:inline;
}

footer ul li:nth-child(2)
{
	margin-left:20%; /*design elastique */
	margin-right:20%;
}

footer ul li a
{
	text-decoration:none;
	color:#0b3a4c;
}

/*pour les écrans "moyens" */
@media screen and (max-width: 979px) 
{
  div.bloc {
    float:none;
    display:block;
    width:85%;
    min-height:8em; /* hauteur min du cadre, afin de les avoir tous de la même taille */
    margin-left: auto;
    margin-right: auto;
  }

}


/* pour les "petits" écrans */
@media screen and (max-width: 767px) 
{
	
	#logo{
		width:250px;
	}

	/* titre, role, en haut de la page */
	#statut
	{
		font-size:1em;
	}

	nav
	{
		font-size:1.2em;
	}

	nav a
	{
		padding:0.15em 0em 0em 1.2em;
	}
	

	
	span.image_droite
	{ 
		text-align:center;
		display:block;
		float:none;
	        margin: 0em 0em 1em 0em;
	}

	footer ul li:nth-child(2)
	{
		margin-left:8%; /*design elastique */
		margin-right:8%;
	}

}

/* pour les "très petits" écrans (iphone mode portrait) */
@media screen and (max-width: 360px) 
{

	/* nom, en haut de la page */
	#nom
	{
		font-size:1.3em;
	}
		
	nav
	{
		font-size:0.9em;
	}

	nav a
	{
		padding:0.15em 0em 0em 1.9em;
	}
	
	footer ul li
	{
		display:block;
	}

	/* pour le pied de page */
	article, article.contact, article.CV
	{
		padding-bottom:5em;
	}

}

/* correction d'un bug connu d'affichage dans ios6 */
@media (max-device-width:768px) and (orientation: landscape) 
{
	html 
	{
		-webkit-text-size-adjust: 100%;
	}
}

/* suppression des objets disgracieux et les éléments de navigation, pour impression papier */
@media print 
{
	#logo, nav, footer, div.rg-view, div.es-carousel-wrapper
	{
		display:none;
	}

	span.image_droite
	{ 
		text-align:center;
		display:block;
		float:none;
	        margin: 0em 0em 1em 0em;
	}

}