fieldset{
	position: relative;
	display: block;
	border: 2px solid var(--blec);
	border-radius: 5vw;
	padding: .5vw 3vw 1.5vw 3vw;
	background-color: var(--blef);
	color: var(--blec);
	text-align: left;
	box-shadow: -2px 5px 8px 0 rgba(0, 0, 0, 0.6);
}
legend{
	margin-left: 1.5vw;
	font-size: 1.2rem;/*multiplie par Xrem la font-size en vw*/
	text-shadow: 1px 1px 2px var(--blef), 0 0 5px var(--blef), 0 0 25px var(--blec);
	font-weight: bolder;
}
input[type="text"], [type="email"], [type="number"], [type="tel"]{
	display: inline-block;/*pour qu'il suive label*/
	margin: 1vw 0;
	border: 2px solid var(--blec);
	border-radius: 1.5rem;
	padding: 0;
	width: 100%;
	text-align: center;
	color: var(--blef);
	cursor: auto;
	box-shadow: inset -1px 2px 1px 0 rgba(0, 0, 0, 0.6);
	line-height: 1.8rem;
}
textarea{
	resize: vertical;/*ajoute un ascenceur*/
	margin: .5vw 0;
	border: 2px solid var(--blec);
	border-radius: 1.5rem;
	padding: 0rem 1rem;
	height: 8rem;
	width: 100%;
	color: var(--blef);
	cursor: auto;
	box-shadow: inset -1px 2px 1px 0 rgba(0, 0, 0, 0.6);
}
/********************les coches animées********************/
.coch-text{
	position: relative;
	display: block;
}
.coch-text input[type="checkbox"]{/*input[type="checkbox"]...  permet de différencier les <label> des coches des autres*/
	position: absolute;/*positionne la coche par défaut*/
	opacity: 0;/*masque*/
}
.coch-text input[type="checkbox"]:checked + label::before{/*bien mettre le input avant le label dans le html*/
	background-color: var(--roug);/*rectangle sélectionnée*/
	border-color: var(--blec);
}
.coch-text input[type="checkbox"]:checked + label::after{/*bien mettre le input avant le label dans le html*/
	background-color: var(--oran);/*rond sélectionné*/
	border-color: solid 1px var(--blec);
	transform: translateX(2rem);/*typiquement longeur - 1 de la longeur totale*/
}
.coch-text input[type="checkbox"] + label{
	display: grid;/*permet de séparer en plusieurs la coche et son texte*/
	grid-template-columns: 3rem 85%;/*sépare en Xrem la coche en taille de police, puis le reste donc le texte sans limite de longueur*/
	grid-template-areas: "checkbox label";/*indique que la première colonne est pour la chekbox et la seconde pour son label*/
	gap: 0.7rem;/*indique l'espace entre 2 colonnes (coche et texte) en taille de police*/
	line-height: 1.8rem;
}
.coch-text input[type="checkbox"] + label::before{/*rectangle*/
	display: block;
	content: "";
	grid-area: checkbox;/*positionne dans checkbox*/
	margin-top: .3rem;/*décale le rectangle vers le bas pour l'aligner sur le texte du label*/
	box-shadow: inset -1px 2px 1px rgba(0, 0, 0, 0.6);
}
.coch-text input[type="checkbox"] + label::after{/*rond*/
	display: block;
	content: "";
	grid-area: checkbox;/*positionne dans checkbox*/
	margin-top: .33rem;/*décale le rond vers le bas pour l'aligner sur le texte du label*/
	box-shadow: inset 1px -2px 1px rgba(0, 0, 0, 0.6);
}
.coch-text input[type="checkbox"] + label::before{/*rectangle non sélectionné*/
	height: 1.1rem;
	width: 100%;/*largeur maxi définit avant en taille de police*/
	border-radius: 1.1rem;/*arrondi de la taille de la police*/
	background-color: var(--oran);
	/*border: 1px solid var(--blec);*/
	transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.coch-text input[type="checkbox"] + label::after{/*rond non sélectionné*/
	position: relative;/*décalage du rond en + du margin-top*/
	left: 1px;/*vers la droite*/
	top: 2px;/*vers le bas*/
	height: calc(1rem - 2px);
	width: calc(1rem - 2px);
	border-radius: 50%;
	background-color: var(--roug);
	/*border: solid 1px var(--blef);*/
	transition: background-color .3s, transform .3s;
}
/********************focus avec la touche tab du formulaire de contact********************/
.coch-text input:focus + label::before{
	box-shadow:
		inset -1px 2px 1px rgba(0, 0, 0, 0.6),
		0px 0px 3px 3px var(--blec);/*focus avec tab*/
}
/********************les boutons avec conditions pour le texte********************/
#pushmail:checked ~ #cour{
pointer-events: auto;
required: true;
/*disabled: flase;*/
}
#pushsms:checked ~ #tele{
pointer-events: auto;
required: true;
/*disabled: flase;*/
}
/********************les étoiles animées********************/
.eval{
	display: flex;/*met le texte sur la même ligne que les étoiles*/
	direction: rtl;/*rtl étoiles de G à D, ltr de D à G*/
	justify-content: flex-end;/*flex-end avec rtl, flex-start avec ltr et déplacer le <p>*/
}
.eval p.colfil{
	margin-left: 0.6rem;/*margin-left ou right en fontion de rtl*/
	column-count: 1;
	text-align: left;
	line-height: 1.8rem;
	align-items: center;
	animation: none;
}
.eval input[type="radio"]{
	display: none;/*cache les boutons à sélectionner, pas les étoiles*/
}
.eval input[type="radio"] + label{
	font-size: 1.5rem;/*hauteur des étoiles*/
	width: 1.2rem;/*espacement entre les étoiles, sinon elles prennent toute la place*/
	line-height: 1.8rem;/*aligne verticalement les étoiles sur le texte*/
	/*color: var(--roug); /*couleur des étoiles non cochées */
	cursor: pointer;
	transition: color 0.3s ease;
}
.eval input[type="radio"]:checked + label,/*mise en couleur de l'étoile sélectionnée et sélection de cette étoile*/
.eval input[type="radio"]:checked ~ input[type="radio"] + label,/*mise en couleur des étoiles précédentes sans sélection*/
.eval input[type="radio"]:hover ~ label{/*mise en couleur au survol*/
color: var(--oran);/*couleur des étoiles cochées*/
}