main.main > .main-header > .header-section > .section-middle {
  margin-bottom: 0;
}
main.main > section.main-section nav.block-breadcrumb {
  box-shadow: none;
  padding: 1rem 0;
  margin-bottom: 2rem;
  background-color: #0091d7;
}
main.main > section.main-section nav.block-breadcrumb ol.breadcrumb > li.breadcrumb-item > a,
main.main > section.main-section nav.block-breadcrumb ol.breadcrumb > li.breadcrumb-item.active {
  color: #fff;
}
main.main > section.main-section .content-page .page-header::before {
  background-color: #0091d7 !important;
}
main.main > section.main-section .content-page .page-body .btn-group > a.btn,
main.main > section.main-section .content-page .page-body .btn-group > button.btn {
  border-radius: 1rem;
  margin: .25rem;
  padding: 1rem .5rem;
  font-size: 1rem;
  line-height: 20px;
  color: #000;
  border-color: #000;
  opacity: 7;
  -webkit-transition: all 333ms ease-out;
  -moz-transition: all 333ms ease-out;
  -o-transition: all 333ms ease-out;
  transition: all 333ms ease-out;
}
main.main > section.main-section .content-page .page-body .btn-group > a.btn:hover,
main.main > section.main-section .content-page .page-body .btn-group > button.btn:hover,
main.main > section.main-section .content-page .page-body .btn-group > a.btn:focus,
main.main > section.main-section .content-page .page-body .btn-group > button.btn:focus {
  color: #fff;
  background-color: #000;
  border-color: #000;
}
main.main > section.main-section .content-page .page-body .btn-group > a.btn.active,
main.main > section.main-section .content-page .page-body .btn-group > button.btn.active {
  opacity: 1;
  color: #fff !important;
  background-color: #000 !important;
  border-color: #000 !important;
  pointer-events: none;
}
main.main > section.main-section .content-page .masonry-wall {
  column-gap: 14px;
  /* responsive: nombre de colonnes */
  column-count: 5;
}
main.main > section.main-section .content-page .masonry-wall .tile {
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  width: 100%;
  display: block;
  margin: 0 0 14px;
  border-radius: 16px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  transform: translateZ(0);
  /* on anim juste l’opacité/transform pour éviter du “jank” */
  opacity: 1;
  transition: opacity .18s ease, transform .18s ease;
  /* placeholder avant chargement lazy */
  /* hidden (filtre) */
  /* Optionnel: hover */
}
main.main > section.main-section .content-page .masonry-wall .tile > .tile-content {
  position: absolute;
  z-index: 1;
  inset: 0;
}
main.main > section.main-section .content-page .masonry-wall .tile > .tile-content > h3.tile-title {
  position: absolute;
  left: 14px;
  bottom: 14px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  /* rend le lien cliquable */
}
main.main > section.main-section .content-page .masonry-wall .tile.is-idle {
  background-image: none !important;
  position: relative;
}
main.main > section.main-section .content-page .masonry-wall .tile.is-idle::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.06));
}
main.main > section.main-section .content-page .masonry-wall .tile.is-hidden {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  display: none;
}
main.main > section.main-section .content-page .masonry-wall .tile:hover {
  transform: scale(1.01);
}
main.main > section.main-section .content-page .masonry-wall .tile:hover > .tile-content > h3.tile-title {
  opacity: 1;
  transform: translateY(0);
}
main.main > section.main-section .content-page .masonry-wall .tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
main.main > section.main-section .content-page .masonry-wall .tile:hover::after {
  opacity: 1;
}
/* 
For Mobile 
Lorsque l'écran (fenêtre du navigateur) devient plus petit que 768 pixels :
*/
@media screen and (max-width: 768px) {
  .main.main > .main-section .masonry-wall-control .btn-group {
    width: 100%;
    max-width: 100%;
    display: contents;
  }
  .main.main > .main-section .masonry-wall-control .btn-group > .btn {
    min-width: 47% !important;
    margin: 0rem .25rem .25rem 0rem !important;
    padding: .5rem !important;
    font-size: .8rem !important;
    line-height: 16px !important;
  }
  .main.main > .main-section .masonry-wall > a.tile {
    transform: scale(1.01) !important;
  }
  .main.main > .main-section .masonry-wall > a.tile > .tile-content > h3.tile-title {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  .main.main > .main-section .masonry-wall > a.tile .tile::after {
    opacity: 1 !important;
  }
}
@media (hover: hover) {
  .tile:not(:hover) .tile-title,
  .tile:not(:hover)::after {
    opacity: 0;
  }
}
@media (hover: none) {
  .tile-title,
  .tile::after {
    opacity: 1;
    transform: none;
  }
}
/* breakpoints (tu peux ajuster) */
@media (max-width: 1400px) {
  .main.main > .main-section .masonry-wall {
    column-count: 4 !important;
  }
}
@media (max-width: 992px) {
  .main.main > .main-section .masonry-wall {
    column-count: 3 !important;
  }
}
@media (max-width: 768px) {
  .main.main > .main-section .masonry-wall {
    column-count: 2 !important;
  }
}
@media (max-width: 576px) {
  .main.main > .main-section .masonry-wall {
    column-count: 1 !important;
  }
}

/*# sourceMappingURL=listing.min.css.map */