
.hide {
    display:none!important;
}


.section_pommes-poires .container {
    max-width: 100%;
    margin: auto;
    padding: 0 0%;
}
.section_pommes-poires .col-r {
    width: 70%;
}
.section_pommes-poires .col-l {
    width: 30%;
}
.section_pommes-poires .col-2 {
    display: flex;
    gap: 56px;
}
.section_pommes-poires .recherche_bloc {
    display: flex;
    flex-direction: column;
    background: #f3f4f6;
}

#variete_recherche {
    max-height: 95vh;
    position: sticky;
    top: 24px;
}

#variete_recherche_filtres {
    padding: 16px;
    overflow-y: scroll;
}

.recherche-btn-reset {
    display:block;
    margin-top: 16px;               
}

.recherche-btn-reset-bis {
    display:none;
}

.section_pommes-poires .search-box button {
    width: 15%;
    cursor:pointer;
}
.section_pommes-poires .search-box input {
    width: 85%;
    text-indent: 10px;
}
.section_pommes-poires button.btn_yellow {
    display: flex;
    width: -webkit-fill-available;
    width: -moz-available;
    align-items: center;
    justify-content: center;
    height: 44px;
    background-color: #fac864;
    border: none;
    color: white;
    cursor: pointer;
}

button.btn_yellow:hover {
    background-color: grey;
}

.section_pommes-poires a.more-link, .section_pommes-poires .recherche_bloc div:first-of-type a {
    color: #fac864;
    text-decoration: none;
    font-weight: 500;
}
.section_pommes-poires .search-box {
    height: 44px;
    display: flex;
    width: -webkit-fill-available;
    margin-bottom: 24px;
    position:relative;
}

#search-variety-list {
    position:absolute;
    display:block!important;
    top:47px;
    left:0;
    width:100%;
    height:auto;
    background-color: rgb(255, 255, 255);
}

.search-variety-item {
    padding:8px;
    border-bottom:1px solid grey;
    display:block!important;
    width:100%;
    cursor:pointer;
}
.search-variety-item:hover {
    background-color: rgb(225, 225, 225);
}

.search-variety-item span {
    color:#888;
}

.search-variety-item-info {
    text-align:center;
    padding:8px;
    border-bottom:1px solid grey;
    display:block!important;
    width:100%;    
}

#variete_recherche_filtres_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color:#e2e3e5;
}
.section_pommes-poires button.recherche-mobile {
    display: none;
    align-items: center;
    gap: 8px;
    border: none;
    width: 100%;
    justify-content: center;
    height: 44px;
    cursor: pointer;
}

.filter-labels {
    display: flex;
    gap: 4px;    
    flex-wrap:wrap;
    justify-content: space-between;
    margin-bottom: 4px;
    width: -webkit-fill-available;
    width: -moz-available;
}

.section_pommes-poires .filter-section label {
    display: flex;
    /*align-items: center;*/
    gap: 6px;
    
}
.filter-labels label {
    width:calc(50% - 8px);
}

.filter-labels-trois label {
    /*width:calc(33% - 8px);*/
    width: fit-content;
}

.filter-labels-un label {
    width:100%;
}

 

.section_pommes-poires .filter-section input {
    width: 20px;
    height: 20px;
}
.section_pommes-poires .filter-body {
    margin-bottom: 16px;
}

.filter-header {
    display:flex;
    justify-content:space-between;
    align-items: center;
    margin: 0 0 16px;
    gap: 16px;    
}

.section_pommes-poires .filter-section h4 {
    margin:0;
    display:flex;
    align-items:center;
    gap:16px;
    justify-content: space-between;
    width: -webkit-fill-available;  
    width: -moz-available;  
}

.filter-openclose {
    cursor:pointer;
    width:14px;
    height:14px;
    background-size:14x;
    background-position:center;
    background-repeat:no-repeat;    
    background-image:url('/varietes/img/arrow-down.svg')
}

.filter-openclose-closed {
    background-image:url('/varietes/img/arrow-left.svg')
}

.filter-count {
    border-radius:50%;
    text-align:center;
    font-weight:200;
    font-size:12px;
    color:#999;
    background-color:#DCDCDC;
    width:18px;
    height:18px;    
    display:flex;
    align-items:center; 
    justify-content:space-around;       
}

.filter-count-on {
    color:#fff;
    background-color:#fac864;
}

