/* =============================================================

 * MANERGO — Composants UI (V2) — Reconstruction propre

 * Hero + Products + Cards + Chips + Btn + Mobile simple

 * ============================================================= */



/* ============================================================

 * .m-hero — cover image full-width

 * ============================================================ */

.wp-block-cover.m-hero {

  min-height: 760px;

  padding: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: stretch;

  color: var(--m-text-inverse);

  font-family: var(--m-font-sans);

  overflow: hidden;

  position: relative;

  isolation: isolate;

}



.wp-block-cover.m-hero .wp-block-cover__inner-container {

  width: 100%;

  max-width: none !important;

  margin: 0;

  padding-top: var(--m-space-24);

  padding-bottom: var(--m-space-24);

  padding-left: 5vw !important;

  padding-right: 5vw !important;

  box-sizing: border-box;

  display: flex;

  flex-direction: column;

  gap: var(--m-space-8);

  position: relative;

  z-index: 10;

}



.wp-block-cover.m-hero > img.wp-block-cover__image-background {

  z-index: 0;

}



/* Titre blanc */

.wp-block-cover.m-hero h1.m-hero__title,

.wp-block-cover.m-hero .wp-block-heading.m-hero__title,

.wp-block-cover.m-hero.is-light h1.m-hero__title {

  font-family: var(--m-font-sans) !important;

  font-size: var(--m-fs-display-hero) !important;

  font-weight: var(--m-fw-light) !important;

  line-height: 1.04 !important;

  color: #ffffff !important;

  margin: 0 !important;

  max-width: 1100px;

  letter-spacing: -0.01em;

  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);

}



.wp-block-cover.m-hero p.m-hero__body,

.wp-block-cover.m-hero.is-light p.m-hero__body {

  font-family: var(--m-font-sans) !important;

  font-size: var(--m-fs-body-l) !important;

  font-weight: var(--m-fw-regular) !important;

  line-height: var(--m-lh-relaxed) !important;

  color: rgba(255, 255, 255, 0.95) !important;

  margin: var(--m-space-2) 0 0 !important;

  max-width: 900px;

  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);

}



.wp-block-cover.m-hero .wp-block-group.m-hero__footer {

  margin-top: var(--m-space-6);

  display: flex !important;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  gap: var(--m-space-8);

  flex-wrap: wrap;

}



.wp-block-cover.m-hero .wp-block-buttons.m-hero__ctas {

  display: flex !important;

  gap: var(--m-space-4) !important;

  flex-wrap: wrap;

  margin: 0;

}



.wp-block-cover.m-hero .wp-block-button.m-btn {

  margin: 0 !important;

  position: relative;

  z-index: 11;

}



.wp-block-cover.m-hero .wp-block-button.m-btn > .wp-block-button__link,

.wp-block-cover.m-hero .wp-block-button.m-btn > a.wp-block-button__link.wp-element-button {

  display: inline-flex !important;

  align-items: center;

  gap: 10px;

  padding: 16px 28px !important;

  border-radius: var(--m-radius-md) !important;

  font-family: var(--m-font-sans) !important;

  font-size: 16px !important;

  font-weight: var(--m-fw-medium) !important;

  line-height: 1 !important;

  text-decoration: none !important;

  cursor: pointer;

  transition: all var(--m-duration-normal) var(--m-ease-standard) !important;

  white-space: nowrap;

  border: 1px solid transparent !important;

}



.wp-block-cover.m-hero .wp-block-button.m-btn--primary > .wp-block-button__link,

.wp-block-cover.m-hero .wp-block-button.m-btn--primary > a.wp-block-button__link.wp-element-button {

  background-color: #3643BA !important;

  background-image: none !important;

  color: #ffffff !important;

  border-color: #3643BA !important;

}

.wp-block-cover.m-hero .wp-block-button.m-btn--primary > .wp-block-button__link:hover {

  background-color: #2c3699 !important;

  color: #ffffff !important;

  border-color: #2c3699 !important;

}



