/*////////////////////////////////
TOM Pâtiss - Feuille de style
////////////////////////////////*/


/*/////////////////////////////////////////////////////////////////////
1 / DECLARATIONS DIVERSES
/////////////////////////////////////////////////////////////////////*/

/*--Changement de la couleur à la sélection souris ! CSS fonctionnel mais non valide!--*/
::selection {
  background: #e84743;
  color: #fff;
}
::-moz-selection {
  background: #e84743;
  color: #fff;
} 

.fredokaFont{
	font-family: 'Fredoka One', cursive;
}

.cookieFont{
	font-family: 'Cookie', cursive;
}

.cl{
	clear:both;
}

/*----Petit effet soft des liens en CSS3-----*/
a, a:hover {
	-webkit-transition-duration: 0.5s;
  -webkit-transition-property: color;
  -moz-transition-duration: 0.5s;
  -moz-transition-property: color;
	-ms-transition-duration: 0.5s;
  -ms-transition-property: color;
	-o-transition-duration: 0.5s;
  -o-transition-property: color;
	transition-duration: 0.5s;
  transition-property: color;
}

body{
	background-color:#000000;
	font-family: 'Overlock', cursive;
	color:#ffffff;
	font-size:12px;
}

/*/////////////////////////////////////////////////////////////////////
2 / HEADER
/////////////////////////////////////////////////////////////////////*/

header{
	height:605px;
	background:url(../images/bg-header.gif) top center no-repeat;
}

#headContent{
	width:960px;
	margin:0 auto;
	position:relative;
}

/*-----Liens du haut de page----*/
#topLinks{
	width:350px;
	float:right;
	padding:20px 0 0 0;
}
#topLinks li{
	display:inline;
	text-align:right;
	margin:0 0 0 280px;
	font-weight:400;
}

#topLinks span{
	margin:0 5px 0 0;
}

#topLinks li img{
	vertical-align:top;
}

#topLinks a{
	text-decoration:none;
	color:#69696c;
}


/*-----Logo TOM Pâtiss----*/

#logo{
	width:177px;
	display:block;
	margin:0 auto;	
	position:relative;
	top:10px;
	z-index:2;
}
/*--Léger mouvement animé au survol du logo---*/

#logo:hover{
	top:15px;
}

#logo, #logo:hover{
	-webkit-transition-duration: 0.5s;
  -webkit-transition-property:top;
  -moz-transition-duration: 0.5s;
	-moz-transition-property: top;	
	-ms-transition-duration: 0.5s;
  -ms-transition-property: top;
	-o-transition-duration: 0.5s;
  -o-transition-property: top;
	transition-duration: 0.5s;
  transition-property: top;
}

/*---Menu principal------*/
nav{
	position:absolute;
	top:45px;
	font-size:14px;
	color:#29888c;
	text-transform:uppercase;
	background:url(../images/ombre-nav.png) bottom center no-repeat;
	padding:0 0 8px 0;
	
}

nav ul{
	padding:20px;
	width:920px;
	background:url(../images/pat-menu.gif);
	border:1px solid #B59A61;
	box-shadow: 0px 0px 4px 2px #B59A61;
	border-radius:4px;
	
}

nav ul li{
	display:inline;
	padding:0 14px 0 0;
	margin:0 14px 0 0;
	
}

nav ul #navAccueil{
	
	margin: 0 0 0 60px;
}


nav ul li:last-child {
	background:none;
	padding:0;
	margin:0;
}

nav ul #navFirst{
	background:none;
}


nav ul #navSecond{
	padding:0 14px 0 0;
	margin:0 14px 0 360px;
	
}

nav a{
	color:#B59A61;
	text-decoration:none;
}

nav a:hover{
	color:#ffffff;
}

/*/////////////////////////////////////////////////////////////////////
3 / BLOC VISUEL ACCROCHE
/////////////////////////////////////////////////////////////////////*/

/*---Bloc contenant global---*/
#bigVisuel{
	width:960px;
	height:458px;
	margin:0 auto;
	background:url(../images/img-planche.png) bottom center no-repeat;
}

/*---Visuels personnages---*/

#tombonhomme{
	display:block;
	float:left;
	width:330px;
	margin:0 0 0 60px;
}

#tom_recettes{
	display:block;
	float:left;
	width:280px;
	margin:0 0 0 60px;
}


/*---Texte complet du visuel---*/
#infosVisu{
	width:515px;
	float:right;
	padding:55px 0 0 20px;
	position:relative;
}

#infosVisu h1{
	font-size:72px;
	color:#ffffff;
	text-transform:uppercase;
	line-height:55px;
}

#infosVisu h1 span{
	font-size:60px;
	color:#B59A61;
	text-transform:none;
}

#infosVisu p{
	font-size:16px;
	font-weight:400;
	width:500px;
	padding:0 0 0 8px;
	line-height:50px;
}

/*----Fouet----*/

#fouet{
	position:relative;
	top:65px;
	left: 190px;
	display:block;
	width:191px;
}

#donuts{
	position:relative;
	top:45px;
	left: 190px;
	display:block;
	width:145px;
}
/*/////////////////////////////////////////////////////////////////////
4 / CONTENU DU SITE 
/////////////////////////////////////////////////////////////////////*/

#content{
	border-top:0px solid #cacbc0;
	background-color:#000000;
	padding:0 0 0px 0; /*--Pour gèrer le logo du bas--*/
}

/*/////////////////////////////////////////////////////////////////////
Ligne nouveaux produits
/////////////////////////////////////////////////////////////////////*/

