/* header and footer fixed method by Stu Nicholls : http://www.cssplay.co.uk/layouts/basics2.html */

html 
{
	font-size:15px;
}

body
{
	height:100%;
	width: 100%;
	padding:0;
	margin:0;
	border:0;
	/* background-image: url('img/sable.jpg'); */
	background: linear-gradient(to bottom, lightskyblue, cornsilk 20%, bisque, sandybrown);
}

@font-face {
	font-family: Hansip;
	src: url("./fonts/Hansip.ttf");
	font-display: swap;
}

#page
{
	height:100%; 
	max-height:100%; 
	width:100%; 
	overflow:hidden;
	position:absolute; 
	padding:0; 
	border:0;
	background: linear-gradient(to bottom, lightskyblue, cornsilk 20%, bisque, sandybrown);
}

#fond
{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

#conteneur
{
	height:100%;
	max-height:100%;
	width:100%; 
	max-width:1600px;
	overflow:hidden;
	position:relative; 
	margin:auto;
	z-index: 2;
}

header
{
	position:absolute;
	display:block;
	z-index: 5;
	padding:0;
	border:0;
	margin:0;
	top:0;
	left:0;
	height:5%;
	width:100%;
	text-align:center;
}		

#bandeau_titre_admin
{
	position:absolute;
	display:block;
	z-index:5;
	padding:0;
	border:0;
	width:100%;
	margin:auto;
	top:0;
	height:4%;
	text-align:center;
}

#menu_admin
{
	position:absolute;
	z-index:6;
	left:0%;
	top:7%;
	width:12%;
	text-align:left;
	font-style:italic;
	font-size:medium;
}

#corps 
{
	position:relative;
	height:90%;
	margin:auto;
	overflow:auto; /* add scroll bars as required */
	scroll-behavior: smooth;
	width:60%;
	/* max-width:1300px; */
	top:9%;
	padding-left:5%;
	padding-right:5%;
	z-index:3;
	color:black;
	font-family: "Times New Roman", "Arial";
	text-align:left;
	background-color: rgba(255, 255, 255, 0.4);
	/* box-shadow: inset 5px 5px 20px grey; */
	-moz-border-radius:30px 0 0 0;
	-webkit-border-radius:30px 0 0 0;
	-khtml-border-radius:30px 0 0 0;
	border-radius: 30px 0 0 0;
	behavior: url(./PIE/PIE.htc); /* Effets CSS3 sous IE 6, 7, 8 thanks to http://css3pie.com */
}

nav
{
	position:absolute;
	z-index: 3;
	top:7%;
	left:85%;
	width:15%;
	height:93%;
	text-align:center
}

nav img
{
	display:block;
	margin:auto;
}

aside
{
	position:absolute;
	left:0;
	bottom:0;
	width:15%;
	margin:0;
	padding:0;
	border:0;
	z-index:4;
}

aside img
{
	display:block;
	position:relative;
	width:45%;
	max-width:77px;
	border:none;
	margin:auto;
	margin-bottom:10px;
}

footer { 
	text-align:center; 
	border-top:1px dotted #CC3300; 
	margin-right:15%; 
	margin-left:15%;
}

#retour_site
{
	position:absolute;
	right:0;
	width:15%;
	bottom:2%;
	margin:0;
	padding:0;
	border:0;
	z-index:4;
	text-align:center;
	font-style:italic;
	font-size:small;
}

#image_centrale
{
	position:absolute;
	left:1%;
	width:267px;
	bottom:1%;
	margin:0;
	padding:0;
	border:0;
	z-index:4; 
	text-align:center;
}

.titre
{
	font-family: "Monotype Corsiva", "Verdana", "Comic Sans MS", "Times New Roman", "Serif";
	color:#CC3300;
	font-weight:normal;
}

h2 { border-bottom: 1px dotted #CC3300; padding-bottom:3px; font-size:1.8em;}

h3 { font-size:1.4em;}

.miniatures
{
	width:90%;
	height:73px;
	background-image: url('img/blanc_transparent-fs8.png');
	overflow:auto;
	text-align:left;
	margin:auto;
}

.thumbs
{
	height:52px;
}

.thumbs a img{ border: 1px solid transparent;}
.thumbs a:hover img{ border: 1px solid #000}
.thumbs a:active img { border: 1px solid #CC3300;}

.papillon
{
	list-style-image: url("./img/favicon.ico");
}

.green {background:#beb; color:#000;}
.red {background:#c56; color:#000;}
.orange {background:#ff9933; color:#000;}
.grey  {background:#cccccc; color:#000;}
.yellow {background:#f8f678; color:#000;}

a
{
	color:#CC3300;
}

a:hover
{
	color:#ffffff;
}


table
{
	border-collapse: collapse;
}

legend
{
	color:#CC3300;
	font-weight: bold
}

input, textarea, select.joli
{
	background-color:transparent;
}

input.champ_texte, textarea {
	border: 1px inset black;
}

select.joli:focus, input.champ_texte:focus, textarea:focus /* Quand le curseur est sur un champ */
{
	background-color: #edb57d;
	opacity:0.7;
	filter:alpha(opacity=70);  /* pour IE */
}

fieldset
{
	margin:auto;
	padding:10px;
	margin-bottom: 15px;
	border: 1px solid grey;
}
		
#preload-images
{
width: 0px;
height: 0px;
display: inline;
background-image: url(./img/maison_on.gif);
background-image: url(./img/boussole_anim.gif);
background-image: url(./img/carrelet_anim.gif);
background-image: url(./img/calendrier_on.gif);
background-image: url(./img/contact3_on.gif);
background-image: url(./img/huitre_ouverte.gif);	
}

a.cliquable:hover img{
	opacity:0.5;
	filter:alpha(opacity=50);  /* pour IE */
}

strong {
	color:#CC3300;
	font-size:17px;
	font-style:italic;
}

#exterieur_maison { 
	width:90%; 
	max-width:650px; 
	max-height:325px; 
	border:none;
}

#plan_maison { 
	width:85%; 
	max-width:600px; 
	max-height:291px; 
	border:none;
}

#procedure_reservation { 
	width:100%; 
	max-width:600px; 
	max-height:262px; 
	border:none;
}

#procedure_reservation_zoom_in{ 
	display:none;
}

.td40 { 
	padding-left:40px;
}

.td60 { 
	padding-left:60px;
}

#ancv2 { 
	display:none;
}

#conteneur_calendrier { 
	overflow:auto;
}

#red_star { 
	display:none;
}

#menu { 
	display:none; 
	text-align:center; 
	width:100%; 
	font-size:1.1em;
}

#boite{ 
	display:inline-block; 
	background:grey; 
	width:100%;
}

