@font-face {
    font-family: 'MuliSemiBold';
    src: url('fonts/Muli-SemiBold.woff2') format('woff2'),
        url('fonts/Muli-SemiBold.woff') format('woff'),
        url('fonts/Muli-SemiBold.ttf') format('truetype'),
        url('fonts/Muli-SemiBold.svg#Muli-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MuliLight';
    src: url('fonts/Muli-Light.woff2') format('woff2'),
        url('fonts/Muli-Light.woff') format('woff'),
        url('fonts/Muli-Light.ttf') format('truetype'),
        url('fonts/Muli-Light.svg#Muli-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MuliBold';
    src: url('fonts/Muli-Bold.woff2') format('woff2'),
        url('fonts/Muli-Bold.woff') format('woff'),
        url('fonts/Muli-Bold.ttf') format('truetype'),
        url('fonts/Muli-Bold.svg#Muli-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('fonts/Muli-Regular.woff2') format('woff2'),
        url('fonts/Muli-Regular.woff') format('woff'),
        url('fonts/Muli-Regular.ttf') format('truetype'),
        url('fonts/Muli-Regular.svg#Muli-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tagada';
    src: url('fonts/Tagada-Regular.eot');
    src: url('fonts/Tagada-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Tagada-Regular.woff2') format('woff2'),
        url('fonts/Tagada-Regular.woff') format('woff'),
        url('fonts/Tagada-Regular.ttf') format('truetype'),
        url('fonts/Tagada-Regular.svg#Tagada-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.loader {
    position: fixed;
    z-index: 999999999;
    background: url(../images/bouncing-circles.svg) 50% 50% no-repeat;
	background-size:50px;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    cursor: wait;
    background-color: #fff;
}


body{
	color:#6d766a;
	font-family: 'Muli';
	//font-family: 'Tagada';
	margin:0px;
}
span, p{
	    font-size: 0.9em;
		text-align: left; /* Aligne le texte à gauche */
  hyphens: auto; /* Active les césures automatiques */
  word-wrap: break-word; /* Permet de couper les mots si nécessaire */
  overflow-wrap: break-word; 
}
input{
	font-family: 'Muli';
}
h1,h2,h4,h3,h5,h6{
	margin:0px;
	font-family: 'Muli';
	font-family: 'Tagada';
	font-weight:normal;
	color:#6d766a;
}
a{
	color:#6d766a;
}
.Presentation h2{
	font-size:2.4em;
}
ul, li{
	list-style:none;
	margin:0;
	padding:0;
}
.clr{
	
	height:20px;
}
.clear{
	clear:both;
	margin-bottom:-5px;
}
.Smaller{
	font-size:0.75em;
}
button{
	cursor:pointer;
	background-color:#000;
	border:0px;
	color:#fff;
	padding:5px;
}
button img{
	width:25px;
}

.NotMobil{
		display:inline;
	}
	.Mobil, .ContactMob{
		display:none;
	}

.W33{
	display:inline-block;
	width:33%;
}
.Main{
	min-height:90vh;
	width:100%;
	margin:0 auto;
	    padding-bottom: 20px;
}
.container{
	padding:2% 3%;
	/*max-width:1400px;*/
	width: 94%;
    margin: 25px auto;
	margin-top:55px;
	overflow-x:hidden;
}

.BarTop{
	position: fixed;
	   
    background-color:#efefef;
	padding:10px 0 5px;
    width: 100%;
    top: 0px;
    color: #666;
	z-index:15;
}
.BarTop img{
	width:25px;
	margin:0 1%;
}

.ReseauSociaux, .ContactTop{
	display:inline-block;
	width:48%;
	text-align:center;
	vertical-align:middle;
}

.ReseauSociaux{
	width:98%;
	text-align:right;
}

.ContactTop{
	color: #6d766a;
	   
    display: block;
	font-size:0.8em;
	width:auto;
	min-width:220px;
	text-align:right;
}

.Top{
	background-color:#000;
	text-align:center;
}



.popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4caf50;
    color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
}

.Alerte{
	text-align: center;
    padding: 20px;
    background-color: #000;
    margin-bottom: 20px;
    color: #fff;
}



/*---------------------ACCUEIL------------------------*/
.TitleDiapo{
	position:absolute;
	z-index:100;
	background-color:#fff;
	color:#6d766a;
	bottom:15px;
	text-align:left;
	padding:0.5%;
	right:15px;
}
.TitleDiapo h2, .TitleDiapo h3{
	font-family: 'Muli';
	margin:0;
}
.TitleDiapo h2{
	font-size:1em;
}
.TitleDiapo h3{
	font-size:0.9em;
}
.Decouvrir{
	width: 100%;
    max-width: 500px;
    display: inline-block;
    text-align: center;
    padding: 1%;
    color: #fff;
	text-decoration:none;
	margin-top:10%;
    background-color: #6d766a;
	border:1px solid #6d766a;
	transition:all 0.5s;
}

.Decouvrir:hover{
	color: #6d766a;
    background-color: #fff;
	border:1px solid #6d766a;
	transition:all 0.5s;
}
.slick-slider{
	width:99%;
}

.HomeSlide{
	background-color:#ccc;
	text-align:center;
	width:100%;
	/*height:90vh;*/
}
 .slick-slide {
	 position:relative;
            height: 80vh;
			background-size:cover;
			background-position:center;
			
        }
.slick-list{
	
}
        .slick-slide img {
            width: 100%;
            height: 100vh;
            object-fit: cover;
        }
.slick-prev, .slick-next {
            width: 48px;
            height: 28px;
			z-index:1;
        }
		.slick-prev{
			left:25px;
		}
		.slick-next {
			right:25px;
		}
        .slick-prev:before, .slick-next:before {
            display: none;
        }
		.slick-prev svg, .slick-next svg {
            fill: white;
        }
		
		
.Elodie{
	display:table;
	width:94%;
	margin:50px auto 0;
	overflow:hidden;
}
.Elodie div{
	display:table-cell;
	width:70%;
	padding:1% 0.5%;
	vertical-align: top;
}
.Elodie div:first-child{
	width:30%;
}

.Elodie span{
	max-width:500px;
	display:inline-block;
}

.PicElodie img{
	width:100%;
	
}
		
/*-----------------PROJETS-----------------------*/
.projets .container{
padding-top:50px;
}	
		
.ListItemProjet{
	position:relative;
aspect-ratio: 16 / 9;
width:calc(50% - 4px);
width:49%;
margin-left:1%;
margin-bottom:1%;
background-size:cover;
display:inline-block;
/*border:2px solid #fff;*/
transition:all 0.5s;
}

.ListItemProjet:hover{
	/*border:2px solid #ccc;*/
	transition:all 0.5s;
}

.ListItemProjet a{
	background-color:#000;
	opacity:0;
	width:100%;
	height:100%;
	display:block;
	color:#000;
	text-decoration:none;
	transition:all 0.5s;
}
.ListItemProjet:hover a{
	opacity:0.3;
	transition:all 0.5s;
}
.TitleListProjet{
	position:absolute;
	bottom: 5px;
    right: 5px;
    background-color: #fff;
    width: auto;
    padding: 5px;
	padding-left:42px;
	padding-right:10px;
	z-index:10;
	transition:all 0.5s;
}



.ListItemProjet:hover .TitleListProjet{
	bottom:10px;
	transition:all 0.5s;
}

.TitleListProjet span{
	display:block;
	color: #6d766a;
}
.TitleListProjet span:last-child{
	font-size:0.7em;
}



.DescProjet{
	 position: fixed;
    top: 105px;
	    overflow: auto;
    left: 0;
	height:90vh;
    width: 30%;
    background-color: white; /* Ajoutez cette ligne si vous souhaitez que l'arrière-plan soit blanc */
    z-index: 10; /* Ajustez ce chiffre selon les besoins pour s'assurer que la div soit au-dessus des autres éléments */
    padding: 20px 1% 0 4%; /* Ajustez le padding selon vos besoins */
    
}
.PicsProjet{
	width:66%;
	display:inline-block;
	margin-left: 34%;
	margin-top:55px;
	position:relative;
	z-index:1;
}
.PicsProjet img{
	width: 49%;
    margin:0.5% 0;
	display:inline-block;
}

img.Portrait{
		width:49%;
		display:inline-block;
}
.MargeMe{
	margin-left:1%!important;
}

/*--------------------PRESTATIONS---------------------*/
.Precedent, .Suivant{
	display:inline-block;
	width:49%;
}
.Suivant{
	text-align:right;
}
.Text{
	position:relative;
}
.prestations .container{
	margin-top:55px;
}
.prestations .W33{
	width: 31%;
    margin: 0.5%;
    display:table-cell;
	border-left:0px solid #6d766a;
}
/*
.prestations div.W33:nth-child(odd){
	border-left:1px;
	border-right:1px;
}*/

.prestations .W33 p, .prestations .W33 div{
	padding: 0 3% 0 0;
}

.prestations .W33 .Smaller{
	position:absolute;
	bottom:0px;
	padding:0 0 0 0%;
	margin-bottom:-20px;
}

.prestations .W33 h2{
padding: 0% 3% 0% 0;
    display: inline-block;
    margin-left: 0;
border-bottom:1px solid #6d766a;
    /*text-align: center;
	color:#fff;
    background-color: #6d766a;*/
}

.Realisations{
	text-align:center;
}

.PicPresta{
	    width: 93%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
	opacity:0.8;
    margin-bottom: 20px;
}


/*--------------------AVIS-----------------------*/
.vos-avis .container{
	margin-top:55px;
}



/*----------------------MENTIONS LEGALES---------------*/
.mentions-legales h1, .mentions-legales h2, .mentions-legales h3{
	font-family: 'Muli';
}	
.mentions-legales .container{
	margin-top:55px;
}

.ForFrame{
	/*width:500px;*/
	width:93%;
	margin:0 auto;
}
.Avis{
	text-align:center;
}
.Avis .Decouvrir{
	margin: 60px auto 0;
    width: 91%;
    max-width: inherit;
}
iframe{
	margin:50px 0;
	max-height:245px!important;
	max-height:220px!important;
	
}
iframe a:last-child{
	opacity:0!important;
	visibility:hidden!important!
}
/*------------------------FOOTER------------------------*/
.Footer{
border-top:2px solid rgba(109, 118, 106, 1);
margin-top:0px;
background-color:#efefef;
padding-top:0px;
position:relative;
z-index:20;
}
.Footer a{
	color:#6d766a;
	transition:all 0.5s;
}

.Footer a:hover{
	color:#666;
	transition:all 0.5s;
}

.Footer .container{
	text-align:center;
	display:table;
	vertical-align:bottom;
}
.Footer .container .W33{
	display:table-cell;
	vertical-align: bottom;
}

.Footer .W33:first-child, .Footer .W33:last-child{
	
	text-align:left;
}
.Footer .W33:last-child{
	text-align:right;
}

.Footer .container img{
	width:60px;
}
.Footer .container a{
	text-decoration:none;
	
	transition:all 0.5s;
}
.Footer .container a:hover{
	color:#666;
	transition:all 0.5s;
}
.Copyright{
	font-size:0.7em;
	padding:5px;
	text-align:center;
	    padding-bottom: 14px;
}