#nouvelles_recettes{
	width:960px;
	margin:0 auto;
	padding:40px 0;
}

#nouvelles_recettes h2{
	font-size:20px;
	color:#B59A61;
	text-align:center;
	text-transform:uppercase;
	background:url(../images/sep-titre-rouge.png) center repeat-x;
	margin:0 0 10px 0;
}

/*---Astuce pour afficher correctement le fond double trait---*/
#nouvelles_recettes h2 span{
	background-color:#000000;
	padding:0 10px;
}

/*---Style des blocs de produits---*/
#nouvelles_recettes article{
	float:left;
	width:220px;
	text-align:center;
	font-size:14px;
	margin:0 20px 0 0;
}


#nouvelles_recettes article img{
	border-bottom:1px solid #B59A61;
	width:220px; /*--On force l'image en CSS à 220px de large, mais lors de la dynamisation c'est à redimensionner avec un script--*/
}

#nouvelles_recettes article img:hover{
	border-bottom:1px solid #B59A61;
}

#nouvelles_recettes article h3{
	color:#B59A61;
	font-size:16px;
	margin:5px 0 15px 0;
}

#nouvelles_recettes article h3 a{
	color:#B59A61;
	text-decoration:none;
}

#nouvelles_recettes article h3 a:hover{
	color:#EEA914;
}

#nouvelles_recettes .prix{
	font-weight:700;
	margin:0 0 15px 0;
}

#nouvelles_recettes .prix a{
	font-size:15px;
	color:#FFF;
	background-color:#e84743;
	padding:5px;
	text-decoration:none;
}

#nouvelles_recettes .prix a:hover{
	color:#FFF;
	background-color:#EEA914;
}

/*/////////////////////////////////////////////////////////////////////
Présentation de l'entreprise
/////////////////////////////////////////////////////////////////////*/
#Tompatiss{
	background:url(../images/bg-down-arrow.jpg) #393734 top center no-repeat; 
	/*-Wrapper principal rouge-*/
}

#presInt{
	width:960px;
	margin:0 auto;
	padding:35px 0 0 0;
	position:relative; 
	/*-Pour ensuite placer les flèches--*/
}

/*-Titre principal---*/
#presInt h2{
	font-size:22px;
	color:#FFF;
	text-align:center;
	margin:0 0 20px 0;
}

#presInt h2 span{
	color:#B59A61;
	text-transform:uppercase;
	margin:0 0 0 8px;
}

/*--Mise en page des blocs---*/

#presInt article{
	width:220px;
	float:left;
	margin:0 20px 50px 0;
	position:relative; /*-Pour ensuite placer la bulle du numéro--*/
	text-align:center;
	color:#FFF;
}

#presInt article h4{
	font-size:16px;
	margin:25px 0 15px 0;
}

#presInt .number{
	font-size:18px;
	display:block;
	width:39px;
	height:31px;
	padding:8px 0 0 0;
	position:absolute; /*--Placement facile sur l'image du dessus--*/
	top:195px;/*--Mesuré sur la maquette PSD---*/
	left:97px; /*--Mesuré sur la maquette PSD---*/
	z-index:2; /*--Les chiffres restent sélectionnables--*/
}

#presInt article p{
	font-size:14px;
}

/*--Fleches entre les arguments---*/
.fleches{
	position:absolute;
	width:570px;
	height:42px;
	background:url(../images/sprite-fleches.png) no-repeat;
	top:260px;
	left:180px;
	z-index:3;	/*--Mise à l'arrière plan au même niveau que les images--*/
}


/*--Gestion de l'animation de l'onglet ---*/
.produitMin:hover > .hoverBox{
	top:90px;
}

.produitMin >.hoverBox, .produitMin:hover > .hoverBox{
	-webkit-transition-duration: 0.5s;
  -webkit-transition-property:top;
  -moz-transition-duration: 0.5s;
	-moz-transition-property: top;
	-ms-transition-duration: 0.5s;
  -ms-transition-property: top;
	-o-transition-duration: 0.5s;
  -o-transition-property: top;
	transition-duration: 0.5s;
  transition-property: top;
}


/*/////////////////////////////////////////////////////////////////////
8 / FOOTER
/////////////////////////////////////////////////////////////////////*/

/*--Barre de bois + logo----*/
#preFoot{
	background:url(../images/img-planche-footer.jpg) 0 50px repeat-x;
	position:relative;
	top:-50px;
	margin:0 0 -100px 0;
}

#preFoot img{
	display:block;
	width:177px;
	margin:0 auto;
}

/*---Footer---*/

#footContent{
	width:960px;
	margin:0 auto;
	text-align:center;
}

#address{
	width:300px;
	margin:0 auto;
	border-radius:4px;
	padding:0 0 12px 0;
}

#address #bigText{
	font-size:16px;
	text-transform:uppercase;
	font-weight:700;
	margin:0 0 20px 0;
}

#address ul{
	font-size:14px;
	padding:70px 0 5px 0;
	background:url(../images/pat-menu.gif) repeat;
}

#address ul li#tel{
	margin:15px 0;
}

/*--Mentions légales----*/

#legal{
	margin:30px 0 0 0;
	padding:0 0 30px 0;
}

#legal p{
	margin:0 0 2px 0;
}

#legal .bold{
	font-weight:700;
}

#legal a{
	color:#ffffff;
	text-decoration:none;
}

#legal a:hover, #legal a:visited, #legal a:focus{
	color:#ffffff;
}