/*
Theme Name: Barks Child
Theme URI: https://bleu-com-orange.fr/
Template: Divi
Author: Bleu Com' Orange
Author URI: https://bleu-com-orange.fr/
Version: 4.27.5.1767107613
Updated: 2025-12-30 16:13:33

*/
:root {
  --white: #ffffff;
  --black: #111;
  --marron-clair: #D9B890;
  --gris: #C7CCD1;
  --gris-clair: #ECECEC;
  --header-height: 138px;
  --section-menu-principal-height: 58px;
  --page-container-top: 211px;
}

/***** Typographie *****/
body {
  font-size: 16px !important;
  line-height: 1.4em;
  /* font-weight: 400; */
  /* color: #6E6E6E; */
}

@media (max-width:576px) {
  body {
    /* font-size: 18px; */
  }
}

a {
  color: #32373c;
  font-weight: 400;
}

h1,
.et-db #et-boc .et-l .et_pb_title_container h1 {
  font-size: clamp(30px, 5vw, 38px);
  /* transform: translateY(2px); */
  /* text-transform: uppercase; */
  line-height: 1.2em;
  padding-bottom: 0;
  /* letter-spacing: 0px;
  /* text-shadow: 1px 3px 4px rgb(0 0 0 / 20%); */
}

h2 {
  font-size: clamp(26px, 5vw, 30px);
  /* text-transform: uppercase; */
  line-height: 1.2em;
  /* padding-bottom: 0; */
  /* letter-spacing: 5px;  */
}

h3 {
  font-size: clamp(20px, 2.2vw, 28px);
  /* text-transform: uppercase; */
  line-height: 1.2em;
  /* padding-bottom: 0; */
  /* letter-spacing: 0px; */
}

h4 {
  /* font-size: clamp(22px, 2.2vw, 28px); */
  /* text-transform: uppercase; */
  line-height: 1.2em;
  /* padding-bottom: 0; */
  /* letter-spacing: 0px; */
}

p {
  line-height: 1.4em;
}

/***** END Typographie *****/
/******* Helpers *******/
.et_pb_contact_submit,
.btn {
  transition: box-shadow 0.25s ease;
}

.et_pb_contact_submit:hover,
.btn:hover {
  box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.5);
}

.column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 981px) {

  .fix-image-height,
  .fix-image-height .et_pb_image_wrap {
    height: 100%;
  }

  .fix-image-height .et_pb_image_wrap img {
    object-fit: cover;
    object-position: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

/***** END Helpers *****/
/******* HEADER *******/
header.et-l--header {
  /* position: sticky; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: top 0.3s ease;
}

@media (min-width: 981px) {

  .et-tb-has-header #page-container,
  #page-container {
    padding-top: var(--page-container-top) !important;
  }
}

.admin-bar header.et-l--header {
  top: 46px;
}

@media (min-width: 783px) {
  .admin-bar header.et-l--header {
    top: 32px;
  }
}

/* @media (max-width: 600px) {
  .admin-bar.sticky header.et-l--header {
    top: 0;
  }
} */
.et-db #et-boc .et-l .et_pb_section.section-menu-principal::before,
.section-menu-principal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/bg-menu-principal-1.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.et-db.sticky #et-boc .et-l .et_pb_section.section-menu-principal::before,
.sticky .section-menu-principal::before {
  opacity: 1;
}

#menu-secondaire-wrapper .et_pb_code_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#menu-secondaire-wrapper .et_pb_code_inner .wrapper {
  overflow-x: hidden;
}

#menu-secondaire-wrapper .et_pb_code_inner .left-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: transform 1s ease;
}

@media (min-width:981px) {
  #menu-secondaire-wrapper .et_pb_code_inner .left-content {
    transform: translateX(calc(-110px - 2rem));
  }

  .sticky #menu-secondaire-wrapper .et_pb_code_inner .left-content {
    transform: translateX(0);
  }
}

#menu-secondaire-wrapper nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

#menu-principal-wrapper {
  border-style: solid;
  border-width: 0 3px 3px 3px;
  border-color: transparent #000 #000 #000;
  padding: 0 20px 15px;
  width: fit-content;
  margin: auto;
}

#menu-secondaire-wrapper .logo-scroll img {
  display: block;
  background-color: #000;
  padding: 4px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.8s ease 0.5s;
}

.sticky #menu-secondaire-wrapper .logo-scroll img {
  opacity: 1;
}

#menu-menu-icon-right,
#menu-menu-secondaire,
#menu-menu-principal {
  list-style: none;
  padding: 0;
  line-height: 1em;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}

#menu-menu-icon-right {
  gap: 8px;
}

#menu-menu-secondaire a,
#menu-menu-principal a {
  position: relative;
  color: var(--black);
  font-weight: 400;
}

#menu-menu-secondaire a {
  font-size: 12px;
  letter-spacing: 0.12em;
}

#menu-menu-principal a {
  letter-spacing: 0.24em;
  transition: font-size 0.3s ease;
}

.sticky #menu-menu-principal a {
  font-size: 14px;
}

#menu-menu-secondaire {
  gap: 2rem;
}

#menu-menu-principal {
  justify-content: center;
  gap: 3rem;
}

#menu-menu-secondaire li:not(.mon-compte, .deconnexion) a::before,
#menu-menu-principal a::before {
  content: '';
  width: calc(100% + 20px);
  height: calc(100% + 8px);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  transition: all 0.25s ease;
}

#menu-menu-secondaire li.contact a::before,
#menu-menu-principal li.current-menu-item a::before,
#menu-menu-secondaire li.current-menu-item a::before,
#menu-menu-principal li:hover a::before,
#menu-menu-secondaire li:hover a::before,
#menu-menu-principal li.et-hover a::before,
#menu-menu-secondaire li.et-hover a::before {
  background-color: var(--marron-clair);
}

ul#menu-menu-icon-right li.deconnexion {
  order: 1;
}

ul#menu-menu-icon-right li.mon-compte img,
ul#menu-menu-icon-right li.deconnexion img,
ul#menu-menu-secondaire li.mon-compte img,
ul#menu-menu-secondaire li.deconnexion img {
  width: 25px;
  height: 25px;
  display: block;
}

