h2 {
    width:100%;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2.4em;
    font-weight:bold;
    color:var(--normal);
}

section {
    width:100%;
    padding:0px;
    margin:0px;
    display:flex;
    flex-direction:column;
    align-items:center;
   
}

h1 {
    display:inline;
    font-size:1.2em;
    font-weight:normal;
    color:var(--subtle1);
}

/* SLIDER */

#slider {
    position:relative;
    width:100%;
    max-width:1600px;
    max-height:400px;
    }

#carousel {
    position:relative;
    width:100%;
    height:auto;
    overflow:hidden;
            }

#carousel_container {
    width: 300%;
    height:100%;
}

.carousel_element {
    position:relative;
    float:left;
    width:33.33%;
    background-color:#333333;
    height:400px;
    text-align:center;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    border-radius:0px 0px 4px 4px;
}

.carousel_l1 {background-image: url(/bibl/carousel_image1.jpg);}
.carousel_l2 {background-image: url(/bibl/carousel_image2.jpg);}
.carousel_l3 {background-image: url(/bibl/carousel_image3.jpg);}



.carousel_element_titretexte {
    position:absolute;
    top:30%;
    right:10%;
}

.carousel_element_titre {
    position:relative;
    width:100%;
    color:#FFFFFF;
    font-weight:bold;
    font-size:3.6em;
    text-align:right;
    }

.carousel_element_texte {
    position:relative;
    margin-top:30px;
    width:100%;
    color:#FFFFFF;
    font-weight:bold;
    font-size:1.8em;
    text-align:right;
    }

.carousel_element_bouton {
    position:absolute;
    bottom:10%;
    right:10%;
    color:#FFFFFF;
    background:#777777;
    border-radius:8px;
    width:200px;
    height:45px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    font-size:1.8em;
    text-align:center;
    }


#carousel_selecteur_left {
    position:absolute;
    top:calc(50% - 20px);
    height:40px;
    width:40px;
    left:1%;
    background-image: url(/img/arrow_left.svg);
    background-size:contain;
    z-index:1;
}

#carousel_selecteur_left:hover {
    opacity:0.6;
}

#carousel_selecteur_right {
    position:absolute;
    top:calc(50% - 20px);
    height:40px;
    width:40px;
    right:1%;
    background-image: url(/img/arrow_right.svg);
    background-size:contain;
    z-index:1;
}

#carousel_selecteur_right:hover {
     opacity:0.6;
}

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

@media (max-width: 900px) {
    .carousel_l1 {background-image: url(/bibl/carousel_imageM1.jpg);}
    .carousel_l2 {background-image: url(/bibl/carousel_imageM2.jpg);}
    .carousel_l3 {background-image: url(/bibl/carousel_imageM3.jpg);}
}


@media (max-width: 600px) {
    .carousel_element_titretexte {top:10%;}
}


/* NOS UNIVERS */

#univers {
    position:relative;
    width:98%;
    max-width:1600px;
    min-height:220px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
    }

#univers  .item {
    width:140px;
    height:190px;
    display:flex;
    flex-direction:column;
    cursor:pointer;
   
}
#univers  .item .icone {
    width:140px;
    height:140px;
    border-radius:70px;
    background:var(--cyanclair);
    display:flex;
    justify-content:center;
    align-items:center;
}

#univers  .item .texte {
    width:100%;
    margin-top:10px;
    font-size:1.4em;
    color:var(--normal);
    font-weight:bold;
    text-align:center;
}

@media (max-width: 600px) {
    #univers .item .icone {width:120px;height:120px;border-radius:60px}
}


/* SELECTION */

.background {
    width:100%;
    background:var(--cyanclair);
}

#selection {
    position:relative;
    width:98%;
    max-width:1500px;
    min-height:390px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    }

#selection #blocleft {
    width:100%;
    max-width:1040px;
    display:flex;
    justify-content:space-between;
      
}
#selection #blocleft .item {
    width:220px;
    padding:5px 10px 10px 10px;
    height:320px;
    background:#ffffff;
    border:1px solid var(--subtle2);
    box-shadow: 0px 0px 20px 0px #EBEBEB;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
#selection #blocleft .item .image {
    width:100%;
    height:150px;
    display:flex;
    justify-content:center;
}
#selection #blocleft .item .titre {
    width:100%;
    margin-top:15px;
    height:60px;
    font-size:1.4em;
    font-weight:bold;
    color:var(--normal);
}
#selection #blocleft .item .apartirde {
    width:100%;
    margin-top:10px;
    height:20px;
    font-size:1.1em;
    color:var(--normal);
}
#selection #blocleft .item .prix {
    width:100%;
    height:35px;
    font-size:2.0em;
    font-weight:bold;
    color:var(--normal);
}
#selection #blocleft .item .bouton {
    width:100%;
    height:35px;
    }

