/*
======================================
Header C2Pack — alignement sur la maquette
Chargé en dernier (MediaManager::setBWAHeaderMedias) pour surcharger
header.css, header_resp.css, new-header*.css et templates/default*.css.

Structure :
  1. Barre d'infos (accroche + note Trustpilot)
  2. Bandeau rose « Vous êtes en Suisse ? »
  3. Header principal (logo / recherche / icônes)
  4. Barre de navigation (bwa_menu, voir module)
  5. Bandeau rose « Livraison gratuite… » (.header-message)
======================================
*/

:root {
  --c2p-header-max-width  : 1280px;
  --c2p-header-gutter     : 24px;
  --c2p-header-text       : #333;
  --c2p-header-text-muted : #777;
  --c2p-header-grey-bg    : #f5f5f5;
  --c2p-header-input-bg   : #f4f4f6;
  --c2p-header-accent     : var(--color-primary, #e34d93);
}

/* Icônes fines (style de la maquette) */
.header-icon,
.bwa-menu__burger-icon {
  display         : block;
  width           : 28px;
  height          : 28px;
  fill            : none;
  stroke          : currentColor;
  stroke-width    : 1.5;
  stroke-linecap  : round;
  stroke-linejoin : round;
}

/*
--------------------------------------
1. Barre d'infos
--------------------------------------
*/

.header-infos {
  background : var(--c2p-header-grey-bg);
}

.header-infos .header-infos-container:not(.swiss-msg) {
  padding    : 6px 0;
  background : var(--c2p-header-grey-bg);
}

.header-infos .header-infos-container:not(.swiss-msg) .container-primary.header-infos-inner {
  box-sizing      : border-box;
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  gap             : 16px;
  width           : 100%;
  max-width       : var(--c2p-header-max-width);
  margin          : 0 auto;
  padding         : 0 var(--c2p-header-gutter);
}

.header-infos .infos-links {
  flex        : 1 1 auto;
  align-items : flex-start;
  row-gap     : 2px;
}

.header-infos .infos-links .top-banner-main-title,
[data-is-desktop="true"] .header-infos h1.top-banner-main-title {
  margin      : 0;
  color       : var(--c2p-header-text-muted);
  font-family : var(--typo-primary);
  font-size   : 12px;
  font-weight : 400;
  line-height : 1.5;
  text-align  : left;
}

.header-infos .infos-links .top-banner-main-title strong {
  color       : var(--c2p-header-text);
  font-weight : 600;
}

.header-infos .temporary-message-container a {
  font-size : 12px;
}

.header-infos-trustpilot {
  flex      : 0 0 auto;
  width     : 260px;
  min-height: 20px;
}

/*
--------------------------------------
2. Bandeau Suisse
--------------------------------------
*/

.header-infos .header-infos-container.swiss-msg {
  padding    : 8px 0;
  background : var(--c2p-header-accent);
}

.header-infos .header-infos-container.swiss-msg a {
  color       : #fff;
  font-family : var(--typo-primary);
  font-size   : 14px;
  font-weight : 600;
  line-height : 20px;
}

/*
--------------------------------------
3. Header principal
--------------------------------------
*/

header#header.main-header {
  padding-bottom : 0;
  background     : #fff;
}

header#header.main-header .header-burger,
header#header.main-header .header-logo,
header#header.main-header .header-actions {
  padding : 0;
}

/* Logo */
header#header.main-header .header-logo a {
  display : block;
}

header#header.main-header .header-logo img {
  display    : block;
  width      : 80px;
  height     : 80px;
  max-width  : none;
  max-height : none;
  padding    : 0;
  object-fit : contain;
}

/* Recherche */
header#header.main-header .header-search .search-widget form {
  position : relative;
}

header#header.main-header .header-search .search-widget input[type=text] {
  box-sizing   : border-box;
  width        : 100%;
  height       : 44px;
  padding      : 0 48px 0 20px;
  border       : none;
  border-radius: 999px;
  background   : var(--c2p-header-input-bg);
  box-shadow   : none;
  color        : var(--c2p-header-text);
  font-family  : var(--typo-primary);
  font-size    : 14px;
  transition   : box-shadow .2s;
}

