/* BOUTONS DES VISITES */

section > button.visite
{
position: relative;
overflow: hidden;
margin: 1em;
padding: 0px;
background: var(--picoun);
box-shadow: none !important;
border: none;
border-radius: 4px;
}
section > button.visite img
{
display: block;
filter: opacity(0.9) saturate(90%);
transition: transform 0.3s, filter 0.3s;
}
@media (min-width: 1101px) {
	section > button.visite:hover img
	{
	transform: scale(1.1);
	filter: opacity(1) saturate(110%);
	}
}
section > button.visite span
{
display: block;
position: absolute;
width: 100%;
padding: 8px 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.25) url(360.png) no-repeat left;
color: white;
font-size: 13px;
font-weight: 600;
transition: background 0.5s;
}
section > button.visite:hover span {background-color: rgba(0,0,0,0.5);}

/* VISITE VIRTUELLE */

section.visite
{
z-index: 10;
position: relative;
overflow: hidden;
height: 100vh;
}
section iframe.visite
{
display: none;
z-index: -1;
position: absolute;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
}
section.visite iframe.visite.on
{
display: block;
z-index: 1;
}

/* Bandeau */
section aside.visite
{
z-index: 2;
position: fixed;
overflow: hidden;
box-sizing: border-box;
width: 100%;
left: 0;
top: -256px;
background: rgba(0,0,0,0.9);
font-size: 0px;
transition: top 0.5s;
}
section.visite aside.visite {top: 0;}
section aside.visite > div
{
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 24px;
vertical-align: middle;
font-size: 15px;
}
section aside.visite > div:first-of-type {text-align: left;}
section aside.visite > div:last-of-type
{
margin-bottom: -4px;
text-align: right;
}
section aside.visite > div > img
{
display: block;
float: left;
width: 3.5em;
margin-right: 1em;
}
section aside.visite > div h3, section aside.visite > div p
{
color: white !important;
text-align: left !important;
text-shadow: none !important;
}
section aside.visite > div h3
{
font-family: 'Open Sans', Sans-serif;
font-size: 20px;
font-weight: 600;
}
section aside.visite > div p {}
section aside.visite > div button
{
margin-right: 4px;
margin-bottom: 4px;
padding: 8px 10px;
background: rgb(40,40,40);
border: none;
color: white;
font-size: 13px;
font-weight: 600;
box-shadow: inset 0 0em 0 white;
transition: box-shadow 0.25s, color 0.25s;
}
section aside.visite > div button:hover
{
box-shadow: inset 0 3em 0 white;
color: rgb(40,40,40);
}
section aside.visite > div button.retour
{
background: rgb(180,70,30);
color: black;
box-shadow: 0 0 0px 0px black;
transition: box-shadow 0.5s, transform 0.5s;
}
section aside.visite > div button.retour:hover
{
box-shadow: 0 0 100px 100px black;
transform: scale(1.2);
}
section aside.visite > div button img {display: none;}
@media (max-width: 1050px) {
	section > button.visite {margin: 0.5em;}
	section > button.visite img {width: 156px;}
	section aside.visite > div h3 {font-size: 15px;}
	section aside.visite > div p {font-size: 11px;}
}
@media (max-width: 750px) {
	section aside.visite > div
	{
	display: block;
	width: 100%;
	padding: 12px;
	padding-bottom: 16px;
	}
	section aside.visite > div:first-of-type
	{
	overflow: hidden;
	max-height: 320px;
	padding-bottom: 0px;
	transition: max-height 1s, padding 1s 0.75s;
	}
	section aside.visite > div:first-of-type.off
	{
	max-height: 0px;
	padding: 0px;
	}
	section aside.visite > div:last-of-type {padding-top: 12px;}
	section aside.visite > div > img {width: 4em;}
	section aside.visite > div button
	{
	/*padding: 4px 6px;
	font-size: 11px;*/
	}
}

/* Chargement */
section aside.visite:before
{
z-index: 5;
content: '';
display: block;
position: absolute;
height: 4px;
top: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%);
box-shadow: 0 3px 10px black;
}
section aside.visite.charge:before
{
animation: charge 1s ease 4;
}
@keyframes charge {
	0%
	{
	width: 0px;
	left: 0;
	}
	50%
	{
	width: 100vw;
	left: 0;
	}
	100%
	{
	width: 0px;
	left: 100vw;
	}
}