/* RezepteChef Child — reprise de « HERO HOME » (Simple Custom CSS and JS n°1357).
   Modification : 3 will-change permanents supprimés
*/

/* ================================
   REZEPTECHEF HERO CSS COMPLETE FINAL
   Premium homepage hero
   Desktop fade fixed - image not too white
================================ */

body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Prevent wrapper clipping */
.entry-content,
.site-main,
.content-area,
.kt-row-column-wrap {
  overflow: visible !important;
}

.entry-content > .rc-hero-ultra:first-child {
  margin-top: 0 !important;
}

/* ================================
   HERO BASE
================================ */

.rc-hero-ultra {
  position: relative !important;
  overflow: hidden !important;

  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  margin-top: -72px !important;
  padding: 104px 34px 112px !important;
  min-height: 555px !important;

  background: #fff7ef !important;
}

/* Background image - clean premium fade */
.rc-hero-bg-img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;
  object-fit: cover !important;
  object-position: center 28% !important;

  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  animation: rcHeroImageFadeClean 1.05s ease-out both !important;
}

/* Premium overlay - desktop fixed */
.rc-hero-ultra::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.52) 16%,
      rgba(255, 255, 255, 0.10) 42%,
      rgba(255, 255, 255, 0.03) 64%,
      rgba(255, 255, 255, 0.55) 88%,
      rgba(255, 255, 255, 1) 100%
    ),
    linear-gradient(
      90deg,
      rgba(255, 248, 244, 0.97) 0%,
      rgba(255, 248, 244, 0.82) 26%,
      rgba(255, 248, 244, 0.34) 46%,
      rgba(255, 255, 255, 0.02) 72%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
}

/* Soft glow */
.rc-hero-ultra::after {
  content: "" !important;
  position: absolute !important;
  left: -10% !important;
  bottom: -28% !important;
  width: 70% !important;
  height: 55% !important;
  z-index: 1 !important;
  pointer-events: none !important;

  background: radial-gradient(
    circle,
    rgba(255, 90, 42, 0.08) 0%,
    rgba(255, 90, 42, 0.035) 42%,
    rgba(255, 90, 42, 0) 72%
  ) !important;
}

/* Same max-width with homepage sections */
.rc-hero-inner {
  width: 100% !important;
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: 0 !important;

  position: relative !important;
  z-index: 2 !important;

  transform: translateY(58px) !important;
}

/* Left block */
.rc-left {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  animation: rcHeroContentFadeSafe 0.85s ease-out both !important;
}

/* ================================
   EYEBROW
================================ */

.rc-left::before {
  content: "REZEPTECHEF" !important;
  display: block !important;

  margin: 0 0 13px 0 !important;
  padding: 0 !important;

  color: #ff5a2a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
}

/* ================================
   TITLE
================================ */

