/*****************************************************************************************************************************/
/* Reset - Redefinitions des balises HTML */
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
*{margin:0; padding:0;}
*, *:after, *::before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, blockquote{font-family:'Open Sans', sans-serif; font-size:13px; color:#586972; font-weight:400;}

fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal;}

a, button{text-decoration:none; cursor:pointer; outline:none; transition:all 0.3s ease 0s;}
a:hover{text-decoration:none;}

input:focus, a:focus, textarea:focus, select:focus, button:focus{outline:none;}

select option{padding:0 3px;}

ul li{list-style:none;}

table{border-collapse:collapse; border-spacing:0;}

iframe{border:none;}

hr{display:none;}

textarea{resize:none;}

img{vertical-align:middle;}

::-moz-selection{background:#b3d4fc; text-shadow:none;}

::selection{background:#b3d4fc; text-shadow:none;}

*::-webkit-input-placeholder {color:#c9c9d0;}
*:-moz-placeholder {color:#c9c9d0; opacity: 1;}
*::-moz-placeholder {color:#c9c9d0; opacity: 1;}
*:-ms-input-placeholder {color:#c9c9d0;}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* CLASS génériques */
/*****************************************************************************************************************************/
	strong{font-weight:bold;}
	em{font-style:italic;}

	.img-responsive{max-width:100%; height:auto;}

	.hide-desk{display:none;}
	.hide-mob{display:inline-block;}

	.hidetext{font-size:0; text-indent:-9999px;}



/*****************************************************************************************************************************/

/*****************************************************************************************************************************/
/* Structure generale */
/*****************************************************************************************************************************/
	body {
		text-align: center;
		background: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	#middle, 
	#middle .page {
		position: relative;
		width: 100%;
		margin: 0 auto;
	}

	#middle {
		background: url(../img/bg-page.png) no-repeat;
		background-size: cover;
	}

	#middle .page {
		max-width: 1200px;
		padding: 50px 0;
		text-align: left;
	}


		/* titre */
		#middle h1 {
			position: relative;
			margin: 0 0 0 5px;
			padding-left: 84px;
			font-size: 29px;
			line-height: 33px;
		}

			#middle h1 strong {
				font-weight: 700;
			}

			#middle h1 span {
				color: #397cbf;
				font-weight: 300;
				text-transform: none;
			}

			#middle h1:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 69px;
				height: 64px;
				background: url(../img/picto-pointer.png) no-repeat;
				background-size: 100% auto;
				display: block;
			}



		/* ------------------- ecran accueil ------------------- */
		#middle .loc-mag {
			display: flex;
			margin-top: 44px;
		}


			/* visuel magazine */
			#middle .loc-mag .visu-mag {
				width: 20.4%;
			}


			/* texte magazine */
			#middle .loc-mag .txt-mag {
				width: 79.6%;
				padding: 33px 82px 0 48px;
			}

				#middle .loc-mag .txt-mag p {
					color: #586972;
					font-weight: 300;
				}

				#middle .loc-mag .txt-mag .txt-1 {
					padding: 0 200px 26px 0;
					font-size: 29px;
					line-height: 49px;
				}

				#middle .loc-mag .txt-mag .txt-2 {
					font-size: 20px;
					line-height: 32px;
				}



		/* ------------------- ecran resultat recherche - carte ------------------- */
		/* cadre recherche */
		#middle .loc-cadre {
			margin: 32px 30px 0 90px;
		}


			/* bandeau localisation */
			#middle .loc-retrait {
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				flex-wrap: wrap;
				padding: 14px 22px 19px 29px;
				background-color: #e2e2e2;
				border: 1px solid #b8b9b9;
			}

				#middle .loc-retrait .loc-form {
					width: 185px;
				}

				#middle .loc-retrait .loc-form + .loc-form {
					margin-left: 25px;
				}

					
					/* formulaire */
					#middle .loc-retrait label {
						margin-bottom: 6px;
						display: block;
					}

					#middle .loc-retrait .loc-input {
						width: 100%;
						height: 40px;
						padding: 0 15px;
						background-color: #fff;
						border: 1px solid #cdcdcd;
					}


					/* boutons */
					#middle .loc-retrait button {
						width: 100%;
						height: 40px;
						border: 1px solid #397cbf;
						border-radius: 20px;
						text-transform: uppercase;
					}

					#middle .loc-retrait .btn-autour {
						background-color: #fff;
						color: #397cbf;
					}

					#middle .loc-retrait .btn-autour:hover {
						background-color: #397cbf;
						color: #fff;
					}

						#middle .loc-retrait .btn-autour span {
							display: flex;
	    					align-items: center;
	    					padding-left: 15px;
						}

						#middle .loc-retrait .btn-autour span:before {
							content: '';
							width: 22px;
							height: 22px;
							margin-right: 12px;
							background: url(../img/picto-loc.png) no-repeat;
							background-size: 100% auto;
							display: inline-block;
						}

						#middle .loc-retrait .btn-autour:hover span:before {
							background-image: url(../img/picto-loc-hover.png);
						}

					#middle .loc-retrait .btn-trouver {
						background-color: #072346;
						color: #fff;
						font-weight: 700;
						opacity: 0.7;
					}

					#middle .loc-retrait .btn-trouver:hover {
						opacity: 1;
					}


			/* cadre resultats */
			#middle .loc-result {
				display: flex;
				border: 1px solid #b8b9b9;
				border-top: none;
			}


				/* liste resultats */
				#middle .loc-result .res-liste {
					width: 37.6%;
				}

					#middle .loc-result .res-item {
						position: relative;
						background-color: #f2f4f5;
						border-bottom: 1px solid #b8b9b9;
						transition: all 0.3s ease 0s;
					}

					#middle .loc-result .res-item:hover {
						background-color: #eaebec;
					}

						#middle .loc-result .res-item .rang {
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							top: 22px;
							left: 27px;
							width: 22px;
							height: 22px;
							background-color: #397cbf;
							border-radius: 22px;
							color: #fff;
							font-weight: 700;
						}

						#middle .loc-result .res-item .res-address {
							padding: 24px 80px 20px 58px;
							text-transform: uppercase;
							line-height: 18px;
						}

						#middle .loc-result .res-item .btn-more {
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							top: 34px;
							right: 34px;
							width: 34px;
							height: 34px;
							background-color: transparent;
							border: 1px solid #397cbf;
							border-radius: 34px;
							font-size: 20px;
							color: #19a8e2;
							opacity: 0.5;
						}

						#middle .loc-result .res-item .btn-more:hover {
							opacity: 1;
						}


						/* deroulant details */
						#middle .loc-result .res-item .details {
							padding: 0 55px 20px 58px;
							display: none;
						}

							#middle .loc-result .res-item .det-tt {
								padding-bottom: 22px;
								font-weight: 700;
							}

							#middle .loc-result .res-item .det-line {
								display: flex;
								justify-content: space-between;
								padding-bottom: 6px;
							}


				/* carte resultats */
				#middle .loc-result .res-map {
					width: 62.4%;
				}

					#middle .loc-result .res-map #map {
						width: 100%;
						height: 610px;
						border-left: 1px solid #b8b9b9;
						display: block;
					}


		/* ------------------- suggest recherche ------------------- */
		.typeahead,
		.tt-query,
		.tt-hint {
		  width: 389px;
		  height: 30px;
		  padding: 8px 12px;
		  border: 1px solid #cdcdcd;
		  outline: none;
		}

		.typeahead {
		  background-color: #fff;
		}

		.typeahead:focus {
		  border: 2px solid #19a8e2;
		}

		.tt-query {
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		}

		.tt-hint {
		  color: #999
		}

		.tt-menu {
		  width: 389px;
		  margin-top: 2px;
		  padding: 8px 0;
		  background-color: #fff;
		  border: 1px solid #ccc;
		  border: 1px solid rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
		}

		.tt-suggestion {
		  padding: 6px 15px;
		}

		.tt-suggestion:hover {
		  cursor: pointer;
		  color: #fff;
		  background-color: #19a8e2;
		}

		.tt-suggestion.tt-cursor {
		  color: #fff;
		  background-color: #19a8e2;

		}

		.tt-suggestion p {
		  margin: 0;
		}