.wp-block-cover.m-hero .wp-block-button.m-btn--outline-inverse > .wp-block-button__link,

.wp-block-cover.m-hero .wp-block-button.m-btn--outline-inverse > a.wp-block-button__link.wp-element-button {

  background-color: rgba(255, 255, 255, 0.10) !important;

  background-image: none !important;

  color: #ffffff !important;

  border: 2px solid #ffffff !important;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

}

.wp-block-cover.m-hero .wp-block-button.m-btn--outline-inverse > .wp-block-button__link:hover {

  background-color: rgba(255, 255, 255, 0.25) !important;

}



/* Hero responsive */

@media (max-width: 1100px) {

  .wp-block-cover.m-hero { min-height: 640px; }

  .wp-block-cover.m-hero h1.m-hero__title { font-size: clamp(40px, 6vw, 64px) !important; }

}

@media (max-width: 700px) {

  .wp-block-cover.m-hero { min-height: 560px; }

  .wp-block-cover.m-hero h1.m-hero__title { font-size: clamp(32px, 8vw, 48px) !important; }

  .wp-block-cover.m-hero p.m-hero__body { font-size: 16px !important; }

  .wp-block-cover.m-hero .wp-block-group.m-hero__footer { flex-direction: column; align-items: flex-start; gap: var(--m-space-6); }

  .wp-block-cover.m-hero .wp-block-button.m-btn > .wp-block-button__link { padding: 14px 22px !important; font-size: 15px !important; }

}



/* ============================================================

 * .m-btn--with-icon : icône flèche Manergo

 * ============================================================ */

.wp-block-button.m-btn--with-icon > .wp-block-button__link::after,

.wp-block-button.m-btn--with-icon > a.wp-block-button__link.wp-element-button::after,

a.m-btn--with-icon::after {

  content: '';

  display: inline-block;

  width: 14px;

  height: 14px;

  margin-left: 12px;

  background-color: currentColor;

  -webkit-mask-image: url('/wp-content/themes/blocksy-child/assets/icons/fleche.svg');

  mask-image: url('/wp-content/themes/blocksy-child/assets/icons/fleche.svg');

  -webkit-mask-size: contain;

  mask-size: contain;

  -webkit-mask-repeat: no-repeat;

  mask-repeat: no-repeat;

  -webkit-mask-position: center;

  mask-position: center;

  transition: transform var(--m-duration-normal) var(--m-ease-standard);

}

.wp-block-button.m-btn--with-icon > .wp-block-button__link:hover::after,

a.m-btn--with-icon:hover::after {

  transform: translate(2px, -2px);

}



/* ============================================================

 * SECTION .m-products

 * ============================================================ */

.m-products,

.wp-block-group.m-products,

.wp-block-group.alignfull.m-products {

  padding: var(--m-space-12) 0 var(--m-space-16) !important;

  margin-left: calc(50% - 50vw) !important;

  margin-right: calc(50% - 50vw) !important;

  margin-top: 0 !important;

  margin-bottom: 0 !important;

  background-color: #ffffff !important;

  font-family: var(--m-font-sans);

  width: 100vw !important;

  max-width: 100vw !important;

}



.m-products__container,

.wp-block-group.m-products__container,

div.wp-block-group.m-products__container {

  max-width: none !important;

  width: 100% !important;

  margin-left: 0 !important;

  margin-right: 0 !important;

  padding-left: 5vw !important;

  padding-right: 5vw !important;

  box-sizing: border-box !important;

  position: relative;

}



/* Flèche jaune Manergo à droite du titre */

.m-products__container::after {

  content: '';

  position: absolute;

  top: var(--m-space-12);

  right: 5vw;

  width: 64px;

  height: 64px;

  background-color: #F2B205;

  -webkit-mask-image: url('/wp-content/themes/blocksy-child/assets/icons/fleche.svg');

  mask-image: url('/wp-content/themes/blocksy-child/assets/icons/fleche.svg');

  -webkit-mask-size: contain;

  mask-size: contain;

  -webkit-mask-repeat: no-repeat;

  mask-repeat: no-repeat;

  transform: scaleY(-1);

  pointer-events: none;

}



