/* GENERAL */

/* CAROUSEL */

#section_carousel {
    position:relative;
    margin-top:-3px;
     }

#section_carousel_contain {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

#carousel_G {
    position:relative;
    display:flex;
    width:68%;
   }
#carousel_D {
    position:relative;
    width:31.4%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
#carousel_slider {
    position:relative;
    width:100%;
    overflow:hidden;
       }
#carousel_slider_container {
    width: 300%;
    display:flex;
}
.carousel_slider_element {
    position:relative;
    width:33.33%;
     }
.carousel_vignette{
    position:relative;
    width:100%;
    overflow-y:hidden;
}

#carousel_selecteur_left {
    position:absolute;
    bottom:20px;
    left:calc(50% - 25px);
    height:30px;
    width:30px;
    border-radius:15px;
    background-color: #FFFFFF;
    background-image: url(/mpimg/arrow-left-red.png);
    background-position:center;
    background-repeat:no-repeat;
    border-style:solid;
    border-width:1px;
    border-color:var(--mprouge);
    z-index:1;
}

#carousel_selecteur_left:hover {
    background-color:var(--mprouge);
    background-image: url(/mpimg/arrow-left-white.png);
    }

#carousel_selecteur_right {
    position:absolute;
    bottom:20px;
    left:calc(50% + 25px);
    height:30px;
    width:30px;
    border-radius:15px;
    background-color: #FFFFFF;
    background-image: url(/mpimg/arrow-right-red.png);
    background-position:center;
    background-repeat:no-repeat;
    border-style:solid;
    border-width:1px;
    border-color:var(--mprouge);
    z-index:1;
}

#carousel_selecteur_right:hover {
    background-color:var(--mprouge);
    background-image: url(/mpimg/arrow-right-white.svg);
   
}

#carousel_select1 {
    position:absolute;
    bottom:20px;
    right:10%;
    transform:translateX(-29px);
    width:14px;
    height:14px;
    border-radius:7px;
    background-color:#FFFFFF;
    z-index:1;
    }
#carousel_select2 {
    position:absolute;
    bottom:20px;
    right:10%;
    transform:translateX(-7px);
    width:14px;
    height:14px;
    border-radius:7px;
    background-color:#AAAAAA;
    z-index:1;
    }
#carousel_select3 {
    position:absolute;
    bottom:20px;
    right:10%;
    transform:translateX(15px);
    width:14px;
    height:14px;
    border-radius:7px;
    background-color:#AAAAAA;
    z-index:1;
    }

@media (max-width: 1000px) {
    #carousel_G {width:100%;}
    #carousel_D {width:100%;}
    .carousel_vignette {margin-top:15px;}
}


/* REASSURANCE */

#section_reassurance {
    position:relative;
    margin-top:20px;
       }
#section_reassurance_listeitem {
    position:relative;
    width:80%;
    margin-left:10%;
    display:flex;
    justify-content:space-around;
     }

.section_reassurance_item {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:22%;
}
.section_reassurance_sep {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
     width:10%;
}
.section_reassurance_sep_ligne {
    width:33%;
    height:4px;
    background-color:var(--mprouge);
    border-radius:2px;
}
.section_reassurance_item_icone {
    height:32px;
}
.section_reassurance_item_texte {
    margin-top:10px;
    font-size:1.6em;
    color:#333333;
    font-weight:bold;
    text-align:center;
}


/* UNIVERS */

#section_univers {
    position:relative;
    margin-top:30px;
    height:auto;
    background-color: var(--mpfondgris);
    }

#section_univers_listeitem {
    position:relative;
    margin-top:10px;
    margin-left:5%;
    margin-bottom:30px;
    width:90%;
    display:flex;
    justify-content:space-around;
    align-items:center;

    }
.section_univers_item {
    position:relative;
    display:flex;
    height:190px;
    flex-direction:column;
    align-items:center;
    width:33%;
}
.section_univers_item_icone {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:120px;
    height:120px;
    border-radius:60px; 
    background-color:#ffffff;
}
.section_univers_item_icone:hover {
    cursor:pointer;
    box-shadow: 0px 0px 6px rgba(0,0,0,0.5);

}
.section_univers_item_texte {
    margin-top:10px;
    font-size:1.6em;
    color:#333333;
    font-weight:bold;
}

@media (max-width: 1000px) {
   #section_univers_listeitem {flex-wrap:wrap}
}


