/* =====================================================================
   Optimisation HEADER — thème enfant warehousechild (global, toutes pages)
   Aligne le header sur la maquette : barre promo, barre de recherche large,
   bloc service clients, menu en casse normale + soulignement actif/survol.
   ===================================================================== */

:root{
  --oph-navy:#1f2d3d;
  --oph-brand:#1f2d3d;
  --oph-ink:#161a1d;
  --oph-muted:#6b7280;
  --oph-line:#e2e5e2;
  --oph-signal:#d8402a;
}

/* ---------- Barre promo du haut ---------- */
.op-topbar{ background:var(--oph-navy); color:#e7edf2; }
.op-topbar-inner{
  display:flex; align-items:center; justify-content:center; gap:40px;
  min-height:40px; flex-wrap:wrap; text-align:center;
  font-size:13px; line-height:1.3; padding:6px 0;
}
.op-topbar-msg{ display:inline-flex; align-items:center; gap:8px; }
.op-topbar-ic{ font-size:14px; line-height:1; }
.op-topbar-msg strong{ color:#fff; font-weight:800; }
@media (max-width:600px){
  .op-topbar-inner{ gap:6px 22px; font-size:11.5px; }
}

/* ---------- Ligne header (logo · recherche · actions) ---------- */
.op-header-top{ background:#fff; border-bottom:1px solid var(--oph-line); }
.op-headrow{
  display:flex; align-items:center; gap:28px; padding:15px 0;
}
.op-head-logo{ flex:0 0 auto; display:flex; align-items:center; gap:14px; }
.op-head-logo #desktop_logo img{ max-height:54px; width:auto; }

.op-head-search{ flex:1 1 auto; display:flex; justify-content:center; min-width:0; }
.op-head-search #search_widget{ width:100%; max-width:620px; margin:0; }
.op-head-search #search_widget form{ margin:0; }
.op-head-search .input-group{
  display:flex; align-items:center; width:100%;
  background:#fff; border:1.6px solid var(--oph-line); border-radius:999px;
  padding:4px 5px 4px 20px; transition:border-color .15s, box-shadow .15s;
}
.op-head-search .input-group:focus-within{
  border-color:var(--oph-navy); box-shadow:0 0 0 3px rgba(31,45,61,.13);
}
.op-head-search input.form-search-control{
  flex:1 1 auto; min-width:0; height:40px; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:15px; color:var(--oph-ink);
}
.op-head-search input.form-search-control::placeholder{ color:#98a0a6; }
.op-head-search .search-btn{
  flex:0 0 auto; width:42px; height:42px; border:0; border-radius:50%;
  background:var(--oph-navy); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:filter .15s;
}
.op-head-search .search-btn:hover{ filter:brightness(1.08); }

/* ---------- Actions (service clients · compte · panier) ---------- */
.op-head-actions{ flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:20px; }
/* Bloc "Service clients" (façon maquette) : 2 lignes, aligné à droite */
.op-service{ display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  text-decoration:none; line-height:1.2; white-space:nowrap; }
.op-service-top{ font-size:11px; color:var(--oph-muted); }
.op-service-tel{ font-size:16px; font-weight:800; color:var(--oph-navy); }
@media (max-width:1150px){ .op-head-actions .op-service{ display:none; } }

/* Compte / panier : espacement homogène, on garde le rendu des modules */
.op-head-actions .header-block,
.op-head-actions .blockcart,
.op-head-actions .header-user-info{ margin:0; }

/* ---------- Icônes compte / panier (façon maquette) ---------- */
.op-head-actions .header-btn .icon{ font-size:23px; color:var(--oph-navy); line-height:1; }
.op-head-actions .header-cart-btn{ position:relative; }
.op-head-actions .header-cart-btn .icon{ position:relative; display:inline-block; }
/* Pastille compteur rouge (toujours visible) */
.op-head-actions .cart-products-count-btn{
  position:absolute; top:-7px; right:-10px;
  min-width:17px; height:17px; padding:0 4px; box-sizing:border-box;
  background:var(--oph-signal, #d8402a); color:#fff; border-radius:999px;
  font-size:10px; font-weight:800; line-height:17px; text-align:center;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
/* Icônes seules dans le header (on masque les libellés texte) */
.op-head-actions .header-user-btn .title,
.op-head-actions .header-cart-btn .info-wrapper{ display:none; }

/* ---------- Méga-menu : casse normale, sans chevrons, soulignement ---------- */
#cbp-hrmenu .cbp-hrmenu-tab > a .cbp-tab-title{
  text-transform:none !important; letter-spacing:0 !important; font-weight:600;
}
#cbp-hrmenu .cbp-submenu-aindicator{ display:none !important; }
#cbp-hrmenu .cbp-hrmenu-tab > a{ position:relative; }
#cbp-hrmenu .cbp-hrmenu-tab > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--oph-brand); transform:scaleX(0); transform-origin:center;
  transition:transform .18s ease;
}
#cbp-hrmenu .cbp-hrmenu-tab:hover > a .cbp-tab-title,
#cbp-hrmenu .cbp-hrmenu-tab.cbp-hropen > a .cbp-tab-title,
#cbp-hrmenu .cbp-hrmenu-tab.active > a .cbp-tab-title,
#cbp-hrmenu .cbp-hrmenu-tab-current > a .cbp-tab-title{ color:var(--oph-brand); }
#cbp-hrmenu .cbp-hrmenu-tab:hover > a::after,
#cbp-hrmenu .cbp-hrmenu-tab.cbp-hropen > a::after,
#cbp-hrmenu .cbp-hrmenu-tab.active > a::after,
#cbp-hrmenu .cbp-hrmenu-tab-current > a::after{ transform:scaleX(1); }

/* Barre de menu : fond blanc propre, séparateur léger */
#iqitmegamenu-wrapper{ background:#fff; border-bottom:1px solid var(--oph-line); }

/* ---------- Sécurité responsive : la ligne header ne casse pas ---------- */
@media (max-width:900px){
  .op-headrow{ gap:16px; }
  .op-head-search #search_widget{ max-width:none; }
}

/* =====================================================================
   HEADER MOBILE (variante mobile-header-1) — façon maquette
   ===================================================================== */
/* Icônes mobiles : navy, cohérentes avec le desktop */
#mobile-header .col-mobile-btn .m-nav-btn i{ color:var(--oph-navy); font-size:20px; }

/* Panier mobile : caddie + pastille rouge (toujours visible) */
#mobile-header .col-mobile-btn-cart .m-nav-btn .icon,
#mobile-header .mobile-cart-icon{ position:relative; display:inline-block; }
#mobile-header #mobile-cart-products-count.cart-products-count-btn{
  position:absolute; top:-7px; right:-10px;
  min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  background:var(--oph-signal); color:#fff; border-radius:999px;
  font-size:10px; font-weight:800; line-height:16px; text-align:center;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Rangée "Service clients" sous la barre principale (disposition maquette) */
.op-service-mobile-row{
  display:flex; justify-content:center; padding:6px 0 2px;
  border-top:1px solid var(--oph-line); margin-top:6px;
}
.op-service-mobile{
  display:inline-flex; align-items:baseline; gap:8px;
  text-decoration:none; line-height:1.2; white-space:nowrap;
}
.op-service-mobile .op-service-top{ font-size:11px; color:var(--oph-muted); }
.op-service-mobile .op-service-tel{ font-size:15px; font-weight:800; color:var(--oph-navy); }