/* ════════════════════════════════════════════════════════════════════
   lefelin — Header « Crème éditorial » (aligné sur le footer lf-footer)
   Habillage du header Minimog existant : fond beige #f1e8d8, encre,
   filets #ddcfae, hover ocre #8a5a28. La transparence sur l'accueil
   (texte blanc sur le hero, opacity 0 sur .m-header__bg) est préservée.
   ════════════════════════════════════════════════════════════════════ */

/* ── Barre d'annonce : style « eyebrow » du footer ── */
.m-announcement-bar.m-gradient.m-color-default {
  background: #f1e8d8;
  border-bottom: 1px solid #ddcfae;
}
.m-announcement-bar .m-announcement-bar__item {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a5a28;
}
.m-announcement-bar .m-announcement-bar__item a {
  color: inherit;
}
.m-announcement-bar button,
.m-announcement-bar svg {
  color: #473c2e;
}

/* ── Fonds du header (barre, sticky, fond de dropdown, mobile, mega) ── */
.m-header .m-gradient.m-color-default {
  background: #f1e8d8;
}
/* états « stuck » sur l'accueil : Minimog repeint .m-header__desktop /
   .m-header__mobile en dur → on repasse derrière avec la même spécificité+1 */
.m-header.m-header.stuck.transparent-on-top .m-header__mobile,
.m-header.m-header.stuck.transparent-on-top .m-header__desktop,
.m-header.m-header.stuck.transparent-on-top .m-menu-bar,
.m-header.m-header.header-sticky-always.transparent-on-top .m-header__mobile,
.m-header.m-header.header-sticky-always.transparent-on-top .m-header__desktop,
.m-header.m-header.header-sticky-always.transparent-on-top .m-menu-bar {
  background-color: #f1e8d8;
}
.m-header.stuck.transparent-on-top .m-header__desktop,
.m-header.header-sticky-always.transparent-on-top .m-header__desktop {
  border-bottom: 1px solid #ddcfae;
}

/* ── Filet bas (porté par .m-header__bg : il suit l'opacité du fond,
      donc invisible quand le header est transparent sur le hero) ── */
.m-header .m-header__desktop .m-header__bg {
  border-bottom: 1px solid #ddcfae;
}
.m-header .m-header__mobile {
  border-bottom: 1px solid #ddcfae;
}
.m-header.transparent-on-top:not(.stuck, .header-sticky-always) .m-header__mobile {
  border-bottom-color: transparent;
}

/* ── Texte & liens : encre, graisse footer (600), hover ocre ── */
/* même en mode transparent sur le hero de l'accueil : texte NOIR (encre),
   plus de blanc — le thème lit cette variable pour l'état transparent */
.m-header {
  --header-transparent-text-color: 26, 20, 16;
}
/* et on garde le logo encre (pas la variante blanche « transparente ») */
.m-header .m-logo__image-default {
  display: flex !important;
}
.m-header .m-logo__image-transparent {
  display: none !important;
}
.m-header .m-header__desktop,
.m-header .m-header__mobile {
  color: #1a1410;
}
.m-header .m-menu__link--main {
  font-weight: 600;
  transition: color 0.2s;
}
.m-header .m-menu__link:hover,
.m-header .m-menu__link--main:hover {
  color: #8a5a28;
}

/* liens des sous-menus (dropdowns) : encre PLEINE (le thème les met en
   rgba(34,34,34,.6), illisible sur beige) + hover ocre sur fond arrondi */
.m-header .m-sub-menu__item .m-menu__link.m-menu__link,
.m-header .m-mega-menu .m-menu__link.m-menu__link {
  color: #1a1410;
  font-weight: 500;
  border-radius: 10px;
  transition: color 0.2s, background-color 0.2s;
}
.m-header .m-sub-menu__item .m-menu__link.m-menu__link:hover,
.m-header .m-mega-menu .m-menu__link.m-menu__link:hover {
  color: #8a5a28;
  background-color: rgba(176, 122, 60, 0.14);
}
/* icônes (recherche, compte, panier) */
.m-header .m-header__right a,
.m-header .m-header__right button {
  transition: color 0.2s;
}
.m-header .m-header__right a:hover,
.m-header .m-header__right button:hover {
  color: #8a5a28;
}

/* ── Dropdowns : panneau beige foncé (comme header/footer), items en pilules ── */
.m-header .m-menu__item--dropdown .m-mega-menu.m-gradient.m-color-default {
  background: #f1e8d8;
  border: 1px solid #e0cfb4;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 10px;
  box-shadow: 0 28px 48px -28px rgba(42, 33, 23, 0.35);
  overflow: visible;
}
/* sous-sous-menu : RACCORDÉ au panneau (même papier, jonction nette à
   gauche — le filet droit du panneau sert de séparateur — arrondi à droite) */
.m-header .m-menu__item--dropdown .m-mega-menu__column {
  background: #f1e8d8;
  border: 1px solid #e0cfb4;
  border-left: 0;
  border-radius: 0 16px 16px 0;
  padding: 10px;
  box-shadow: 18px 28px 48px -28px rgba(42, 33, 23, 0.3);
  /* 27px = padding interne Minimog (16) + mon padding (10) + bord (1) :
     colle le flyout EXACTEMENT au bord externe droit du panneau */
  left: calc(100% + 27px);
  top: -26px; /* aligne le haut du flyout sur le haut du panneau (1er item) */
}
/* items : typo encre, espacement régulier, flèche discrète */
.m-header .m-sub-menu__item .m-menu__link.m-menu__link {
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.35;
}
.m-header .m-sub-menu__item .m-menu__sub-arrow {
  color: #8a7a63;
  transition: color 0.2s, transform 0.2s;
}
.m-header .m-sub-menu__item .m-menu__link:hover .m-menu__sub-arrow {
  color: #8a5a28;
  transform: translateX(2px);
}

/* ── Popup recherche : papier crème (élément déplacé hors du header) ── */
.m-search-popup .m-search-popup--wrapper.m-gradient.m-color-default {
  background: #fdf8ef;
  border-bottom: 1px solid #ddcfae;
}

/* ── Tiroir menu mobile : papier crème, liens encre ── */
.m-menu-drawer .m-menu-drawer__wrapper {
  background: #fdf8ef;
}
.m-menu-drawer .m-menu-mobile__link,
.m-menu-drawer .m-menu-drawer__navigation a {
  color: #1a1410;
  font-weight: 600;
}
.m-menu-drawer .m-menu-mobile__link:hover {
  color: #8a5a28;
}