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

/*
#BDH-irrigation {
    display: none;
  }
*/

/* Flèche */
.scroll-arrow-volet2 {
    position: fixed;
    right: 0;
    background: #644e41;
    color: white;
    padding: 10px 15px;
    border-radius: 10px 0 0 0;
    text-decoration: none;
	font-size: 1.2em;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease-in-out;
	cursor: pointer;
}

.scroll-arrow-BDH , .scroll-arrow-BTH, .scroll-arrow-OH, .scroll-arrow-PH, .scroll-arrow-PP {
    position: fixed;
    right: 0;
    background: #96877e;
    color: white;
    padding: 10px 15px;
    border-radius: 10px 0 0 10px;
    text-decoration: none;
	font-size: 1.2em;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease-in-out;
	cursor: pointer;
}


.scroll-arrow-volet2 {
    bottom: 0;
}

.scroll-arrow-PH {
    bottom: 50px;
}

.scroll-arrow-PP {
    bottom: 100px;
}

.scroll-arrow-OH {
    bottom: 150px;
}

.scroll-arrow-BDH {
    bottom: 200px;
}

.scroll-arrow-BTH {
    bottom: 250px;
}

.hide-arrow {
    opacity: 0;
    pointer-events: none;
}

.show-arrow {
    opacity: 1;
    pointer-events: auto;
}



.section-title{
	background-color: #cccccc;
	font-weight: bold;
}

.titre-progress-container-1 {
	position: fixed;
	bottom: 150px;
	right: 20px;
	margin: 0 auto;
	z-index: 2000;
}

.progress-container-1 {
	position: fixed;
	bottom: 100px;
	right: 0;
	width: 100px;
	height: 50px;
	margin: 0 auto;
	background-color: rgba(235, 40, 0, 0.3);
	overflow: hidden;
	z-index: 1000;
	border-radius: 10px 0 0 10px;
}

.titre-progress-container-2 {
	position: fixed;
	bottom: 250px;
	right: 20px;
	margin: 0 auto;
	z-index: 2000;
}

.progress-container-2 {
	position: fixed;
	bottom: 200px;
	right: 0;
	width: 100px;
	height: 50px;
	margin: 0 auto;
	background-color: rgba(235, 40, 0, 0.3);
	overflow: hidden;
	z-index: 1000;
	border-radius: 10px 0 0 10px;
}

.progress-bar-1 {
	height: 100%;
	width: 0%;
	background-color: rgba(76, 175, 80, 0.8);
	transition: width 0.4s ease;
}

.progress-bar-2 {
	height: 100%;
	width: 0%;
	background-color: rgba(76, 175, 80, 0.8);
	transition: width 0.4s ease;
}

.progress {
    position: absolute;
	margin-left: 20px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#progress-text-1 {
    position: absolute;
    color: white;
    font-size: 20px;
	line-height: 50px;
    font-weight: bold;
    width: 100%;
	margin: 0;
    text-align: center;
}

#progress-text-2 {
    position: absolute;
    color: white;
    font-size: 20px;
	line-height: 50px;
    font-weight: bold;
    width: 100%;
	margin: 0;
    text-align: center;
}


