@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,500;0,700;1,500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	}

#site {
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 20px;
	width: 100%;

	
	color: black;
	font-weight: 500;
	}


/*-------------------------*/
#contact_adress {
	margin: 0; padding: 0;
	height: auto; width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
}
 
	#adress {
		width: 90%;
		margin-bottom: 15px;
		text-align: center;
		font-family: 'Muli', 'Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
		font-weight: 400;
		font-size: 20px;
	}

	#phone_number{
		width: 100%;
		display: flex;
		justify-content: center;
	}

	#form_telephone_view{
		width: 100%;
		display: flex;
		justify-content: center ;
		align-items: center ;
	}

		#view_phone_number {
			margin: 10px 0 0 0;
			text-align: center;
			font-family: 'Muli', 'Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
			font-weight: 400;
			font-size: 20px;
		}

	/*----------------------------------*/
.telephone_form_btn {
  padding: 0 20px;
  min-width: 150px;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: transparent;
  border-radius: 31px;

  
	font-family: 'Muli', 'Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
	font-weight: 700;
    font-size: 20px;
    color: #fff;
    line-height: 1.2;
    text-transform: uppercase;

  transition: all 0.4s;
  position: relative;
  z-index: 1;
}

.telephone_form_btn::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;

  transform: translateX(-50%);
  border-radius: 31px;
  background-color: rgb(174, 182, 191);
  pointer-events: none;

  transition: all 0.4s;
}

.telephone_form_btn:hover:before {
  background-color: rgb(133, 146, 158 );
  width: calc(100% + 20px);
}



/*  .............................................................   */

@media all and (max-width: 600px){

	#adress {
		font-size: 18px;
	}
	.telephone_form_btn {
		font-size: 18px;
	}
	
}

/*  .............................................................   */
@media all and (max-width: 410px)
{

	#adress {
		font-size: 16px;
	}

	.telephone_form_btn{
		max-width: 95%;
		font-size: 16px;
	}

		#view_phone_number {
			font-size: 16px;
		}
}
header {
	height: 150px; width: 100%;
	
	grid-area: header;	
	}

	header div {
		height: 100%;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}

	header div a {
		width: 150px; height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	header div img {
		transition: width linear 0.3s;
		width: 150px; height: auto;
	}
		header div img:hover {
		transition: width linear 0.3s;
		width: calc(100% + 7px);
	}
/*  .............................................................   */
nav {
	padding: 0; margin: 0 0 20px 0;
	height: auto;

	grid-area: nav;

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

	}

	#puce_nav{
		margin: 0; padding: 0;
		height: auto; max-width: 600px;

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

		border-bottom: 3px solid #212121;
		position: relative;
	}

		.drapeau {
			position: absolute;
			height: 30px; width: 90px;
			right: -120px;
			top: 30%;

			color: black;
			font-family: 'Philosopher','arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
			font-weight: 700;
			font-size: 20px;
			
		}

			.drapeau img{
				left: 0;
				height: 30px;
				width: auto;
				margin: 0 0 0 10px;
			}

				.drapeau a{
					height: 100%; width: 100%;

					color: black;
					text-decoration: none;
					transition: 0.5s;

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

					.drapeau a:hover{
						transition: width linear 0.3s;
						width: calc(100% + 7px);
					}

		nav ul {
			height: auto; width: 100%;
			
			margin: 10px 0 10px 0; padding: 0;
			
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
		}

		nav ul li {
			padding: 0;
			list-style: none;
			width: 150px;
			
			font-family: 'Philosopher','arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
			font-weight: 700;
			font-size: 30px;

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

				nav ul li a {
					color: black;
					text-decoration: none;
					transition: 0.5s;
				}

				nav ul li a:hover {
				color: #8D6E63;
				transition: 0.5s;
				}
/*  .............................................................   */


/* 1280px media  */

@media all and (max-width: 1280px)
{


	nav {
	
	}
	
}

/*  .............................................................   */
@media all and (max-width: 1024px)
{

	nav {
	margin: 0 0 30px 0;
	height: auto; width: 100%;
	}

	#puce_nav{
		height: 100%; max-width: 600px;

		border-bottom: none;	
	}
		.drapeau {
			right: 70px;
			top: -120px;
		}

		nav ul {
			height: auto; width: 100%;
		}

		nav ul li {
			
		}


}
/*  .............................................................   */

@media all and (max-width: 600px){

	#puce_nav{
		height: 100%; max-width: 430px;	
	}

		.drapeau {
			right: 20px;
		}

		nav ul {
			height: auto; width: 100%;
		}

		nav ul li {
			max-width: 100px;
			font-size: 20px;
		}
}