.rc-left h1,
.rc-hero-title {
  width: 100% !important;
  max-width: 700px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #18110f !important;

  font-size: clamp(50px, 4.8vw, 74px) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.065em !important;

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.rc-left h1::after,
.rc-hero-title::after {
  content: "" !important;
  display: block !important;

  width: 78px !important;
  height: 4px !important;

  margin: 21px 0 0 0 !important;
  border-radius: 999px !important;

  background: linear-gradient(90deg, #ff5a2a, #ffb08a) !important;
}

/* ================================
   SUBTITLE
================================ */

.rc-left p,
.rc-hero-subtitle {
  width: 100% !important;
  max-width: 620px !important;

  margin: 21px 0 25px !important;
  padding: 0 !important;

  color: #5f5f5f !important;

  font-size: clamp(15px, 1.05vw, 17px) !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

/* ================================
   SEARCH
================================ */

.rc-search {
  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 701px !important;
  height: 58px !important;

  margin: 0 0 26px 0 !important;

  overflow: hidden !important;
  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.075),
    0 4px 14px rgba(255, 90, 42, 0.05) !important;
}

.rc-search input {
  flex: 1 !important;
  height: 100% !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;

  padding: 0 25px !important;

  background: transparent !important;
  color: #1f140f !important;

  font-size: 14.5px !important;
  font-weight: 500 !important;
}

.rc-search input::placeholder {
  color: #6f7f93 !important;
  opacity: 1 !important;
}

.rc-search button {
  width: 56px !important;
  height: 42px !important;
  margin-right: 9px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: none !important;
  border-radius: 14px !important;

  background: transparent !important;
  cursor: pointer !important;
}

.rc-search button svg {
  width: 24px !important;
  height: 24px !important;
}

.rc-search button circle,
.rc-search button path {
  fill: none !important;
  stroke: #202020 !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ================================
   CATEGORIES
================================ */

.rc-cats {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 13px !important;

  width: 100% !important;
  max-width: 701px !important;
}

.rc-cat {
  width: 106px !important;
  height: 94px !important;
  flex: 0 0 106px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 19px !important;

  background: rgba(255, 255, 255, 0.97) !important;
  color: #1f140f !important;

  text-decoration: none !important;
  font-weight: 800 !important;

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.065),
    0 3px 10px rgba(255, 90, 42, 0.035) !important;

  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: rcHeroCatFadeSafe 0.7s ease-out both !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease !important;
}

.rc-cat:nth-child(1) {
  animation-delay: 0.08s !important;
}

.rc-cat:nth-child(2) {
  animation-delay: 0.14s !important;
}

.rc-cat:nth-child(3) {
  animation-delay: 0.20s !important;
}

.rc-cat:nth-child(4) {
  animation-delay: 0.26s !important;
}

.rc-cat:nth-child(5) {
  animation-delay: 0.32s !important;
}

.rc-cat:nth-child(6) {
  animation-delay: 0.38s !important;
}

.rc-cat img {
  width: 49px !important;
  height: 49px !important;

  display: block !important;
  object-fit: contain !important;

  margin-bottom: 6px !important;
}

.rc-cat span {
  padding: 0 5px !important;

  color: #1f140f !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;

  white-space: normal !important;
}

.rc-cat:hover {
  transform: translateY(-4px) scale(1.025) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.10),
    0 4px 16px rgba(255, 90, 42, 0.08) !important;
}

.rc-cat:hover span {
  color: #ff5a2a !important;
}

/* ================================
   ANIMATIONS
================================ */

@keyframes rcHeroImageFadeClean {
  0% {
    opacity: 0.55;
    transform: scale(1.018) translateY(6px);
    filter: blur(1.2px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes rcHeroContentFadeSafe {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rcHeroCatFadeSafe {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================================
   LARGE DESKTOP FIX
================================ */

@media (min-width: 1401px) {
  .rc-hero-ultra {
    min-height: 575px !important;
    padding-top: 104px !important;
    padding-bottom: 108px !important;
  }

  .rc-hero-bg-img {
    object-position: center 30% !important;
  }

  .rc-hero-ultra::before {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.93) 0%,
        rgba(255, 255, 255, 0.48) 15%,
        rgba(255, 255, 255, 0.08) 43%,
        rgba(255, 255, 255, 0.02) 65%,
        rgba(255, 255, 255, 0.50) 88%,
        rgba(255, 255, 255, 1) 100%
      ),
      linear-gradient(
        90deg,
        rgba(255, 248, 244, 0.97) 0%,
        rgba(255, 248, 244, 0.80) 26%,
        rgba(255, 248, 244, 0.30) 45%,
        rgba(255, 255, 255, 0.01) 70%,
        rgba(255, 255, 255, 0) 100%
      ) !important;
  }
}

/* ================================
   DESKTOP MEDIUM
================================ */

@media (max-width: 1400px) {
  .rc-hero-ultra {
    margin-top: -70px !important;
    padding: 94px 26px 94px !important;
    min-height: 525px !important;
  }

  .rc-hero-inner {
    max-width: 1280px !important;
    transform: translateY(52px) !important;
  }

  .rc-left {
    max-width: 690px !important;
  }

  .rc-left::before {
    font-size: 11px !important;
    letter-spacing: 0.32em !important;
    margin-bottom: 12px !important;
  }

  .rc-left h1,
  .rc-hero-title {
    max-width: 640px !important;
    font-size: clamp(44px, 4.6vw, 62px) !important;
  }

  .rc-left h1::after,
  .rc-hero-title::after {
    width: 72px !important;
    height: 4px !important;
    margin-top: 19px !important;
  }

  .rc-left p,
  .rc-hero-subtitle {
    max-width: 560px !important;
    margin-top: 19px !important;
    margin-bottom: 24px !important;
    font-size: 14.5px !important;
  }

  .rc-search {
    max-width: 631px !important;
    height: 54px !important;
    margin-bottom: 24px !important;
  }

  .rc-cats {
    max-width: 631px !important;
    gap: 11px !important;
  }

  .rc-cat {
    width: 96px !important;
    height: 86px !important;
    flex-basis: 96px !important;
  }

  .rc-cat img {
    width: 43px !important;
    height: 43px !important;
  }

  .rc-cat span {
    font-size: 10.8px !important;
  }
}

/* ================================
   TABLET
================================ */

@media (max-width: 1024px) {
  .rc-hero-ultra {
    margin-top: -66px !important;
    padding: 86px 22px 72px !important;
    min-height: auto !important;
  }

  .rc-hero-inner {
    max-width: 100% !important;
    transform: translateY(34px) !important;
  }

  .rc-hero-bg-img {
    object-position: center right !important;
  }

  .rc-left {
    max-width: 100% !important;
  }

  .rc-left h1,
  .rc-hero-title {
    max-width: 560px !important;
    font-size: clamp(38px, 5.4vw, 50px) !important;
    line-height: 1.02 !important;
  }

  .rc-left p,
  .rc-hero-subtitle {
    max-width: 510px !important;
    font-size: 14.5px !important;
  }

  .rc-search {
    max-width: 100% !important;
  }

  .rc-cats {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 11px !important;
  }

  .rc-cat {
    width: 92px !important;
    height: 82px !important;
    flex-basis: 92px !important;
  }
}

/* ================================
   MOBILE
================================ */

@media (max-width: 768px) {
  .rc-hero-ultra {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    margin-top: -60px !important;
    padding: 82px 18px 56px !important;
  }

  .rc-hero-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: translateY(20px) !important;
  }

  .rc-hero-bg-img {
    object-position: center right !important;
  }

  .rc-hero-ultra::before {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.84) 18%,
        rgba(255, 255, 255, 0.68) 75%,
        rgba(255, 255, 255, 1) 100%
      ) !important;
  }

  .rc-left {
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .rc-left::before {
    margin: 0 auto 12px !important;

    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.24em !important;
    text-align: center !important;
  }

  .rc-left h1,
  .rc-hero-title {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    font-size: clamp(32px, 9vw, 44px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.06em !important;
    text-align: center !important;
  }

  .rc-left h1::after,
  .rc-hero-title::after {
    width: 78px !important;
    height: 4px !important;
    margin: 16px auto 0 !important;
  }

  .rc-left p,
  .rc-hero-subtitle {
    max-width: 100% !important;
    margin: 20px auto 26px !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
    text-align: center !important;
  }

  .rc-search {
    height: 54px !important;
    max-width: 100% !important;
    margin: 0 auto 24px !important;
  }

  .rc-search input {
    font-size: 13.5px !important;
    padding: 0 20px !important;
  }

  .rc-search button {
    width: 50px !important;
    height: 40px !important;
  }

  .rc-search button svg {
    width: 23px !important;
    height: 23px !important;
  }

  .rc-cats {
    max-width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .rc-cat {
    width: 96px !important;
    height: 84px !important;
    flex: 0 0 96px !important;
    border-radius: 18px !important;
  }

  .rc-cat img {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 6px !important;
  }

  .rc-cat span {
    font-size: 11px !important;
  }
}

/* ================================
   SMALL MOBILE
================================ */

@media (max-width: 480px) {
  .rc-hero-ultra {
    margin-top: -56px !important;
    padding: 78px 14px 48px !important;
  }

  .rc-left h1,
  .rc-hero-title {
    font-size: clamp(31px, 9vw, 40px) !important;
  }

  .rc-left p,
  .rc-hero-subtitle {
    font-size: 14.5px !important;
  }

  .rc-cat {
    width: 88px !important;
    height: 78px !important;
    flex-basis: 88px !important;
  }

  .rc-cat img {
    width: 36px !important;
    height: 36px !important;
  }

  .rc-cat span {
    font-size: 10.5px !important;
  }
}

/* ================================
   ACCESSIBILITY
================================ */

@media (prefers-reduced-motion: reduce) {
  .rc-hero-bg-img,
  .rc-left,
  .rc-cat {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}