/* ============================================================
   header-desktop.php — DESKTOP
   Commerce Ethique Club — Liquid Glass iOS 2026

   Détecté par (hover: hover) and (pointer: fine) — souris ou
   trackpad capable de survol — plutôt que par une simple
   largeur min-width:1025px. Sans ça, un iPad Pro 12.9" en
   paysage (1366px de large, tactile) recevrait à tort le
   header desktop au lieu de la sidebar tablette.
============================================================ */

:root{
  --font-ui: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;

  --accent:        #1abc9c;
  --accent-dark:   #0f6e56;
  --accent-glow:   rgba(26,188,156,.35);

  --ink:           #16241f;
  --ink-soft:      rgba(22,36,31,.62);

  --glass:         rgba(255,255,255,.32);
  --glass-strong:  rgba(255,255,255,.52);
  --glass-border:  rgba(255,255,255,.38);
  --glass-shadow:  0 6px 24px rgba(15,60,50,.08), 0 1px 0 rgba(255,255,255,.45) inset;

  --glass-dark:        rgba(16,24,22,.38);
  --glass-dark-strong: rgba(16,24,22,.56);
  --glass-dark-border: rgba(255,255,255,.07);
  --glass-dark-shadow: 0 6px 24px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.04) inset;

  --ease-fluid: cubic-bezier(.22,1,.36,1);
}

@media (hover: hover) and (pointer: fine){

  .header-tablet,
  .header-mobile,
  .bottom-nav,
  #mobile-search-overlay,
  #ls-layout,
  #ls-search-overlay{
    display: none !important;
  }

  body{
    font-family: var(--font-ui);
    padding-top: 108px;
  }

  .header-desktop{
    box-sizing: border-box;
    position: fixed;
    top: 10px;
    inset-inline: 0;
    margin-inline: auto;
    width: min(1240px, calc(100% - 32px));
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 6px 16px;
    z-index: 500;

    background: var(--glass);
    -webkit-backdrop-filter: blur(30px) saturate(220%);
    backdrop-filter: blur(30px) saturate(220%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    transition: background .35s var(--ease-fluid), box-shadow .35s var(--ease-fluid);
  }

  body.dark-mode .header-desktop{
    background: var(--glass-dark);
    border-color: var(--glass-dark-border);
    box-shadow: var(--glass-dark-shadow);
  }

  .header-desktop .logo a{
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }
  body.dark-mode .header-desktop .logo a{ color: #f2fbf8; }
  .header-desktop .logo span{ color: var(--accent); }

  .header-desktop .search-form{
    flex: 1 1 auto;
    max-width: 400px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.32);
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px;
    padding: 5px 4px 5px 14px;
    transition: box-shadow .25s var(--ease-fluid), background .25s var(--ease-fluid);
  }
  body.dark-mode .header-desktop .search-form{
    background: rgba(255,255,255,.045);
    border-color: rgba(255,255,255,.08);
  }
  .header-desktop .search-form:focus-within{
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: rgba(255,255,255,.48);
  }
  body.dark-mode .header-desktop .search-form:focus-within{ background: rgba(255,255,255,.08); }
  .header-desktop .search-form input{
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--ink);
    font-family: var(--font-ui);
  }
  body.dark-mode .header-desktop .search-form input{ color: #eef7f4; }
  .header-desktop .search-form input::placeholder{ color: var(--ink-soft); }
  .header-desktop .search-form button{
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .2s var(--ease-fluid), background .2s var(--ease-fluid);
  }
  .header-desktop .search-form button:hover{ background: var(--accent-dark); transform: scale(1.08); }

  .desktop-actions{
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }

  .action-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .3s var(--ease-fluid), color .3s var(--ease-fluid), transform .2s var(--ease-fluid);
  }
  body.dark-mode .action-btn{ color: rgba(255,255,255,.68); }
  .action-btn i{ font-size: 13px; }
  .action-btn:hover{
    background: rgba(255,255,255,.38);
    color: var(--ink);
    transform: translateY(-1px);
  }
  body.dark-mode .action-btn:hover{
    background: rgba(255,255,255,.08);
    color: #fff;
  }

  .profile-wrapper{ position: relative; }
  #profile-toggle-desktop{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.3);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .3s var(--ease-fluid), box-shadow .3s var(--ease-fluid);
  }
  body.dark-mode #profile-toggle-desktop{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: #fff;
  }
  #profile-toggle-desktop:hover{ box-shadow: 0 0 0 3px var(--accent-glow); }
  #profile-toggle-desktop i{ font-size: 18px; color: var(--accent); }

  .profile-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    list-style: none;
    margin: 0; padding: 8px;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--glass-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 600;
  }
  body.dark-mode .profile-dropdown{
    background: var(--glass-dark-strong);
    border-color: var(--glass-dark-border);
    box-shadow: var(--glass-dark-shadow);
  }
  .profile-dropdown.open{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .profile-dropdown li a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .15s ease;
  }
  body.dark-mode .profile-dropdown li a{ color: #eef7f4; }
  .profile-dropdown li a:hover{ background: rgba(26,188,156,.12); }
  .profile-dropdown li a i{ width: 16px; color: var(--accent); }

  #dark-mode-toggle{ width: 34px; height: 34px; justify-content: center; padding: 0; border-radius: 50%; }

  .categories-bar{
    box-sizing: border-box;
    position: fixed;
    top: 60px;
    inset-inline: 0;
    margin-inline: auto;
    width: min(1240px, calc(100% - 32px));
    z-index: 480;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .categories-bar::-webkit-scrollbar{ display: none; }
  .categories-bar ul{
    position: relative;
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0 auto;
    padding: 5px 6px;
    background: rgba(255,255,255,.24);
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    backdrop-filter: blur(22px) saturate(200%);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15,60,50,.06);
    width: fit-content;
  }
  body.dark-mode .categories-bar ul{
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.06);
  }

  .cat-highlight{
    position: absolute;
    top: 5px;
    left: 0;
    height: calc(100% - 10px);
    width: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    box-shadow: 0 4px 14px var(--accent-glow);
    transition: transform .45s var(--ease-fluid), width .45s var(--ease-fluid), opacity .2s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    will-change: transform, width;
  }
  .cat-highlight.is-ready{ opacity: 1; }

  .categories-bar a{
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 6.5px 14px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s var(--ease-fluid), background .3s var(--ease-fluid);
  }
  body.dark-mode .categories-bar a{ color: rgba(255,255,255,.6); }
  .categories-bar a:hover{ background: rgba(26,188,156,.10); color: var(--ink); }
  .categories-bar a.active,
  .categories-bar a[aria-current]{
    color: #fff;
  }
  .categories-bar a.active:hover,
  .categories-bar a[aria-current]:hover{
    background: transparent;
  }
}