@font-face {
    font-family: 'LEMONMILK';
    src: url('./fonts/LEMONMILK-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'LEMONMILKM';
    src: url('./fonts/LEMONMILK-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'LEMONMILKR';
    src: url('./fonts/LEMONMILK-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LEMONMILKB';
    src: url('./fonts/LEMONMILK-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.paletisation_back{
    background: none !important;
}

.icone-feuille {
    width: 20px;
    height: 20px;
    margin-right: 8px; /* petit espace avant le texte */
    vertical-align: middle;
  }
  


.palette1   .fiches_consommacteurs_filtration{ color: #a8a8a8; }

.palette2  .fiches_consommacteurs_filtration { color: #a63a3a; }

.palette3  .fiches_consommacteurs_filtration { color: #a0639c; }

.palette4  .fiches_consommacteurs_filtration { color: #8064a1; }

.palette5  .fiches_consommacteurs_filtration { color: #6376a1; }

.palette6  .fiches_consommacteurs_filtration { color: #6376a1; }

.palette7  .fiches_consommacteurs_filtration { color: #63a178; }

.palette8  .fiches_consommacteurs_filtration { color: #7fa164; }

.palette9  .fiches_consommacteurs_filtration { color: #a18963; }

.palette10 .fiches_consommacteurs_filtration { color: #a16364; }






.palette1   .bspc-action-wrapper{ background-color: #a8a8a8; }

.palette2  .bspc-action-wrapper { background-color: #a63a3a; }

.palette3  .bspc-action-wrapper { background-color: #a0639c; }

.palette4  .bspc-action-wrapper { background-color: #8064a1; }

.palette5  .bspc-action-wrapper { background-color: #6376a1; }

.palette6  .bspc-action-wrapper { background-color: #6376a1; }

.palette7  .bspc-action-wrapper { background-color: #63a178; }

.palette8  .bspc-action-wrapper { background-color: #7fa164; }

.palette9  .bspc-action-wrapper { background-color: #a18963; }

.palette10 .bspc-action-wrapper { background-color: #a16364; }





.palette1   + .wrap-items .list-elements-item{ color: #a8a8a8; border: #a8a8a8; }

.palette2  + .wrap-items .list-elements-item { color: #a63a3a; border: #a63a3a;}

.palette3  + .wrap-items .list-elements-item { color: #a0639c; border: #a0639c;}

.palette4  + .wrap-items .list-elements-item { color: #8064a1; border: #8064a1 }

.palette5  + .wrap-items .list-elements-item { color: #6376a1; border: #6376a1 }

.palette6  + .wrap-items .list-elements-item { color: #6376a1; border: #6376a1 }

.palette7  + .wrap-items .list-elements-item { color: #63a178; border: #63a178 }

.palette8  + .wrap-items .list-elements-item { color: #7fa164; border: #7fa164 }

.palette9  + .wrap-items .list-elements-item { color: #a18963; border: #a18963 }

.palette10 + .wrap-items .list-elements-item { color: #a16364; border: #a16364 }


.palette1   + .wrap-items .list-elements-item .icone-feuille{ fill: #a8a8a8; }

.palette2  + .wrap-items .list-elements-item .icone-feuille { fill: #a63a3a;}

.palette3  + .wrap-items .list-elements-item .icone-feuille { fill: #a0639c;}

.palette4  + .wrap-items .list-elements-item .icone-feuille { fill: #8064a1;}

.palette5  + .wrap-items .list-elements-item .icone-feuille { fill: #6376a1;}

.palette6  + .wrap-items .list-elements-item .icone-feuille { fill: #6376a1;}

.palette7  + .wrap-items .list-elements-item .icone-feuille { fill: #63a178;}

.palette8  + .wrap-items .list-elements-item .icone-feuille { fill: #7fa164;}

.palette9  + .wrap-items .list-elements-item .icone-feuille { fill: #a18963;}

.palette10 + .wrap-items .list-elements-item .icone-feuille { fill: #a16364;}




.fiches_consommacteurs_filtration{
    font-family: 'LEMONMILKB';
    font-size: 1.5vw;
    margin-left: 10%;
    margin-top: 4%;
    margin-bottom: 2%;
}

.eco-title15{
    font-family: 'LEMONMILKB';
    color: white;
    font-size: 1.5vw;
    width: 30vw;
}

.cliquer_pour_adherent{
    font-family: "Quicksand";
    width: 35vw;
    margin-left: -46%;
    margin-bottom: 4% !important;
}

.somme_nous{
    font-family: 'LEMONMILKB';
    font-size: 1.2vw;
}

.eco-video15 a{
    font-family: "Quicksand";
}

.nos_docu_eco{
    font-family: 'LEMONMILKB';
    color: white;
    font-size: 1.2vw;
}

.eco-intro15 p{
    font-family: "Quicksand";
}

.eco-prestation10 p{
    font-family:  "Quicksand";
    font-size: 1vw;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
  }

  .eco-prestation10 p a{
    color: white;
  }


/*https://lereseaucocci.fr/wp-content/uploads/2020/12/logoCOCCI-e1591780926815.png*/

/* Exemple d'application  */
.logo {
    font-family: 'LEMONMILKB'!important;
}

/* Assure qu'on peut afficher un menu qui dépasse visuellement le header */
.cocci-topbar,
.cocci-topbar__inner,
.cocci-topbar__nav {
  overflow: visible !important;
}

/* Le menu du header peut rester en flex */
.cocci-topbar__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;              /* si c'est déjà le cas, on garde */
  align-items: center;
  gap: 24px;                  /* optionnel : espace entre items */
}

/* Chaque item de niveau 1 doit être un conteneur de positionnement */
.cocci-topbar__menu > li {
  position: relative;
}

.sub-menu{
    display: none !important;
    position: absolute !important;
}

body {
    background: red !important;
}




.bspc-section {
    background-color: #7e957f;
    padding: 40px 0 20px;
    width: 100%;
  }
  
  .container22 {
    width: 80%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3vw;
    justify-content: center;
    height: 13vw;
  }
  
  .logo {
    color: white;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
  }
  
  /* Menu Styles */
  .menu10 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .menu10 a {
    padding: 10px 14px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid white;
    transition: background 0.3s, color 0.3s;
    font-family: 'Quicksand';
    text-decoration: none !important;
  }

  .menu10 a:hover{
    color: #576557;
    background-color: white;
  }
  
  .menu a:hover {
    background-color: white;
    color: #7e957f;
  }



/* Général */
#page-header,
#consommacteur-introduction {
    padding: 60px 20px;
    color: #fff;
    box-sizing: border-box;
}

#page-header {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#page-header .header-main-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #fff;
}

#page-header .wrap-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#page-header .main-logo img {
    max-height: 150px;
    max-width: 200px;
    object-fit: contain;
}

#page-header .other-logo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

#page-header .other-logo-item img {
    height: 60px;
    width: auto;
}

/* Introduction */
#consommacteur-introduction {
    background-color: var(--secondary-theme-color);
    color: #333;
}

#consommacteur-introduction .container {
    max-width: 1200px;
    margin: auto;
}

#consommacteur-introduction .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#consommacteur-introduction h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: bold;
    color: #222;
}

#consommacteur-introduction p {
    max-width: 700px;
    margin: auto;
    font-size: 1.1rem;
}

/* Vidéo */
#consommacteur-introduction .wrap-video {
    margin-top: 30px;
    width: 100%;
    max-width: 800px;
}

/* Section infos complémentaires */
.consommacteur-more-info {
    padding: 60px 20px;
    background: #fff;
    text-align: center;
}

.consommacteur-more-info .box {
    margin-bottom: 40px;
}

.consommacteur-more-info h2 {
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.other-file-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.other-file-item {
    text-decoration: none;
    color: inherit;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.other-file-item .round-icon {
    background: var(--primary-theme-color);
    color: white;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 10px;
}

.certificate-box .certificate-list img {
    max-height: 60px;
    margin: 10px;
}


#page-header > div.wrap-logos > div.main-logo{
    width: 15vw;
    height: 15vw;
    background: white;
    justify-content: center;
    align-items: center;
    display: flex;
}

#page-header{
    min-height: unset !important;
    background-position: unset;
    align-items: unset;
    flex-direction: row-reverse;
    justify-content: left !important;
    padding: unset;
}

#page-header .header-main-title{
    margin-bottom: unset;
}

.header-main-title{
    margin-top: unset !important;
}

#page-header .wrap-logos{
    align-items: end;
    flex-direction: unset;
    
}

#page-header > div.header-main-title.col-12{
    max-width: 50vw;
    text-align: left;
    line-height: 3vw;
}

.term-content{
    width: 80%;
    margin-bottom: 2vw;
    font-family: 'Quicksand';
    
}

.bspc-action-title{
    font-family: 'LEMONMILKB';
    color: #576557;
}

.bspc-action-image{
    background-color: white;
    padding: 2vw;
}

.bspc-action-text{
    padding: 2vw;
}

.bspc-action-text p{
    font-family: 'Quicksand';
    color: white;
}

.bspc-action-coup-coeur{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 3VW;
    background-color: transparent !important;
}

.bspc-action-wrapper{
    background-color: #576557;
}

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

.wrap-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 20px 0;
    margin-bottom: 2vw;
    margin-left: 10%;
  }
  
  .list-elements-item {
    padding: 6px 12px;
    border: 2px solid #707070;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #f3f4f6;
    color: #707070;
    transition: all 0.3s 
ease;
    font-family: "quicksand";
  }
  
  .list-elements-item:hover {
    background-color: #ddd;
  }
  
  .list-elements-item.active {
    background-color: #707070;
    color: #fff;
    border-color: #707070;
  }
  




  



  /* Exemple d'application */
.logo {
    font-family: 'LEMONMILKB', sans-serif;
}



body{
    background-color: #EBECE6 !important;
}


/* Section Style */
.bspc-section {
    background-color: #7e957f;
    padding: 40px 0 20px;
    width: 100%;
  }

  
  .logo {
    color: white;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
  }
  
  /* Menu Styles */
  .menu10 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .menu10 a {
    padding: 10px 14px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid white;
    transition: background 0.3s, color 0.3s;
    font-family: 'Quicksand';
    text-decoration: none !important;
  }
  
  .menu a:hover {
    background-color: white;
    color: #7e957f;
  }





.lien-clique {

    background-color: red !important;

}

#contenu {
            display: none;
        }

.vider_le_filtre{
    display: flex;
    justify-content: center;
    justify-content: center;
    border-color: black;
    border-radius: 7px;
    color: gray;
    border: none;
    box-shadow: 0px 0px 5px 1px rgb(212, 212, 212);
    width: 7vw;
    height: 2vw;
    cursor: pointer;
    margin-top: 7vw;
}

.pagination{
    float:left;
    width:100%;
}
.botoom_link{
    float:left;
    width:100%;
}
.content{
float:left;
    width:100%;
}
ul {
    list-style: none;
    float:left;
    margin:0;
    padding: 0;
}
.lapage{
    list-style: none;
    float: left;
    margin-right: 16px;
    margin-left: 16px;
    margin-bottom: 16px;
    border:solid 1px #dddddd;
    color: black;
    background-color: #B4B4B4;
    width: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 33px;
    width: 2.5vw;
    height: 2.5vw;
    cursor: pointer;
}



.laplage:hover{
    color:#FF0084;
    cursor: pointer;
}

.icon_gestion_liste{
    scale: 0.7;
    cursor: pointer;
}

.vidange_filtre{
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    border: none;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 5px 1px rgb(212, 212, 212);
    align-self: center;

}


#pagination{
    width: 100%;
    text-align: center;
    margin-bottom: 3vw;
}

.liens_pagination_filtre{
    margin-right: 0.2vw;
    display: inline-block;
    width: 3vw;
    height: 3vw;
    border-radius: 100%;
    background-color: black;
    color: white;
    padding-top: 0.6vw;
    text-decoration: none;
}

.liens_pagination_filtre:hover{
    margin-right: 2vw;
    display: inline-block;
    width: 3vw;
    height: 3vw;
    border-radius: 100%;
    background-color: black;
    color: white;
    padding-top: 0.6vw;
    text-decoration: none;
}


.active-link {
    background-color: #FFFFFF !important;
    color: black !important;
}


.ecriture{
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 1vw;
}


.pager{
   display: inline-block;
   text-decoration: none;
   color: #006cb3;
   padding: 10px 20px;
   border: thin solid #d4d4d4;
   transition: all 0.3s;
   font-size: 18px;
}
 
.pager.active{
   background-color: #0d81cd;
   color: #fff;
}
.page-info{
   margin-top: 90px;
   font-size: 18px;
   font-weight: bold;
}
 
.pagination{
   margin-top: 20px;
}
.content p{
   margin-bottom: 15px;
}
.page-numbers{
   display: inline-block;
}


.accordion{
  width: 900px;
  overflow: hidden;
}
.accordion div:not(:last-child){
   border-bottom: 1px solid #ccc;
}
.accordion > div button{
    border: none;
    outline: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  transition: 100ms ease;
    width: 100%;
  padding:10px 20px;
  font-size: 1.3vw;
  cursor: pointer;
  height: 3vw;
  background-color: white;
}

.q{
    padding-left: 0.5vw;
}
.accordion > div button i{
  transition: 200ms ease;
}
.accordion > div{
  overflow: hidden;
  transition: 300ms ease;
}
.accordion > div p{
  margin: 10px;
  font-size: 18px;
}




.div_bouton_resultats_rechercher_fec{
    display: flex;
    justify-content: center;
    padding-bottom: 2vw;
}

.bouton_resultats_rechercher_fec{
    height: 3vw;
    background-color: black;
    color: white;
    border: none;
    margin-top: 7vw;

}


.titre_spe{
    font-family: 'DM Serif Text', serif;
}

.boutons_navigation{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7vw;
    margin-top: -2vw;
}


.bouton_naviguer{
    display: flex;
    height: 3.5vw;
    width: 20vw;
    border-radius: 33px;
    justify-content: center;
    align-items: center;
    font-size: 1.3vw;
    border: none;
    background-color: white;
    box-shadow: 0px 0px 5px 1px rgb(212, 212, 212);
    cursor: pointer;
}

.container {
  display: flex;
  align-items: center;
}

/* accordion */

.accordion {
  width: 27vw;
  background: white;
  color: black;
  overflow: hidden;
}

.accordion-header {
  border-bottom: 2px solid #ccc;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.accordion-header-content {
  overflow: hidden;
  position: relative;
  z-index: 9;
  padding-left: 4vw;
  height: 3vw;
}

.accordion-header-content-label {
  color: #ccc;
}


.accordion-content {
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.accordion-content-text {
  color: #ccc;
}

/* accordion open effect */

details summary {
  cursor: pointer;
  transition: all 225ms ease-out;
  position: relative;
}

details[open] summary {
  margin-bottom: 100px;
  overflow: hidden;
  position: relative;
  background: #ccc;
}

.formule2{
    margin-top: -7vw;
}


#nom_liste{
    margin-top: 7vw;
}


details[open] .accordion {
  width: 27vw;
}

details[open] .accordion-content {
  padding: 10px;
  margin-top: -100px;
  width: 30vw;
}

details[open] .accordion-header-content-label {
  color: black;
}

/* remove marker */

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

/* custom marker */

summary::after {
    content: '+';
    position: absolute;
    top: 0.7vw;
    right: 25vw;
    font-size: 1.5vw;
    font-weight: 900;
}

details[open] summary::after {
  content: '-';
  font-size: 2.2vw;
  margin-top: -0.5vw;
}


.text_biblio{
    width: 50vw;
    margin-top: 6vw;
}

.image_picto_fec{
    width: 1vw;
}

body{
    margin: 0;
    padding: 0;
}

.picto_picto{
    width: 100%;
    object-fit: contain;
    scale: 1.5;
}

.enregistrer_fec_dans_list{
    margin-top: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15vw;
    height: 3vw;
    border-radius: 7px;
    border: none;
    cursor: pointer;
}

.enregistrer_fec_dans_list:hover{
    color: white;
    background-color: black;
}


.popup-container {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);
    background-color: rgba(21, 17, 17, 0.61);
    display: flex;
    align-items: center;
    
}
.popup-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 27%;
    border-radius: 10px;
}
.popup-content p{
    font-size: 1.2vw;
	margin-top: 0.8vw;
}
.popup-content a.close{
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background: none;
    padding: 0;
    margin: 0;
    text-decoration:none;
}

.popup-content a.close:hover{
  color:#333;
}

.popup-content span:hover,
.popup-content span:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.popup-container:target{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  
}

.popup-container h3{
  margin:10px;
}
/*End popup styles*/

/* Additional styles */
.popup-style-2{
    visibility: hidden;
    transform: scale(0);
  
}

.popup-style-2:target{
  transform: scale(1);
}








.image_fec{
    width: 100%;
    object-fit: contain;
}


.header_user_menu{
    height: 3vw;
    
    width: 19vw;
    box-shadow: 0px 0px 5px 1px rgb(212, 212, 212);
    border-radius: 8.5px;
    justify-content: center;
    align-items: center;
    display: flex;
    color: black;
    font-size: 1.3vw;
    font-weight: 600;
    background-color: white;
    
}

.menuutilisateur{
    display: flex;
    gap: 2.5vw;
    margin-top: 7vw;
    justify-content: center;
    align-items: center;
    margin-bottom: 5vw;
    z-index: 10;
}

.bande_grise{
    width: 100vw;
    height: 38vh;
    border: none;
    background-color: #F9D3A5;
    z-index: -10;
    margin-top: -3.3vw;
    position: absolute;
    display: none;
}

.les_bare_de_recherche{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -6vw;
}


#mypage{
    text-decoration: none;
}

#invoice{
    text-decoration: none;
}

#document{
    text-decoration: none;
}

.section1{
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    background-color: #F9D3A5;
    height: 22vw;
    margin-top: 5vw;
}

.recherche{
    display: flex;
    flex-direction: column;
}
.les_recherches{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5vw;
}

.les_entres{
    height: 3vw;
    width: 19vw;
    justify-content: center;
    align-items: center;
    display: flex;
    color: black;
    font-size: 1vw;
    background-color: white;
    border: none;
    padding-left: 1.5vw;
}


.les_entres2{
    height: 3vw;
    width: 19vw;
    justify-content: center;
    align-items: center;
    display: flex;
    color: black;
    font-size: 1.3vw;
    background-color: white;
    border: none;
    margin-bottom: 5vw;
    margin-top: 7vw;
    padding-left: 1.5vw;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


.les_entres:focus{
    outline: none;
}

.les_entres2:focus{
    outline: none;
}

.la_liste_des_fec{
    width: 30vw;
    max-height: 10vw;
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: 10.5vw;
    border: none;
    border-color: #f3f3f3;
   background-color: #ffffff;
    overflow-y: scroll;
	padding-left: 1vw;
    border: none;
}

.la_liste_des_fec a{
    text-decoration: none !important;
    height: 10vw;
    margin-top: 1vw;
    border-bottom: solid 1px;
    border-color: #e4e4e4;
    margin-left: 1vw;
    font-size: 1.2vw;
    color: black;
}



.la_liste_des_fec option{
    text-decoration: none;
    height: 1.5vw;
    margin-top: 1vw;
    border-bottom: solid 1px;
    border-color: #e4e4e4;
    margin-left: 1vw;
    font-size: 1.2vw;
    color: black;
}

.tous_les_in{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5vw;
    margin-top: 5vw !important;
    position: absolute;
}


.les_in{
    display: flex;
    gap: 0;
}


option{
    width: 50vw;
}

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

.div_patch_tri{
    display: flex;
    gap: 1.2vw;
    align-items: center;
    padding-top: 0.5vw;
    height: 3vw !important;
}


.resultats_recherche{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8vw;
}

.reponse_resultats{
    text-align: center;
    font-size: 1.2vw;
}

.sections_resultats_fec{
    width: 100%;
    height: 90vw;
    display: flex;
    gap: 6vw;
    align-items: flex-start;
    margin-top: 5vw;
    padding-left: 8vw;
}

.espace_tri{
    width: 10vw;
    display: flex;
    flex-direction: column;
    gap: 3.5vw;
    margin-bottom: 5vw;
}

.current-menu-item{
    margin-top: 1vw;
}

.home-logo{
    margin-top: -2vw;
}

.famille{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.2vw;
}
.nom_famille{
    font-weight: 900;
    font-size: 1.2vw;
    color: #576557;
}

.famille_selectionne{
    display: flex;
    gap: 1vw;
    align-items: center;
}


.contour_bouton{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.2vw;
    height: 1.2vw;
    border: solid 1px;
    border-radius: 5px;
    padding: 0.1vw;
    border-color: black !important;
}

.choix{
    display: flex;
    width: 0.6vw;
    height: 0.6vw;
    border-radius: 3px;
    border: none;
}

.choix:focus{
    outline: none;
}

button.selectionner{
    background-color: black;
    border: none;
}

.position_text{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.8vw;
}

.ecologie{
    width: 6.5vw;
    background-color: #C8EEC1;
    border-radius: 33px;
    height: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8vw;

}



.seconde_vie{
    width: 6.5vw;
    background-color: #B9A99A;
    border-radius: 33px;
    height: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8vw
}

.solidaire{
    width: 6.5vw;
    background-color: #FFE3FB;
    border-radius: 33px;
    height: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8vw;
}

.zero_dechet{
    width: 6.5vw;
    background-color: #B4B4B4;
    border-radius: 33px;
    height: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8vw;
}

.resultats_fec{
    width: 74vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4vw;
    flex-wrap: wrap;
    margin-left: 6vw;
    min-height: 95vw;
}

.fec{
    display: flex;
    justify-content: center;
    min-width: 26vw;
    margin-bottom: 10vw;
}

.img_fec{
    display: flex;
    width: 30vw;
    height: 20vw;
    border-radius: 20px;
    
}

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

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

.nav-mobile{
    margin-left: 3vw;
    margin-top: 5vw;
    display: flex;
    flex-direction: column;
}

.taille_image{
    width: 100%;
    object-fit: contain;
	border-radius: 33px;
}

.preference{
    display: flex;
    align-items: flex-start;
    background-color: transparent;
    margin-right: 0;
    margin-top: 1vw;
    margin-right: 1vw;
    flex-direction: column;
    gap: 0.5vw;
	position: absolute;
	margin-left: 22vw;
}

.coup_de_coeur{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background-color: white;
    border: none;
}

.patch_coup_coeur{
    scale: 1.5;
}

.info_fec{
    width: 25vw;
    height: 12vw;
    background-color: white;
    position: absolute;
    margin-top: 18vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

footer{
    margin-top: 10vw !important;
}

.type_fec{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9vw;
    height: 1.5vw;
    background-color: white;
    border-radius: 33px;
    font-size: 0.8vw;
    top: -3vw;
    position: absolute;
    font-family: 'Quicksand';
}

.fleche{
    scale: 1.5;
}


.secteur_fec{
    font-size: 1vw;
    margin-top: 1vw;
    text-align: center;
}

.pacth{
    display: flex;
    gap: 0.5vw;
    margin-top: 1.2vw;
    margin-bottom: 0.5vw;
    flex-wrap: wrap;
    width: 24vw;
    align-self: flex-start;
    margin-left: 1.5vw;
}







@media screen and (max-width: 700px) {
    
    .section1{
        margin-top: 55vw;
        height: 76vw;
    }
    
    .boutons_navigation{
        display: flex;
        flex-direction: column;
        margin-top: -50vw;
        position: static;
        margin-bottom: 26vw;
    }

    .les_bare_de_recherche{
        margin-top: -95vw;
    }

    .les_in{
        margin-top: 3vw;
    }

    .bouton_naviguer {
        width: 64vw;
        height: 8vw;
        font-size: 3.5vw;
    }

    .accordion{
        margin-top: 16vw;
    }

    .ecriture7 {
        font-family: 'Source Sans 3', sans-serif;
        font-weight: 400;
        font-size: 3vw;
    }

    .text_biblio {
        width: 84vw;
    }

    .les_entres2 {
        height: 10vw;
        width: 55vw;
        box-shadow: 0px 0px 5px 1px rgb(212, 212, 212);
        border-radius: 8.5px;
        justify-content: center;
        align-items: center;
        display: flex;
        color: black;
        font-size: 4vw;
        background-color: white;
        border: none;
        margin-bottom: 5vw;
        margin-top: 7vw;
        padding-left: 1.5vw;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .accordion-clicked-outside {
        margin-top: 0.1vw !important;
    }

    .bouton_resultats_rechercher_fec {
        height: 10vw;
        border-radius: 9px;
        background-color: black;
        color: white;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border: none;
        margin-top: 7vw;
    }

    .tous_les_in {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-top: 122.5vw !important;
        position: static;
        flex-direction: column;
    }

    .la_liste_des_fec {
        width: 83vw;
        max-height: 58vw;
        display: flex;
        flex-direction: column;
        position: static;
        margin-top: -5vw;
        border: none;
        border-color: #f3f3f3;
        background-color: #ffffff;
        overflow-y: scroll;
        padding-left: 1vw;
        border: none;
        border-radius: 7px;
        box-shadow: 0px 0px 5px 1px rgb(212, 212, 212);
        margin-bottom: -10vw;
    }

    .sections_resultats_fec {
        width: 98vw;
        height: auto;
        display: flex;
        gap: 1vw;
        align-items: flex-start;
        margin-top: 83vw;
    }

    footer{
        margin-top: 100vw;
    }
    g{
        height: 236px;
        margin-top: 8vw;
        display: flex;
        flex-direction: column;
        gap: 16vw;
        width: 89vw;
    }

    .accordion > div button{
        font-size: 5vw;
        height: 10vw;
    }

    .accordion {
        overflow-anchor: none;
        width: 85vw;
    }

    .contour_bouton{
        width: 5.2vw !important;
        height: 5.2vw !important;
    }

    .choisir{
        width: 55vw !important;
    }

    .div_patch_tri{
        height: 9vw !important;
    }

    .les_entres{
        width: 84vw !important;
        height: 10vw !important;
        font-size: 4.5vw !important;
    }

    .la_liste_des_fec a {
        font-size: 3.5vw;
    }
}




.recherche{
    display: flex;
    flex-direction: column;
}
.les_recherches{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5vw;
}

.les_entres{
    height: 3vw;
    width: 19vw;
    justify-content: center;
    align-items: center;
    display: flex;
    color: black;
    font-size: 1.3vw;
    background-color: white;
    border: none;
    padding-left: 1.5vw;
}

.les_entres:focus{
    outline: none;
}



.les_in{
    display: flex;
    gap: 0;
}

.div_patch_tri2{
    display: flex;
    gap: 1.5vw;
    align-items: center;
}


option{
    width: 50vw;
}

.resultats_recherche{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reponse_resultats{
    text-align: center;
    font-size: 1.2vw;
}

.sections_resultats_fec{
    width: 98vw;
    height: auto;
    display: flex;
    gap: 1vw;
    align-items: flex-start;
    margin-top: 12vw;
}



.famille{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 2px;
}
.nom_famille{
    font-weight: 900;
    font-family: 'LEMONMILKB';
}

.famille_selectionne{
    display: flex;
    gap: 1vw;
    align-items: center;
}



.contour_bouton{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.2vw;
    height: 1.2vw;
    border: solid 1px;
    border-radius: 5px;
    border-color: black !important;
}

.choix{
    display: flex;
    width: 0.6vw;
    height: 0.6vw;
    border-radius: 3px;
    border: none;
}

.choix:focus{
    outline: none;
}

button.selectionner{
    background-color: black;
    border: none;
}

.position_text{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.8vw;
}

.ecologie{
    width: 7vw;
    background-color: #C8EEC1;
    border-radius: 33px;
    height: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Quicksand';

}

.ecologie2{
    border-radius: 33px;
    height: 1.5vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: 'Quicksand';
}

.seconde_vie{
    width: 7vw;
    background-color: #B9A99A;
    border-radius: 33px;
    height: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Quicksand';
}

.solidaire{
    width: 7vw;
    background-color: #FFE3FB;
    border-radius: 33px;
    height: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Quicksand';
}

.zero_dechet{
    width: 7vw;
    background-color: #B4B4B4;
    border-radius: 33px;
    height: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Quicksand';
}



.fec{
    display: flex;
    justify-content: center;
    min-width: 25vw;
    margin-bottom: 10vw;
}

.img_fec{
    display: flex;
    width: 25vw;
    height: 20vw;
    border-radius: 20px;
    
}

.taille_image{
    width: 100%;
    object-fit: cover;
}

.preference{
    display: flex;
    align-items: flex-start;
    background-color: transparent;
    margin-right: 0;
    margin-top: 1vw;
    margin-right: 1vw;
    flex-direction: column;
    gap: 0.5vw;
}

.coup_de_coeur{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background-color: white;
    border: none;
}

.patch_coup_coeur{
    scale: 1.5;
}

.fil_darian{
    font-size: 0.8vw;
    display: flex;
    gap: 0.5vw;
    align-self: flex-start;
    margin-left: 1.5vw;
    font-family: 'Quicksand';
}

.fleche{
    scale: 1.5;
}

.titre_fec{
    font-size: 1vw;
    font-weight: 900;
    align-self: flex-start;
    margin-top: 2px;
    margin-left: 1.5vw;
    font-family: 'LEMONMILKB';
}

.secteur_fec{
    font-size: 1vw;
    margin-top: 7px;
    align-self: flex-start;
    margin-left: 1.5vw;
    font-family: 'Quicksand';
}

.pacth{
    display: flex;
    margin-top: 1.2vw;
    margin-bottom: 0.5vw;
}



.resultat_fec_consommacteur{
    display: flex;
    gap: 2vw;
    flex-wrap: wrap;
    width: 80%;
    margin-left: 10%;
}












#espace-client{
            scale: 150%;
            margin-left: 86%;
            margin-top: -5vw;}


    @media (max-width:770px){
        #espace-client{
            scale: 150%;
            margin-left: 82%;
            margin-top: -6.5vw;}
    
    }

    @media (max-width:500px){
        #espace-client{
            scale: 150%;
            margin-left: 82%;
            margin-top: -10vw;
            }
    
    }

    @media (max-width:420px){
        #espace-client{
            scale: 150%;
            margin-left: 80%;
            margin-top: -12vw;}
    
    }

    @media (max-width:320px){
        #espace-client{
            scale: 150%;
            margin-left: 76%;
            margin-top: -15vw;}
    
    }








    .eco-header {
        padding: 40px 20px;
        background-size: cover;
        background-position: center;
        color: white;
      }
      .eco-header-content {
        max-width: 1200px;
        margin: auto;
      }
      .eco-title {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 30px;
      }
      .eco-logos {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        align-items: center;
      }
      .eco-logos img {
        max-height: 80px;
      }
      .eco-section {
        padding: 40px 20px;
        max-width: 1200px;
        margin: auto;
      }
      .eco-intro {
        margin-bottom: 30px;
      }
      .eco-video iframe {
        max-width: 100%;
        height: auto;
      }
      .eco-prestations {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
      }
      .eco-prestation {
        width: 150px;
        text-align: center;
      }
      .eco-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #e2e2e2;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        margin: auto;
        margin-bottom: 10px;
      }
      .eco-certifications {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: start;
      }
      .eco-certifications img {
        max-height: 60px;
      }

      .text_adherents_1{
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        padding-left: 20% !important;
        background: #576557;
        padding: 100px;
        color: white;
        margin-top: -90px;
      }

      .la_div_adherent h2{
        font-family: 'LEMONMILKB';
        color: #576557;
      }

      .la_div_adherent p{
        color: #576557;
        font-weight: 400;
        font-family: "Quicksand";
      }


      .image_adherent1{
        justify-content: center;
        display: flex;
        min-width: 300px;
        padding: 20px;
        background: white;
        height: 20vw;
        align-items: center;
      }

    .diagram-item-img{
        width: 150px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        border-radius: 15px;
      }

      .circle-diagram{
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        margin-left: -1%;
        gap: 2vw;
      }

      .la_div_cicle_de_vie{
        background-color: #576557;
        padding: 20px;
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -50px;
        padding-top: 130px;
        padding-bottom: 130px;
        font-family: 'LEMONMILKB';
        color: white;
      }

      .la_div_cicle_de_vie h2{
        font-family: 'LEMONMILKB';
        color: white;
        font-size: 1.5vw;
        margin-bottom: 30px;
      }

      .diagram-item h3{
        font-family: "Quicksand";
      }

      .div_de_div_image_fec{
        height: 450px;
        width: 450px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
      }

      .fiche-eco-details{
        display: flex;
        gap: 40px;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 80%;
        margin-left: 10%;
        margin-top: 3vw;
      }

      .icone_des_adherents2{
        display: flex;
        gap: 1.5vw;
      }

      .diagram-item{
        width: 150px;
        /* text-align: center; */
        justify-content: center;
        display: flex
    ;
        flex-direction: column;
        align-items: center;
      }

      .text_adherents_1 p{
        width: 80% !important;

      }

      .diagram-item p{
        display: none;
      }

      .diagram-item h3{
        color: white;
      }

      .details_info_adherents{
            display: flex;
            margin-bottom: 15px;
            flex-direction: column;
            align-items: center;
      }

      .presentation_adherent{
        padding-left: 20% !important;
      }

      .eco-logo-bspc15{
        width: 5vw;
    height: 5vw;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
      }

      .eco-logo-bspc15 img{
        width: 55%;
      }

      .eco-header-content15{
        display: flex;
    justify-content: center;
    padding-top: 3vw;
      }

      .partenaires12{
        gap: 3vw;
        align-self: end;
      }

      .eco-logos15{
        gap: 3vw;
      }

      #eco-introduction15{
        padding-left: 10%;
        padding-top: 9vw;
        padding-bottom: 5vw;
      }

      #eco-prestations15{
        width: 50%;
      }

      .eco-container15{
        width: 50%;
      }

      #eco-certifications15{
        padding-left: 10%;
      }



      .wrap-items2 {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 20px 0;
        margin-bottom: 5vw;
        justify-content: center;
    }
      
    .list-elements-item2 {
        padding: 6px 12px;
        border: 2px solid #707070;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        background-color: #f3f4f6;
        color: #707070;
        transition: all 0.3s ease;
        font-family: "quicksand";
        display: flex;
        align-items: center;
        gap: 6px;
    }
      
    .list-elements-item2:hover {
        background-color: #ddd;
    }
      
    .list-elements-item2.active {
        background-color: #707070;
        color: #fff;
        border-color: #707070;
    }

    .fiches_consommacteurs_filtration30{
        font-family: 'LEMONMILKB';
        color: #707070;
        font-size: 1.5vw;
        text-align: center;
        margin-top: 4%;
        margin-bottom: 2%;
    }

    .fec-caption h4{
        font-family: 'LEMONMILKB';
        color: #576557;
        font-size: 1vw;
    }
    

    .bspc-action-wrapper{
        display: flex;
    }







.input_reglage_consommacteur{
    width: 18vw;
    display: inline-block;
    border: none;
    padding-left: 1.5vw;
    height: 2vw;
}



.le_input_fichier_reglage {
    display: none; /* on cache l'input */
  }

  .label_input_fichier {
    display: inline-block;
    background-color: #7d927b;
    color: white;
    padding: 8px 14px;
    cursor: pointer;
    font-family: "Quicksand", sans-serif;
    font-size: 14px;
    transition: background 0.3s ease;
    height: 2vw;
    width: 9vw;
    text-align: center;
  }
  
  .label_input_fichier:hover {
    background-color: #6d826b;
  }
  
  .nom_fichier {
    font-family: "Quicksand", sans-serif;
    color: #333;
    font-size: 13px;
    margin-left: 10px;
  }





    /* Page container: 80% de largeur */
#bspc-page { width: 80vw; }
.bspc-wrap { font-family: "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#2b2f2b; }
.bspc-title { font-size:22px; font-weight:800; margin:0 0 12px; text-transform:uppercase; letter-spacing:.5px; }
.muted { opacity:.75; font-size:13px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid #2f3a2f; background:#e6eee6; cursor:pointer; border-radius:6px; font-weight:700; }
.btn.small { padding:6px 10px; font-size:13px; }
.btn.primary { background:#3f5a40; color:#fff; border-color:#3f5a40; }
.btn.ghost { background:#f2f4f2; }
.link { background:transparent; border:0; color:#2f5b3c; font-weight:700; cursor:pointer; padding:0; margin-top:8px; }
.save-msg { margin-top:10px; font-size:13px; }

.bspc-grid { display:grid; grid-template-columns: 1fr 1fr; gap:28px; }
.bspc-col.left, .bspc-col.right { padding:22px; border-radius:10px; border:1px solid #dfe4db; }

.bspc-block { margin:16px 0 18px; }
.bspc-block > label { display:block; font-weight:800; margin-bottom:8px; }
.bspc-input, .bspc-block textarea, .bspc-block select, .bspc-block input[type="url"] {
  width:100%; padding:4.5px 12px; border: none; background:#fff; font-size:14px;
}

.bspc-file-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bspc-file-row input[type="file"] { display:none; }
.bspc-file-row .btn { min-width:120px; }
.bspc-file-row .preview { display:flex; align-items:center; gap:10px; min-height:44px; }
.bspc-file-row .preview img { width:72px; height:48px; object-fit:cover; border-radius:6px; border:1px solid #cfd6c9; background:#fff; }
.bspc-file-row.small .preview img { width:60px; height:60px; }
.bspc-file-row .filename { font-size:12px; color:#556; }

.clonable-list .row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.clonable-list .row .drag { width:10px; height:10px; border-radius:50%; background:#829b84; opacity:.6; }
.clonable-list .row .preview { width:auto; }
.clonable-list .row .remove { background:transparent; border:0; color:#a33; font-weight:700; cursor:pointer; }

.two-cols { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px){ .bspc-grid { grid-template-columns:1fr; } .two-cols{grid-template-columns:1fr;} }

.bspc-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px; }

/* Accordéon */
.bspc-accordion .acc-item { border:1px solid #2f3a2f; margin:10px 0; background:#3e5341; color:#fff; overflow:hidden; }
.bspc-accordion .acc-toggle { width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:transparent; border:0; color:#fff; font-weight:800; cursor:pointer; }
.bspc-accordion .chev { transition:transform .2s ease; }
.bspc-accordion .acc-item.open .chev { transform:rotate(180deg); }
.bspc-accordion .acc-content { background:#f6f7f5; color:#2b2f2b; max-height:0; overflow:hidden; transition:max-height .25s ease; }
.bspc-accordion .acc-item.open .acc-content { max-height:600px; }
.bspc-accordion .acc-inner { padding:14px 16px; }

.bspc-contact-more { margin-top:24px; text-align:left; }
.bspc-contact-more h3 { font-size:16px; margin-bottom:10px; }


input[type="file"] {
    color: transparent; /* masque le texte */
  }


/* conteneur */
.bspc-select { position: relative; display:inline-block; width:100%; }

/* champ “affiché” */
.bspc-select__display{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:.6rem .8rem; border:1px solid #c8d3c8;
  background:#fff; cursor:pointer;
}

/* partie gauche (pastilles + libellé) */
.bspc-select__left{ display:flex; align-items:center; gap:8px; }

/* pastilles */
.bspc-select .swatch{
  width:18px; height:18px; border-radius:4px; border:1px solid rgba(0,0,0,.1);
}

/* caret */
.bspc-select .caret{ font-size:14px; color:#333; }

/* liste des options */
.bspc-select__list{
  position:absolute; top:calc(100% + 6px); left:0; width:100%; background:#fff;
  border:1px solid #c8d3c8; border-radius:6px; list-style:none; margin:0; padding:4px 0;
  max-height:260px; overflow:auto; box-shadow:0 8px 20px rgba(0,0,0,.08);
  display:none; z-index:10000;
}

/* ouvrir via classe */
.bspc-select.is-open .bspc-select__list{ display:block !important; }

/* option */
.bspc-option{ display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; }
.bspc-option:hover{ background:#f6f7f6; }

/* entête non cliquable */
.bspc-option.header{
  font-size:12px; color:#6b6b6b; cursor:default; padding:6px 10px; background:#fafbfa;
}

/* important : laisser dépasser le menu */
.bspc-block, .bspc-select { overflow:visible !important; }