$page_width : 960px;


$color_font_base : #000000;	
$color_bleu : #117f98;
$color_gris : #b1b1b1;
$color_gris2 : #333333;
$color_gris3 : #575755;

$filet_gris : 1px solid #b1b1b1;

@import 'reset';
@import 'base';
@import 'nav';


.desk {
	display: block;
}
.tel {
	display: none;
}
.desk-inline {
	display: inline;
}
.tel-inline {
	display: none;
}


#page {

	@import 'header';
	@import 'footer';

    width: 100%;
	margin: 0;
	padding: 0;
	background: #ffffff;

	.page-wrapper {
		width: $page_width;
		margin: 0px auto 0 auto;
		padding: 0;
		border: 0px solid red;
		}
	
	.contenu {
		width: $page_width;
		margin: 60px auto 50px auto;
		border: 0px solid red;
		}
		
	.col1 {
		float: left;
		width: 280px;
		}
	.col2 {
		float: right;
		width: 600px;
		}
	.col3 {
		margin: 0 auto;
		width: 600px;
		}
	.col1-header {
		float: left;
		}
	.col2-header {
		float: right;
		}

	}

	

/** HOME **/

#hp {

	.slider-block {
		margin-top: -30px;
		margin-bottom: 35px;
		img {
			border: 0;
			}
		.slider-item {
			h3 {
				display: none;
				position: relative;
				margin-top: 0px;
				top: 50%;
				left: 100px;
				font-size: 18px;
				font-weight: 500;
				color: #ffffff;
				text-align: left;
				opacity: 1;
				}
			h4 {
				display: none;
				position: relative;
				top: 50%;
				left: 100px;
				margin-top: 5px;
				font-size: 18px;
				font-weight: 300;
				color: #ffffff;
				text-align: left;
				opacity: 1;
				}
			}
		}
		
	.col1 {
		.actu {
			margin-top: 25px;
			margin-bottom: 50px;
			.date {
				margin-bottom: 10px;
				padding-bottom: 5px;
				border-bottom: $filet_gris;
				font-size: 13px;
				font-weight: 700;
				}
			h3 {
				margin-bottom: 10px;
				}
			p {
				margin-bottom: 5px;
				}
			small {
				font-size: 11px;
				font-style: italic;
				color: $color_gris2;
				}
			}
		
		}	
		
	.col2 {
		.new {
			position: relative;
			width: 175px;
			margin-top: 48px;
			float: left;
			border: 0px solid red;
			}
		.new-left {
			margin-left: 35px;
			}
		}	
		
		
		
	}


/** PRESENTATION **/

#presentation {

	.col1 {
		article {
			position: relative;
			width: 100%;
			}
		}

	.col2 {
		p {
			margin-top: 0px;
			margin-bottom: 0px;
			}
		#citation {
			font-style: italic;
			color: $color_bleu;
			margin-bottom: 5px;
			}
		#auteur {
			color: $color_bleu;
			}
		}
		
	.col3 {
		.logo {
			width: 70px;
			margin-right: 5px;
			}
		}

	}


/** CATALOGUE **/
	
