/**************************
 *****     PAGE 1     *****
 **************************/
#coteconso1_headband {
	background-color: var(--SAUMON);
	padding-top: 5.25rem;
	padding-bottom: 5.25rem;
	max-width: 100%;
	color: white;
	font-family: "RobotoRegular";
	font-size: 4rem;
	text-align: center;
	padding: 5rem;
	padding-left: 0;
	padding-right: 0;
	margin: 3rem 0;
	letter-spacing: 1px;
}
.coteconso1_headband{
	background-color: var(--ORANGE) !important;
    padding:10rem 5rem 7rem 5rem !important;
}
#fiche_produit_conso{
	display: flex;
    flex-direction: row;
	align-items: flex-start;
    gap: 5rem;
    font-size: 2.9rem;
    min-height: 42rem;
    justify-content: center;
    width: 75%;
    margin: auto;
    padding: 5rem 10rem;
}

#image_fichier {
	max-width: 45rem;
    max-height: 45rem;
}
#fiche_produit_conso_text{
	display: flex;
    flex-direction: column;
    gap: 4rem;
    justify-content: space-around;
}
#logo{
	max-width: 7rem;
	height: auto;
	margin-left: 65%;
	
    transform: rotate(58deg);
}

#contact{
	margin-left: 99% ;
	font-size: 2.6rem;
	font-family: "RobotoRegular";
	max-width: 100%;
}

#btn_part2{
	background-color: var(--ORANGE);
	border-color: var(--ORANGE) !important;
	cursor: pointer;
	min-width: 30rem;
}

#btn_part5{
	background-color: var(--ORANGE);
	border-color: var(--ORANGE) !important;
	cursor: pointer;
	min-width: 30rem;
}
#btn_part2:hover{
	color: var(--ORANGE);
}
#btn_part5:hover{
	color: var(--ORANGE);
}


#text_noir1{
	text-align: center;
}

#btn_part{
	cursor: pointer;
	padding: 2rem 3rem;
}

#text_blue4{
	font-weight: none !important;
	color: var(--BLEU);
    font-family: "RobotoMed";
    font-size: 4.5rem;
    letter-spacing: 0.2rem;
}

#text_orange{
	color: #ee8670;
}

#third_text{
	text-align: center;
}

#bigTile1{
	margin-left: 12% !important;
}

#first_img{
	height: auto;
    width: 35rem;

}

#first_paragh{
	margin-left: 3% !important;
    font-family: 'TuffyRegular';
    font-size: 2.9rem;
	font-weight: 100;
}

#flex_parent_1{
	display: flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: center;
    max-width: 75%;
    flex-wrap: wrap;
    min-height: 38rem;
}
#flex_paragh{
	display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
    flex: 2;
}
#flex_img{
	flex: 1;
    display: flex;
    justify-content: center;
}
#circle_arrow{
	width: auto;
	height: 6rem;
}
#textC{
	color:var(--ORANGE);margin-top:-3vh;
	font-size: 2rem;
	font-family: "RobotoRegular",sans-serif;
}
#textCBold{
	color:var(--ORANGE);margin-top:-3vh;
	font-size: 2rem;
	font-family: "RobotoBold",sans-serif;
}
#tire1{
	display: flex;
	flex-direction: row;
	margin-left: auto;
	align-items: center;
}
#tire2{
	display: flex;
	flex-direction: row;
	align-items: center;
	/* justify-content: center; */
}

#second_text{
	margin: auto;
	text-align: center;
	margin-bottom: 7rem;
}

#second_title{
	margin: auto;
	color: var(--ORANGE);
	font-family: 'TuffyBold',sans-serif;
	font-weight: bold;
}

#second-phase{
	background-color: rgb(220, 237, 242);
    padding: 5rem 0;
    width: 100%;
}

@media(max-aspect-ratio:3/4){
	#first_btn{
		margin: 0;
		font-size: 3.5vw;
	}
}

#first_btn{
	background-color: var(--ORANGE);
	padding: 2rem;
	border-color: var(--ORANGE);
	cursor: pointer;
	border-radius: 1.5rem;
}
#first_btn:hover{
	background-color:white ;
	color: var(--ORANGE) ;
}

#first_title{
	margin-left: 15%;
	margin-top: 5%;
	font-size: 3rem;
	color: rgb(47, 47, 47);
	font-weight: 900;
}
#first_text{
	margin-left: 15%;
	font-size: 3rem;
	margin-top: 1%;
	font-weight: 200;
	line-height: 5rem;
}
#two_Mobile {
	max-height: 35rem;
	max-width: 35rem;
}

