/* ════════════════════════════════════════════════════════════════════
   lefelin — Header « Classique affiné » (maquette Header - Classique affiné.html)
   Habille la coquille Minimog (annonce, barre, icônes, quizz) et style la
   nav bespoke lf-nav (méga-menu accordéon + carte « Coup de cœur »).
   Palette : page #faf6ee · encre #2b2218 · sub #897b64 · ligne #ece2cf
             accent #9d6a30 · accent-soft #f1e4cf · beige #f1e8d8 · beige-deep #eaddc4
   Chargé APRÈS header.css et lf-header.css → gagne à spécificité égale.
   L'état « verre dépoli » est porté par .m-header.lf-scrolled (lf-header-v2.js).
   ════════════════════════════════════════════════════════════════════ */

/* ── Barre d'annonce ── */
.m-announcement-bar.m-gradient.m-color-default {
  background: #f1e8d8;
  border-bottom: 1px solid #eaddc4;
}
.m-announcement-bar .m-announcement-bar__item,
.m-announcement-bar .m-announcement-bar__content {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b2218; /* encre (demande Matthieu : phrase en noir) */
}

/* ── Barre : beige plein, filet #ece2cf ── */
.m-header .m-gradient.m-color-default {
  background: #f1e8d8;
}
.m-header .m-header__desktop .m-header__bg,
.m-header .m-header__mobile {
  border-bottom: 1px solid #ece2cf;
}
.m-header .m-header__desktop,
.m-header .m-header__mobile {
  color: #2b2218;
  transition: background 0.3s, box-shadow 0.3s;
}
.m-header .m-header__desktop .m-header__inner {
  min-height: 72px;
  align-items: stretch;
}
.m-header .m-header__desktop .m-header__left,
.m-header .m-header__desktop .m-header__right {
  align-items: center;
}
.m-header .m-header__desktop .m-header__center {
  align-items: stretch;
}

/* ── Verre dépoli au scroll (classe posée par lf-header-v2.js) ── */
.m-header.lf-scrolled .m-header__desktop.m-gradient.m-color-default,
.m-header.lf-scrolled .m-header__mobile.m-gradient.m-color-default {
  background: rgba(241, 232, 216, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 14px 40px -26px rgba(60, 46, 28, 0.55);
}
.m-header.lf-scrolled .m-header__desktop .m-header__bg,
.m-header.lf-scrolled .m-header__mobile {
  border-bottom-color: rgba(236, 226, 207, 0.6);
}
/* le wrapper sticky Minimog porte sa propre ombre → on la retire,
   la nôtre est sur la barre */
.m-header.stuck .m-header__wrapper,
.m-header.header-sticky-always .m-header__wrapper:not(.m-unset-shadow) {
  box-shadow: none;
}

/* ════════════════ Nav bespoke lf-nav ════════════════ */
.lf-nav {
  display: flex;
  align-items: stretch;
  gap: 26px;
  height: 100%;
  font-family: "Manrope", system-ui, sans-serif;
}
/* +8px entre « Accueil » (1er) et « Arbre à chat » uniquement */
.lf-nav > :first-child {
  margin-right: 8px;
}
.lf-nav .lf-nl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #5a4f3e;
  white-space: nowrap;
  transition: color 0.18s;
}
.lf-nav .lf-nl:hover,
.lf-nav .lf-nl--active {
  color: #9d6a30;
}
.lf-nav .lf-chev {
  transition: transform 0.2s;
}
.lf-nav .lf-hasmenu:hover .lf-chev,
.lf-nav .lf-hasmenu.open .lf-chev {
  transform: rotate(180deg);
}

