section.recettes.archives {
  padding: 3rem 0 2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 10;
  &::before {
    background: url(../img/svg/recettes-archives-bg.svg) 100% 30% no-repeat;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  h2 {
    font-family: "Inter";
    font-size: 46px;
    line-height: 46px;
    margin: 3rem 0 1rem;
    position: relative;
    width: 100%;
    &::before {
      display: none;
    }

    span {
      font-family: "DeliciousHandrawn";
      font-size: 104px;
      color: #f5b623;
    }

    p {
      font-size: 50px;
      font-weight: 600;
      line-height: 50px;
      margin-top: 0;
    }
  }

  #recetteFilter {
    margin: 3rem 0;
    #filterItems {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 35px;
      a {
        font-size: 19px;
        font-weight: 600;
        color: #000;
      }
    }
  }

  .recette-list {
    gap: 0;
    width: 100%;
    .recette-list-item {
      flex: 0 0 24%;
      transform: scale(0.85);
      margin: 0 -1rem;
      transform-origin: center center;
      &.active,
      &:hover {
        transform: scale(1) rotate(1deg);
        margin: 0 1rem;
      }
    }
  }

  .recetteCTA {
    margin: 4rem auto;
    display: inline-block;
    &::before {
      left: -50px;
      top: -30px;
    }

    &::after {
      left: calc(100% + 15px);
      top: 89%;
    }
  }
}

