$page_width_table : 100%;

* {
	box-sizing: border-box;
}

.img-overlay {
	z-index: 0;
}

.desk {
	display: none;
}
.tel {
	display: block;
	float: right;
	.nav-btn {
		display: inline-block;
		margin-top: 15px;
		padding: 0 5px;
		text-align: center;
		background: #fff;
		border-radius: 3px;
		border: 1px solid #117f98;
		cursor: pointer;
		div {
			width: 30px;
			height: 4px;
			margin: 7px 0;
			border-radius: 2px;
			background: #117f98;
		}
	}
	nav {
		position: fixed;
		z-index: 1000;
		top: 36px;
		left: 100%;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		#jsddm {
			width: 100%;
		}
		li {
			float: none;
			border-bottom: 1px solid #eee;
			a, span {
				display: inline-block;
				padding: 15px 0px 15px 0px;
			}
			ul {
				display: inline;
				position: relative;
				visibility: visible !important;
				li {
					display: inline;
					border: 0;
				}
			}
		}
		li:last-child {
			/*border: 0;*/
		}
		#nav7 {
			display: block;
		}
		#nav3, #nav31, #nav32 {
			width: 25%;
		}
	}
}
.tel-inline {
	display: inline;
}
.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
}

#page {
	position: relative;
	overflow: hidden;
	.page-wrapper {
    	width: 96%;
  	}
	.contenu {
		width: 96%;
		margin: 120px auto 50px auto;
	}
	header {
		position: fixed;
		z-index: 10;
		width: 100%;
		background: #fff;
		#alerte {
			position: fixed;
			z-index: 100;
			top: auto;
			bottom: 0;
			left: 0;
		}
		#logo {
			display: inline-block;
			margin: 6px auto 0 auto;
			img {
				width: 120px;
			}
		}
	}
	footer {
		padding-top: 10px;
		padding-bottom: 15px;
		#coordonnees {
			width: 100%;
		}
		#newsletter {
			float: left;
			width: 210px;
			margin-top: 15px;
			margin-left: 0;
		}
		#reseaux {
			float: left;
			width: 100%;
			margin-top: 15px;
			margin-left: 0;
			div {
				float: left;
			}
		}
	}
	.col3 {
		width: 100%;
	}
}


/** HOME **/
#hp {
	.slider-block {
		margin-top: -15px;
		margin-bottom: 15px;
		margin-left: -2%;
    	margin-right: -2%;
	}
	.col1 {
		display: none;
	}
	.col2 {
		float: none;
		width: 100%;
		h2 {
			text-align: center;
			margin-bottom: 10px;
		}
		.new {
			width: 175px;
			margin: 20px auto 0 auto;
			float: none;
		}
	}
}


/** ACTU **/

#actualite {
	.col1 {
		width: 100%;
		.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;
			}
		}	
	}	
}
	

/** CATALOGUE **/

#catalogue {
	.lettres {
		margin-top: 10px;
		margin-left: 0;
		line-height: 1.7;
	}
	.img-shadow {
		width: 280px;
	}
	.item-width-livre {
		float: none;
		width: 175px;
		margin: 25px auto;
	}
	.item-width-livre .img-shadow {
		width: 175px;
	}
	.item-width-auteur {
		width: 48%;
		height: 220px;
	}
	.item-width-auteur .img-shadow {
		width: 130px;
	}
	.item-left-auteur {
		margin-left: 0;
	}
	.item-width-auteur-fiche {
		width: 175px;
		float: none;
		margin: 25px auto 0 auto;
	}
	.item-width-auteur-fiche .img-shadow {
		width: 175px;
	}
	.img-width-aussi {
		width: 135px;
		float: none;
		margin: 25px auto 0 auto;
	}
	.img-width-aussi .img-shadow {
		width: 135px;
	}
	.retour {
		margin-bottom: 15px;
 	}
	.presse-lien, .presse-lien-left {
		margin-left: 15px;
	}
	.col-left {
		h2 {
			margin-top: 20px;
		}
	}
	.col1 {
		width: 100%;
		h2.auteur {
			margin-bottom: 0;
			margin-top: 20px;
		  }
		#visuels .img-visuel1 {
			max-width: 280px;
		}
		.ajout {
			margin: 10px auto;
			display: block;
			width: 175px;
			text-align: center;
		}
	}
	.col2 {
		width: 100%;
		margin-top: 30px;
	  }
	.col2.auteur {
		margin-top: -20px;
	  }
}
#catalogue.contenu {
	margin-top: 90px;
}
	

