/* --------------------------------------------------------------- */
/*
/* Entete et menu
/*
/* --------------------------------------------------------------- */

#entete {
	height : 863px;
}

#menu {
	margin-top : 600px;
}


/* --------------------------------------------------------------- */
/*
/* Flash
/*
/* --------------------------------------------------------------- */

#flash {
	position        : absolute;
	top             : -865px;
	left            : 0;
	right           : 0;

	height          : 600px;

	padding         : 50px 0;

	display         : flex;
	align-items     : center;
	justify-content : center;

	z-index         : 999999;
}

#flash .message {
	background : rgba(150, 1, 0, 0.8);
	border     : 2px solid #FFFFFF;
	outline    : 5px solid rgba(150, 1, 0, 0.8);
	padding    : 40px;

	font-size  : 25px;
}

#flash .message * {
	margin : 0;
}

/* --------------------------------------------------------------- */
/*
/* Diaporama
/*
/* --------------------------------------------------------------- */

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

#diapo_accueil img {
	width      : 100%;
	height     : 863px;
	object-fit : cover;
}


/* --------------------------------------------------------------- */
/*
/* Mot Dulat
/*
/* --------------------------------------------------------------- */
#page #mot_dulat {
	height        : 421px;
	background    : url("../../images/mot_dulat_fond.png") no-repeat center bottom;
	margin-bottom : 130px;
}

#page #mot_dulat h6 {
	position    : relative;
	font-family : "Dancing Script";
	font-size   : 46px;
	color       : #D00300;
	padding     : 40px 130px 0 100px;
	margin-top  : 165px;
}

#page #mot_dulat h6 #signature {
	display    : block;
	text-align : right;
}

#page #mot_dulat h6:before {
	content          : "";
	position         : absolute;
	top              : 0;
	left             : 0;
	width            : 83px;
	height           : 59px;
	background-image : url("../../images/guillemets_gauche.png");
}

#page #mot_dulat h6:after {
	content          : "";
	position         : absolute;
	bottom           : 0;
	right            : 0;
	width            : 77px;
	height           : 53px;
	background-image : url("../../images/guillemets_droite.png");
}


/* --------------------------------------------------------------- */
/*
/* Contact
/*
/* --------------------------------------------------------------- */
#page #contact {
	position   : relative;
	top        : 0;
	left       : 0;
	text-align : center;
	padding    : 80px 0 45px;
}

#page #contact #fond_noir {
	background : rgba(0, 0, 0, .42) no-repeat center center;
	padding    : 24px 0;
	height     : 375px;
}

#page #fond_noir:before {
	content    : "";
	position   : absolute;
	top        : 0;
	left       : -5%;
	width      : 1121px;
	height     : 584px;
	background : url("../../images/jambon_contact.png") no-repeat center center;
}

#page #contact #losange {
	width           : 532px;
	height          : 328px;
	float           : right;
	position        : relative;
	background      : url("../../images/losange.png") no-repeat;
	background-size : 100% 100%;
	padding         : 25px 0;
	margin-right    : 12.5%;
}

#page #contact #losange #texte_contact {
	padding-top : 20px;
	margin      : 0 125px;
}

#page #contact #losange #texte_contact #titre {
	font-family : "Cookie";
	font-size   : 50px;
}

#page #contact #texte_contact #appelez_nous {
	display     : block;
	font-family : "Big Caslon Medium";
	font-size   : 29px;
	border-top  : 1px solid white;
	padding-top : 5px;

}

#page #contact #texte_contact #tel {
	font-family    : "Dancing Script";
	font-size      : 37px;
	padding-bottom : 8px;
	border-bottom  : 1px solid white;
}


/* --------------------------------------------------------------- */
/*
/* Newsletter
/*
/* --------------------------------------------------------------- */

#page #newsletter {
	margin-top : 75px;
}

#page #newsletter .container {
	background-color : #C00727;
	padding          : 30px 50px;
}

#page #newsletter #texte_newsletter {
	position     : relative;
	left         : 0;
	font-family  : "PT Sans";
	font-size    : 16px;
	padding-left : 65px;
}

#page #newsletter #texte_newsletter:before {
	content    : "";
	position   : absolute;
	top        : 0;
	left       : 0;
	width      : 46px;
	height     : 42px;
	background : url("../../images/icone_mail.png") no-repeat;
}

#page #newsletter #texte_newsletter #titre_newsletter {
	font-size   : 20px;
	font-weight : bold;
}

#page #newsletter form {
	font-size       : 0;
	display         : flex;
	justify-content : flex-start;
	align-items     : center;
}

