@media (max-width: 1100px) {

    html,
    body {
        font-size: 1.515vw;
    }
}

@media screen and (min-aspect-ratio: 4/1) {

    html,
    body {
        font-size: 1.515vw;
    }
}

/* Titles css */

.title_conseil {
    font-size: 2.2rem;
    padding: 2rem 0 0.8rem 0;
    font-family: "TuffyRegular";
    color: var(--TURQUOISE);
}

.coneil_conserv {
    display: flex;
    flex-direction: column;
    max-width: 90%;
    margin: auto;
    min-height: 7rem;
    align-items: center;
    justify-content: flex-end;
}

.Title_h1 {
    font-size: 2.2rem;
    font-family: "Roboto";
    color: var(--NOIR2);
    font-weight: bold;
    margin: 1rem;
}

.subtitle {
    font-size: 1.8rem;
    font-family: "Roboto";
    color: var(--GRIS3);
    margin: 1rem;
}


#nouva {
    grid-area: nouva;
    text-align: initial;
    font-size: 1.2rem;
    margin-top: auto;
    margin-bottom: auto;
}

#nutriscore_div {
    grid-area: nutriscore;
    text-align: initial;
    font-size: 1.2rem;
    font-family: "TuffyRegular";
    margin-top: auto;
    margin-bottom: auto;
}

.origine {
    grid-area: origine;
    text-align: initial;
    font-size: 1.2rem;
    margin-top: auto;
    margin-bottom: auto;
}

/*End*/
/* mains */
#main_init {
    padding: 0;
    margin: 0;
    max-width: 65rem;
    background-color: #fff
}

/*End*/
#top_element {
    display: flex;
    padding: 1rem;
    justify-content: space-between !important;
    width: 75%;
}

.logoclickable {
    max-width: 65%;
    max-height: 65%;
    box-shadow: 2px 2px 3px 1px #909090;
    border-radius: 0.5rem;
    margin-left: 0rem;
    display: block;
}

.logoclickable1 {
    max-height: 4rem;
    box-shadow: 1px 1px 1px #9090905e;
    border-radius: 0.5rem;
    width: auto;
    height: auto;
    margin: auto;
    display: block;
}

#pp_trademark {
    display: flex;
    justify-content: center;
    align-items: center;
}


#title_element,
#top_element {
    align-items: center;
    justify-content: center;

}

#title_element {
    color: #333333;
    font-family: "Roboto";
}


#top_logo img {
    max-width: 12rem;
    height: auto;
}

.top_text {
    font-family: "Roboto";
    font-size: 1rem;
    color: var(--GRIS4);
}

.block {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    align-items: center;
    /*background-color: antiquewhite;*/
    margin: auto;
}

.block_contents {
    text-align: center;
    display: contents;
    align-content: space-between;
    align-items: center;
    margin: auto;
}



#produit_block {
    display: grid;
    /* Cette ligne est ajoutée pour centrer le contenu dans le bloc */
    grid-template-areas:
        "image nouva"
        "image nutriscore"
        "image origine";
    grid-template-columns: 1.2fr 2fr;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.5rem;
    padding: 1rem;
    color: #0f548d;
    font-family: "TuffyRegular";
    align-items: center;
    max-width: 90%;
    min-width: 60rem;
    margin-left: 2rem;

}

@media (max-aspect-ratio: 2 / 3) {
    #produit_block {
        min-width: 95vw;
    }
}

@media (max-width: 960px) {
    #produit_block {
        min-width: 80%;
    }
}

#origineContent {
    display: grid;
    /* Cette ligne est ajoutée pour centrer le contenu dans le bloc */
    grid-template-areas:
        "obj_clik1 obj_clik2"
        "logoA logoB"
        "textC textD";
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 1.5rem;
    row-gap: 0.2rem;
    align-items: start;
    justify-content: space-between;
}

.originDiv {
    width: 80%;
    margin: auto;
    padding-top: 4rem;
}


#textC,
#textD {
    color: var(--BLEU);
}

@media screen and (max-width: 810px) {
    #produit_block {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 607px) {
    body {
        /*font-size: 1vh;*/
    }
}


#image {
    margin-top: auto;
    margin-bottom: auto;
}

.nutriscore {
    padding: 0.5rem;
    width: 11.7rem;
    height: 7.3rem;
    border-radius: 1rem;
    box-shadow: 1px 1px 3px 1px #909090;
}

