/* @override 
	https://2025.clva69.fr/wp-content/themes/theme-pour-clva/grandLayout.css?* */

/* Repères  */
/*#content::before {
	content: "";
	width: 1px;
	height: 100vh;
	display: block;
	position: fixed;
	top: 0;
	left: 50%;
	border-left: 1px dashed #333;
	border-right: 1px dashed #FFF;
	z-index: 100;
}
#content::after {
	content: "";
	width: 33vw;
	height: 100vh;
	display: block;
	position: fixed;
	top: 0;
	left: 33%;
	border-left: 1px dashed #333;
	border-right: 1px dashed #333;
}
*/


/* Tests de responsive sur la home page */
@media (max-width: 767px) {
	.home #content > .row {
		/*background-color: white;*/
	}
	.home .entry,
	.single .entry {
		background-color: white;
		margin-left: -30px;
		padding-left: 30px;
		margin-right: -30px;
		padding-right: 30px;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	/* Créer un espace laissant appraitre la carte (par transparence)
	 	lors du scroll*/
	.single article > .post::after {
		content: "Itinéraire";
		display: block;
		width: 100vw;
		height: 60vh;
		background-color: rgba(255,255,255,0);
	    box-shadow: inset -5px 2px 8px rgba(0, 0, 0, 0.18);
	}
	
	/* La même idée avec un DOM plus propre */
	article {
		padding: 0 !important;
	}
	section {
		background-color: white;
		padding: 12%;
		width: 100%;
	}
}
article {
	padding-bottom: 50px;
}

#wrapper {
	padding-top: 0;
}

@media (min-width: 768px) {
	#wrapper {
		/* Place pour le header fixed */
		padding-top: 290px;
	}
}

@media (max-width: 767px) {
	

	/* Même schéma de titre par dessus la carte
	   mais dans une loop (celle des sorties) */
	.sortieIsInViewPort {
		position: relative;
		padding-top: 0;
	}

}

/*
 *
 *
 *
 * Intégration de TravellersPoint.com */


#carteContainer {
	width: 100vw;
	filter: grayscale(.7);
	z-index: -1;
	border: 0;
	
	
	/* Responsive : */
	position: fixed;
	top: -40px;
	left: 0;
	height: 100vh;
}
#carteContainer::before {
	/* Le seul moyen de mettre une ombre par dessus un iframe est le pseudo element */
    content: '';
    position: absolute;
    z-index: 2;
    box-shadow: inset -4px 7px 8px rgba(0, 0, 0, 0.04);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
#carteContainer iframe {
	height: calc(100vh + 40px);
	border: none;
	position: relative;
	z-index: -1;
}
/* Pour la carte All trips, l'iframe ne fonctionne pas très bien : obligé de mettre une image */
#allTripsJpegHasMap {
	background-image: url(img/carteAllTrips/map-1500.jpg);
	background-image: url(img/carteAllTrips/map-fullscreen-h1000.jpg);
	background-size: cover;
	background-position: center center;
	
	width: 100%;
	height: 100vh;
	margin-top: 40px;
}
.multiCartes,
#carteContainer iframe.multiCartes,
div.multiCartes.alternative {
	position: fixed;
	top: -40px; right: 0; left: 0;
	width: 100vw;
	height: calc(100vh + 40px);
	z-index: -2;
}
#allTripsJpegHasMap.multiCartes {
	z-index: -3;
}
.showThisMap,
#carteContainer iframe.multiCartes.showThisMap,
div.multiCartes.alternative.showThisMap {
	z-index: 100;
}

#carteContainer iframe.multiCartes,
#carteContainer div.multiCartes.alternative {
	opacity: 0;
	transition: opacity .5s ease-in-out 0s;
}
.opacity_un {
	opacity: 1;
	transition: opacity .5s ease-in-out 0s;
}

/* Alternative aux iFrame qui font planter les mobile :
    une vulgaire capture d'écran de merde  */
