/*
 * Theme Name:     eag-ltb
 * Description:    Thème du e-shop labeuhtique
 * Author:         Alexandra Barbier
 * Template:       shoptimizer
 * Version:        1.0.0
 */

/*
 * SOMMAIRE
 * ========
 *  1.  Imports
 *  2.  Variables CSS (custom properties)
 *  3.  Reset & base
 *  4.  Typographie
 *  5.  Layout & conteneur
 *  6.  Composants génériques
 *      6a. Boutons
 *      6b. Grilles utilitaires
 *      6c. Images / modules
 *  7.  Header & navigation
 *  8.  Page d'accueil — Hero
 *  9.  Page d'accueil — Sections principales
 *      9a. Scrolling band
 *      9b. Section besoins
 *      9c. Section MEA (bento)
 *      9d. Section promo card
 *      9e. Section réassurance
 *      9f. Section articles / posts
 *      9g. Section FAQ
 *  10. Listing produits
 *  11. Page produit (single)
 *  12. Animations
 *  13. Media queries
 */


/* ==================== */
/* 1. Imports           */
/* ==================== */

@import url("https://use.typekit.net/xaa6wuu.css");


/* ==================== */
/* 2. Variables CSS     */
/* ==================== */

:root {
  /* Gouttières (mobile / tablette) */
  --gutter: 1.8rem;

  /* Conteneur */
  --container-min:   320px;
  --container-ideal: 80vw;
  --container-max:   1200px;

  /* Palette principale */
  --cream:        #F7F4EE;
  --cream-dark:   #EDE9E0;
  --forest:       #2C4A3E;
  --forest-mid:   #3D6B5A;
  --forest-light: #5A8C76;
  --sage:         #8FAF9F;
  --sage-pale:    #C8DDD5;
  --sand:         #C4A882;
  --sand-pale:    #E8D9C4;
  --white:        #FFFFFF;

  /* Texte */
  --text-dark:  #1A2820;
  --text-mid:   #4A5E56;
  --text-light: #7A9088;

  /* Accents */
  --accent-warm:  #C4844A;
  --accent-mauve: #8E7A9B;
  --accent-blush: #C47A7A;

  /* Nuances chrome (gris neutres) */
  --chrome-50:  #fafafa;
  --chrome-100: #f4f4f5;
  --chrome-200: #e4e4e7;
  --chrome-300: #d4d4d8;
  --chrome-400: #a1a1aa;
  --chrome-500: #71717a;
  --chrome-600: #52525b;
  --chrome-700: #3f3f46;
  --chrome-800: #27272a;
  --chrome-900: #18181b;
  --chrome-950: #0e0e11;

  /* Divers */
  --secondary:   #6b746a;
  --module-bg:   #e6eae6;
  --border:      1px solid var(--chrome-200);
  --red:         #ED1309;
  --blue:        #0984ED;

  /* Orange mono / complémentaires */
  --orange-mono1:           #AA806A;
  --orange-mono2:           #554C48;
  --orange-complementary1:  #AD5B32;
  --orange-complementary2:  #6E4C3B;
  --orange-complementary3:  #332C28;

  /* Border-radius */
  --radius:    5px;
  --radius-lg: 10px;
  --radius-xl: 25px;

  /* Hero scrolling band */
  --bg-color:  #ed5509ff;
  --text-color: #ffffffff;
  --speed:      50s;
}


/* ==================== */
/* 3. Reset & base      */
/* ==================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--chrome-50) !important;
}


/* ==================== */
/* 4. Typographie       */
/* ==================== */

html,
body,
* {
  font-family: "inter", "bricolage-grotesque", sans-serif;
  font-weight: 400;
  font-style: normal;
}

p, h1, h2, h3, h4, h5, h6, span, ul {
  color: var(--chrome-800);
}

h1, h2, h3, h4, h5, h6,
.touch-font {
  font-family: "bricolage-grotesque", sans-serif !important;
}

h1 { font-size: 1.83rem !important; line-height: 1.25; }
h2 { font-size: 1.2rem;             line-height: 1.25; }
h3 { font-size: 1.1rem;             line-height: 1.25; }
h4 { font-size: 1rem;               line-height: 1.2;  }
h5, h6 { font-size: 0.91rem;        line-height: 1.2;  }