.hidden {
	display: none;
}


		.vertical-line{
			border-left: 1px solid #644e41;
			display: inline-block;
			height: 100px;
			margin: 20px 0;
			vertical-align: middle;
		}

		.header-logos img{
			display: block;
			text-align: center;
			margin: 0 auto;
			max-width: 380px;
			width: 100%;
			
		}

        .intro {
			font-style: italic;
			margin: 6px 0 0 0;
			padding: 0;
			text-align: justify;
        }

        body {
            font-family: Arial, sans-serif;
			font-size: 1em;
			line-height: 1.4em;
            margin: 0;
            padding: 2.5em 1.6em 1.6em 1.6em;
            box-sizing: border-box;
            background-color: #f0f0f0;
            color: #644e41;
        }

		.body-volets2 {
            padding: 1.6em;
        }

        #container {
            max-width: 800px;
            margin: 0 auto;
            background: #ffffff;
            padding: 1.6em;
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }

        #header {
            max-width: 800px;
            margin: 0 auto;
            padding: 1.6em;
        }

		.cartouche{
			background-color: #ffffff;
			padding: 20px 25px;
			font-weight: bold;
			color: #75952b;
			border-radius: 10px;
			border: 1px solid #75952b;
			text-align: justify;
		}


        h1 {
            text-align: center;
			font-size: 2.3em;
			line-height: 1.4em;
			padding: 0 0 0.2em 0;
			color: #75952b;
        }

        h2 {
			margin-top: 10px;
            text-align: center;
			font-size: 2em;
			line-height: 1.4em;
			padding: 0 0 0.2em 0;
			font-style: italic;
        }

        h3 {
            text-align: left;
			font-size: 1.5em;
			line-height: 1.4em;
			margin: 1em 0;
			padding: 0;
        }

        h4 {
            text-align: left;
			font-size: 1.2em;
			line-height: 1.4em;
			margin: 0;
			padding: 0;
        }

		ul {
			padding: 0 0 0 1.2em;
			margin: 1em 0 0 0;
		}

        input[type="text"], 
        input[type="email"], 
        input[type="tel"], 
        input[type="number"], 
        select {
            width: 100%;
            padding: 0.5em;
			max-height: 35px;
            margin: 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
            box-sizing: border-box;
            color: #644e41;
        }

		textarea{
            font-family: Arial, sans-serif;
			font-size: 1em;
			line-height: 1.4em;
            width: 100%;
            padding: 0.5em;
            margin: 5px 0 0 0 ;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            color: #644e41;
			height: 35px;
			min-height: 35px;
			overflow-y: hidden; /* Cache la barre de défilement verticale */
            resize: none; /* Désactive le redimensionnement manuel */        }
	
        input[type="radio"], input[type="checkbox"] {
            margin: 0em 0.6em 0 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        label {
            display: block;
            margin: 0.7em 0 0.2em 0;
            color: #644e41;
        }

		.checkbox-item label {
            margin: 0.2em 0;
}

        table {
            width: 100%;
            border-collapse: collapse;
			margin: 0.5em 0 0 0;
        }

        table th, table td {
            border: 1px solid #ddd;
            padding: 0.5em;
            text-align: left;
        }

        table th {
            background-color: #f0f0f0;
        }

        .Btn-Envoi{
            background-color: #4CAF50;
            color: white;
            padding: 0.5em;
			margin: 1em 0 0 0;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.6em;
            width: 100%;
        }

        .Btn-Envoi:hover {
            background-color: #005A00;
        }

        .delete {
            background-color: #FF0004;
            color: white;
            padding: 0.8em 1em ;
			margin: 2em 0.5em 0 0.5em;
            border: none;
            border-radius: 60px;
            cursor: pointer;
            font-size: 1em;
        }

        .delete:hover {
            background-color: #690001;
        }

        .form-section {
            display: none;
            margin: 20px 0 10px 0;
            padding: 1px 20px 20px 20px;
            border-radius: 10px;
            background-color: #f0f0f0;
        }
        .form-section.active {
            display: block;
        }


		.checkbox-container {
			display: flex;
			flex-wrap: wrap;
			row-gap: 0;
			column-gap: 15px;
			margin: 0;
			padding: 0;
			width: 100%;
		}
		
.radio-group {
    display: flex;
    flex-wrap: wrap; /* Permet le retour à la ligne si l'espace est insuffisant */
    row-gap: 0;
	column-gap: 15px;       /* Espacement entre les options */
}

.checkbox-container label {
    display: flex;
    align-items: center;
    gap: 5px;        /* Espacement entre l'input et le texte */
}


		.checkbox-item {
			display: inline-flex;
			margin: 2px 20px 2px 0;
			padding: 0;
			align-items: center; /* Aligne verticalement les cases à cocher avec le texte */
/*			line-height: 1em;*/
}



		
.short-col {
    width: 120px; /* Vous pouvez ajuster cette valeur selon vos besoins */
}



.save-form {
    position: fixed;
    bottom:0;      /* Distance depuis le bas de la page */
    right: 0px;       /* Distance depuis le côté droit de la page */
    display: flex;
    flex-direction: column;  /* Empile les boutons verticalement */
    gap: 5px;         /* Espacement entre les boutons */
    z-index: 1000;     /* Assure que les boutons restent au-dessus des autres éléments */
}

.save-form button {
    padding: 10px;
    margin: 5px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 120px;      /* Largeur fixe pour uniformiser les boutons */
}

.save-form button:hover {
    background-color: #45a049;
}

.inline-fields {
    display: flex;
    flex-wrap: wrap;            /* Permet aux éléments de passer à la ligne si nécessaire */
    gap: 0 20px;                  /* Espacement entre les champs */
    align-items: flex-start;    /* Alignement vertical des champs */
    width: 100%;                /* Utilise toute la largeur disponible */
}

#cp {
    width: 150px;               /* Largeur fixe pour le champ Code Postal */
    flex-shrink: 0;             /* Empêche le champ Code Postal de se réduire */
}

.field-group {
    flex: 1;                    /* Permet au champ Ville de s'étendre */
    min-width: calc(65% - 10px); /* Passe à la ligne si la largeur est inférieure à 50% */
}

#ville {
    width: 100%;                /* Assure que le champ Ville prend toute la largeur du conteneur */
}


.hidden-row {
	display: none;
}

.add-button {
	margin: 5px 0;
	padding: 5px 10px;
	font-size: 16px;
	cursor: pointer;
}

.add-button{
            background-color: #4CAF50;
            color: white;
            padding: 0.7em;
			margin: 0.5em 0 1em 0;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            width: 100%;
        }

.add-button:hover {
            background-color: #45a049;
        }


.consent{
    font-size: 0.8em;
	line-height: 1.3em;
	font-style: italic;
	
}


.section{
	margin: 20px 0;
	
}

@media (max-width: 600px) {
	
	body {
		padding: 2.5em 1em 1em 1em;
	}
	
	.body-volets2 {
		padding: 1em;
	}
	
	#container {
		padding: 1em;
	}
	
	
/* Flèche */
	#scroll-arrow {
		font-size: 1em;
	}
	
	body {
		font-size: 0.8em;
	}

	h1 {
		font-size: 2.1em;
	}

	h2 {
		font-size: 1.8em;
	}

	h3 {
		font-size: 1.3em;
	}

	h4 {
		font-size: 1em;
	}
	
	input[type="text"], 
	input[type="email"], 
	input[type="tel"], 
	input[type="number"], 
	select {
		font-size: 0.8em;
	}
	
	textarea{
		font-size: 0.8em;
	}
	
	.Btn-Envoi{
		font-size: 1.4em;
	}
	
	.delete {
		font-size: 0.8em;
	}

	.add-button {
		font-size: 0.8em;
	}

	.consent{
		font-size: 0.8em;
		line-height: 1.3em;
	}

}