/*  .............................................................   */
@media all and (max-width: 410px)
{
	nav ul li {
		max-width: 80px;
		font-size: 18px; 
	}
	.drapeau {
		right: 0px;
	}
}


/*---------------------------------------------*/
input {
  outline: none;
  border: none;
}


textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input::-webkit-input-placeholder { color: #bdbdd3;}
input:-moz-placeholder { color: #bdbdd3;}
input::-moz-placeholder { color: #bdbdd3;}
input:-ms-input-placeholder { color: #bdbdd3;}

textarea::-webkit-input-placeholder { color: #bdbdd3;}
textarea:-moz-placeholder { color: #bdbdd3;}
textarea::-moz-placeholder { color: #bdbdd3;}
textarea:-ms-input-placeholder { color: #bdbdd3;}

/*---------------------------------------------*/
button {
  outline: none !important;
  border: none;
  background: transparent;
}

button:hover {
  cursor: pointer;
}



.container_contact {
  padding: 0; margin: 0 0 15px 0;
  width: 100%; height: auto;  

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  position: relative;  
}

.wrap_contact {
  width: 500px;
  background: transparent;
  padding: 30px 0px 50px 0px;
}


/*==================================================================
[ Form ]*/

.contact_form {
  width: 100%;
}

.contact_form_title {
  display: block;
  font-family: 'Muli', 'Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
  font-size: 35px;
  font-weight: 700;
  color: black;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 30px;
}

/*------------------------------------------------------------------
[ Input ]*/

.wrap-input {
  width: 100%;
  background-color: rgb(244, 236, 247);
  border-radius: 31px;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.input {
  position: relative;
  display: block;
  width: 100%;
  background-color: rgb(244, 236, 247);
  border-radius: 31px;
  font-family: 'Muli', 'Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
  font-size: 20px;
  color: rgb(46, 64, 83);
  line-height: 1.2;
}


/*---------------------------------------------*/
input.input {
  height: 70px;
  padding: 0 35px 0 35px;
}


textarea.input {
  min-height: 250px;
  padding: 20px 35px 0 35px;
}

/* -----------scroll bar textarea -----------*/
      

      textarea.input::-webkit-scrollbar {
        width: 10px;
      }

      textarea.input::-webkit-scrollbar-track  {
        border-radius: 10px;
        background-color: rgb(229, 231, 233);
        margin: 15px 0 0 0;
      }

      textarea.input::-webkit-scrollbar-thumb {
         box-shadow: inset 0px 0px 41px 0px #90A4AE;
        border-radius: 10px;
      }


/*------------------------------------------------------------------
[ Focus Input ]*/

.focus_input {
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;

  transform: translateX(-50%);
  border-radius: 40px;
  background-color: rgb(210, 180, 222);
  pointer-events: none;
  
  transition: all 0.4s;
}

.input:focus + .focus_input {
  width: calc(100% + 20px);

}

/*------------------------------------------------------------------
[ Button ]*/
.container_contact_form_btn {
  padding-top: 10px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.contact_form_btn {
  padding: 0 20px;
  min-width: 150px;
  height: 62px;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: transparent;
  border-radius: 31px;

  font-family: 'Muli', 'Roboto Condensed', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  transition: all 0.4s;
  position: relative;
  z-index: 1;
}

.contact_form_btn::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;

  transform: translateX(-50%);
  border-radius: 31px;
  background-color: rgb(187, 143, 206);
  pointer-events: none;

  transition: all 0.4s;
}

.contact_form_btn:hover:before {
  background-color: rgb(165, 105, 189);
  width: calc(100% + 20px);
}


/*------------------------------------------------------------------
[ confirmation or error ]*/

.response_form {
    margin: 15px 0 0 0;
    font-family: 'Roboto', 'Ubuntu',  'Montserrat',  'arial';
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;

    display: flex;
    justify-content: center;
}

  .response_form_text {
    width: auto; height: auto;
    margin: 0; padding: 15px;
    border-radius: 35px;
    background-color: #A5D6A7;
    text-align: center;
  }


/*-----------------------MEDIA 700px------------------------------*/
@media all and (max-width: 700px)
{
  .response_form_text {
    width: 80%;
  }
}

/*-----------------------MEDIA 550px------------------------------*/
@media all and (max-width: 550px)
{
  .wrap_contact {
    width: 400px;
    background: transparent;
    padding: 50px 0px 50px 0px;
  }
   .contact_form_title{
    font-size: 30px;
  }
}

/*-----------------------MEDIA 450px------------------------------*/
@media all and (max-width: 450px)
{
  .wrap_contact {
    width: 300px;
    background: transparent;
    padding: 50px 0px 50px 0px;
  }

  .contact_form_title{
    font-size: 23px;
  }

}


footer {
	padding: 0; margin: 20px 0 0 0;
	
	grid-area: footer;
	height: auto; width: 100%;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

	font-size: 17px; 
	font-weight: 700;
	color: black;
	}	
	
		#puce_footer{
			margin: 0 0 15px 0; padding: 0;
			height: auto; max-width: 600px;

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

		}
		
			#puce_footer ul {
				height: auto; width: 100%;
			
				margin: 10px 0 10px 0; padding: 0;
				
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}

				#puce_footer ul li{
					padding: 0;
					list-style: none;
					width: 140px;

					font-size: 17px; 
					font-family: 'Philosopher', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
					font-weight: 700;

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


				#puce_footer ul li a {
					text-decoration: none;
					color: black;
					transition: 0.5s;
				}

					#puce_footer ul li a:hover {
					color: #8D6E63;
					transition: 0.5s;
				}

			#copyright {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 0px;
			}

			.mentions_legales a {
				height: 35px;
				text-decoration: none;
				color: black;
				font-size: 15px;
				font-family: 'Muli','Raleway', 'arial', "Times New Roman", 'Helvetica', 'sans-serif', 'Times';
				font-weight: 700;
			}

				.mentions_legales p {
					padding: 0; margin: 0;
					color: black;
				}

					.mentions_legales p:hover{
						color: #A7987D;
						transition: 0.5s ;
					}

			footer img{
				height: 35px;
				width: auto;
			}

/*  .............................................................   */
@media all and (max-width: 1024px)
{
	
		#puce_footer{
			height: 100%; max-width: 600px;
		}

			#puce_footer ul {
				height: auto; width: 100%;
			}

				#contact h1{
					font-size: 35px;
				}

				#contact p{
					font-size: 20px;
				}
}

/*  .............................................................   */
@media all and (max-width: 600px)
{

		#puce_footer{
			height: 100%; max-width: 430px;	
		}
		
			#puce_footer ul {
				height: auto; width: 100%;
			}
				#puce_footer ul li {
				max-width: 100px;
				font-size: 17px; 
				}

			#contact h1{
				font-size: 30px;
			}

			#contact p{
				font-size: 15px;
			}

}

/*  .............................................................   */
@media all and (max-width: 410px)
{
	#puce_footer ul li {
				max-width: 80px;
				font-size: 16px; 
				}
}