.page-template-page-recettes {
  .page-header {
    background: #fff;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 500px;
      top: 40%;
      left: 0;
      background: url(../img/svg/menu-bg-miam.svg) 102% 90% no-repeat;
      z-index: 0;
    }
  }

  #recetteFilter {
    z-index: 50;

    & > .inner {
      flex-direction: column;

      #filterItems {
        max-width: 100%;
        padding: 0 6rem;
        position: relative;
        z-index: 50;
      }

      .search-filter-field--input-type-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        & > div.search-filter-label {
          padding: 7px 7px 8px 1rem;
          font-size: 0.9rem;
          line-height: 1rem;
          font-family: "Inter";
          color: #000;
          margin: 0;
          flex: 1;
          min-width: 222px;
        }

        & > .search-filter-input-group {
          border: none;
          box-shadow: 0 0 10px rgb(0 0 0 / 15%);
          border-radius: 7px;
          background: #fff;
          position: absolute;
          top: 100%;
          transition: max-height ease-in-out 0.3s;
          opacity: 1;
          visibility: visible;
          display: flex;
          flex-direction: column;
          z-index: 20;
          max-height: 250px;
          overflow-y: auto;
          padding: 0.25rem 0;

          &.search-filter-field__input--hidden {
            opacity: 0;
            visibility: hidden;
            top: 0;
            display: flex;
          }

          & > div {
            padding: 0;
            label {
              display: flex;
              align-items: center;
              justify-content: center;
              color: #000;
              font-size: 0.9rem;
              padding: 0rem 0.75rem;
              cursor: pointer;
              font-weight: 100;

              span {
                &.search-filter-input-checkbox__label {
                  color: #000;
                  font-size: 0.9rem;
                  padding: 0.5rem 1rem 0.5rem 0.25rem;
                  cursor: pointer;
                }
              }
            }

            &.search-filter-input-checkbox--is-active {
              label {
                svg {
                  fill: var(--yellow-color);
                }
              }
            }
          }
        }
      }

      .search-filter-component-combobox-base,
      .search-filter-field--input-type-checkbox {
        &[aria-label="Type de produits"],
        &.search-filter-field--id-6 > .search-filter-label {
          background-image: url(../img/svg/bg-input-green.svg);

          .search-filter-component-combobox__listbox-toggle {
            .search-filter-icon {
              background-image: url(../img/svg/caret-green.svg);
              transform: none;
            }
          }

          .search-filter-label__toggle-icon.search-filter-icon {
            background-image: url(../img/svg/caret-green.svg);
            transform: none;
            &.search-filter-label__toggle-icon--up {
              transform: rotate(180deg) !important;
            }
          }
        }

        &[aria-label="Thématique"],
        &.search-filter-field--id-7 > .search-filter-label {
          background-image: url(../img/svg/bg-input-blue.svg);

          .search-filter-component-combobox__listbox-toggle {
            .search-filter-icon {
              background-image: url(../img/svg/caret-blue.svg);
              transform: none;
              &.search-filter-label__toggle-icon--up {
                transform: rotate(180deg) !important;
              }
            }
          }

          .search-filter-label__toggle-icon.search-filter-icon {
            background-image: url(../img/svg/caret-blue.svg);
            transform: none;
            &.search-filter-label__toggle-icon--up {
              transform: rotate(180deg) !important;
            }
          }
        }

        &[aria-label="Saisons"],
        &.search-filter-field--id-19 > .search-filter-label {
          background-image: url(../img/svg/bg-input-dark-red.svg);

          .search-filter-component-combobox__listbox-toggle {
            .search-filter-icon {
              background-image: url(../img/svg/caret-dark-red.svg);
              transform: none;
              &.search-filter-label__toggle-icon--up {
                transform: rotate(180deg) !important;
              }
            }
          }

          .search-filter-label__toggle-icon.search-filter-icon {
            background-image: url(../img/svg/caret-dark-red.svg);
            transform: none;
            &.search-filter-label__toggle-icon--up {
              transform: rotate(180deg) !important;
            }
          }
        }

        &[aria-label="Prix"],
        &.search-filter-field--id-12 > .search-filter-label {
          background-image: url(../img/svg/bg-input-red.svg);

          .search-filter-component-combobox__listbox-toggle {
            .search-filter-icon {
              background-image: url(../img/svg/caret-red.svg);
              transform: none;
              &.search-filter-label__toggle-icon--up {
                transform: rotate(180deg) !important;
              }
            }
          }

          .search-filter-label__toggle-icon.search-filter-icon {
            background-image: url(../img/svg/caret-red.svg);
            transform: none;
            &.search-filter-label__toggle-icon--up {
              transform: rotate(180deg) !important;
            }
          }
        }
      }
    }
  }

  #recettesList {
    background: url(../img/svg/bg-produits-topo.svg) 0px 0px no-repeat;
    padding-bottom: 0;
    position: relative;

    &::after {
      content: "";
      display: block;
      width: 180px;
      height: 210px;
      z-index: 0;
      position: absolute;
      bottom: -6rem;
      right: 0;
      background: url(../img/svg/recettes-radis.svg) 100% 97% no-repeat;
    }
    .inner {
      position: relative;
      z-index: 10;
    }
  }

  #pagination {
    margin-top: 3rem;
  }

  #search-filter-input-combobox-listbox-0 {
    &[aria-expanded="true"] {
      display: flex;
      flex-direction: column;
    }

    li {
      &[data-option-value="fruits"] {
        order: 0;
      }
      &[data-option-value="legumes"] {
        order: 1;
      }
      &[data-option-value="viandes"] {
        order: 2;
      }
      &[data-option-value="charcuterie"] {
        order: 3;
      }
      &[data-option-value="poissons-fruits-de-mer"] {
        order: 4;
      }
      &[data-option-value="fromages-et-produits-laitiers"] {
        order: 5;
      }
      &[data-option-value="les-fromages"] {
        order: 6;
      }
      &[data-option-value="la-boulangerie"] {
        order: 7;
      }
      &[data-option-value="les-patisseries-et-viennoiseries"] {
        order: 8;
      }
      &[data-option-value="confiserie-et-miels"] {
        order: 9;
      }
      &[data-option-value="epices-condiments-et-miel"] {
        order: 10;
      }
      &[data-option-value="specialites"] {
        order: 11;
      }
      &[data-option-value="les-plats-traditionnels"] {
        order: 12;
      }
      &[data-option-value="boissons"] {
        order: 13;
      }
      &[data-option-value="vins"] {
        order: 14;
      }
      &[data-option-value="vins-de-liqueur"] {
        order: 15;
      }
      &[data-option-value="bieres-cidres"] {
        order: 16;
      }
      &[data-option-value="spiritueux"] {
        order: 17;
      }
      &[data-option-value="autres-alcools"] {
        order: 18;
      }
    }
  }

  #search-filter-input-checkbox-0 {
    &[aria-expanded="true"] {
      display: flex;
      flex-direction: column;
    }

    div {
      &[data-option-value="fruits"] {
        order: 0;
      }
      &[data-option-value="legumes"] {
        order: 1;
      }
      &[data-option-value="viandes"] {
        order: 2;
      }
      &[data-option-value="charcuterie"] {
        order: 3;
      }
      &[data-option-value="poissons-fruits-de-mer"] {
        order: 4;
      }
      &[data-option-value="fromages-et-produits-laitiers"] {
        order: 5;
      }
      &[data-option-value="les-fromages"] {
        order: 6;
      }
      &[data-option-value="la-boulangerie"] {
        order: 7;
      }
      &[data-option-value="les-patisseries-et-viennoiseries"] {
        order: 8;
      }
      &[data-option-value="confiserie-et-miels"] {
        order: 9;
      }
      &[data-option-value="epices-condiments-et-miel"] {
        order: 10;
      }
      &[data-option-value="specialites"] {
        order: 11;
      }
      &[data-option-value="les-plats-traditionnels"] {
        order: 12;
      }
      &[data-option-value="boissons"] {
        order: 13;
      }
      &[data-option-value="vins"] {
        order: 14;
      }
      &[data-option-value="vins-de-liqueur"] {
        order: 15;
      }
      &[data-option-value="bieres-cidres"] {
        order: 16;
      }
      &[data-option-value="spiritueux"] {
        order: 17;
      }
      &[data-option-value="autres-alcools"] {
        order: 18;
      }
    }
  }
}