.container_par {
	display: flex;
	justify-content: space-evenly;
	gap: 5rem;
	padding-bottom: 11rem;
	padding-top: 8rem;
}

.box_par {
	flex: 1;
	padding: 1rem;
	display: flex;
	background-color: #f5f9fd;
	gap: 1rem;
	flex-direction: column;
	max-width: 25%;
	text-align: center;
	justify-content: center;
}

#paragraphs {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

button:hover {
	background-color: #5e8dc0;
}

#coteconso3 {
	background-color: #f5f9fd;
}

.text_align_center {
	text-align: center;
}

.text_blog {
	text-align: center;
	text-align: center;
	color: var(--BLEU);
	font-size: 4rem;
}

.imgAnim {
	animation: fadeIn 1.5s ease-in-out;
}

.red_text {
	color: var(--RED);
	font-size: 3rem;
	text-align: center;
	padding: 5rem;
}

/**************************
 *****     PAGE 2     *****
 **************************/
.content {
	margin: auto;
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	min-height: 50rem !important;
	
}
#background_img_content{
	background-image: url(../img/image-removebg-preview.png);
	background-size: 9%;
	background-repeat: no-repeat;
	background-position: center left ;
}
#nous_soutenir_background{	
	width: 100%;
}

.content_conso_az {
	margin: auto;
	width: 100%;
	align-items: center;
	flex: 1;
	max-width: 250rem !important;
	display: flex;
	flex-direction: column;

}

.content_conso {
	margin: auto;
	flex: 1;
	width: 100%;
	max-width: 100% !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	justify-content: flex-end;
	/* align-items: center; */
	min-height: 32rem;
}

.content_conso_first {
	max-width: 100% !important;
}

.conso_solo_padding {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	max-width: 75%;
}

.conso_solo_padding_1 {
	padding-top: 6%;
	display: flex;
	flex-direction: row;
}

.div_solo_padding {
	padding-left: 5%;
	padding-right: 5%;
}

.consos_solo2 {
	display: flex;
	flex-direction: row;
}

#conso_solo4 {
	display: flex;
	color: var(--BLEU);
	justify-content: space-between;
	max-width: 80%;
	padding: 5rem;
	margin: auto;
	flex-direction: column;
	gap: 1rem;
}

#conso_solo,
.conso_solo,
#conso_solo_last {
	color: var(--BLEU);
	justify-content: center;
	padding: 5rem;
	max-width: 75%;

}



#conso_solo_last {
	margin: auto 0;
}

#conso_link {
	max-width: 80%;
	width: 70%;
	justify-content: flex-end !important;
}


#conso_solo2,
#onso_solo3 {
	color: var(--BLEU);
	padding: 2rem 5rem;
}

#onso_solo3 {
	width: 80%;
}



#conso_solo3 {
	color: var(--NOIR2);
	justify-content: center;
	background-position: left 80%;
	background-size: 30rem;
	background-repeat: no-repeat;
	width: 90%;
	max-width: 200rem !important;
}


#conso_solo_row {
	padding: 5rem 10rem;
    color: var(--BLEU);
    max-width: 75% !important;
    margin: auto;
}
#nous_soutenir_background{
	background-image: url(../img/coteconso/public-soutien-old.png);
	background-size: 100%;
    background-repeat: no-repeat;
	width: 100%;
	min-height: 50vh;
}


#conso_left,
#conso_left2 {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	justify-content: space-evenly;
}

#conso_left {
	width: 50%;
	margin-top: auto;
	margin-right: 12rem;
}




#conso_left_2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 23%;
}

#conso_left,
#conso_left2 div {
	font-size: 2.5rem;
	font-family: "RobotoRegular";
}

#conso_title-2 {
	font-weight: bold;
}

#conso_title_1 {
	width: 62rem;
}

.padding_image {

	padding-top: 2rem;
	width: auto;
}

#conso_title_4 {
	width: 76%;
}

#zoomdiv {
	max-width: 80% !important;
	min-height: 240rem;
	padding: 5rem;
	gap: 5rem;
}

#zoomTexts {
	display: flex;
	flex-direction: column;
	width: 50%;
	min-height: 215rem;
}

.text_Noir_RobotoMedium {
	padding: 0 0 0 3rem; 
	font-size: 6rem; 
	font-family: "RobotoRegular";
	font-weight: none;
}

.title_number {
	width: 13rem;
}

.title_number_cochan {
	width: 26rem;
	height: auto;
}

