@charset "utf-8";

@font-face {
font-family: 'Rubik-Regular';
src: url('Rubik-Regular.ttf');
}
@font-face {
font-family: 'OpenSans-ExtraBold';
src: url('OpenSans-ExtraBold.ttf');
}
@font-face {
font-family: 'OpenSans-Regular';
src: url('OpenSans-Regular.ttf');
}
@font-face {
font-family: 'OpenSans-SemiBold';
src: url('OpenSans-SemiBold.ttf');
}


html{
	min-height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
}
body{
	font-family: 'OpenSans-Regular';
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	max-width: 2200px;
}
#content{
	font-size: 1.2rem;
	width: 100%;
	flex: 1;
	color: #393939;
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media screen and (max-width: 1275px){
	#content{
		font-size: 1.1rem;
	}
}
@media screen and (max-width: 1000px){
	#content{
		font-size: 1rem;
	}
}
@media screen and (max-width: 650px){
	#content{
		font-size: 0.9rem;
	}
}
.color_base{
	color: #000;
}
.marginTop05rem{
	margin-top: 0.5rem;
}
.marginTop1rem{
	margin-top: 1rem;
}
.marginTop2rem{
	margin-top: 2rem;
}
.marginTop3rem{
	margin-top: 3rem;
}
.marginTop5rem{
	margin-top: 5rem;
}
.marginBottom1rem{
	margin-bottom: 1rem;
}
.marginBottom2rem{
	margin-bottom: 2rem;
}
.marginBottom3rem{
	margin-bottom: 3rem;
}
.marginBottom4rem{
	margin-bottom: 4rem;
}
.texteJustify{
	text-align: justify;
}
.texteCenter{
	text-align: center;
}
.texteBold{
	font-weight: bold;
}
.texteItalic{
	font-style: italic;
}
.flexCenterY{
	display: flex;
	justify-content: center;
}
a{
	transition: .25s ease-in-out;
}
a:hover{
	transition: .25s ease-in-out;
	color: #cfab67;
}
.couleurSecondaire{
	color: #cfab67;
}
.couleurPrimaire{

}

																/*Header*/
#header{
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	background-color: rgba(20, 20, 20, 0.6); /* Rouge avec 50% d'opacité */
	z-index: 4;
}
#reseaux{
	width: 100%;
	z-index: 5;
	display: flex;
	justify-content: center;
	background-color: rgba(0, 0, 0, 1); /* Rouge avec 50% d'opacité */
}
#agencementIconesReseaux{
	display: flex;
	width: 95%;
	justify-content: flex-end;
}
#agencementIconesReseaux a:hover{
	scale: 1.2;
}
#agencementIconesReseaux img{
	margin-left: 0.5rem;
	width: 36px;
	height: 36px;
	padding: 5px;
}
#bandeauContact{
	padding-top: 0.5rem;
	display: flex;
	justify-content: space-between;
	width: 95%;
	margin-bottom: 0.5rem;
}
@media screen and (max-width: 650px){
	#bandeauContact{
		justify-content: flex-end;
	}
	#agencementNomSiteTel{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
}

