@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: oswald, sans-serif;
font-weight: 300;
font-style: normal;
}

@font-face {
 font-family: oswald, sans-serif;
font-weight: 600;
font-style: normal;
}

@font-face {
  font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: montserrat, sans-serif;
font-weight: 600;
font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
 overflow-x: hidden;
	scroll-behavior: smooth;
}

h1{
	 font-family: oswald, sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size:  clamp(64px, 6vw, 72px);
	line-height : 100%;
	text-transform: uppercase;
	color: #E5D6C7;
}

h2{
	  font-family: oswald, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size:   clamp(48px, 5vw, 64px);
	line-height : 125%;
	text-transform: uppercase;
	color: #323232;
}

h3{
	  font-family: oswald, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size:   2.1323414252153485vh;
	line-height : 125%;
	color: #323232;
}

h4{
	font-family: montserrat, sans-serif;
	font-weight: 600;
	font-size:  1.7vh;
	line-height : 125%;
	color: #E5D6C7;
}

p{
	 font-family: montserrat, sans-serif;
	font-weight: 400;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height : 125%;
	color: #323232;
}

input{
	  font-family: montserrat, sans-serif;
	font-weight: 400;
	font-size:  1.5661707126076743vh;
	line-height : 125%;
	color: #323232;
}

label{
	  font-family: montserrat, sans-serif;
	font-weight: 400;
	font-size:  1.5661707126076743vh;
	line-height : 125%;
	color: #323232;
}

strong{
	font-family: montserrat, sans-serif;
	font-weight: 600
	font-size:  1.5661707126076743vh;
	line-height : 125%;
	color: #323232;
}



a{
	font-family: montserrat, sans-serif;
	font-weight: 400;
	font-size:  1.5661707126076743vh;
	line-height : 125%;
	color: #E5D6C7;
	text-decoration: none;
}

a:hover{
	font-family: montserrat, sans-serif;
	font-weight: 600
	text-decoration: underline;
  transition:  0.5s ease;
}



header{
	
position: relative;
  height: 75vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* h1 en haut, h2 en bas */
  align-items: center;
  text-align: center;
  z-index: 1;
  padding: 2rem;
}

footer{
	background-color: #323232;
}

footer p{
	color: #E5D6C7;
}



hr{
	 height: 1px;
  border: none;
  background-color: #E5D6C7;
  margin: 1rem 0;
  display: none;
}

.scrolldown{
	align-self: flex-end;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 2rem;
}

.picto{
	width: clamp(24px, 1.67vw, 32px)
}

/* Grise et bloque l'interaction tant qu'aucun choix n'est fait */
#cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* gris transparent */
  z-index: 998;
  display: none;
  pointer-events: all;
}


/* Le bandeau cookie en bas de l'écran */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  color: #000;
  padding: 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  z-index: 999;
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cookie-buttons {
  margin-top: 15px;
}

.cookie-buttons button {
  margin: 0 10px;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
}

.cookie-buttons button {
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #f37021;
  color: white;
  transition: background-color 0.3s ease;
}

.cookie-buttons button:hover {
  background-color: #d95700;
}


.backgroundimg{
	 position: absolute;
  	 top: 0; left: 0;
 	 width: 100%;
 	 height: 100%;
 	 object-fit: cover;
 	 background-size: cover;
 	 background-position: center;
 	 z-index: -1;
}

/* Layout principal */
.split-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60vh;
  padding-left: 10%;
	padding-right: 10%;
	margin-top: 15vh;
	padding-bottom: 2rem;
  gap: 10rem;
	
}

.split-part{
	display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60vh;
  padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 15vh;
	padding-top: 2rem;
  gap: 10rem;
}

/* Image à gauche */
.image-side, .text-side {
  flex: 1;
  opacity: 0;
  transition: all 1s ease-out;
}

/* Image */
.image-side img {
  width: 100%;
  height: auto;
  display: block;
}

/* Slide-in depuis la gauche */
.fade-left {
  transform: translateX(-50px);
}

/* Slide-in depuis la droite */
.fade-right {
  transform: translateX(50px);
}

/* Une fois visible */
.fade-left.visible,
.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}


.presentation{
	padding-top: 2rem;
}


 .carousel-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      transition: background-color 0.8s ease;
	padding: 10% 10%;
    }

    .product {
      background: white;
      padding: 2rem;
      border-radius: 20px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      transition: transform 0.5s ease;
	margin-top: 2rem;
    }

    .buttons {
      margin-top: 2rem;
      display: flex;
      gap: 1rem;
    }

    .color-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .color-btn:hover {
      transform: scale(1.1);
    }

.vhl-conaineur{
display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
	padding: 10% 10%;
}


.vhl, .maps{
		display: grid;
    		grid-template-columns: repeat(2, 1fr);
    		gap: 2rem;
    		padding-top: 2rem;
		width: 100%
	}

.product img, .mapGP{
	width: 100%;
    	max-width: 900px;
    	height: auto;
    	border-radius: 16px;
    	transition: transform 0.5s ease;
	padding-top : 1rem;
}

.fade-in,
.reveal-from-left,
.reveal-from-right,
.reveal-from-bottom {
	opacity: 0;
  	transition: all 1s ease;
}

/* seulement fondu (h2) */
.fade-in {
  transition: opacity 1s ease;
}

/* entrée latérales */
.reveal-from-left {
  transform: translateX(-100px);
}
.reveal-from-right {
  transform: translateX(100px);
}

/* entrée par le bas (p) */
.reveal-from-bottom {
  transform: translateY(50px);
	padding-top: 2rem;
}