.NumberTitleDiv,.NumberTitleDiv2 {
	display: flex;
	align-items: center;
	padding: 2rem 0;
	margin-left: -1rem;
	justify-content: center;
	flex: 1;
}
#mobile_img{
	display: none;
}
.bleu_text {
	font-size: 4.5rem;
}

#conso_left div:first-child {
	font-size: 5rem;
	font-family: "RobotoRegular";
	padding-bottom: 4rem;
}

.row_title_1 {
	font-size: 4.5rem;
	font-family: "RobotoMed";
	font-weight: 600;
}

#conso_title_3 {
	font-size: 4rem !important;
	font-family: "RobotoMed" !important;
	font-weight: 600;
}

#concours_div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 50%;
	gap: 3rem;
}

.concours_div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.orang_text_back {
	background: #e9f4fb;
	width: 50%;
	padding: 5rem;
}

#text_partager {
	max-width: 50%;
	margin-left: 5%;
}

#btn_cagnotte_div {
	min-width: 30%;
	text-align: center;
}

#panneau {
	width: 18rem;
}

#solliciter_marque {
	display: flex;
	flex-direction: column;
	padding: 5rem 10rem;
	max-width: 75%;
	justify-content: space-evenly;
	gap: 3rem;
	min-height: 50rem;
	padding-top: 9rem;
	min-width: 75%;
}

#loadingBarDiv {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#loadingconso {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#icon_partager {
	width: 15%;
}

#partager_cagnotte {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex: 2;
}

#partager_cagnotte_btn {
	display: flex;
	flex-direction: row;
	padding: 5rem;
	width: 80%;
	justify-content: space-between;
}

.bleu_concours {
	padding-bottom: 8rem;
}

.back_img {
	background-image: url(../img/coteconso/ri_1.png);
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	min-height: 85rem;
	display: flex;
	justify-content: center;
}

.titel_Margin {
	margin: auto;
	font-weight: 600;
}



#conso_right img {
	padding-top: 13rem;
}

#conso_right {
	width: auto;
}

.conso_right2_img {
	max-width: 37rem !important;
}

#conso_right_img img {
	width: 38.52rem;
	height: auto;
}


#conso_center img {
	max-width: 13rem;
	height: auto;
	margin: auto;
}

#conso_center {
	margin: auto;
	width: 60%;
	text-align: end;
	display: flex;
	flex-direction: column;
	min-height: 25rem;
	justify-content: space-between;
	gap: 1rem;
}

#coteconso_nutriscore {
	padding-top: 2rem;
	font-family: "TuffyRegular";
}

.coteconso_title {
	font-size: 5rem;
	font-weight: bold;
	padding-bottom: 7rem;
	text-align: center;
	font-family: "RobotoRegular";
}

#conso_top {
	color: var(--BLEUCLAIR);
	padding-left: 9.6rem;
	padding-right: 9.6rem;
	font-family: "RobotoRegular";
	text-align: center;
	font-size: 3.5rem;
}

#conso_top2 {
	text-align: left;
	font-size: 3.5rem;
	padding-top: 2rem;
	padding-left: 1rem;
}

.par_content {
	text-align: center;
	max-width: 80%;
	padding: 5rem;
	margin: auto;
	min-height: 26rem;
}

#participer_text {

	font-size: 2.7rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
	color: var(--BLEU);
}

#content_1 {
	font-size: 4rem;
	padding-top: 2rem;
	text-align: left;

}

#content_2 {
	color: black;
	font-size: 3rem;
	padding-top: 2rem;
	text-align: left;

}

#conso1_content {
	font-size: 3.5rem;
	overflow: visible;
}


#conso1_1 {
	grid-area: a;
	color: var(--BLEU);
	font-weight: 600;
	font-size: 3.75rem;
	padding-right: 5rem !important;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Crée 3 colonnes égales */
	grid-gap: 1rem;
	/* Espace entre les éléments */
	margin-left: 35%;
	margin-right: 25%;

}

.grid-item {
	overflow: visible;
	max-width: 52rem;
	margin-left: 0;
	/* Assure que tous les éléments sont alignés à gauche */
}

#conso1_2 {
	background-image: url(../img/coteconso/Nutri-score.png);
	width: 25rem;
	height: 25rem;
	padding: 3.84rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;

}

#conso1_3 {
	background-image: url("../img/coteconso/V6-maquette-siteweb-cote-consos-fliche.png");
	width: 9rem;
	height: 18rem;
	padding-left: 3.8rem;
	padding-top: 3.8rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