#image_p {
    grid-area: image;
    transition: transform 0.1s ease-in-out;
}

#image_p.active {
    transform: scale(1.2);
    cursor: pointer;
}

/* Gildas : Modification */





.div_space_2 {
    padding: 0 2.5rem 0 2.5rem;
    display: flex;
}

.div_space_2_Alle {
    padding: 0 2.5rem 0 2.5rem;
    display: flex;
    flex-direction: column;
}

.div_space_2_Add {
    padding: 0 2.5rem 0 2.5rem;
}

.div_row {
    display: flex;
    flex-wrap: wrap;
    padding: 0.2rem 0.5rem 0.5rem 0.5rem;
    align-items: center;
}

/*FIN*/

#image_p img {
    max-width: 24rem;
    width: auto;
    height: auto;
    max-height: 23rem;
    /*box-shadow: 0rem 0.1rem 1rem 0.5rem rgb(0 0 0 / 7%);*/
    border-radius: 0.5rem;
}
.fleche_conseils_nutritionnels{
    max-width: 3rem;
    padding: 0 3%;
}
#fleche_conseils_nutritionnels{
    display: flex;
    align-items: center;
    padding: 0 15%;
}
#textContainer{
    padding: 0.5rem;
font-size: 1.12rem;
color: #676766;
font-family: "roboto";
}
#readMore,#readLess{
    font-weight: 600;
    color: #000;
    cursor: pointer;
}
#synthese_id{
    color: #6dc3bd;
    font-weight: 600;
    font-family: 'Roboto';
    cursor: pointer;
}
.nutriscore_div_img,
.origine img {
    max-width: 9rem;
    height: auto;
}

#nouva img {
    max-width: 2.7rem;
    height: auto;
}

#nova_image {
    width: 4.5rem;
}

.origin_img {
    max-width: 10rem !important;
    width: 4rem;
}

.note {
    text-align: start;
    font-size: 1.1rem;
    padding: 1rem;
}

.image_text {
    display: flex;
    color: var(--NOIR2);
    align-items: center;
}




.consos_img {
    max-width: 10rem;
    min-height: 7rem;
    max-height: 7rem;
    transition: opacity 0.3s ease-in-out;
}

.consos_img:hover {
    opacity: 0.5;
}

.Image_button {
    width: auto;
    max-height: 7rem;
    transition: transform 0.2s ease-in-out;
    filter: saturate(130%);
    /* Animation transition effect */
}

.Image_button:hover {
    transform: scale(1.05);
    /* Scale the image by 10% on hover */
}




.info {
    position: relative;
    top: 1rem;
    width: 5rem;
    margin-left: auto;
    height: 0;
}

#Idees {
    position: relative;
    /* bottom: 5vh; */
    display: flex;
    right: 2%;
    justify-content: flex-end;
    height: 0;
    align-items: center;
}


.arrow,
.arrowfleche {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    margin: auto;
    margin-bottom: 0.5rem;
}

.arrowIdees {
    display: flex;
    height: 1rem;
    width: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.arrow::after {
    border-bottom: 0.28rem solid #ee8670;
    border-right: 0.28rem solid #ee8670;
    content: '';
    height: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
}

.social-media-icons {
    display: flex;
    justify-content: center;
    max-width: 18.7rem;
    min-width: 12.5rem;
}

.social-media-icons .icon {
    display: flex;
    align-items: center;
    max-width: 2rem;
    padding: 0 0.7rem;
    height: 3rem;
    color: #aaa7a7;
    text-decoration: none;
}
.fa-3x {
    font-size: 2.5em !important;
}
.arrow.is-bottom,
.arrowfleche.is-bottom,
.arrowIdees.is-bottom {
    transform: rotate(226deg);
}

.arrowfleche.is-bottom2,
.arrowAdditifs.is-bottom2,
.arrowIdees.is-bottom3 {
    transform: rotate(45deg);
}

.arrowAdditifs.is-bottom4 {
    transform: rotate(225deg);
}

.arrow_selected {
    transform: rotate(45deg) !important;
}

.arrow_selected::after {
    border-bottom: 0.315rem solid #ee765e;
    border-right: 0.315rem solid #ee765e;
}

.arrow:hover::after {
    border-bottom: 0.32rem solid rgb(0, 0, 0);
    border-right: 0.32rem solid rgb(0, 0, 0);
    transform: rotate(180deg);
}

#showLessAdditives {
    display: none;
    align-items: center;
    align-content: center;
    flex-direction: row;
}