/* ul#menu-menu-secondaire li.mon-compte a {
  content: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/icone-mon-compte.svg);
}

ul#menu-menu-secondaire li.deconnexion a {
  content: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/icone-deconnexion.svg);
} */
ul#menu-menu-secondaire li.fkcart-custom-menu-link {
  /* margin: auto -15px; */
}

#section-logo-content {}

#section-logo-content,
#section-logo-content * {
  transition: all 0.8s ease;
}

#section-logo-content .et_pb_image img {
  max-height: 135px;
  will-change: opacity, max-height;
}

.sticky #section-logo-content .et_pb_image img {
  opacity: 0;
  max-height: 0;
}

.et-db.sticky #et-boc .et-l .et_pb_row_1_tb_header.et_pb_row,
.sticky #section-logo-content .et_pb_row {
  padding: 0 !important;
}

/********** INFO-LIST **********/
.et-l--header ul.info-list,
.entry-content ul.info-list,
.info-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 2em;
  list-style: none;
  padding: 0;
  line-height: 1em;
}

.et-l--header ul.info-list.socials,
.entry-content ul.info-list.socials,
.info-list.socials {
  gap: 8px;
}

.et-l--header ul.info-list.socials .info-item,
.entry-content ul.info-list.socials .info-item,
.info-list.socials .info-item {
  line-height: 0;
}

.et-l--header ul.info-list.vertical,
.entry-content ul.info-list.vertical,
.info-list.vertical {
  justify-content: space-evenly;
}

.et-l--header ul.info-list.vertical .info-item,
.entry-content ul.info-list.vertical .info-item,
.info-list.vertical .info-item {
  flex-direction: column;
}

.info-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #000;
  line-height: 1em;
}

.info-item__icon {
  display: inline-flex;
  color: #000;
}

.info-item__icon img {
  display: block;
  height: 25px;
  width: auto;
}

.info-list.vertical .info-item .info-item__icon img {
  filter: invert(84%) sepia(17%) saturate(589%) hue-rotate(348deg) brightness(89%) contrast(92%);
}

.info-item__text strong {
  font-weight: 600;
  color: #000;
}

.info-list.vertical .info-item .info-item__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/******** END INFO-LIST ********/
/********** HEADER MENU MOBILE **********/
#header-mobile-fixed {}

#header-mobile-fixed .logo {
  display: block;
  width: 180px;
}

#header-mobile-fixed .right-content {
  display: flex;
  align-items: center;
  gap: 1em;
}

#header-mobile-fixed .right-content .panier-mobile {
  /* display: none; */
}

#header-mobile-fixed .right-content .panier-mobile svg {
  fill: #fff;
  width: 40px;
  height: 40px;
}

/* #header-mobile-fixed .panier-mobile img {
  width: 34px;
  height: auto;
  display: block;
} */
#header-mobile-fixed .burger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height: 1.2rem;
  width: 2.2rem;
  cursor: pointer;
  order: 1;
}

#header-mobile-fixed .burger .bar {
  height: 3px;
  background: #fff;
  border-radius: 5px;
  margin: -4px 0px;
  box-shadow: 1px 2px 4px rgb(0 0 0 / 30%);
  transform-origin: left;
  transition: all 0.3s;
}

#header-mobile-fixed.active .burger .top {
  transform: rotate(45deg);
}

#header-mobile-fixed.active .burger .middle {
  opacity: 0;
}

#header-mobile-fixed.active .burger .bottom {
  transform: rotate(-45deg);
}

/******** END HEADER MENU MOBILE ********/
/**** Mobile Sidebar ****/
#header-mobile-sidebar {
  position: absolute !important;
  top: 0;
  height: 100dvh;
  width: 100vw;
  /* background-image: linear-gradient(90deg, #5705ac 0%, #0d9cec 100%); */
  /* background-image: linear-gradient(-90deg, var(--jaune) 0%, var(--jaune-orange) 100%) !important; */
  /* background-image: linear-gradient(-90deg, #fff 0%, var(--jaune-orange) 100%) !important; */
  /* background-color: var(--fond) !important; */
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.5s ease, opacity 0.3s ease;
  z-index: -1;
  display: flex;
  flex-direction: column;
}

#header-mobile-sidebar>.et_pb_row {
  margin-top: var(--header-height) !important;
  /* overflow-y: auto; */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#header-mobile-sidebar>.et_pb_row::-webkit-scrollbar {
  display: none;
}

#header-mobile-sidebar.show {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.5s ease, opacity 0.3s ease;
}

#header-mobile-sidebar ul {
  list-style-type: none;
  padding: 0 0 0.5em 0;
  line-height: 1;
}

#header-mobile-sidebar ul.info-list.socials {
  padding: 0;
}

#header-mobile-sidebar ul li:not(:last-child, .compte, .deconnexion, .info-item) {
  margin-bottom: 0.5em;
}

/* #header-mobile-sidebar ul li a { */
#header-mobile-sidebar ul li:not(.tel) a:not(.social-link) {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-transform: uppercase;
  width: fit-content;
  display: block;
  border-radius: 3px;
  padding: 8px 10px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

#header-mobile-sidebar ul li:not(.tel).contact>a,
#header-mobile-sidebar ul li.et-touch-hover:not(.compte)>a,
#header-mobile-sidebar ul li:not(.compte, .tel):hover>a,
#header-mobile-sidebar ul li:not(.compte).current-menu-ancestor>a,
#header-mobile-sidebar ul li:not(.compte).current-menu-item>a {
  background-color: var(--marron-clair);
  color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

#header-mobile-sidebar ul li.contact {
  margin-bottom: 1em;
}

#header-mobile-sidebar .info-item__icon img {
  height: 30px;
}

#header-mobile-sidebar .tel {
  font-weight: 400;
  margin-top: 1em;
  border-radius: 5px;
  background-color: #000;
}

#header-mobile-sidebar .tel a {
  width: fit-content;
  padding: 0.5em 1em;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 22px;
  margin: auto;
}