#logoAlphavtc{
	width: 300px;
}
@media screen and (max-width: 1200px){
	#logoAlphavtc{
		width: 200px;
	}	
}
@media screen and (max-width: 820px){
	#logoAlphavtc{
		width: 150px;
	}	
}
@media screen and (max-width: 580px){
	#logoAlphavtc{
		width: 90px;
	}	
}
#agencementNomSociete{
	margin-top: -0.6rem;
}
#lienContact{
	display: flex;
	align-items: center;
}
@media screen and (max-width: 650px){
	#lienContact{
	display: none;
}
}
#lienContact a{
	margin-left: 2rem;
	padding: 0.5rem 1.8rem;
	border-radius: 5px;
}
@media screen and (max-width :1000px){
	#lienContact a{
		margin-left: 2rem;
		padding: 0.2rem 1.2rem;
		border-radius: 5px;
	}	
}
#lienContact > a:nth-child(1){
	font-family: 'OpenSans-SemiBold';
	transition: .25s ease-in-out;
	background-color: #cfab67;
	color: #FFF;
	border: 1px #FFF solid;
}
#lienContact > a:nth-child(1):hover{
	background-color: #FFF;
	color: #cfab67;
	border: 1px #cfab67 solid;
}
#lienContact > a:nth-child(2){
	font-family: 'OpenSans-SemiBold';
	transition: .25s ease-in-out;
	background-color: #FFF;
	color: #000;
	border: 1px #000 solid;
}
#lienContact > a:nth-child(2):hover{
	background-color: #000;
	color: #FFF;
	border: 1px #FFF solid;
}
#lienContactTel{
	display: flex;
	border-radius: 5px;
}
@media screen and (min-width: 651px){
	#lienContactTel{
		display: none;
	}
}
#lienContactTel a{
	display: flex;
	align-items: center;
	margin-left: 0.5rem;
	padding: 0rem 1rem;
	border-radius: 5px;
	margin: 0.3rem 0.5rem;
}
#lienContactTel > a:nth-child(1){
	font-family: 'OpenSans-SemiBold';
	transition: .25s ease-in-out;
	background-color: #cfab67;
	color: #FFF;
	border: 1px #FFF solid;
}
#lienContactTel > a:nth-child(1):hover{
	background-color: #FFF;
	color: #cfab67;
	border: 1px #cfab67 solid;
}
#lienContactTel > a:nth-child(2){
	font-family: 'OpenSans-SemiBold';
	transition: .25s ease-in-out;
	background-color: #FFF;
	color: #000;
	border: 1px #cfab67 solid;
}
#lienContactTel > a:nth-child(2):hover{
	background-color: #000;
	color: #FFF;
	border: 1px #FFF solid;
}
#nomEnseigne{
	font-family: 'OpenSans-ExtraBold';
	font-size: 2rem;
	color: #FFF;
}
@media screen and (max-width: 820px){
	#nomEnseigne{
	font-size: 1.5rem;
}	
}
@media screen and (max-width: 650px){
	#nomEnseigne{
		display: flex;
		justify-content: flex-end;
	}
}
@media screen and (max-width: 580px){
	#nomEnseigne{
		font-size: 1rem;
	}
}
#ecritureSousNomEnseigne{
	font-size: 0.8rem;
	color: #FFF;
}
@media screen and (max-width: 580px){
	#ecritureSousNomEnseigne{
		margin-top: -0.6rem;
	}
}
#ecritureSousNomEnseigne span{
	color: #cfab67;
}
.menuPrincipal{
	display: flex;
	width: 100%;
	justify-content: center;
	color: #FFF;
}
@media screen and (max-width: 1200px) {
.menuPrincipal{
	display: none;
}}
.menuPrincipal > a{
	margin: 0rem 1rem;
}
																/*FIN Header*/

																/*Menu*/

																/*FIN Menu*/
																/*menuResp*/
.side-bar {
  background: #1b1a1b;
  backdrop-filter: blur(15px);
  width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -250px;
  overflow-y: auto;
  transition: 0.6s ease;
  transition-property: left;
  z-index: 99;
}
.side-bar::-webkit-scrollbar {
  width: 0px;
}
.side-bar.active {
  left: 0;
}
.side-bar .menu {
  width: 100%;
  margin-top: 50px;
}
.side-bar .menu .item {
  position: relative;
  cursor: pointer;
}
.side-bar .menu .item a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  line-height: 50px;
}
.side-bar .menu .item a:hover {
  background: #33363a;
  transition: 0.3s ease;
}
.side-bar .menu .item i {
  margin-right: 15px;
}
.side-bar .menu .item a .dropdown {
  position: absolute;
  right: 0;
  margin: 20px;
  transition: 0.3s ease;
}
.side-bar .menu .item .sub-menu {
  background: #262627;
  display: none;
}
.side-bar .menu .item .sub-menu a {
  padding-left: 30px;
}
.rotate {
  transform: rotate(90deg);
}
.close-btn {
  position: absolute;
  color: #fff;
  font-size: 23px;
  right: 0px;
  margin: 15px;
  cursor: pointer;
}
.menu-btn {
  position: fixed;
  color: #C0C0C0;
  font-size: 35px;
  cursor: pointer;
  top: -8px;
  left: 6px;
  z-index: 10;
}
@media screen and (min-width: 1201px) {
  .menu-btn {  
    display: none;
  }
}
@media screen and (max-width: 650px) {
  .menu-btn {  
    top: 25px;
  }
}
																/*menuResp*/

                    				      						/*menu hamburger*/
                    				      						/*FIN menu hamburger*/

																/*Index*/