.m-products .m-products__overline,

.m-products__overline {

  font-family: var(--m-font-sans) !important;

  font-size: var(--m-fs-overline) !important;

  font-weight: var(--m-fw-medium) !important;

  text-transform: uppercase !important;

  letter-spacing: 0.12em !important;

  color: #E84A2E !important;

  margin: 0 0 var(--m-space-3) !important;

  display: block;

}



.wp-block-group.m-products__title,

.m-products .m-products__title,

.m-products__title {

  font-family: var(--m-font-sans) !important;

  font-size: var(--m-fs-display-2xl) !important;

  font-weight: var(--m-fw-light) !important;

  color: #124245 !important;

  margin: 0 0 var(--m-space-10) !important;

  letter-spacing: -0.02em !important;

  line-height: 1.0 !important;

}



.m-products__grid,

.wp-block-group.m-products__grid,

.wp-block-group.is-layout-flex.m-products__grid {

  display: flex !important;

  flex-direction: row !important;

  flex-wrap: nowrap !important;

  gap: var(--m-space-2) !important;

  align-items: stretch;

  min-height: 460px;

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  padding: 0 !important;

}



/* ============================================================

 * .m-card-product — desktop : flex 1/5 dans la rangée

 * ============================================================ */

.m-products__grid .wp-block-group.m-card-product,

.m-products__grid > .m-card-product {

  flex: 1 1 0 !important;

  min-width: 0 !important;

  max-width: none !important;

  width: auto !important;

  position: relative;

  background-color: #EDE4DD !important;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  isolation: isolate;

  transition: background-color 400ms ease;

}



.m-card-product .m-card-product__media {

  position: relative;

  height: 75%;

  flex: 0 0 auto;

  background-color: var(--m-neutral-200);

  overflow: hidden;

  transition: height 500ms cubic-bezier(0.2, 0, 0, 1);

}

.m-card-product--open .m-card-product__media {

  height: 22%;

}

.m-card-product .m-card-product__media .wp-block-image,

.m-card-product .m-card-product__media figure {

  margin: 0 !important;

  height: 100%;

  width: 100%;

  display: block;

}

.m-card-product .m-card-product__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.m-card-product .m-card-product__content,

.m-card-product__content,

.wp-block-group.m-card-product__content {

  flex: 1 1 auto;

  padding: var(--m-space-6) var(--m-space-5) var(--m-space-5);

  display: flex !important;

  flex-direction: column !important;

  gap: var(--m-space-2);

  background-color: #EDE4DD !important;

  background-image: none !important;

  position: relative;

  z-index: 2;

}



.m-card-product .m-card-product__header,

.wp-block-group.m-card-product__header,

.m-card-product__header {

  background: transparent !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  justify-content: flex-start !important;

  gap: var(--m-space-3) !important;

}



.m-card-product .m-card-product__title,

.m-card-product h3.m-card-product__title {

  font-family: var(--m-font-sans) !important;

  font-size: 16px !important;

  font-weight: var(--m-fw-medium) !important;

  text-transform: uppercase !important;

  letter-spacing: 0.04em !important;

  line-height: 1.2 !important;

  color: #124245 !important;

  margin: 0 !important;

  flex: 1 1 auto;

}



.m-card-product__toggle,

p.m-card-product__toggle {

  width: 32px !important;

  height: 32px !important;

  flex: 0 0 auto;

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  color: #E84A2E !important;

  line-height: 1 !important;

  margin: 0 !important;

  transition: transform 400ms cubic-bezier(0.2, 0, 0, 1);

}



.m-card-product__toggle::before {

  font-family: "Font Awesome 6 Free" !important;

  font-weight: 900 !important;

  content: '\f067';

  font-size: 22px;

  line-height: 1;

  display: inline-block;

}

.m-card-product--open .m-card-product__toggle::before {

  content: '\f068';

}