.et-db #et-boc .et-l #header-mobile-sidebar .tel a {
  color: #fff;
}

#header-mobile-sidebar ul.sub-menu {
  position: absolute;
  top: -1.5em;
  right: -100%;
  width: 85%;
  padding: 1em;
  border-radius: 5px;
  box-shadow: -2px 6px 10px rgb(0 0 0 / 30%);
  background-color: #fff;
  /* background-color: #e94d28; */
  /* background-image: linear-gradient(90deg, #e94d28 0%, #f4b430 100%); */
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.5s ease;
  z-index: 10000;
}

#header-mobile-sidebar li:hover ul.sub-menu,
#header-mobile-sidebar li.et-touch-hover ul.sub-menu {
  opacity: 1;
  transform: translateX(-100%);
}

#header-mobile-sidebar:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--gris-clair);
  background-image: linear-gradient(270deg, var(--gris-clair) 0%, #ffffff 100%);
  /* background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/bg-hero.png); */
  opacity: 0;
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

#header-mobile-sidebar.active:before {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 0.2s ease, opacity 0.5s ease;
}

#header-mobile-sidebar .grid-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

#header-mobile-sidebar .grid-products article {
  border: 1px solid var(--marron-clair);
}

#header-mobile-sidebar ul li article a {
  padding: 5px;
}

#header-mobile-sidebar ul.sub-menu li a {
  text-transform: lowercase !important;
  text-wrap: balance;
}

#header-mobile-sidebar .grid-products article .content {
  position: relative;
}

#header-mobile-sidebar .grid-products article .content:before {
  content: '';
  position: absolute;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  top: 50%;
  left: 50%;
  background-color: var(--gris-clair);
  z-index: -1;
  transform: translate(-50%, -50%);
}

#header-mobile-sidebar .grid-products article .content .img-content {}

#header-mobile-sidebar .grid-products article .content .title {
  font-family: 'Smooch Sans', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 2.5vw, 16px);
  position: absolute;
  bottom: -4px;
  left: -2px;
  text-wrap: balance;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2px 4px;
}

#header-mobile-sidebar .grid-products article .content .img-content img {
  display: block;
  object-fit: contain;
  object-position: center;
  /* padding: 10px; */
  aspect-ratio: 1;
}

/**** Mobile compte ****/
#menu-menu-mobile-compte {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  gap: 1em;
}

#menu-menu-mobile-compte li {
  width: 50%;
  margin: 0;
  border-radius: 5px;
  box-shadow: 1px 2px 4px rgb(0 0 0 / 25%);
}

.et-db #et-boc .et-l #menu-menu-mobile-compte a,
#menu-menu-mobile-compte li.compte a,
#menu-menu-mobile-compte li.deconnexion a {
  /* color: #1a2b3c; */
  color: #fff;
  width: 100%;
  text-align: center;
}

#menu-menu-mobile-compte .compte {
  /* background-color: #867e79; */
  background-color: var(--gris);
}

#menu-menu-mobile-compte .deconnexion {
  background-color: #000;
}

/**** END Mobile Sidebar ****/
/***** END HEADER *****/
/******* PAGE ACCUEIL *******/
#grille-accueil {}

#grille-accueil .et_pb_column {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto repeat(10, 1fr);
  gap: 1rem;
}

#grille-accueil .et_pb_column .et_pb_module {
  margin: 0 !important;
}

.video-responsive {
  height: 100%;
}

.video-responsive .et_pb_code_inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* min-height: 400px; */
  overflow: hidden;
  aspect-ratio: 16/9;
}

.video-responsive .video-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

@media (min-width: 576px) {
  #grille-accueil .et_pb_column {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto repeat(5, 1fr);
  }

  #grille-accueil .et_pb_column .et_pb_module:nth-child(1) {
    grid-area: 1 / 1 / 2 / 3;
  }
}

@media (min-width: 981px) {
  #grille-accueil .et_pb_column {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

/* Section - Les services - Accueils */
.entry-content ul.info-list.services,
.info-list ul.info-list.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 576px) {

  .entry-content ul.info-list.services,
  .info-list ul.info-list.services {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .entry-content ul.info-list.services.a-propos,
  .info-list ul.info-list.services.a-propos {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 981px) {

  .entry-content ul.info-list.services,
  .info-list ul.info-list.services {
    grid-template-columns: repeat(6, 1fr);
  }

  .entry-content ul.info-list.services.a-propos,
  .info-list ul.info-list.services.a-propos {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 75%;
    margin: auto;
  }
}

.entry-content ul.info-list.services .info-item,
.info-list.services .info-item {
  background-color: #fff;
  padding: 1rem 0;
  border: 2px solid var(--marron-clair);
  /* aspect-ratio: 1; */
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 200;
  text-align: center;
}

.info-list.services .info-item .info-item__icon img {
  filter: unset;
  height: 30px;
}

/* END Section - Les services - Accueils */
/* Citation */
.citation {
  width: 100%;
  margin: 0 auto;
  color: #1e1f22;
  text-align: center;
}

.citation .ligne {
  font-size: clamp(26px, 1vw, 30px);
  font-weight: 200;
  display: block;
  line-height: 1.2em;
}

.citation .ligne-3 {
  font-size: 16px;
}

@media (min-width:576px) {
  .citation {
    width: 600px;
  }

  .citation .ligne-1 {
    margin-left: 0;
  }

  .citation .ligne-2 {
    margin-left: 8em;
  }

  .citation .ligne-3 {
    margin-left: 32em;
  }
}

/* END Citation */
/***** END PAGE ACCUEIL *****/
/***** SECTION POURQUOI CHOISIR BARKS ? *****/
#row-choisir-barks {}

#row-choisir-barks .et_pb_column {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr;
  gap: 2rem;
}

@media (min-width: 576px) {
  #row-choisir-barks .et_pb_column {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 981px) {
  #row-choisir-barks .et_pb_column {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card-choisir-barks {
  aspect-ratio: 1;
}

.card-choisir-barks .et_pb_code_inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
}

