/* Style général */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Nunito", sans-serif;
}
body {
	height: 100vh;
	/* background-color: rgb(207, 225, 233); */
}

li{
	list-style: none;
}

/* Le header pour contenir la navbar */
header {
	position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 1rem;
	z-index: 1000; 
	background: rgba(0, 0, 0, 0.2); 
}

/* La navbar */
.navbar{
	width: 100%;
	max-width: 1200px;
	height: 80px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Logo et titre */
.navbar .logo{
	margin-bottom: 13px;
}

.navbar .logo img{
	position : relative;
	top: 9px;
	right: 4px;
	width: 30px;
	height: 30px;
}

/* Lien de navigation */
.navbar .links{
	display: flex;
	gap: 2rem;
}
.navbar .links a{
	font-size: 0.9rem;
	color: white;
}
.navbar .burger_menu_button{
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	display: none;
}

/* Bouton d'action */
.action-button{
	background-color: #149eab;
	border: 1px solid;
	padding: 0.5rem 1.2rem;
	border-radius: 5px;
	outline: none;
	font-size: 0.8rem;
	font-weight: bold;
	cursor: pointer;
}
.burger-menu{
	display: none;
	height: 0;
	position: absolute ;
	right: 2rem;
	top: 60px;
	width: 200px;
	background: rgb(0,0,0,0.4);
	backdrop-filter: blur(15px);
	border-radius: 10px;
	overflow: hidden;
	transition: height 0.2s cubic-bezier(0.175, 0.855, 0.32, 1.275);
}
.burger-menu.open{
	height : 230px;
}
.divider{
	height : 1px;
	background-color: white;
	width: 80%; 
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1rem;

}
.burger-menu li{
	padding : 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.burger-menu .action-button{
	width: 80%;
	display: flex; 
	justify-content: center;
	align-items: center; 
	margin-left : auto;
	margin-right : auto;
}

.buttons-burger-menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.action-button:hover{
	color: #fff;
	border: 1px solid #fff;
}

/* Style pour la section avec image de fond */

a{
	font-size: 1rem;
	text-decoration: none;
	color: #fff;
}
a:hover{
	color: rgb(0, 255, 255);
}

@media (max-width: 990px){
	header{
		background: rgba(0, 0, 0, 0.2);
	}
	.navbar{
		height : 60px;
		margin : 0 auto;
	}
	.navbar .links,
	.navbar .action-button{
		display: none;
	}

	.navbar .burger_menu_button{
		display: block;
	}
	.burger-menu{
		display: block;
	}
}


section{
	position: relative;
	width: 100%;
	height: 100vh; 
	background-image: url("images/maisonbackground_.png");
	background-size: cover;
	background-position: left center;
	display: flex;
	justify-content: center; 
	align-items: center;   
	overflow: hidden;        
}

.titreSlogan {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center; 
}

.titreSlogan .sloganPepf {
	font-size: 2vw; 
	color: #fff;
	text-align: center;
	gap: 5px;
}

.titreSlogan h1 {
	font-size: 4.2vw; 
	color: #ebebeb; 
}

@media (max-width: 990px) {
	.section{
		padding: 20px;
		background-position: left center;
	}
	.titreSlogan h1 {
		font-size: 6vw; 
	}
	.titreSlogan .sloganPepf {
		font-size: 3vw; 
	}
}

@media (max-width: 640px) {
	section {
		background-position: left center;
		height: 490px; 
		padding: 20px; 
	}

	.titreSlogan h1 {
		font-size: 2rem; 
	}

	.titreSlogan .sloganPepf {
		font-size: 4vw; 
	}
}

  


/* FEUILLE DE STYLE POUR LE RESTE DE LA PAGE  */





/* PARTIE DE LA FEUILLE DE STYLE POUR LA PARTIE SUR NOUS  */
.textediv2 {
	background-color: whitesmoke;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	padding: 80px 30px;
	gap: 10px;
}

.textediv2 .sloganSurNous p {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-bottom: 50px;
	font-size: 2vw;
	color: #757575;
}

.textediv2 h1 {
	color: #414141;
	font-size: 36pt;
	text-align: center;
	margin-bottom: 4.5vw;
}

.textediv2 .texteSurNous {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-bottom: 50px;
}

.textediv2 .texteSurNous p {
	margin-top: 30px;
	margin-left: 10%;
	margin-right: 10%;
}

@media screen and (max-width: 990px) {
	.textediv2 h1 {
		font-size: 6vw;
	}
	.textediv2 .sloganSurNous p {
		font-size: 2.7vw;
	}
	.textediv2 .texteSurNous {
		gap: 15px;
		margin-bottom: 0;
	}
	.textediv2 .texteSurNous p {
		margin-top: 0;
		margin-left: 10px;
		margin-right: 10px;
		font-size: 12pt;
	}
}

@media screen and (max-width: 640px) {
	.textediv2 h1 {
		font-size: 6vw;
	}
	.textediv2 .sloganSurNous p {
		font-size: 3vw;
	}
	.textediv2 .texteSurNous {
		gap: 5px;
		margin-bottom: 0;
	}
	.textediv2 .texteSurNous p {
		margin-top: 0;
		margin-left: 10px;
		margin-right: 10px;
		font-size: 8pt;
	}
}

/* DIVISON PHOTO */



.container {
	width: 100%; /* Prend toute la largeur de l'écran */
    max-width: 1200px; /* Largeur maximale pour éviter qu'il devienne trop large */
	display: flex;
	align-items : center;
	justify-content: center;
	margin: auto;
	margin-top : 50px;
	margin-bottom : 100px;
	background-color: white;
}
.container h1{
	text-align: center;
    font-size: 36pt;
	font-weight : bold;
	padding-top : 50px;
	color : #414141
}
.card-list .card-item{
	list-style : none;
}
.card-wrapper {
	align-items : center;
	justify-content: center;
	padding : 150px;
	max-width: 1100px;
	margin : 50px 60px 35px;
	padding : 20px 10px;
	overflow: hidden;

}
.card-list .card-item .card-link {
	border-radius: 10px;;
	background-color : whitesmoke;
	padding : 50px 45px 35px 45px;
	display : flex;
	flex-direction: column;
	align-items : center;
	justify-content: space-between;
	user-select : none;
	height : 430px;
	box-shadow: 0 10px 10px rgba(0,0,0,0.05);
	border : 2px solid transparent;
	transition: box-shadow 0.3s ease;
}
.card-list .card-item .card-link:hover{
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
}
.card-list .card-item .card-link:active {
	cursor : grabbing;
}
.card-list .card-item .card-link .image-ronde{
	width: 150px; /* Largeur de l'image */
    height: 150px; /* Hauteur de l'image */
    border-radius: 50%; /* Rend l'image ronde */
    object-fit: cover; /* Ajuste l'image pour remplir le cadre rond sans la déformer */
}
.card-list .card-item .card-link .villePhoto{
	text-align: justify;
	font-size: 11pt;
	color : #757575 ;
}
.card-list .card-item .card-link .domainePhoto{
	text-align: justify;
	font-size: 10pt;
	color : #505050 ;
	font-weight : bold;
}
.card-list .card-item .card-link .descriptionPhoto {
	text-align: justify;
	font-size: 11pt;
	color : #757575 ;
}
.card-wrapper .swiper-slide-button{
	color : grey;
	margin-top : 35px;
}
@media screen and (max-width : 768px) {
	.card-wrapper{
		margin : 30px 10px 25px;
	}
	.card-wrapper .swiper-slide-button{
		display : none;
	}
}
@media screen and (max-width : 640px){
	.container h1{
		font-size : 6vw;
	}
}



/* FIN DIVISION PHOTO */








/* PARTIE RELATION CLIENTIELLE */
.textedivClient{
	background-color: #40a1e1;
	padding : 100px 10% 50px 10%;
}
.textedivClient h1{
	text-align : center;
	font-size : 36pt;
	padding-bottom : 110px;
	color : white;
}
.textedivClient .imgtexteClient{
	display : flex;
	justify-content: space-between;
	align-items: center;
	padding-top : 20px;
	padding-bottom : 10%;
}
.textedivClient .imgtexteClient p{
	color : white;
	font-size : 1.7vw;
	margin-left: 15%;
	margin-bottom : 3%;
}
.textedivClient .image-ronde-client{
	width: 300px;
    height: 300px; 
    border-radius: 50%; 
    object-fit: cover; 
}
@media screen and (max-width : 990px){
	.textedivClient h1{
		font-size : 5vw;
		padding-bottom : 70px;
	}
	.textedivClient .imgtexteClient{
		display : flex;
		justify-content: space-between;
		align-items: center;
		padding-top : 20px;
		padding-bottom : 10%;
	}
	.textedivClient .image-ronde-client{
		width: 25vw;
		height: 25vw; 
		border-radius: 50%; 
		object-fit: cover; 
	}
	
}
@media screen and (max-width : 640px){
	.textedivClient{
		padding : 50px 10px 50px 10px;
	}
	.textedivClient .imgtexteClient{
		display : flex;
		flex-direction : column;
		gap : 50px;
	}
	.textedivClient h1{
		text-align : center;
		font-size : 5vw;
		padding-bottom : 15px;
		color : white;
	}
	.textedivClient .image-ronde-client{
		width: 55vw;
		height: 55vw; 
		border-radius: 50%; 
		object-fit: cover; 
	}
	.textedivClient .imgtexteClient p{
		color : white;
		font-size : 3vw;
		margin-left: 60px;
		margin-right : 50px;
		margin-bottom : 0;
	}
}
/* FIN PARTIE CLIENTIELLE */








/* PARTIE DEMANDE DE DEVIS */
.textediv1 {
	background: linear-gradient(to right, #40a1e1, #015295);
	display : flex;
	justify-content: center;
	align-items: center;
	padding : 150px 50px;
}

.textediv1 i{
	position : absolute;
	left : 3px;
	top : 18px;
	padding : 0px 5px 5px 5px ;
	color : rgb(126, 126, 126);
}
.formulaire{
    display : flex;
    flex-direction: column;
    justify-content: space-around;
    align-items : center;
    justify-items: center;
    border : 1px solid #dedede;
    border-radius: 5px;
    margin-top : 3%;
    background-color: white;
}
.formulaire h1{
	padding-top : 20px;
	font-size : 25pt;
	color : #616161;
}
.devistexte{
    margin-right : 12%;
    margin-left: 5%;
	display : flex;
	flex-direction : column;
	gap : 20px;
}


.bt{
    display : flex;
	justify-content : center;
	gap : 20px;
}
                .btgauche{
                    display : flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding : 5%;
                    width : 50%;
                }
                .btdroite{
                    width :100%;
                    display : flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding : 5%;
                    width : 50%;
                    
}

.boite{
    margin-top : 20px;
	display :flex;
	flex-direction: column;
	position : relative;
}

textarea {
    margin-top : 5px;
    padding : 8px 10px 10px 30px;
    background-color: #f8f8f8;
    border : 2px solid #c9c9c9;
    outline : none;
    border-radius : 5px;
    resize : none;
}

.bouton{
    margin-top : 4%;
    margin-bottom: 4%;
}
.bouton button{
	margin-top : 10px;
	background-color :#40a1e1;
	color : white; 
	font-size : 15px;
	border : none;
	padding : 10px 20px;
	border-radius : 5px;
	outline : none;
	cursor : pointer;
	transition : transform 0.5s;
}
input{
	margin-top : 5px;
	padding : 10px 5px 10px 30px;
	border : 2px solid #c9c9c9;
	outline-color : grey;
	border-radius : 5px;
	background-color: #f8f8f8;
}
.devistexte h1{
	font-size : 29pt;
	color : white;
}
.textediv1 p{
	color : rgb(231, 231, 231);
	font-size : 12pt;
	line-height : 160%;
	padding : 2% 0;

}

.message{
    align-items : center;
    margin : 5px;
	display : block;
}
/* .message p{
    align-items : center;
    margin : 5px;
    font-size : 13pt;

} */

/* PARTIE RESPONSIVE  */

@media screen and (max-width:1200px){
	.bt{
        display : flex;
        flex-direction : column;
		justify-content: space-between;
        align-items: center;
		gap : 0px;
        width : 100%;
    }
    .btgauche{
        display : flex;
        flex-direction: column;
        justify-content: space-between;
        padding : 0%;
        width : 80%;
    }
    .btdroite{
        display : flex;
        flex-direction: column;
        justify-content: space-around;
        padding : 0%;
        width : 80%;
    }
    .textediv1 {
        display : flex;
        justify-content: space-around;
        flex-direction : column;
        align-items: center;
        padding : 15% 5% 5% 5%;
       
    }
    .formulaire{
        display : flex;
        flex-direction: column;
        justify-content: space-between;
        align-items : center;
        justify-items: center;
        border-radius: 5px;
        margin : 0px 20px 20px 20px;
        width : 80%;
    }
	.formulaire h1{
		font-size : 4vw;
	}
    .devistexte {
        margin : 0px 20px 0px 20px;
        text-align : left;
        width : 80%;
        
    }
	.g-recaptcha{
		padding-top: 5%;
	}
	.message {
		padding-top : 5px;
	}
    .textediv1 p{
        font-size : 10pt;
        line-height : 160%;
        padding : 0% 0% 6% 0%;
        margin : 0px 20px 0px 20px;
    }
    .textediv1 h1{
        font-size : 3vw;
		font-size : 20pt;
		padding-left : 10px;
    }
}

@media screen and (max-width:640px){
	.bt{
        display : flex;
        flex-direction : column;
        align-items: center;
        width : 100%;
    }
            .btgauche{
                display : flex;
                flex-direction: column;
                justify-content: space-between;
                width : 80%;
            }
            .btdroite{
                display : flex;
                flex-direction: column;
                justify-content: space-between;
                width : 80%;
                
}
    .textediv1 {
        display : flex;
        justify-content: space-around;
        flex-direction : column;
        align-items: center;
        padding : 28% 2% 10% 2%;
       
    }
    .formulaire{
        display : flex;
        flex-direction: column;
        justify-content: space-around;
        align-items : center;
        justify-items: center;
        border-radius: 5px;
        margin : 0;
        width : 80%;
    }
	.formulaire h1{
		font-size : 6vw;
		padding-top : 30px; 
	}
	.textediv1 p{
		font-size : 8pt;
	}
}


/* FIN PARTIE DEMANDE DE DEVIS */




/* PARTIE DEMANDER UN DEVIS */
.demandeUnDevis {
	display : flex;
	justify-content: center;
	align-items: center;
	gap : 10px;
	padding-right : 10px;
	padding-top : 150px;
	padding-left : 10px;
	padding-bottom : 200px;
	background-color: whitesmoke;
}
.demandeUnDevis p{
	font-size : 3.7vw;
	margin-right : 50px;
}
.demandeUnDevis a{
	margin-right : 100px;
	margin-top : 160px;
	background-color: #40a1e1;
	border: 1px solid;
	padding: 0.9rem 1.6rem;
	border-radius: 30px;
	outline: none;
	font-size: 100%;
	font-weight: bold;
	cursor: pointer;
}
@media screen and (max-width:990px){
	.demandeUnDevis{
		padding-right : 20px;
		padding-bottom : 150px;
		padding-top : 150px;
	}
	.demandeUnDevis p{
		font-size : 3.6vw;
	}
	.demandeUnDevis a{
		margin-right : 0;
		margin-top : 120px;
		background-color: #40a1e1;
		border: 1px solid;
		padding: 0.7rem 1.2rem;
		border-radius: 30px;
		outline: none;
		font-size: 0.8rem;
		font-weight: bold;
		cursor: pointer;
	}
}
@media screen and (max-width:640px){
	.demandeUnDevis{
		display : flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-right : 20px;
		padding-bottom : 100px;
		padding-top : 100px;
	}
	.demandeUnDevis p{
		margin-right : 0;
		padding-top : 0;
		font-size : 7vw;
	}
	.demandeUnDevis a{
		float : left;
		margin-top : 20px;
		background-color: #40a1e1;
		border: 1px solid;
		padding: 0.7rem 1.2rem;
		border-radius: 30px;
		outline: none;
		font-size: 0.8rem;
		font-weight: bold;
		cursor: pointer;
	}
}
/* FIN PARTIE DEMANDER UN DEVIS  */







/* PARTIE MAP */
.map-container {
	background-color : white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 100px;
}

.map-container iframe {
	max-width: 700px;
    width: 100%;
    height: 450px; /* hauteur de l'iframe */
}
@media screen and (max-width:640px){
	.map-container{
		padding :20px;
	}
}
@media screen and (max-width:990px){
	.map-container{
		padding : 50px;
	}
}
/* FIN PARTIE MAP  */












/* PARTIE CONTACTEZ-NOUS DE LA FEUILLE DE STYLE  */
.textedivfoot{
	width: 100%;
	background-color: #505256;
	display : flex;
	justify-content: center;
	align-items: center;
	padding : 10px 30px;
}
.textedivfoot .adresse{
	margin-left: 5%;
}
.textedivfoot .dividerfoot{
	width : 2px;
	height : 90px;
	background-color : rgb(55, 54, 54);
}
.textedivfoot .adresse p{
	color : grey;
	font-size : 10pt;
}
.textedivfoot .logoentreprise{
	display : flex;
	align-items: center;
	justify-content: center;
	gap : 12px;
	padding-top: 9px;
	padding-right : 50px;
}
.textedivfoot .logoentreprise p{
	font-weight : bold;
	font-size : 16px;
	color : rgb(165, 165, 165);
}
.textedivfoot .logoentreprise img{
	position: relative;
	margin-bottom : 5px;
	width : 30px;
	height : 30px;
}
.textedivfoot .signature{
	margin-top : 40px;
	margin-left : 17vw;
}
.textedivfoot .signature p{
	font-size : 10px;
	color : grey;
}
@media screen and (max-width:990px){
	.textedivfoot .logoentreprise{
		padding-right : 40px;
	}
	.textedivfoot .adresse p{
		font-size : 1.2vw;
	}
	.textedivfoot .logoentreprise p{
		font-size : 1.7vw;
	}
	.textedivfoot .logoentreprise img{
		position: relative;
		margin-bottom : 5px;
		width : 25px;
		height : 25px;
	}
	.textedivfoot .signature{
		margin-top : 35px;
		text-align : center;
		margin-left : 7vw;
	}
	.textedivfoot .signature p{
		font-size: 1vw;
	}
	.textedivfoot .dividerfoot{
		height : 70px;
	}
}

@media screen and (max-width:640px){
	.textedivfoot {
		width : 100%;
		display : flex;
		flex-direction : column;
		justify-content : center;
		align-items: center;
	}
	.textedivfoot .dividerfoot{
		width : 70%;
		height : 2px;
		margin : 15px;
	}
	.textedivfoot .adresse p{
		color : grey;
		font-size : 2.5vw;
		text-align: center;
	}
	.textedivfoot .logoentreprise{
		padding-right : 0;
	}
	.textedivfoot .logoentreprise p{
		font-size : 3.1vw;
	}
	.textedivfoot .logoentreprise img{
		position: relative;
		margin-bottom : 5px;
		width : 6vw;
		height : auto;
	}
	.textedivfoot .signature p {
		font-size : 2.2vw;
	}
	.textedivfoot .signature{
		margin-top : 20px;
		text-align : center;
		margin-left : 0;
	}
}
/* FIN DE LA PARTIE CONTACTEZ-NOUS DE LA FEILLE DE STYLE  */



/* PARTIE DE LA FEUILLE DE STYLE POUR LA RESPONSIVITE */


















#modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#image-container {
    position: relative;
    max-width: 40vw;
    height: auto;
}

#image-container img {
    width: 100%;
    height: auto;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: white;
    font-size: 24px;
}

@media screen and (max-width: 1100px) {
    #image-container {
        max-width: 70%;
    }
}

@media screen and (max-width: 640px) {
    #image-container {
        max-width: 90%;
    }
}