/* Chips */

.m-card-product__chips {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: var(--m-space-3);

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition: max-height 500ms cubic-bezier(0.2, 0, 0, 1), opacity 300ms ease;

}

.m-card-product--open .m-card-product__chips {

  max-height: 400px;

  opacity: 1;

}



.m-chip {

  display: inline-flex;

  align-items: center;

  padding: 6px 14px;

  margin: 0;

  border: 1px solid #124245;

  background: transparent;

  color: #124245;

  font-family: var(--m-font-sans);

  font-size: 12px;

  font-weight: var(--m-fw-medium);

  letter-spacing: 0.02em;

  white-space: nowrap;

  cursor: pointer;

  user-select: none;

  transition: background-color 200ms, color 200ms;

}

.m-chip:hover {

  background-color: #124245 !important;

  color: #ffffff !important;

}

.m-chip:active { transform: scale(0.97); }



/* CTA bouton vert */

.m-card-product__cta {

  margin-top: var(--m-space-4);

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition: max-height 500ms cubic-bezier(0.2, 0, 0, 1), opacity 300ms ease;

}

.m-card-product--open .m-card-product__cta {

  max-height: 80px;

  opacity: 1;

}



a.m-card-product__cta-btn,

.wp-block-button.m-card-product__cta-btn-wrap > .wp-block-button__link,

.wp-block-button.m-card-product__cta-btn-wrap > a.wp-block-button__link.wp-element-button {

  display: inline-flex !important;

  align-items: center;

  gap: 10px !important;

  padding: 16px 28px !important;

  background-color: #124245 !important;

  background-image: none !important;

  color: #ffffff !important;

  font-family: var(--m-font-sans) !important;

  font-size: 16px !important;

  font-weight: var(--m-fw-medium) !important;

  line-height: 1 !important;

  text-decoration: none !important;

  border: 1px solid #124245 !important;

  border-radius: var(--m-radius-md) !important;

  transition: background-color 200ms ease !important;

  white-space: nowrap;

}

.wp-block-button.m-card-product__cta-btn-wrap > .wp-block-button__link:hover {

  background-color: #0e3638 !important;

}



/* ============================================================

 * RESPONSIVE — mobile <= 900px : slider horizontal avec peek

 * ============================================================ */

