/*BASES*/

body {
	background-color:rgba(0, 0, 0, 0);
	font-family: "Cal Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-decoration: none;
	margin:0px;
}


a {
	transition: all 0.3s ease-in-out;
	font-weight: 800;
	color:#E8C256;
	text-decoration: none;
}

a:hover {
	letter-spacing:4px;
}


/*****ACCUEIL******/

.ecran {
	position: relative;
	width: 100vw;
	height: 100vh; /* Hauteur de la fenêtre du navigateur */
	overflow: hidden;
    z-index:0;
}

.ecran video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100vw;
	min-height: 100vh;
	width: 100%;
	height: auto;
	transform: translateX(-50%) translateY(-50%);
	z-index: -1; /* Place la vidéo derrière tout autre contenu */
	object-fit: cover; /* Couvre toute la zone sans déformer */
}


.image {
	position:absolute;
	width:calc(300px + 4vw);
	height:30%;
	left:40%;
	top:15vh;
}

.image img {
	width:100%;
}

.menu {
	position: absolute;
	top:74vh;
	left:34vw;
	z-index: 99;
	font-family:"Cal Sans", sans-serif;
}

.boutonmenu {
	background-color:rgb(49,31,65,0.3);
	display:inline-block;
	text-align:center;
	margin:1.8vw;
	padding:4px;
	width:190px;
	border-radius:500px;
	border:none;
	font-size:20px;
	transition: all 0.3s ease-in-out;
}

.boutonmenu:hover {
	background-color:rgb(49,31,65,0.6);
}

/**************** BAS DE PAGE *********************/

.ligne-contact {
	background-color:rgb(0,0,0,0);
	height:45px;
	position:fixed;
	bottom:25px;
	width:100vw;
	text-align:center;
	z-index:99;
}

.case-contact {
	display:inline-block;
	margin:6px 3vw 0vw 3vw;
}

.case-contact button {
	background-color:rgb(49,31,65,0.3);
	border-radius:30px;
	height:35px;
	width:35px;
	border:0;	
	padding:0px;
	transition: all 0.6s ease-in-out;
}

.case-contact button:hover{
	background-color:rgb(49,31,65,0.7);
}

.case-contact img {
	height:35px;
	width:35px;
}

@media screen and (min-width:600px) and (max-width : 1200px) {

.image {
	position:absolute;
	width:calc(170px + 20vw);
	height:30%;
	left:37vw;
	top:12vh;
}

.menu {
	position: absolute;
	top:74vh;
	left:30vw;
	z-index: 99;
}

.boutonmenu {
	display:inline-block;
	text-align:center;
	margin:3vw;
	width:100px;
}

}

@media screen and (min-width:0px) and (max-width : 600px) {


.ecran {
	background-image:url(images/general/imageaccueil.png);
	position:absolute;
	bottom:0;
	right:0;
	width:100%;
	height:100%;
	background-size: auto 100%; 
    background-position: center;
    background-repeat: no-repeat;
}

.image {
	position:absolute;
	width:70vw;
	height:30%;
	left:20vw;
	top:14vh;
}

.image img {
	width:100%;
}

.menu {
	position: absolute;
	top:67vh;
	left:24vw;
	z-index: 99;
}

.boutonmenu {
	display:block;
	text-align:center;
	margin:25px;
	width:40vw;
	font-size:19px;
}


}