header#header.main-header .header-search .search-widget input[type=text]::placeholder {
  color   : #aaa;
  opacity : 1;
}

header#header.main-header .header-search .search-widget input[type=text]:focus {
  outline    : none;
  box-shadow : 0 0 0 2px hsla(var(--color-primary-base, 332, 78%), var(--color-primary-base-lightness, 62%), .3);
}

header#header.main-header .header-search .search-widget button[type=submit] {
  position   : absolute;
  top        : 50%;
  right      : 12px;
  height     : auto;
  padding    : 4px;
  border     : none;
  background : transparent;
  color      : #999;
  transform  : translateY(-50%);
  transition : color .2s;
  cursor     : pointer;
}

header#header.main-header .header-search .search-widget button[type=submit]:hover {
  color : var(--c2p-header-accent);
}

header#header.main-header .header-search .search-widget button[type=submit] .header-icon {
  width  : 20px;
  height : 20px;
  stroke-width : 2;
}

header#header.main-header .header-search .search-widget button[type=submit] span {
  display : none;
}

/* Icônes contact / compte / panier / langue */
header#header.main-header .header-actions {
  display         : flex;
  justify-content : flex-end;
  align-items     : center;
  gap             : 32px;
}

header#header.main-header .header-actions > * + * {
  margin-left : 0;
}

/* displayNav2 (compte + panier) n'a pas de conteneur propre : on aligne ses enfants */
header#header.main-header .header-actions .link-icon a {
  display     : flex;
  align-items : center;
  color       : var(--c2p-header-text);
  transition  : color .2s;
}

header#header.main-header .header-actions .link-icon a:hover {
  color : var(--c2p-header-accent);
}

header#header.main-header .header-actions .link-icon .header-icon {
  transition : transform .2s;
}

header#header.main-header .header-actions .link-icon a:hover .header-icon {
  transform : scale(1.1);
}

/* Libellés masqués visuellement (la maquette n'affiche que les icônes), gardés pour l'accessibilité */
header#header.main-header .header-actions .link-icon__text:not(.pro-mention) {
  position    : absolute !important;
  width       : 1px;
  height      : 1px;
  margin      : -1px;
  padding     : 0;
  overflow    : hidden;
  clip        : rect(0 0 0 0);
  white-space : nowrap;
  border      : 0;
}

/* Mention « PRO » des comptes professionnels : petite pastille sous l'icône */
header#header.main-header .header-actions .link-icon__text.pro-mention {
  position       : absolute;
  left           : 50%;
  bottom         : -12px;
  display        : block;
  margin         : 0;
  padding        : 0 4px;
  border-radius  : 3px;
  background     : var(--c2p-header-accent);
  color          : #fff;
  font-size      : 9px;
  font-weight    : 700;
  line-height    : 13px;
  transform      : translateX(-50%);
}

/* Pastille du panier */
header#header.main-header .header-actions .link-icon .cart-products-count {
  position    : absolute;
  top         : -8px;
  right       : -10px;
  width       : 20px;
  height      : 20px;
  border-radius: 50%;
  background  : var(--c2p-header-accent);
  color       : #fff;
  font-size   : 10px;
  font-weight : 700;
  line-height : 20px;
  text-align  : center;
  transform   : none;
}

header#header.main-header .header-actions .cart-preview.inactive .cart-products-count {
  display : none;
}

/* Langue : drapeau rond */
header#header.main-header .header-actions .language-wrapper .dropdown-menu--header {
  display    : flex;
  margin     : 0;
  padding    : 0;
  list-style : none;
}

header#header.main-header .header-actions .language-wrapper .dropdown-item {
  display : block;
  padding : 0;
}

header#header.main-header .header-actions .language-wrapper img {
  display       : block;
  width         : 24px;
  height        : 24px;
  border-radius : 50%;
  object-fit    : cover;
}