div.multiCartes.alternative {
	background-size: 100%;
	background-position: center top;
	background-repeat: no-repeat;
}
@media (min-width: 768px) {
	div.multiCartes.alternative {
		background-size: auto 100%;
		background-position: center top;
		background-repeat: no-repeat;
	}
}
@media (min-width: 768px) {
	#carteContainer {
		position: fixed;
		left: 0;
		top: -40px;
		/* Pour masquer le menu embeded de la carte */
		
		height: calc(100vh + 40px);
		width: calc(50vw - 15px);
	}
	#carteContainer iframe {
		height: calc(100vh + 40px);
	}
	#allTripsJpegHasMap {
		width: calc(50vw - 15px);
		height: 100vh;
	}
}
@media (min-width: 768px) {
	.multiCartes,
	#carteContainer iframe.multiCartes,
	#carteContainer div.multiCartes.alternative {
		right: 50%; 
		width: calc(50vw - 15px);
	}	
}
#carteContainer iframe.multiCartes,
#carteContainer div.multiCartes.alternative {
	opacity: 1;
	transition: opacity 5s ease-in-out 0s;
}
#carteContainer iframe.multiCartes.zoomEffet {
	opacity: 0;
	transition: opacity 5s ease-in-out 0s;
}
/* Les éléments de la page ont deux choix :
 	1 - Laisser la place à la carte 
 	2 - Passer par dessus 
 */
#footerMenu {
	padding-left: 0;
	margin-left: 0;
}
#footerMenu a {
	padding-bottom: 15px;
	display: block;
}

 @media (min-width: 768px) {
 	
	.placeAlaCarte,
	p.meta-info, {
		/* Laisse toute la place à la carte */
		margin-left: calc(50vw);
		text-align: left;
		padding-left: 15px;
	}
	#footerMenu {
		padding-left: calc(50vw - 15px);
	}
	.avecCarte .pagination,
	.post-type-archive-adresses h2,
	h1.single-title,
	.item-heading,
	.archive.category-sorties .post h2,
	.archive.category-sorties .post div.post_box_inner,
	
	.avecCarte .layoutIfMap > *,
	.avecCarte .layoutIfMap > ul,
	.page-id-2208 section > p {
		/* Laisse toute la place à la carte */
		padding-left: calc(50% + 15px);
	}
	.layoutIfMap > .wp-block-image,
	.entry > figure.wp-block-image {
		padding-left: 0;
		margin-left: 30%;
		margin-bottom: 30px;
		margin-top: 15px;
	}
	.entry hr {
		width: 50% !important;
		min-width: 50%;
		display: block;
		margin-left: 50%;
	}
	
	.mordSurLaCarte,
	.entry > .wp-block-gallery,
	.entry > figure.wp-block-gallery {
		/* Mord un tout petit peu sur la carte */
		padding-left: calc(35%);
	}
	
	.mordSurPlusLaCarte,
	.archive.category-sorties .post a.polaroid,
	.layoutIfMap .bonnes_adresses {
		/* Mord un tout petit peu sur la carte */
		padding-left: calc(25%);
	}
	.archive.category-sorties .post a.polaroid {
		display: block;
	}

	.overTheMap,
	.home .voituresHome,
	section.single-compte-rendu {
		/* Passe carrément devant la carte */
		margin-left: 0;
		padding-left: 0;
	}
	section.single-compte-rendu {
		/* Passe carrément devant la carte */
		/* On insiste un peu sur certaines déclarations */
		margin-left: 0;
		padding: 30px 12% !important;
		background-color: white;
	    box-shadow: -3px 2px 8px rgba(0, 0, 0, 0.18);

	}	
	.post_box p.meta-info {
		
	}
}


/* Une photo en lieu et place d'une carte*/

#photoAsMap {
	background-image: url(img/certificat-provisoire-1928);
	background-size: cover;
	background-position: left center;
    box-shadow: inset -5px 2px 8px rgba(0, 0, 0, 0.18);

	width: 100%;
	height: 100vh;
	margin-top: 40px;
	
	opacity: .5;
}

/* Une capture d'écran en lieu et place des itinéraires, 
   pour mobile, directement dans le flux */
.mobileOnly.map_screenshot_in_flux {
	display: block;
}
.archive.category-sorties #carteContainer {
	display: none;
}
@media (min-width: 768px) {
	.mobileOnly.map_screenshot_in_flux {
		display: none;
	}
	.archive.category-sorties #carteContainer {
		display: block;
	}
}