/* Header Sellzy sur lusinage.com : garde le bleu de la homepage (#0237D6)
   au lieu du #04305c du thème Sellzy. Chargé uniquement avec headerVariant="sellzy". */

/*
  Le thème classique force html { font-size: 10px } ; Sellzy (Tailwind) suppose 16px.
  Même base partout où le header Sellzy est actif (accueil, devis, services…).
*/
html:has(body.lx-header-sellzy) {
  font-size: 16px !important;
}

.lx-header-sellzy {
  --color-primary: #0237d6;
  --color-primary-dark: #022bad;
  --color-primary-darker: #021f80;
  --color-primary-light: #6c8cf0;
  --color-primary-lighter: #d6e0fc;
  /* Bootstrap classique charge .bg-primary { … #0d6efd !important } — forcer le bleu accueil */
  --bs-primary: #0237d6;
  --bs-primary-rgb: 2, 55, 214;
  --bs-link-color: #0237d6;
  background: #fff;
  color-scheme: light;
}

/* Toujours le logo clair sur fond blanc (évite le swap dark-mode → logo blanc invisible). */
.lx-header-sellzy .lusinage-logo--on-light {
  display: block !important;
}
.lx-header-sellzy .lusinage-logo--on-dark {
  display: none !important;
}
.lx-header-sellzy .lusinage-logo {
  height: 2.75rem;
  width: auto;
  max-width: 11.5rem;
  object-fit: contain;
  object-position: left center;
}
.lx-header-sellzy .lusinage-logo--header {
  height: 3rem;
  max-width: 13rem;
}
.lx-header-sellzy .lusinage-logo--nav,
.lx-header-sellzy .lusinage-logo--mobile,
.lx-header-sellzy .lusinage-logo--compact {
  height: 2.4rem;
  max-width: 11rem;
}

/* Grille header : logo | recherche | compte — évite l’empilement cassé */
.lx-header-sellzy .header-middle-bar {
  display: grid !important;
  grid-template-columns: max-content minmax(12rem, 1fr) max-content;
  align-items: center;
  column-gap: 1.25rem;
  width: 100%;
}
.lx-header-sellzy .header-middle-brand {
  justify-self: start;
}
.lx-header-sellzy .header-middle-search {
  justify-self: stretch;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}
.lx-header-sellzy .header-middle-actions {
  justify-self: end;
}

/* Couleurs accueil — !important requis (Bootstrap .bg-primary est en !important). */

.lx-header-sellzy .bg-primary,
.lx-header-sellzy header .bg-primary,
.lx-header-sellzy header .btn-primary,
.lx-header-sellzy header .header-quote-btn,
.lx-header-sellzy .header-quote-btn {
  background-color: #0237d6 !important;
  border-color: #0237d6 !important;
}

.lx-header-sellzy header .btn-primary:hover,
.lx-header-sellzy header .header-quote-btn:hover,
.lx-header-sellzy .header-quote-btn:hover {
  background-color: #022bad !important;
  border-color: #022bad !important;
}

.lx-header-sellzy header a:hover,
.lx-header-sellzy header .text-primary,
.lx-header-sellzy .text-primary,
.lx-header-sellzy #sidebar a:hover {
  color: #0237d6 !important;
}

.lx-header-sellzy header .btn-primary,
.lx-header-sellzy header .btn-primary:hover,
.lx-header-sellzy header .header-quote-btn,
.lx-header-sellzy header .header-top,
.lx-header-sellzy header .header-top a,
.lx-header-sellzy header .header-top a:hover {
  color: #fff !important;
}

.lx-header-sellzy header .bg-primary-dark,
.lx-header-sellzy .bg-primary-dark,
.lx-header-sellzy #sidebar .bg-primary-dark {
  background-color: #0237d6 !important;
}

.lx-header-sellzy .scroll-to-top {
  background-color: #0237d6 !important;
}

/* Empêche le thème classique d’écraser la taille du CTA Sellzy (sinon ~10px). */
.lx-header-sellzy .header-quote-btn.btn,
.lx-header-sellzy a.header-quote-btn {
  font-size: 1rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

/* Le header Sellzy remplace la navigation mobile du thème classique */
.lx-header-sellzy .lx-has-bottom-nav,
.lx-header-sellzy main {
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Isolation : le thème classique (bootstrap + /asset/css/style.css) n'est pas
   en @layer et écrase les utilitaires Tailwind de Sellzy. On neutralise les
   règles qui touchent le header / menu mobile uniquement.
   --------------------------------------------------------------------------- */
.lx-header-sellzy header,
.lx-header-sellzy #sidebar,
.lx-header-sellzy .modal-overlay {
  --bs-primary: #0237d6;
  --bs-primary-rgb: 2, 55, 214;
  --bs-link-color: #0237d6;
}

.lx-header-sellzy header ul,
.lx-header-sellzy #sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lx-header-sellzy header li,
.lx-header-sellzy #sidebar li {
  margin-top: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.lx-header-sellzy header ul li a,
.lx-header-sellzy #sidebar ul li a {
  color: inherit;
}

.lx-header-sellzy header .header-search-input::placeholder,
.lx-header-sellzy header .header-search-input::-webkit-input-placeholder {
  color: transparent;
  opacity: 0;
}

.lx-header-sellzy header input.header-search-input,
.lx-header-sellzy header input.header-search-input:focus {
  box-shadow: none;
  background: transparent;
  border: 0;
  outline: 0;
}

.lx-header-sellzy header p,
.lx-header-sellzy #sidebar p {
  margin-bottom: 0;
}

.lx-header-sellzy header h3,
.lx-header-sellzy header h4,
.lx-header-sellzy header strong {
  margin-top: 0;
}

.lx-header-sellzy #sidebar {
  z-index: 2000;
}
.lx-header-sellzy .modal-overlay {
  z-index: 1990;
}

/* Bootstrap .input-group (flex-wrap: wrap) casse l'icône loupe Sellzy */
.lx-header-sellzy header .input-group {
  flex-wrap: nowrap;
  align-items: center;
}

.lx-header-sellzy header .input-group > .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: 1%;
}

/* Menu mobile (sidebar) */
.lx-header-sellzy #sidebar .relative {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.lx-header-sellzy #sidebar #side-bar-menu-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(145, 158, 171, 0.12);
  cursor: pointer;
}

.lx-header-sellzy #sidebar h4 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.lx-header-sellzy #sidebar .border a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #212529;
}

.lx-header-sellzy #sidebar .mobile-menu > ul > li > a {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
}

.lx-header-sellzy #sidebar .mobile-menu ul ul li a {
  display: block;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 500;
  color: #495057;
}