/* ===== TOP BAR ===== */
.top-bar {
    background-color: #17344c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10%;
    font-size: 13px;
    color: #dfebf7;
}
.top-bar a { 
    margin-left: 10px; 
    text-decoration: none; 
    color: #dfebf7; 
}
.top-bar a:hover { 
    color: #43dde6; 
}

/* ===== MAIN HEADER ===== */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 5%;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    gap: 20px;
}
.main-header .logo img { 
    height: 50px; 
}

/* ===== SEARCH CONTAINER ===== */
.search-container {
    flex: 1;
    max-width: 560px;
    position: relative;
}

.custom-search-box {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: border-color 0.3s;
    overflow: visible;
}
.custom-search-box:focus-within {
    border-color: #43dde6;
}

/* CATEGORY BUTTON */
.search-category {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    border-right: 1px solid #ddd;
    min-width: 120px;
}
.search-category .cat-label { font-size: 13px; 
    color: #17344c; 
    font-weight: 600; 
}
.search-category .cat-arrow {
    font-size: 11px;
    color: #17344c;
    transition: transform 0.3s;
    margin-left: auto;
}
.search-category.open .cat-arrow { 
    transform: rotate(180deg); 
}

/* CATEGORY DROPDOWN */
.cat-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000;
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px 0;
}
.search-category.open .cat-dropdown { display: block; }
.cat-dropdown::-webkit-scrollbar { width: 4px; }
.cat-dropdown::-webkit-scrollbar-thumb { background: #ddd; 
    border-radius: 4px; 
}

.cat-option {
    padding: 9px 16px;
    font-size: 13px;
    color: #17344c;
    cursor: pointer;
    transition: 0.2s;
}
.cat-option:hover { 
    background: #f0fafa; 
    color: #43dde6; 
}
.cat-option.selected { 
    font-weight: 700; 
    color: #43dde6; 
}

/* SEARCH DIVIDER */
.search-divider { 
    width: 1px; 
    background: #ddd; 
    height: 22px; 
}

/* INPUT */
.search-input-wrap { 
    flex: 1; 
}
.search-input-wrap input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 14px;
    font-size: 14px;
    color: #17344c;
    outline: none;
}

/* SEARCH BUTTON */
.search-btn {
    background: #17344c;
    color: #fff;
    border: none;
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    transition: 0.3s;
    font-size: 15px;
}
.search-btn:hover { background: #43dde6; }

/* ===== AUTOCOMPLETE BOX ===== */
.autocomplete-box {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    z-index: 9999;
    max-height: 360px;
    overflow-y: auto;
}
.autocomplete-box::-webkit-scrollbar { 
    width: 4px; 
}
.autocomplete-box::-webkit-scrollbar-thumb { 
    background: #ddd; 
    border-radius: 4px; 
}

.auto-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s;
}
.auto-item:last-child { 
    border-bottom: none; 
}
.auto-item:hover { 
    background: #f8fffe; 
}

.auto-item img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 6px;
    background: #f5f5f5;
    flex-shrink: 0;
}
.auto-info { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
}
.auto-cat { 
    font-size: 11px; 
    color: #43dde6; 
    font-weight: 600; 
    text-transform: uppercase; 
}
.auto-name { 
    font-size: 14px; 
    color: #17344c; 
    font-weight: 600; 
}
.auto-price { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-top: 2px; 
}
.auto-old { 
    font-size: 12px; 
    color: #aaa; 
    text-decoration: line-through; 
}
.auto-new { 
    font-size: 14px; 
    color: #17344c; 
    font-weight: 700; 
}
.auto-empty { 
    padding: 16px; 
    text-align: center; 
    color: #aaa; 
    font-size: 14px; 
}

/* ===== HEADER ICONS ===== */
.header-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}
.icon-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #17344c;
    transition: 0.3s;
}
.icon-link i { 
    font-size: 22px; 
}
.icon-link:hover { 
    color: #43dde6; 
}
.icon-text { 
    display: flex; 
    flex-direction: column; 
    line-height: 1.2; }