/* ── Panneau dropdown : collé au filet bas du header ── */
.lf-hasmenu {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.lf-menu {
  position: absolute;
  left: 0;
  top: 100%;
  /* beige foncé EXACT du header (#f1e8d8) : opaque, sans backdrop-filter —
     la saturation du flou décalait la teinte vs la barre */
  background: #f1e8d8;
  border: 1px solid #eaddc4;
  border-top: none;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 40px 80px -34px rgba(60, 46, 28, 0.72);
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px);
  /* sortie rapide (durée de l'état caché) ; l'ouverture est ralentie ci-dessous */
  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
  z-index: 60;
  white-space: normal;
}
/* pont invisible : pas de fermeture en glissant vers le panneau */
.lf-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
.lf-hasmenu:hover .lf-menu,
.lf-hasmenu:focus-within .lf-menu,
.lf-hasmenu.open .lf-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-duration: 0.22s, 0.22s, 0.22s;
}

/* ── Méga-menu : 2 colonnes (liste accordéon + mosaïque produits) ── */
.lf-menu.lf-mega {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  width: 648px;
  max-width: calc(100vw - 32px);
  /* petit viewport : le panneau ne dépasse jamais le bas de l'écran */
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.lf-m-panels {
  min-width: 0;
}
/* panneau liste simple (ex. Blog) */
.lf-hasmenu--list .lf-menu {
  padding: 12px;
  min-width: 250px;
}
.lf-m-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lf-mega .lf-m-list {
  border-right: 1px solid #eaddc4;
  padding-right: 16px;
}
.lf-m-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #5a4f3e;
  /* les libellés FR longs (« Panier de transport pour chat ») passent à la
     ligne au lieu de déborder de la colonne sur la mosaïque */
  white-space: normal;
  line-height: 1.25;
  transition: background 0.16s, color 0.16s;
}
.lf-m-cat > span:first-child {
  min-width: 0;
}
.lf-m-catwrap.active > .lf-m-cat,
.lf-m-cat:hover {
  background: #fdf8ef; /* pilule claire sur panneau foncé */
  color: #9d6a30;
}
.lf-m-cat .lf-m-ind {
  display: inline-flex;
  opacity: 0.4;
  transition: transform 0.18s, opacity 0.18s;
}
.lf-m-catwrap.active > .lf-m-cat .lf-m-ind {
  transform: rotate(90deg);
  opacity: 0.85;
  color: #9d6a30;
}
/* accordéon sous-collections */
.lf-m-sub {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease;
}
.lf-m-catwrap.active > .lf-m-sub {
  grid-template-rows: 1fr;
}
.lf-m-sub-inner {
  min-height: 0;
  overflow: hidden;
  padding-left: 14px;
  margin: 1px 0 3px;
}
.lf-m-sub a {
  display: block;
  position: relative;
  padding: 9px 12px 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: #6a5c46;
  border-radius: 9px;
  white-space: normal;
  line-height: 1.3;
  transition: background 0.16s, color 0.16s;
}
.lf-m-sub a::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: #eaddc4;
}
.lf-m-sub a:hover {
  background: #fdf8ef;
  color: #9d6a30;
}