.arrow,
.arrowfleche {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    margin: auto;
    margin-bottom: 0.5rem;
}


.arrowAdditifs {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    margin: auto;
    margin-left: 1rem;
}

.arrowfleche::after {
    border-bottom: 0.3rem solid #00548d !important;
    border-right: 0.3rem solid #00548d !important;
    content: '';
    height: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
}

.arrowIdees::after {
    border-bottom: 0.19rem solid #ee8670 !important;
    border-right: 0.19rem solid #ee8670 !important;
    content: '';
    height: 0.7rem;
    position: absolute;
    width: 0.7rem;
}

.arrowAdditifs::after {
    border-bottom: 0.2rem solid var(--NOIR2) !important;
    border-right: 0.2rem solid var(--NOIR2) !important;
    content: '';
    height: 0.8rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 0.8rem;
}

.menu-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border: 0.1rem solid #f38181;
    border-radius: 50%;
    font-family: 'Roboto';
    color: #f38181;
    background-color: #fff;
    text-align: center;
    text-decoration: none;
    position: relative;
    font-weight: 500;
    font-size: 1.2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-direction: column;
    padding: 0.1rem;
}

.menu-item:hover {
    background-color: #ffe3e3;
}

#conseils_consos {
    display: flex;
    flex-direction: row;
    margin: auto;
    justify-content: space-evenly;
    gap: 2rem;
    padding: 4rem 2rem;
}

#block1,
#block3,
#block5,
#block4 {
    width: 100%;
}

#block1_1 {
    width: 100%;
    max-width: 90%;
    min-height: 16rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
}

#recettes_title {
    min-height: 5rem;
    justify-content: center;
    align-items: center;
}

#block1 {
    width: 100%;
    margin: auto;
}

#consos_conseils {
    width: 100%;
    background-color: #def0ef;
}

.consos_conseils {
    width: 100%;
    padding-top: 2rem;
}

.pastille {
    margin: 0 10px;
    /* Marge entre chaque pastille */
}

.pastille {

    margin: 0 1rem;
    width: 20%;
}

.div_ing {
    text-align: left;
}



.div_row_flex_start {
    display: flex;
    justify-content: flex-start;
}

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

.div_space_flex {
    justify-content: left;
    padding: 2rem 1rem 1rem 1rem;
    margin: auto;
    width: 80%;
}

.div_space {
    padding: 2rem 1rem 1rem 1rem;
    margin: auto;
    width: 90%;
}

.div_space_flex1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 2.5rem;
    margin: auto;
    align-items: stretch;
}


.size_div {
    width: 45%;
    margin: 0 2rem 1rem 0;
}

.additive {
    margin: 1rem 0;
    font-family: "Roboto";
}

.pp_origin_content {
    padding: 0.2rem;
}

.div_space_flex_around {
    justify-content: space-around;
    padding: 2rem 1rem 1rem 1rem;
    margin: auto;
    width: 80%;
}

.text_noir_s {
    font-size: 1.05rem;
    color: var(--NOIR2);
    font-family: "Roboto";
}


/* Gildas : Modification */
.title-ing {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0.3rem 0;
    font-family: "Roboto";
}

.text_noir_m,
.text_noir_m_title {
    font-size: 1rem;
    color: var(--NOIR2);
}

.text_noir_conseils {
    font-size: 1.2rem;
    color: var(--NOIR2);
}

.text_noir_m_title {
    font-family: 'Roboto';
}

#description_PH {
    font-size: 1.2rem;
}

.div_column_38 {
    max-width: 50%;
    width: 49%;
}

/* fin de la modification*/


#prodacteur_info {
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: flex-start;
    max-width: 80%;
    text-align: justify;
}

.prodacteur_info {
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: flex-start;
    max-width: 75%;
    text-align: justify;
}


.text_noir_m2 {
    font-size: 1.5rem;
    color: var(--NOIR2);
}

.text_noir_l {
    font-size: 1.8rem;
    color: var(--NOIR2);
}

.padding_box {
    padding: 1rem;
    margin-top: 2rem !important;
    width: 90%;
    text-align: start;
    margin: auto;
}

