.cc-navbar {
  background-color: rgba(0, 0, 0, 0.55);
  box-shadow: 1px 1px 3px rgba(255, 255, 255, 0.55);
}

#culture img {
  width: 320px; 
  height: 320px; 
  object-fit: cover;  
}

.fs-7 {font-size: 0.85rem;}
.fw-600 {font-weight: 600;}
.bg-violet {background-color: rgba(211, 39, 139, 0.55);}

.mtn-6 {
  margin-top: -7.5em;
}
.mtn-3 {
  margin-top: -3.5em;
}
.msn-3{
    margin-left: -3em;
}

.fw600 {font-weight: 600;}


.cercle{
  border-radius:50%;
  width:30px;
  height:30px;
  display: block;
}

/********************** Conteneur Nutri-Score *****************************/
.nutriscore {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 180px;
  margin: 0px auto;
  border-radius: 20px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.09);
}

/* Style général des items */
.nutriscore-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.6);
  background-color: #ddd;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Couleurs spécifiques pour chaque lettre */
.nutriscore-item:nth-child(1) {
  background-color: #4caf50; /* Vert */
}
.nutriscore-item:nth-child(2) {
  background-color: #8bc34a; /* Vert clair */
}
.nutriscore-item:nth-child(3) {
  background-color: #ffc107; /* Jaune */
}
.nutriscore-item:nth-child(4) {
  background-color: #ff9800; /* Orange */
}
.nutriscore-item:nth-child(5) {
  background-color: #f44336; /* Rouge */
}

/* Style pour la classe active */
.nutriscore-item.active {
  color: #fff;
  opacity: 1;
  transform: scale(1.15);
  border-radius: 6px;
}

/* Bordures arrondies aux extrémités */
.nutriscore-item:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.nutriscore-item:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/********************** FIN Conteneur Nutri-Score *****************************/

.frise {
  background-image: url('../img/frise.png');
  background-repeat: repeat-x;
  background-position: top, center;
}


.banner {
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner.webp') center center scroll no-repeat;
  background-size: cover;
  height: 100vh;
}

@supports (-webkit-touch-callout: none) {
  .banner {
      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url('../img/banner.webp') center top no-repeat scroll;
      background-size: auto 100vh;
  }    
}


.banner-embouteillage {
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), 
              url('../img/backimg1.webp') center center fixed no-repeat;
  background-size: cover;
  height: 500px;
}

/* Tablettes (≤ 1024px) */
@media (max-width: 1024px) {
  .banner-embouteillage {
    height: 400px;
    background-position: center top;
  }
}

/* Mobiles (≤ 768px) */
@media (max-width: 768px) {
  .banner-embouteillage {
    background-attachment: scroll !important;
    height: 300px;
    background-position: center top;
  }
}

/* Très petits écrans (≤ 480px) */
@media (max-width: 480px) {
  .banner-embouteillage {
    background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), 
            url('../img/backimg1-320.webp') center center scroll no-repeat;
    height: 480px;
    background-size: cover;
    background-position: center top;
  }
}


.banner-cannabis {
  background: rgb(255,255,255);
  background: url('../img/banner-cannabis.jpg') center center fixed no-repeat;
  background: url('../img/banner-cannabis.jpg') center center fixed no-repeat;
  background: url('../img/banner-cannabis.jpg') center center fixed no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
  background-size: cover;
  height: 500px;
}

.banner-transformation {
  background: rgb(255,255,255);
  background: -moz-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-baume.jpg') center center fixed no-repeat;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-baume.jpg') center center fixed no-repeat;
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-baume.jpg') center center fixed no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
  background-size: cover;
  height: 500px;
}

.banner-quisommesnous {
  background: rgb(255,255,255);
  background: -moz-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/duo.jpg') center center no-repeat;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/duo.jpg') center center no-repeat;
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/duo.jpg') center center no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
  background-size: cover;
  height: 780px;
}