#page #newsletter #form_email {
	width                     : 80%;
	outline                   : none;
	border                    : 0;
	border-top-left-radius    : 5px;
	border-bottom-left-radius : 5px;
	padding                   : 8px 10px;
	font-size                 : 20px;
	margin                    : 0;
}

#page #newsletter .bouton {
	border-top-left-radius    : 0;
	border-bottom-left-radius : 0;
	background                : white;
	border-left               : 1px solid #960100;
	color                     : #C00727;
	font-family               : "PT Sans";
	font-size                 : 20px;
	text-transform            : none;
	padding                   : 8px 12px;
	margin                    : 0;
}

@media screen and (max-width : 1600px) {
	#page #contact #losange {
		margin-right : 3%;
	}

	#page #fond_noir:before {
		left  : auto;
		right : 35%;
	}

	#entete,
	.cycle-slideshow,
	#diapo_accueil img {
		/*height: 700px;*/
	}
}

@media screen and (max-width : 1350px) {
	#entete,
	.cycle-slideshow,
	#diapo_accueil img {
		height : 600px;
	}

	#flash{
		top : -602px;
	}

}

@media screen and (max-width : 1199px) {
	#flash{
		top : -662px;
	}
	#page #mot_dulat h6 {
		font-size : 40px;
	}

	#page #mot_dulat h6:before, #page #mot_dulat h6:after {
		width                   : 42px;
		height                  : 30px;

		-webkit-background-size : contain;
		background-size         : contain;
		background-repeat       : no-repeat;
	}

	#page #mot_dulat h6:before {
		top  : 20px;
		left : 45px;
	}

	#page #mot_dulat h6:after {
		right : 70px;
	}

	#page #fond_noir:before {
		left  : auto;
		right : 43%;
	}

	#entete {
		height : 660px;
	}

	#entete #bandeau_haut {
		background-color : rgba(150, 1, 0, 1);
	}

	.cycle-slideshow,
	#diapo_accueil img {
		height : 550px;
	}

	.cycle-slideshow {
		margin-top : 120px;
	}

}


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

	#flash{
		position : relative;
		top : 0;
		z-index : 1;
		padding : 50px 0;
		height : auto;
	}

	#page #mot_dulat {
		height : auto;
	}

	#page #mot_dulat #dulat {
		max-width : 100%;
	}

	#page #mot_dulat h6 {
		padding       : 40px 15px 0px 15px;
		margin-bottom : 40px;
	}

	#page #mot_dulat h6:before {
		top  : 30px;
		left : -40px;
	}

	#page #mot_dulat h6:after {
		right  : -45px;
		bottom : -10px;
	}
}

@media screen and (max-width : 767px) {
	#page #mot_dulat #dulat {
		width      : 170px;
		margin-top : -80px;
	}

	#page #mot_dulat h6 {
		padding : 40px 40px 0 40px;
	}

	#page #mot_dulat h6:before {
		top  : 40px;
		left : -15px;
	}

	#page #mot_dulat h6:after {
		right : -15px;
	}

	#page #newsletter #texte_newsletter {
		margin-bottom : 15px;
	}

	#page #contact #fond_noir {
		height : auto;
	}

	#page #fond_noir:before {
		display : none;
	}

	#page #contact #losange {
		float  : none;
		margin : auto;
	}
}

@media screen and (max-width : 575px) {
	#page #mot_dulat #dulat {
		display : none;
	}

	#page #mot_dulat h6 {
		padding       : 60px;
		margin-bottom : 0;
		font-size     : 32px;
	}

	#page #mot_dulat h6:before {
		top  : 40px;
		left : 0;
	}

	#page #mot_dulat h6:after {
		right  : 0;
		bottom : 50px;
	}

	#page #newsletter .container {
		padding : 30px 15px;
	}

	#page #newsletter #form_email {
		width : 65%;
	}

	#page #contact #losange {
		width                   : 420px;
		height                  : 260px;
		-webkit-background-size : contain;
		background-size         : contain;
	}

	#page #contact #losange #texte_contact #titre {
		font-size : 35px;
	}

	#page #contact #texte_contact #appelez_nous {
		font-size : 21px;
	}

	#page #contact #texte_contact #tel {
		font-size : 25px;
	}

}

@media screen and (max-width : 430px) {
	#page #contact #losange {
		background : none;
		height     : auto;
		width      : 100%;
	}

	#page #contact #losange #texte_contact {
		width  : 200px;
		margin : auto;
	}
}