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

/* ===================
   Fonts
=================== */
@font-face {
  font-family: 'HelveticaNowDisplay-CnBlk';
  src: url('../fonts/HelveticaNowDisplayCondensedBlack.woff2') format('woff2');
}

@font-face {
  font-family: 'HelveticaNowDisplayMedium';
  src: url('../fonts/HelveticaNowDisplayMedium.ttf') format('truetype');
}

@font-face {
  font-family: 'HelveticaNowText';
  src: url('../fonts/HelveticaNowTextRegular.woff2') format('woff2');
}

/* ===================
   Variables
=================== */
:root {
  --container-max-width: 2200px;
  --header-height: clamp(200px, 26.67vw, 512px);
  --section-margin-top: clamp(48px, 6.67vw, 128px);

  --h1-size: clamp(32px, 3.54vw, 72px);
  --h2-size: clamp(40px, 3.54vw, 72px);
  --h2-margin-bottom: clamp(32px, 3.54vw, 68px);
  --h3-size: clamp(22px, 1.25vw, 24px);
  --h3-margin-bottom: clamp(24px, 2.5vw, 48px);
  --text-size: clamp(14px, 0.83vw, 16px);

  --button-width: clamp(160px, 13.75vw, 264px);
  --button-height: clamp(48px, 3.33vw, 64px);
  --button-radius: clamp(4px, 0.73vw, 7px);
  --button-font-size: clamp(16px, 1.25vw, 24px);
  --button-bg: #ff5000;
  --button-color: #ffffff;
  --button-margin-top: clamp(16px, 2.5vw, 32px);

  --icon-width: clamp(24px, 1.67vw, 32px);
  --icon-margin-left: clamp(16px, 1.25vw, 24px);

  --text-side-margin: clamp(64px, 7.29vw, 140px);
  --image-text-gap: clamp(64px, 6.67vw, 128px);
  --image-border-radius: clamp(16px, 1.67vw, 32px);
}

/* ===================
   Base styles
=================== */
*, ::before, ::after {
    box-sizing: border-box;
	}

html, body {
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: var(--text-size);
  font-family: 'HelveticaNowTexte', sans-serif;
}

h1 {
  font-size: var(--h1-size);
  font-family: 'HelveticaNowDisplay-CnBlk';
	color: #1A1A1A;
	text-align: center;
	text-transform: uppercase;
	line-height: 100%;
	letter-spacing: clamp(0.02em, 0.05vw, 0.05em);
	margin-left : 6.6667vw;
	margin-right : 6.6667vw;
}

h2 {
  font-size: var(--h3-size);
  margin: var(--h3-margin-bottom);
  font-family: 'HelveticaNowDisplayMedium';
	color: #1A1A1A;
	line-height: 125%;
	letter-spacing: clamp(0.02em, 0.05vw, 0.05em);
}



p,
li {
  font-size: var(--text-size);
	font-family: 'HelveticaNowText';
	line-height: 125%;
	color: #1A1A1A;
}

strong{
	font-family: 'HelveticaNowDisplayMedium';
	letter-spacing: clamp(0.02em, 0.05vw, 0.05em);
}

ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5vh;
}