.section_pommes-poires .bar-tri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border: 1px solid grey;
    margin-bottom: 56px;
}
.section_pommes-poires .tri-affichage, .section_pommes-poires .tri-affichage div {
    display: flex;
    align-items: center;
}
.section_pommes-poires .tri-affichage {
    gap: 32px;
}
.section_pommes-poires .tri-affichage .tri {
    gap: 16px;
}
.section_pommes-poires .tri-affichage .tri select {
    height: 44px;
    padding: 8px;
}
.section_pommes-poires .affichage {
    gap:8px;
}
.section_pommes-poires .affichage button {
    width: 44px;
    height: 44px;
    background-color: white;
    cursor:pointer;
    border: 1px solid #E6E7EB;
}

.section_pommes-poires .affichage button:hover {
    background-color: #E6E7EB;
}
.section_pommes-poires .affichage button.active {
    background-color: #fac864;
}

.section_pommes-poires #varietes-produits.affichage-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.section_pommes-poires #varietes-produits .produit {
    display: flex;
    justify-content: space-between;
    border: 1px solid #e6e7eb;
    color:initial!important;
}

.section_pommes-poires #varietes-produits .produit .titre {
    display: flex;
    align-items: center;
    gap: 16px;
}
.section_pommes-poires #varietes-produits .produit .titre h3 {
    margin: 0;
}
.section_pommes-poires .affichage-list .produit .type img {
    width: 44px;
    background: #E6E7EB;
    border-radius: 100px;
    padding: 8px;
}
.section_pommes-poires #varietes-produits .produit .img-infos {
    display: flex;
    gap: 32px;
    align-items: center;
}

.img-infos .img-variete {
    background-size:50px;
    background-position:center;
    background-repeat:no-repeat;
    background-color: #F3F4F6;
    width: 200px;
    min-width: 200px;
    height: 220px;
}

.img-infos .pomme {
    background-image:url('/varietes/img/pomme.png');
}
.img-infos .poire {
    background-image:url('/varietes/img/poire.png');
}

.img-variete img {
    width: 100%;
    height: 100%;    
    object-fit: cover;
    max-width: 100%;
}
.section_pommes-poires #varietes-produits .produit  .type {
    background-color: #F3F4F6;
    width: 152px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size:50px;
    background-position:center;
    background-repeat:no-repeat;    
}

.type_pomme {
    background-image:url('/varietes/img/pomme.png');
}
.type_poire {
    background-image:url('/varietes/img/poire.png');
}

.section_pommes-poires #varietes-produits .produit  .tag {
    background: #D3D3D3;
    padding: 4px;
    width: fit-content;
    border-radius: 4px;
    color: #5f6565;
}

.produit h3::before {
    display:none!important;
}

.synonymes {
    color:#888!important;
}

.utilisations, .conservation {
    color:#5f6565!important;
}


.section_pommes-poires #varietes-produits.affichage-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
}


.section_pommes-poires #varietes-produits.affichage-grid .produit {
    width: calc(100% / 3 - 12px);
    display:block;
}

.section_pommes-poires #varietes-produits.affichage-grid .produit .img-infos {
   display: flex;
   gap: 12px;
   flex-direction:column;
   align-items: initial;
}

.section_pommes-poires #varietes-produits.affichage-grid .produit .text-infos {
    padding:0 24px;
}

.section_pommes-poires #varietes-produits.affichage-grid .produit .img-variete {
    width: 100%;
    max-width: 100%;
    height:220px;
}

.section_pommes-poires #varietes-produits.affichage-grid .produit img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.section_pommes-poires #varietes-produits.affichage-grid .produit .type {
    display: none;
}

.section_pommes-poires #varietes-produits.affichage-grid .produit p {
    margin:4px 0;
}
.section_pommes-poires #varietes-produits.affichage-grid .produit p.conservation {
    margin-bottom:8px;
}
.section_pommes-poires #varietes-produits .produit:active, .section_pommes-poires #varietes-produits .produit:focus
 {
    background: #fac864;
    transition: 0.2s ease-in;
}

.section_pommes-poires #varietes-produits .produit:hover {
    background: #eeeeee;
    transition: 0.2s ease-in;
    color:initial!important;
}

.section_pommes-poires #varietes-produits .produit:focus, .section_pommes-poires #varietes-produits .produit:active {
   background-color: #eeeeee;
   color:initial!important;
}

#affichage-title {
    display:none;
}

#tri option:first-child, #item_par_page option:first-child {
	display:none;
}

.opened_filtres {

}

#variete_recherche_fond {
    display:none;
}