.card-choisir-barks .et_pb_code_inner h3,
.card-choisir-barks .et_pb_code_inner span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-choisir-barks .et_pb_code_inner h3 {
  grid-area: 2 / 1 / 3 / 2;
  color: var(--white);
  background-color: rgba(0, 0, 0, 0.7);
  padding-bottom: 0;
  text-transform: uppercase;
  font-size: clamp(22px, 5vw, 24px);
}

.card-choisir-barks .et_pb_code_inner span {
  grid-area: 3 / 1 / 4 / 2;
  color: var(--black);
  margin: 3px;
  background-color: rgba(255, 255, 255, 0.6);
  text-wrap-style: balance;
}

/***** END SECTION POURQUOI CHOISIR BARKS ? *****/
/***** SECTION VIDEOS HUB CATEGORY *****/
#row-category-videos {}

#row-category-videos .et_pb_column {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0;
}

@media (min-width: 576px) {
  #row-category-videos .et_pb_column {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  #row-category-videos .et_pb_column .et_pb_video:nth-child(1) {
    grid-area: 1 / 1 / 3 / 3;
  }

  #row-category-videos .et_pb_column .et_pb_video:nth-child(2) {
    grid-area: 1 / 3 / 2 / 4;
  }

  #row-category-videos .et_pb_column .et_pb_video:nth-child(3) {
    grid-area: 2 / 3 / 3 / 4;
  }
}

/***** END SECTION VIDEOS HUB CATEGORY *****/
/*************** FunnelKit Cart ***************/
#fkcart-modal .fkcart-item-wrap .fkcart--item .fkcart-item-meta-content .fkcart-attr-wrap .fkcart-attr-key {
  font-weight: 700;
}

/*************** END FunnelKit Cart ***************/
/********** Article/Card Product **********/
.module-product-card,
.module-product-card .et_pb_code_inner {
  height: 100%;
}

article.product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  padding: 1em;
  border: 1px solid;
  height: 100%;
}

article.product-card header.product-card__header {
  margin-bottom: 1em;
}

.et-db #et-boc .et-l h3.product-card__title,
h3.product-card__title {
  font-family: 'Smooch Sans', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--black);
  padding-bottom: 5px;
}

p.product-card__subtitle {
  font-weight: 400;
  color: var(--black);
  line-height: 1em;
  font-size: 12px;
}

.product-card__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-columns: 1.5fr 1fr;
  gap: 1rem;
  flex-grow: 1;
}

.product-card__body .col {
  position: relative;
}

.product-card__body .col-1 {
  background-color: var(--gris-clair);
  display: grid;
  place-items: center;
}

.product-card__body .col-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2em;
}

figure.product-card__media img {
  display: block;
  max-height: 370px;
  transform: scale(1.07);
}

.product-card__logo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 44px;
  background: #0d0d0f;
  border-radius: 2px;
  display: grid;
  place-items: center;
  transform: translate(-0.5em, 0.5em);
}

.et-l--body ul.product-card__features,
.entry-content ul.product-card__features {
  list-style: none;
  padding: 0;
  line-height: 1em;
}

li.product-card__feature {
  display: flex;
  align-items: center;
  gap: 5px;
}

li.product-card__feature:not(:last-child) {
  margin-bottom: 8px;
}

span.product-card__icon {
  display: block;
  width: 22px;
  height: 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

span.product-card__icon.nb_personne {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/personne.svg);
}

span.product-card__icon.allumage {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/allumage.svg);
}

span.product-card__icon.graisse {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/syteme-anti-graisse.svg);
}

span.product-card__icon.transport {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/roulette.svg);
}

span.product-card__icon.transport.fixe {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/sans-roulette.svg);
}

span.product-card__icon.no_option,
span.product-card__icon.option {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/accessoire-plancha.svg);
}

span.product-card__icon.no_gravure,
span.product-card__icon.gravure {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/gravure-personnalise.svg);
}

span.product-card__icon.no_design,
span.product-card__icon.design {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/choix-design.svg);
}

span.product-card__icon.no_paiement,
span.product-card__icon.paiement {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/reglement-4X.svg);
}

span.product-card__icon.taille {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/taille.svg);
}

span.product-card__icon.tissu {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/pagelines.svg);
}

span.product-card__icon.tole {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/tole.svg);
}

span.product-card__icon.montage {
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/02/icon-montage.svg);
}

span.product-card__text {
  font-weight: 400;
  line-height: 1.2em;
  font-size: 12px;
}

.product-card__cta {
  text-align: center;
  font-family: 'Smooch Sans', Helvetica, Arial, Lucida, sans-serif;
}

p.product-card__price,
a.product-card__button {
  min-height: 35px;
  display: grid;
  place-items: center;
}

p.product-card__price {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 25px);
  color: var(--black);
  background-color: var(--marron-clair);
  margin-bottom: 1rem;
}

a.product-card__button {
  font-weight: 600;
  font-size: clamp(12px, 2.2vw, 16px);
  background-color: var(--black);
  color: var(--white);
  width: 100%;
}

/******** END Article/Card Product ********/
/******** Hub/Archive Product Category ********/
#cat-archive {}

#cat-archive .et_pb_code_inner {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 5rem 1em;
}

@media (min-width: 576px) {
  #cat-archive .et_pb_code_inner {
    grid-template-columns: repeat(2, 1fr);
  }

  #cat-archive .et_pb_code_inner:has(> article:nth-child(1):last-child) {
    grid-template-columns: repeat(1, 1fr);
    margin: auto;
    max-width: 350px;
  }
}

@media (min-width: 981px) {
  #cat-archive .et_pb_code_inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

article.cat-product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 1px solid; */
}

img.cat-product-card__image {
  display: block;
  height: 220px;
  margin-bottom: 2rem;
  object-fit: contain;
  object-position: bottom center;
}

article.cat-product-card .product-card__title-wrapper {
  text-align: center;
}

.et-db #et-boc .et-l article.cat-product-card h3.product-card__title,
article.cat-product-card h3.product-card__title {
  color: var(--marron-clair);
}

