/* ============================================================
   H.USH — hush-shell.css
   Réskin du shell partagé (header.php / footer.php) vers la DA.
   On SURCHARGE les classes existantes du storefront (markup et JS
   inchangés → panier, popover compte, menu mobile, compteur,
   GTM/consent : tout continue de fonctionner).
   Chargé en DERNIER dans header.php.
   ============================================================ */

:root {
  --hush-bg:      #f5f4f0;
  --hush-bg-deep: #ecebe5;
  --hush-ink:     #14140f;
  --hush-ink-2:   rgba(20,20,15,0.62);
  --hush-ink-3:   rgba(20,20,15,0.42);
  --hush-line:    rgba(20,20,15,0.14);
  --hush-line-2:  rgba(20,20,15,0.08);
  --hush-paper:   #fbfaf7;
  --hush-accent:  #c8a35b;
  --hush-accent-d:#a9863f;
  --hush-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --hush-sans:    "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --hush-maxw:    1320px;
  --hush-gutter:  clamp(18px, 4.5vw, 64px);
}

/* Fond global harmonisé (toutes pages) */
body { background: var(--hush-bg); }

/* ============================================================
   ANNOUNCEMENT BAR — languette noire animée (marquee)
   ============================================================ */
.announcement-bar {
  background: var(--hush-ink) !important;
  color: var(--hush-paper) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.announcement-bar__inner {
  background: transparent !important;
  overflow: hidden;
  width: 100%;
  padding: 0 !important;
  max-width: none !important;
}
.hush-marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding: 9px 0;
  animation: hush-marquee 38s linear infinite;
}
.hush-marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  white-space: nowrap;
  font-family: var(--hush-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251,250,247,0.82);
}
.hush-marquee__track span::after { content: "✦"; color: var(--hush-accent); font-size: 9px; }
@keyframes hush-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hush-marquee__track { animation: none; } }

/* ============================================================
   HEADER + NAV  (markup .site-header/.nav conservé)
   ============================================================ */
.site-header {
  background: rgba(245,244,240,0.82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--hush-line-2) !important;
  box-shadow: none !important;
}
.site-header .container { max-width: var(--hush-maxw); }
.site-header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding-block: 10px;
}

/* Logo : wordmark texte (voir header.php) */
.site-header .logo,
.mobile-nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.hush-wordmark {
  font-family: var(--hush-display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--hush-ink);
}
.hush-wordmark b { color: var(--hush-accent); }
.mobile-nav__brand .hush-wordmark { font-size: 30px; }

/* Liens nav */
.site-header .nav-links {
  display: flex;
  gap: 34px;
  align-items: center;
  padding-right: 0 !important;   /* annule le décalage 35rem du storefront → liens centrés */
  padding-left: 0 !important;
  font-size: 11.5px !important;
}
.site-header .nav-links a {
  font-family: var(--hush-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--hush-ink-2) !important;
  position: relative;
  padding: 6px 0 !important;
  transition: color .3s;
}
.site-header .nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--hush-accent);
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.site-header .nav-links a:hover,
.site-header .nav-links a[aria-current="page"] { color: var(--hush-ink) !important; }
.site-header .nav-links a:hover::after,
.site-header .nav-links a[aria-current="page"]::after { width: 100%; }