#grandeImageBandeau{
	top: 0;
	/*height: 100vh;*/
	width: 100%;
}
#grandeImageBandeau img{
/*	height: 100vh;*/
	margin-top: 36px;
	width: 100%;
}
#content h1{
	font-family: 'OpenSans-SemiBold';
	margin-top: 1.5rem;
	width: 100%;
	text-align: center;
	font-size: 2rem;
	padding: 0rem 1rem;
}
@media screen and (max-width: 1000px){
	#content h1{
		font-size: 1.7rem;
	}
}
@media screen and (max-width: 800px){
	#content h1{
		font-size: 1.5rem;
	}
}
@media screen and (max-width: 580px){
	#content h1{
		margin-top: 1rem;
		font-size: 1rem;
    padding: 0rem 0.2rem;
	}
}
#content h1 span{
	font-family: 'OpenSans-ExtraBold';
}
#content h2{
	font-family: 'OpenSans-SemiBold';
	width: 100%;
	text-align: center;	
	margin-bottom: 2rem;
	color: #cfab67;
}
@media screen and (max-width: 580px){
	#content h2{
	margin-bottom: 1.2rem;
	}
}
.description{
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0rem 4rem;
}
@media screen and (max-width: 800px){
	.description{
		padding: 0rem 2.5rem;
	}
}
@media screen and (max-width: 580px){
	.description{
		padding: 0rem 0.5rem;
	}
}
.description p{
	text-align: justify;
}
.traitSeparateur{
	width: 100%;
	border-top: 1px #393939 solid;
}
#contact{
	width: 100%;
	text-align: center;
	font-size: 2rem;
}
																/*FIN index*/


                        										/*Footer*/
#footer{
	width: 100%;
	font-size: 0.8rem;
}
                       											/*Fin Footer*/

                       							   /*formulaire contact*/
.formulaire_contact{
  flex:4;
  font-size: 1.2rem;
  padding: 1rem 0rem 1rem 0rem;
  display: flex;
	justify-content: end;
}
@media screen and (max-width: 1250px){
	.formulaire_contact{
		justify-content: center;
	}
}
.formulaire_contact form{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 580px){
.formulaire_contact form{
  font-size: 1rem;
}}
.formulaire_contact form div{
  margin-top: 1rem;
  color: #000;
}
.formulaire_contact.formulaire_contact2 form div{

}
.autreContact{
flex:4;
font-size: 1.3rem;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 1rem;
text-align: center;
}
.autreContact p{
  margin-bottom: 1rem;
}
@media screen and (max-width: 500px){
  .autreContact p{
font-size: 1rem;
}
}
.inputedit{
  width: 90%;
  padding:0.5rem;
  border: 1px solid #cfab67;
  background-color: #FFF;
  color:#0d0c0c;
}
#valider{
  cursor: pointer;
  transition: .25s ease-in-out;
  color: #262628;
  margin-top: 1.5rem;
  padding:0rem 0.7rem 0rem 0.7rem;
  height: 2rem;
  font-size: 1.3rem;
  font-weight: bold;
  background-color: #FFF;
  border: 1px solid #262628;
}
@media screen and (max-width: 480px){
#valider{
  font-size: 1.1rem;
}}
#valider:hover{
  transition: .25s ease-in-out;
  color: #FFF;;
  background-color: #262628;
  border: 1px solid #FFF;
}
#textareamessage{
  padding:0.5rem;
  color:#0d0c0c;
  min-height: 10rem;
}