p, a, span,
.small-font-size { font-size: 0.88rem; }

.text-secondary {
  color: var(--chrome-500);
  font-size: 0.8125rem;
  font-weight: 400;
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest-light);
  display: inline-block;
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--forest-light);
  margin-right: 8px;
  vertical-align: middle;
}


/* ==================== */
/* 5. Layout & conteneur*/
/* ==================== */

.col-full {
  width: calc(100% - (var(--gutter) * 2));
  max-width: clamp(var(--container-min), var(--container-ideal), var(--container-max));
  margin-left: auto;
  margin-right: auto;
}

.landing * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.landing > section     { margin-bottom: 2.4rem; }
.landing h2            { margin-bottom: 1.4rem; }
.landing p             { margin-bottom: 0.88rem; font-weight: 400; line-height: 1.25; }
.landing .grid         { display: grid; gap: 20px; }
.landing img           { max-width: 100%; display: block; }

.grid-4 {
  display: grid;
  column-gap: 1.2rem;
  row-gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  flex: 1 1 auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

span.d-none { display: none; }


/* ==================== */
/* 6a. Boutons          */
/* ==================== */

.main-btn {
  height: unset;
  min-height: 32px;
  padding: 4px 16px;
  text-decoration: none;
  border: none;
  border-radius: 624.9375rem;
  line-height: 1.5;
  background-color: #94f477;
  color: var(--chrome-950);
  position: relative;
  display: inline-flex;
  flex-direction: row;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.main-btn:hover { background-color: #6add36; }

.landing a.btn {
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: 0.3s;
  font-size: 0.9rem;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  z-index: 1;
  gap: 1.2rem;
  background-color: rgb(43 40 38);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 12px 24px;
  overflow: hidden;
  color: var(--chrome-50);
}

.landing a.btn:hover { background: #444; }

.btn-cta { color: var(--secondary); }

.cta-text {
  display: inline-flex;
  align-items: center;
  min-width: auto;
  min-height: auto;
  background: none;
  box-shadow: none;
  color: inherit;
  line-height: 1.4;
  overflow: visible;
  flex: none;
  max-width: 30rem;
  word-break: break-word;
  position: relative;
  font-size: 1.4rem;
  font-weight: 400;
}

.cta-text-label { position: relative; flex: none; }

.cta-text-label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  transition: all 0.3s linear;
  background-color: currentColor;
  transform: rotate(180deg);
}

.cta-text:not([disabled]):not([aria-disabled="true"]) .cta-text-label:hover::after {
  width: 0;
}


/* ==================== */
/* 6b. Grilles utilitaires */
/* ==================== */

.module-container {
  border-radius: var(--radius);
  background-color: var(--chrome-200);
}


/* ==================== */
/* 6c. Images / modules */
/* ==================== */

.module-img-container {
  display: flex;
  flex-direction: row;
  width: 299px;
  height: 299px;
  border-radius: var(--radius);
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.module-img-container img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  background: #fafafa;
}

div.cover-ilg-container { border-radius: var(--radius); }


/* ==================== */
/* 7. Header & nav      */
/* ==================== */

#menu-secondary-menu ion-icon,
.cart-contents ion-icon {
  font-size: 1.2rem;
}

.secondary-navigation .menu-item {
  border-left: none !important;
}

.shoptimizer-cart a.cart-contents .shoptimizer-cart-icon .mini-count {
  background-color: #edf5f0 !important;
  color: #1c4226 !important;
  border: 1px solid #1c4226 !important;
}

@media (min-width: 993px) {
  .menu-primary-menu-container > ul > li > a span {
    position: relative;
    font-weight: 900;
    text-transform: uppercase;
    color: #15191d;
  }

  .site-header-cart {
    display: block;
    height: 100% !important;
    margin-left: 0px !important;
  }

  .header-5 .shoptimizer-cart a.cart-contents {
    height: auto;
    padding: 0 25px !important;
    border: none !important;
    border-radius: 0 !important;
    line-height: 1;
    margin-top: -14px !important;
  }
}
.extra-menu-mea, .shoptimizer-mini-cart-wrap .cart-drawer-below {
    background: #edf5f0;
    color: #1c4226;
    padding: .5rem;
    border-radius: var(--radius);
    border: 1px solid #1c4226;

}
.mobile-extra {
		  margin-top: auto;
}

@media (min-width: 993px) {
    .secondary-navigation .icon-wrapper svg {
        width: 22px;
        height: 22px;
    }
}

/* ==================== */
/* 8. Hero (page accueil) */
/* ==================== */

.home .rankmath.woocommerce-breadcrumb { display: none; }

.hero-section-homePage,
.mea-section-homePage {
  padding: 0 !important;
}

.hero-container {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

section#hero__container {
  background: var(--cream);
  border-radius: var(--radius);
  margin-bottom: 2rem;
  padding: 2rem;
}

.hero__title,
.hero__title-Labeuhtique,
.hero__title-punchline {
  font-family: bricolage-grotesque;
  width: 100%;
  text-align: center;
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
  inline-size: 100%;
  text-wrap: balance;
}

.hero__title-Labeuhtique {
  font-weight: 700;
  font-size: 7.2rem;
  line-height: 1.2;
  color: var(--bg-color);
}

.hero__title-punchline {
  font-size: 3rem !important;
  font-weight: 500;
}

.hero__btnContainer {
  text-align: center;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.hero__mea-container-Container {
  position: relative;
  height: 450px;
}

.hero__mea-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 0px;
  width: 100vw;
  height: 425px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hero__meaImagesLeft   { grid-area: 1 / 1 / 2 / 2; }
.hero__meaImagesMiddle { grid-area: 1 / 2 / 2 / 4; }
.hero__meaImagesRight  { grid-area: 1 / 4 / 2 / 5; }

.hero__meaImages { height: 100%; width: 100%; }
.hero__meaImages img { height: 100%; object-fit: cover; }

.hero__prenstation {
  margin: 30px 0;
  text-align: center;
}

.hero__mainProductsLinks ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}

.hero-images img { border-radius: var(--radius); }

.hero-container,
.mea-section-homePage-container {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: space-between;
  align-items: flex-start;
}


/* ==================== */
/* 9a. Scrolling band   */
/* ==================== */

.hero__scrollingBandContainer {
  position: relative;
  height: auto;
  margin-top: 5px;
}

.scrolling-band {
  background-color: var(--bg-color);
  overflow: hidden;
  padding: 15px 0;
  white-space: nowrap;
  position: absolute;
  display: flex;
  align-items: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.scrolling-band::before,
.scrolling-band::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
}

.scrolling-band::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-color), transparent);
}