#conso1_4 {
	background-image: url("../img/coteconso/V6-maquette-siteweb-cote-consos-dev-visuels-27.png");
	width: 30rem;
	height: 30rem;
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
	margin-top: -4.5rem;
}

#aide_image {
	display: flex;
	/* Utilise la flexbox pour les divs enfants */
	align-items: center;
	/* Centre verticalement les divs enfants */
	background-image: url("../img/coteconso/V6-maquette-siteweb-cote-consos-dev-visuels-21.png");
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 52rem;
	width: 43rem;
	height: 39rem;
}

#conso1_6 {
	margin-left: auto !important;
	background-image: url("../img/coteconso/V6-maquette-siteweb-cote-consos-dev-visuels-28.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 19rem;
	width: 10rem;
	height: 10rem;
	margin: auto;
	min-height: 15rem;
}

#conso1_7 {
	margin-left: auto !important;
	background-image: url("../img/coteconso/V6-maquette-siteweb-cote-consos-dev-visuels-26.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 19rem;
	width: 13rem;
	height: 13rem;
	margin: auto;
	min-height: 15rem;

}

#conso_text_top {
	/*width: 65rem;*/
	text-align: left;
	/*color: var(--BLEU);
	font-weight: 600;
	font-size: 3rem;
	padding-right: 38%;
	*/
	padding: 2rem 0;
	font-family: "RobotoRegular";
	max-width: 200rem !important;
}

.div_size {
	width: 100%;
	margin: auto;
}

.aide_div {
	display: flex;
	/* Utilise la flexbox pour les divs enfants */
	align-items: center;
	/* Centre verticalement les divs enfants */
	justify-content: center;
}

.texts-row {
	margin-left: 1rem;
	/* Marge entre aide_image et aide_content */
}

#aide_content {
	padding: 1rem;
	/* Espace intérieur pour le contenu */
	text-align: justify;
}

.text_bottom1 {
	font-weight: bold;
	font-size: 4rem;
}

.text_bottom2 {
	font-size: 3rem;
	padding: 2rem;
}

.nutriscore_btn {
	background-color: var(--BLEU);
	padding: 1.7rem;
	margin-top: 3rem;
	border: var(--BLEU);
	font-size: 4rem;
	font-weight: 100;
}

.nutriscore_btn:hover {
	color: white;
	background-color: #4272b7;
	box-shadow: 1px 1px 2px 1px #909090;
}

#conso_row {
	color: #006699;
	display: flex;
	gap: 8rem;
	flex-direction: column;
}

#conso_row2 {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 4rem;
}

#proffessionnels_txt {
	display: flex;
	width: 50%;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
}

#soutenerDiv {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 85rem;
	gap: 3rem;
}

.row_title_1_2 {
	font-size: 3.5rem;
	padding-bottom: 3rem;
	font-family: "RobotoRegular";
}

#row_title_2 {
	font-size: 2.4rem;
	font-weight: 500;
}

#comment_participer {

	width: 100%;
	color: black;
	font-family: "TuffyRegular";
	font-size: 4rem;
	text-align: center;
	background-image: url(../img/background_title.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    Letter-spacing: 1px;
    font-size: 4.5rem;
    height: 25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16rem 0;
    margin-bottom: 1%;
}


@media (max-aspect-ratio: 2/3) {

	#comment_participer {
		font-size: 4.5vw;
		margin-top: 5vh;
	}
}

.conso_link {
	color: var(--BLEU);
	font-size: 2rem;
	text-align: end;
	margin-top: 2rem;
}

.number {
	text-align: center;
}

.number img {
	height: 11rem;
	width: 11rem;
	padding: 1rem;
}


.participe_dev {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	max-width: 80%;
	gap: 4rem;
	padding: 5rem;
}


.participe_left,
.participe_right {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem;
	max-width: 50%;
	min-height: 45rem;
	justify-content: space-between;
	gap: 2rem;
}


.participe_text {
	font-size: 3.2rem;
	text-align: center;
}

.par_link {
	color: var(--BLEU);
	font-size: 2rem;
	padding: 2rem;
	font-family: "RobotoRegular";
}

.par_para {
	color: var(--BLEU);
	font-size: 1.5rem;
	font-family: "RobotoRegular";
	justify-self: start;
	padding-bottom: 14rem;
	padding-top: 8rem;
	text-align: left;
	width: 90%;
	max-width: 170rem;
	margin: auto;
}

.contentconso1 {
	max-width: 115rem !important;
}

.contentconso2 {
	justify-content: center;
	min-height: auto !important;
}

