header#header {
    background-color: black;
  border-bottom: solid 3px #fee417;
}

@media (min-width: 720px) {
    .header.header--fixed .header__logo {
        min-width: 240px !important;
    }
}

@media (min-width: 1024px) {
    .header.header--fixed .nav {
        margin: 0px !important;
    }
}

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

.pieces .wizi-txt.wizi-txt--large {
    border-top: solid 3px #fee417;
  border-bottom: solid 3px #fee417;
}

.menu picture:not(.with-loading) img.lazyloaded {
  opacity: 1;
  transition: 0.8s ease-out;
  border-radius:15px;
  border: solid 2px #fee417;
}

.menu picture:not(.with-loading) img.lazyloaded:hover {
  opacity: 1.5;
  transition: 0.8s ease-out;
  border-radius:30px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.bloc3 .wizi-imgtxt.wizi-imgtxt--textRightTextLeft.wizi-imgtxt--reverse.wizi-imgtxt--half {
    background-color: #fee417;
}

.bloc4 .wizi-imgtxt.wizi-imgtxt--half.wizi-imgtxt--textLeftTextRight {
    background-color: black;
    color: white;
}

@media (min-width: 1024px) {
  .menu {
    z-index: 3;
    background-color: transparent;
} 

  .menu .wizi-img.wizi-img--simple.wizi-img--quadruple.wizi-img--picto.wizi-img--large {
    background-color: transparent!important }

.header.header--fixed .nav__itemlvl1 {
        font-size: 1rem;
        line-height: 1.375rem !important;
        font-weight: 500;
        margin: 0 !important;
        color: #fff;
        padding-top: 10px;
        padding-bottom: 10px;
        text-transform: uppercase;
    }
    
}

@media (max-width: 2100px) and (min-width: 1200px) {
      .bloc3 .wizi-imgtxt__right {
        animation: slide2 linear;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: contain 30%;
    }

        .bloc4 .wizi-imgtxt__left {
        animation: slide1 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;
  }
}

@keyframes slide1 {
  from{
  transform: translateX(-100%);
  opacity:0;
  }
  to {
  transform: translateX(0%);
  opacity:1;
  }
}

/* AVANT APRES */
/* Accessibilité : slider masqué visuellement */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Container : format carré compact et responsive */
.ic-compare {
  --pct: 50%;   /* position poignée (0% gauche → 100% droite) */
  --clip: 50%;  /* portion masquée à droite de l'image APRÈS */
  position: relative;
  width: 100%;
  max-width: 320px;          /* ajuste si tu veux plus grand/petit */
  margin: 16px auto;
  aspect-ratio: 1 / 1;       /* tes images 400x400 */
  overflow: hidden;
  background: transparent;
  touch-action: none;        /* drag tactile */
}

/* Images superposées, même taille, pas de redimensionnement différentiel */
.ic-compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* ou 'contain' si tu veux tout voir sans recadrage */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.ic-before { z-index: 1; }

/* APRÈS : wrapper pleine taille, rogné par clip-path (pas de shrink) */
.ic-after {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* on coupe à droite selon --clip (0% = tout visible, 100% = tout masqué) */
  clip-path: inset(0 var(--clip) 0 0);
}
.ic-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Poignée */
.ic-handle {
  position: absolute;
  top: 0;
  left: var(--pct);
  transform: translateX(-50%);
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
.ic-handle-line {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.ic-handle-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.12) inset;
  pointer-events: auto;
  cursor: ew-resize;
}

/* Focus clavier */
.ic-handle-knob:focus-visible,
.ic-range:focus-visible {
  outline: 2px solid #2684ff;
  outline-offset: 2px;
}

div#footer-text-blog {
    background-color: #FEE417;
    padding: 10px;
    border-radius: 10px;
}

.footer__wrapper__blog__text:hover {
    color: black;
}
@media screen and (min-width: 1024px) {
    div#\35 166a18a-8240-43a1-af45-36016ddd21f4 
    .wizi-img--quadruple.wizi-img--picto 
    .wizi-img__content {
        width: calc(20% - 30px);
    }
}
div#\35 166a18a-8240-43a1-af45-36016ddd21f4 .wizi-img__content:nth-child(6) {
    display: none !important;
}
div#\35 166a18a-8240-43a1-af45-36016ddd21f4 .wizi-img__content:nth-child(7) {
    display: none !important;
}
div#\35 166a18a-8240-43a1-af45-36016ddd21f4 .wizi-img__content:nth-child(8) {
    display: none !important;
}
div#\35 166a18a-8240-43a1-af45-36016ddd21f4 {
    margin-top: -40px;


.sc-auth-part:nth-child(2) {
    display: none;
}