@media (max-width: 900px) {

  .m-products,

  .wp-block-group.m-products {

    padding: var(--m-space-8) 0 var(--m-space-10) !important;

  }



  .m-products__title {

    font-size: clamp(36px, 8vw, 56px) !important;

  }



  .m-products__container {

    padding-left: 0 !important;

    padding-right: 0 !important;

  }

  .m-products__container > .m-products__overline,

  .m-products__container > .m-products__title {

    padding-left: 5vw;

    padding-right: 5vw;

  }



  .m-products__container::after {

    width: 40px;

    height: 40px;

    top: var(--m-space-6);

    right: 5vw;

  }



  /* Grid : SLIDER HORIZONTAL avec scroll-snap */

  .m-products__grid,

  .wp-block-group.m-products__grid,

  .wp-block-group.is-layout-flex.m-products__grid {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    gap: var(--m-space-3) !important;

    align-items: stretch !important;

    width: 100% !important;

    max-width: 100% !important;

    min-height: auto !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;

    scroll-padding-left: 5vw;

    -webkit-overflow-scrolling: touch;

    padding: 0 5vw 8px !important;

    margin: 0 !important;

    scrollbar-width: none;

    -ms-overflow-style: none;

  }

  .m-products__grid::-webkit-scrollbar {

    display: none;

  }



  /* Chaque card prend 85vw → le bord gauche de la suivante (peek 10vw) est visible */

  .m-products__grid > .m-card-product,

  .m-products__grid .wp-block-group.m-card-product {

    flex: 0 0 85vw !important;

    width: 85vw !important;

    max-width: 85vw !important;

    height: auto !important;

    min-width: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    background-color: #EDE4DD !important;

    cursor: default !important;

    overflow: visible !important;

    scroll-snap-align: start;

    scroll-snap-stop: always;

  }



  /* Dernière card : marge droite pour finir le scroll proprement */

  .m-products__grid > .m-card-product:last-child,

  .m-products__grid .wp-block-group.m-card-product:last-child {

    margin-right: 5vw;

  }



  /* Image en haut, 200px */

  .m-card-product .m-card-product__media {

    width: 100% !important;

    height: 200px !important;

    margin: 0 !important;

    position: relative !important;

    flex: 0 0 auto !important;

  }

  .m-card-product .m-card-product__media img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

  }



  /* Content */

  .m-card-product .m-card-product__content {

    flex: 1 1 auto !important;

    height: auto !important;

    padding: var(--m-space-5) var(--m-space-6) var(--m-space-6) !important;

    display: flex !important;

    flex-direction: column !important;

    gap: var(--m-space-3) !important;

  }



  /* Toggle caché */

  .m-card-product .m-card-product__toggle,

  p.m-card-product__toggle {

    display: none !important;

  }



  /* Titre */

  .m-card-product .m-card-product__title {

    color: #124245 !important;

    font-size: 20px !important;

    font-weight: 500 !important;

    line-height: 1.2 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.04em !important;

    margin: 0 !important;

  }



  /* Chips toujours visibles */

  .m-card-product .m-card-product__chips {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

    max-height: none !important;

    opacity: 1 !important;

    overflow: visible !important;

    margin-top: 0 !important;

  }



  /* CTA toujours visible */

  .m-card-product .m-card-product__cta {

    display: flex !important;

    max-height: none !important;

    opacity: 1 !important;

    overflow: visible !important;

    margin-top: var(--m-space-2) !important;

  }



  .m-card-product .wp-block-button.m-card-product__cta-btn-wrap > .wp-block-button__link {

    padding: 14px 22px !important;

    font-size: 15px !important;

  }



  /* Indicateur visuel : petit hint en bas du slider */

  .m-products__grid::after {

    content: '← faire glisser →';

    /* On le cache car le peek de la 2e card suffit comme indicateur */

    display: none;

  }

}



@media (max-width: 500px) {

  .m-products__grid > .m-card-product,

  .m-products__grid .wp-block-group.m-card-product {

    flex: 0 0 88vw !important;

    width: 88vw !important;

    max-width: 88vw !important;

  }

  .m-card-product .m-card-product__media {

    height: 160px !important;

  }

  .m-card-product .m-card-product__title {

    font-size: 17px !important;

  }

}



/* ====== Manergo — Card produit + vidéo (compositions Gutenberg) V2 ====== */

.manergo-media-label{font-size:13px;font-weight:500;color:var(--m-brand-secondary,#124245);margin:28px 0 8px;}

.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper{border-radius:var(--m-radius-lg,12px);overflow:hidden;}

.manergo-product-card.wp-block-media-text{background:var(--m-brand-paper,#EDE4DD);border-radius:var(--m-radius-lg,12px);padding:18px;gap:20px;align-items:center;margin:28px 0;overflow:hidden;}

.manergo-product-card .wp-block-media-text__media{border-radius:10px;overflow:hidden;background:#fff;}

.manergo-product-card .wp-block-media-text__media img{border-radius:10px;display:block;}

.manergo-product-card .wp-block-media-text__content{padding:0;}

.manergo-product-card__eyebrow{font-size:12px;font-weight:500;color:var(--m-brown-400,#6E2A32);margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em;}

.manergo-product-card__title{font-size:22px !important;line-height:1.2;color:var(--m-brown-500,#380D14) !important;margin:0 0 12px !important;font-weight:500;}

.manergo-product-card__cta .wp-block-button__link{background:var(--m-brand-primary,#3643BA);color:#fff;border-radius:8px;font-size:14px;font-weight:500;padding:9px 18px;}

.manergo-product-card__cta .wp-block-button__link:hover{filter:brightness(1.08);}