.contentconso3 {
	max-width: 156rem;

}





.linko {
	color: var(--BLEU);
}

.cadre_text {
	background-size: 14rem;
	background-repeat: no-repeat;
	background-position-y: center;
	padding-left: 15rem;
	background-image: url("../img/Pros/coindesprosleft.png");
}


#main1_bottom {
	background-color: var(--BRUN);
	margin: 8rem;
	/* Ajout de l'animation */
	animation: fadeInUp 1.5s ease-out;
}

.title_bottom {
	padding-bottom: 2rem;
}

.text_description {
	text-align: center;
	width: 75%;

}

@media (max-width:1280px) {
	.text_description {
		width: 80%;
	}
}

#group_foudhea {
	max-width: 45%;
	margin: 6% 0;
}

/*
	@media (max-width: 961px) {

						.text_noir_s_consoCacher,
						.text_noir_s_consoCacher2,
						.text_noir_s_consoCacher3,
						.text_noir_s_consoCacher4,
						.text_noir_s_consoCacher5,
						.text_noir_s_consoCacher6 {
							position: absolute;
							top: 15%;
							left: 50%;
							transform: translateX(-50%);
							background-color: #ffffffed;
							padding: 2rem;
							border-radius: 1vw;
							opacity: 0;
							transition: opacity 0.5s;
							z-index: 3;
							max-width: 90%;
						}

						.show-text {
							opacity: 1;
						}
					}

					@media (max-aspect-ratio: 3/4) {

						.text_noir_s_consoCacher,
						.text_noir_s_consoCacher2,
						.text_noir_s_consoCacher3,
						.text_noir_s_consoCacher4,
						.text_noir_s_consoCacher5,
						.text_noir_s_consoCacher6 {
							width: 70vw !important;
						}
					}
*/
@media (max-aspect-ratio: 7 / 5) and (max-aspect-ratio: 4 / 5) {
	/*
	#conso_text_top {
		width: 74rem;
		padding-top: 10rem;
		font-size: 2.5vh;
	}
	*/

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



	#conso_right {
		margin: auto;
	}

	#conso_center {
		width: 100%;
	}

	#conso_right img {
		padding-top: 0px;
	}



	#conso_left {
		min-width: 47%;
	}

	#conso_title_1 {
		width: 100%;
	}

	.contentconso1 {
		width: 90%;
		margin: auto;
	}





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


	.texts-row {
		margin-left: 0rem;
		width: 90%;
		margin: auto;
	}

	#conso_left {
		width: 100%;
	}

	#conso_left {
		margin-right: 0rem;
	}

	.conso_right img {
		width: 68%;
		margin-left: 2rem;
		margin-top: 2rem;
	}



	.participe_dev {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.participe_text {
		font-size: 5rem;
	}

	.number {
		padding-top: 3rem;
	}

	.coteconso_title {
		padding-bottom: 0px;
		font-size: 2.5vh;
	}

	#participer_text {
		font-size: 5rem;
		padding-bottom: 5rem;
	}
}

#Blog_Img,
#future_recette {
	max-width: 20rem;
	height: auto;
}

#soutener_jeune_flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5rem;
}

#soutener_jeune_flex_img {
	max-width: 50rem;
}

#fixhe_produit_element {
	width: 50%;
}

@media (max-width: 961px) {


	#zoomTexts {
		width: 100%;
	}

	#imageSynthese_1,
	#image2_1,
	#LabelsImage_1,
	#ScoresImage_1,
	#NutrimentsImage_1,
	#Bsanteimage_1,
	#ProfilImage_1 {
		max-width: 70vw;
		margin: 1vh 2rem;
		border: 0.01rem solid #9595954f;
	}

	#image3_1,
	#image4_1 {
		max-width: 9vw;
		border: 0.01rem solid #9595954f;
		margin-left: 2rem;
	}


	.littleImage {
		display: flex;
		align-content: center;
		justify-content: space-between;
	}

	.gallery {
		width: 80% !important;
	}
}



@media (max-aspect-ratio: 7 / 5) and (max-aspect-ratio: 4 / 5) {


	.red_text {
		font-size: 3vh;

	}

	#main1_content {
		display: grid;
		grid-template:
			"b" auto
			"a" auto
			"c" auto
			"d" auto
			"e" auto/ 80vw;
	}




	#slide4_content {
		display: table-row;
	}

	#slide4_image {
		height: 40vw;
	}





	#conso_left2 div:first-child {
		font-size: 3vh;
	}




	.bleu_text {
		margin: unset !important;
	}

	.row_title_1_2 {
		font-size: 3vh;
	}

}

