/**
 * Roadloisirs — Header principal (.rl-header)
 * Figma : logo + barre de recherche + icônes d'actions
 *
 * Desktop : 108px, fond --rl-blanc, 3 zones en ligne
 * Mobile  : fond --rl-blanc, logo + icônes sur 1 ligne + search dessous
 */

/* ============================================================
   HEADER WRAPPER
   ============================================================ */

.rl-header {
  background-color: var(--rl-blanc);
  padding-block-start: 16px;
  position: relative;
}

/* ============================================================
   HEADER INNER — layout desktop
   ============================================================ */

.rl-header__inner {
  display: flex;
  align-items: center;
  gap: 196px;  /* Figma : 196px entre logo / search / actions */
  padding-inline: var(--rl-content-padding);  /* 52px */
}

@media (min-width: 1920px) {
  .rl-header__inner {
    padding-inline: 5rem;  /* 80px — Figma Desktop XL (1920px) */
  }
}

/* ============================================================
   LOGO
   {renderLogo} produit <a class="navbar-brand d-block"><img class="logo"></a>
   .rl-header__logo est un div conteneur — on stylise .navbar-brand en dessous.
   ============================================================ */

.rl-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rl-header__h1 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Lien généré par {renderLogo} */
.rl-header__logo .navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-decoration: none;
}

/* Image du logo */
.rl-header__logo .logo {
  display: block;
  height: 68px;
  width: auto;
  max-width: 130px;
}

/* ============================================================
   BARRE DE RECHERCHE — rendue par ps_searchbar (.rl-search)
   ============================================================ */

.rl-header__search {
  flex: 1 0 0;  /* Figma : flex-grow pour remplir l'espace disponible */
  max-width: var(--rl-search-max-width);  /* plafond 848px */
  min-width: 0;
}

/* Surcharge du rendu ps_searchbar */
.rl-search {
  position: relative;
}

.rl-search__form {
  display: flex;
  align-items: center;
  gap: 16px;
  border: var(--rl-search-border);
  border-radius: var(--rl-border-radius);
  background-color: var(--rl-blanc);
  padding: 8px 16px;
  cursor: pointer;
  width: 100%;
  max-width: var(--rl-search-max-width);
  margin: 0;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.rl-search__form:focus-within {
  border-color: var(--rl-bleu-fonce);
}

/* Neutralise ps_searchbar — float:right @768px, min-width:16.5rem @992px */
#search_widget.rl-search {
  float: none;
  min-width: 0;
}

/* Neutralise Hummingbird — #search_widget form input {bg:gray-100; border-radius:100rem; height:2.5rem; padding:…} */
#search_widget .rl-search__form .rl-search__input {
  background: transparent;
  border-radius: 0;
  height: auto;
  padding: 0;
}

.rl-search__btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--rl-bleu-fonce);
  cursor: pointer;
  flex-shrink: 0;
}

.rl-search__input {
  flex: 1 0 0;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--rl-font-primary);
  font-size: var(--rl-text-s);      /* 16px */
  font-weight: var(--rl-weight-bold);
  color: var(--rl-bleu-fonce);
  line-height: 1;
}

.rl-search__input::placeholder {
  color: var(--rl-bleu-fonce);
  opacity: 1;
}

.rl-search__input:focus::placeholder {
  color: var(--rl-bleu-fonce-20);
}

/* Dropdown résultats */
.rl-search__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline: 0;
  background-color: var(--rl-blanc);
  border: var(--rl-search-border);
  border-radius: var(--rl-border-radius);
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rl-search__results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rl-search__result-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--rl-bleu-fonce);
  transition: background-color 0.1s;
}

.rl-search__result-link:hover {
  background-color: var(--rl-blanc-2);
}

.rl-search__result-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.rl-search__result-name {
  margin: 0;
  font-size: var(--rl-text-s);
}

/* ============================================================
   ACTIONS DESKTOP — Mes favoris / Mon compte / Mon panier
   ============================================================ */

.rl-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.rl-header__action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--rl-border-radius);
  min-width: 90px;
  color: var(--rl-bleu-fonce);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  position: relative;
  transition: color 0.15s;
}

.rl-header__action-icon {
  display: block;
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
}

.rl-header__action-icon-wrap {
  position: relative;
  display: inline-flex;
}

.rl-header__action-label {
  font-family: var(--rl-font-primary);
  font-size: var(--rl-text-s);       /* 16px */
  font-weight: var(--rl-weight-bold);
  white-space: nowrap;
  line-height: 1;
}