.recette-list {
  display: flex;
  gap: 20px 20px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;

  .recette-list-item {
    position: relative;
    transition: all ease-in-out 0.3s;
    overflow: hidden;
    border-radius: 15px;
    container: recette-item / inline-size;

    .recetteImage {
      background: #ccc;
      a {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 360/500;
        overflow: hidden;
        border-radius: 15px;
        position: relative;

        img {
          position: relative;
          z-index: 5;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            180deg,
            rgb(42 42 42 / 11%) 50%,
            #000 100%
          );
          z-index: 10;
          opacity: 0.5;
          transition: all ease-in-out 0.3s;
        }

        &::after {
          opacity: 0;
        }
      }
    }

    .recetteDetails {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 3rem 2rem;
      & > a {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }
      .recetteAuthor {
        background: #fff;
        border-radius: 50px;
        padding: 5px 21px 5px 5px;
        a {
          display: flex;
          align-items: center;
          color: #000;
          & > span {
            width: 51px;
            flex: 0 0 51px;
            height: 51px;
            border-radius: 50%;
            margin-right: 0.5rem;
            overflow: hidden;
            display: flex;
            align-items: flex-start;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          div {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 18px;
            b.authorName {
              font-weight: 600;
            }
          }
        }
      }

      .recetteAction {
        margin-top: auto;
        width: 100%;
        h3 {
          text-align: left;
          line-height: 35px;
          margin-bottom: 2rem;
          font-size: clamp(1.7rem, 6cqw, 1.9rem);
          font-weight: 100;
          width: 100%;

          a {
            color: #fff;
            text-shadow: 0 3px 0px rgb(0 0 0 / 50%);
          }
        }
      }
    }

    &.active {
      transform: rotate(1deg);
      .recetteImage {
        a {
          &::before {
            background: #000;
            opacity: 0.1;
          }

          &::after {
            opacity: 1;
          }
        }
      }
    }
  }

  &.archive {
    flex-wrap: wrap;
    .recette-list-item {
      position: relative;
      transition: all ease-in-out 0.3s;
      flex: 0 0 calc(25% - 15px);

      .recetteImage {
        a {
          display: flex;
          align-items: center;
          justify-content: center;
          aspect-ratio: 360/580;
          overflow: hidden;
          border-radius: 15px;
          position: relative;

          img {
            transition: all ease-in-out 0.3s;
            position: relative;
            z-index: 5;
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          &::before,
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              180deg,
              rgb(42 42 42 / 11%) 50%,
              #000 100%
            );
            z-index: 10;
            opacity: 0.5;
            transition: all ease-in-out 0.3s;
          }

          &::after {
            opacity: 0;
          }
        }
      }

      .recetteDetails {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 3rem 2rem;
        .recetteAuthor {
          background: #fff;
          border-radius: 50px;
          padding: 5px 21px 5px 5px;
          font-size: 15px;
          position: relative;
          z-index: 5;
          a {
            display: flex;
            align-items: center;
            color: #000;
            div {
              display: flex;
              flex-direction: column;
              align-items: center;
              line-height: 13px;
              b.authorName {
                font-weight: 600;
              }
            }
          }

          &.noImage {
            padding: 5px 21px 5px;
          }
        }

        .recetteAction {
          h3 {
            text-align: left;
            line-height: 40px;
            margin-bottom: 2rem;
            font-size: 28px;
            font-weight: 100;
            a {
              color: #fff;
              text-shadow: 0 3px 0px rgb(0 0 0 / 50%);
              display: block;
              font-size: 1.5rem;
              line-height: 1.5;
            }
          }
        }
      }

      &:hover {
        .recetteImage {
          img {
            transform: scale(1.2) rotate(3deg);
          }
        }
      }
    }
  }
}

