@charset "utf-8";

@font-face {
font-family: 'Rubik-Regular';
src: url('Rubik-Regular.ttf');
}
@font-face {
font-family: 'Rubik-Medium';
src: url('Rubik-Medium.ttf');
}
@font-face {
font-family: 'Nexa-Heavy';
src: url('Nexa-Heavy.ttf');
}


html{
	min-height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	color: #231f20;
}
body{
	font-family: 'Rubik-Regular';
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	width: 100%;
	max-width: 2200px;
}
#content{
	font-size: 1.2rem;
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media screen and (max-width: 1475px){
	#content{
		font-size: 1.1rem;
	}
}
@media screen and (max-width: 1375px){
	#content{
		font-size: 1rem;
	}
}
@media screen and (max-width: 900px){
	#content{
		font-size: 0.87rem;
	}
}
.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: #ce0000;
}
.couleurSecondaire{
	color: #93d122;
}
.couleurPrimaire{

}

																/*Header*/
#header{
	width: 100%;
	display: flex;
}
@media screen and (max-width: 799px){
	div.divBaniereLogo:nth-child(2){
		display: none;
	}
}
@media screen and (min-width: 800px){
	div.divBaniereLogo:nth-child(3){
		display: none;
	}
}
#content div h1{
	text-align: justify;
	padding: 0rem 0.5rem;
	margin-top: 3rem;
	font-size: 1.3rem;
}
@media screen and (max-width:550px){
	#content div h1{
	font-size: 1rem;
}
}

																/*FIN Header*/

																/*Menu*/
.menuPrincipal{
	display: flex;
	justify-content: flex-end;
	position: fixed;

	font-size: 1.4rem;
}
.menuPrincipal a{
	padding: 0.5rem 2rem;
	margin: 0.5rem 1rem;
	background-color: #afd918;
	border-radius: 10px;
	border:	2px solid #231f20;
	color: #231f20;
}
@media screen and (max-width: 1500px){
	.menuPrincipal a{
		padding: 0.2rem 1rem;
		margin: 0.5rem 1rem;
	}	
}
.menuPrincipal a:hover{
	background-color: #231f20;
	color: #FFF;
	border:	2px solid #afd918;
}
.sectionSousTitres{
	margin-top: 3rem;
	font-family: 'Rubik-Medium';
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width: 515px){
	.sectionSousTitres{
		margin-top: 2rem;
	}
}
.sectionSousTitres h2{
	font-size: 3rem;
}
@media screen and (max-width: 870px){
	.sectionSousTitres h2{
	font-size: 1.8rem;
}
}
.texteSousH2{
	font-size: 2.5rem;
}
@media screen and (max-width: 870px){
	.texteSousH2{
	font-size: 1.6rem;
}
}
.sectionSousTitres p{
	padding: 0rem 0.5rem;
}
@media screen and (max-width: 600px){
	.sectionSousTitres{
	text-align: justify;
}
	.sectionSousTitres p{
		margin-top: 0.5rem;
	}
}
.sectionSousTitres img{
	width: 60px;
}
.texteSectionSousTitres{
	margin-top: 1rem;
	font-family: 'Rubik-Regular';
}

																/*FIN Menu*/

                    				      						/*menu hamburger*/
#menuToggle{
position: fixed;
top: 35px;
left: 4px;
z-index: 7;
-webkit-user-select: none;
user-select: none;
width: 100%;
}
@media screen and (min-width: 1001px){
  #menuToggle{  
  	display: none;
  }
}
#menuToggle a{
padding: 5px;
transition: .25s ease-in-out;
}
#menuToggle a:hover{
transition: .25s ease-in-out;
background-color: #cdc2c6;
}
#menuToggle input{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 7;
-webkit-touch-callout: none;
}
#menuHamb{
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
width: 100%;
margin: -168px 0px 0px -4px;
padding-top: 125px;
padding-bottom: 1rem;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(0, -100%);
transition: transform 0.5s;
line-height: 1.3;
font-size: 1.3rem;
background-color: #231f20;
border-bottom: 1px #FFF solid;
}
#menuHamb a{
width: 100%;
text-align: center;
color: #93d122;
}
@media screen and (max-width: 800px){
#menuHamb a{
font-size: 1.3rem;
}
}
#menuHamb a:hover{
-webkit-box-shadow:inset 0px 0px 0px 1px #e5c76e;
-moz-box-shadow:inset 0px 0px 0px 1px #e5c76e;
box-shadow:inset 0px 0px 0px 1px #e5c76e;
background-color: #93d122;
color: #fff;
}
#menuToggle input:checked ~ .ulHamburger{
transform: none;
}