#selection #blocright {
    width:400px;
    height:335px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
}

#selection #blocright .promotion {
    width:390px;
    height:120px;
    padding:10px;
    background:#ffffff;
    border-radius:10px;
    background-image: url(/img/promotion.svg);
    background-size:initial;
    background-repeat:no-repeat;
    background-position-y:-20px;
    background-position-x:-20px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    }

#selection #blocright .bestseller {
    width:390px;
    height:120px;
    padding:10px;
    background:#ffffff;
    border-radius:10px;
    background-image: url(/img/bestseller.svg);
    background-size:initial;
    background-repeat:no-repeat;
    background-position-y:-20px;
    background-position-x:-20px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    }
#selection #blocright .stitre {
    width:100%;
    margin-top:10px;
    font-size:1.6em;
    color:var(--normal);
    display:flex;
    justify-content:flex-end;
    }
#selection #blocright .titre {
    width:100%;
    margin-top:0px;
    font-size:2.2em;
    font-weight:bold;
    color:var(--normal);
    display:flex;
    justify-content:flex-end;
    }
#selection #blocright .bouton {
    width:120px;
    margin-top:20px;
    height:35px;
    background:var(--surface);
    border-radius:6px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.5em;
    color:#ffffff;
}
@media (max-width: 1500px) {
    #selection #blocright {width:100%;height:auto;}
}

@media (max-width: 1000px) {
    #selection {width:98%}
    #selection #blocleft {width:100%;column-gap:0px;flex-wrap:wrap}
    #selection #blocleft .item {margin-bottom:10px;width:calc(24% - 20px)}
    #selection #blocright {width:100%;height:auto;}
    #selection #blocright .promotion, #selection #blocright .bestseller {width:95%;margin-bottom:10px;}

}

@media (max-width: 700px) {
    #selection #blocleft .item {width:calc(48% - 20px);}
}

/* NOS MARQUES */
#marque {
    position:relative;
    width:100%;
    max-width:1800px;
    height:120px;
    display:flex;
    justify-content:center;
}

#marque .container {
    position:relative;
    width:92%;
    margin-left:auto;
    margin-right:auto;
    height:120px;
    overflow:hidden;
        }

#marque .container .liste {
    width: 3360px;
    height:120px;
    display:flex;
}

#marque .container .liste .element {
    float:left;
    width:120px;
    padding-left:10px;
    padding-right:10px;
    background-color:#FFFFFF;
    height:120px;
    text-align:center;
       
}

#marque .selecteur_left, #nouveautes .selecteur_left {
    position:absolute;
    top:calc(50% - 20px);
    height:32px;
    width:32px;
    left:1%;
    background-image: url(/img/arrow_left.svg);
    background-size:contain;
    z-index:1;
      
 }

#marque .selecteur_left:hover, #nouveautes .selecteur_left:hover  {
    opacity:0.6;
}

#marque .selecteur_right, #nouveautes .selecteur_right  {
    position:absolute;
    top:calc(50% - 20px);
    height:32px;
    width:32px;
    right:1%;
    background-image: url(/img/arrow_right.svg);
    background-size:contain;
    z-index:1;
}

#marque .selecteur_right:hover, #nouveautes .selecteur_right:hover {
    opacity:0.6;
}


/* NEWSLETTER */
#newsletter {
    position:relative;
    margin-top:40px;
    margin-bottom:40px;
    width:100%;
    height:280px;
    background-image: url(/img/newsletter.svg);
    background-size:cover;
    display:flex;
    flex-direction:column;
    align-items:center;
}

#newsletter .bulletin {
    position:absolute;
    left:80px;
    top:40px;
    width:180px;
    height:180px;
    background-image: url(/img/bulletin.svg);
    background-size:contain;
}

#newsletter .texte1 {
    margin-top:20px;
    width:100%;
    font-size:2.6em;
    color:#ffffff;
    display:flex;
    justify-content:center;
}
#newsletter .texte2 {
    margin-top:10px;
    width:100%;
    font-size:3.6em;
    font-weight:bold;
    color:#ffffff;
    display:flex;
    justify-content:center;
    text-align:center;
}
#newsletter .email {
    margin-top:10px;
    width:90%;
    max-width:800px;
    height:40px;
    display:flex;
    justify-content:center;
}
#newsletter .blocvalidation {
    margin-top:20px;
    width:90%;
    max-width:800px;
    height:40px;
    display:flex;
    }