ul li {
  position: relative;
  padding-left: 2.5vh; /* espace à gauche pour la puce */
  margin-bottom: 1vh;
  line-height: 1.5;
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em; /* ajuste l’alignement vertical */
  width: 2vh;
  height: 2vh;
  background-image: url("../img/puce.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===================
   Header
=================== */
header {
  max-width: 100%;
  height: var(--header-height);
  margin: 0 auto;
	display: flex;
  align-items: stretch; /* ⚠️ clé pour que les deux colonnes aient la même hauteur */
}

/* ===================
   Section
=================== */


body{
	margin: 0;
}

main, section{
	padding-bottom: 2rem;
}

/* ===================
   Footer
=================== */

footer{
	padding-top: 2rem;
	margin: 0;
	background-color: #1A1A1A;
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	gap: 1rem;
  	padding: 1rem;
	justify-items: center; /* horizontal */
}

button{
	width: 30.97345132743363vh;
	height: 5.638214565387627vh;
	border: none;
	border-radius: 1.2529365700861395vh;
	background: #ff5000;
	margin-bottom: 1.5vh;
	color: #ffffff;
}

button:hover {
    transition: background-color 0.3s ease, transform 0.3s ease;
	transform: scale(1.05); /* Ajoute un léger effet de zoom */
}

button a{
	font-size: 1.7227877838684416vh;
	color: #ffffff;
}



.cover{
	width: 100%;
  height: auto;
  object-fit: cover;
  flex: 1 1 50%;
	background-image: url('../img/banner_lpoccaz.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.layout{
	 flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* ou space-between selon le besoin */
	background-color: #ff5000;
	align-items: center;
}


.info{
	margin-top: 2.8761061946902653vh;
	margin-right: 2.8761061946902653vh;
	margin-left: 2.8761061946902653vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

.avis{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.avis img{
	width: 15vh;
	margin-bottom: -0.7vw;
}

.recnote{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.note {
	font-size: 1.7830853563038371vh;
	text-align: center;
	align-items: center;
	margin: 0;
}

#progressBar {
  width: 100%;
  height: 12px;
  background-color: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  margin: 20px 0;
}

#progressFill {
  height: 100%;
  width: 0%;
  background-color: #ff5000;
  transition: width 0.3s ease-in-out;
}

#forms{
	display: flex;
	
	justify-content: center ;
}

/* Contenu pour rendre la page scrollable */
.content {
  padding: 20px;
  font-family: Arial, sans-serif;
}



.question-group {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-content: center;
}

.tuile-option {
  position: relative;
  display: inline-block;
  margin: 0.75vh;
}

.tuile-option input[type="radio"],
.tuile-option input[type="checkbox"] {
  display: none;
}

.tuile-option label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 30.97345132743363vh;
  	height: 5.638214565387627vh;
  	border: none;
  	border-radius: 1.2529365700861395vh;
  	background: #f9f9f9;
  	margin-bottom: 1.5vh;
  	cursor: pointer;
  	text-align: center;
  	font-weight: 500;
  	transition: all 0.2s ease-in-out;
  	box-sizing: border-box;
	font-size:  1.644479248238058vh !important;
}

.tuile-option input[type="radio"]:checked + label,
.tuile-option input[type="checkbox"]:checked + label {
  border: none;
  background-color: #ff5000;
  color: #ffffff;
}

/* Conteneur général de chaque option de région */
.tuile-region {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 30vh; /* Ajuster la hauteur si nécessaire */
  width: 30vh; /* Image carrée, largeur égale à la hauteur */
  cursor: pointer;
  position: relative; /* Pour que le texte soit au-dessus de l'image */
  margin: 1.5vh; /* Marge autour de chaque option */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Transition pour l'arrière-plan et l'effet de survol */
}

.maps{
	width: 100%;
	height: auto;
}

/* Agrandissement au survol */
.tuile-region:hover {
  	transform: scale(1.05);
}

/* Cacher les boutons radio */
input[type="radio"] {
	position: absolute;
	visibility: hidden; /* Cache l'input radio */
}

/* Applique le fond orange lorsque l'input radio est sélectionné */
input[type="radio"]:checked + label {
	background-color: #ff5000; /* Fond orange pour le label */
	border-radius: 1.5rem;
}

input[type="radio"]:checked + label + .tuile-region {
	background-color: #ff5000; /* Fond orange pour le conteneur de la tuile */
	
}

/* Taille et style du texte (placé sur l'image) */
.tuile-region label {
	position: absolute;
  	 width: 100%;
  	height: 100%;
  	display: flex;
  	align-items: flex-start;
  	justify-content: flex-start;
  	padding: 1.5vh;
  	box-sizing: border-box; /* Pour éviter que l'encadré dépasse */
}

.coordonnees {
	display: grid;
  	grid-template-columns: 1fr 1fr;
  	gap: 1.5vh 2vh;
  	max-width: 800px;
  	margin: 0 auto 2rem auto;
}

.champ {
	width: 100%;
}

.champ input {
	width: 100%;
  	height: 5.638vh;
  	border: none;
  	border-radius: 1.25vh;
  	background: #f9f9f9;
  	padding: 0 1rem;
  	text-align: center;
  	box-sizing: border-box;
	font-size:  1.644479248238058vh;
}

.navigation-grid {
  display: grid;
  grid-template-rows: auto;
  gap: 1rem;
  margin-top: 2rem;
}

.buttons-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

button {
  	padding: 1rem;
  	font-size: 1rem;
  	border: none;
  	background-color: #ff5000;
  	color: white;
  	border-radius: 8px;
  	cursor: pointer;
	margin-top: 1.5rem;
}

#submitBtn {
  width: 100%;
}

 .step { display: none; }
  .navigation { margin-top: 2rem; text-align: center; }
  .navigation button {
    margin: 0 1rem;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    border: none;
    background-color: #1a1a1a;
    color: white;
    cursor: pointer;
    border-radius: 5px;
	margin-top : 1.5rem;
  }

/* Pour que l’email prenne toute la ligne */
.champ.full {
	grid-column: span 2;
}

.fin{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 2.8761061946902653vh;
}

.consentement{
	margin-bottom: 3vh;
}

.close{
	width: 30.97345132743363vh;
	height: 5.638214565387627vh;
	border: solid 0.15661707126076743vh;
	border-color: #ff5000;  
	border-radius: 1.2529365700861395vh;
	background: none;
	margin-bottom: 1.5vh;
	color: #ff5000;
}

@media (min-width: 300px) and (max-width: 599px){
 	
 	header {
		 display: grid;
    		grid-template-columns: 1fr;
    		grid-template-rows: auto auto;
    		height: auto;
  	}

	header .cover,
  	header .layout {
    		height: auto;
    		min-height: 25vh;
	  	padding: 0 1rem;
  	}

	h3{
		margin-left: 1.9577133907595927vh;
	}
	
	.question-group {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		align-items: center;
		margin-left: 1.9577133907595927vh;
		margin-right: 1.9577133907595927vh;
	}
	
	.tuile-region {
  		display: flex;		
  		width: 35vh;
  		border-radius: 1.5rem;
  		background-size: cover;
  		background-repeat: no-repeat;
  		background-position: center;
  		height: 35vh; /* Ajuster la hauteur si nécessaire */
 		cursor: pointer;
  		position: relative; /* Pour que le texte soit au-dessus de l'image */
  		margin: 1.5vh; /* Marge autour de chaque option */
  		transition: transform 0.3s ease; /* Effet de survol */
	}
	
  	.tuile-option {
		display: flex;
   		justify-content: center;
    		width: 100%; /* Pour occuper toute la largeur disponible */
  	}

  	.tuile-option label {
    	width: 90vw; /* Adapte la taille à l'écran mobile */
    	max-width: 400px; /* Garde une largeur raisonnable */
		font-size:  1.644479248238058vh;
  	}
	
	.coordonnees {
    	display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
		margin-left: 1.9577133907595927vh;
		margin-right: 1.9577133907595927vh;
  	}
	
	#progressBar {
		margin-left: 1.9577133907595927vh;
		margin-right: 1.9577133907595927vh;
	} 
}