article.cat-product-card .product-card__subtitle {
  color: var(--white);
  font-size: 12px;
  padding: 0 1em;
  text-align: center;
  text-wrap-style: balance;
  margin-bottom: 1rem;
}

ul.cat-product-card__features.product-card__features {
  /* width: 80%; */
  width: 100%;
}

.cat-product-card__features li.product-card__feature {
  position: relative;
  background-color: var(--white);
  justify-content: center;
  height: 40px;
}

/* .cat-product-card__features li.product-card__feature.non-dispo::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  z-index: 1;
} */
.cat-product-card__features li.product-card__feature.non-dispo {
  background-color: rgb(255 255 255 / 4%);
}

.cat-product-card__features li.product-card__feature.non-dispo span.product-card__icon {
  filter: grayscale(1) opacity(0.3);
}

.cat-product-card__features span.product-card__icon:not(.vide) {
  font-size: 0;
}

.cat-product-card__features li.product-card__feature.vide {
  background-color: rgb(255 255 255 / 4%);
}

.cat-product-card__features span.product-card__icon.vide {
  text-align: center;
}

.cat-product-card__features span.product-card__text {
  text-wrap-style: balance;
}

.cat-product-card__features li.product-card__feature:not(:last-child) {
  margin-bottom: 1rem;
}

.cat-product-card__features li.product-card__feature.price {
  flex-direction: column;
  gap: 0;
  color: var(--black);
  background-color: var(--gris);
  line-height: 1em;
}

.cat-product-card__features li.product-card__feature.price span {
  font-weight: 400;
  font-size: 11px;
}

.cat-product-card__features li.product-card__feature.price span.woocommerce-Price-amount.amount * {
  font-weight: 700;
  font-size: 18px;
}

.cat-product-card__features li.product-card__feature.link a {
  font-family: 'Smooch Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(16px, 2.2vw, 20px);
  background-color: var(--marron-clair);
  color: var(--black);
  height: 100%;
}

/* Section Accessoires compatibles */
#accessoires-compatibles {}

#accessoires-compatibles .row-card-content {}

#accessoires-compatibles .row-card-content .et_pb_column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.et-db #et-boc .et-l .et_pb_module.card,
#accessoires-compatibles .card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#accessoires-compatibles article {
  text-align: center;
  /* display: grid; */
  /* grid-template-columns: 1fr; */
  /* grid-template-rows: 1.3fr 1fr; */
  /* gap: 0; */
  max-width: 280px;
  margin: auto;
}

#accessoires-compatibles article header {
  font-family: 'Smooch Sans', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1em;
  color: var(--marron-clair);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 15px;
}

#accessoires-compatibles article .body {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 15px;
}

#accessoires-compatibles article header,
#accessoires-compatibles article .body {
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
}

/******** END Hub/Archive Product Category ********/
/********** SINGLE PRODUCT **********/
.single-product {}

#section-single-product {}

.single-product ul.product-card__features,
.single-product #left-area ul.product-card__features {
  list-style: none;
  padding: 0;
  line-height: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
}

.single-product ul.product-card__features li.product-card__feature,
.single-product #left-area ul.product-card__features li.product-card__feature {
  margin-bottom: 0;
}

.single-product ul.info-list.product,
.single-product #left-area ul.info-list.product {
  padding: 0;
  gap: 1em;
  list-style: none;
  padding: 0;
  line-height: 1em;
}

.single-product ul.info-list.product .info-item,
.single-product #left-area ul.info-list.product .info-item {
  font-size: 11px;
}

.single-product .flex-viewport {
  aspect-ratio: 1 !important;
  width: 100% !important;
}

.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image {
  aspect-ratio: 1 !important;
}

.single-product .woocommerce-product-gallery__image img {
  object-fit: contain;
  object-position: center;
  padding: 2rem;
}

.single-product .woocommerce-product-gallery__image {
  position: relative;
}

.single-product .woocommerce-product-gallery__image::before {
  content: '';
  position: absolute;
  width: calc(100% - 6rem);
  height: calc(100% - 6rem);
  top: 50%;
  left: 50%;
  background-color: var(--gris-clair);
  z-index: -1;
  transform: translate(-50%, -50%);
}

.single-product .woocommerce-product-gallery__image::after {
  content: '';
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 44px;
  height: 44px;
  background: #0d0d0f;
  border-radius: 2px;
  background-image: url(https://www.barks-barbecue.com/wp-content/uploads/2026/01/B.svg);
  z-index: 1;
}

/* WooCommerce gallery thumbs: 5 par ligne */
/* Par défaut : 5 thumbs */
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

/* Si exactement 4 <li>, alors 4 colonnes */
.woocommerce div.product div.images .flex-control-thumbs:has(> li:nth-child(2):last-child),
.woocommerce div.product div.images .flex-control-thumbs:has(> li:nth-child(3):last-child),
.woocommerce div.product div.images .flex-control-thumbs:has(> li:nth-child(4):last-child) {
  grid-template-columns: repeat(4, 1fr);
}

/* Reset Li */
.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto !important;
  margin: 0 !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  position: relative;
}

.woocommerce div.product div.images .flex-control-thumbs li::before {
  content: '';
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: 50%;
  left: 50%;
  background-color: var(--gris-clair);
  z-index: -1;
  transform: translate(-50%, -50%);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
  padding: 5px;
}

@media only screen and (max-width: 600px) {
  body .qib-button-wrapper {
    float: left;
  }
}

/* Bouton Ajouter au panier */
body.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_wc_add_to_cart .button {
  padding: 0em 3em !important;
  margin: 3px 0;
  height: 41px;
  transition: box-shadow 0.25s ease;
}

body.et-db #page-container #et-boc .et-l .et_pb_section .et_pb_wc_add_to_cart .button:hover {
  box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.5);
}

.row-sticky-content {}

@media (min-width:981px) {

  .et-db #et-boc .et-l .et_pb_column:has(.sticky-text),
  .row-sticky-content .et_pb_column:has(.sticky-text) {
    position: sticky;
    top: calc(var(--header-height) + var(--section-menu-principal-height));
  }
}