.recetteAuthor {
  background: #fff;
  border-radius: 50px;
  padding: 5px 21px 5px 5px;
  font-size: 15px;
  display: inline-flex;
  a {
    display: flex;
    align-items: center;
    color: #000;
    & > span {
      width: 51px;
      flex: 0 0 51px;
      height: 51px;
      border-radius: 50%;
      margin-right: 0.5rem;
      overflow: hidden;
      display: flex;
      align-items: flex-start;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 18px;
      b.authorName {
        font-weight: 600;
      }
    }
  }

  &.chef {
    a {
      b {
        position: relative;
        padding-bottom: 0.5rem;
        &::after {
          content: "";
          position: absolute;
          background: url(../img/svg/bg-button-jaune.svg) center center
            no-repeat;
          width: 100%;
          height: 5px;
          left: 0;
          top: calc(100% - 0.5rem);
          border-radius: 30px;
          transition: all ease-in-out 0.3s;
          background-size: 100% 5px;
        }
      }
    }

    &:hover {
      a {
        b {
          &::after {
            width: 0;
          }
        }
      }
    }
  }

  &.noImage {
    padding: 5px 21px 5px !important;
  }
}

.single-recette {
  .entry-header {
    position: relative;
    z-index: 5;
    padding-bottom: 4rem;
    background: #fff;
    height: 650px;

    #headerLeft {
      flex: 0 0 550px;
      max-width: 550px;
      padding: 3rem 3rem;
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &::before {
        content: "";
        mask-image: url(../img/masks/colonne-page-produit.svg),
          linear-gradient(
            transparent,
            transparent calc(100%),
            #2c2121 calc(100%),
            black
          );
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
        mask-position: center center;
        position: absolute;
        bottom: -2rem;
        left: -15%;
        width: 120%;
        height: calc(100% + 6rem);
        background: var(--green-color);
        z-index: 0;
        transform: rotate(-4deg);
      }

      .recetteDetails {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 5;
        color: #000;
        h1 {
          font-size: 36px;
          line-height: 46px;
          margin-bottom: 2rem;
        }

        .recetteTopDetails {
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          gap: 30px;
          & > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img {
              height: 55px;
              max-width: 70px;
            }

            &.recettePreparation img {
              transform: rotate(45deg);
            }
            span {
              font-size: 12px;
            }
            b {
              font-size: 18px;
              font-weight: 600;
              line-height: 16px;
            }
          }
        }

        .recetteBottomDetails {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          gap: 20px 30px;
          margin-top: 2rem;
          & > div {
            position: relative;
            font-weight: 600;
            white-space: nowrap;
            a {
              color: #000;
              display: flex;
              align-items: center;
              img {
                width: auto;
                height: 22px;
                margin-right: 0.5rem;
                filter: brightness(0) invert(1);
              }
            }
            &::after {
              content: "";
              position: absolute;
              width: 100%;
              height: 10px;
              top: 100%;
              background: url(../img/svg/bg-button-blue.svg) center center
                no-repeat;
              background-size: 100% 8px;
              transition: all ease-in-out 0.3s;
              left: 0;
            }
          }
        }

        #socialShareContainer {
          margin: 2rem 0 0;
          top: 3rem;
        }
      }
    }

    #headerRight {
      height: 100%;
      /* height: 100%; */
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      flex: 1;
      padding: 2rem 3rem 0rem;
      position: relative;
      align-self: stretch;
      max-height: 100vh;

      &::before {
        content: "";
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          0deg,
          rgb(42 42 42 / 11%) 50%,
          #262626 100%
        );
        z-index: 0;
        opacity: 0.7;
        top: 0;
        left: 0;
      }

      & > div:not(#creditPhoto) {
        position: relative;
        z-index: 5;
      }

      #breadcrumb {
        margin: 1rem 0 1rem;
      }
    }
  }

  #recetteContent {
    background: url(../img/svg/recette-bg-single.svg) 0% 0% no-repeat;
    padding: 3rem 0 10rem;
    .topContent {
      display: flex;
      align-items: flex-start;
      gap: 5rem;
      #recetteIngredients {
        position: relative;
        padding: 2rem 3rem;
        flex: 0 0 30%;
        color: #fff;
        height: auto;
        &::before {
          content: "";
          position: absolute;
          display: block;
          width: 150px;
          height: 60px;
          background: url(../img/svg/decouvrez-feuille.svg) left center
            no-repeat;
          z-index: 0;
          top: -1rem;
          right: -3rem;
          z-index: 5;
        }

        &::after {
          content: "";
          mask-image: url(../img/masks/colonne-page-produit.svg),
            linear-gradient(
              transparent,
              transparent calc(100%),
              #2c2121 calc(100%),
              black
            );
          mask-repeat: no-repeat;
          mask-size: 100% 100%;
          mask-position: center center;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--blue-color);
          z-index: 0;
          transform: rotate(-4deg);
        }

        h2 {
          position: relative;
          z-index: 10;
          font-family: "DeliciousHandrawn";
          font-size: 56px;
          line-height: 56px;
          margin: 2rem 0 2rem;
          text-align: left;
          color: #fff;
        }

        .recetteIngredientList {
          position: relative;
          z-index: 10;
          list-style: none;
          li {
            margin: 0 0 0.5rem;
            position: relative;
            padding-left: 1.5rem;

            &::before {
              content: "";
              background: var(--yellow-color);
              position: absolute !important;
              display: block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 0.75rem;
              top: 7px;
              min-width: 8px;
              left: 0;
            }
            a {
              margin: 0 5px;
              color: #fff;
              font-weight: 600;
              border-bottom: 4px solid var(--yellow-color);
            }
          }
        }
      }

      #recetteEtapes {
        h2 {
          position: relative;
          z-index: 10;
          font-family: "DeliciousHandrawn";
          font-size: 80px;
          line-height: 80px;
          margin: 0rem 0 2rem;
          text-align: left;
          color: var(--yellow-color);
        }

        .etapesContent {
          counter-reset: etapeRecette;
          font-size: 1.15rem;

          .recetteEtapes {
            margin-bottom: 3rem;
            display: flex;

            & > ul,
            & > ol {
              list-style: outside disc;
              padding-left: 2rem;
              li {
                margin-bottom: 0.5rem;
                list-style: none;
              }
            }

            h3 {
              text-align: left;
            }

            & > ol,
            & > p,
            & > h3 {
              position: relative;
              font-size: 1.15rem;
              padding: 0 0rem 0 4rem;
              margin: 0;
              line-height: 3rem;
              text-align: left;

              &::before {
                counter-increment: etapeRecette;
                content: counter(etapeRecette);
                background: url(../img/svg/bg-pagination.svg) center center
                  no-repeat;
                background-size: 69px 69px;
                display: flex;
                /* align-items: center; */
                justify-content: center;
                width: 50px;
                height: 50px;
                /* border-radius: 50px; */
                color: var(--yellow-color);
                font-family: "DeliciousHandrawn";
                font-size: 30px;
                line-height: 40px;
                position: absolute;
                left: 0;
                top: 0;
              }

              & + ul,
              & + ol {
                padding-left: 5rem;
                margin-top: -2rem;
                font-size: 1.15rem;
                /* list-style: none; */
                li {
                  margin-bottom: 0.5rem;
                }
              }
            }
          }

          & > ol {
            list-style: none;
            padding-left: 0;
            li {
              margin-bottom: 2.5rem;
              padding: 0.75rem 0rem 0 4rem;
              position: relative;
              &::before {
                counter-increment: etapeRecette;
                content: counter(etapeRecette);
                background: url(../img/svg/bg-pagination.svg) center center
                  no-repeat;
                background-size: 69px 69px;
                display: flex;
                /* align-items: center; */
                justify-content: center;
                width: 50px;
                height: 50px;
                /* border-radius: 50px; */
                color: var(--yellow-color);
                font-family: "DeliciousHandrawn";
                font-size: 30px;
                line-height: 40px;
                position: absolute;
                left: 0;
                top: 0;
              }
              h3 {
                text-align: left;
              }
              p {
                font-size: 1.15rem;
              }
            }
          }

          & > ul {
            list-style: outside disc;
            padding-left: 2rem;
            li {
              margin-bottom: 0.5rem;
            }
          }
        }
      }
    }

    .relatedProducts {
      display: flex;
      gap: 120px 60px;
      justify-content: center;
      margin-top: 10rem;
      flex-wrap: wrap;
      .produitItem {
        flex: 0 0 25%;
        background: var(--yellow-color);
        padding: 1.5rem 2rem;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all ease-in-out 0.3s;
        &:hover {
          transform: scale(1.2) rotate(1deg);
        }

        .productImage {
          width: 100%;
          position: relative;
          top: -5rem;
          a {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            aspect-ratio: 800/960;
            clip-path: url("#clip-path-product");
            width: 90%;
            margin: 0 auto;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              mask-image: url(../img/masks/vignette-produit.svg),
                linear-gradient(
                  transparent,
                  transparent calc(100%),
                  #2c2121 calc(100%),
                  black
                );
              mask-repeat: no-repeat;
              mask-size: 100% 100%;
              mask-position: center center;
            }
          }
          h3 {
            font-family: "DeliciousHandrawn";
            font-size: 30px;
            margin-top: 1rem;
          }
        }
      }
    }
  }

  section.recettes.archives {
    z-index: 0;
    h2 {
      font-family: "DeliciousHandrawn";
      font-size: 70px;
      line-height: 30px;
      p {
        font-family: "Inter";
        font-size: 30px;
        margin-bottom: 0;
      }
    }
  }
}

