article.blog_feed {
    margin-bottom: 2rem;
    border-radius: 9px;
}

.blog_feed_post .blog_feed_link_overlay{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.blog_feed_post {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: initial;
}

a.blog_feed_link_overlay:hover .blog_feed__ContainerImg {
    background-size: 250%;
}

form.searchandfilter input:checked {
  background: red;
}

.blog_feed__ContainerImg {
  width: 100%
  height: 100%;
  max-width: 50%;
  border-radius: 100%;
  background-position: center center;
  background-size: 180%;
  border: 0.7rem solid #FFC415;
  position: relative;
  min-width: 28rem;
  min-height: 28rem;
  background-repeat: no-repeat;
  transition: all 0.25s ease-out;
  margin-bottom: 20px;
  background-color: #102D45;
}

.icone_container {
  position: absolute;
  top: 0;
  right: -1.5rem;
  height: 8.6rem;
  width: 8.6rem;
  border-radius: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 13px -5px rgb(0 0 0);
}

.icone_container img,
.icone_container svg {
  filter: invert(15%) sepia(35%) saturate(7000%) hue-rotate(170deg) brightness(25%) contrast(100%);
  max-width: 5rem;
  width: 100%;
}

.icone_container [src*='png'],
.icone_container [src*='jpg'],
.searchandfilter li ul li:not(.sf-option-active) label:before {
  filter: brightness(0.55); 
}

body:not(.tax-service) .no-filtered .searchandfilter li ul li label 

.icone_container svg path,
.icone_container svg .st1 {
  fill: #102D45;
}

.blog_feed_noResults {
  display: block;
  margin-bottom: 20px;
  padding: 15px;
}

.blog_feed_container>* {
  flex-direction: row-reverse;
  flex-wrap: wrap;
  display: flex;
}

article.blog_feed {
  padding: 2rem;
}

.blog_feed__ContainerText{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.blog_feed_ContainerText__ContainerInfo {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-bottom: 1rem;
  pointer-events: none; /* temporaire */
}

@media all and (max-width: 1024px) {

  .blog_feed__ContainerImg {
    display: none;
  }

  
  .blog_feed_ContainerText__ContainerInfo{
    margin-top: 2rem;
    order: 3;
  }
  .blog_feed_ContainerText__title{
    margin-top: 2rem;
  }
}

.blog_feed_ContainerText_ContainerInfo__name,
.blog_feed_ContainerText_ContainerInfo__date{
  font-size: 1.3rem;
}

.blog_feed_ContainerText__title{
  margin-bottom: 1rem;
  font-size: 18px;
}

.blog_feed_ContainerText_ContainerInfo__name{
  font-weight: 900;
}

@media (min-width: 980px) {

  .blog_feed_post .blog_feed_link_overlay{
    flex-direction: row;
  }

  .blog_feed__ContainerImg{
    margin-right: 3.6rem;
  }

  .blog_feed_ContainerText__title{
    margin-bottom: 1.5rem ;
    margin-top: 16px;
    font-size: 21px;
    font-weight: 400;
  }
}

.pagination {
  display: flex;
  justify-content: flex-start;
}
.pagination li {
  width: auto;
  text-align: center;
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-right: 2rem;
  min-width: 2rem;
  height: 3rem;
}
.pagination li a {
  padding: 1rem .5rem;
  font-size: 1.8rem;
  font-weight: bold;
  position: relative;
  color: #838383;
}
.pagination li a:after {
  content: "";
  display: block;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #376097;
  height: 2px;
  width: 2rem;
  left: 50%;
  opacity: 0;
  bottom: 0;
}
.pagination li:hover a {
  color: #376097;
}
.pagination li.active {
  color: #376097;
}
.pagination li.active a {
  color: #376097;
}
.pagination li.active a:after {
  opacity: 1;
}
.pagination li .pagination_next {
  position: relative;
}
.pagination li .pagination_next .fa {
  color: #376097;
  position: absolute;
  top: 50%;
  right: -100%;
  transform: translateY(-25%);
  -webkit-transform: translateY(-25%);
  -ms-transform: translateY(-25%);
}
.pagination li .pagination_preview {
  position: relative;
}
.pagination li .pagination_preview .fa {
  color: #376097;
  position: absolute;
  top: 50%;
  left: -100%;
  transform: translateY(-25%);
  -webkit-transform: translateY(-25%);
  -ms-transform: translateY(-25%);
}


#bouton-info {

  background:  #00b6f2;
  padding: 5px 15px;
  -webkit-border-radius: 45px;
          border-radius: 45px;
  font-size: 16px;
  color: white;
  border: 1px solid transparent;
  margin-top: 1rem;

}

#bouton-info:hover{
  background: transparent;
  color: #00b6f2;
  border: 1px solid #00b6f2;
}