.icon-text small { 
    font-size: 11px; 
    color: #888; 
}
.icon-text span { 
    font-size: 13px; 
    font-weight: 700; 
    color: #17344c; 
}

/* ===== NAVIGATION ===== */
.main-nav { 
    background: #fff; 
    border-top: 1px solid #eee;
    text-align: center; 
}
.main-nav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: inline-flex; 
    justify-content: center; 
}
.main-nav li { 
    position: relative; 
}
.main-nav a {
    display: block;
    padding: 12px 18px;
    color: #17344c;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
    border-radius: 6px;
}
.main-nav a:hover { color: #43dde6; }

/* DROPDOWN */
.submenu {
    opacity: 0;
    transform: translateY(-8px);
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 180px;
    z-index: 100;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: all 0.25s ease;
    pointer-events: none;
    flex-direction: column; 
    padding: 6px 0;
}
.submenu li a { 
    padding: 10px 16px; 
    font-size: 13px; 
    font-weight: 400; 
    border-radius: 0; 
}
li.dropdown:hover > .submenu { 
    opacity: 1; 
    transform: translateY(0); 
    pointer-events: auto; 
}
.main-nav li.dropdown > a::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 5px;
    font-size: 11px;
    display: inline-block; /* IMPORTANT */
    transition: transform 0.3s ease;
}
.main-nav li.dropdown:hover > a::after { 
    transform: rotate(180deg); 
}

/* ===== HAMBURGER ===== */
.hamburger { 
    display: none; 
    flex-direction: column; 
    justify-content: space-between; 
    width: 25px; 
    height: 20px; 
    cursor: pointer; 
}
.hamburger div { 
    width: 100%; 
    height: 3px; 
    background: #17344c; 
    border-radius: 2px; 
    transition: all 0.3s; 
}


/* ========================================================
   RESPONSIVE — header.css
   Breakpoints : 1200px | 992px | 768px | 480px
   ======================================================== */

/* ── LARGE SCREENS (1200px+) ── */
@media (min-width: 1200px) {
  .top-bar { padding: 7px 8%; }
  .main-header { padding: 14px 8%; }
}

/* ── MEDIUM (992px–1199px) ── */
@media (max-width: 1199px) {
  .top-bar { padding: 7px 5%; }
  .main-header { padding: 12px 4%; gap: 14px; }
  .search-container { max-width: 420px; }
  .search-category { min-width: 100px; padding: 10px 10px; }
  .icon-text { display: none; }
  .header-icons { gap: 14px; }
  .main-nav a { padding: 10px 13px; font-size: 13px; }
}

/* ── TABLET (768px–991px) ── */
@media (max-width: 991px) {
  /* On garde uniquement le sélecteur de langue, centré */
  .top-bar { display: flex; justify-content: center; padding: 6px 4%; }
  .top-bar-goche { display: none; }
  .top-bar-droit { margin: 0; }
  .top-bar-droit p { display: none; }
  .lang-switcher { margin-left: 0; justify-content: center; }

  .main-header {
    flex-wrap: wrap;
    padding: 12px 4%;
    gap: 12px;
  }
  .logo { order: 1; }
  .hamburger { display: flex; order: 3; }
  .search-container { order: 4; flex-basis: 100%; max-width: 100%; }
  .header-icons { order: 2; margin-left: auto; gap: 18px; }
  .icon-text { display: none; }

  /* Nav masqué par défaut → visible via .open */
  .main-nav {
    display: none;
    flex-direction: column;
  }
  .main-nav.open { display: block; }
  .main-nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 0;
  }
  .main-nav li { width: 100%; }
  .main-nav a { padding: 12px 20px; border-radius: 0; }

  /* Submenu mobile */
  .submenu {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    padding-left: 20px;
    display: none;
    border-radius: 0;
  }
  li.dropdown.open > .submenu { display: block; }
  li.dropdown:hover > .submenu { opacity: 1; transform: none; pointer-events: auto; display: none; }
  li.dropdown.open > .submenu { display: block; }
}