/* images css */
.gallery {
	width: 80%;
	margin-left: auto;
	padding: 0.1rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.gallery>div {
	position: relative;
}


.gallery>div>img {
	display: block;
	width: 100%;
	transition: .1s transform;
	transform: translateZ(0);
}


.gallery_div_div_img {
	max-width: 100%;
	width: auto;
	min-height: 100%;

}

.gallery_div:hover {
	z-index: 2;
}

@media (min-width: 961px) {

	.flou {
		color: var(--GRIS4) !important;
	}

	.flou .spanTitle {
		color: var(--GRIS4) !important;
	}

	.gallery_div:hover>img,
	#image2.active,
	#ProfilImage.active,
	#Bsanteimage.active,
	#imageSynthese.active,
	#NutrimentsImage.active,
	.changeImage.active {
		transform: scale(1.2, 1.2);
		transition: transform 0.5s;
		border: 0.1rem solid;
	}

	.gallery_divp:hover,
	.div_div_parts:hover {
		z-index: 2;
	}

	.div_div_parts {
		z-index: 1;
	}

	.gallery_divp:hover>img,
	#image3.active,
	#recettesImage.active,
	#image4.active {
		transform: scale(1.5, 1.5);
		transition: 0.5s transform;
		border: solid 0.1rem;
	}
}

/*images cachés*/
.image-containeraz {
	display: flex;
	margin: auto;
	align-items: center;
	align-content: center;
	width: 100%;
	justify-content: space-around;
}

.image-detailsaz {
	position: relative;
	max-width: 60%;
	min-height: 25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	align-items: center;
}

.image-detailsaz img {

	width: auto;
	height: auto;
	transition: opacity 0.5s ease-in-out;
}

#image-detailsaz_1 img {
	max-width: 40rem;
}

#image-detailsaz_2 img {
	max-width: 50rem;
}

#image-detailsaz_3 img {
	max-width: 37rem;
}

#image-detailsaz_4 img {
	max-width: 62rem;
}

#text_contreparties {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	/* background-image: url(../img/coteconso/public-soutien.png); */
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: bottom;
}

#contrepartDiv {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 12rem;
}
#btns_flex{    
	display: flex;
    justify-content: space-evenly;
    min-width: 35%;
}

#soutenirDiv {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	flex: 3;
}

.text_Noiraz {
	margin: auto;
	font-size: 2.5rem;
	color: var(--NOIR2);
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 2rem;
	text-align: start;
	transition: opacity 0.5s ease-in-out;
	justify-content: center;
	margin: auto;
	align-items: center;
	font-style: oblique;
}


.image-detailsaz:hover .text_Noiraz {
	display: flex;
	opacity: 1;
}

.image-detailsaz:hover img {
	opacity: 0.8;
}

/* wheel */
.wheel-container {
	position: relative;
	width: 55rem;
	height: 55rem;
}

.spinner-background {
	width: 100%;
	height: 100%;
	background-image: url('../img/roue-03.png');
	background-size: cover;
	border-radius: 50%;
	position: absolute;
	z-index: 0;
}