.row-sticky-content .sticky-text {}

.row-sticky-content .sticky-image {}

.row-sticky-content .sticky-image::before {
  content: '';
  position: absolute;
  width: calc(100% - 8rem);
  height: calc(100% - 8rem);
  top: 50%;
  left: 50%;
  background-color: var(--gris-clair);
  z-index: -1;
  transform: translate(-50%, -50%);
}

.row-sticky-content .sticky-image .et_pb_image_wrap {
  border: 2px solid var(--marron-clair);
}

.row-sticky-content .sticky-image .et_pb_image_wrap img {
  object-fit: contain;
  object-position: center;
  padding: 2rem;
  aspect-ratio: 1;
}

/* Section "Découvrez les autres produits" */
#grid-products {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}

@media (min-width: 576px) {
  #grid-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 981px) {
  #grid-products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Section "Questions fréquentes" */
#grid-questions .et_pb_column {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem 5rem;
}

#grid-questions .et_pb_column .et_pb_module {
  margin-bottom: 0 !important;
}

#grid-questions h3 {
  font-weight: 300 !important;
}

@media (min-width: 576px) {
  #grid-questions .et_pb_column {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Section "Questions frequentes" with .3-columns */
  #grid-questions.three-columns .et_pb_column {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1rem;
  }
}

@media (min-width: 981px) {

  /* Section "Questions frequentes" with .3-columns */
  #grid-questions.three-columns .et_pb_column {
    gap: 2rem 5rem;
  }
}

/********* Yith WAPO *********/
#yith-wapo-container .options-container,
#yith-wapo-container {
  margin-bottom: 1em;
}

.yith-wapo-block .yith-wapo-addon.yith-wapo-addon-type-label .label_container.content-align-center .label_price {
  line-height: 1.2em;
}

#yith-wapo-container input[type=text] {
  padding: 10px;
  border-radius: 6px;
}

#yith-wapo-container input[type=text]:focus {
  color: #111;
  border-color: #00b494;
  outline: none;
  box-shadow: 0 0 2px #00b494;
}

#content-area #yith-wapo-container table th,
#content-area #yith-wapo-container table td {
  padding: 0;
}

#content-area #yith-wapo-container table td {
  padding-left: 10px;
  text-align: right;
}

#wapo-total-price-table table {
  font-size: 14px;
  line-height: 1.6em;
}

#yith-wapo-addon-5 {}

@media (max-width: 575px) {
  #yith-wapo-addon-5 .options.per-row-5.grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* .postid-85 #yith-wapo-addon-12 .options.per-row-2.grid, */
  /* .postid-87 #yith-wapo-addon-9 .options.per-row-2.grid, */
  /* .postid-153 #yith-wapo-addon-4 .options.per-row-2.grid, */
  #yith-wapo-container .options.per-row-2.grid {
    grid-template-columns: 1fr !important;
  }
}

/*************** END Yith WAPO ***************/
/* Yith */
#yith-wapo-container {}

.et-db #et-boc .et-l h2.wapo-addon-title,
#yith-wapo-container h2.wapo-addon-title {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 5px;
}

#yith-wapo-container .wapo-addon-description {
  font-size: 14px;
  margin-bottom: 5px;
}

#yith-wapo-option-2-0 {
  margin-top: 5px;
}

#yith-wapo-addon-10 .options-container,
#yith-wapo-addon-2 .options-container {
  margin-bottom: 0;
}

.yith-wapo-block .yith-wapo-addon.empty-title {
  margin-top: 5px;
}

/******** END SINGLE PRODUCT ********/
/******** PAGE PANIER ********/
/* .page-id-23 #et-main-area {
  min-height: 100vh;
  min-height: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
}

.admin-bar.page-id-23 #et-main-area {
  min-height: calc(100dvh - var(--header-height) + 32px);
}

.page-id-23 footer {
  margin-top: auto;
} */
.wc-block-cart__empty-cart__title {
  text-align: center;
}

@container (min-width: 700px) {
  .wc-block-cart__main .wc-block-cart-items th {
    padding: 8px 16px 12px 16px !important;
  }
}

/******** END PAGE PANIER ********/
/******** PAGE VALIDATION DE COMMANDE ********/
@container (min-width: 700px) {
  .admin-bar .wc-block-checkout__sidebar {
    top: calc(var(--header-height) + 2rem + 32px) !important;
  }

  .wc-block-checkout__sidebar {
    top: calc(var(--header-height) + 2rem) !important;
  }
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
  font-size: 16px;
  padding-top: calc(0.667em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.667em + 2px);
  padding-left: calc(1.333em + 2px);
  cursor: pointer;
}

.woocommerce ul.order_details {
  margin: 1em 0 3em;
  padding: 1rem;
  border: 1px solid;
  border-radius: 3px;
}

/******** END PAGE VALIDATION DE COMMANDE ********/
/******** PAGE VALIDATION DE COMMANDE - Commande Abandonnée ********/
.woocommerce-checkout #payment {
  background: rgb(236 238 239);
}

.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  background: #d9b890;
}

.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce-page a.button,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  font-size: 16px;
  color: #ffffff;
  background-color: #32373c;
  border: none;
  border-radius: 0;
  font-weight: 300;
  padding-top: calc(0.667em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.667em + 2px);
  padding-left: calc(1.333em + 2px);
}

.woocommerce button.button::after,
.woocommerce-page button.button::after,
.woocommerce-page a.button::after,
.woocommerce #payment #place_order::after,
.woocommerce-page #payment #place_order::after {
  content: none !important;
}

.woocommerce button.button:not(.single_add_to_cart_button):hover,
.woocommerce-page button.button:not(.single_add_to_cart_button):hover,
.woocommerce-page a.button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
  font-size: 16px;
  color: #ffffff;
  background-color: #32373c;
  border: none;
  border-radius: 0;
  font-weight: 300;
  padding-top: calc(0.667em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.667em + 2px);
  padding-left: calc(1.333em + 2px);
}