.border_box {
    padding-top: 0.5rem;
    width: 90%;
    text-align: start;
    margin: auto;
}

.text_gris_sup {
    font-size: 1.3rem;
    color: var(--GRIS2);
    padding-bottom: 0.2rem;
}

.text_gris_m {
    font-size: 1.3rem;
    color: var(--GRIS2);
    padding-bottom: 0.5rem;
}

.text_gris_sup {
    margin: auto;
}

.text_gris_s {
    font-size: 1rem;
    color: var(--GRIS4);
}



.text_left {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--NOIR2);
    padding: 0 1rem;
    text-align: start;
    font-size: 1.1rem;
    font-family: "Roboto";
}

.bottom_1 {
    font-weight: 600;
    padding: 0.5rem;
}

.logoclickable1 {
    transition: transform 0.1s ease-in-out;
}

.logoclickable1:hover {
    transform: scale(0.97);
}

.img_pastille {
    max-width: 85%;
    max-height: 9rem;
    min-width: 9rem;
    transition: transform 0.15s ease-in-out;
}


.img_pastille:hover {
    transform: scale(1.05);
}

.box_pastille {
    display: flex;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.2);
    padding: 1rem;
    justify-content: center;
}

.box_tab {
    display: flex;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.2);
    width: 100%;
    margin: 3rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.content_part {
    position: relative;
}

.round-button {
    width: 5rem;
    position: absolute;
    right: 0;
}

.round-button-circle {
    width: 100%;
    height: 0;
}

.round-button-circle:hover {
    background: #de2f0b;
}

.pp_compo_categ2 {
    text-decoration: underline;
    font-size: 1.5rem;
    padding-top: 2.5vmin !important;
    font-weight: 600 !important;
}
.swiper-wrapper,#swiper-wrapper{
    /*height: unset !important;*/
}
.swiper-slide-next{
    height: 0 !important;
}

.round-button a {
    display: block;
    float: left;
    width: 100%;
    padding-top: 0%;
    padding-bottom: 50%;
    /* line-height: 1em; */
    margin-top: -1rem;
    /* margin-right: 0rem; */
    text-align: center;
    color: #ee8670;
    font-family: Verdana;
    font-size: 2.5rem;
    /* font-weight: bold; */
    text-decoration: none;
}

.pastilles_content {
    width: 100%;
}

.content_part {
    display: none;
    opacity: 0;
    transition: opacity 0.5s, display 0.5s;
    height: 100%;
    padding: 1rem 0;
    min-height: 15rem;
}
.pastilles_content{
    background-color: #efefef;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.content_part {
    position: relative;
    display: none;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
}

.content_part.active {
    display: block;
    opacity: 1;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOutAnimation {
    animation: fadeOut 0.5s ease;
}

.Close {
    background-color: aqua;
    width: 40px;
    height: 50px;
}

.objs {
    position: absolute;
    left: 2rem;
    bottom: 1rem;
}

.objs div {
    cursor: pointer;
    padding: 0.5rem;
    text-align: left;
    padding-left: 1.5rem;
    margin: 0.5rem;
}

.objs div.active {
    border: 0.2rem solid #ee8670;
    position: relative;
    border-radius: 0.7rem;
}

.objs div.active:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.2rem;
    width: 0.7rem;
    height: 0.7rem;
    border-left: 0.2rem solid #ee8670;
    border-bottom: 0.2rem solid #ee8670;
    transform: translateY(-50%) rotate(225deg);
}


.text_color {
    color: #ee8670;
    font-family: "Roboto";
    font-size: 1.3rem;
}


/*                                 */

.img_footer {
    width: 7rem;
    height: 7rem;
    box-shadow: 0 2px 7px 0 rgb(0 0 0 / 17%);
    padding: 0.8rem;
    border-radius: 10px;
    background-color: white;
    margin: 0.5rem;
}

.img_prancipal {
    padding: 1rem;
    max-width: 17rem;
    max-height: 10rem;
}

@media (max-width: 960px) {}

/* BÉNÉFICES SANTÉ */
.centered {
    text-align: center;
    cursor: pointer;
    /* Add additional styling as needed */
}

.hidden {
    display: none;
}

/* Style pour flouter le dernier élément visible */
.blur-effect {
    filter: blur(4px);
}

