/* doc-project | public/assets/css/store-header.css | stylise annonce, marque, recherche, navigation de bureau et barre mobile persistante */
.announcement { background: var(--wine-dark); color: white; padding: .45rem 1rem; font-size: .72rem; font-weight: 750; letter-spacing: .025em; text-align: center; }
.store-header { position: relative; z-index: 100; border-bottom: 1px solid var(--line); background: rgb(251 248 243 / 94%); backdrop-filter: blur(16px); }
.header-main { display: flex; min-height: 4.6rem; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand__mark { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border-radius: 50% 50% 45% 55%; background: var(--wine); color: white; box-shadow: 0 8px 22px rgb(93 35 54 / 20%); transform: rotate(-7deg); }
.brand__mark .icon { width: 1.35rem; height: 1.35rem; transform: rotate(7deg); }
.brand span:last-child { display: grid; line-height: 1.12; }
.brand strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.brand small { margin-top: .15rem; color: var(--ink-soft); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.header-search { display: none; }
.header-actions { display: flex; align-items: center; gap: .25rem; }
.header-actions > a { display: none; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: 50%; }
.header-actions .cart-link { position: relative; display: grid; background: white; }
.cart-link [data-cart-count] { position: absolute; top: -.15rem; right: -.1rem; display: grid; min-width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 50%; background: var(--wine); color: white; font-size: .62rem; font-weight: 850; }
.desktop-nav { display: none; }
.mobile-nav { position: fixed; z-index: 700; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: .4rem max(.45rem, env(safe-area-inset-right)) calc(.4rem + env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: rgb(255 255 255 / 96%); box-shadow: 0 -10px 30px rgb(36 29 32 / 9%); backdrop-filter: blur(18px); }
.mobile-nav a { position: relative; display: grid; min-height: 3.75rem; place-items: center; align-content: center; gap: .15rem; border-radius: .7rem; color: var(--ink-soft); font-size: .62rem; font-weight: 750; }
.mobile-nav a.is-active { background: var(--blush); color: var(--wine); }
.mobile-nav .icon { width: 1.3rem; height: 1.3rem; }
.mobile-nav__cart b { position: absolute; top: .2rem; right: calc(50% - 1.35rem); display: grid; min-width: 1rem; height: 1rem; place-items: center; border-radius: 50%; background: var(--wine); color: white; font-size: .55rem; }
@media (min-width: 760px) {
  .store-header { position: sticky; top: 0; }
  .header-main { min-height: 5.5rem; }
  .header-actions > a { display: grid; }
  .mobile-nav { display: none; }
  .brand strong { font-size: 1.2rem; }
  .brand small { font-size: .66rem; }
}
@media (min-width: 980px) {
  .header-search { display: grid; width: min(38vw, 30rem); grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: white; padding: .25rem .3rem .25rem .9rem; }
  .header-search input { min-height: 2.4rem; border: 0; box-shadow: none; padding: .4rem; }
  .header-search button { min-height: 2.35rem; border: 0; border-radius: var(--radius-pill); background: var(--wine); color: white; padding: .4rem .9rem; font-size: .75rem; font-weight: 800; }
  .desktop-nav { display: flex; min-height: 3rem; align-items: center; justify-content: center; gap: 2rem; border-top: 1px solid var(--line); }
  .desktop-nav a { position: relative; color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
  .desktop-nav a::after { position: absolute; right: 0; bottom: -.75rem; left: 0; height: 2px; background: var(--wine); content: ""; transform: scaleX(0); transition: transform .2s; }
  .desktop-nav a:hover, .desktop-nav a.is-active { color: var(--wine); }
  .desktop-nav a:hover::after, .desktop-nav a.is-active::after { transform: scaleX(1); }
}