/* Souss Marep - ElectroPlus-style header */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700;800&display=swap');

#header { font-family: "Noto Sans", -apple-system, Segoe UI, Roboto, sans-serif; }
#header a, #header span:not(.fa):not([class*="fa-"]), #header p, #header li,
#header h1, #header h2, #header h3, #header input, #header .ep-svc { font-family: "Noto Sans", -apple-system, Segoe UI, Roboto, sans-serif; }

/* ============ TOP BAR (green) ============ */
.header-nav { background: #eef4ee !important; border-bottom: 1px solid #dde7de; box-shadow: none !important; }
.header-nav .container { }
.ep-topbar { padding: 8px 0; font-size: 13px; }
.ep-topbar-left, .ep-topbar-right { display: flex; align-items: center; gap: 26px; }
.ep-topbar-right { justify-content: flex-end; }
.ep-svc { display: inline-flex; align-items: center; gap: 7px; color: #2f5240; font-weight: 600; white-space: nowrap; line-height: 1; }
.ep-svc svg { color: #3a7d52; flex: 0 0 auto; }
a.ep-svc { text-decoration: none; }
a.ep-svc:hover { color: #14432c; }
.header-nav .center-nav { display: none; }

/* ============ MAIN HEADER ============ */
#desktop-header .header-top { background: #fff; padding: 16px 0; }
#desktop_logo img { max-height: 54px; width: auto; }

/* single-row layout: logo | nav inline | icons */
.header-top .row.smh-hrow { flex-wrap: nowrap; }
.col-header-left { margin-right: 22px; }
.col-header-nav { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.col-header-nav .iqit-megamenu-container { border: 0 !important; width: 100%; padding: 0; }
.col-header-center { display: none; } /* ancien gros champ de recherche masqué */

/* search icon toggle (ouvre le popup) */
.smh-icons { gap: 4px; }
.smh-search-toggle {
    background: #f3f4f5; color: #16181d; border: none;
    width: 46px; height: 46px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; margin-left: 8px; padding: 0; transition: background .2s;
}
.smh-search-toggle:hover { background: #e7e9eb; }
.smh-search-toggle i { font-size: 19px; margin: 0; }

/* right icons: account + cart -> circular */
.col-header-right .row { align-items: center; gap: 6px; }
.col-header-right .account,
.col-header-right a[href*="mon-compte"], .col-header-right a[href*="connexion"], .col-header-right a[href*="my-account"],
.col-header-right .blockcart, .col-header-right ._shoppingcart,
.col-header-right .header-cart, .col-header-right .shopping-cart {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #f3f4f5;
    color: #16181d;
    transition: background .2s;
    margin-left: 8px;
    position: relative;
}
.col-header-right .account:hover,
.col-header-right .blockcart:hover, .col-header-right ._shoppingcart:hover { background: #e7e9eb; }
.col-header-right .account i, .col-header-right .blockcart i, .col-header-right ._shoppingcart i { font-size: 21px; margin: 0; }
.col-header-right .account span, .col-header-right .blockcart .cart-products-count ~ span,
.col-header-right .user-info-text, .col-header-right .cart-text { display: none !important; }
/* even spacing between the 3 icons */
.col-header-right .smh-icons { gap: 10px; align-items: center; }
.smh-search-toggle,
.col-header-right .header-user-btn,
.col-header-right .blockcart, .col-header-right ._shoppingcart { margin-left: 0 !important; }
/* the theme's .header-btn-w adds .5rem of side padding to the account and cart
   wrappers but not to the search button, so the flex gap alone was not enough:
   the visible gaps came out 17.5px / 25px instead of 10px / 10px. */
.smh-icons .header-btn-w { padding-left: 0 !important; padding-right: 0 !important; }

/* ===== outlined icons (electroplus) ===== */
.smh-search-toggle i.fa::before,
.col-header-right .header-user-btn i.fa::before,
.col-header-right .cart-toogle i.fa::before { content: none !important; }
.smh-search-toggle i.fa,
.col-header-right .header-user-btn i.fa,
.col-header-right .cart-toogle i.fa {
    width: 23px; height: 23px; display: inline-block; color: transparent;
    background-position: center; background-repeat: no-repeat; background-size: 22px 22px;
}
.smh-search-toggle i.fa {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>");
}
.col-header-right .header-user-btn i.fa {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.6'/><path d='M5.5 20a6.5 6.5 0 0 1 13 0'/></svg>");
}
.col-header-right .cart-toogle i.fa {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.4'/><circle cx='18' cy='20' r='1.4'/><path d='M2 3h2.2l2.2 11.5a1.2 1.2 0 0 0 1.2 1h9.1a1.2 1.2 0 0 0 1.2-.9L19.6 7H5'/></svg>");
}
/* cart count bubble -> dark (electroplus), au coin du cercle */
.col-header-right .blockcart { position: relative !important; overflow: visible !important; }
.col-header-right .cart-toogle,
.col-header-right .cart-toogle i.fa { position: static !important; }
.col-header-right .cart-products-count-btn,
.col-header-right .cart-products-count {
    display: inline-flex !important; align-items: center; justify-content: center;
    position: absolute !important; top: 1px; right: 1px; z-index: 3;
    background: #16181d; color: #fff; font-size: 10px; font-weight: 700;
    min-width: 17px; height: 17px; line-height: 1; padding: 0 3px;
    border-radius: 50%; border: 2px solid #f3f4f5;
}

/* ============ MEGA MENU inline (electroplus look) ============ */
.col-header-nav .iqit-megamenu { background: transparent !important; }
.iqit-megamenu .cbp-menu { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; margin: 0; }
.iqit-megamenu .cbp-menu > li > a {
    font-weight: 700 !important; font-size: 14px !important; color: #16181d !important;
    padding: 14px 15px !important; text-transform: none !important; letter-spacing: 0 !important;
    background: transparent !important; border-radius: 8px !important; white-space: nowrap;
}
.iqit-megamenu .cbp-menu > li > a:hover { color: #123524 !important; background: #f5f6f7 !important; }
/* first "categories" item: neutralize red + add hamburger (☰) like ElectroPlus */
.iqit-megamenu .cbp-menu > li.main-category > a,
.iqit-megamenu .cbp-menu > li:first-child > a {
    background: transparent !important; color: #16181d !important;
}
.iqit-megamenu .cbp-menu > li:first-child > a::before {
    content: "\2630"; margin-right: 9px; font-size: 15px; font-weight: 400;
}

/* ============ SEARCH POPUP (design only) ============ */
body.smh-pop-open { overflow: hidden; }
.smh-searchpop { position: fixed; inset: 0; z-index: 3000; background: rgba(10,12,16,.55); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 0; }
.smh-searchpop[hidden] { display: none; }
.smh-searchpop-box { position: relative; width: 100%; max-width: 660px; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.3); padding: 8px 46px 8px 12px; animation: smh-pop-in .18s ease; }
@keyframes smh-pop-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.smh-searchpop-close { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); background: transparent; border: none; font-size: 26px; line-height: 1; color: #9aa0a8; cursor: pointer; padding: 4px 6px; }
.smh-searchpop-close:hover { color: #16181d; }
.smh-searchpop-field { position: relative; width: 100%; }
.smh-searchpop-field .search-widget, .smh-searchpop-field form, .smh-searchpop-field .input-group { width: 100%; }
.smh-searchpop-field .input-group { position: relative; display: block; }
/* magnifier on the LEFT */
.smh-searchpop-field .input-group::before {
    content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; pointer-events: none;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>") center/contain no-repeat;
}
/* full-width borderless input */
.smh-searchpop-field input[type="text"], .smh-searchpop-field input.form-control, .smh-searchpop-field .form-search-control {
    width: 100% !important; height: 48px !important;
    border: none !important; border-radius: 0 !important; outline: none !important;
    padding: 0 10px 0 36px !important; font-size: 16px !important;
    box-shadow: none !important; background: transparent !important;
}
.smh-searchpop-field .search-btn, .smh-searchpop-field button[type="submit"] { display: none !important; }

/* remove leftover reassurance duplicate spacing under nav */
.header-nav .left-nav > .d-inline-block { display: none; }

@media (max-width: 991px) {
    .ep-topbar { display: none !important; }
}