/* ------------------------------------------------------------------------ */
/* Carte Leaflet et fiche contact                                            */
/* ------------------------------------------------------------------------ */
/*
 * Charge apres options.css et responsive.css (voir includes/inc-custom-css.php).
 * Ne reprend que ce qui change : la fiche posee sur la carte et l'habillage
 * de Leaflet. Le reste du bloc contact (position du .right, formulaire, titre)
 * continue de venir de options.css / responsive.css.
 *
 * Points de rupture repris a l'identique du theme : 1000px et 767px.
 */


/* ------------------------------------------------------------------------ */
/* Carte                                                                     */
/* ------------------------------------------------------------------------ */

/* Fond neutre pendant le chargement des tuiles. */
.acf-map,
.leaflet-container {
	background: #e9e9e9;
}

/* Fond de plan en gris, comme l'etait CARTO Positron avant son filigrane.
   Les tuiles OpenStreetMap arrivent en couleurs vives : on les desature
   presque entierement, on les eclaircit, et une pointe de sepia les fait
   tirer vers le beige #ede7df du theme plutot que vers un gris froid.
   Le marqueur et la fiche blanche ressortent d'autant mieux.

   Variante gris neutre, si le tirage chaud ne convient pas :
       filter: saturate(.12) brightness(1.18) contrast(.82);
   Couleurs d'origine : retirer le bloc. */
.acf-map .leaflet-tile-pane {
	filter: grayscale(.85) brightness(1.14) contrast(.85) sepia(.06);
}

/* Le balisage ACF (.marker) sert seulement de source de donnees a Leaflet :
   il ne doit jamais s'afficher. */
.acf-map .marker {
	display: none;
}

/* Leaflet empile ses calques de z-index 200 a 700. Sans contexte
   d'empilement sur .acf-map, ces calques remontent au niveau du bloc et
   passent par-dessus le formulaire et la fiche, alors qu'ils sont declares
   apres dans le DOM. Un z-index sur .acf-map les enferme ; le formulaire et
   la fiche repassent devant. */
.acf-map {
	z-index: 1;
}

.map .left {
	position: relative;
	z-index: 2;
}

.map .right {
	z-index: 2;
}

.leaflet-container {
	font-family: inherit;
}

.leaflet-popup-content-wrapper {
	border-radius: 2px;
	box-shadow: 0 6px 24px rgba(35, 31, 32, .22);
}

.leaflet-popup-content {
	margin: 14px 18px;
	text-align: center;
}

.leaflet-popup-content h3 {
	margin: 0 0 4px;
	padding: 0;
	font-size: 16px;
	line-height: 22px;
	color: #2c2728;
	font-family: 'Century Gothic Bold';
}

.leaflet-popup-content p {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: #6b6462;
}

/* Les commandes de zoom aux couleurs du theme. */
.leaflet-bar a,
.leaflet-bar a:hover {
	color: #2c2728;
	border-bottom-color: #ede7df;
}


/* ------------------------------------------------------------------------ */
/* Le conteneur de la fiche                                                  */
/* ------------------------------------------------------------------------ */

/* Pages internes : .right porte le fond blanc et le calage. On lui retire son
   padding, la fiche gere ses propres marges ligne par ligne. */
.map .right.fiche-wrap {
	max-width: 330px;
	padding: 0;
	background-color: #fff;
	box-shadow: 0 8px 30px rgba(35, 31, 32, .18);
}

/* Accueil : les deux fiches cote a cote, un peu plus larges qu'avant.
   Les .infos etaient flottantes avec 5px de padding ET 5px de marge : a
   50 % / 50 %, la somme depassait le conteneur et la seconde passait a la
   ligne des qu'on elargissait. Deux colonnes flex reglent le compte
   proprement, la marge est remplacee par un gap. */
#bloc_contact_home .right {
	max-width: 660px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

#bloc_contact_home .right .infos {
	width: 50%;
	float: none;
	margin: 0;
	padding: 0 0 0 12px;
}

#bloc_contact_home .right .infos:first-child {
	padding-left: 0;
}

#bloc_contact_home .right .infos .fiche-contact {
	background-color: #fff;
	box-shadow: 0 8px 30px rgba(35, 31, 32, .18);
}

/* Le widget Facebook retrouve une hauteur reelle : l'iframe fait 500px de haut,
   elle etait enfermee dans 128px avec overflow:hidden. Le max-height en vh
   evite qu'il ne pousse la fiche hors de l'ecran sur un portable. */
#bloc_contact_home .right .infos .fcb {
	height: auto;
	overflow: hidden;
	margin-bottom: 10px;
	background-color: #fff;
	box-shadow: 0 8px 30px rgba(35, 31, 32, .18);
}

#bloc_contact_home .right .infos .fcb:empty {
	display: none;
}

#bloc_contact_home .right .infos .fcb iframe {
	display: block;
	width: 100%;
	height: 300px;
	max-height: 32vh;
	border: 0;
}