#newsletter .blocvalidation .autorisation {
    width:calc(100% - 220px);
    margin-right:20px;
    height:40px;
    display:flex;
    align-items:center;
}
#newsletter .blocvalidation .autorisation .checkbox {
    margin-left:20px;
    width:40px;
}
#newsletter .blocvalidation .autorisation .texte {
    width:calc(100% - 60px);
    font-size:1.2em;
    font-weight:bold;
    color:var(--normal);
}
#newsletter .blocvalidation .bouton {
    width:200px;
    height:40px;
    background:#ffffff;
    border-radius:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.4em;
    font-weight:bold;
    color:var(--normal);
}
#newsletter .blocvalidation .bouton:hover {
    cursor:pointer;
    opacity:0.8;
}

@media (max-width: 1000px) {
    #newsletter {height:400px}
    #newsletter .bulletin {display:none;}
    #newsletter .blocvalidation {flex-wrap:wrap}
    #newsletter .blocvalidation .autorisation {width:98%;}
    #newsletter .blocvalidation .bouton {margin-left:calc(50% - 100px);margin-top:20px}
}

/* NOUVEAUTES */


#nouveautes {
    position:relative;
    width:100%;
    max-width:1800px;
    height:370px;
    display:flex;
    justify-content:center;
     }

#nouveautes .container {
    position:relative;
    width:92%;
    margin-left:auto;
    margin-right:auto;
    height:332px;
    overflow:hidden;
 }

#nouveautes .container .liste {
    width: 2000px;
    height:332px;
    display:flex;
    column-gap:20px;
}

#nouveautes .container .liste .item {
    width:220px;
    padding:10px;
    height:310px;
    background:#ffffff;
    border:1px solid var(--subtle2);
    box-shadow: 0px 0px 20px 0px #EBEBEB;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
}
#nouveautes .container .liste .item .image {
    width:100%;
    height:150px;
}
#nouveautes .container .liste .item .titre {
    width:100%;
    margin-top:10px;
    height:60px;
    font-size:1.4em;
    font-weight:bold;
    color:var(--normal);
}
#nouveautes .container .liste .item .apartirde {
    width:100%;
    margin-top:10px;
    height:20px;
    font-size:1.1em;
    color:var(--normal);
}
#nouveautes .container .liste .item .prix {
    width:100%;
    height:35px;
    font-size:2.0em;
    font-weight:bold;
    color:var(--normal);
}
#nouveautes .container .liste  .item .bouton {
    width:220px;
    height:35px;
   }


/* AVIS VERIFIES  */
#avis {
    position:relative;
    width:100%;
    padding:40px 0px;
    max-width:1800px;
    height:180px;
    display:flex;
    justify-content:center;
}


/* PRESSE */

#presse {
    position:relative;
    width:100%;
    max-width:1400px;
    min-height:180px;
    display:flex;
    flex-wrap:wrap;
    column-gap:20px;
    justify-content:space-around;
    }

#presse  .item {
    width:140px;
    height:140px;
    display:flex;
    align-items:center;
    justify-content:center;

}

/* BLOG  */
.card-container {
    display: flex;
    margin-bottom:40px;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .card {
    width: 28%;
    margin-bottom:10px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid #BDBDBD;
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px rgba(171, 172, 172, 0.40);
    flex-direction: column;
  }

   .content {
    padding: 15px; /* Ajoute une marge intérieure pour le titre, l'extrait et le bouton */
  }

h4 {
    font-size:1.4em;
}

  .text-blog {
    color: #4A4A4A;
    font-size: 1.3em;
    font-style: normal;
    font-weight: 400;
   
  }

  .bouton-container {
      width:100%;
      display:flex;
      justify-content:center;
  }

  .bouton-blog {
    display: flex;
    margin-top: 1em; /* Réduire l'espace entre l'extrait et le bouton */
    font-size: 1.4em;
    width: 50%;
    padding: 8px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: 2px solid #3AACAC;
    background: rgba(110, 223, 218, 0.30);
	cursor: pointer;
  }

  .thumbnail {
    width: 100%;
    height: auto; /* Assure la proportion correcte de l'image */
    border-bottom: 1px solid #BDBDBD; /* Ajoute une bordure en bas de l'image */
  }

@media (max-width: 1000px) {
   .card {width: 90%;}
}