/* PRODUITS PARTENAIRES */
#section_produits_partenaires {
    position:relative;
    margin-top:20px;
    height:auto;
       }

#produits {
    position:relative;
     display:flex;
    width:88%;
    margin-left:auto;
    margin-right:auto;
    height:220px;
    margin-bottom:70px;
    overflow-x: scroll;
    overflow-y:hidden;
    scroll-snap-type: x mandatory;
    background-color:#ffffff;
        }
#produits::-webkit-scrollbar {
    width: 0px;
}

.produits_container_element {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    height:220px;
    scroll-snap-align: start;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 16.66%;
     }

.produits_element {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:95%;
    height:210px;
    border-style:solid;
    border-width:1px;
    border-color:var(--mpbleu);
    border-radius:6px;
}

.produit_element_image {
    position:relative;
    width:90%;
    height:130px;
    display:flex;
    justify-content:center;

}
.produit_element_titre {
    position:relative;
    width:90%;
    height:70px;
    padding-top:5px;padding-bottom:5px;
    padding-left:5%;padding-right:5%;
    background-color:var(--mpbleu);
    font-size:1.3em;
    color:#ffffff;
}

#produits_selecteur_left {
    position:absolute;
    top:160px;
    left:3%;
    height:35px;
    width:35px;
    border-radius:15px;
    background-color: #FFFFFF;
    background-image: url(/mpimg/arrow-left-blue.svg);
    background-position:center;
    background-repeat:no-repeat;
    z-index:1;
}

#produits_selecteur_left:hover {
    background-color:var(--mpblancover);
        }

#produits_selecteur_right {
    position:absolute;
    top:160px;
    right:3%;
    height:35px;
    width:35px;
    border-radius:15px;
    background-color: #FFFFFF;
    background-image: url(/mpimg/arrow-right-blue.svg);
    background-position:center;
    background-repeat:no-repeat;
    z-index:1;
}

#produits_selecteur_right:hover {
    background-color:var(--mpblancover);
      
}


@media (max-width: 1500px) {
   .produits_container_element {flex-basis:25%}
  }
@media (max-width: 1000px) {
    #produits{width:86%}
   .produits_container_element {flex-basis:33.33%}
   #produits_selecteur_left{left:0%}
   #produits_selecteur_right{right:0%}
}
@media (max-width: 800px) {
   .produits_container_element {flex-basis:50%}
  }

/* MARQUES */
#section_marques {
    position:relative;
    margin-top:20px;
    height:auto;
    background-color: var(--mpfondgris);
       }

#marques {
    position:relative;
    width:92%;
    margin-left:auto;
    margin-right:auto;
    height:120px;
     display:flex;
    margin-bottom:70px;
    overflow-x: scroll;
    overflow-y:hidden;
    scroll-snap-type: x mandatory;
    background-color:#ffffff;
        }
#marques::-webkit-scrollbar {
    width: 0px;
}

.marques_element {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    scroll-snap-align: start;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 12.5%;
    height:120px;
    background-color: #FFFFFF;
    text-align: center;
    }


#marques_selecteur_left {
    position:absolute;
    bottom:20px;
    right:calc(4% + 70px);
    height:30px;
    width:30px;
    border-radius:15px;
    background-color: #FFFFFF;
    background-image: url(/mpimg/arrow-left-red.png);
    background-position:center;
    background-repeat:no-repeat;
    border-style:solid;
    border-width:1px;
    border-color:var(--mprouge);
    z-index:1;
}

#marques_selecteur_left:hover {
    background-color:var(--mprouge);
    background-image: url(/mpimg/arrow-left-white.png);
    
}

#marques_selecteur_right {
    position:absolute;
    bottom:20px;
    right:calc(4% + 10px);
    height:30px;
    width:30px;
    border-radius:15px;
    background-color: #FFFFFF;
    background-image: url(/mpimg/arrow-right-red.png);
    background-position:center;
    background-repeat:no-repeat;
     border-style:solid;
    border-width:1px;
    border-color:var(--mprouge);
    z-index:1;
}

#marques_selecteur_right:hover {
    background-color:var(--mprouge);
    background-image: url(/mpimg/arrow-right-white.svg);
   
}

@media (max-width: 1500px) {
   .marques_element {flex-basis:16.66%}
  }

@media (max-width: 1000px) {
   .marques_element {flex-basis:25%}
 
}
@media (max-width: 800px) {
   .marques_element {flex-basis:33.33%}
  }