#boite a { 
	color:#ecebc1; 
	text-decoration:none; 
	vertical-align:middle; 
	display:inline-block; 
	padding:6px;
}

#boite a:hover { 
	background:#CC3300;
}

.diaporama { 
	display:block; 
	height:90%; 
	max-height:350px; 
	margin:auto; 
	margin-bottom:10px; 
	border:none; 
	box-shadow: 0 2px 15px 7px #532; 
	behavior: url(./PIE/PIE.htc);
}

.drag { 
	display:none;
}

.drag2{ 
	display:none;
}

.icon_merci { 
	height: 25px;
	margin-left: 5px;
	margin-right: 5px;
}

#signature {
	font-size:1em;
}

.arrowsTable {
	width: 100%;
	margin-top: -200px;
	margin-bottom: 150px;
}

.arrowsContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.left_arrow {
	height: 50px; width:50px;
	background-image: url("./img/previous.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index:50; border-radius: 25px;
	margin-right:10px;
	cursor: pointer;
}

.right_arrow {
	height: 50px; width:50px;
	background-image: url("./img/next.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index:50; border-radius: 25px;
	margin-left:10px;
	cursor: pointer;
}

.right_arrow:hover { 
	box-shadow: 0 0 10px 2px #CC3300;
}

.left_arrow:hover { 
	box-shadow: 0 0 10px 2px #CC3300;
}

.bouton {
	box-shadow: 0 2px 4px grey, inset 0 3px 5px #fff;
	cursor: pointer;
	height: 40px;
	padding: 5px;
	border-radius: 5px;
	background-color: sandybrown;
	color: #fff;
	font-weight: bold;
	text-shadow: 1px 1px #000;
	transition-duration: 0.2s;
	transition-duration: color, background-color, text-shadow, box-shadow;
}

.bouton:hover {
	color: #000;
	background-color: transparent;
	text-shadow: none;
	box-shadow: none;
}

/* transitions css */
.gonfle {
	width:150px;
	transition-property: transform;
	transition-duration: 1s;
}
.gonfle:hover {
	transform: scale(1.5);
}

/* effet vagues par Stanislas : https://www.youtube.com/watch?v=1Zd5PT8sroU */
.ocean {
	position: absolute;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 15vh;
	overflow: hidden;
}

.wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 15vh;
	background: url("./img/wave.png");
	background-size: 100% 100%;
}

#wave1 {
	bottom: 0;
	opacity: 0.5;
	animation: vague_mouvante 11s infinite ease-in-out;
}