/*Effet petites barres menu*/
#menuToggle span{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #9d9d9d;
border-radius: 3px;
z-index: 6;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #FFF;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
@media screen and (max-width: 1000px) {
.menuPrincipal{
display: none;
}

}
                    				      						/*FIN menu hamburger*/

																/*Index*/
.divDeuxParties{
	margin-top: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60%;
}
@media screen and (max-width: 1540px){
	.divDeuxParties{
		width: 70%;
	}
}
@media screen and (max-width: 600px){
	.divDeuxParties{
		flex-direction: column;
		margin-top: 1rem;
	}
}
@media screen and (max-width: 1000px){
	.divDeuxParties{
		width: 70%;
	}
}
@media screen and (max-width: 840px){
	.divDeuxParties{
		width: 95%;
	}
}
.partieDivTop{
	flex: 1;
	font-family: 'Rubik-Medium';
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0rem 5rem 0rem 0rem;
}
@media screen and (max-width: 600px){
	.partieDivTop{
	margin: 0rem;
	text-align: center;
	}	
}
.partieDivTop p{
	font-size: 2.5rem;
}
@media screen and (max-width: 1320px){
	.partieDivTop p{
	font-size: 2rem;
	}	
}
@media screen and (max-width: 1035px){
	.partieDivTop p{
	font-size: 1.5rem;
	}	
}
@media screen and (max-width: 600px){
	.partieDivTop p{
	font-size: 1.1rem;
	}	
}
.divDeuxParties div img{
	/*height: 380px;*/
	width: 500px!important;
	border-radius: 15px;
}
.imgPromo{
	width: 610px;
	border-radius: 15px;
}
.partieDivTop img.imgAvecVous{
	margin-top: 1rem;
	height: 140px;
	width: 70%;
}
.agencementVignettes{
	margin-top: 4rem;
	display: flex;
	font-size: 1.1rem;
	display: flex;
}
@media screen and (max-width: 1120px){
	.agencementVignettes{
		font-size: 0.8rem;
	}
}
@media screen and (max-width: 850px){
	.agencementVignettes{
		flex-direction: column;
		align-items: center;
	}
}
@media screen and (max-width: 600px){
	.agencementVignettes{
		margin-top: 2rem;
	}
}
@media screen and (max-width: 515px){
	.agencementVignettes{
		width: 95%;
	}
}
.wrapVignettes{
	display: flex;
}
@media screen and (max-width: 515px){
	.wrapVignettes{
		flex-direction: column;
		width: 100%;
	}
}
@media screen and (max-width: 850px){
		div.wrapVignettes:nth-child(2){
			margin-top: 2rem;
	}
}
@media screen and (max-width: 515px){
		div.wrapVignettes:nth-child(2){
			margin-top: 0rem;
	}
}
.vignettes{
	margin: 0rem 2rem;
}
@media screen and (max-width: 930px){
	.vignettes{
		margin: 0rem 1.5rem;
	}
}
@media screen and (max-width: 515px){
	.vignettes{
		display: flex;
		margin-top: 1rem;
	}
}
@media screen and (max-width: 380px){
	.vignettes{
		margin: 1rem 0.5rem 0rem 0.5rem;
	}
}
@media screen and (max-width: 515px){
	.texteVignettes{
		display: flex;
		margin-left: 1rem;
	}
	.texteVignettes p{
		display: flex;
		align-items: center;
		font-weight: bold;
	}
	div.texteVignettes p:nth-child(2){
		margin-left: 0.1rem;
	}
}
@media screen and (max-width: 515px){
	.texteVignettes p{
		font-weight: normal;
	}
}
.divImgVignettes{
	display: flex;
	justify-content: center;
	align-items: center;
}
.divImgVignettes img{
	height: 65px;
	width: 120px;
}
@media screen and (max-width: 515px){
	.divImgVignettes img{
		width: 75px;
		height: auto;
	}
}
@media screen and (max-width: 380px){
	.divImgVignettes img{
		width: 50px;
		height: auto;
	}
}
.vignettes p{
	text-align: center;
}
.titreSection{
	color: #e6ea06;
	background-color: #231f20;
	font-size: 3rem;
	width: 100%;
	text-align: center;
	padding-bottom: 2rem;
	font-family: "Nexa-Heavy";
}
@media screen and (max-width: 870px){
	.titreSection{
	font-size: 1.8rem;
}
}
.titreSection.sectionContact{
	background-color: #ffffff;
	color: #93d122;
}
.hautNoir{
	width: 100%;
	margin-top: 5rem;
}
@media screen and (max-width: 870px){
	.hautNoir{
		margin-top: 3rem;
	}
}