/* Style pour l'élément "+ de bénéfices santé" */
.more-benefits {
    text-align: center;
    cursor: pointer;
    font-family: "roboto";
    font-size: 1.3rem;
    font-weight: 600;
    color: #00548d;
    padding: 1rem 1rem 0rem 1rem;
}

/* Style pour masquer la moitié du contenu */
.half-content {
    overflow: hidden;
    height: 7rem;
}

.half-content::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 60%;
    width: 100%;
    /*height: 50%;*/
    background: white;
}

.containersanteaz {
    max-width: 95%;
    margin: 0;
    padding: 1rem 1rem 1rem 0;
    font-family: 'Arial', sans-serif;
}

.divh1 {
    font-size: 1.5rem;
    position: relative;
    padding-left: 4.5rem;
    margin-bottom: 2rem;
    margin: 0.5rem 0;
}

.title-line {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 0.1rem;
    width: 3.5rem;
    /* Longueur de la ligne */
    background-color: #000;
    transform: translateY(-50%);
}



.contentsante {
    display: flex;
    align-items: flex-start;
    margin-left: 5rem;
    color: var(--GRIS3);
}

.brain-icon {
    margin-right: 1rem;
    /* Espace entre l'icône et la liste */
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    font-size: 1rem;
    line-height: 1;
}

/* TENEUR EN NUTRIMENTS*/
.pp_tenurs_list {
    margin: 0rem 5rem 0rem 5rem;
    ;
}
/*
.nutrient-container {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: space-between;
    
    padding-bottom: 4rem;
}*/
.nutrient-container {
    margin: auto;
    padding-bottom: 4rem;
    display: flex;
    align-items: center;
    align-items: flex-start;
}

.column {
    flex: 1; /* Chaque colonne prend autant d'espace que possible */
}

.nutrient-item {
    display: flex;
    align-items: center;
    margin: 1rem;
    width: 85%;
}

/* Gildas : Modification  */
.nutrient-icon {
    min-width: 4rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem;
    font-weight: bold;
    font-size: 1rem;
    overflow: hidden;
    /* Cette propriété assure que le texte ne dépasse pas le cercle */
    white-space: normal;
    /* Utilisez "normal" pour diviser le texte selon les espaces */
    text-align: center;
    /* Centre le texte à l'intérieur du cercle */
}

/*  Fin de la modification */

.nutrient-text {
    font-size: 1.3rem;
    color: var(--NOIR2);
}

/* */

#rightscreen::-webkit-scrollbar-track,
#msgboxdata::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
    border-radius: 0.8rem;
}

#rightscreen::-webkit-scrollbar {
    width: 1rem;
    background-color: #F5F5F5;
}

#msgboxdata::-webkit-scrollbar {
    width: 0.7rem;
}

#rightscreen::-webkit-scrollbar-thumb,
#msgboxdata::-webkit-scrollbar-thumb {
    border-radius: 0.8rem;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122 155 149)), color-stop(0.72, rgb(73 155 149)), color-stop(0.86, rgb(28 155 149)));
}

.nutri-score {
    display: flex;
    max-width: 11rem;
    min-width: 8rem;
    /* Coins arrondis pour le conteneur */
    overflow: visible;
    /* Permet aux enfants de sortir du conteneur */
    position: relative;
    /* Contexte de positionnement pour les enfants absolus */
    /*box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);*/
    /* Ombre pour le conteneur */
    height: 3rem;
    padding: 1rem 1rem 0.5rem 0.5rem;
}

.nutri-score div {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff9c;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: transform 0.3s, z-index 0s;
    /* Animation de la transformation */
    position: relative;
    /* Nécessaire pour que z-index fonctionne */

}

.nutri-score .a {
    background-color: #038141;
    border-radius: 15px 0px 0px 15px;
}

.nutri-score .b {
    background-color: #85bb2f;
}

.nutri-score .c {
    background-color: #fecb02;
}

.nutri-score .d {
    background-color: #ee7f01;
}

.nutri-score .e {
    background-color: #e63e11;
    border-radius: 0px 15px 15px 0px;
}

/* Style pour l'élément agrandi */
.nutri-score div.active {
    transform: scale(1.3);
    /* Agrandit l'élément */
    z-index: 10;
    /* Assure que l'élément agrandi est au-dessus des autres */
    border: 0.2rem solid white;
    /* Bordure blanche */
    border-radius: 50px;
    /* Coins arrondis pour l'élément agrandi */
    height: 3.2rem;
    bottom: 0.3rem;
    min-width: 1.7rem;
    color: white !important;
}