.banner-solvivant {
  background: rgb(255,255,255);
  background: url('../img/sol-vivant.jpg') center center fixed no-repeat;
  background: url('../img/sol-vivant.jpg') center center fixed no-repeat;
  background: url('../img/sol-vivant.jpg') center center fixed no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
  background-size: cover;
  height: 500px;
}


.calque-ombrage-slide {
position: relative;
width: 100%;
z-index: 9;
background: rgb(164,147,147);
background: -moz-linear-gradient(0deg, rgba(164,147,147,0.6558998599439776) 0%, rgba(255,255,255,0) 40%);
background: -webkit-linear-gradient(0deg, rgba(164,147,147,0.6558998599439776) 0%, rgba(255,255,255,0) 40%);
background: linear-gradient(0deg, rgba(164,147,147,0.6558998599439776) 0%, rgba(255,255,255,0) 40%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a49393",endColorstr="#ffffff",GradientType=1);
}

/* création d'un texte avec 2 colonnes */

.article2c {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
  -moz-column-gap: 2em;
  -webkit-column-gap: 2em;
  -o-column-gap: 2em;
  column-gap: 2em;
  -webkit-column-rule-width: 1px;
  -webkit-column-rule-color: #000000;
  -webkit-column-rule-style: dotted;
  -moz-column-rule-width: 1px;
  -moz-column-rule-color: #000000;
  -moz-column-rule-style: dotted;
  -o-column-rule-width: 1px;
  -o-column-rule-color: #000000;
  -o-column-rule-style: dotted;
  column-rule-width: 1px;
  column-rule-color: #000000;
  column-rule-stysle: dotted;
}

.article3c {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  -o-column-count: 3;
  column-count: 3;
  -moz-column-gap: 3em;
  -webkit-column-gap: 3em;
  -o-column-gap: 3em;
  column-gap: 3em;
  -webkit-column-rule-width: 1px;
  -webkit-column-rule-color: #000000;
  -webkit-column-rule-style: dotted;
  -moz-column-rule-width: 1px;
  -moz-column-rule-color: #000000;
  -moz-column-rule-style: dotted;
  -o-column-rule-width: 1px;
  -o-column-rule-color: #000000;
  -o-column-rule-style: dotted;
  column-rule-width: 1px;
  column-rule-color: #000000;
  column-rule-stysle: dotted;
}

.article3c img {padding:0.6em 0 0.6em 0;}

/* Smartphone */
@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .article2c, .article3c {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    -o-column-count: 1;
    column-count: 1;
    -moz-column-gap: inherit;
    -webkit-column-gap: inherit;
    -o-column-gap: inherit;
    column-gap: inherit;
  }
}


/* iPad Portrait */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  .banner-arnica {
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-anica.jpg') center center no-repeat;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/backimg1.webp') center center no-repeat;
  width: 1024px;
  height: 500px;
  }

.banner-cannabis {
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-cannabis.jpg') center center  no-repeat;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-cannabis.jpg') center center  no-repeat;
  width: 1024px;
  height: 500px;
  }

.banner-transformation {
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-baume.jpg') center center  no-repeat;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-baume.jpg') center center  no-repeat;
  width: 1024px;
  height: 500px;
  }
}    


/* iPad Pro Paysage */
@media screen and (min-device-width: 481px) and (max-device-width: 1366px) and (orientation:landscape) {
  .banner-arnica {
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/backimg1.webp') center center no-repeat;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/backimg1.webp') center center  no-repeat;
  width: 1366px;
  height: 500px;
  }

  .banner-cannabis {
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-cannabis.jpg') center center  no-repeat;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-cannabis.jpg') center center  no-repeat;
  width: 1366px;
  height: 500px;
  }

  .banner-transformation {
  background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-baume.jpg') center center no-repeat;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(0,0,0,0.50) 60%), url('../img/banner-baume.jpg') center center no-repeat;
  width: 1366px;
  height: 500px;
  }
} 





.kaki {background-color: #273119;}
.grey {background-color: #dfdfdfe0;}
a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
  }

  a:hover {
    color: inherit;
    text-decoration: none;
  }

/* ADMIN */

.bulle p {margin-bottom:inherit;}