/* Burger (mobile) */
.header-burger #bwa-menu__burger {
  margin : 0;
  padding: 8px;
  color  : var(--c2p-header-text);
}

.header-burger .bwa-menu__burger-icon {
  width  : 24px;
  height : 24px;
}

/* Menu mobile ouvert : on masque le bouton de gestion des cookies (tarteaucitron).
   Il est en position fixe avec un z-index maximal, alors que le tiroir est dans le contexte
   d'empilement de .header-nav (z-index 5) : il passait donc par-dessus le menu. */
body:has(.bwa-menu__top__wrapper.is--active) #tarteaucitronIcon,
body:has(.bwa-menu__top__wrapper.is--active) #tarteaucitronManager {
  display : none !important;
}

/*
--------------------------------------
4. Barre de navigation
--------------------------------------
*/

.header-nav {
  box-shadow : none;
}

/*
--------------------------------------
5. Bandeau « Livraison gratuite… »
--------------------------------------
*/

.header-message {
  padding    : 8px 0;
  background : var(--c2p-header-accent);
  color      : #fff;
}

.header-message .header-message-text {
  font-family    : var(--typo-primary);
  font-size      : 14px;
  font-weight    : 600;
  letter-spacing : 0;
  line-height    : 20px;
  text-transform : uppercase;
}

/*
======================================
Desktop (>= 1200px)
======================================
*/

@media (min-width: 1200px) {

  /* Logo | recherche (max 672px, centrée) | icônes — dans un conteneur de 1280px */
  header#header.main-header {
    grid-template-columns :
      minmax(var(--c2p-header-gutter), 1fr)
      auto
      minmax(0, calc(var(--c2p-header-max-width) - 2 * var(--c2p-header-gutter) - 80px - 280px))
      auto
      minmax(var(--c2p-header-gutter), 1fr);
    padding               : 8px 0;
  }

  header#header.main-header .header-logo {
    grid-column     : 2;
    justify-content : flex-start;
  }

  header#header.main-header .header-search {
    grid-column  : 3;
    grid-row     : 3;
    justify-self : center;
    box-sizing   : border-box;
    width        : 100%;
    max-width    : calc(672px + 64px);
    padding      : 0 32px;
  }

  header#header.main-header .header-actions {
    grid-column : 4;
  }
}

/*
======================================
Mobile / tablette (< 1200px)
======================================
*/

@media (max-width: 1199px) {

  .header-infos .infos-links {
    display : none;
  }

  .header-infos .header-infos-container:not(.swiss-msg) .container-primary.header-infos-inner {
    justify-content : center;
  }

  .header-infos-trustpilot {
    width : 240px;
  }

  .header-infos-trustpilot .trustpilot-widget {
    text-align : center;
  }

  /* Burger à gauche | logo centré | compte + panier à droite ; recherche en dessous */
  header#header.main-header {
    grid-template-columns : 16px 1fr auto 1fr 16px;
    padding               : 8px 0 0;
  }

  header#header.main-header .header-burger {
    grid-column  : 2;
    grid-row     : 3;
    justify-self : start;
  }

  header#header.main-header .header-logo {
    grid-column     : 3;
    grid-row        : 3;
    margin          : 0;
    justify-content : center;
  }

  header#header.main-header .header-logo img {
    width  : auto;
    height : 48px;
  }

  header#header.main-header .header-actions {
    grid-column  : 4;
    grid-row     : 3;
    justify-self : end;
    gap          : 16px;
  }

  /* Contact et langue sont dans le menu burger sur mobile */
  header#header.main-header .header-actions .contact-link,
  header#header.main-header .header-actions .language-wrapper {
    display : none;
  }

  header#header.main-header .header-actions .header-icon {
    width  : 24px;
    height : 24px;
  }

  header#header.main-header .header-search {
    grid-column : 2 / -2;
    grid-row    : 4;
    padding     : 8px 0 12px;
  }

  header#header.main-header .header-search .search-widget input[type=text] {
    height : 40px;
  }
}