#catalogue {

	h2 {
		span {
			color: $color_gris2;
			font-weight: 300;
			}
		}
	.col1 {
		h2 {
			margin-bottom: 40px;
			}
		#visuels {
			img {
				margin-bottom: 30px;
				}
			.img-visuel1 {
				width: 100%;
				}
			.img-visuel2 {
				float: left;
				width: 86px;
				}
			.img-visuel2-left {
				margin-left:11px;
				}
			}
		.extrait:hover {
			color: $color_bleu;
			font-weight: 700;
			text-decoration: none;
			}
		.ajout {
			background: $color_gris3;
			}
		.ajout:hover {
			background: $color_bleu;
			}
		}
	.col2 {
		h2 {
			margin-bottom: 5px;
			}
		h3 {
			margin-top: 40px;
			}
		.auteur {
			margin-top: 0px;
			font-size: 14px;
			font-weight: 300;
			}
		.auteur a:hover {
			color: $color_bleu;
			font-weight: 700;
			text-decoration: none;
			}
		.collection {
			margin-top: 0px;
			font-size: 12px;
			font-weight: 300;
			color: $color_gris2;
			font-style: italic;
			}
		.collection a:hover {
			color: $color_bleu;
			font-weight: 700;
			text-decoration: none;
			}
		}

	.lettres {
		margin-top: 2px;
		margin-left: 30px;
		/*color: $color_gris;*/
		color: #000000;
		font-weight: 300;
		}
	.lettres-off {
		/*color: $color_gris;*/
		color: #000000;
		font-weight: 300;
		}
	.lettres-on {
		color: $color_bleu;
		font-weight: 700;
		}
	.lettres-on:hover {
		text-decoration: none;
		}
				
	.caracteristiques {
		margin-bottom: 25px;
		}
	.cadeau {
		font-size: 12px;
		line-height: 14px;
		color: $color_gris2;
		font-style: italic;
		}
	.presse {
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: $filet_gris;
		}
	.presse-lien {
		float: left;
		width: 100px;
		margin-top: 5px;
		font-size: 12px;
		line-height: 14px;
		color: $color_gris2;
		font-style: italic;
		border:0px solid red;
		}
	.presse-lien a:hover {
		color: $color_bleu;
		font-weight: 700;
		text-decoration: none;
		}
	.presse-lien-left {
		margin-left: 25px;
		}
		
		
	}	



/** COLLECTIONS **/

#collections {

	.col1, .col1-header {
		margin-bottom: 50px;
		img {
			}
		.item {
			position: relative;
			width: 100%;
			margin-bottom: 30px;
			}
		}
	.col2, .col2-header {
		margin-bottom: 50px;
		}
	.h3-collections {
		font-size: 16px;
		font-weight: 300;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: $filet_gris;
		}
	.h3-collections a:hover {
		color: $color_bleu;
		font-weight: 700;
		text-decoration: none;
		}

	}



	
/** CONTACTS **/

#contacts {

	.col1 {
		h2 {
			margin-bottom: 50px;
			}
		}

	.col2 {
		h2 {
			margin-bottom: 10px;
			}
		.diffusion, .adresse {
			font-size: 12px;
			line-height: 14px;
			color: $color_gris2;
			font-style: italic;
			}
		.item-img {
			position: relative;
			width: 123px;
			}
		}

	}



/** PANIER **/
	
#panier {

	h2 {
		margin-bottom: 50px;
		span {
			color: $color_gris2;
			font-weight: 300;
			}
		}
	.col2 {
		#tableau {
			margin-top: -15px;
			}
		.cel1 {
			float: left;
			width: 260px;
			padding: 10px;
			.cel11 {
				float: left;
				}
			.cel12 {
				float: left;
				width: 210px;
				margin-left: 15px;
				font-size: 12px;
				line-height: 16px;
				.isbn {
					font-size: 10px;
					}
				.cel121 {
					margin-top: 3px;
					float: left;
					font-size: 10px;
					}
				.cel122 {
					margin-top: 3px;
					float: left;
					margin-left: 15px;
					font-size: 10px;
					}
				}
			}
		.cel2 {
			float: left;
			width: 60px;
			padding: 10px;
			text-align: center;
			}
		.cel3 {
			float: left;
			width: 55px;
			padding: 10px;
			text-align: center;
			}
		.cel7 {
			float: left;
			width: 55px;
			padding: 10px;
			text-align: center;
			}
		.cel4 {
			float: left;
			width: 70px;
			padding: 10px;
			text-align: right;
			}
		.entete {
			font-weight: 500;
			margin-bottom: 20px;
			border-bottom: $filet_gris;
			}
		.ligne {
			background: #e5e5e5;
			margin-bottom: 10px;
			.ligne-padding {
				padding-top: 20px;
				}
			.quantite {
				margin-top: -6px;
				width: 40px;
				text-align: center;
				}
			.livre_prix_total {
				font-weight: 500;
				}
			}
		.cel5 {
			float: left;
			width: 475px;
			padding: 10px;
			text-align: left;
			}
		.cel6 {
			float: left;
			width: 85px;
			padding: 10px;
			text-align: right;
			}
		.ht {
			margin-top: 20px;
			text-align: left;
			border-top: $filet_gris;
			}
		.tva {
			text-align: left;
			border-top: $filet_gris;
			}
		.tva1, .tva2 {
			display: none;
			}
		.ttc {
			margin-top: 10px;
			text-align: left;
			background: #e5e5e5;
			font-weight: 500;
			}
		.pousuivre {
			margin-top: 50px;
			float: right;
			background: $color_gris3;
			}
		.pousuivre:hover {
			background: $color_bleu;
			}
		.valider {
			height: 25px;
			font-family: 'Roboto', sans-serif;
			font-size: 14px;
			font-weight: 400;
			margin-top: 50px;
			margin-left: 15px;
			float: right;
			background: $color_gris3;
			}
		.valider:hover {
			background: $color_bleu;
			}
			
		}
		
	}