.page-template-page-rdv-gourmands {
  .page-header {
    h1 {
      font-size: 91px;
      color: var(--yellow-color);
      p {
        font-size: 50px;
        margin: 0;
      }
    }
  }

  #agendaList {
    background: url(../img/svg/bg-produits-topo.svg) 0px 0px no-repeat;
    padding-top: 0;
    padding-bottom: 5rem;

    .container-load-more {
      margin: 2rem 0 0;
      display: flex;
      justify-content: center;
      font-weight: 600;

      & > span {
        position: relative;
        display: block;
        cursor: pointer;
        &::after {
          content: "";
          display: block;
          height: 3px;
          width: 100%;
          background: var(--yellow-color);
          transition: all ease-in-out 0.3s;
        }
        &:hover {
          &::after {
            width: 0;
          }
        }
      }
    }
  }
}

#reportageGourmands {
  padding: 4rem 0 7rem;
  background-image: url(../img/svg/recettes-radis.svg);
  background-repeat: no-repeat;
  background-position: 100% 30%;

  .inner {
    h2 {
      color: var(--yellow-color);
      font-size: 80px;
      line-height: 80px;
      margin-bottom: 5rem;
      p {
        font-size: 38px;
        font-family: "Inter";
        font-weight: 600;
        color: #000;
        margin: 0;
      }
    }

    .blocCTA {
      margin: 4rem 0 0;
    }
  }
}

