/* ==========================================================================
   fm-header.css — Header Fêtez-Moi

   Chargée depuis templates/_partials/head.tpl, après le bloc stylesheets,
   pour passer en dernier dans la cascade. La section `assets:` du theme.yml
   n'est pas appliquée par PrestaShop 9 sur ce thème — vérifié.

   Trois rangées produites par templates/_partials/header.tpl :
     .fm-utility   bandeau fin, défile avec la page
     .fm-bar       logo · recherche · connexion & panier — reste collée
     .fm-nav       catégories — reste collée sous la précédente

   Tout ici ne concerne que le desktop : les rangées portent hidden-md-down.
   Le header mobile vit dans .header-nav et n'est pas touché.
   ========================================================================== */

:root {
  --fm-accent: #e2017b;        /* rose du logo */
  --fm-ink: #292929;
  --fm-muted: #8b8b8b;
  --fm-rule: #ececec;
  --fm-rule-soft: #f2f2f2;
}

/* Le thème pose overflow:hidden sur <main>, ce qui neutralise position:sticky
   sur tout descendant. On le libère et on maîtrise le débordement horizontal
   au niveau du body à la place. */
main { overflow: visible !important; }
body { overflow-x: hidden; }

/* Le header colle en haut. Le top négatif laisse le bandeau fin défiler hors
   champ, puis les rangées 2 et 3 s'accrochent. Le !important est nécessaire :
   le thème positionne #header en absolute. */
#header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #fff;
  /* Aucune séparation interne : un seul bloc blanc. Une ombre très douce
     détache le header du contenu, sans trait. */
  box-shadow: 0 4px 14px -10px rgba(0, 0, 0, .22);
}

/* Liens de service de la ligne principale : Nous contacter, Mon compte,
   Commander. Discrets, pour laisser le bouton de connexion seul en avant. */
.fm-link {
  font-size: 13px;
  color: var(--fm-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.fm-link:hover { color: var(--fm-accent); }

/* Le bloc « Follow Us On Social » n'a aucun réseau configuré : sa liste est
   vide et seul le titre s'afficherait. On masque le bloc dans ce cas. */
.fm-bar__actions .social_follow:has(ul:empty) { display: none; }
.fm-bar__actions .social_follow h4 {
  display: inline-block;
  margin: 0 8px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--fm-muted);
  text-transform: none;
  letter-spacing: 0;
}
.fm-bar__actions .social_follow ul { display: inline-flex; gap: 6px; margin: 0; padding: 0; }

/* ==========================================================================
   Rangée 1 — logo, recherche, actions
   ========================================================================== */
.fm-bar { background: #fff; }
.fm-bar__inner { border: 0; }
.fm-bar__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 68px;
}

/* Logo : 200x89 à l'origine, contraint à 40px de haut */
.fm-bar__logo { flex: 0 0 auto; display: block; line-height: 0; }
.fm-bar__logo img { display: block; height: 40px; width: auto; max-width: none; }

/* ------------------------------ recherche -------------------------------- */
/* ps_searchbar rend une icône qui ouvre un .dropdown-menu. Sur desktop on
   veut une barre toujours visible : on masque l'icône et on remet le
   dropdown dans le flux. Le markup reste intact pour le mobile, où
   responsive.js déplace #_desktop_search_block vers #_mobile_search_block. */
.fm-bar__search { flex: 1 1 auto; min-width: 0; max-width: 640px; }
#header .fm-bar__search #_desktop_search_block { width: 100%; }
#header .fm-bar__search .block-search { position: static; width: 100%; float: none; }
#header .fm-bar__search .search-icon { display: none !important; }

#header .fm-bar__search #search_widget {
  display: block !important;
  position: static !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Le thème habille le champ et le bouton (fond gris, padding, bouton
   transparent). On reprend la main sur cette seule barre : sélecteurs
   ancrés sur #header et !important, sinon les règles du thème gagnent. */
#header .fm-bar__search #search_widget form {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  max-width: none !important;
  height: 46px;
  margin: 0 !important;
  padding: 0 5px 0 20px !important;
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#header .fm-bar__search #search_widget form:focus-within {
  border-color: var(--fm-accent) !important;
  box-shadow: 0 0 0 3px rgba(226, 1, 123, .10) !important;
}
#header .fm-bar__search #search_widget input[type="text"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 12px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  color: var(--fm-ink);
}
#header .fm-bar__search #search_widget input[type="text"]::placeholder { color: #b0b0b0; }
/* Le thème place ce bouton en position:absolute top:0 right:0, il se colle
   donc au coin au lieu de suivre le flex. On le remet dans le flux. */