/** CLIENT - RETOUR **/
	
#client, #retour {

	h2 {
		margin-bottom: 50px;
		span {
			color: $color_gris2;
			font-weight: 300;
			}
		}
	.col1 {
		#tableau {
			}
		.cel1 {
			background: #e5e5e5;
			margin-bottom: 10px;
			width: 260px;
			padding: 10px;
			.cel11 {
				float: left;
				}
			.cel12 {
				float: left;
				width: 210px;
				margin-left: 15px;
				font-size: 12px;
				line-height: 16px;
				.isbn {
					font-size: 10px;
					}
				.cel121 {
					margin-top: 3px;
					float: left;
					font-size: 10px;
					}
				.cel122 {
					margin-top: 3px;
					float: right;
					margin-left: 15px;
					font-size: 14px;
					font-weight: 500;
					}
				}
			}
		.cel5 {
			float: left;
			width: 155px;
			padding: 10px;
			text-align: left;
			}
		.cel6 {
			float: left;
			width: 85px;
			padding: 10px;
			text-align: right;
			}
		.ht {
			margin-top: 20px;
			font-size: 12px;
			text-align: left;
			border-top: $filet_gris;
			}
		.tva {
			text-align: left;
			font-size: 12px;
			border-top: $filet_gris;
			}
		.ttc {
			margin-top: 10px;
			text-align: left;
			background: #e5e5e5;
			font-weight: 500;
			}
		.panier {
			margin-top: 50px;
			float: right;
			background: $color_gris3;
			}
		.panier:hover {
			background: $color_bleu;
			}
		}
	.col2 {
		h3 {
			margin-bottom: 30px;
			strong {
				font-weight: 500;
				}
			}
		.ligne {
			margin-top: 10px;
			width: 600px;
			padding: 0px;
			border: 0px solid red;
			.ligne-align {
				 text-align: right;
				}
			}
		.form-label {
			font-size: 14px;
			font-weight: 400;
			}
		.form-label-left {
			margin-left: 15px;
			}
		input[type="text"], textarea {
			font-family: 'Roboto', sans-serif;
			font-size: 14px;
			font-weight: 400;
			margin-left: 5px;
			background: #e5e5e5;
			border: 0px;
			}
		.valider {
			font-family: 'Roboto', sans-serif;
			font-size: 14px;
			font-weight: 400;
			margin-top: 50px;
			margin-left: 15px;
			float: right;
			background: $color_gris3;
			}
		.valider:hover {
			background: $color_bleu;
			}
		.news {
			color: $color_gris2;
			font-style: italic;
			}
		.accueil {
			margin-top: 50px;
			float: right;
			}
		.w11 {width:110px;}
		.w12 {width:260px;}
		.w13 {width:180px;}
		.w14 {width:230px;}
		.w21 {width:55px;}
		.w22 {width:535px;}
		.w31 {width:210px;}
		.w32 {width:115px;}
		.w33 {width:390px;}
		.w34 {width:255px;}
		.w41 {width:200px;}
		.w42 {width:400px;}
		.w43 {width:395px; height:50px;}
		.w51 {width:60px;}
		.w52 {width:540px;}
		.w53 {width:535px; height:100px;}
		.w61 {width:105px;}
		.w62 {width:495px;}
		.w63 {width:490px;}
		
		}
		
		
	}

	
	
@media screen and (max-width: 1020px) {

	@import 'vtablette';

	}

@media screen and (max-width: 768px) {

		@import 'vtelephone';
	
	}