/* ── MOBILE (480px–767px) ── */
@media (max-width: 767px) {
  .main-header { padding: 10px 4%; }
  .logo img { height: 38px; }
  .search-category { min-width: 80px; padding: 8px 8px; }
  .search-category .cat-label { font-size: 12px; }
  .search-input-wrap input { font-size: 13px; padding: 8px 10px; }
  .search-btn { padding: 8px 12px; }
  .icon-link i { font-size: 20px; }
}

/* ── SMALL MOBILE (max 480px) ── */
@media (max-width: 480px) {
  .main-header { padding: 10px 3%; gap: 8px; }
  .logo img { height: 32px; }
  .header-icons { gap: 12px; }
  .icon-link i { font-size: 18px; }
  .search-category { min-width: 70px; padding: 7px 7px; }
  .cat-label { font-size: 11px; }
}

/* ── Autocomplete ──────────────────────────────────────────────────────── */

.ac-item { display:flex; align-items:center; gap:12px; padding:10px 14px; text-decoration:none; color:#17344C; transition:background .15s; border-bottom:1px solid #f5f5f5; }
.ac-item:last-child { border:none; }
.ac-item:hover { background:#f8fafc; }
.ac-img { width:44px; height:44px; object-fit:contain; background:#f8f8f8; border-radius:6px; padding:3px; flex-shrink:0; }
.ac-info { flex:1; min-width:0; }
.ac-name { display:block; font-size:.87rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-cat  { display:block; font-size:.72rem; color:#aaa; }
.ac-price { font-weight:700; color:#f02443; font-size:.88rem; white-space:nowrap; }

/* ── Client type bar ───────────────────────────────────────────────────── */
.client-type-bar { display:flex; align-items:center; gap:12px; padding:5px 24px; font-size:.78rem; background:#0f2233; color:rgba(255,255,255,.75); flex-wrap:wrap; }
.ct-normal    { color:#43dde6 !important; }
.ct-revendeur { color:#fb923c !important; }
.ct-grossiste { color:#a78bfa !important; }

/* ── Language switcher ───────────────────────────────────── */
.lang-switcher { display:flex;align-items:center;gap:4px;margin-left:14px }
.lang-btn { padding:3px 8px;border-radius:6px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.7);text-decoration:none;transition:all .15s;white-space:nowrap }
.lang-btn:hover { background:rgba(255,255,255,.15);color:#fff }
.lang-btn.lang-active { background:rgba(255,255,255,.2);color:#fff }

/* ── RTL global support ──────────────────────────────────── */
[dir="rtl"] .search-container { direction:rtl }
[dir="rtl"] .header-icons    { flex-direction:row-reverse }
[dir="rtl"] .main-nav        { text-align:center }
[dir="rtl"] .ac-item         { flex-direction:row-reverse }
[dir="rtl"] .ac-info         { text-align:right }
[dir="rtl"] .client-type-bar span:last-child { margin-left:0;margin-right:auto }

/* ── Autocomplete extras ──────────────────────────────────────────────────── */
.ac-no-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    text-align: center;
    font-size: .85rem;
    color: #17344c;
}
.ac-loading {
    padding: 16px;
    text-align: center;
    font-size: .84rem;
    color: #17344c;
}
.ac-footer-link {
    display: block;
    padding: 10px 14px;
    font-size: .82rem;
    color: #17344c;
    text-decoration: none;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    text-align: center;
    border-radius: 0 0 12px 12px;
    transition: background .15s;
}
.ac-footer-link:hover { background: #f0f4ff; color: #f02443; }
.ac-see-all {
    display: inline-block;
    padding: 6px 16px;
    background: #17344c;
    color: #fff;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.ac-see-all:hover { background: #f02443; }

.icon-link--nohover:hover { color:#43dde6; }
.icon-link--nohover:hover i { color:#43dde6; }