#header .fm-bar__search #search_widget button {
  position: static !important;
  align-self: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--fm-accent) !important;
  color: #fff !important;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
#header .fm-bar__search #search_widget button:hover { background: #c2016a !important; }
#header .fm-bar__search #search_widget button i { color: #fff; }

/* ------------------------------ actions ---------------------------------- */
/* margin-left:auto pousse le groupe au bord droit : sans lui il se colle
   juste après la recherche, qui est plafonnée à 640px. */
.fm-bar__actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Bouton de connexion : l'action qui débloque les prix sur ce site B2B.
   C'est le seul élément plein du header, volontairement. */
.fm-cta {
  display: inline-block;
  padding: 11px 22px;
  background: var(--fm-ink);
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .18s ease;
}
.fm-cta:hover { background: var(--fm-accent); }

.fm-action {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fm-ink);
  text-decoration: none;
  font-size: 13px;
  transition: color .15s ease;
}
.fm-action:hover { color: var(--fm-accent); }
.fm-action i { font-size: 20px; }
.fm-action__label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------ panier ----------------------------------- */
/* Le template du thème rend, avant le bloc panier, un lien « vider le panier »
   (icône poubelle) dès qu'il y a des articles. Dans le header il déséquilibre
   la ligne et propose une action destructive à un clic. Vider son panier se
   fait sur la page panier : on le retire d'ici. */
#header .empty_cart_header { display: none !important; }

.fm-cart { position: relative; }
.fm-cart .blockcart { position: relative; }
.fm-cart .button_cart a.desktop {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--fm-ink);
  text-decoration: none;
  font-size: 21px;
  line-height: 1;
  transition: color .15s ease;
}
.fm-cart .button_cart a.desktop:hover { color: var(--fm-accent); }
/* Le thème colore ce compteur en #ff0099 — soit du rose sur mon fond rose,
   donc illisible. Sélecteur ancré sur #header et !important pour reprendre
   la main sur la couleur et le positionnement. */
/* Le thème arrondit ce lien à 100% et lui pose un fond noir au survol :
   un gros rond noir apparaît derrière l'icône. On ne garde que le passage
   au rose sur l'icône elle-même. */
#header .fm-cart .button_cart a.desktop,
#header .fm-cart .button_cart a.desktop:hover,
#header .fm-cart .button_cart a.desktop:focus,
#header .fm-cart .button_cart a.desktop:active {
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Le thème fixe ce lien à 40px alors que l'icône n'en occupe que 17 :
     le badge, ancré au bord droit, se retrouvait à 14px de l'icône.
     On fait épouser le lien à son contenu. */
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
#header .fm-cart .item_count {
  position: absolute !important;
  top: -4px !important;
  right: -8px !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--fm-accent) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  box-shadow: 0 0 0 2px #fff;
}

/* Un panier vide ne dit rien d'utile : on masque le compteur à zéro */
.fm-cart .blockcart[data-cartitems="0"] .item_count { display: none; }

.fm-cart .popup_cart {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 1010;
}
.fm-cart .blockcart[data-cartitems="0"] .popup_cart { display: none !important; }

/* ==========================================================================
   Rangée 2 — catégories
   ========================================================================== */
.fm-nav {
  background: #fff;
  padding-bottom: 6px;
}
.fm-bar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.fm-bar__nav .menu,
.fm-bar__nav #_desktop_top_menu { min-width: 0; }
.fm-bar__nav .clearfix { display: none; }

.fm-bar__nav ul.top-menu[data-depth="0"] {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fm-bar__nav ul.top-menu[data-depth="0"] > li { position: relative; margin: 0; }

.fm-bar__nav ul.top-menu[data-depth="0"] > li > a {
  display: block;
  padding: 15px 13px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fm-ink);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color .18s ease;
}
.fm-bar__nav ul.top-menu[data-depth="0"] > li > a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 8px;
  height: 2px;
  background: var(--fm-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}
.fm-bar__nav ul.top-menu[data-depth="0"] > li > a:hover,
.fm-bar__nav ul.top-menu[data-depth="0"] > li.current > a { color: var(--fm-accent); }
.fm-bar__nav ul.top-menu[data-depth="0"] > li > a:hover::after,
.fm-bar__nav ul.top-menu[data-depth="0"] > li.current > a::after { transform: scaleX(1); }