.formulaire_contact form ul li{
  text-align: center;
}
.asterisque{
  color:#c50303;
}
.error{
  color:#ec5f66;
}
#titre_form{
		font-family: "Calligraffiti";
		font-size: 30px;
		color: #cfab67;
}
@media screen and (max-width: 1000px){
#titre_form{
  font-size: 1.2rem;
}}
#agencementContact{
	display: flex;
	justify-content: space-between;
	padding: 1rem 2rem 1rem 2rem;
	margin-bottom: 1rem;
	width: 90%;
}
@media screen and (max-width: 1250px){
	#agencementContact{
		flex-direction: column;
		justify-content: center;
	}
}
@media screen and (max-width: 650px){
	#agencementContact{
		width: 100%;
	}
}
@media screen and (max-width: 400px){
	#agencementContact{
		padding: 1rem;
	}
}
#coordonees{
	display: flex;
	flex-direction: column;
}
@media screen and (max-width: 1050px){
	#coordonees{
font-size: 1rem;
}
}
#coordonees span{
		margin:	1rem 1rem 0rem 0rem;
}
#coordonees iframe{
	padding: 1rem 1rem 1rem 0rem ;
}
@media screen and (max-width: 1360px){
	#coordonees iframe{
		width: 30rem;
}
}
@media screen and (max-width: 1000px){
	#mapTel iframe{
		width: 30rem;
}
}
@media screen and (max-width: 600px){
	#mapTel iframe{
		width: 25rem;
}
}
@media screen and (max-width: 500px){
	#mapTel iframe{
		width: 20rem;
}
}
@media screen and (max-width: 400px){
	#mapTel iframe{
		width: 17rem;
}
}
@media screen and (max-width: 370px){
	#mapTel iframe{
		width: 15rem;
}
}
@media screen and (max-width: 1250px){
#coordonees iframe{
display: none;
}
}
#mapTel{
	display: none;
	margin: auto;
}
@media screen and (max-width: 1250px){
#mapTel{
	margin-bottom: 1rem;
display: block;
}
}
#GrosTitreEncadre{
	text-align: center;
	font-family: 'Vogue';
 	font-size: 2.8rem;
 	color: #cfab67;
 	background-color: #FFF;
 	padding-top: 0.4rem;
 	line-height: 3.5rem;
}
@media screen and (max-width: 800px){
	#GrosTitreEncadre{
 	font-size: 2rem;
}
}
@media screen and (max-width: 600px){
	#GrosTitreEncadre{
 	font-size: 1.3rem;
}
}
.nomCentreContact{
	font-family: 'Vogue';
	font-size: 1.9rem;
	color: #cfab67;
}
#heureChoisie{
	display: flex;
}
#date{
	margin-right: 2rem;
	border: 1px solid #000;
	border-radius: 3px;
}
                          /*fin formulaire contact*/

.avantages-vtc {
    width: 100%;
    padding: 0 4rem;
}

@media screen and (max-width: 800px) {
    .avantages-vtc {
        padding: 0 2.5rem;
    }
}

@media screen and (max-width: 580px) {
    .avantages-vtc {
        padding: 0 0.5rem;
    }
}

.avantages-vtc h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: #cfab67;
    text-align: center;
}

.avantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media screen and (max-width: 1000px) {
    .avantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 650px) {
    .avantages-grid {
        grid-template-columns: 1fr;
    }
}

.avantage-item {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.avantage-item:hover {
    transform: translateY(-5px);
}

.avantage-titre {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.avantage-titre i {
    font-size: 1.5rem;
    color: #cfab67;
    margin-right: 1rem;
}

.avantage-titre h4 {
    font-family: 'OpenSans-SemiBold';
    font-size: 1.1rem;
    margin: 0;
}

.avantage-item p {
    text-align: justify;
    margin: 0;
    line-height: 1.5;
}

.avantage-conclusion {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.1rem;
    color: #393939;
}
@media screen and (max-width: 1200px){
	.avantage-conclusion{
		font-size: 0.9rem;
	}
	.avantages-vtc h3{
		font-size: 1.1rem;
	}
}
@media screen and (max-width: 600px){
	.avantage-conclusion{
		font-size: 0.8rem;
	}
	.avantages-vtc h3{
		font-size: 1rem;
	}
}