/* une fois visible */
.revealed {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.reveal-from-left:hover{
	transform: scale(1.09);
}

.reveal-from-right:hover{
	transform: scale(1.09);
}

.localisation{
	display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #323232;
	padding: 10% 10%;
}

.localisation p{
	color: #E5D6C7;
}

.localisation h2{
	color: #E5D6C7;
}

.localisation h3{
	color: #E5D6C7;
}

.formulaire{
	display: flex;
	flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
width: 100%;
  padding: 2rem 10%;
	background-color: #ffffff;;
}

.contact{
	padding-bottom: 2rem;
}

.neumorph {
	
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 10px 10px 30px #d9d9d9, -10px -10px 30px  #deddda;
	padding: 2rem;
	margin-top: 2rem;
  max-width: 80vh;
  width: 100%;
}

.progress-bar {
  visibility: hidden; /* Masque la barre jusqu'à choix utilisateur */
  height: 10px;
  background: #e0e0e0;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}



.progress-fill {
  height: 100%;
  width: 0%;
  background: #87b9de;
  box-shadow: 0 0 10px #87b9de, 0 0 20px #87b9de;
  transition: width 0.4s ease;
}

.section {
      margin-bottom: 2rem;
	
    }

.button-group{
	display: flex;
    flex-flow: wrap;
    justify-content: space-between;	
}

    .button-group label {
      display: inline-block;
	width: 45%
    }

    #entrepriseFields {
      display: none;
    }

    button[type="submit"] {
      padding: 1rem 2rem;
      background-color: #333;
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }

input[type="text"],
input[type="email"],
input[type="tel"] {
  padding: 0.8rem;
  border: none;
  border-radius: 10px;
  background: #f0f0f0;
  box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
	margin: 0.5rem;
}

 .btnforms input[type="radio"] {
    display: none; /* Cache le cercle */
  }

.btnforms {
  background: #ffffff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
  cursor: pointer;
  transition: 0.3s ease;
	margin: 0.5rem;
}

 /* 💡 Met en surbrillance tout le label si l'input à l'intérieur est coché */
  .btnforms:has(input:checked) {
    color: #ffffff;
    border: none;
   background: #87b9de;
  box-shadow: 0 0 10px #87b9de, 0 0 20px #87b9de;
  transition:0.4s ease;
  }

.btnforms:hover {
  box-shadow: inset 3px 3px 6px #bebebe, inset -3px -3px 6px #ffffff;
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.choice {
  width: 100%;
  margin-bottom: 1rem;
}

button.disabled {
  opacity: 0.5;
  pointer-events: none;
  transition: 0.3s ease;
}


.info{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	padding: 2rem 10%;
	
}

.coordonnees{
	display: flex;
	flex-direction: column;
	
}


.adresse{
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap : 2rem;
}

.rs{
	display: flex;
	justify-content: center;
	
	
}

.rs img{
	width: 50px;
	height: auto;
}

.conditions{
	display: flex;
	flex-direction: column;
}

/* === Tablet 600px–1024px === */
@media (min-width: 600px) and (max-width: 1024px) {
	.scrolldown{
		display: none;
	}

	 .split-section, .split-part{
	  	height: auto;
	  	gap: 2rem;
	   	padding: 5%;
	   	margin-top: 0;
 	}

	 .split-section{
		flex-direction: column-reverse;
	}
	
	.split-part{
		flex-direction: column;   
	 }

	.vhl, .maps{
		display: grid;
    		grid-template-columns: repeat(2, 1fr);
    		gap: 2rem;
    		padding-top: 2rem;
	}

	.product img, .mapGP{
    		width: 100%;
    		max-width: 600px;
    		height: auto;
    		border-radius: 16px;
    		transition: transform 0.5s ease;
		padding-top : 1rem;
	}
	
}

@media (min-width: 300px) and (max-width: 1024px) and (orientation: portrait) {
	hr{
		   display: block;
		
	}

	.info{
		flex-direction: column;
	}

		.info{
		flex-direction: column;
		gap: 2rem
	}

		.adresse{
	}
}

@media (min-width: 300px) and (max-width: 599px) {

	

.cookie-buttons {
  display: flex;
flex-direction: column;
  gap: 1rem;
}	

hr{
		   display: block;
		
	}
   .split-section {
    flex-direction: column-reverse;   
	  height: auto;
	  gap: 2rem;
	   padding: 0.1rem 10%;
	   margin-top: 0;
  }
	
	.split-part{
		flex-direction: column;   
	  height: auto;
	  gap: 2rem;
		padding: 0.1rem 10%;
		margin-bottom: 0;
	}
	
	.avantages{
	margin-top: 2rem;
}

	
	.product img{
		max-height: 300px;
		width: auto;
	}

  .image-side,
  .text-side {
    width: 100%;
    opacity: 1;
    transform: none !important;
    transition: none;
  }

  .image-side {
    margin-bottom: 2rem; /* ✅ Espace exact entre image et texte */
  }
	
	.vhl{
	display: flex;
      flex-direction: column;
	gap: 2rem;
}
	
	.fade-in,
  .reveal-from-left,
  .reveal-from-right,
  .reveal-from-bottom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
	padding-bottom : 2rem;
  }
	
	.maps{
	display: flex;
	flex-direction: column;
}


	
	.mapGP{
		max-width: 300px;
		max-height: auto;
	}
	
	.formulaire{
		 height: auto;
	}

 .button-group label {
width: 100%;
}

.button-group label{
width: 100%;
}	

	.scrolldown{
		display : none;
	}

	.info{
		flex-direction: column;
		gap: 2rem
	}

	.adresse{
		justify-content: normal
}
}