.hautNoir img{
	width: 100%;
}
.backgroundNoir{
	width: 100%;
	background-color: #231f20;
	display: flex;
	flex-direction: column;
	align-items: center;
	
}
.blockDescription{
	width: 70%;
	display: flex;
}
@media screen and (max-width: 1645px){
	.blockDescription{
		flex-direction: column;
		width: 85%;
	}
}
@media screen and (max-width: 1345px){
	.blockDescription{
		width: 95%;
	}
}
.blockDescription img{
	border-radius: 15px;
}
.divImageChangementPareBrise{
	display: flex;
	justify-content: center;
}
.texteBlockDescription{
	margin-left: 2rem;
	color: #dfdfdf;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
@media screen and (max-width: 1645px){
	.texteBlockDescription{
		margin-top: 1rem;
		margin-left: 0rem;
		display: flex;
		flex-direction: row;
	}
}
@media screen and (max-width: 1160px){
	.texteBlockDescription{
		flex-direction: column;
	}
}
.backgroundNoir h2{
	color: #93d122;
	font-size: 1.6rem;
}
@media screen and (max-width: 1345px){
	.backgroundNoir h2{
	font-size: 1.4rem;
}
}
@media screen and (max-width: 870px){
	.backgroundNoir h2{
	font-size: 1.2rem;
}
}

.texteBlockDescription > h2:nth-child(6){
	margin-top: 2rem;
}
.texteBlockDescription p{
	margin-bottom: 0.5rem;
}
.texteBlockDescription > p:nth-child(10){
	margin-bottom: 0rem;
}
.texteSousBlockDescription > h2:nth-child(4){
	margin-top: 2rem;
}
@media screen and (max-width: 1645px){
	.texteSousBlockDescription > h2:nth-child(4){
		margin-top: 1rem;
	}
}
.texteSousBlockDescription{
	color: #dfdfdf;
	margin-top: 2rem;
	padding-bottom: 2rem;
	width: 85%;
	text-align: justify;
}
@media screen and (max-width: 1645px){
	.texteSousBlockDescription{
		margin-top: 1rem;
	}
}
@media screen and (max-width: 1345px){
	.texteSousBlockDescription{
		width: 95%;
	}
}
.basNoir{
	width: 100%;
	margin-bottom: 2rem;
}

																/*FIN index*/


                        										/*Footer*/
#footer{
	width: 100%;
	background-color: #231f20;
	color: #dfdfdf;
	padding: 0.3rem;
}
                       											/*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;
}
@media screen and (max-width: 580px){
.formulaire_contact form{
  font-size: 1rem;
}}
.formulaire_contact form div{
  margin-top: 1rem;
}
.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: 40rem;
  padding:0.5rem;
  border-width: 1px;
  border-color: #1d1d1d;
  border-style: solid;
  background-color: #c0c0c0;
  color:#0d0c0c;
}
@media screen and (max-width: 1440px){
.inputedit{
  width: 35rem;
}}
@media screen and (max-width: 1000px){
.inputedit{
 width: 25rem;
}}

@media screen and (max-width: 600px){
.inputedit{
  width: 25rem;
}}
@media screen and (max-width: 500px){
.inputedit{
  width: 16rem;
}}
@media screen and (max-width: 355px){
.inputedit{
  width: 14rem;
}}
#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: #C0C0C0;
  border: 1px solid #262628;
}
@media screen and (max-width: 480px){
#valider{
  font-size: 1.1rem;
}}
#valider:hover{
  transition: .25s ease-in-out;
  color: #C0C0C0;;
  background-color: #262628;
  border: 1px solid #C0C0C0;
}
#textareamessage{
  padding:0.5rem;
  color:#0d0c0c;
  min-height: 10rem;
}
#textareamessage::placeholder{
	color: #0d0c0c;
}
input::placeholder{
	color: #0d0c0c;
}
.formulaire_contact form ul li{
  text-align: center;
}
.asterisque{
  color:#c50303;
}
.error{
  color:#ec5f66;
}

#agencementContact{
	width: 90%;
	display: flex;
	justify-content: space-between;
	padding: 1rem 2rem 1rem 2rem;
	margin-bottom: 1rem;
	border: 1px solid #93d122;
}
@media screen and (max-width: 1250px){
	#agencementContact{
		flex-direction: column;
		justify-content: center;
	}
}
#coordonees{
	display: flex;
	flex-direction: column;
}
@media screen and (max-width: 1050px){
	#coordonees{
font-size: 13px;
}
}
#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;
}
}
.NomFormulaire{
	color: #93d122;
	font-size: 1.5rem;
}

                          /*fin formulaire contact*/

                          /*formulaire réservation*/