.page-template-page-reportages-gourmands-accueil {
  .page-header {
    margin-bottom: 4rem;
  }

  #post-1590 {
    position: relative;
    & > section {
      position: relative;
      z-index: 10;
      top: 1rem;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(../img/svg/reportages-path.svg) 0% 400px no-repeat;
      background-size: 100% auto;
      z-index: 0;
    }

    &::after {
      content: "";
      position: absolute;
      top: calc(400px - 152px);
      right: 7rem;
      width: 210px;
      height: 240px;
      background: url(../img/svg/reportages-miam.svg) 100% 50% no-repeat;
      z-index: 0;
      background-size: contain;
    }
  }
}

.blogTaxList {
  margin-bottom: 1rem;
  padding-bottom: 2rem;
  position: relative;
  .inner {
    position: relative;
    z-index: 10;
  }

  h2 {
    font-family: "Inter";
    font-size: 36px;
    font-weight: 600;
    position: relative;
    &::after {
      content: "";
      background: url(../img/svg/title-shape-yellow.svg) 100% 50% no-repeat;
      width: 100%;
      height: 15px;
      position: absolute;
      top: 90%;
      left: 0;
      display: block;
      background-size: 120px auto;
    }
  }

  &:not(#un-tour-au-marche) {
    h2 {
      text-align: center;
      margin: 3rem auto 2rem;
    }
  }

  &.odd {
    background: #fff url(../img/svg/recettes-radis.svg) 100% 20% no-repeat;
    &::before,
    &::after {
      content: "";
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 100%;
      background: url(../img/svg/bg-page-header.svg) bottom center no-repeat;
      top: -70px;
      background-size: 100% auto;
      transform: rotate(180deg);
    }

    &::after {
      top: 70px;
      transform: none;
    }
  }

  &#les-artisans-du-gout {
    background: url(../img/svg/bg-produits-topo.svg) 0% 0% no-repeat;
    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 100%;
      background: url(../img/svg/bg-page-header.svg) top center no-repeat;
      top: 70px;
      background-size: 100% auto;
      transform: rotate(180deg);
    }
  }

  .blocCTA {
    margin: 3rem 0 0;
  }

  &.presses {
    .agenda-list.presses {
      h2 {
        width: 100%;
        font-family: "DeliciousHandrawn";
        font-weight: 100;
        &::after {
          display: none;
        }
      }
    }

    &:last-child {
      /* padding-bottom: 6rem; */
    }
  }
}