/* Soulignement au hover */
.rl-header__action-btn::after {
  content: '';
  position: absolute;
  inset-block-end: 4px;
  inset-inline: 8px;
  height: 1px;
  background-color: var(--rl-orange-fonce);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.rl-header__action-btn:hover::after,
.rl-header__action-btn:focus-visible::after {
  transform: scaleX(1);
}

/* Badge panier */
.rl-header__cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  background-color: var(--rl-orange);
  color: #fff;
  font-family: var(--rl-font-primary);
  font-size: 11px;
  font-weight: var(--rl-weight-bold);
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding-inline: 4px;
}

/* ============================================================
   SÉPARATEUR BAS DE HEADER
   ============================================================ */

.rl-header__separator {
  width: 100%;
  height: 1px;
  background-color: var(--rl-bleu-fonce-20);
  margin-block-start: 16px;
}

/* ============================================================
   ACTIONS MOBILE
   ============================================================ */

.rl-header__mobile-actions {
  display: none;           /* masqué par défaut — affiché via :not(:empty) après swap JS */
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

/* Boutons icônes et burger : masqués sur desktop, visibles < 1400px */
.rl-header__action-btn--icon-only,
.rl-header__burger {
  display: none;
}

.rl-header__action-btn--icon-only {
  min-width: unset;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
}

.rl-header__action-btn--icon-only::after {
  display: none;
}

.rl-header__mobile-cart {
  display: contents;
}

/* Burger */
.rl-header__burger {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--rl-bleu-fonce);
  cursor: pointer;
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE — Mobile (< Bootstrap xxl = 1400px)
   Figma : layout mobile jusqu'à 1024px inclus, desktop dès 1440px.
   Bootstrap xxl (1400px) est le breakpoint le plus proche → écart 40px.
   ============================================================ */

/* < 1400px : réduit le gap du header */
@media (max-width: 1399.98px) {
  .rl-header__inner {
    padding-inline: var(--rl-space-s);
    gap: 128px;
  }
}

/* Mobile (< 1200px) : layout empilé, burger, boutons icônes, search pleine largeur */
@media (max-width: 1199.98px) {
  /* Basculement labels → icônes */
  .rl-header__action-btn:not(.rl-header__action-btn--icon-only) {
    display: none;
  }

  .rl-header__action-btn--icon-only {
    display: flex;
  }
  .rl-header__inner {
    flex-wrap: wrap;
    gap: 16px;
  }

  .rl-header__logo {
    order: 1;
  }

  .rl-header__actions {
    order: 2;
    margin-inline-start: auto;
  }

  .rl-header__actions:empty {
    display: none;
  }

  .rl-header__mobile-actions:not(:empty) {
    order: 2;
    display: flex;
    margin-inline-start: auto;
  }

  .rl-header__burger {
    display: flex;
  }

  /* Search en ligne 2 pleine largeur */
  .rl-header__search {
    order: 3;
    flex-basis: 100%;
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 0;
    padding-block-end: 4px;
  }

  .rl-search__form {
    max-width: 100%;
  }

  /* Logo mobile : taille réduite */
  .rl-header__logo .logo {
    height: 48px;
  }

  /* Séparateur décalé */
  .rl-header__separator {
    margin-block-start: 4px;
  }

  /* Search : styles mobile (icon 16px, SemiBold 15px, bordure --bleu-fonce pleine, opacity 0.7) */
  .rl-search__form {
    gap: 12px;
    border-color: var(--rl-bleu-fonce);
    opacity: 0.7;
  }

  .rl-search__btn svg {
    width: 16px;
    height: 16px;
  }

  .rl-search__input {
    font-size: 0.9375rem;       /* 15px — Mobile/titre S */
    font-weight: var(--rl-weight-semibold);
  }

}

/* Desktop : masquer les éléments parasites rendus par displayTop */
@media (min-width: 1400px) {
  #rl-search-container .header-block,
  #rl-search-container .main-menu {
    display: none;
  }
}

/* ============================================================
   CHECKOUT — header simplifié
   ============================================================ */

.rl-header--checkout .rl-header__inner {
  gap: 0;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.rl-header--checkout .rl-header__logo {
  order: 0;
}

.rl-header__checkout-back {
  flex: 1;
  display: flex;
  align-items: center;
  color: var(--rl-bleu-fonce);
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.15s;
}

.rl-header__checkout-back:hover {
  color: var(--rl-bleu-fonce-hover);
}

.rl-header__checkout-spacer {
  flex: 1;
}