.woocommerce .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a,
.woocommerce-page a.button.view,
.woocommerce-page a.button.cancel,
.woocommerce-page a.button.pay {
  padding: 5px 15px;
  font-size: 14px;
}

.woocommerce-page a.button.view:hover,
.woocommerce-page a.button.cancel:hover,
.woocommerce-page a.button.pay:hover {
  padding: 5px 15px;
}

td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
  display: flex !important;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width: 576px) {
  td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
    justify-content: flex-end;
  }

  .woocommerce table.shop_table_responsive tr,
  .woocommerce-page table.shop_table_responsive tr {
    margin-bottom: 2rem;
  }
}

.woocommerce button.button,
.woocommerce-page button.button,
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link),
.wc-block-cart .wc-block-cart__submit-container,
.woocommerce-page a.button,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  transition: box-shadow 0.3s ease;
}

.woocommerce button.button:hover,
.woocommerce-page button.button:hover,
body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link):hover,
.wc-block-cart .wc-block-cart__submit-container:hover,
.woocommerce-page a.button:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
  box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.5);
}

ul.wc-item-meta li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.7em;
}

.woocommerce td.product-name .wc-item-meta .wc-item-meta-label {
  float: none;
}

.wc-block-components-product-metadata__description {
  display: none;
}

/******** END PAGE VALIDATION DE COMMANDE - Commande Abandonnée ********/
/******* HOTSPOT *******/
body .tips {
  cursor: pointer;
}

body #powerTip {
  background-color: #fff;
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.4));
  border-radius: 2px;
  padding: 10px 15px;
}

body #powerTip .box_view_html {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
}

body #powerTip.e {
  text-align: right;
}

#powerTip.n:before,
#powerTip.s:before,
#powerTip.e:before,
#powerTip.w:before {
  margin: 0;
}

body #powerTip.n:before {
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 20px solid #000;
  bottom: -15px;
}

body #powerTip.s:before {
  border-bottom: 20px solid #000;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  top: -15px;
}

body #powerTip.e:before {
  border-top: 15px solid transparent;
  border-right: 20px solid #000;
  border-bottom: 15px solid transparent;
  left: -15px;
}

body #powerTip.w:before {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid #000;
  right: -15px;
}

#powerTip.e:before,
#powerTip.w:before {
  top: 50%;
  transform: translateY(-50%);
}

#powerTip.n:before,
#powerTip.s:before {
  left: 50%;
  transform: translateX(-50%);
}

body #powerTip.ne:before,
body #powerTip.nw:before {
  border-top: 10px solid #fff;
  border-top: 10px solid rgba(255, 255, 255, 1);
}

body #powerTip.se:before,
body #powerTip.sw:before {
  border-bottom: 10px solid #fff;
  border-bottom: 10px solid rgba(255, 255, 255, 1);
}

body #powerTip.nw-alt:before,
body #powerTip.ne-alt:before,
body #powerTip.sw-alt:before,
body #powerTip.se-alt:before {
  border-top: 10px solid #fff;
  border-top: 10px solid rgba(255, 255, 255, 1);
}

body #powerTip.sw-alt:before,
body #powerTip.se-alt:before {
  border-bottom: 10px solid #fff;
  border-bottom: 10px solid rgba(255, 255, 255, 1);
}

body .box_view_html {
  color: #000;
}

body .box_view_html span.close_ihp svg {
  fill: red;
}

/******* END HOTSPOT *******/
/********** Section Recettes & Inspirations **********/
.single-recette .row-wrapper {
  background-color: rgba(236, 236, 236, 0.3);
}

.single-recette .row-wrapper .et_pb_column:has(.et_pb_image) {
  margin-top: -4rem;
}

#recettes-category-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  width: 100%;
}

@media (min-width: 576px) {
  #recettes-category-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
}

#recettes-category-wrapper .card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #1E1F22;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* will-change: transform; */
}

/* .term-viandes-grillees #recettes-category-wrapper .card--viandes-grillees, */
/* .term-poissons #recettes-category-wrapper .card--poissons, */
/* .term-legumes-rotis #recettes-category-wrapper .card--legumes-rotis, */
/* .term-marinade-sauces #recettes-category-wrapper .card--marinade-sauces, */
#recettes-category-wrapper .card:hover {
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.5);
  z-index: 7;
  /* transform: scale(1.02); */
}

.et-db #et-boc .et-l h3.card__title,
#recettes-category-wrapper .card__title {
  text-align: center;
  letter-spacing: 0.5px;
  font-family: 'Smooch Sans', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 24px);
  padding-bottom: 1em;
  line-height: 1em;
}

#recettes-category-wrapper .card__media {
  width: 80%;
  /* height: 150px; */
  display: grid;
  place-items: center;
  aspect-ratio: 12/7;
}

#recettes-category-wrapper .card__media img {}

#recettes-category-wrapper .card--viandes-grillees {
  background: #D9B890;
}

#recettes-category-wrapper .card--poissons {
  background: #ECECEC;
}

#recettes-category-wrapper .card--legumes-rotis {
  background: #E2E2E2;
}

#recettes-category-wrapper .card--marinade-sauces {
  background: #BCBCBC;
}

#last-recettes-wrapper.hub-toutes-les-recettes .tangible-paginator-target,
#last-recettes-wrapper:not(.hub-toutes-les-recettes) {
  display: grid;
  gap: 0;
  width: 100%;
}

#last-recettes-wrapper.hub-toutes-les-recettes .tangible-paginator-target {
  gap: 10px;
}

#last-recettes-wrapper.hub-toutes-les-recettes .tangible-paginator-target,
#last-recettes-wrapper:not(.hub-toutes-les-recettes) {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {

  #last-recettes-wrapper.hub-toutes-les-recettes .tangible-paginator-target,
  #last-recettes-wrapper:not(.hub-toutes-les-recettes) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 981px) {

  #last-recettes-wrapper.hub-toutes-les-recettes .tangible-paginator-target,
  #last-recettes-wrapper:not(.hub-toutes-les-recettes) {
    grid-template-columns: repeat(6, 1fr);
  }
}