.tax-thematique-reportage-gourmand {
  .page-header {
    position: relative;
    z-index: 0;
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 500px;
      top: 40%;
      left: 0;
      background: url(../img/svg/menu-bg-miam.svg) 102% 90% no-repeat;
      z-index: 1;
    }
  }

  #postList {
    padding-bottom: 2rem;
    background: url(../img/svg/bg-produits-topo.svg) 0px 0px no-repeat;
    position: relative;
    z-index: 10;
    .post-blog-list {
      .post-list-item {
        flex: 0 0 calc(33.333333333% - 27px);
      }
    }
  }
}

body.page-template-page-espace-presse {
  .page-header {
    &::before {
      display: none;
    }
  }
  #presseContentList {
    background: url(../img/svg/bg-produits-topo.svg) 0px 310px no-repeat;
  }
  #reportageGourmands {
    padding-top: 9rem;
  }
}

body.tax-espace-presses {
  .page-header {
    padding-bottom: 6rem !important;
    &::before {
      display: none;
    }
  }

  #pageContent {
    background: url(../img/svg/bg-produits-topo.svg) 0px 310px no-repeat;
  }

  #totalPost {
    margin: 5rem 0 0 0;
    padding: 0 30px;
  }

  #agendaList {
    padding-top: 0rem;
    .inner {
      padding-bottom: 0;
    }
  }

  #pagination {
    margin-bottom: 5rem;
  }
}

.recetteVideo {
  .videoContainer {
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 2rem auto;

    & > div {
      position: relative;
      overflow: hidden;
      padding-top: 56.25%;
      transition: all ease-in-out 0.3s;
      width: 100%;
      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }
    }
  }
}