.scrolling-band::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-color), transparent);
}

.scrolling-content {
  display: inline-block;
  animation: scroll var(--speed) linear infinite;
}

.scrolling-content span {
  font-family: -apple-system, system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 40px;
}


/* ==================== */
/* 9b. Section besoins  */
/* ==================== */

.besoins-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 3rem;
}

.besoins-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.besoin-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
  border: 1px solid var(--cream-dark);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.besoin-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(44, 74, 62, 0.1);
  border-color: var(--sage-pale);
}

.besoin-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.bc-sleep::before   { background: var(--accent-mauve); }
.bc-stress::before  { background: var(--accent-warm); }
.bc-sport::before   { background: var(--forest-light); }
.bc-feminin::before { background: var(--accent-blush); }
.bc-mobilite::before { background: var(--sand); }

.bc-quiz {
  background: var(--forest);
  border-color: var(--forest);
}

.besoin-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bi-sleep    { background: rgba(142, 122, 155, 0.12); }
.bi-stress   { background: rgba(196, 132, 74,  0.12); }
.bi-sport    { background: rgba(90,  140, 118, 0.12); }
.bi-feminin  { background: rgba(196, 122, 122, 0.12); }
.bi-mobilite { background: rgba(196, 168, 130, 0.12); }

.besoin-card h3  { font-size: 1.05rem; margin-bottom: 8px; color: var(--text-dark); }
.bc-quiz h3      { color: var(--cream); text-align: center; }
.besoin-card > p { font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
.bc-quiz > p     { color: var(--sage-pale); text-align: center; font-size: 13px; }

.besoin-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.format-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--cream);
  color: var(--text-light);
  border: 1px solid var(--cream-dark);
}