.spinner {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

.wheel {
	width: 100%;
	height: 100%;
	background-image: url('../img/roue-04.png');
	background-size: cover;
	transform-origin: 50% 50%;
	transition: transform 6s cubic-bezier(0.17, 0.67, 0.83, 0.67) infinite;

}

/* loading*/
.radius1 {
	margin: 0.2rem 0 0.2rem 0.2rem !important;
	border-radius: 2rem 0 0 2rem;
}

.radius2 {
	margin: 0.2rem 0.2rem 0.2rem 0 !important;
	border-radius: 0 2rem 2rem 0;
}

.loader_cagnotte {
	border: solid 2px #00548d;
	display: flex;
	width: 50%;
	height: 3.1rem;
	border-radius: 2rem;
	overflow: hidden;
}

.loader-section {
	width: 10%;
	border-right: 0.2rem solid #dddddd;
	margin: 0.2rem 0;
	animation: loadSection 4s ease-out infinite;
}

/* Animate the background color change */
@keyframes loadSection {
	0% {
		background-color: #00548d;
	}

	25% {
		background-color: #00548d;
	}


	100% {
		background-color: #fff;
	}

}

/* Apply the animation to each section with a delay */
.loader-section:nth-child(1) {
	animation-delay: 0s;
}

.loader-section:nth-child(2) {
	animation-delay: 0.2s;
}

.loader-section:nth-child(3) {
	animation-delay: 0.4s;
}

.loader-section:nth-child(4) {
	animation-delay: 0.6s;
}

.loader-section:nth-child(5) {
	animation-delay: 0.8s;
}

.loader-section:nth-child(6) {
	animation-delay: 1s;
}

.loader-section:nth-child(7) {
	animation-delay: 1.2s;
}

.loader-section:nth-child(8) {
	animation-delay: 1.4s;
}

.loader-section:nth-child(9) {
	animation-delay: 1.6s;
}

.loader-section:nth-child(10) {
	animation-delay: 1.8s;
}

/* ... (other styles remain unchanged) ... */

.indicator {
	position: absolute;
	top: 3%;
	/* Adjust as needed */
	left: 50%;
	transform: translateX(-50%);
	width: 8%;
	/* Adjust as needed */
	height: 10%;
	/* Adjust as needed */
	background-image: url('../img/roue-05.png');
	background-size: cover;
	z-index: 2;
}





@media (max-aspect-ratio: 3/4) {
	.box_par {
		max-width: 50%;
	}
	#btns_flex{    
		min-width: 100%;
	}
	

	#partager_cagnotte_btn {
		flex-direction: column;
	}

	#text_partager {
		max-width: 100%;
	}

	#coteconso1_headband {
		font-size: 5vw;
	}

	.gallery {
		width: 100% !important;
	}

	#icon_partager {
		width: 25%;
	}

	#conso_left,
	#conso_left2 {
		gap: 1rem;
	}

	#main1_content {
		grid-template:
			"b" auto
			"a" auto
			"c" auto
			"d" auto
			"e" auto/100%;
	}

	.par_content {
		padding: 10rem;
		max-width: 100%;
	}

	.image-containeraz {
		flex-direction: column;
		gap: 3vh;
	}

	.text_Noiraz {
		font-size: 4vw !important;
	}

	.image-detailsaz {
		max-width: 80% !important;
	}

	.image-detailsaz img {
		margin: auto;
		display: flex;
	}

	#image-detailsaz_1 img {
		max-width: 80% !important;
	}

	#image-detailsaz_2 img {
		max-width: 100% !important;
	}

	#image-detailsaz_3 img {
		max-width: 75% !important;
	}

	#image-detailsaz_4 img {
		max-width: 100% !important;
	}

	#text_partager {
		width: 100%;
	}

	#partager_cagnotte {
		padding: 3vh;
	}

	#solliciter_marque {
		padding: 0 10rem 10rem 10rem;
		max-width: 100%;
		min-height: 35vh;
	}

	#loadingBarDiv {
		gap: 1.5vh;
	}

	#panneau {
		width: 9vh;
	}

	.wheel-container {
		position: relative;
		width: 70vw !important;
		height: 70vw !important;
		margin: auto;
	}

	.concours_div {
		flex-direction: column;
	}

	#concours_div {
		width: 100%;
		gap: 5rem
	}

	.orang_text_back {
		background: #e9f4fb;
		width: 80%;
		padding: 2vh;
	}

	#text_contreparties {

		min-height: 40vh;
		
	}
	#text_blue4 {
		font-size: 4.5vw;
		font-weight: bold;
	}
	#conso1_6,
	#conso1_7 {
		width: 18rem;
		height: 18rem;
	}

	#soutenerDiv {
		gap: 2vh;
	}

	#soutener_jeune_flex_img {
		max-width: 25vh;
	}

	#Blog_Img,
	#future_recette {
		max-width: 25vw;
		height: auto;
	}

	#group_foudhea {
		max-width: 80%;
	}


	#soutener_jeune_flex {
		flex-direction: column-reverse;
	}

	#proffessionnels_txt {
		width: 100%;
	}

	.participe_dev {
		gap: 4vh;
		max-width: 100%;
		padding: 10rem;
	}

	#conso_solo,
	.conso_solo,
	#conso_solo_last,
	#conso_link {
		max-width: 100%;
	}

	#conso_info3 {
		margin: revert;
	}

	.participe_left,
	.participe_right {
		max-width: 100%;
	}

	.text_blog {
		font-size: 5vw;
	}

	.cadre_text {
		max-width: 100% !important;
	}

	#zoomdiv {
		max-width: 84% !important;
		padding: 5rem 10rem;
	}

	#zoomTexts {
		width: 100%;
	}

	#main1_content {
		text-align: start;
	}

	#conso_center img {
		max-width: 45vw;
		height: auto;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#conso_left_2 {
		max-width: 100%;
	}

	.conso_solo_padding {
		max-width: 100%;
	}

	#conso_center {
		text-align: start;
	}

	#main1_0 {
		height: 25vh;
		margin-top: 1vh;
		max-height: 21vh;
	}

	.conso_solo_padding {
		flex-direction: column-reverse;
	}

	.orange_title {
		font-size: 5vw !important;
	}
	.bleu_title {
		font-size: 5vw !important;
	}

	#conso_solo2,
	#onso_solo3 {
		padding: 5rem 10rem;
	}

	.titel_Margin {
		margin: auto;
		width: 100%;
		padding: 0;
	}

	#conso_row {
		width: 100%;
		margin: auto;
		min-height: 15vh;
		justify-content: space-between;
	}

	.conso_link {
		margin: auto;
		width: 100%;
		font-size: 3vw;
		margin-top: 1vh;
	}

	#conso_title_3 {
		font-size: 5vw !important;
	}

	#conso_solo4 {
		max-width: 100%;
		padding: 5rem 10rem;
	}



	.content_conso {
		min-height: 27vh;
	}

	#conso_solo,
	.conso_solo,
	#conso_solo_last {
		padding: 5rem 10rem;
	}

	.conso_right2 img {
		width: 70rem;
	}


	#conso1_2 {
		width: 50rem;
		height: 50rem;
	}

	#conso1_3 {
		width: 18rem;
		height: 28rem;
	}

	#conso1_4 {
		width: 36rem;
		height: 36rem;
	}

	.text_bottom1 {
		font-size: 5rem;
	}

	.text_bottom2 {
		font-size: 4.5rem;
	}

	.row_title_1 {
		font-size: 2.5vh;
	}

	#row_title_2 {
		font-size: 4vw;
	}

	#conso_left2 {
		font-size: 3vh;
	}

	#conso_left,
	#conso_left2 div {
		font-size: 4vw;
	}

	#aide_image {
		max-width: 64rem;
		width: 100%;
		height: 50rem;
	}

	#conso_top2 {
		font-size: 5.5rem;
	}

	#content_1 {
		font-size: 5rem;
	}

	#content_2 {
		font-size: 4rem;
	}

	.par_para {
		font-size: 2.5rem;
	}

	.conso_solo_padding_1 {
		display: flex;
		flex-direction: column-reverse;
	}

	#conso_left div:first-child {
		font-size: 3.4vh;
	}

	.padding_image {
		width: 70%;
		justify-content: center;
		margin: auto;
	}

	.conso_right img {
		min-width: 20vw;
		margin: auto;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1vh;
		max-width: 40vw;
	}
}