.formReservation{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.agencementVignettesVoitureForm{
	display: flex;
}
.vignettesVoitureForm{
	margin: 0.5rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width: 375px){
	.vignettesVoitureForm{
		text-align: center;
	}
}
.typeVitre{
	width: 185px;
}
.under490{
	display: none;
}
.under445{
	display: none;
}
@media screen and (max-width: 445px){
	.under445{
		display: block;
	}
}
.under350{
	display: none;
}
@media screen and (max-width: 350px){
	.under350{
		display: block;
	}
}
@media screen and (max-width: 820px){
	.typeVitre{
		width: 125px;
	}
}
@media screen and (max-width: 590px){
	.typeVitre{
		width: 98px;
	}
}
	@media screen and (max-width: 490px){
	.typeVitre{
		width: 82px;
		text-align: center;
	}
	.vignettesVoitureForm{
	margin: 0.5rem 0.7rem;
}
 .under490{
 	display: block;
 }
}
.degatPareBrise{
	width: 285px;
}
@media screen and (max-width: 1020px){
	.degatPareBrise{
		width: 175px;
	}
}
@media screen and (max-width: 690px){
	.degatPareBrise{
		width: 120px;
	}
	.vignettesVoitureForm{
	margin: 0.5rem 1rem;
	}
}
@media screen and (max-width: 445px){
	.degatPareBrise{
		width: 80px;
	}
	.vignettesVoitureForm{
		justify-content: flex-start;
		text-align: center;
	}
}
/* Opacité réduite pour tous les labels d'images par défaut */
.imageLabel {
    opacity: 0.6;
    transition: opacity 0.3s ease; /* Transition pour un effet doux */
}

/* Augmentation de l'opacité pour le label d'image lorsque son bouton radio est coché */
input[type="radio"]:checked + .labelFormulaireReservation + .imageLabel {
    opacity: 1;
    filter: brightness(1.1);
    background-color: rgba(230,234,6,.5);
    border-radius: 10px;
}
.numeroFormulaireReservation{
	text-decoration: underline;
	color: #e6ea06;
	text-align: center;
	margin-right: 1rem;
	font-size: 3rem;
}
.titreFormulaireReservation{
	text-align: center;
	font-size: 2rem;
	color: #afd918;
	margin: 2rem 0.5rem 0.5rem 0.5rem;
}
.labelFormulaireReservation{
	padding-bottom: 1rem;
}
/*Réinitilaisation de la liste déroulante*/
select {
  appearance: none;
  outline: 0;
  border: 0 !important;
  background-image: none;
  box-shadow: none;
}

/* Mise en forme de la div .select*/
.select {
  position: relative;
  width:90%;
  height: 45px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #CED4DA;
  margin-top: 1rem;
}
/* Mise en forme de la balise select*/
select {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0.2rem 1rem;
  color: #555555;
  cursor: pointer;
}
/* Mise en place de la flèche */
.select::after {
  content: '\276F';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 15px;
  pointer-events: none;
  transform: rotate(90deg);
  font-size: 1.5em;
  background: #afd918;
}
.select:hover::after {
  color: #FA6141;
}
/*Ajout des couleurs de fond pour chaque option */
.boutonOption {
    font-size: 1.5rem; /* Ajustez à la taille souhaitée */
}
.validerFormReservation{
	padding: 0.5rem 2rem;
	border-radius: 10px;
	color: #231f20;
	background-color: #afd918;
	border: 2px solid #231f20;
	transition: .25s ease-in-out;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.validerFormReservation:hover{
	background-color: #231f20;
	color: #FFF;
	border: 2px solid #afd918;
}
.divAvantArriere{
	width: 100%;
	display: flex;
}
.divAvantArriere div input{
	width: 100%;
	cursor: pointer;
}
.divAvantArriere div label{
	display: block;
	width: 100%;
	cursor: pointer;
}
.divPosition {
		margin: 0rem 0.1rem;
		padding: 0.2rem 0rem;
		text-align: center;
		border: 1px solid #afd918;
		flex: 1;
    cursor: pointer; /* Change le curseur pour indiquer que la div est cliquable */
    background-color: #231f20;
    color: #dfdfdf;
    display: flex;
    flex-direction: column;
}
.divPosition.selected {
    border-color: #007bff;
    background-color: #afd918;
    color: #231f20;
    /* Couleur de la bordure lorsque la div est sélectionnée */
}
@media screen and (max-width: 400px){
	.typeVitre label.imageLabel img{

	}
}

                          /*fin formulaire reservation*/