/** COLLECTIONS **/

#collections {
	.col1 {
		float: left;
		width: 100%;
		max-width: 280px;
		margin-bottom: 0;
		.item {
			margin-bottom: 15px;
		}
	}
	.col2 {
		float: left;
		width: 100%;
		margin-bottom: 35px;
	}
}
	

/** CONTACT **/

#contacts {
	.col1 {
		float: left;
		width: 100%;
		h2 {
			margin-bottom: 15px;
		}
	}
	.col2 {
		float: left;
		width: 100%;
		margin-top: 30px;
		.img-width-equipe {
			margin-top: 20px;
			max-width: 145px;
			width: 44%;
		}
	}
}
	

/** PANIER **/

#panier {
	.col1 {
		float: left;
		width: 100%;
		h2 {
			margin-bottom: 15px;
		}
	}
	.col2 {
		h2 {
			margin-bottom: 25px;
			line-height: 1.3;
		}
		float: left;
		width: 100%;
		margin-top: 30px;
		.ligne .ligne-padding {
			padding-top: 10px;
		}
		.cel1.entete {
			display: none;
		}
		.cel1 {
			width: 100%;
		}
		.cel2 {
			width: 25%;
		}
		.cel3 {
			width: 25%;
		}
		.cel7 {
			width: 25%;
		}
		.cel4 {
			width: 25%;
		}
		.cel5 {
			width: 75%;
		}
		.cel6 {
			width: 25%;
		}
		.valider {
			margin-left: 0;
		}
		.pousuivre {
			float: left;
		}

		@media screen and (max-width: 370px) {
			.valider {
				float: none;
				margin: 30px auto 20px auto;
				display: block;
			}
			.pousuivre {
				float: none;
				margin: 0 auto;
				display: block;
				width: 200px;
			}
		}
	}
}
	

/** CLIENT & RETOUR **/

#client, #retour {
	h2 {
		margin-bottom: 15px;
		line-height: 1.4;
	}
	.col1 {
		width: 100%;
		.cel1 {
			width: 100%;
			.cel11 {
				float: left;
				width: 12%;
			}
			.cel12 {
				width: 80%;
				float: right;
			}
		}
		.cel5 {
			width: 75%;
		}
		.cel6 {
			width: 25%;
		}
		.panier {
			margin: 30px auto;
			display: block;
			float: none;
			width: 170px;
			text-align: center;
		}
	}
	.col2 {
		float: left;
		width: 100%;
		margin-top: 30px;
		#client-form {
			margin-top: 20px;
		}
		.ligne {
			width: 100%;
			margin-top: 0;
		}
		.form-label {
			display: block;
		}
		.w11, .w12, .w14, .w31, .w34 {
			width: 100% !important;
			text-align: left !important;
			margin-bottom: 10px;
		}
		.w13, .ligne-align, .w32 {
			width: 100%;
			float: left;
			text-align: left !important;
		}
		.ligne-align {
			margin-bottom: 10px;
		}
		.w21 {
			width: auto;
		  }
		.w22 {
			width: 100%;
		}
		.w33 {
			margin-bottom: 0;
		}
		.w43, .w53, .w63 {
			width: 100%;
	    }
		.w62 {
			margin-bottom: 20px;
		}
		.valider {
			margin: 30px auto;
			float: none;
			display: block;
		}
		input[type="text"], textarea {
			margin-left: 0;
		}
		.accueil {
			margin: 40px auto;
			float: none;
			display: block;
			width: 150px;
			text-align: center;
		}
	}
}	


/** COLLECTION **/

#collections {
	.col1-header {
		margin-bottom: 30px;
		width: 80%;
	}
	.col2-header {
		margin-bottom: 30px;
	}
	.col2 {
		.item-width-auteur-fiche {
			float: none;
			width: 175px;
			margin: 20px auto 0 auto;
		}
		.item-left-auteur-fiche {
			margin-left: auto;
		}
	}
}