/* ------------------------------------------------------------------------ */
/* La fiche                                                                  */
/* ------------------------------------------------------------------------ */

.fiche-tete {
	padding: 22px 24px 18px;
	border-bottom: 1px solid #ede7df;
}

.map .right .fiche-tete h3 {
	position: relative;
	margin: 0;
	padding: 14px 0 0;
	font-size: 22px;
	line-height: 28px;
	color: #2c2728;
	font-family: 'Century Gothic Bold';
}

/* Le filet decoratif du theme reste au-dessus du titre. Celui du dessous
   (options.css : .map .right h3:after) tomberait sur la pastille
   d'ouverture : on le retire. */
.map .right .fiche-tete h3:after {
	display: none;
}

.fiche-etat {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	line-height: 16px;
	color: #2c2728;
	letter-spacing: .03em;
}

.fiche-etat .pastille {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 9px;
	border-radius: 50%;
	background-color: #8dc63f;
	box-shadow: 0 0 0 3px rgba(141, 198, 63, .25);
	vertical-align: middle;
}

.fiche-etat.est-ferme .pastille {
	background-color: #c0392b;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .2);
}

.fiche-etat em {
	font-style: normal;
	color: #6b6462;
	margin-left: 2px;
}

.fiche-ligne {
	padding: 16px 24px;
	border-bottom: 1px solid #ede7df;
	overflow: hidden; /* le picto est flottant */
}

.fiche-ligne:last-child {
	border-bottom: 0;
}

.fiche-picto {
	display: block;
	float: left;
	width: 20px;
	height: 22px;
	margin-top: 2px;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: contain;
}

.fiche-picto-adresse {
	background-image: url(../img/picto-adress.png);
}

.fiche-picto-horaire {
	background-image: url(../img/picto-horaire.png);
}

.fiche-picto-tel {
	background-image: url(../img/picto-tel.png);
}

.fiche-corps {
	margin-left: 34px;
}

.fiche-intitule {
	margin-bottom: 5px;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8a827f;
}

.fiche-adresse {
	font-size: 16px;
	line-height: 22px;
	color: #2c2728;
}

.fiche-itineraire {
	display: inline-block;
	margin-top: 7px;
	padding-bottom: 1px;
	font-size: 13px;
	line-height: 18px;
	color: #2c2728;
	text-decoration: none;
	border-bottom: 1px solid #8dc63f;
}

.fiche-itineraire:after {
	content: " \2192";
}

.fiche-itineraire:hover,
.fiche-itineraire:focus {
	color: #2c2728;
	text-decoration: none;
	border-bottom-width: 2px;
}


/* Horaires : le jour a gauche, les heures alignees a droite. */
.fiche-horaires {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.fiche-horaires th,
.fiche-horaires td {
	padding: 3px 0;
	line-height: 20px;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

.fiche-horaires th {
	padding-right: 14px;
	white-space: nowrap;
	color: #6b6462;
}

.fiche-horaires td {
	text-align: right;
	color: #2c2728;
}

.fiche-horaires td.pleine-largeur {
	text-align: left;
	color: #6b6462;
}

.fiche-horaires tr.est-aujourdhui th,
.fiche-horaires tr.est-aujourdhui td {
	color: #2c2728;
	font-family: 'Century Gothic Bold';
}


.fiche-tel {
	display: inline-block;
	font-size: 19px;
	line-height: 24px;
	color: #2c2728;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

a.fiche-tel:hover,
a.fiche-tel:focus {
	color: #2c2728;
	text-decoration: none;
	border-bottom-color: #8dc63f;
}

.fiche-tel + .fiche-tel {
	margin-left: 14px;
}


/* ------------------------------------------------------------------------ */
/* Responsive — memes points de rupture que le theme                         */
/* ------------------------------------------------------------------------ */

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

	/* La carte redevient un bloc de 500px pousse par responsive.css ; la fiche
	   se cale dans le coin sans marge. */
	.map .right.fiche-wrap {
		max-width: 300px;
	}

	#bloc_contact_home .right .infos .fcb iframe {
		height: 240px;
	}
}

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

	/* responsive.css repasse .right en flux normal : la fiche prend toute la
	   largeur, sous la carte. */
	.map .right.fiche-wrap {
		max-width: 100%;
		margin-top: 12px;
	}

	.fiche-tete,
	.fiche-ligne {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Les deux fiches passent l'une sous l'autre. */
	#bloc_contact_home .right {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		align-items: stretch;
	}

	#bloc_contact_home .right .infos,
	#bloc_contact_home .right .infos:first-child {
		width: 100%;
		padding: 0;
	}

	#bloc_contact_home .right .infos .fiche-contact {
		margin-bottom: 10px;
	}

	#bloc_contact_home .right .infos .fcb iframe {
		height: 200px;
	}
}