/* Icônes compte / panier : encre → or au survol */
.account-btn svg, .cart-btn svg { color: var(--hush-ink); fill: currentColor; }
.account-btn:hover svg, .cart-btn:hover svg { color: var(--hush-accent-d); }
.cart-count {
  background: var(--hush-accent) !important;
  color: var(--hush-ink) !important;
  font-weight: 700;
}
.account-quickbtn,
.mobile-nav__account {
  font-family: var(--hush-sans);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* Burger */
.nav-burger__bar { background: var(--hush-ink) !important; }

/* Popover compte : accents DA (le gros du style reste account-header.css) */
.account-popover { border-radius: 2px !important; border: 1px solid var(--hush-line) !important; }
.account-submit {
  background: var(--hush-ink) !important; color: var(--hush-paper) !important;
  border-radius: 0 !important; letter-spacing: 0.16em; text-transform: uppercase; font-size: 12px;
}
.account-submit:hover { background: var(--hush-accent) !important; color: var(--hush-ink) !important; }
.account-input:focus { border-color: var(--hush-accent) !important; box-shadow: 0 0 0 3px rgba(200,163,91,0.14) !important; }

/* ============================================================
   FOOTER  (markup réécrit en .hush-footer dans footer.php)
   ============================================================ */
.hush-footer {
  background: var(--hush-ink);
  color: var(--hush-paper);
  padding-top: clamp(64px, 9vh, 110px);
  font-family: var(--hush-sans);
}
.hush-footer a { text-decoration: none; }
.hush-footer__wrap { max-width: var(--hush-maxw); margin: 0 auto; padding: 0 var(--hush-gutter); }
.hush-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: clamp(46px, 7vh, 76px);
}
.hush-footer__brand {
  font-family: var(--hush-display);
  font-size: 38px; font-weight: 500; letter-spacing: 0.04em;
  color: #fff; margin-bottom: 18px; display: inline-block;
}
.hush-footer__brand b { color: var(--hush-accent); }
.hush-footer__about { color: rgba(251,250,247,0.6); font-size: 14px; line-height: 1.6; max-width: 34ch; }
.hush-footer__social { display: flex; gap: 16px; margin-top: 22px; }
.hush-footer__social a {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(251,250,247,0.7); padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.hush-footer__social a:hover { color: var(--hush-accent); border-color: var(--hush-accent); }
.hush-footer__col h3 {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(251,250,247,0.5); margin-bottom: 18px; font-weight: 600; font-family: var(--hush-sans);
}
.hush-footer__col a, .hush-footer__col button {
  display: block; color: rgba(251,250,247,0.78); font-size: 14px; padding: 7px 0;
  transition: color .3s, padding-left .3s; background: transparent; border: 0; cursor: pointer;
  text-align: left; font-family: var(--hush-sans); width: 100%;
}
.hush-footer__col a:hover, .hush-footer__col button:hover { color: var(--hush-accent); padding-left: 6px; }
.hush-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 26px 0 38px; border-top: 1px solid rgba(251,250,247,0.14);
  font-size: 12px; letter-spacing: 0.05em; color: rgba(251,250,247,0.5);
}
@media (max-width: 880px) { .hush-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 540px) { .hush-footer__top { grid-template-columns: 1fr; } }

/* ============================================================
   CORRECTIFS iPad / tablette (chargés après responsive.css)
   ============================================================ */

/* --- Bug 1 : double « H.USH » dans le header ---
   L'ancien responsive.css injectait un wordmark via .logo::before
   (à l'époque où le logo était une image). Maintenant que le logo
   est un vrai <span class="hush-wordmark">, ce pseudo crée un doublon
   sur iPad/tablette. On le neutralise partout. */
.site-header .logo::before {
  content: none !important;
  display: none !important;
}
.site-header .logo .hush-wordmark { display: inline-block !important; }

/* --- Bug 2 : images produit géantes empilées sur iPad (769–1180px) ---
   Dans cette plage, responsive.css passe .pdp-thumbs en flex-row mais
   ne réduit pas .pdp-thumb (width:100% par défaut) → les miniatures
   s'affichent en pleine largeur, empilées. On les contraint en ligne
   scrollable et on rétablit un ratio propre pour l'image principale. */
@media (min-width: 769px) and (max-width: 1180px) {
  body.is-shop .pdp-gallery > .pdp-thumbs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.is-shop .pdp-gallery > .pdp-thumbs::-webkit-scrollbar { display: none; }
  body.is-shop .pdp-gallery .pdp-thumb {
    width: 84px !important;
    flex: 0 0 84px !important;
    height: auto !important;
    aspect-ratio: 1 !important;
  }
  body.is-shop .pdp-main-img {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    max-height: 70vh !important;
    object-fit: contain;
    object-position: center;
    background: var(--pdp-paper, #fff);
  }

  /* --- Bug carrousel « Tu pourrais aimer » : zone blanche sous l'image ---
     responsive.css force la hauteur de l'IMG (clamp) mais .pc-media garde
     aspect-ratio:4/5 → le cadre dépasse l'image. On aligne le cadre sur
     la hauteur de l'image et on la fait remplir à 100%. */
  body .product-carousel .pc-media,
  body #featured .pc-media {
    aspect-ratio: auto !important;
    height: clamp(330px, 34vw, 420px) !important;
  }
  body .product-carousel .pc-media img,
  body #featured .pc-media img {
    height: 100% !important;
  }
}

/* ============================================================
   Accessibilité — taille des cibles tactiles (WCAG 2.5.8 / Lighthouse)
   Garantit une zone cliquable d'au moins 24x24px sur les éléments
   interactifs du header, sans modifier la mise en page visible
   (la zone de clic est centrée autour de l'élément existant).
   ============================================================ */
body .site-header .nav-links a,
body .site-header .logo {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
}
body .site-header .header-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  min-height: 24px !important;
}
body .site-header .account-btn,
body .site-header .cart-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  min-height: 24px !important;
}
/* Burger : on garantit juste la zone tactile quand il est visible (mobile),
   SANS forcer son affichage — il doit rester masqué sur desktop
   (display:none géré par responsive.css). */
body .site-header .nav-burger {
  min-width: 24px !important;
  min-height: 24px !important;
}