@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

h1 {
  font-family: "Lora", serif;
}
h2 {
  font-family: "Lora", serif;
}
h1.we-align-left {
  font-family: "Lora", serif;
}
h1.prod-list__right__title {
  font-family: "Lora", serif;
}
p.filter__title {
  font-family: "Lora", serif;
}
p.ql-align-center {
  font-family: "Lora", serif;
}
p.we-align-center {
  font-family: "Lora", serif;
}
h3.we-align-center {
  font-family: "Lora", serif;
}
.prod-list__right__title {
    font-size: 1.6rem !important;
}
@media only screen and (max-width: 768px) {
    div#\34 47ccc3b-c88d-4313-842d-465f2268d0b3 .wizi-img__item {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: calc(100% - -280px) center;
    }
}
div#\34 47ccc3b-c88d-4313-842d-465f2268d0b3 .wiziBtn {
    color: black !important;
    background-color: #f0e7b3 !important;
}
.wizi-img__content {
    border-radius: 5px;
}
div#fee6cd22-186c-4a82-9ff5-ec92de529f31 {
  border-top: 4px solid #eaba7d;
}
.wiziBtn {
    color: black !important;
}
@media (min-width: 720px) {
    .wizi-wrapper--textOnImg.wizi-wrapper--small {
        min-height: 24vw;
    }
}
@media (min-width: 1024px) {
    .nav__maxWidth {
        justify-content: center;
        gap: 20px;
    }
}
@media (min-width: 1024px) {
    .header__logo img {
        max-height: 110px;
        margin-top: 10px;
    }
}
.wiziBtn__wrapper {
    justify-content: center;
}
@media (min-width: 1024px) {
    .header__relative {
        padding: 0px 40px;
    }
}
.bloc4 {
  z-index: 3;
}
.bloc4 .wizi-img.wizi-img--simple.wizi-img--triple.wizi-img--picto.wizi-img--large {
    margin-top: -100px;
}
.bloc5 {
  background-color: #f0e7b3;
}
.bloc5 .wizi-wrapper.wizi-wrapper--imgtxt {
    padding: 20px 0 20px 0;
}
@media (max-width: 768px) {
    .blochoraires .wiziblocks__item__maxWidth {
        padding: 20px !important;
    }
}
@media (min-width: 1024px) {
    .blochoraires {
        background-color: transparent !important;
        z-index: 3 !important;
        margin-top: -60px !important;
    }
}
@media only screen and (min-width: 1024px) {
    .blochoraires .wiziblocks__item__maxWidth {
        width: 50%;
    }
}
.blochoraires .wiziblocks__item__maxWidth {
    margin-left: auto;
    margin-right: auto;
}
.blochoraires .wiziblocks__item__maxWidth {
    background-color: #eaba7d;
    margin-top: -20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.bloc7 {
  background-color: #F0E7B3;
}

.wizi-img__content {
    position: relative; /* Pour que le positionnement interne fonctionne */
    overflow: hidden; /* Cache les parties qui débordent */
    border: 1px solid transparent; /* Bordure transparente par défaut */
    transition: border 0.3s ease-in-out; /* Transition douce */
}

/* Image de fond (à masquer au survol) */
.wizi-img__content picture {
    transition: opacity 0.3s ease-in-out; /* Transition douce pour l'opacité */
}

/* Effet au survol */
.wizi-img__content:hover picture {
    opacity: 0; /* Masque l'image de fond */
}

.wizi-img__content:hover {
    border: 2px solid #eaba7d; /* Ajoute une bordure fine noire au survol */
}









/* SCROLLING */
@media (max-width: 2100px) and (min-width: 1200px) {
      .bloc5 .wizi-imgtxt__right {
        animation: slide3 linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: contain 30%;
    }
}
 @keyframes slide3 {
  from{
  transform: translateX(100%);
  opacity:0;
  }
  to {
  transform: translateX(0%);
  opacity:1;
  }
}
@media (max-width: 2100px) and (min-width: 1200px) {
      .bloc2 .wizi-imgtxt__left {
        animation: slide2 linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: contain 30%;
    }
}
 @keyframes slide2 {
  from{
  transform: translateX(-100%);
  opacity:0;
  }
  to {
  transform: translateX(0%);
  opacity:1;
  }
}
@media (max-width: 2100px) and (min-width: 1200px) {
      .bloc7 .wizi-imgtxt__left {
        animation: slide5 linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: contain 30%;
    }
}
 @keyframes slide5 {
  from{
  transform: translateX(-100%);
  opacity:0;
  }
  to {
  transform: translateX(0%);
  opacity:1;
  }
}