.besoin-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--forest);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}

.besoin-link:hover { gap: 8px; }

.bc-quiz .btn { margin-top: 16px; width: 100%; text-align: center; display: block; }


/* ==================== */
/* 9c. Section MEA (bento) */
/* ==================== */

/* Grilles */
.bento-grid       { display: grid; gap: 20px; }
.top-grid         { grid-template-columns: repeat(4, 1fr); }
.bottom-grid      { grid-template-columns: repeat(2, 1fr); }

/* Cartes */
.mea-card {
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  border: 1px solid var(--chrome-200);
}

.card-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #ddd;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-content {
  padding: 16px;
  background: #fbfbfb;
}

.card-content h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  text-transform: none;
}

.card-content p {
  margin: 0 0 12px;
  color: #444;
  font-size: 0.95rem;
}

/* Grille primero */
.grid-primero-mea {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.grid-primero-mea-child-1 { grid-area: 1 / 1 / 3 / 3; }
.grid-primero-mea-child-2 { grid-area: 1 / 3 / 3 / 4; }
.grid-primero-mea-child-3 { grid-area: 3 / 1 / 5 / 2; }
.grid-primero-mea-child-4 { grid-area: 3 / 2 / 5 / 4; }

/* Grille secondo */
.grid-secondo-mea {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.grid-secondo-mea-child-1 { grid-area: 1 / 1 / 3 / 3; }
.grid-secondo-mea-child-2 { grid-area: 1 / 3 / 3 / 5; }
.grid-secondo-mea-child-3 { grid-area: 1 / 5 / 3 / 7; }
.grid-secondo-mea-child-4 { grid-area: 3 / 1 / 4 / 4; }
.grid-secondo-mea-child-5 { grid-area: 3 / 4 / 4 / 7; }

/* MEA produits */
.related-wrapper,
.mea-products-grid {
  background-color: var(--cream);
  margin: 2rem 0;
}

.mea-products-grid {
  border-radius: var(--radius);
  padding: 2rem;
}

.mea-products-grid .columns-5 {
  justify-content: space-between;
  width: 100%;
  margin-top: 2rem;
}

ul.products.columns-5 {
  justify-content: space-between;
  margin-left: 0;
  width: 100%;
}


/* ==================== */
/* 9d. Promo card       */
/* ==================== */

.promo-card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 350px;
  background: rgba(63, 73, 65);
}

.promo-card .text {
  width: 33%;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 1.6rem;
  height: 100%;
  z-index: 2;
  padding: 4rem;
  text-align: center;
}

.promo-card .image { width: 67%; }


/* ==================== */
/* 9e. Réassurance      */
/* ==================== */

.grid.reassurance {
  background: var(--chrome-100);
  color: var(--forest);
  padding: 16px 20px;
  border-radius: var(--radius);
}

.reassurance {
  display: grid;
  column-gap: 1.2rem;
  row-gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  flex: 1 1 auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

.reassurance h3 { color: var(--forest); }
.reassurance p  { padding-right: 20px; }

.reassurance ion-icon {
  font-size: 31px;
  margin-bottom: 10px;
}

.reassurance > div {
  text-align: left;
  border-right: 1px solid var(--sage-pale);
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}

.reassurance a.cta-text { margin-top: auto; }


/* ==================== */
/* 9f. Posts / articles */
/* ==================== */

.posts-grid { grid-template-columns: repeat(4, 1fr); }

.post-card {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: space-between;
  border-radius: var(--radius);
  background: var(--chrome-100);
  padding: 1rem;
  gap: 1rem;
}

.img-post-card {
  width: 100%;
  height: 190px;
  overflow: hidden;
  border-radius: var(--radius);
}

.img-post-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.img-post-text {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: space-between;
}

.post-card h3 {
  font-size: 1.1rem;
  line-height: 1.1;
  font-weight: 500;
}

.post-card a {
  color: var(--secondary);
  font-weight: 700;
  margin-top: auto;
}

section.section-actus,
.needs {
  border-top: 1px solid var(--chrome-400);
  padding-top: 1rem;
}

.column-4 { margin: 0; }


/* ==================== */
/* 9g. FAQ              */
/* ==================== */

.faq-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.faq-item { border-bottom: 1px solid #ddd; }

.faq-question {
  padding: 10px;
  cursor: pointer;
  background: #f5f5f5;
}

.faq-answer { display: none; padding: 10px; }

.faq-item.active .faq-answer { display: block; }

section.seo-text-hp {
    padding: 0 1rem;
}

/* ==================== */
/* 10. Listing produits */
/* ==================== */
.shoptimizer-sorting .woocommerce-pagination:first-of-type {
	display:none
}
.shoptimizer-category-banner h1 { color: var(--orange-complementary1); }

li.product {
  list-style: none;
  background-color: #fff;
}

li.product,
ul.products li.product img {
  border-radius: var(--radius);
}

ul.products { gap: 1.2rem; }

ul.products li.product:not(.product-category) { padding: 0 !important; }

ul.products li.product .woocommerce-LoopProduct-link {
  font-family: "bricolage-grotesque", sans-serif !important;
  font-size: 15px;
  font-weight: 600;
}

ul.products li.product .added_to_cart,
ul.products li.product .button {
  position: relative;
}

li.product .button {
  color: #18170f !important;
  background-color: #ffffff !important;
  border: .5px solid #18170f !important;
  width: 100% !important;
}

span.ckit-badge { font-size: 11px; }

.star-rating span { font-size: 1em !important; }

.woocommerce-card__header {
  background: var(--white);
  border-top: 1px solid var(--chrome-200);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  height: 110px;
}

.products .product::before { display: none !important; }

.categorie-front-card {
  display: flex;
  flex-direction: column;
  justify-content: baseline;
  align-items: baseline;
  align-content: flex-start;
  width: 299px;
  height: auto;
}

/* Animation hover image produit */
.hovering img {
  animation-name: hovering;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.hovering::after {
  content: "";
  width: 1px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  position: absolute;
  bottom: -35px;
  left: 40%;
  transform: translateX(-50%);
  animation-name: shadow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* Tags info clé fiche produit */
.info-cle-fiche-produit {
  display: flex;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
	margin:.8rem 0
}

.info-cle-item {
  background: #edf5f0;
  color: #1c4226;
  font-size: 11px;
  display: inline-block;
  margin-right: 12px;
  padding: 3px 8px;
  border-radius: var(--radius-xl);
  border: 1px solid #1c4226;
}

/* Sections texte + images */
.text-images {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.text-cta-column-wrap {
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: var(--cream-dark);
  padding: 16px 24px;
  color: #896a1a !important;
}

.text-cta-column-bottom { margin-top: auto; }

.products-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}


/* ==================== */
/* 11. Page produit     */
/* ==================== */

.single-product .site-content .col-full { margin: 0 auto; }

.product-dynamic-price { margin-bottom: 0; }

.product .woocommerce-product-rating { display: none; }

div.product .summary form.cart { margin: 0; }

h3.product-details {
  margin: 0 0 1.6rem;
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 500;
}

.product-second-section .left-column {
  border-top: 1px solid var(--chrome-300);
  padding-top: 1.6rem;
}


/* ==================== */
/* 12. Animations       */
/* ==================== */

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes hovering {
  from, to { transform: translate(0, 0px); }
  50%      { transform: translate(0, -15px); }
}

@keyframes shadow {
  from, to { width: 45%; opacity: 0.5; height: 16px; }
  50%      { width: 50%; opacity: 0.3; height: 20px; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim { opacity: 0; }
.anim.visible { animation: fadeUp 0.6s ease forwards; }
.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .scrolling-content { animation-play-state: paused; }
}

/* FOOTER */
    .footer {
  background: #0f0f0f;
  color: #d1d1d1;
  font-size: 14px;
  line-height: 1.6;
}

.footer a {
  color: #cfcfcf;
  text-decoration: none;
  transition: 0.3s;
}

.footer a:hover {
  color: #ffffff;
}

.footer-container {
  max-width: 1400px;
  margin: auto;
  padding: 60px 20px 30px;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-logo {
  color: #fff;
  font-size: 22px;
  margin-bottom: 15px;
}

.footer-col h3 {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 15px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 8px;
}

.brand p {
  margin-bottom: 20px;
}

.newsletter label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
}

.newsletter-form {
  display: flex;
}

.newsletter-form input {
  flex: 1;
  padding: 10px;
  border: none;
  background: #1b1b1b;
  color: white;
}

.newsletter-form button {
  padding: 10px 16px;
  border: none;
  background: #ffffff;
  color: black;
  cursor: pointer;
  font-weight: 600;
}

.footer-middle {
  border-top: 1px solid #2a2a2a;
  margin-top: 40px;
  padding-top: 30px;
}

.footer-reassurance {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-reassurance .item {
  font-size: 14px;
  color: #e5e5e5;
}

.footer-bottom {
  border-top: 1px solid #2a2a2a;
  margin-top: 30px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.payment-methods img {
  height: 24px;
  margin-left: 10px;
}

/* responsive */

@media (max-width: 1100px) {

  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
  }

}

@media (max-width: 768px) {

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-reassurance {
    flex-direction: column;
  }

}

@media (max-width: 480px) {

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
  }

}
/* ==================== */
/* 13. Media queries    */
/* ==================== */

/* --- ≥ 1200px --- */
@media (min-width: 1200px) {
  :root { --gutter: 5rem; }
}

/* --- ≥ 1500px --- */
@media (min-width: 1500px) {
  :root { --gutter: 16rem; }
}

/* --- ≥ 993px --- */
@media (min-width: 993px) {
  ul.products.columns-3 li.product { width: 31.02%; }

  ul.products li.product:not(.product-category) {
    padding-bottom: 1.2rem;
    padding: 1.2rem;
  }

  .columns-4 ul.products li.product,
  .cross-sells .columns-4 li.product,
  .related .columns-4 li.product,
  .upsells .columns-4 li.product {
    float: left;
    width: 22.97%;
    margin: 0 auto;
  }

  .columns-5 ul.products li.product,
  .cross-sells .columns-5 li.product,
  .related .columns-5 li.product,
  .upsells .columns-5 li.product {
    width: 17.98%;
  }
}

/* --- ≤ 1024px --- */
@media (max-width: 1024px) {
  .top-grid    { grid-template-columns: repeat(2, 1fr); }
  .bottom-grid { grid-template-columns: 1fr; }
}

/* --- ≤ 993px (tablette / mobile) --- */
@media (max-width: 993px) {
  /* Layout général */
  .col-full {
    width: 100vw;
    margin: 0;
    padding: 1rem;
  }
    .single-product .woocommerce-breadcrumb {
padding-left:1rem;
		padding-right:1rem
    }
  .archive-header .col-full { padding: 0 1rem; }

  #primary.content-area { margin-right: 0 !important; }

  /* Hero */
  .hero-container,
  .mea-section-homePage-container {
    flex-direction: column;
  }

  /* Réassurance */
  .reassurance {
    grid-template-columns: repeat(1, 1fr);
  }

  .reassurance > div {
    text-align: left;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--chrome-200);
  }

  /* Header */
 /* .main-header .site-header-cart {
    top: calc(-14px + 55px / 2) !important;
  }*/

  .main-header.col-ful,
  .site-branding {
    padding: 0 !important;
  }

  /* Page produit */
  /*  .single-product .col-full {
    width: 100vw;
    margin: 0;
    padding: 0;
  }
*/
  .content-area { padding: 1rem; }

  .woocommerce-message { display: none; }

  .pdp-complementary--add-to-cart a {
    padding: 8px 14px;
    font-size: 12px;
    color: #111;
    border: none;
    background: linear-gradient(180deg, #ebebeb, #eee 130%) no-repeat;
    font-weight: 600;
  }

  span.pdp-complementary--title a {
    font-weight: 800;
    font-size: 16px;
  }

  .single-product:has(.archive-header .woocommerce-message) .content-area {
    padding-top: 0;
  }
}

/* --- ≤ 900px --- */
@media (max-width: 900px) {
  .besoins-header        { grid-template-columns: 1fr; gap: 1rem; }
  .besoins-grid          { grid-template-columns: 1fr 1fr; }
  .reassurance-inner     { grid-template-columns: 1fr 1fr; gap: 16px; }
  .reassurance-item      { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 12px 0; }
  .reassurance-item:nth-child(even) { padding-left: 24px; }
  .mea-france            { grid-template-columns: 1fr; text-align: center; padding: 40px; }
  .univers-grid          { grid-template-columns: 1fr 1fr; }
  .formules-grid         { grid-template-columns: 1fr; }
  .footer-inner          { grid-template-columns: 1fr 1fr; }
  .mea-fumeurs           { grid-template-columns: 1fr; gap: 2rem; }
  .mf-accent             { width: 80px; height: 5px; }
  .acces-grid            { grid-template-columns: 1fr; }
  .container             { padding: 0 20px; }
  .section               { padding: 56px 0; }
  .editoriale            { padding: 48px 24px; }
}

/* --- ≤ 780px --- */
@media screen and (max-width: 780px) {
  #primary.content-area { margin-right: 0 !important; }
}

/* --- ≤ 768px --- */
@media (max-width: 768px) {
  /* Scroll horizontal bento */
  .top-grid,
  .bottom-grid,
  .grid.reassurance {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 10px;
  }

  .grid.reassurance { padding-left: 7px; }

  .mea-card,
  .grid.reassurance > div {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  .grid.reassurance div { border: 0 !important; }

  .grid.reassurance > div:first-child { padding-left: 12px; }

  /* Scrollbars discrètes */
  .top-grid::-webkit-scrollbar,
  .bottom-grid::-webkit-scrollbar,
  .grid.reassurance::-webkit-scrollbar {
    height: 6px;
  }

  .top-grid::-webkit-scrollbar-thumb,
  .bottom-grid::-webkit-scrollbar-thumb,
  .grid.reassurance::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: var(--radius-lg);
  }
}

/* --- ≤ 765px --- */
@media (max-width: 765px) {
  span.hero__title-Labeuhtique { font-size: 3rem; }

  .section#hero__container { padding: 1rem; }

  .hero__title-punchline { font-size: 2rem !important; }

  .posts-grid { grid-template-columns: repeat(1, 1fr); }
}

/* --- ≤ 600px --- */
@media (max-width: 600px) {
  .besoins-grid                    { grid-template-columns: 1fr; }
  .univers-grid                    { grid-template-columns: 1fr; }
  .footer-inner                    { grid-template-columns: 1fr; }
  nav .nav-links,
  nav .nav-actions .btn            { display: none; }
}

    }
@media (max-width: 992px) {
  .main-header, .site-branding {
	  padding:0!important;
	  
  }
	 .col-full-nav .shoptimizer-primary-navigation.col-full {
		 display: flex;
        flex-direction: column;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: stretch;
        height: 100%;
}
.shoptimizer-primary-navigation.col-full {
    max-width: 100%;
}
}
@media (min-width: 993px) {
    .primary-navigation .sub-menu-wrapper ul.products.columns-3 li.product {
        width:100%
    }

}
@media (max-width: 993px) {
		.landing ul.products.columns-5 {
		display: flex;
        overflow-x: scroll;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-top: 5px;
        padding-right: 1em;
        padding-bottom: 20px;
        margin-left: -15px;
        padding-left: 1.25em;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
	}
	.landing ul.products.columns-5 li {
			display: flex;
        max-width: 320px;
        min-width: 320px;
        flex-direction: column;
        scroll-snap-align: center;
	}
}
@media (max-width: 992px) {
    .main-header, .site-branding {
        padding: 0!important;
    }
}

.woocommerce-error {
    background-color: #b84a2e;
}
.woocommerce-info {
    background-color: #edf5f0;
}
.woocommerce-message {
    background-color: #2d6a3f;
}
body.single-product .woocommerce-message .message-inner {
    background-color: #2d6a3f;
}
.shoptimizer-primary-navigation.col-full
 {
    max-width: 100%;
}

.footer-col p {
	color:var(--chrome-50)
}

@media (max-width: 992px) {
    body:not(.mobile-toggled).sticky-m .site-header {
        position: fixed;
        z-index: 100;
        top: 0;
        box-shadow: 0 1px 15px rgba(0, 0, 0, 0.08);
    }
}
.drawer-open .shoptimizer-mini-cart-wrap {
	padding-bottom:50px
}

li#cgkit-tab-title-additional_information, #cgkit-tab-title-reviews {
    display: none;
}
.sorting-end .woocommerce-pagination {
	display:block
}