#last-recettes-wrapper .content {
  position: relative;
}

#last-recettes-wrapper .content .img-content {
  overflow: hidden;
}

#last-recettes-wrapper .content .img-content img {
  aspect-ratio: 1;
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
}

#last-recettes-wrapper article:hover .content .img-content img {
  transform: scale(1.05);
}

#last-recettes-wrapper .content h3 {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  background-color: rgb(217 184 144 / 90%);
  width: calc(100% - 2rem);
  padding: 5px;
  font-size: clamp(14px, 1.5vw, 18px);
  text-align: center;
  line-height: 1em;
  font-weight: 300;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

@media (min-width: 981px) {
  #last-recettes-wrapper .content h3 {
    height: 55px;
  }
}

/******** END Section Recettes & Inspirations ********/
/********** Singles Recettes **********/
#recette-current-cat {
  max-width: 120px;
  /* max-width: fit-content; */
  position: absolute !important;
  top: 1rem;
  right: 2rem;
  z-index: 2;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

#recette-current-cat a.card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: #1E1F22;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 576px) {
  #recette-current-cat {
    max-width: 180px;
    top: 4rem;
    right: 2rem;
  }

  #recette-current-cat a.card {
    padding: 24px;
  }
}

#recette-current-cat a.card h3.card__title {
  text-align: center;
  letter-spacing: 0.5px;
  font-family: 'Smooch Sans', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 24px);
  padding-bottom: 1em;
  line-height: 1em;
}

#recette-current-cat a.card .card__media {
  width: 80%;
  /* height: 150px; */
  display: grid;
  place-items: center;
  aspect-ratio: 12 / 7;
}

#recette-current-cat a.card .card__media img {}

#recette-current-cat .card--viandes-grillees {
  background: #D9B890;
}

#recette-current-cat .card--poissons {
  background: #ECECEC;
}

#recette-current-cat .card--legumes-rotis {
  background: #E2E2E2;
}

#recette-current-cat .card--marinade-sauces {
  background: #BCBCBC;
}

/******** END SIngles Recettes ********/
/******** PAGE HUB FAQ ********/
#services {}

#services .et_pb_code_inner {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1em;
}

@media (min-width:576px) {
  #services .et_pb_code_inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width:981px) {
  #services .et_pb_code_inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

#services article {
  display: flex;
  align-items: center;
  overflow: hidden;
  font-weight: bold;
  border-radius: 5px;
  position: relative;
  transition: box-shadow 0.3s ease;
  cursor: pointer;
  padding-right: 20px;
}

#services article:hover {
  box-shadow: 0px 4px 6px rgb(0 0 0 / 30%);
}

#services article::after {
  content: " >";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

#services article::before {
  content: '';
  position: absolute;
  top: 0;
  background-image: linear-gradient(to right, #ffffff00 30%, rgb(241 241 230 / 60%) 50%, #ffffff00 70%);
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.3;
  transform: translateX(100%);
  will-change: transform;
  transition: transform 1s ease, opacity 0.5s ease;
}

#services article:hover::before {
  transform: translateX(-100%);
}

/* Couleur par défaut */
#services article {
  background-color: var(--marron-clair);
}

@media (max-width:575px) {
  #services article:nth-child(2n+2) {
    background-color: var(--gris);
  }
}

@media (min-width:576px) {

  /* Alternance toutes les 4 positions */
  /* #services article:nth-child(4n+1), */
  /* #services article:nth-child(4n+4) { */
  #services article:nth-child(2n+2) {
    background-color: var(--gris);
  }
}

#services article a {
  display: block;
  padding: 1em;
  color: #1E1F22;
  z-index: 2;
  position: relative;
  width: 100%;
}

/******** END PAGE HUB FAQ ********/
/**** Pagination *****/
.tangible-paginator-buttons {
  text-align: center;
  /* background-color: rgb(31 68 86 / 90%); */
  /* padding: 1em 4em; */
  max-width: 100%;
  margin: 2em auto 0 auto;
  border-radius: 2px;
}

@media (min-width:768px) {
  .tangible-paginator-buttons {
    /* max-width: 40%; */
  }
}

.tangible-paginator-buttons button {
  cursor: pointer;
}

.tangible-paginator-button {
  padding: 8px 16px !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: rgb(217 184 144 / 50%) !important;
  color: #fff !important;
  margin-right: 5px;
  font-size: 16px;
}

.tangible-paginator-button:not(:last-child) {
  margin-bottom: 5px;
}

.tangible-paginator-button:last-child {
  margin-right: 0px;
}

.tangible-paginator-button.active {
  background-color: var(--marron-clair) !important;
}

.tangible-paginator-button:hover {
  background-color: #b0afaf !important;
}

/**** END Pagination *****/
/******* FOOTER *******/
/* footer-bco-content */
.footer-bco-content .et_pb_code_inner {
  display: flex;
  gap: 1em;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.footer-bco-content .et_pb_code_inner nav {
  display: flex;
  gap: 0.5em;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media (min-width: 576px) {
  .footer-bco-content .et_pb_code_inner {
    gap: 0.5em;
  }

  .footer-bco-content .et_pb_code_inner nav {
    gap: 1em;
    flex-direction: row;
  }
}

@media (min-width: 981px) {
  .footer-bco-content .et_pb_code_inner {
    gap: 1em;
    flex-direction: row;
  }
}

.footer-bco-content .et_pb_code_inner nav,
.footer-bco-content .et_pb_code_inner nav a {
  color: #fff;
  font-size: 16px;
  font-weight: 300;
}

.footer-bco-content .et_pb_code_inner .bco img {
  display: block;
  width: 155px;
}

.footer-bco-content .et_pb_code_inner a {
  position: relative;
}

.footer-bco-content .et_pb_code_inner a:not(.bco):before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  opacity: 0;
  transition: transform 0.25s ease;
  transform-origin: center;
  transform: scale(0);
}

.footer-bco-content .et_pb_code_inner a:not(.bco):hover:before {
  opacity: 1;
  transform: scale(1);
}

/******* END FOOTER *******/