/* ── Mosaïque produits (1 panneau par catégorie, swap au survol) ── */
.lf-m-mosaic {
  display: none;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.lf-m-mosaic.is-active {
  display: flex;
  animation: lfMosaicIn 0.22s ease;
}
@keyframes lfMosaicIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lf-mg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}
.lf-mg-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: #2b2218;
  line-height: 1.15;
}
.lf-mg-all {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9d6a30;
  white-space: nowrap;
  border-bottom: 1px solid rgba(157, 106, 48, 0.35);
  transition: border-color 0.16s;
}
.lf-mg-all:hover {
  border-color: #9d6a30;
}
.lf-mg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lf-mg-card {
  display: flex;
  flex-direction: column;
  background: #fdf8ef; /* carte claire sur panneau foncé */
  border-radius: 13px;
  padding: 9px 9px 11px;
  min-width: 0;
  transition: transform 0.18s, box-shadow 0.18s;
}
.lf-mg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(60, 46, 28, 0.55);
}
.lf-mg-im {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 8px;
}
.lf-mg-im img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* packshots entiers, jamais coupés */
  padding: 5px;
  display: block;
}
.lf-mg-card b {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #2b2218;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.16s;
}
.lf-mg-card:hover b {
  color: #9d6a30;
}
.lf-mg-meta {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #897b64;
}
.lf-mg-star {
  color: #dd9b3f;
  font-size: 11px;
}
.lf-mg-dot {
  opacity: 0.6;
}
.lf-mg-meta i {
  font-style: normal;
  font-family: "Fraunces", Georgia, serif;
  font-size: 13.5px;
  color: #9d6a30;
}
/* entrée de menu « produit » → carte seule pleine largeur */
.lf-mg-grid--solo {
  grid-template-columns: minmax(0, 1fr);
}
.lf-mg-card--solo .lf-mg-im {
  aspect-ratio: 16 / 10;
}
.lf-mg-card--solo b {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 17px;
}
.lf-mg-badge {
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9d6a30;
  margin-bottom: 4px;
}
/* laptop étroit : panneau resserré, la mosaïque reste 2 colonnes fluides */
@media (max-width: 1280px) {
  .lf-menu.lf-mega {
    grid-template-columns: 210px minmax(0, 1fr);
    width: 566px;
    gap: 14px;
  }
  .lf-mg-title {
    font-size: 16px;
  }
}

/* ── (Legacy, conservé pour rollback) carte « Coup de cœur » unique ── */
.lf-m-feat {
  display: none;
  flex-direction: column;
  background: #fdf8ef; /* carte claire sur panneau foncé */
  border-radius: 15px;
  padding: 15px;
  transition: transform 0.2s;
}
.lf-m-feat.is-active {
  display: flex;
}
.lf-m-feat:hover {
  transform: translateY(-3px);
}
.lf-m-im {
  height: 150px;
  border-radius: 11px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}
.lf-m-im img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* packshots entiers, jamais coupés */
  padding: 6px;
  display: block;
}
.lf-m-tg {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9d6a30;
}
.lf-m-feat b {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  margin-top: 6px;
  color: #2b2218;
  line-height: 1.18;
}
.lf-m-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 2px;
}
.lf-m-stars .lf-m-s {
  color: #dd9b3f;
  letter-spacing: 2px;
  font-size: 13px;
}
.lf-m-stars .lf-m-rev {
  font-size: 12px;
  color: #897b64;
  font-weight: 600;
}
.lf-m-feat i {
  font-style: normal;
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  color: #9d6a30;
  margin-top: 3px;
}
.lf-m-feat .lf-m-go {
  margin-top: 13px;
  font-size: 13px;
  font-weight: 700;
  color: #9d6a30;
}