@media (min-width: 1024px) {

  #bouton-info {
    margin-top: 0;
    margin-bottom: 30px;
  }

}

/*NAV FILTER*/
.nav_filter{
  width: 100%;
  margin-bottom: 35px;
}

  .nav_filter .row{
    display: flex;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .nav_filter .row::-webkit-scrollbar {
    border: 1px solid #d5d5d5;
    height: 4px; /* height of horizontal scrollbar ← You're missing this */
    width: 4px; /* width of vertical scrollbar */
  }

  .nav_filter .row::-webkit-scrollbar-track {
    background: #eeeeee;
    border-radius: 5px;
  }

  .nav_filter .row::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 5px;
  }

@media (min-width: 768px) {
  .nav-filter{
    margin-bottom: 50px;
  }
  .nav_filter .row{
    overflow-y: hidden;
    padding: 5px;
  }
}

.nav_filter .searchandfilter ul {
   display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.searchandfilter ul li li {
  padding: 0;
}

.nav_filter a,
.nav_filter .searchandfilter li ul li label {
    display: flex !important;
    align-items: center;
    white-space: nowrap;
    transition: all 0.20s ease-out;
    padding: 9px 16px !important;
    border-radius: 99rem;
}

.searchandfilter li ul li:not(.sf-option-active) label {
  background-color: #F4F4F4;
  color: #919191;
}

body:not(.tax-service) .no-filtered .searchandfilter li ul li label {
  background-color: #102D45;
  color: #FFFFFF;
}

.nav_filter a[data-filter*='development'] { order: 0; }
.nav_filter a[data-filter*='early'] { order: 1; }
.nav_filter a[data-filter*='registration'] { order: 2 }
.nav_filter a[data-filter*='lifecycle'] { order: 3; }
.nav_filter a[data-filter*='compliance'] { order: 4; }
.nav_filter a[data-filter*='promotional'] { order: 5; }

@media (min-width: 768px) {
  .nav_filter a {
      padding: 6px 14px ;
  }
}


@media (min-width: 768px) {
  .nav_filter img,
  .nav_filter svg {
    width: 100%;
  }
}

/*GESTION DES COULEURS*/

.nav_filter a {
  color : #919191;
  background-color: #F4F4F4;

  line-height: 12px;
}

.nav_filter a svg path{
  fill : #919191;
  transition: all 0.25s ease-out;
}

.nav_filter a svg circle,
.nav_filter a svg polygon,
.nav_filter a svg rect{
  stroke : #919191;
  transition: all 0.25s ease-out;
}


.nav_filter a:hover,
.nav_filter a.active,
.nav_filter .sf-option-active label {
  color : #ffffff;
  background-color: #102D45;
}

.nav_filter .searchandfilter li ul li label:before {
  content: '';
  background-image: var(--icon);
  transition: all 0.20s ease-out;
}

.nav_filter img,
.nav_filter svg,
.nav_filter .searchandfilter li ul li label:before {
  transition: all 0.25s ease-out;
  margin-right: 1rem;
  height: 3rem;
  min-width: 30px;
}

.nav_filter .sf-option-active label:before,
.searchandfilter li ul li:hover label:before,
body:not(.tax-service) .no-filtered .searchandfilter li ul li label:before {
  filter: contrast(1);
}


.nav_filter a:hover,
.nav_filter .searchandfilter li ul li label:hover,
.nav_filter .sf-option-active label  {
  box-shadow: 0 0 0px 1px #ffffff, 0 0 0px 3px #102d45;
  transform: translateY(-2px);
  color : #ffffff;
  background-color: #102D45;
}


.nav_filter a:hover svg path,
.nav_filter a.active svg path {
  fill : #ffffff;
}

.nav_filter a:hover svg circle,
.nav_filter a.active svg circle,
.nav_filter a:hover svg polygon,
.nav_filter a.active svg polygon,
.nav_filter a:hover svg rect,
.nav_filter a.active svg rect {
  stroke : #ffffff;
}

.nav_filter.nofilter a {
  color : #ffffff;
  background-color: #102D45;
  flex: 100%;
}



.nav_filter.nofilter a svg path{
  fill : #ffffff;
}


.nav_filter.nofilter a svg circle,
.nav_filter.nofilter a svg polygon,
.nav_filter.nofilter a svg rect
{
  stroke : #ffffff;
}

@media (min-width: 768px) {
  .nav_filter.nofilter a {
    flex: initial;
  }
}


/*HIDDEN FORM*/

.hidden_filter{
  display: none;
}

.searchandfilter li label {
  cursor: pointer;
}

.searchandfilter input,
.searchandfilter .sf-field-category,
.searchandfilter .sf-field-taxonomy-type {
  display: none;
}