@media (max-width: 1068px) {
  .section_pommes-poires #varietes-produits.affichage-grid .produit {
      width: calc(100% / 2 - 12px);
  }
  .affichage-list .type {
    display: none !important;
  }
  
  /*
  div#variete_recherche {
      display: none;
      height:initial;
      max-height: initial;
  }
  */
  
  #variete_recherche_fond {
    display:block;
    position: fixed;
    top:0;
    left:0;
    z-index: 9998;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.2);  
  }
  
  #variete_recherche {
    
    position: fixed;
    top:0;
    left:0;
    z-index: 9999;
    width: 90%;
    height:100%;
    max-height: initial;  
    background-color: #fff;  
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 5px 0px 15px -3px rgba(0,0,0,0.3);
    margin:0;        
    transform: translateX(-100vh);
    -webkit-transform: translateX(-100vh);        
  }
  
  #variete_recherche_filtres_header {
    height: 8%;
  }
  
  #variete_recherche_filtres {
    height: 92%;
  }    
  
  
  .slide-in {
      animation: slide-in 0.5s forwards;
      -webkit-animation: slide-in 0.5s forwards;
  }

  .slide-out {
      animation: slide-out 0.5s forwards;
      -webkit-animation: slide-out 0.5s forwards;
  }
      
  @keyframes slide-in {
      100% { transform: translateX(0px); }
  }

  @-webkit-keyframes slide-in {
      100% { -webkit-transform: translateX(0px); }
  }
      
  @keyframes slide-out {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100vh); }
  }

  @-webkit-keyframes slide-out {
      0% { -webkit-transform: translateX(0%); }
      100% { -webkit-transform: translateX(-100vh); }
  }
  

  
  #variete_recherche_filtres_header_droite {
    display:flex;
    align-items:center;
    gap:16px;
  }  
  
  .recherche-btn-reset {
    display:none;
  }
  
  .recherche-btn-reset-bis {
    margin-bottom:24px;
    display:block;
  }
  
  .section_pommes-poires .search-box {
    margin:0!important;
  }
  
  #btn-recherche-mobile-close {
    
  }
  #btn-recherche-mobile-close:before {
    content: 'x';
    cursor:pointer;
    font-size:32px;
  }

  
  section.section_pommes-poires .col-2 {
      flex-direction: column;
  }
  .section_pommes-poires .col-r, .section_pommes-poires .col-l {
      width: 100%;
  }
  .section_pommes-poires .bar-tri {
          padding: 0;
          border: none;
          margin-bottom: 16px;
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
  }
  .section_pommes-poires button.recherche-mobile {
      display: flex;
  }
  .section_pommes-poires .col-2 {
      gap: 16px;
  }  
  
  #trierpar-title, #parpage-title {
    display:none;
  }  
}

@media (max-width: 768px) {
  .section_pommes-poires #varietes-produits.affichage-grid .produit {
      width: 100%;
  }
  .img-infos .img-variete {
    width: 142px;
    min-width: 142px;
    height: 100%;
  }
  .section_pommes-poires .tri-affichage {
      gap: 8px;
      flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;      
  }
  
  .section_pommes-poires .tri-affichage select, #affichage-title {
    font-size:14px!important;
  }
  
  section.section_pommes-poires .col-2 {
      gap:0;
  }  
  
  #varietes-results {
    margin: 16px 0;
  }
  
  .nmb-result {
    font-weight:600;
  }
  
  .section_pommes-poires .tri-affichage .tri {
      gap: 0;
      flex-direction: column;
  }
  
  #tri option:first-child, #item_par_page option:first-child {
  	display: block;
  }  

  
  .section_pommes-poires .bar-tri {
    gap:0;
  }
  
  #affichage-title {
    display:none;
  }  

  

  
}

@media (max-width: 560px) {
    /*
    .img-infos .img-variete {
        width: 94px;
        height: 157px;
    }
    */
    #contenu-page .produit .img-infos p {
    margin: 0;
    }
    .section_pommes-poires #varietes-produits .produit .tag {
        font-size: 14px;
    }
    .section_pommes-poires #varietes-produits .produit .titre {
        align-items: flex-start;
        gap: 0px;
        flex-direction: column-reverse;
    }
    .section_pommes-poires #varietes-produits .produit .img-infos {
        gap: 16px;
    }
    .tri-affichage .tri {
        display: flex !important;
        align-items: center;
        flex-direction: row !important;
        gap: 8px !important;
    }

}
.section_pommes-poires .aucun-resultat {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*border: 1px solid #e6e7eb;*/
    padding: 32px;
}
.section_pommes-poires .aucun-resultat p {
    text-align:center;
}
.section_pommes-poires .aucun-resultat a.btn-no-result {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background-color: #fac864;
    color: #FFF!important;
    padding: 0px 32px;
    text-decoration: none;
}

#varietes-pagination {
    margin:24px auto;
}

.pagination_disabled {
    cursor:default;
    opacity:0.5;
}

.sticky_recherche {
    position:fixed;
    top:5px;;
    width: 440px;
}