/* ── Icônes (recherche, compte, panier) : cases arrondies, hover ocre ── */
.m-header .m-header__desktop .m-header__right .m-header__search,
.m-header .m-header__desktop .m-header__right .m-header__account,
.m-header .m-header__desktop .m-header__right .m-cart-icon-bubble {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 11px;
  color: #2b2218;
  transition: background 0.18s, color 0.18s;
}
.m-header .m-header__desktop .m-header__right .m-header__search:hover,
.m-header .m-header__desktop .m-header__right .m-header__account:hover,
.m-header .m-header__desktop .m-header__right .m-cart-icon-bubble:hover {
  background: rgba(157, 106, 48, 0.12);
  color: #9d6a30;
}
.m-header .m-header__desktop .m-cart-icon-bubble {
  position: relative;
  margin-right: 4px;
}
.m-header .m-svg-icon--medium,
.m-header .m-svg-icon--medium-small {
  width: 18px;
  height: 18px;
}
/* pastille compteur panier */
.m-header .m-cart-count-bubble.m-cart-count-bubble {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #9d6a30;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}
.m-header .m-cart-count-bubble.m\:hidden {
  display: none;
}

/* ── Bouton QUIZZ : pilule blanche → accent (écrase le <style> du snippet,
      qui arrive après dans le DOM et utilise !important) ── */
.m-header .felin-header-quiz-btn {
  background: #fff !important;
  color: #9d6a30 !important;
  border: 1.5px solid #f1e4cf !important;
  box-shadow: none !important;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 9px 17px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.m-header .felin-header-quiz-btn:hover {
  background: #9d6a30 !important;
  color: #fff !important;
  border-color: #9d6a30 !important;
  box-shadow: 0 10px 24px -12px rgba(157, 106, 48, 0.9) !important;
  transform: none;
}
.m-header .felin-header-quiz-btn .felin-header-quiz-icon {
  color: inherit !important;
}
.m-header .felin-header-quiz-shine {
  display: none;
}

/* ════════════════ Tiroir mobile : navigation en accordéon ════════════════ */
.lf-mnav {
  list-style: none;
  margin: 0;
  padding: 10px 4px;
  font-family: "Manrope", system-ui, sans-serif;
}
.lf-mm-item {
  display: block;
}
.lf-mm-row {
  display: flex;
  align-items: center;
}
.lf-mm-row .lf-mm-link,
.lf-mm-row .lf-mm-sublink {
  flex: 1;
  min-width: 0;
}
.lf-mm-link {
  display: block;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 600;
  color: #2b2218;
}
.lf-mm-sublink {
  display: block;
  padding: 12px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: #6a5c46;
}
.lf-mm-sublink--l3 {
  padding-left: 34px;
  font-size: 14.5px;
  position: relative;
}
.lf-mm-sublink--l3::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: #eaddc4;
}
.lf-mm-toggle {
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  padding: 0;
  color: #8a7a63;
  cursor: pointer;
}
.lf-mm-toggle svg {
  transition: transform 0.28s ease, color 0.2s;
}
.lf-mm-haschildren.open > .lf-mm-row .lf-mm-toggle {
  color: #9d6a30;
}
.lf-mm-haschildren.open > .lf-mm-row .lf-mm-toggle svg {
  transform: rotate(180deg);
}
.lf-mm-haschildren.open > .lf-mm-row .lf-mm-link,
.lf-mm-haschildren.open > .lf-mm-row .lf-mm-sublink {
  color: #9d6a30;
}
/* dépliage smooth vers le bas (même mécanique que le méga-menu desktop) */
.lf-mm-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.lf-mm-haschildren.open > .lf-mm-sub {
  grid-template-rows: 1fr;
}
.lf-mm-sub-inner {
  min-height: 0;
  overflow: hidden;
  padding-left: 10px;
}

/* ── Réduction d'espace sous 1280px pour que tout tienne sur une ligne ── */
@media (max-width: 1440px) {
  .lf-nav {
    gap: 16px;
  }
  .lf-nav .lf-nl {
    font-size: 14px;
  }
}

/* ════════ Fix mobile : logo centré, jamais à cheval sur les icônes ════════
   Barre mobile Minimog = flex 3/6/3. Le cluster droit (recherche+panier+quizz
   ~137px) dépasse sa colonne 3/12 et, en justify-end, déborde vers la gauche
   sous le logo. Correctif : menu + cluster droit prennent leur largeur de
   contenu, le logo occupe le centre flexible et son image est fixée à 54px
   (sinon la .m-image en aspect-ratio se rend à 0 si le conteneur est auto).
   Scopé .m-header__mobile → sans effet sur le header desktop. */
.m-header .m-header__mobile .m-menu-button,
.m-header .m-header__mobile .m-header__mobile-right {
  flex: 0 0 auto !important;
  width: auto !important;
}
.m-header .m-header__mobile .m-logo--mobile {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
.m-header .m-header__mobile .m-logo--mobile .m-logo__image {
  width: 54px !important;
  margin: 0 auto;
}

/* Header transparent DÉSACTIVÉ — retour à la nav beige opaque d'origine
   (transparent_on_top=false dans header-group.json). */