/*

##############################################
### CARTE DE FRANCE DES SITES PIERRE FABRE ###
##############################################
### 2.6 ### Agence VENT D'AUTAN © 2018 #######
##############################################

# NOIR     #222222  #444444
# GRIS     #31414F  #506374  #687A8A  #A8BACA
# BLEU     #0B5394  #29ABE2
# ORANGE   #FF9D00
# ROUGE    #C23C33

*/

/* DÉFAUT */

	html, body { position:relative; font-family:'Open Sans', sans-serif; margin:0; padding:0; outline:0; height:100%; width:100%; max-height:100%; max-width:100%; }
	html { background-color:#DDD; }
	body { color:#222; word-wrap:break-word; overflow:hidden; }

	a, a:visited { color:#08F; text-decoration:none; outline:0; -webkit-transition:color .2s ease, background-color .2s ease; transition:color .2s ease, background-color .2s ease; }
	a:hover, a:focus { color:#222; text-decoration:none; outline:0; }
	a:hover *, a:focus * { outline:0; }
	
	h1, h2, h3, h4, h5, h6 { font-family:'Open Sans', sans-serif; font-weight:400; margin:0; }
	ul, ol, ul li, ol li { list-style:none inside; margin:0; padding:0; }
	p { margin:0; }
	label { font-weight:400; margin:0; }
	button { font-family:'Open Sans', sans-serif; border-width:0; outline:0; box-shadow:none; }

	* { -webkit-box-sizing:border-box; box-sizing:border-box; }
	*:focus { outline:0; }

	@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }

	.hidden { display:none; }

/* STRUCTURE */

	.body { position:fixed; z-index:50; width:100vw; height:100vh; margin:auto; text-align:center; line-height:0;
		background:#DDD url('content/interface/background.jpg') center center no-repeat; background-size:cover; }
	.content { position:relative; z-index:100; width:100%; height:100%; padding:0; background-color:transparent; overflow:hidden; pointer-events:none; touch-action:none; 
		display:flex; flex-direction:column; flex-wrap:wrap; justify-content:center; align-content:center; align-items:center; }
	.side { flex-basis:25%; width:25%; height:100%; flex-shrink:0; flex-grow:1; overflow:hidden; }
	.map { flex-basis:75%; width:calc(75% - 60px); height:calc(100% - 60px); margin:30px; flex-shrink:0; flex-grow:1; overflow:visible; }

/* COLONNE */

	.side { position:relative; z-index:750; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; background-color:rgba(255,255,255,0.5); 
		transition:transform 0.25s ease; will-change:transform; }
	.side .side-content { width:100%; max-height:100%; text-align:center; padding:30px 0; pointer-events:all; touch-action:auto; overflow-y:auto; }
	.side .logo { width:50%; height:auto; margin:0 auto 30px auto; }
	.side .legend { width:75%; margin:0 auto 10px auto; padding:0 10px; border-radius:26px; font-size:16px; line-height:32px; font-weight:400; 
		color:#FFF; background-color:#788A9A; cursor:pointer; stransition:all 0.25s ease; }
	.side .legend.active { width:85%; padding:10px 10px; font-size:18px; font-weight:600; color:#FFF; background-color:#29ABE2; }

/* CARTE */

	.map { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; pointer-events:none; touch-action:none; }
	.map .map-content { position:relative; z-index:250; width:100%; transition:transform 0.2s ease; transform:translate(0,0) scale(1); }
	.map .map-content:after { display:block; content:""; padding-bottom:100%; }

	.map .france { position:absolute; z-index:250; top:0; right:0; left:0; display:block; width:100%; }
	.map .france .france-svg { display:block; max-width:100%; max-height:100%; }

/* MARQUEURS */

	.marker { position:absolute; z-index:500; width:50px; height:auto; padding:5px; margin:-5px; cursor:pointer; opacity:0.75; transition:transform 0.2s ease, opacity 0.2s ease; 
		pointer-events:all; touch-action:auto; }
	.marker.active { z-index:750; transform:scale(1.5) translateY(-12.5%); pointer-events:none; touch-action:none; }
	.map.zoom .marker { opacity:0.5; }
	.map.zoom .marker.active { opacity:1; }

/* ÉLÉMENTS */

	/* Zoom */

	.clear-zone { position:absolute; z-index:25; top:0; left:0; right:0; bottom:0; pointer-events:all; touch-action:auto; }

	.zoom-out { position:absolute; z-index:750; top:30px; right:30px; width:75px; height:75px; border-radius:37.5px; background-color:#31414F; opacity:0; transition:opacity 0.2s ease; 
		pointer-events:none; touch-action:none; }
	.zoom-out.active { opacity:1; pointer-events:all; touch-action:auto; transition:background-color 0.25s ease; will-change:background-color; }
	.zoom-out.active:hover { background-color:#C23C33; cursor:pointer; }
	.zoom-out .fa { font-size:32px; line-height:75px; color:#FFF; }

	/* Fermeture */

	.close-app { position:absolute; z-index:1000; right:0; bottom:0; pointer-events:all; touch-action:auto; background-color:#FFF; color:#C23C33; opacity:0;
		text-align:center; font-size:60px; font-weight:700; line-height:75px; width:75px; height:75px; cursor:pointer; }
	.close-app:hover, .close-app:focus { opacity:1; }

	/* Mobile */

	.nav { display:none; position:absolute; z-index:750; top:0; left:0; height:60px; width:60px; background-color:#29ABE2; 
		transition:background-color 0.25s ease; pointer-events:all; touch-action:auto; cursor:pointer; }
	.nav .bar { width:30px; height:4px; background-color:#FFF; margin:3px auto; transform-origin:50% 50%; transition:all 0.25s ease; pointer-events:none; touch-action:none; }

	.nav.active { background-color:#687A8A; }
	.nav.active .bar:nth-child(1) { transform:translateY(250%) rotate(45deg); }
	.nav.active .bar:nth-child(2) { width:0; opacity:0; }
	.nav.active .bar:nth-child(3) { transform:translateY(-250%) rotate(-45deg); }

	.notices { display:none; position:absolute; z-index:750; bottom:0; left:0; right:0; padding:20px 15px; text-align:center; background-color:rgba(255,255,255,0.5); 
		transform:translateY(100%); transition:all 0.25s ease; }
	.notices.visible { transform:translateY(0); }
	.notices .notice { font-size:18px; line-height:25px; }
	.notices .notice .notice-city { font-size:24px; line-height:30px; font-weight:700; color:#31414F; text-transform:uppercase; }
	.notices .notice .notice-country { font-size:18px; line-height:25px; font-weight:400; color:#687A8A; }

	/* Debug */

	.center { display:none; position:absolute; z-index:5000; top:50%; left:50%; width:20px; height:20px; border-radius:10px; margin:-10px 0 0 -10px; text-align:center; 
		font-size:15px; line-height:20px; background-color:rgba(255,255,255,0.5); pointer-events:none; touch-action:none; }

/* INFOBULLES */

	.map .tooltip { position:absolute; z-index:1000; width:50px; height:50px; margin:-18px 0 0 -5px; background-color:#29ABE2; border-radius:25px; cursor:pointer;
		font-size:50px; font-weight:700; line-height:46px; color:#FFF; opacity:0; pointer-events:none; touch-action:none; transition:opacity 0.1s ease; }
	.map .tooltip.active { opacity:1; pointer-events:all; touch-action:auto; }

/* INFOS */

	.infos { position:absolute; z-index:1000; top:30px; bottom:30px; left:30px; right:30px; padding:0; text-align:left; overflow:visible; pointer-events:none; touch-action:none; }

	.infos .info { position:absolute; z-index:1250; top:100%; bottom:0; right:0; width:100%; max-height:100%; background-color:#FFF; box-shadow:0 5px 30px rgba(0,0,0,0.25); opacity:0;
		display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; overflow-y:auto; transition:top 0.5s 0.125s ease, opacity 0.5s 0.125s ease; }
	.infos .info.active { opacity:1; top:0; pointer-events:all; touch-action:auto; }

	/* En-tête */

	.infos .info .info-header { flex-shrink:0; flex-grow:0; position:relative; z-index:1500; min-height:75px; padding:0; 
		display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-content:stretch; align-items:stretch; 
		box-shadow:0 15px 90px rgba(0,0,0,0.15); overflow:visible; }

	.infos .info .info-header .info-title { order:1; align-self:center; padding:15px 30px; font-size:30px; line-height:35px; font-weight:400; color:#687A8A; }
	.infos .info .info-header .info-title .info-name { text-transform:uppercase; font-weight:700; color:#31414F; }
	.infos .info .info-header .info-title .info-city { font-weight:600; color:#687A8A; }
	.infos .info .info-header .info-title .info-country { font-weight:400; color:#A8BACA; }

	.infos .info .info-header .info-close { order:2; flex-shrink:0; flex-grow:0; display:flex; flex-direction:column; justify-content:center;
		text-align:center; font-size:60px; line-height:0; padding-bottom:3px; width:75px; min-height:75px; font-weight:700; background-color:#C23C33; color:#FFF; cursor:pointer; }

	/* Média */

	.infos .info .info-overview { flex-shrink:1; flex-grow:1; position:relative; z-index:1250; width:100%; min-height:260px;
		/* border:30px solid #A8BACA; background-color:#A8BACA; */ border:30px solid #FFF; 
		display:flex; flex-direction:column; justify-content:center; align-content:stretch; align-items:stretch; overflow:hidden; }
	.infos .info .info-overview.fullscreen { position:fixed; z-index:6000; top:0; left:0; right:0; bottom:0; width:100%; height:100%; border-width:0; }
	.infos .info .info-overview .info-image { position:relative; z-index:1500; width:100%; height:auto; object-fit:cover; }
	.infos .info .info-overview .info-iframe { position:absolute; z-index:1500; top:0; left:0; right:0; bottom:0; width:100%; height:100%; border-width:0; padding:0; margin:0; }

	.infos .info .info-overview:after { position:absolute; z-index:1250; top:50%; left:50%; width:60px; height:60px; border-radius:30px; text-align:center; margin:-30px 0 0 -30px; 
		font-family:"FontAwesome"; content:"\f110"; font-size:45px; line-height:60px; background-color:#687A8A; color:#FFF; }
	.infos .info.active .info-overview:after { animation:spin 2s linear infinite; }
	.infos .info .info-overview .info-mode { position:absolute; z-index:1750; top:20px; right:20px; width:60px; height:60px; border-radius:30px; text-align:center; 
		font-size:30px; line-height:60px; background-color:#687A8A; color:#FFF; cursor:pointer; }
	.infos .info .info-overview.fullscreen .info-mode .fa:before { content:"\f00d"; }

	/* Description */

	.infos .info .info-content { flex-shrink:0; flex-grow:0; position:relative; z-index:1500; 
		display:flex; flex-direction:row; flex-wrap:nowrap; align-content:stretch; align-items:stretch; box-shadow:0 -15px 90px rgba(0,0,0,0.15); }
	
	.infos .info .info-content .info-description { flex-basis:60%; width:60%; overflow:hidden; padding:25px 30px; }
	.infos .info .info-content .info-details { flex-basis:40%; width:40%; overflow:hidden; padding:25px 30px; border-left:1px solid #DDD; }

	.infos .info .info-content.half-content .info-description { flex-basis:50%; width:50%; }
	.infos .info .info-content.half-content .info-details { flex-basis:50%; width:50%; }

	.infos .info .info-content.quart-content .info-description { flex-basis:70%; width:70%; }
	.infos .info .info-content.quart-content .info-details { flex-basis:30%; width:30%; }

	.infos .info .info-content .info-description .info-text { font-size:18px; line-height:30px; font-weight:400; color:#31414F; }
	.infos .info .info-content .info-description .info-text ul li { font-size:14px; line-height:25px; font-weight:400; }
	.infos .info .info-content .info-description .info-text ul li:before { content:"• "; font-weight:700; color:#A8BACA; }
	.infos .info .info-content .info-details .info-detail { position:relative; font-size:18px; line-height:30px; font-weight:400; color:#31414F; margin:0; padding-left:25px; }
	.infos .info .info-content .info-details .info-detail + .info-detail { margin-top:15px; }
	.infos .info .info-content .info-details .info-detail .info-empty { color:#A8BACA; }
	.infos .info .info-content .info-details .info-detail .info-label { font-size:18px; line-height:30px; font-weight:600; color:#31414F; }
	.infos .info .info-content .info-details .info-detail .info-label .fa { position:absolute; top:6px; left:0; width:20px; text-align:center; font-weight:400; color:#A8BACA; }

/* ADAPTABILITÉ */

	/* LARGE */

	@media (max-width:1199px) {
		.side { flex-basis:30%; width:30%; }
		.map { flex-basis:70%; width:calc(70% - 60px); }
		}

	/* MEDIUM */

	@media (max-width:991px) {
		.side { flex-basis:35%; width:35%; }
		.map { flex-basis:65%; width:calc(65% - 30px); margin:15px; }
		.infos { top:0; bottom:0; left:0; right:0; }
		.infos .info .info-header .info-title { font-size:24px; line-height:30px; }
		.infos .info .info-content .info-description .info-text { font-size:15px; line-height:25px; }
		.infos .info .info-content .info-details .info-detail,
		.infos .info .info-content .info-details .info-detail .info-label { font-size:15px; line-height:25px; }
		.infos .info .info-content .info-details .info-detail + .info-detail { margin-top:5px; }
		.side .legend { width:85%; margin-bottom:5px; }
		}

	/* SMALL */

	@media (max-width:767px) {
		.side { flex-basis:auto; width:100%; position:absolute; top:0; left:0; bottom:0; transform:translateX(-100%); }
		.side.open { transform:translateX(0); pointer-events:all; touch-action:auto; }
		.side .logo { max-width:240px; }
		.side .legend { width:75%; max-width:320px; }
		.map { flex-basis:100%; width:100%; margin:0; }
		.map .map-content { width:calc(100% - 20px); }
		.nav { display:flex; flex-direction:column; justify-content:center; }
		.notices { display:block; }
		.zoom-out { top:0; right:0; width:60px; height:60px; border-radius:0; }
		.zoom-out .fa { font-size:32px; line-height:60px; }
		.map .marker { width:30px; }
		.map .tooltip { width:32px; height:32px; font-size:30px; line-height:30px; margin:-14px 0 0 -6px; }
		.map .zoom .marker { width:25px; }
		.map .zoom .tooltip { width:27px; height:27px; font-size:25px; line-height:25px; margin:-14px 0 0 -6px; }
		.infos .info { min-height:100%; bottom:initial; overflow-y:auto; }
		.infos .info .info-header .info-title { padding:10px 15px; font-size:20px; line-height:25px; }
		.infos .info .info-overview { flex-grow:1; border-width:0; background-color:#A8BACA; }
		.infos .info .info-overview .info-iframe { /* min-height:75vh; */ }
		.infos .info .info-content { flex-grow:0; flex-wrap:wrap; }
		.infos .info .info-content .info-description,
		.infos .info .info-content .info-details { flex-basis:100% !important; width:100% !important; padding:12px 15px; }
		.infos .info .info-content .info-description .info-text { font-size:15px; line-height:25px; }
		.infos .info .info-content .info-details { border-top:1px solid #DDD; border-left-width:0; }
		.infos .info .info-content .info-details .info-detail,
		.infos .info .info-content .info-details .info-detail .info-label { font-size:15px; line-height:25px; }
		.infos .info .info-content .info-details .info-detail .info-label .fa { top:4px; }
		.infos .info .info-content .info-details .info-detail + .info-detail { margin-top:5px; }
		}