#wave2 {
	bottom: 0;
	opacity: 0.4;
	animation: vague_mouvante_inverse 10s infinite ease-in-out;
}

#wave3 {
	bottom: 0;
	opacity: 0.3;
	animation: vague_mouvante 9s infinite ease-in-out;
}

@keyframes vague_mouvante {
	0% {
		background-position-x: 0;
		transform: translateY(20vh);
	}
	50% {
		background-position-x: 100vw;
		transform: translateY(0);
	}
	100% {
		background-position-x: 0;
		transform: translateY(20vh);
	}
}

@keyframes vague_mouvante_inverse {
	0% {
		background-position-x: 50vw;
		transform: translateY(20vh);
	}
	50% {
		background-position-x: 200vw;
		transform: translateY(0);
	}
	100% {
		background-position-x: 50vw;
		transform: translateY(20vh);
	}
}

#lacybergerieAbout {
	font-size: normal;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	margin-top: 1.5vh;
	color:#000;
	transition: color 0.3s;
}

#lacybergerieAbout:hover {
	color: #CC3300;
} 

.lacybergerieText {
	font-family: Hansip, 'Arial Black', 'arialb', Arial;	
}

#lacybergerieLogo {
	height: 40px;
	margin-right: 10px;
	stroke: #000;
	fill: transparent;
	transition: stroke 0.3s;
}

#lacybergerieAbout:hover #lacybergerieLogo {
	stroke:#CC3300;
}

.mainPic {
	width: 100%;
	border-radius: 30px 30px 0 30px;
	margin-top: 30px;
	max-height: 450px;
	object-fit: cover;
	object-position: 50% 50%;
	margin-bottom: -10px;
}

#popup {
	width: 95vw;
	max-width: 1200px;
	height: 100vh;
	margin:auto; 
	text-align:justify;
	font-size: 2.2vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	overflow: auto;
}

#popup img {
	height: 8vh;
}

/* media queries pour adapter l'affichage de la page aux smartphones */
@media only all and (max-width:641px) {

	nav { 
		display:none;
	}

	aside { 
		display:none;
	}

	#corps { 
		width:90%; 
		background-color: transparent;
	}	

	strong { 
		font-size:1em;
	}

	h2 {
		font-size:1.2em;
	}

	h3 { 
		font-size:1em;
	}

	#exterieur_maison { 
		width:100%;
	}

	#plan_maison { 
		width:100%;
	}

	#procedure_reservation { 
		display:none;
	}

	#procedure_reservation_zoom_in{ 
		display:inline;
	}

	.td40 { 
		padding-left:5px;
	}

	.td60 { 
		padding-left:5px;
	}

	#ancv1 { 
		display:none;
	}
	#ancv2 { 
		display:inline;
	}
	
	#conteneur_calendrier { 
		max-height: none;
	}

	#deco_formulaire { 
		display:none;
	}

	#red_star { 
		display:inline;
	}

	#menu { 
		display:block;
	}

	.diaporama { 
		height:37%;
	}

	.drag { 
		display:block; 
		margin:auto; 
		margin-top:5px;
	}

	.drag2 { 
		display:block; 
		margin:auto; 
		width:30%; 
		max-height:60px; 
		max-width:50px;
	}

	.icon_merci { 
		height: 28px; 
		padding: 8px;
	}

	footer { 
		margin-right:0; 
		margin-left:0;
	}

	#signature {
		font-size:1em;
	}

	.arrowsTable {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.arrowsContainer {
		width: 50%;
		margin: auto;
	}

	#popup {
		font-size: 2vh;
	}
	
	/* .left_arrow {width: 30px; top:48%; left:1%; border-radius:20px; background-image: url("./img/left.png");}
	.right_arrow {width: 30px; top:48%; right:1%; border-radius:20px; background-image: url("./img/right.png");}
	.right_arrow:hover { opacity:0.5; filter:alpha(opacity=50); box-shadow:none;}
	.left_arrow:hover { opacity:0.5; filter:alpha(opacity=50); box-shadow:none;} */

}