/* Les chevrons d'accordéon de ps_mainmenu sont réservés au mobile */
.fm-bar__nav .navbar-toggler,
.fm-bar__nav .collapse-icons { display: none !important; }

/* ------------------------------ sous-menus -------------------------------- */
/* ps_mainmenu émet des .collapse Bootstrap (display:none). On reprend la main :
   le sous-menu reste dans le flux, masqué par l'opacité, révélé au survol du
   parent. Pas de dépendance au JS du thème. */
.fm-bar__nav .sub-menu,
.fm-bar__nav .popover.sub-menu {
  display: block !important;
  position: absolute !important;
  /* Le JS du thème force top = hauteur du header sur les .js-sub-menu, ce qui
     décalerait le menu de 163px vers le bas. On reprend la main. */
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 230px;
  max-width: 320px;
  padding: 8px 0;
  margin: 0;
  background: #fff;
  border: 1px solid var(--fm-rule);
  border-top: 2px solid var(--fm-accent);
  border-radius: 0;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1010;
}
.fm-bar__nav ul.top-menu[data-depth="0"] > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Les derniers éléments ouvriraient leur menu hors écran : on les aligne à droite */
.fm-bar__nav ul.top-menu[data-depth="0"] > li:nth-last-child(-n+2) > .sub-menu { left: auto !important; right: 0 !important; }

.fm-bar__nav .sub-menu ul.top-menu { display: block; margin: 0; padding: 0; list-style: none; }
.fm-bar__nav .sub-menu li { margin: 0; }
.fm-bar__nav .sub-menu a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #555;
  text-decoration: none;
  white-space: normal;
  transition: background .15s ease, color .15s ease;
}
.fm-bar__nav .sub-menu a::after { display: none; }
.fm-bar__nav .sub-menu a:hover { background: #fbf3f7; color: var(--fm-accent); }

/* Troisième niveau : liste simple plutôt qu'une cascade */
.fm-bar__nav .sub-menu .sub-menu,
.fm-bar__nav .sub-menu .collapse {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  min-width: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.fm-bar__nav .sub-menu .sub-menu a { padding-left: 32px; font-size: 12px; color: #8b8b8b; }

/* ==========================================================================
   Écrans intermédiaires
   ========================================================================== */
@media (max-width: 1400px) {
  .fm-bar__inner { gap: 22px; }
  .fm-bar__search { max-width: 520px; }
  .fm-bar__nav ul.top-menu[data-depth="0"] > li > a { padding: 15px 9px; letter-spacing: .02em; }
  .fm-bar__nav ul.top-menu[data-depth="0"] > li > a::after { left: 9px; right: 9px; }
}
@media (max-width: 1250px) {
  .fm-bar__inner { gap: 16px; }
  .fm-bar__logo img { height: 34px; }
  .fm-bar__search { max-width: 380px; }
  .fm-cta { padding: 10px 16px; font-size: 11px; }
  .fm-bar__nav ul.top-menu[data-depth="0"] > li > a { padding: 15px 6px; font-size: 10.5px; }
  .fm-bar__nav ul.top-menu[data-depth="0"] > li > a::after { left: 6px; right: 6px; }
}

/* ==========================================================================
   Entrée « Rendez-vous commercial » du menu + page Calendly
   ========================================================================== */
/* ps_mainmenu marque les pages CMS avec class="cms-page" : point d'accroche
   stable, contrairement à l'identifiant qui diffère entre environnements. */
#header .fm-bar__nav ul.top-menu[data-depth="0"] > li.cms-page > a {
  color: var(--fm-accent);
}
#header .fm-bar__nav ul.top-menu[data-depth="0"] > li.cms-page > a::after {
  transform: scaleX(1);
  opacity: .35;
}
#header .fm-bar__nav ul.top-menu[data-depth="0"] > li.cms-page > a:hover::after { opacity: 1; }

/* Calendrier Calendly sur la page rendez-vous */
.fm-calendly { margin: 28px 0 8px; }
.fm-calendly iframe {
  display: block;
  width: 100%;
  min-height: 720px;
  border: 0;
}
.fm-calendly__todo {
  padding: 18px 20px;
  background: #fff6fa;
  border: 1px dashed var(--fm-accent);
  color: var(--fm-accent);
  font-size: 14px;
}
@media (max-width: 767px) {
  .fm-calendly iframe { min-height: 900px; }
}