/* ============================================================
   Header éditorial IB Mirror
   Chargé sur TOUTES les pages SAUF la home (via index.php :
   <link> conditionnel si $rub non vide).
   Ne modifie pas general.css. Source unique de vérité du header.
   ============================================================ */

/* --- Barre de defilement toujours presente : evite le decalage du contenu/menu entre pages courtes et longues --- */
html { overflow-y:scroll; }

/* --- Offset sous le header fixe (toutes pages où ce fichier est chargé) --- */
body { padding-top:114px; }
@media (max-width:991px){ body { padding-top:52px; } }

/* --- Barre grise, sans bordure --- */
header { background:#f4f4f4 !important; border-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; }
/* Neutralise les CSS de page qui redefinissent .container (about.css, custom-led-mirror.css) */
header > .container, header #top_line .container { padding-left:15px !important; padding-right:15px !important; padding-inline:15px !important; max-width:1170px !important; }
/* Texte du menu lisible (le thème le met en blanc quand le header est transparent) */
header .main-menu > ul > li > a { color:#1a1a1a !important; }
header .main-menu > ul > li > a:hover { color:#e04f67 !important; }

/* --- Rangée logo / menu / panier (desktop) --- */
@media (min-width:992px){
  header > .container { padding-bottom:0 !important; }
  header #logo_home img { width:145px !important; height:auto !important; }
  header > .container > .row { display:flex !important; align-items:center !important; height:42px !important; min-height:0 !important; }
  header > .container > .row > div:first-child { flex:0 0 auto !important; width:auto !important; display:flex !important; align-items:center !important; }
  header > .container > .row > nav { display:flex !important; align-items:center !important; flex:1 1 auto !important; width:auto !important; margin-top:7px !important; }
  header nav > .cmn-toggle-switch { display:none !important; }
  header .main-menu { flex:1 1 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; float:none !important; margin:0 !important; height:auto !important; }
  header .main-menu > #header_menu, header .main-menu > #close_in { display:none !important; }
  header .main-menu > ul { margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; height:auto !important; }
  header .main-menu > ul > li { margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; float:none !important; height:auto !important; }
  header .main-menu > ul > li > a { display:flex !important; align-items:center !important; line-height:1 !important; padding:8px 10px !important; height:auto !important; }
  header nav > #top_tools { position:static !important; transform:none !important; flex:0 0 auto !important; margin:0 0 0 12px !important; display:flex !important; align-items:center !important; }
}

/* --- Barre du haut (recherche) --- */
header #top_line { color:#555 !important; border-bottom:1px solid #e2e2e2 !important; position:relative; height:auto !important; padding:18px 0 !important; }
header #top_line a, header #top_links a, header #top_links li, header #top_line i { color:#555 !important; }
/* bandeau du haut homogene, meme taille que le menu (toll-free + liens) */
header #top_line .col-md-3, header #top_line #top_links, header #top_line #top_links a, header #top_line #top_links li { font-size:13px !important; }
header #top_line .container, header #top_line .row, header #top_line .col-md-9, header #top_line .col-md-3, header #top_line #top_links, header #top_line #top_links > li { position:static !important; }
header #top_line .row { display:flex !important; align-items:center !important; }
header #top_line .col-md-3 { display:flex !important; align-items:center; margin-top:0 !important; }
header #top_line #top_links { display:flex !important; align-items:center !important; justify-content:flex-end; height:100%; margin-bottom:0 !important; }
header #top_line #top_links li:has(a[href$="login"]) { display:none !important; }

/* --- Recherche centrée --- */
header #searchWeb { position:absolute !important; left:0; right:0; top:50%; transform:translateY(-50%); margin:0 auto !important; width:440px; z-index:5; display:flex !important; align-items:center; gap:6px; background:#fff; border:1px solid #ddd; border-radius:30px; padding:3px 4px 3px 20px; }
header #searchformL { flex:1 1 auto; height:28px !important; width:auto !important; border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; margin:0 !important; padding:0 !important; font-size:14px !important; line-height:28px !important; letter-spacing:.3px; color:#1a1a1a !important; }
header #searchformL::placeholder { color:#6f6f6f !important; opacity:1 !important; }
header #searchformL::-webkit-input-placeholder { color:#6f6f6f !important; }
header #searchWeb > a { display:inline-flex !important; align-items:center; justify-content:center; width:30px; height:30px; min-width:30px; background:#1a1a1a; color:#fff !important; border-radius:50%; }
header #searchWeb > a i { color:#fff !important; font-size:13px; }

/* --- Panier --- */
header #top_tools a, header #top_tools i, header .dropdown-cart a { color:#1a1a1a !important; }
header #top_tools a:hover, header #top_tools a:hover i { color:#e04f67 !important; }
header #top_tools { position:absolute !important; right:15px; top:50%; transform:translateY(-50%); margin:0 !important; display:flex !important; align-items:center; }
header #top_tools .dropdown-cart a { display:inline-flex !important; align-items:center; gap:8px; background:#ededed; color:#1a1a1a !important; border:1px solid #e0e0e0; padding:9px 18px; border-radius:30px; font-weight:700; font-size:13px; letter-spacing:.3px; }
header #top_tools .dropdown-cart a i { color:#1a1a1a !important; }
header #top_tools .dropdown-cart a:hover { background:#1a1a1a; color:#fff !important; border-color:#1a1a1a; }
header #top_tools .dropdown-cart a:hover i { color:#fff !important; }
header .header-main-row, header .container .row { position:relative; }
header nav { position:relative; }

/* --- Au scroll : header compact + fond blanc, on masque la barre du haut --- */
header.sticky { background:#fff !important; padding-top:0 !important; box-shadow:0 8px 30px rgba(0,0,0,.22) !important; }
header.sticky #top_line { display:none !important; }
@media (min-width:992px){
  /* on garde une barre a la meme hauteur que la rangee logo/menu, bien aeree */
  header.sticky > .container > .row { height:72px !important; }
  header.sticky > .container > .row > nav { margin-top:0 !important; }
}

/* --- Suggest produits (autocomplétion header) --- */
#hsug { position:absolute !important; top:calc(100% + 8px) !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:440px !important; max-width:92vw !important; background:#fff !important; border:1px solid #ececec !important; box-shadow:0 14px 40px rgba(0,0,0,.12) !important; border-radius:10px !important; overflow:hidden !important; display:none; z-index:9999 !important; text-align:left !important; padding:6px !important; }
#hsug.open { display:block !important; }
#hsug .it { display:flex !important; align-items:center !important; gap:12px !important; padding:8px 10px !important; cursor:pointer; border:0 !important; border-radius:8px !important; text-decoration:none !important; background:#fff !important; }
#hsug .it:hover, #hsug .it.active { background:#f5f5f3 !important; }
#hsug .it img { width:38px !important; height:38px !important; object-fit:cover !important; border-radius:6px !important; background:#f0f0f0 !important; flex:0 0 auto !important; margin:0 !important; max-width:none !important; }
#hsug .it .nm { flex:1 1 auto !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; font-size:13.5px !important; color:#1a1a1a !important; font-weight:500 !important; letter-spacing:0 !important; text-transform:none !important; line-height:1.3 !important; }

/* Champ de recherche dans le menu mobile : masque sur desktop (specificite renforcee) */
header .main-menu > ul > li.mm-search { display:none !important; }

/* --- Rubrique active : texte rouge + gras, selon la page (classe body.page-<rub>) --- */
body.page-products-list header .main-menu > ul > li > a.show-submenu-mega[href*="led-mirrors"],
body.page-products-list header .main-menu > ul > li > a.show-submenu-mega[href*="led-mirrors"] i,
body.page-product-detail header .main-menu > ul > li > a.show-submenu-mega[href*="led-mirrors"],
body.page-product-detail header .main-menu > ul > li > a.show-submenu-mega[href*="led-mirrors"] i { color:#e04f67 !important; font-weight:700 !important; }
body.page-products-noled-list header .main-menu > ul > li > a[href$="/mirrors"] { color:#e04f67 !important; font-weight:700 !important; }
body.page-about header .main-menu > ul > li > a[href$="/about"] { color:#e04f67 !important; font-weight:700 !important; }
body.page-contact header .main-menu > ul > li > a[href$="/contact"] { color:#e04f67 !important; font-weight:700 !important; }
body.page-create-your-led-mirror header .main-menu > ul > li > a[href$="create-your-led-mirror"] { color:#e04f67 !important; font-weight:700 !important; }
body.page-professionnals header .main-menu > ul > li > a[href$="professionnals"] { color:#e04f67 !important; font-weight:700 !important; }
body.page-products-list-towel-warmer header .main-menu > ul > li > a[href*="towel-warmer"],
body.page-product-detail-towel-warmer header .main-menu > ul > li > a[href*="towel-warmer"] { color:#e04f67 !important; font-weight:700 !important; }
body.page-products-noled-list header .main-menu > ul > li > a[href$="/mirrors"],
body.page-art-mirror header .main-menu > ul > li > a[href$="/mirrors"] { color:#e04f67 !important; font-weight:700 !important; }

/* ===================================================================
   MEGA-MENU LED — recentré, panneau image à droite, hover soigné
   =================================================================== */
@media (min-width:992px){
  /* on ancre le panneau sur la barre de nav (centrée) plutôt que sur le <li> */
  header li.megamenu { position:static !important; }
  header li.megamenu .menu-wrapper {
    left:50% !important; right:auto !important; transform:translateX(-50%) !important;
    top:calc(100% + 16px) !important;
    width:1200px !important; max-width:97vw !important;
    display:grid !important; grid-template-columns:215px 215px 320px 380px !important;
    align-items:stretch !important;
    column-gap:0 !important; padding:22px 34px !important;
    background:#fff !important; border:1px solid #ececec !important;
    border-radius:14px !important; box-shadow:0 24px 60px rgba(0,0,0,.16) !important;
  }
  /* pont invisible : comble le trou entre le lien et le panneau pour ne pas perdre le survol */
  header li.megamenu .menu-wrapper::before {
    content:"" !important; position:absolute !important; left:0 !important; right:0 !important;
    top:-20px !important; height:22px !important; background:transparent !important;
  }
  header li.megamenu .menu-wrapper .col-md-4 {
    width:auto !important; float:none !important; padding:0 26px !important;
    border-right:1px solid #f1f1f1 !important; min-height:1px !important;
  }
  header li.megamenu .menu-wrapper .col-md-4:first-child { padding-left:0 !important; }
}
/* Le rouge du menu ne doit venir QUE de la rubrique active, pas du focus/clic */
header .main-menu > ul > li > a.show-submenu-mega:focus { color:#1a1a1a !important; background:transparent !important; }

/* Variante Towel Warmers : 2 colonnes (finition / prix) + image */
@media (min-width:992px){
  header li.megamenu .menu-wrapper.menu-wrapper-tw {
    width:1000px !important; grid-template-columns:235px 285px 380px !important;
  }
}
/* Pastille de finition */
header li.megamenu .menu-wrapper ul li a .tw-sw {
  display:inline-block !important; width:15px !important; height:15px !important; border-radius:50% !important;
  margin-right:11px !important; vertical-align:-2px !important; border:1px solid rgba(0,0,0,.18) !important;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35) !important;
}
header li.megamenu .menu-wrapper ul li a .tw-sw-all {
  background:conic-gradient(#262626,#b8923c,#b7bdc4,#f3f3f3,#a9a59a,#34383c,#262626) !important;
}

/* Titres de colonnes */
header li.megamenu .menu-wrapper h3 {
  font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important;
  letter-spacing:1.4px !important; color:#9a9a9a !important; margin:0 0 8px !important;
  padding-bottom:8px !important; border-bottom:1px solid #eee !important;
}
/* Liens */
header li.megamenu .menu-wrapper ul { margin:0 !important; padding:0 !important; list-style:none !important; }
header li.megamenu .menu-wrapper ul li { margin:0 !important; padding:0 !important; border:0 !important; border-bottom:1px solid #f0f0f0 !important; }
header li.megamenu .menu-wrapper ul li:last-child { border-bottom:0 !important; }
header li.megamenu .menu-wrapper ul li a {
  display:block !important; padding:6px 12px !important; margin:1px 0 !important;
  font-size:14px !important; color:#3a3a3a !important; border-radius:8px !important; border:0 !important;
  letter-spacing:.2px !important; white-space:nowrap !important; overflow:visible !important;
  transition:background .14s ease, color .14s ease !important;
}
header li.megamenu .menu-wrapper ul li a:hover {
  background:#faf6f6 !important; color:#e04f67 !important;
}
/* Panneau image à droite — hauteur FIGEE (l'image ne modifie plus la mise en page) */
header li.megamenu .mm-feature { padding-left:32px !important; }
header li.megamenu .mm-feature .mm-fwrap {
  display:block !important; position:relative !important; height:330px !important;
  text-decoration:none !important; overflow:hidden !important; border-radius:14px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.15) !important;
}
header li.megamenu .mm-feature .mm-fimg {
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important; transition:opacity .22s ease !important;
}
header li.megamenu .mm-feature .mm-fcap {
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
  padding:13px 14px !important; font-size:13px !important;
  color:#fff !important; background:rgba(20,20,20,.92) !important; letter-spacing:.4px !important;
  text-align:center !important; text-transform:uppercase !important; font-weight:600 !important;
}

/* ===================================================================
   MOBILE (<=991px) : on rend le header lisible et cliquable
   - barre du haut (toll free + recherche desktop) masquee
   - panier compact, place a GAUCHE du sandwich (plus de chevauchement)
   - sandwich en lignes foncees (visible sur fond clair) + cliquable au-dessus
   =================================================================== */
@media (max-width:991px){
  header #top_line { display:none !important; }
  /* on retire la loupe du bandeau (la recherche reste accessible via le menu) */
  header #top_tools #searchMobile, header #top_tools .dropdown-search { display:none !important; }

  header ul#top_tools { right:56px !important; top:50% !important; transform:translateY(-50%) !important; z-index:998 !important; }
  header #top_tools .dropdown-cart a { background:transparent !important; border:0 !important; padding:4px 4px !important; color:#1a1a1a !important; font-weight:700 !important; gap:6px !important; }
  header #top_tools .dropdown-cart a i { color:#1a1a1a !important; }
  header #top_tools .dropdown-cart a:hover { background:transparent !important; color:#e04f67 !important; }

  header .cmn-toggle-switch { z-index:1001 !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; }
  header .cmn-toggle-switch span,
  header .cmn-toggle-switch span::before,
  header .cmn-toggle-switch span::after { background-color:#1a1a1a !important; }

  /* centrage vertical du logo (il etait pousse en haut par margin-bottom:7px) */
  header .container img[src*="logo-ibmirror-led-mirror"] { margin-bottom:0 !important; vertical-align:middle !important; }
  header > .container > .row { display:flex !important; align-items:center !important; min-height:52px !important; }
  header > .container > .row > div:first-child { display:flex !important; align-items:center !important; }

  /* champ de recherche en haut du menu mobile */
  header .main-menu > ul > li.mm-search { display:block !important; padding:18px 22px 24px !important; border-bottom:1px solid #ededed !important; }
  header li.mm-search form { display:flex !important; align-items:center !important; background:#f2f2f2 !important; border:1px solid #e2e2e2 !important; border-radius:8px !important; padding:0 6px 0 14px !important; }
  header li.mm-search input { flex:1 1 auto !important; border:0 !important; background:transparent !important; padding:12px 0 !important; font-size:15px !important; color:#1a1a1a !important; outline:none !important; box-shadow:none !important; }
  header li.mm-search input::placeholder { color:#888 !important; }
  header li.mm-search button { border:0 !important; background:transparent !important; padding:8px 10px !important; color:#1a1a1a !important; cursor:pointer !important; font-size:16px !important; }

  /* menu deroulant : on retire le panneau image des mega-menus (il decalait tout) */
  header li.megamenu .menu-wrapper .mm-feature { display:none !important; }

  /* Mise en forme propre du contenu deroule (sections empilees, lisibles) */
  header li.megamenu .menu-wrapper { width:auto !important; background:#fafafa !important; padding:0 !important; margin:0 !important; box-shadow:none !important; border:0 !important; }
  header li.megamenu .menu-wrapper .col-md-4 { width:100% !important; float:none !important; padding:0 !important; margin:0 !important; border:0 !important; }
  header li.megamenu .menu-wrapper h3 { margin:0 !important; padding:20px 22px 10px !important; font-size:10px !important; letter-spacing:1.5px !important; text-transform:uppercase !important; color:#999 !important; border:0 !important; background:#f1f1f1 !important; }
  header li.megamenu .menu-wrapper ul { margin:0 !important; padding:0 !important; list-style:none !important; }
  header li.megamenu .menu-wrapper ul li { margin:0 !important; padding:0 !important; border:0 !important; }
  header li.megamenu .menu-wrapper ul li a { display:block !important; padding:14px 30px !important; margin:0 !important; font-size:14px !important; color:#333 !important; border-bottom:1px solid #ededed !important; border-radius:0 !important; background:transparent !important; }

  /* entrees principales du menu : legerement plus grandes et aerees */
  header .main-menu > ul > li > a { font-size:14.5px !important; padding:16px 22px !important; }
}