@media (max-width: 807px) {
    .nutri-score {
        width: 17rem;
    }
}

.nova-body {
    padding: 2rem 0;
    position: relative;
    width: 3rem;
    font-size: 16px;
}

.nova-number {
    font-size: 3.5rem;
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.number {
    color: white;
    padding: 0.1rem;
    border-radius: 50%;
    display: inline-block;
    width: 1.2rem;
    text-align: center;
    margin: 0.2rem;
}

.number1 {
    background-color: #50b848;
}

.number2 {
    background-color: #f6d200;
}

.number3 {
    background-color: #f58220;
}

.number4 {
    background-color: #e30713;
}

.texte-avec-ligne {
    border-bottom: 1px solid var(--NOIR2);
    color: var(--NOIR2);
}

.AdidatifButton {
    color: var(--NOIR);
    padding: 1rem 0;
    cursor: pointer;
    font-family: "Roboto";
}

/**/
.additive-component {
    background-color: #f0f0f0;
    margin: auto;
    display: flex;
}

.additive-component h2 {
    color: #000;
    /* Replace with the actual color you want */
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.tip {
    color: var(--NOIR2);
    font-size: 1rem;
    cursor: pointer;
    font-family: "Roboto";

}

.li-ingredient {
    word-wrap: break-word;
    /* To prevent overflow and ensure proper word breaking */
    word-break: break-word;
    /* To ensure that words break nicely */
}



.nutrient-icon-V {
    background-color: #1c9b95;
}

/* Vert */
.nutrient-icon-O {
    background-color: #95c11f;
}

/* Orange */
.nutrient-icon-M {
    background-color: #009640;
}

/* Marron */
.nutrient-icon-F {
    background-color: #009fe3;
}

/* Gris */
.nutrient-icon-G {
    background-color: #00548d;
}


.contact_sav {
    margin-left: 2rem
}

.image_Jauges {
    max-width: 7rem;
    padding: 0.5rem;

}

/*sliders */
#containerslide,
#containerslide2 {
    width: 100%;
    overflow: hidden;
    height: fit-content;
}

.swiper-slide {
    width: 100%;
    box-sizing: border-box;
}

/* Gildas : Modification   */
.allergens h2 {
    text-align: start !important;
    font-size: 1.3rem;
    position: relative;
    padding-left: 2.5rem;
    color: var(--BLEU);
}
.columnList {
    max-width: 60rem;
}
.ingredientsList {
    max-width: 95%;
}
.columnList,.ingredientsList {
    float: left;
    text-align: start;
    padding-right: 3%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.margin_bottom_0{
    margin-bottom: 0rem;
}
/*fin de la modification */
.allergens h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 0.15rem;
    background-color: var(--BLEU);
}

.global_content {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}


.ingredient {}

.title-ing {
    font-weight: bold;
}

.text_li {
    line-height: 1.4 !important;
}

.text_ul {
    list-style: inherit !important;
    margin-left: 2rem !important;
}

.allergene {
    text-decoration: underline;
    /*position: relative;*/
}

.allergene:hover::after {
    /*content: "Allergène";
    position: absolute;
    bottom: 100%;
    left: 5rem;
    transform: translateX(-50%);
    padding: 0.5rem;
    background-color: #1c9b95;
    color: white;
    border-radius: 0.5rem;
    white-space: nowrap;*/
}

/** i bouton */
.info_button_i {
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    color: #2a5d9e; /* Couleur du texte */
    position: relative;
}

.info_button_i span {
    z-index: 1; /* S'assurer que le texte est au-dessus de la ligne */
    background-color: white; /* Couleur de fond pour le texte */
    padding-right: 0.5rem; /* Espace à droite du texte pour la ligne */
}

.info_button_i .icon {
    border-radius: 50%;
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    font-weight: bold;
    font-family: cursive;
    cursor: pointer;
}

.info_button_i::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0; /* S'assurer que la ligne est derrière le texte */
    transform: translateY(-50%);
}


.info_button_i .icon:hover {
    transform: scale(1.1);
}
#element2_consos,#element1_consos{
    max-width: 45%;
    min-width: 40%;
}