#scannerContent {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	align-items: center;
}

#html5-qrcode-anchor-scan-type-change {
	font-size: 2rem;
}

#imageSanner {
	width: 20rem;
	padding: 2rem;
}

#reader {
	min-width: 50rem
}

@media (max-aspect-ratio: 3/4) {
	#reader {
		width: 100%
	}

	#html5-qrcode-anchor-scan-type-change {
		font-size: 4rem;
	}
}



.conso_solo {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 63rem;
	max-width: 75%;
	padding-bottom: 1rem;
}

.propositionDiv {
	display: flex;
    padding: 5rem;
    max-width: 100%;
    min-height: 18rem;
    align-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
	margin: auto;
}

.bigTile {
	max-width: 80%;
	margin: auto;
	padding: 0 5rem;
}





@media (max-aspect-ratio: 3 / 4) {
	.conso_solo {
		min-height: 35vh;
		max-width: 100%;
		width: auto;
	}
	#main{
		background-position: 11% 80%;
	}
	.bleu_text,
	.orang_text {
		font-size: 4.5vw !important;
	}

	.bigTile {
		max-width: 100%;
	}

	.text_Noir_RobotoMedium {
		font-size: 5.5vw !important;
	}


	.proposition {
		min-height: 10vh;
	}

	.propositionDiv {
		display: flex;
		padding: 2rem 10rem;
		max-width: 100%;
	}

	.back_img {
		min-height: 80vh;
		justify-content: flex-start;
	}

	.title_bottom {
		padding-bottom: 1.5rem;
		padding-top: 2rem;
	}

	#btn_2{
        margin-left: 32%;
		margin-bottom: 8%;
    }

	#first_img_mobile{
		display: block !important;
		height: auto;
		width: 39rem;
		/* margin-left: 63%; */
		/* margin-top: -14%; */
	}
}

#first_img_mobile{
	display: none;
}

#contact_visual{
	width: auto;
	height: 30rem;
}