:root {
  --bg: #050506;
  --surface: #111114;
  --surface-2: #18181d;
  --neon: #8a2be2;
  --neon-light: #8e2de2;
  --cyan: #00ffff;
  --pink: #ff00ff;
  --text: #ffffff;
  --muted: #b8b8c5;
  --line: rgba(138, 43, 226, 0.45);
  --header-bg: rgba(10, 10, 12, 0.92);
  --font-primary: 'Orbitron', 'Audiowide', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(138, 43, 226, 0.13), transparent 34rem),
    radial-gradient(circle at 80% 32%, rgba(0, 255, 255, 0.07), transparent 28rem),
    #050506;
  color: var(--text);
  font-family: var(--font-primary);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.ambient {
  position: fixed;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.2;
}

.ambient-one {
  top: 8rem;
  left: -12rem;
  background: var(--neon);
}

.ambient-two {
  right: -12rem;
  top: 55%;
  background: var(--cyan);
  opacity: 0.1;
}

/* ==============================
   HEADER
============================== */
.store-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  min-height: 90px;
  padding: 14px 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  background: var(--header-bg);
  border-bottom: 1px solid rgba(138, 43, 226, 0.4);
  box-shadow: 0 0 18px rgba(138, 43, 226, 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.artist-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}

.artist-icon {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 2px solid var(--neon);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon);
  transition: transform .25s ease, box-shadow .25s ease;
}

.artist-link:hover .artist-icon {
  transform: scale(1.07);
  box-shadow: 0 0 18px #fff, 0 0 26px var(--neon);
}

.artist-name {
  color: var(--neon);
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 10px var(--neon);
}

.store-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.8vw, 26px);
}

.store-nav a {
  position: relative;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .045em;
  transition: color .25s ease, text-shadow .25s ease;
}

.store-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  transform: translateX(-50%);
  transition: width .25s ease;
}

.store-nav a:hover,
.store-nav a.active {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0,255,255,.7);
}

.store-nav a:hover::after,
.store-nav a.active::after {
  width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.store-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(138,43,226,.65);
  border-radius: 50%;
  background: rgba(10,10,20,.78);
  box-shadow: 0 0 8px rgba(138,43,226,.4), inset 0 0 8px rgba(138,43,226,.12);
  transition: transform .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.store-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.store-icon:hover,
.store-icon.active {
  color: var(--cyan);
  border-color: rgba(0,255,255,.8);
  transform: translateY(-1px);
  box-shadow: 0 0 8px var(--cyan), 0 0 18px rgba(138,43,226,.75);
}

.lang-dropdown {
  position: relative;
}

.lang-menu-toggle {
  min-width: 78px;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(138,43,226,.8);
  border-radius: 999px;
  background: rgba(10,10,20,.85);
  color: #fff;
  font-family: var(--font-primary);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(138,43,226,.45), inset 0 0 8px rgba(138,43,226,.18);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.lang-menu-toggle:hover,
.lang-dropdown.open .lang-menu-toggle {
  border-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 12px #fff, 0 0 22px var(--neon), inset 0 0 12px rgba(138,43,226,.35);
}

.lang-arrow {
  font-size: .72rem;
  opacity: .75;
  transition: transform .25s ease;
}

.lang-dropdown.open .lang-arrow {
  transform: rotate(180deg);
}

.flag {
  width: 22px;
  height: 15px;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.45);
}

.flag-fr {
  background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66% 100%);
}

.flag-gb {
  background:
    linear-gradient(90deg, transparent 42%, #ff2b2b 42%, #ff2b2b 58%, transparent 58%),
    linear-gradient(0deg, transparent 38%, #ff2b2b 38%, #ff2b2b 62%, transparent 62%),
    linear-gradient(90deg, transparent 34%, #fff 34%, #fff 66%, transparent 66%),
    linear-gradient(0deg, transparent 30%, #fff 30%, #fff 70%, transparent 70%),
    linear-gradient(35deg, transparent 45%, #ff2b2b 45%, #ff2b2b 55%, transparent 55%),
    linear-gradient(-35deg, transparent 45%, #ff2b2b 45%, #ff2b2b 55%, transparent 55%),
    linear-gradient(35deg, transparent 39%, #fff 39%, #fff 61%, transparent 61%),
    linear-gradient(-35deg, transparent 39%, #fff 39%, #fff 61%, transparent 61%),
    #0046ad;
}

.lang-menu-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  display: grid;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  border: 1px solid rgba(138,43,226,.55);
  border-radius: 12px;
  background: rgba(10,10,14,.97);
  box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 22px rgba(138,43,226,.3);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.lang-dropdown.open .lang-menu-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  width: 100%;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-family: var(--font-primary);
  font-size: .7rem;
  text-align: left;
  cursor: pointer;
}

.lang-option:hover,
.lang-option.active {
  background: rgba(138,43,226,.25);
  color: var(--cyan);
}

.menu-toggle {
  display: none;
  width: 28px;
  height: 22px;
  padding: 0;
  flex-direction: column;
  justify-content: space-between;
  border: 0;
  background: none;
  cursor: pointer;
}

.menu-toggle span {
  width: 100%;
  height: 3px;
  display: block;
  border-radius: 2px;
  background: var(--neon);
  transition: transform .25s ease, opacity .25s ease;
}

.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 7px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -7px); }

/* ==============================
   HERO
============================== */
main {
  padding-top: 90px;
}

.store-hero {
  min-height: calc(100vh - 90px);
  padding: 80px 20px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.store-hero::before {
  content: '';
  position: absolute;
  width: min(650px, 82vw);
  aspect-ratio: 1;
  border: 1px solid rgba(138,43,226,.2);
  border-radius: 50%;
  box-shadow:
    0 0 90px rgba(138,43,226,.18),
    inset 0 0 80px rgba(0,255,255,.035);
  pointer-events: none;
}

.store-hero::after {
  content: '';
  position: absolute;
  inset: auto 10% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(138,43,226,.7), rgba(0,255,255,.65), transparent);
  box-shadow: 0 0 20px var(--neon);
}

.eyebrow,
.section-kicker {
  position: relative;
  z-index: 1;
  color: var(--cyan);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-shadow: 0 0 9px rgba(0,255,255,.6);
}

.store-hero h1 {
  position: relative;
  z-index: 1;
  margin: 12px 0 20px;
  font-size: clamp(3.2rem, 10vw, 8.5rem);
  line-height: .95;
  letter-spacing: -.04em;
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    0 0 7px #fff,
    0 0 18px var(--neon),
    0 0 34px rgba(255,0,255,.48),
    0 0 52px rgba(0,255,255,.24);
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: min(760px, 92vw);
  margin-bottom: 34px;
  color: #d8d8df;
  font-size: clamp(.86rem, 1.45vw, 1rem);
  line-height: 1.85;
}

.hero-cta {
  position: relative;
  z-index: 1;
  min-height: 46px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(0,255,255,.65);
  border-radius: 999px;
  background: rgba(8,8,12,.6);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(0,255,255,.15), inset 0 0 12px rgba(138,43,226,.1);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
}

.hero-cta:hover {
  color: var(--cyan);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(255,255,255,.35), 0 0 26px rgba(0,255,255,.35), 0 0 36px rgba(138,43,226,.28);
}

/* ==============================
   PRODUCTS
============================== */
.products-section {
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 95px 0 110px;
}

.section-heading {
  max-width: 800px;
  margin: 0 auto 42px;
  text-align: center;
}

.section-heading h2,
.contact-strip h2 {
  margin: 8px 0 12px;
  color: #fff;
  font-size: clamp(1.55rem, 4vw, 2.4rem);
  line-height: 1.2;
  text-shadow: 0 0 12px rgba(138,43,226,.65);
}

.section-heading p,
.contact-strip p {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.8;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.product-card {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: grid;
  grid-template-rows: 1fr auto;
  border: 1px solid rgba(138,43,226,.45);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(18,18,24,.95), rgba(7,7,10,.96));
  box-shadow: 0 0 22px rgba(138,43,226,.14), inset 0 0 26px rgba(138,43,226,.05);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.09), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
  pointer-events: none;
}

.product-card:hover {
  transform: translateY(-7px);
  border-color: rgba(0,255,255,.58);
  box-shadow: 0 0 20px rgba(0,255,255,.14), 0 0 38px rgba(138,43,226,.22), inset 0 0 28px rgba(138,43,226,.07);
}

.product-card:hover::before {
  left: 130%;
}

.product-visual {
  min-height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 50% 40%, rgba(138,43,226,.32), transparent 43%),
    linear-gradient(145deg, #101014, #070709);
}

.product-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55));
  pointer-events: none;
}

.visual-label {
  position: absolute;
  left: 18px;
  bottom: 15px;
  z-index: 2;
  color: rgba(255,255,255,.72);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .28em;
}

.vinyl-disc {
  width: 190px;
  height: 190px;
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle, #050505 0 11%, var(--neon) 11% 13%, #111 13% 25%, #060606 25% 27%, #111 27% 40%, #050505 40% 42%, #121212 42% 55%, #060606 55% 57%, #111 57% 70%, #050505 70% 72%, #111 72% 100%);
  box-shadow: 0 0 22px rgba(0,0,0,.9), 0 0 32px rgba(138,43,226,.35);
}

.vinyl-disc::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.16), transparent 38%);
}

.edition-frame {
  width: 175px;
  height: 218px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,255,255,.72);
  background: linear-gradient(150deg, rgba(138,43,226,.26), rgba(0,0,0,.55));
  box-shadow: 14px 16px 0 rgba(138,43,226,.11), 0 0 28px rgba(0,255,255,.18);
  transform: perspective(700px) rotateY(-7deg) rotateX(3deg);
}

.edition-frame span {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-shadow: 0 0 10px #fff, 0 0 24px var(--neon);
}

.shirt-icon {
  width: 170px;
  height: 170px;
  fill: rgba(138,43,226,.12);
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.35)) drop-shadow(0 0 18px rgba(138,43,226,.65));
}

.product-info {
  padding: 22px 22px 24px;
  text-align: left;
}

.product-category {
  color: var(--cyan);
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.product-info h3 {
  margin: 5px 0 8px;
  color: #fff;
  font-size: 1.2rem;
}

.product-info p {
  min-height: 68px;
  color: var(--muted);
  font-family: var(--font-primary);
  font-size: .73rem;
  line-height: 1.7;
}

.status-pill {
  margin-top: 14px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(138,43,226,.55);
  border-radius: 999px;
  background: rgba(138,43,226,.12);
  color: #ddd;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ==============================
   CONTACT + FOOTER
============================== */
.contact-strip {
  width: min(1080px, 92vw);
  margin: 0 auto 110px;
  padding: 34px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
  border: 1px solid rgba(138,43,226,.44);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(138,43,226,.11), rgba(0,255,255,.035) 55%, rgba(10,10,14,.78));
  box-shadow: 0 0 35px rgba(138,43,226,.12);
}

.contact-button {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--neon);
  border-radius: 999px;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(138,43,226,.35), inset 0 0 10px rgba(138,43,226,.1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.contact-button:hover {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: 0 0 10px #fff, 0 0 24px var(--neon), 0 0 34px rgba(0,255,255,.22);
}

.store-footer {
  min-height: 58px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(138,43,226,.35);
  background: #09090b;
  color: #bdbdc8;
  font-size: .65rem;
  box-shadow: 0 -6px 24px rgba(138,43,226,.08);
}

.store-footer a {
  color: #fff;
  transition: color .25s ease, text-shadow .25s ease;
}

.store-footer a:hover {
  color: var(--cyan);
  text-shadow: 0 0 9px var(--cyan);
}

/* Center the single copyright block in every store footer layout. */
#store-footer.centered-copyright {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
#store-footer.centered-copyright .footer-left {
  display: block !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  align-self: center !important;
  text-align: center !important;
  transform: none !important;
}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 1050px) {
  .store-header {
    gap: 14px;
    padding-inline: 18px;
  }

  .store-nav {
    gap: 14px;
  }

  .store-nav a {
    font-size: .7rem;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-card:last-child {
    grid-column: 1 / -1;
    width: min(520px, 100%);
    justify-self: center;
  }
}

@media (max-width: 1080px) {
  .store-header {
    min-height: 70px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 15px;
  }

  .artist-icon {
    width: 45px;
    height: 45px;
  }

  .artist-name {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.05rem;
  }

  .store-nav {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 999;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    flex-direction: column;
    gap: 0;
    background: rgba(10,10,12,.98);
    border-bottom: 1px solid rgba(138,43,226,.4);
    opacity: 0;
    transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
  }

  .store-nav.show {
    max-height: 320px;
    padding: 10px 0 14px;
    opacity: 1;
  }

  .store-nav a {
    width: 100%;
    padding: 11px 20px;
    text-align: center;
  }

  .store-nav a::after {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  main {
    padding-top: 70px;
  }

  .store-hero {
    min-height: calc(100svh - 70px);
  }
}

@media (max-width: 700px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card:last-child {
    grid-column: auto;
    width: 100%;
  }

  .contact-strip {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 22px;
  }

  .contact-button {
    justify-self: center;
  }
}

@media (max-width: 520px) {
  .store-header {
    gap: 8px;
  }

  .artist-name {
    font-size: .9rem;
    max-width: 31vw;
  }

  .header-right {
    gap: 6px;
  }

  .store-icon {
    width: 34px;
    height: 34px;
  }

  .store-icon svg {
    width: 19px;
    height: 19px;
  }

  .lang-menu-toggle {
    min-width: 65px;
    height: 34px;
    padding: 0 8px;
    gap: 5px;
    font-size: .64rem;
  }

  .flag {
    width: 18px;
    height: 12px;
  }

  .store-hero {
    padding-inline: 16px;
  }

  .hero-copy {
    width: 94vw;
    font-size: .8rem;
  }

  .products-section {
    width: 90vw;
    padding-top: 75px;
  }

  .product-card {
    min-height: 0;
  }

  .product-visual {
    min-height: 260px;
  }

  .store-footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding-block: 14px;
  }
}

@media (max-width: 380px) {
  .artist-name {
    display: none;
  }

  .lang-menu-toggle {
    min-width: 62px;
  }
}

/* ==============================
   CURSEUR PERSONNALISÉ
============================== */
#cursor {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  a,
  button {
    cursor: none !important;
  }

  #cursor {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    z-index: 2147483647;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    border: 2px solid var(--neon);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px var(--neon), 0 0 30px var(--neon);
    transition: opacity .2s ease, transform .1s ease, box-shadow .2s ease;
  }

  body.cursor-visible #cursor {
    opacity: 1;
    visibility: visible;
  }

  #cursor.hover {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 25px #fff, 0 0 50px var(--neon);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==============================
   ESSENTIAL #1 — PRODUIT VINYLE
============================== */
.featured-product {
  border-color: rgba(0, 255, 255, 0.58);
  box-shadow:
    0 0 24px rgba(0, 255, 255, 0.12),
    0 0 44px rgba(138, 43, 226, 0.18),
    inset 0 0 30px rgba(138, 43, 226, 0.06);
}

.product-cover-visual {
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 255, 255, 0.13), transparent 46%),
    radial-gradient(circle at 25% 18%, rgba(138, 43, 226, 0.28), transparent 42%),
    linear-gradient(145deg, #101014, #050507);
}

.product-cover {
  width: min(100%, 330px);
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.66),
    0 0 20px rgba(255, 255, 255, 0.09),
    0 0 38px rgba(0, 255, 255, 0.15),
    0 0 58px rgba(138, 43, 226, 0.18);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.featured-product:hover .product-cover {
  transform: scale(1.025);
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.72),
    0 0 18px rgba(255, 255, 255, 0.16),
    0 0 38px rgba(0, 255, 255, 0.25),
    0 0 62px rgba(138, 43, 226, 0.32);
}

.product-artist {
  margin: -2px 0 11px;
  color: var(--cyan);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.36);
}

.product-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.product-price {
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.featured-status {
  margin-top: 0;
  border-color: rgba(0, 255, 255, 0.5);
  background: rgba(0, 255, 255, 0.08);
  color: var(--cyan);
  box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.06);
}

@media (max-width: 560px) {
  .product-cover-visual {
    padding: 18px;
  }

  .product-cover {
    width: min(100%, 360px);
  }

  .product-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ==============================
   TRANSITION SITE PRINCIPAL ↔ STORE
============================== */
.store-page-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(138, 43, 226, 0.34), transparent 36%),
    radial-gradient(circle at 50% 58%, rgba(0, 255, 255, 0.20), transparent 44%),
    rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), visibility .55s cubic-bezier(.22, 1, .36, 1);
}
.store-page-transition.show { opacity: 1; visibility: visible; }
.store-page-transition.hide { opacity: 0; visibility: hidden; }
.store-page-transition-inner { width: min(760px, 88vw); text-align: center; }
.store-page-transition-text {
  color: #fff;
  font-family: var(--font-primary);
  font-size: clamp(1.05rem, 4.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.45;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 8px #fff, 0 0 18px var(--neon), 0 0 34px rgba(0, 255, 255, .72);
}
.store-page-transition-line {
  width: 0;
  height: 2px;
  margin: 18px auto 0;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,.95), rgba(255,255,255,.95), rgba(138,43,226,.95), transparent);
  box-shadow: 0 0 8px rgba(0,255,255,.85), 0 0 18px rgba(138,43,226,.65);
  transition: width 1.1s cubic-bezier(.22,1,.36,1), opacity .45s ease;
}
.store-page-transition.show .store-page-transition-line { width: min(340px, 72vw); opacity: 1; }
body.store-transition-active .store-header,
body.store-transition-active main,
body.store-transition-active .store-footer {
  filter: blur(8px);
  opacity: .36;
  transform: scale(.985);
  transition: filter .55s cubic-bezier(.22,1,.36,1), opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
@media (max-width: 480px) {
  .store-page-transition-text { font-size: .95rem; letter-spacing: .09em; }
}


/* ==============================
   ESSENTIAL #1 — LIEN ELASTICSTAGE
============================== */
.product-buy-link {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: 1px solid rgba(0, 255, 255, 0.72);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(138, 43, 226, 0.22), rgba(0, 255, 255, 0.08)),
    rgba(5, 5, 10, 0.76);

  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.25),
    0 0 20px rgba(138, 43, 226, 0.22),
    inset 0 0 10px rgba(0, 255, 255, 0.06);

  transition:
    transform 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.product-buy-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-buy-link:hover,
.product-buy-link:focus-visible {
  color: var(--cyan);
  border-color: #fff;
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, rgba(138, 43, 226, 0.34), rgba(0, 255, 255, 0.13)),
    rgba(5, 5, 10, 0.9);

  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.45),
    0 0 24px rgba(0, 255, 255, 0.46),
    0 0 36px rgba(138, 43, 226, 0.42);
}

@media (max-width: 560px) {
  .product-buy-link {
    width: 100%;
    min-height: 44px;
  }
}


/* ==============================
   DONATION — PAYPAL
============================== */
.donation-section {
  width: min(1120px, 92vw);
  margin: 0 auto 46px;
}

.donation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;

  padding: clamp(26px, 5vw, 48px);
  border: 1px solid rgba(138, 43, 226, 0.68);
  border-radius: 22px;

  background:
    radial-gradient(circle at 12% 20%, rgba(138, 43, 226, 0.20), transparent 34%),
    radial-gradient(circle at 88% 80%, rgba(0, 255, 255, 0.10), transparent 30%),
    rgba(10, 10, 16, 0.86);

  box-shadow:
    0 0 20px rgba(138, 43, 226, 0.22),
    inset 0 0 26px rgba(138, 43, 226, 0.08);
}

.donation-copy {
  text-align: left;
}

.donation-copy h2 {
  margin: 7px 0 12px;
  color: #fff;
  font-size: clamp(1.25rem, 3vw, 2rem);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.42),
    0 0 18px rgba(138, 43, 226, 0.62);
}

.donation-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.75;
}

.paypal-donation {
  min-width: 250px;
  display: flex;
  justify-content: center;
}

.paypal-donation-form {
  display: inline-grid;
  justify-items: center;
  align-content: start;
  gap: 0.55rem;
  padding: 18px;

  border: 1px solid rgba(0, 255, 255, 0.28);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.34);

  box-shadow:
    0 0 12px rgba(0, 255, 255, 0.12),
    0 0 20px rgba(138, 43, 226, 0.14);
}

.pp-E5W7GUNPUM34J {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  min-width: 11.625rem;
  height: 2.625rem;
  padding: 0 2rem;

  border: none;
  border-radius: 0.25rem;

  background-color: #FFD140;
  color: #000;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25rem;

  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.pp-E5W7GUNPUM34J:hover,
.pp-E5W7GUNPUM34J:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    0 0 14px rgba(255, 209, 64, 0.44),
    0 0 24px rgba(138, 43, 226, 0.20);
}

.paypal-cards {
  width: min(220px, 74vw);
  height: auto;
  display: block;
}

.paypal-powered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  color: var(--text-muted);
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
}

.paypal-wordmark {
  height: 0.875rem;
  width: auto;
  vertical-align: middle;
}

@media (max-width: 820px) {
  .donation-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .donation-copy {
    text-align: center;
  }

  .donation-copy p {
    margin-inline: auto;
  }

  .paypal-donation {
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .donation-section {
    width: min(94vw, 1120px);
    margin-bottom: 34px;
  }

  .donation-card {
    padding: 22px 16px;
    border-radius: 18px;
  }

  .paypal-donation-form {
    width: 100%;
  }

  .pp-E5W7GUNPUM34J {
    width: 100%;
    min-width: 0;
  }
}


/* ==========================================================
   HEADER STORE — TYPOGRAPHIE IDENTIQUE À L'INDEX PRINCIPAL
   Reprend les valeurs finales de .header-nav a du site principal
========================================================== */

.store-nav a {
  font-family: var(--font-primary) !important;
  font-size: clamp(0.75rem, 0.9vw, 1rem) !important;
  font-weight: bold !important;
  letter-spacing: normal !important;
  line-height: 1.15 !important;
}

/* Le Store passe en hamburger plus tôt pour conserver de l'espace,
   mais les liens ouverts reprennent la taille mobile de l'index. */
@media (max-width: 1080px) {
  .store-nav a {
    font-family: var(--font-primary) !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    letter-spacing: normal !important;
    line-height: 1.15 !important;
    padding: 12px 0 !important;
  }
}


/* ==========================================================
   STORE — FOOTER FIXE COMME L'INDEX PRINCIPAL
========================================================== */
:root {
  --store-footer-h: 72px;
  --store-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Réserve toujours la place du footer fixe. */
body {
  padding-bottom:
    calc(var(--store-footer-h) + var(--store-safe-bottom) + 18px) !important;
}

.store-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--store-footer-h) !important;

  margin: 0 !important;
  padding:
    0
    30px
    var(--store-safe-bottom)
    30px !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  background: var(--header-bg) !important;
  border-top: 1px solid rgba(138, 43, 226, 0.45) !important;
  color: #fff !important;

  font-size: clamp(12px, 0.9vw, 16px) !important;
  line-height: 1.25 !important;

  box-shadow:
    0 0 15px var(--neon),
    0 -6px 24px rgba(138, 43, 226, 0.12) !important;

  z-index: 2147483000 !important;
  overflow: hidden !important;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.store-footer .footer-left,
.store-footer .footer-right {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  white-space: nowrap !important;
}

.store-footer .footer-left {
  text-align: left !important;
}

.store-footer .footer-right {
  text-align: right !important;
}

.store-footer a {
  margin-left: 0 !important;
  color: #fff !important;
  font-weight: bold !important;
  white-space: nowrap !important;
}

.store-footer a:hover,
.store-footer a:focus-visible {
  color: var(--cyan) !important;
  text-shadow:
    0 0 10px var(--cyan),
    0 0 18px var(--neon) !important;
}

/* Même logique que l'index principal sur smartphone :
   copyright à gauche, lien à droite, toujours sur une ligne. */
@media (max-width: 768px) {
  :root {
    --store-footer-h: 56px;
  }

  body {
    padding-bottom:
      calc(var(--store-footer-h) + var(--store-safe-bottom) + 10px) !important;
  }

  .store-footer {
    min-height: var(--store-footer-h) !important;
    height: auto !important;

    padding:
      6px
      8px
      calc(var(--store-safe-bottom) + 6px)
      8px !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 6px !important;
    font-size: clamp(8.5px, 2.35vw, 12px) !important;
    line-height: 1.2 !important;
  }

  .store-footer .footer-left,
  .store-footer .footer-right {
    width: auto !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .store-footer .footer-left {
    max-width: 68% !important;
  }

  .store-footer .footer-right {
    max-width: 30% !important;
  }
}

@media (max-width: 380px) {
  .store-footer {
    gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .store-footer .footer-left {
    font-size: min(2.05vw, 8.4px) !important;
    letter-spacing: -0.04em !important;
  }

  .store-footer .footer-right {
    font-size: min(2.05vw, 8.4px) !important;
    letter-spacing: -0.04em !important;
  }
}


/* ==========================================================
   CORRECTION FINALE — FOOTER FIXE + SAFE AREA PWA iOS
========================================================== */

:root {
  --store-safe-top: env(safe-area-inset-top, 0px);
  --store-safe-bottom: env(safe-area-inset-bottom, 0px);
  --store-mobile-header-base-h: 70px;
  --store-mobile-header-h: var(--store-mobile-header-base-h);
  --store-footer-h: 72px;
}

/* ----------------------------------------------------------
   FOOTER : toujours fixe en bas
---------------------------------------------------------- */
body {
  padding-bottom:
    calc(var(--store-footer-h) + var(--store-safe-bottom) + 18px) !important;
}

.store-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--store-footer-h) !important;

  margin: 0 !important;
  padding:
    0
    max(18px, env(safe-area-inset-right, 0px))
    var(--store-safe-bottom)
    max(18px, env(safe-area-inset-left, 0px)) !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  z-index: 2147483000 !important;

  background: rgba(10, 10, 12, 0.96) !important;
  border-top: 1px solid rgba(138, 43, 226, 0.45) !important;
  box-shadow:
    0 0 15px var(--neon),
    0 -6px 24px rgba(138, 43, 226, 0.12) !important;

  color: #fff !important;
  overflow: hidden !important;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.store-footer .footer-left,
.store-footer .footer-right {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.store-footer .footer-left {
  flex: 1 1 auto !important;
  text-align: left !important;
}

.store-footer .footer-right {
  flex: 0 0 auto !important;
  text-align: right !important;
}

/* ----------------------------------------------------------
   MOBILE : footer sur une seule ligne
---------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --store-footer-h: 56px;
  }

  body {
    padding-bottom:
      calc(var(--store-footer-h) + var(--store-safe-bottom) + 10px) !important;
  }

  .store-footer {
    min-height: var(--store-footer-h) !important;
    padding:
      6px
      max(8px, env(safe-area-inset-right, 0px))
      calc(var(--store-safe-bottom) + 6px)
      max(8px, env(safe-area-inset-left, 0px)) !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 6px !important;
    font-size: clamp(8.5px, 2.35vw, 12px) !important;
    line-height: 1.2 !important;
    text-align: initial !important;
  }

  .store-footer .footer-left,
  .store-footer .footer-right {
    width: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .store-footer .footer-left {
    max-width: 70% !important;
  }

  .store-footer .footer-right {
    max-width: 28% !important;
  }
}

/* ----------------------------------------------------------
   PWA iOS / mode standalone
   - fond du header jusque dans la zone système
   - contenu du header placé SOUS la safe area
   - aucune superposition avec l'heure / Dynamic Island
   - header toujours sur une seule ligne
---------------------------------------------------------- */
@media all and (display-mode: standalone) and (max-width: 1080px) {
  :root {
    --store-mobile-header-h:
      calc(var(--store-mobile-header-base-h) + var(--store-safe-top));
  }

  .store-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    min-height: var(--store-mobile-header-h) !important;

    padding:
      calc(10px + var(--store-safe-top))
      max(15px, env(safe-area-inset-right, 0px))
      10px
      max(15px, env(safe-area-inset-left, 0px)) !important;

    /* Une seule ligne */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;

    /* Safe area nette : pas de flou derrière l'heure iOS */
    background: #0a0a0c !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    z-index: 2147483001 !important;

    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .store-header .header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .store-header .artist-link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .store-header .artist-icon {
    flex: 0 0 auto !important;
  }

  .store-header .artist-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .store-header .header-right {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;

    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  .store-header .store-icon,
  .store-header .lang-dropdown,
  .store-header .lang-menu-toggle,
  .store-header .menu-toggle {
    flex: 0 0 auto !important;
  }

  /* Le menu hamburger commence sous le header complet,
     safe area comprise. */
  .store-nav {
    position: fixed !important;
    top: var(--store-mobile-header-h) !important;
    flex: none !important;
    z-index: 2147483002 !important;
  }

  /* Le contenu commence également sous le header complet. */
  main {
    padding-top: var(--store-mobile-header-h) !important;
  }

  .store-hero {
    min-height:
      calc(
        100dvh
        - var(--store-mobile-header-h)
        - var(--store-footer-h)
        - var(--store-safe-bottom)
      ) !important;
  }
}

/* ----------------------------------------------------------
   iPhone très étroit : compresser sans jamais passer
   sur une deuxième ligne.
---------------------------------------------------------- */
@media all and (display-mode: standalone) and (max-width: 430px) {
  .store-header {
    gap: 5px !important;
  }

  .store-header .artist-link {
    gap: 6px !important;
  }

  .store-header .artist-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .store-header .artist-name {
    max-width: 27vw !important;
    font-size: 0.82rem !important;
  }

  .store-header .store-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .store-header .lang-menu-toggle {
    min-width: 58px !important;
    height: 32px !important;
    padding-inline: 6px !important;
    gap: 4px !important;
  }

  .store-header .menu-toggle {
    width: 26px !important;
    height: 21px !important;
  }
}

@media all and (display-mode: standalone) and (max-width: 370px) {
  .store-header .artist-name {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   WebKit iOS : verrouille la hauteur au viewport PWA réel.
---------------------------------------------------------- */
@supports (-webkit-touch-callout: none) {
  @media all and (display-mode: standalone) {
    html,
    body {
      min-height: 100dvh !important;
    }
  }
}


/* ==========================================================
   EDGE iOS — CONSERVATION DE LA BARRE D'ADRESSE
   ----------------------------------------------------------
   Edge iOS masque sa barre d'adresse lorsque le document
   racine défile. Ici, html/body restent immobiles et seul
   <main> devient le conteneur de défilement.
========================================================== */

html.edge-ios-browser {
  width: 100% !important;
  height: 100% !important;
  height: 100svh !important;
  min-height: 100% !important;
  max-height: 100svh !important;

  overflow: hidden !important;
  overscroll-behavior: none !important;

  background: #050506 !important;
}

html.edge-ios-browser body {
  position: fixed !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  height: 100svh !important;
  min-height: 0 !important;
  max-height: 100svh !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  overscroll-behavior: none !important;

  background:
    radial-gradient(circle at 20% 0%, rgba(138, 43, 226, 0.13), transparent 34rem),
    radial-gradient(circle at 80% 32%, rgba(0, 255, 255, 0.07), transparent 28rem),
    #050506 !important;
}

/* Header Edge iOS : fixe, une seule ligne, hors du scroll. */
html.edge-ios-browser .store-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  min-height: var(--store-mobile-header-base-h) !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;

  z-index: 2147483001 !important;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html.edge-ios-browser .store-header .header-left {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html.edge-ios-browser .store-header .artist-link {
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
}

html.edge-ios-browser .store-header .artist-name {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.edge-ios-browser .store-header .header-right {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* Menu hamburger toujours sous le header. */
html.edge-ios-browser .store-nav {
  position: fixed !important;
  top: var(--store-mobile-header-base-h) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147483002 !important;
}

/* Le SEUL élément qui défile sur Edge iOS. */
html.edge-ios-browser body > main {
  position: fixed !important;

  top: var(--store-mobile-header-base-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom:
    calc(
      var(--store-footer-h)
      + var(--store-safe-bottom)
    ) !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 20px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior-x: none !important;
  overscroll-behavior-y: contain !important;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none !important;
  touch-action: pan-y;

  z-index: 1 !important;
}

html.edge-ios-browser body > main::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Le hero utilise la hauteur disponible entre header et footer. */
html.edge-ios-browser body > main > .store-hero {
  min-height:
    calc(
      100svh
      - var(--store-mobile-header-base-h)
      - var(--store-footer-h)
      - var(--store-safe-bottom)
    ) !important;
}

/* Footer Edge iOS : fixe et totalement indépendant du scroll. */
html.edge-ios-browser .store-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  z-index: 2147483000 !important;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Une transition ne doit pas permettre de faire défiler le main. */
html.edge-ios-browser body.store-transition-active > main,
html.edge-ios-browser body.modal-open > main {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Petits iPhone : conserve le header sur une seule ligne. */
@media (max-width: 430px) {
  html.edge-ios-browser .store-header {
    gap: 5px !important;
  }

  html.edge-ios-browser .store-header .artist-icon {
    width: 40px !important;
    height: 40px !important;
  }

  html.edge-ios-browser .store-header .artist-name {
    max-width: 27vw !important;
    font-size: 0.82rem !important;
  }

  html.edge-ios-browser .store-header .header-right {
    gap: 4px !important;
  }

  html.edge-ios-browser .store-header .store-icon {
    width: 32px !important;
    height: 32px !important;
  }

  html.edge-ios-browser .store-header .lang-menu-toggle {
    min-width: 58px !important;
    height: 32px !important;
    padding-inline: 6px !important;
    gap: 4px !important;
  }

  html.edge-ios-browser .store-header .menu-toggle {
    width: 26px !important;
    height: 21px !important;
  }
}

@media (max-width: 370px) {
  html.edge-ios-browser .store-header .artist-name {
    display: none !important;
  }
}


/* ==========================================================
   PWA iOS — SAFE AREA SÉPARÉE DU HEADER, SANS FLOU
   ----------------------------------------------------------
   La zone système iOS est une bande opaque indépendante.
   Le header commence sous cette zone : aucun blur/halo/ombre
   ne peut remonter derrière l'heure ou la Dynamic Island.
========================================================== */

@media all and (display-mode: standalone) and (max-width: 1080px) {
  :root {
    --store-mobile-header-base-h: 70px;
    --store-mobile-header-h:
      calc(var(--store-safe-top) + var(--store-mobile-header-base-h));
  }

  /* Bande système iOS, totalement nette. */
  html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    height: var(--store-safe-top);

    background: #0a0a0c !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;

    box-shadow: none !important;

    pointer-events: none;
    z-index: 2147483003;
  }

  /* Le header ne commence plus à top:0. */
  .store-header {
    top: var(--store-safe-top) !important;

    min-height: var(--store-mobile-header-base-h) !important;
    height: var(--store-mobile-header-base-h) !important;

    padding:
      10px
      max(15px, env(safe-area-inset-right, 0px))
      10px
      max(15px, env(safe-area-inset-left, 0px)) !important;

    /* Aucun effet ne doit déborder vers la safe area. */
    background: #0a0a0c !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;

    border-top: 0 !important;
    border-bottom: 1px solid rgba(138, 43, 226, 0.55) !important;

    overflow: visible !important;
  }

  /* Navigation mobile sous safe area + header. */
  .store-nav {
    top:
      calc(
        var(--store-safe-top)
        + var(--store-mobile-header-base-h)
      ) !important;
  }

  /* Le contenu commence sous l'ensemble safe area + header. */
  main {
    padding-top:
      calc(
        var(--store-safe-top)
        + var(--store-mobile-header-base-h)
      ) !important;
  }

  .store-hero {
    min-height:
      calc(
        100dvh
        - var(--store-safe-top)
        - var(--store-mobile-header-base-h)
        - var(--store-footer-h)
        - var(--store-safe-bottom)
      ) !important;
  }
}

/* Fallback spécifique iOS PWA via navigator.standalone. */
html.ios-pwa {
  --store-mobile-header-base-h: 70px;
  --store-mobile-header-h:
    calc(var(--store-safe-top) + var(--store-mobile-header-base-h));
}

html.ios-pwa::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--store-safe-top);

  background: #0a0a0c !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;

  pointer-events: none;
  z-index: 2147483003;
}

html.ios-pwa .store-header {
  top: var(--store-safe-top) !important;

  min-height: var(--store-mobile-header-base-h) !important;
  height: var(--store-mobile-header-base-h) !important;

  padding:
    10px
    max(15px, env(safe-area-inset-right, 0px))
    10px
    max(15px, env(safe-area-inset-left, 0px)) !important;

  background: #0a0a0c !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;

  border-top: 0 !important;
  border-bottom: 1px solid rgba(138, 43, 226, 0.55) !important;

  overflow: visible !important;
}

html.ios-pwa .store-nav {
  top:
    calc(
      var(--store-safe-top)
      + var(--store-mobile-header-base-h)
    ) !important;
}

html.ios-pwa main {
  padding-top:
    calc(
      var(--store-safe-top)
      + var(--store-mobile-header-base-h)
    ) !important;
}

html.ios-pwa .store-hero {
  min-height:
    calc(
      100dvh
      - var(--store-safe-top)
      - var(--store-mobile-header-base-h)
      - var(--store-footer-h)
      - var(--store-safe-bottom)
    ) !important;
}


/* ==========================================================
   FINAL — HEADER STORE = COMPORTEMENT HEADER INDEX PRINCIPAL
   ----------------------------------------------------------
   L'index principal utilise :
   - viewport standard (sans viewport-fit=cover)
   - header fixed top:0
   - hauteur mobile 70px
   - padding 10px 15px
   - aucune compensation safe-area-inset-top
   iOS gère donc lui-même la zone système de la PWA.
========================================================== */

/* Neutralise les bandes safe-area ajoutées par les anciens patches. */
html.ios-pwa::before,
html.pwa-standalone::before {
  content: none !important;
  display: none !important;
}

@media all and (display-mode: standalone) and (max-width: 1080px) {
  :root {
    --store-safe-top: 0px !important;
    --store-mobile-header-base-h: 70px !important;
    --store-mobile-header-h: 70px !important;
  }

  html,
  body {
    /* Comme l'index principal : pas de décalage manuel lié à la safe area haute. */
    padding-top: 0 !important;
  }

  .store-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;

    padding: 10px 15px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;

    background: var(--header-bg) !important;

    /* L'index principal n'utilise pas de backdrop blur sur son header. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;

    box-shadow: 0 0 15px var(--neon) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    overflow: visible !important;

    z-index: 2147483001 !important;

    will-change: transform;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  .store-header .header-left {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .store-header .artist-link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .store-header .artist-icon {
    width: 45px !important;
    height: 45px !important;
    flex: 0 0 auto !important;
  }

  .store-header .artist-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 38vw !important;

    font-size: 1.05rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .store-header .header-right {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  .store-header .store-icon,
  .store-header .lang-dropdown,
  .store-header .lang-menu-toggle,
  .store-header .menu-toggle {
    flex: 0 0 auto !important;
  }

  /* Même position que le menu mobile de l'index principal. */
  .store-nav {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483002 !important;
  }

  /* Même compensation sous le header que l'index principal. */
  main {
    padding-top: 70px !important;
  }

  .store-hero {
    min-height: calc(100vh - 70px) !important;
  }
}

/* Fallback pour iOS PWA détecté via navigator.standalone.
   Même comportement, sans safe-area manuelle. */
html.ios-pwa {
  --store-safe-top: 0px !important;
  --store-mobile-header-base-h: 70px !important;
  --store-mobile-header-h: 70px !important;
}

html.ios-pwa::before {
  content: none !important;
  display: none !important;
}

html.ios-pwa .store-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;

  padding: 10px 15px !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;

  background: var(--header-bg) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;

  box-shadow: 0 0 15px var(--neon) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;

  overflow: visible !important;

  z-index: 2147483001 !important;
}

html.ios-pwa .store-nav {
  top: 70px !important;
}

html.ios-pwa main {
  padding-top: 70px !important;
}

html.ios-pwa .store-hero {
  min-height: calc(100vh - 70px) !important;
}

/* Très petits écrans : on garde exactement une seule ligne. */
@media all and (display-mode: standalone) and (max-width: 430px) {
  .store-header {
    gap: 6px !important;
  }

  .store-header .artist-icon {
    width: 45px !important;
    height: 45px !important;
  }

  .store-header .artist-name {
    font-size: 1rem !important;
    max-width: 29vw !important;
  }

  .store-header .header-right {
    gap: 5px !important;
  }
}

@media all and (display-mode: standalone) and (max-width: 370px) {
  .store-header .artist-name {
    display: none !important;
  }
}


/* ==========================================================
   FINAL PWA iOS — HEADER STRICTEMENT SOUS LA SAFE AREA
   ==========================================================
   La zone 0 → safe-area-inset-top appartient uniquement à iOS.
   Le header commence à safe-area-inset-top et mesure ensuite 70px.
========================================================== */

@media all and (display-mode: standalone) and (max-width: 1080px) {
  :root {
    --pg-ios-safe-top: env(safe-area-inset-top, 0px);
    --pg-store-header-h: 70px;
  }

  html,
  body {
    background: #000 !important;
  }

  /* Supprime toute ancienne couche artificielle dans la safe area. */
  html::before,
  body::before {
    content: none !important;
    display: none !important;
  }

  .store-header {
    position: fixed !important;

    /* POINT ESSENTIEL :
       le header démarre APRÈS la zone système iOS. */
    top: var(--pg-ios-safe-top) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    height: var(--pg-store-header-h) !important;
    min-height: var(--pg-store-header-h) !important;
    max-height: var(--pg-store-header-h) !important;

    padding: 10px 15px !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;

    background: var(--header-bg) !important;

    /* Aucun blur susceptible de remonter dans la safe area. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;

    box-shadow: 0 0 15px var(--neon) !important;

    overflow: visible !important;

    z-index: 2147483001 !important;

    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  /* Header toujours sur une seule ligne. */
  .store-header .header-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .store-header .artist-link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .store-header .artist-icon {
    width: 45px !important;
    height: 45px !important;
    flex: 0 0 auto !important;
  }

  .store-header .artist-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 38vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .store-header .header-right {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: max-content !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  /* Menu déroulant immédiatement sous safe area + header. */
  .store-nav {
    position: fixed !important;
    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
      ) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483002 !important;
  }

  /* Le contenu commence lui aussi sous safe area + header. */
  main {
    padding-top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
      ) !important;
  }

  .store-hero {
    min-height:
      calc(
        100dvh
        - var(--pg-ios-safe-top)
        - var(--pg-store-header-h)
        - var(--store-footer-h)
        - var(--store-safe-bottom)
      ) !important;
  }
}

/* Fallback iOS PWA via navigator.standalone. */
html.ios-pwa-strict {
  --pg-ios-safe-top: env(safe-area-inset-top, 0px);
  --pg-store-header-h: 70px;
}

html.ios-pwa-strict,
html.ios-pwa-strict body {
  background: #000 !important;
}

html.ios-pwa-strict::before,
html.ios-pwa-strict body::before {
  content: none !important;
  display: none !important;
}

html.ios-pwa-strict .store-header {
  position: fixed !important;

  top: var(--pg-ios-safe-top) !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  height: var(--pg-store-header-h) !important;
  min-height: var(--pg-store-header-h) !important;
  max-height: var(--pg-store-header-h) !important;

  padding: 10px 15px !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;

  background: var(--header-bg) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;

  box-shadow: 0 0 15px var(--neon) !important;

  z-index: 2147483001 !important;
}

html.ios-pwa-strict .store-nav {
  top:
    calc(
      var(--pg-ios-safe-top)
      + var(--pg-store-header-h)
    ) !important;
}

html.ios-pwa-strict main {
  padding-top:
    calc(
      var(--pg-ios-safe-top)
      + var(--pg-store-header-h)
    ) !important;
}

/* Très petits iPhone : toujours une seule ligne. */
@media all and (display-mode: standalone) and (max-width: 430px) {
  .store-header {
    gap: 5px !important;
  }

  .store-header .artist-name {
    max-width: 28vw !important;
    font-size: 0.9rem !important;
  }

  .store-header .header-right {
    gap: 4px !important;
  }
}

@media all and (display-mode: standalone) and (max-width: 370px) {
  .store-header .artist-name {
    display: none !important;
  }
}


/* ==========================================================
   PWA iOS — SUPPRESSION DU FLOU / HALO AU-DESSUS DU HEADER
   Le halo néon est dirigé uniquement vers le bas.
========================================================== */

@media all and (display-mode: standalone) and (max-width: 1080px) {
  .store-header {
    /* Plus de halo vers le haut / safe area */
    box-shadow: 0 8px 15px -10px var(--neon) !important;
  }

  /* Pendant la transition d'entrée, le header reste net en PWA iOS */
  body.store-transition-active .store-header {
    filter: none !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
  }
}

/* Fallback iOS PWA détecté via navigator.standalone */
html.ios-pwa-strict .store-header {
  box-shadow: 0 8px 15px -10px var(--neon) !important;
}

html.ios-pwa-strict body.store-transition-active .store-header {
  filter: none !important;
  opacity: 1 !important;
  transform: translateZ(0) !important;
}


/* ==========================================================
   PWA iOS — LE CONTENU NE DÉFILE PLUS SOUS LE HEADER
   ----------------------------------------------------------
   html/body restent fixes.
   Seul <main> défile entre :
   - la safe area + le header en haut
   - le footer fixe en bas
========================================================== */

@media all and (display-mode: standalone) and (max-width: 1080px) {
  html,
  body {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    overscroll-behavior: none !important;

    background: #000 !important;
  }

  body {
    position: fixed !important;
    inset: 0 !important;
  }

  /* Header strictement sous la safe area */
  .store-header {
    position: fixed !important;
    top: var(--pg-ios-safe-top) !important;
    left: 0 !important;
    right: 0 !important;

    height: var(--pg-store-header-h) !important;
    min-height: var(--pg-store-header-h) !important;
    max-height: var(--pg-store-header-h) !important;

    z-index: 2147483001 !important;
  }

  /* La page ne passe jamais derrière le header */
  body > main {
    position: fixed !important;

    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
      ) !important;

    left: 0 !important;
    right: 0 !important;

    bottom:
      calc(
        var(--store-footer-h)
        + var(--store-safe-bottom)
      ) !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 18px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-x: none !important;
    overscroll-behavior-y: contain !important;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none !important;
    touch-action: pan-y;

    z-index: 1 !important;
  }

  body > main::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  /* Le hero occupe uniquement la zone réellement disponible */
  body > main > .store-hero {
    min-height: 100% !important;
  }

  /* Menu mobile toujours sous le header */
  .store-nav {
    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
      ) !important;

    z-index: 2147483002 !important;
  }

  /* Footer indépendant du scroll */
  .store-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    z-index: 2147483000 !important;
  }
}

/* Fallback iOS PWA détecté via navigator.standalone */
html.ios-pwa-strict,
html.ios-pwa-strict body {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;

  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.ios-pwa-strict body {
  position: fixed !important;
  inset: 0 !important;
}

html.ios-pwa-strict body > main {
  position: fixed !important;

  top:
    calc(
      var(--pg-ios-safe-top)
      + var(--pg-store-header-h)
    ) !important;

  left: 0 !important;
  right: 0 !important;

  bottom:
    calc(
      var(--store-footer-h)
      + var(--store-safe-bottom)
    ) !important;

  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 18px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

html.ios-pwa-strict body > main > .store-hero {
  min-height: 100% !important;
}


/* ==========================================================
   PWA iPhone — CENTRAGE HORIZONTAL STRICT
   ----------------------------------------------------------
   Corrige les décalages liés à 100vw, aux largeurs fixes et
   aux safe areas latérales. Le contenu reste centré dans la
   largeur réellement visible entre les bords de l'iPhone.
========================================================== */

@media all and (display-mode: standalone) and (max-width: 1080px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body {
    left: 0 !important;
    right: 0 !important;
  }

  /* Le conteneur scrollable est centré sur la largeur réelle,
     sans utiliser 100vw (qui peut dépasser sur iOS). */
  body > main {
    left: 0 !important;
    right: 0 !important;

    width: auto !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left:
      max(0px, env(safe-area-inset-left, 0px)) !important;

    padding-right:
      max(0px, env(safe-area-inset-right, 0px)) !important;

    overflow-x: clip !important;
  }

  /* Tous les grands blocs sont centrés par rapport au main,
     pas par rapport au viewport physique. */
  body > main > section,
  body > main .products-section,
  body > main .contact-strip,
  body > main .donation-section {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body > main .store-hero {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left:
      max(16px, env(safe-area-inset-left, 0px)) !important;

    padding-right:
      max(16px, env(safe-area-inset-right, 0px)) !important;
  }

  body > main .products-section,
  body > main .donation-section,
  body > main .contact-strip {
    max-width:
      calc(
        100%
        - env(safe-area-inset-left, 0px)
        - env(safe-area-inset-right, 0px)
      ) !important;
  }

  /* Empêche les éléments internes de forcer un débordement. */
  body > main img,
  body > main svg,
  body > main iframe,
  body > main form,
  body > main .product-card,
  body > main .donation-card {
    max-width: 100% !important;
  }

  /* Les pseudo-éléments décoratifs ne peuvent plus élargir
     visuellement le layout du conteneur. */
  body > main .store-hero,
  body > main .products-section,
  body > main .donation-section,
  body > main .contact-strip {
    box-sizing: border-box !important;
  }
}

/* Fallback iOS PWA détecté via navigator.standalone. */
html.ios-pwa-strict body > main {
  left: 0 !important;
  right: 0 !important;

  width: auto !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left:
    max(0px, env(safe-area-inset-left, 0px)) !important;

  padding-right:
    max(0px, env(safe-area-inset-right, 0px)) !important;

  overflow-x: clip !important;
}

html.ios-pwa-strict body > main > section,
html.ios-pwa-strict body > main .products-section,
html.ios-pwa-strict body > main .donation-section,
html.ios-pwa-strict body > main .contact-strip {
  margin-left: auto !important;
  margin-right: auto !important;
}

html.ios-pwa-strict body > main .store-hero {
  width: 100% !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left:
    max(16px, env(safe-area-inset-left, 0px)) !important;

  padding-right:
    max(16px, env(safe-area-inset-right, 0px)) !important;
}


/* ==========================================================
   PWA iPhone — FOOTER COMPACT
   ----------------------------------------------------------
   Réduit la hauteur visuelle du footer tout en conservant
   la safe area inférieure iOS.
========================================================== */

@media all and (display-mode: standalone) and (max-width: 768px) {
  :root {
    /* Hauteur réelle de la partie visible du footer,
       hors safe area iOS. */
    --store-footer-h: 34px !important;
  }

  .store-footer {
    min-height:
      calc(
        var(--store-footer-h)
        + var(--store-safe-bottom)
      ) !important;

    height:
      calc(
        var(--store-footer-h)
        + var(--store-safe-bottom)
      ) !important;

    padding:
      2px
      max(8px, env(safe-area-inset-right, 0px))
      calc(var(--store-safe-bottom) + 2px)
      max(8px, env(safe-area-inset-left, 0px)) !important;

    gap: 5px !important;

    font-size: clamp(8px, 2vw, 10.5px) !important;
    line-height: 1 !important;
  }

  .store-footer .footer-left,
  .store-footer .footer-right {
    line-height: 1 !important;
  }

  /* Le contenu scrollable s'arrête exactement au-dessus
     du footer compact + safe area. */
  body > main {
    bottom:
      calc(
        var(--store-footer-h)
        + var(--store-safe-bottom)
      ) !important;
  }
}

/* Fallback iOS PWA détecté via navigator.standalone */
html.ios-pwa-strict {
  --store-footer-h: 34px !important;
}

html.ios-pwa-strict .store-footer {
  min-height:
    calc(
      var(--store-footer-h)
      + var(--store-safe-bottom)
    ) !important;

  height:
    calc(
      var(--store-footer-h)
      + var(--store-safe-bottom)
    ) !important;

  padding:
    2px
    max(8px, env(safe-area-inset-right, 0px))
    calc(var(--store-safe-bottom) + 2px)
    max(8px, env(safe-area-inset-left, 0px)) !important;

  font-size: clamp(8px, 2vw, 10.5px) !important;
  line-height: 1 !important;
}

html.ios-pwa-strict body > main {
  bottom:
    calc(
      var(--store-footer-h)
      + var(--store-safe-bottom)
    ) !important;
}


/* ==========================================================
   PWA iOS — POSITION INITIALE DU FOOTER STABLE
   ----------------------------------------------------------
   iOS peut initialiser 100dvh avec une hauteur incorrecte au
   premier lancement de la PWA, puis la corriger après rotation.
   On utilise ici 100vh, comme sur la page principale, afin que
   le footer soit correctement placé dès le premier affichage.
========================================================== */

@media all and (display-mode: standalone) and (max-width: 1080px) {
  html {
    position: relative !important;

    width: 100% !important;

    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
  }

  body {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;

    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
  }

  .store-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    /* Empêche toute translation résiduelle au chargement. */
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
  }

  body > main {
    bottom:
      calc(
        var(--store-footer-h)
        + var(--store-safe-bottom)
      ) !important;
  }

  /* La transition initiale ne doit jamais déplacer le footer. */
  body.store-transition-active .store-footer {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
  }
}

/* Fallback spécifique iOS standalone. */
html.ios-pwa-strict {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

html.ios-pwa-strict body {
  position: fixed !important;
  inset: 0 !important;

  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;

  overflow: hidden !important;
}

html.ios-pwa-strict .store-footer {
  position: fixed !important;
  bottom: 0 !important;
  top: auto !important;

  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
}

html.ios-pwa-strict body.store-transition-active .store-footer {
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
}


/* ==========================================================
   PWA iPhone PORTRAIT — HAUT DU HEADER PARFAITEMENT NET
   ----------------------------------------------------------
   Suppression complète du box-shadow du header en portrait.
   L'effet néon est recréé uniquement SOUS le header avec un
   dégradé sans blur, afin qu'aucun pixel diffus ne remonte.
========================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  .store-header {
    /* Aucun halo/blur autour du header */
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* Fond totalement uniforme */
    background: #0a0a0c !important;

    /* Évite toute diffusion graphique hors de la boîte */
    isolation: isolate !important;
  }

  /* Halo visuel uniquement SOUS le header,
     sans filtre blur et sans remontée possible. */
  .store-header::after {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;

    height: 8px !important;

    background:
      linear-gradient(
        to bottom,
        rgba(138, 43, 226, 0.38) 0%,
        rgba(138, 43, 226, 0.14) 35%,
        rgba(138, 43, 226, 0.04) 65%,
        transparent 100%
      ) !important;

    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* Aucun flou pendant la transition initiale non plus. */
  body.store-transition-active .store-header {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }
}

/* Fallback iOS standalone détecté via la classe dédiée */
@media (orientation: portrait) and (max-width: 1080px) {
  html.ios-pwa-strict .store-header {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background: #0a0a0c !important;
    isolation: isolate !important;
  }

  html.ios-pwa-strict .store-header::after {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;

    height: 8px !important;

    background:
      linear-gradient(
        to bottom,
        rgba(138, 43, 226, 0.38) 0%,
        rgba(138, 43, 226, 0.14) 35%,
        rgba(138, 43, 226, 0.04) 65%,
        transparent 100%
      ) !important;

    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    pointer-events: none !important;
    z-index: -1 !important;
  }

  html.ios-pwa-strict body.store-transition-active .store-header {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
  }
}


/* ==========================================================
   PWA iPhone — HEADER SANS DÉGRADÉ
========================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  .store-header::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}

@media (orientation: portrait) and (max-width: 1080px) {
  html.ios-pwa-strict .store-header::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}


/* ==========================================================
   PWA — SCROLL FLUIDE DU CONTENU PRINCIPAL
========================================================== */
@media all and (display-mode: standalone) {
  body > main {
    scroll-behavior: smooth !important;
  }
}

html.ios-pwa-strict body > main {
  scroll-behavior: smooth !important;
}


/* ==========================================================
   PWA iPhone PORTRAIT — MENU HAMBURGER PLAQUÉ SOUS LE HEADER
   ----------------------------------------------------------
   Le menu commence exactement au bord inférieur du header :
   safe area iOS + hauteur du header.
========================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  .store-nav {
    position: fixed !important;

    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
      ) !important;

    left: 0 !important;
    right: 0 !important;

    margin: 0 !important;
    margin-top: 0 !important;

    transform: none !important;

    border-top: 0 !important;

    z-index: 2147483002 !important;
  }

  .store-nav.show {
    margin-top: 0 !important;
    transform: none !important;
  }
}

/* Fallback iOS PWA via navigator.standalone */
@media (orientation: portrait) and (max-width: 1080px) {
  html.ios-pwa-strict .store-nav {
    position: fixed !important;

    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
      ) !important;

    left: 0 !important;
    right: 0 !important;

    margin: 0 !important;
    margin-top: 0 !important;

    transform: none !important;

    border-top: 0 !important;

    z-index: 2147483002 !important;
  }

  html.ios-pwa-strict .store-nav.show {
    margin-top: 0 !important;
    transform: none !important;
  }
}


/* ==========================================================
   PWA iPhone PORTRAIT — LIGNE NÉON + MENU PLAQUÉ DESSOUS
   ----------------------------------------------------------
   La ligne néon est dessinée À L'INTÉRIEUR du bord inférieur
   du header. Le menu commence exactement après les 70px du
   header : aucun espace entre la ligne et la liste.
========================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  .store-header {
    position: fixed !important;
    overflow: visible !important;

    /* Pas de bordure concurrente */
    border-bottom: 0 !important;
  }

  /* Ligne néon strictement au bord inférieur du header */
  .store-header::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    height: 1px !important;

    background: var(--neon) !important;

    /* Halo essentiellement vers le bas */
    box-shadow:
      0 1px 4px rgba(138, 43, 226, 0.90),
      0 2px 8px rgba(138, 43, 226, 0.45) !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    pointer-events: none !important;
    z-index: 5 !important;
  }

  /* La liste commence exactement après le header.
     La ligne étant dans le dernier pixel du header,
     aucun +1px ni marge n'est nécessaire. */
  .store-nav,
  .store-nav.show {
    position: fixed !important;

    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
      ) !important;

    left: 0 !important;
    right: 0 !important;

    margin: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;

    transform: none !important;

    border-top: 0 !important;

    z-index: 2147483002 !important;
  }
}

/* Fallback iOS PWA détecté via navigator.standalone */
@media (orientation: portrait) and (max-width: 1080px) {

  html.ios-pwa-strict .store-header {
    border-bottom: 0 !important;
    overflow: visible !important;
  }

  html.ios-pwa-strict .store-header::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    height: 1px !important;

    background: var(--neon) !important;

    box-shadow:
      0 1px 4px rgba(138, 43, 226, 0.90),
      0 2px 8px rgba(138, 43, 226, 0.45) !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    pointer-events: none !important;
    z-index: 5 !important;
  }

  html.ios-pwa-strict .store-nav,
  html.ios-pwa-strict .store-nav.show {
    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
      ) !important;

    margin: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;

    transform: none !important;
    border-top: 0 !important;
  }
}


/* ==========================================================
   PWA iPhone PORTRAIT — LIGNE NÉON DÉGRADÉE + MENU SANS TROU
   ----------------------------------------------------------
   Effet proche du halo néon du header principal :
   ligne horizontale dégradée, lumineuse au centre,
   transparente aux extrémités.
========================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  .store-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Ligne néon horizontale dégradée */
  .store-header::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    top: auto !important;

    width: 100% !important;
    height: 2px !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(138, 43, 226, 0.18) 8%,
        rgba(138, 43, 226, 0.72) 28%,
        rgba(199, 125, 255, 1) 50%,
        rgba(138, 43, 226, 0.72) 72%,
        rgba(138, 43, 226, 0.18) 92%,
        transparent 100%
      ) !important;

    /* Halo uniquement vers le bas */
    box-shadow:
      0 2px 5px rgba(138, 43, 226, 0.58),
      0 4px 9px rgba(138, 43, 226, 0.22) !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    pointer-events: none !important;
    z-index: 2147483004 !important;
  }

  /*
    Le panneau chevauche la ligne de 1px :
    aucune fente ne peut apparaître à cause d'un arrondi
    subpixel de WebKit en portrait.
  */
  .store-nav,
  .store-nav.show {
    position: fixed !important;

    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
        - 1px
      ) !important;

    left: 0 !important;
    right: 0 !important;

    margin: 0 !important;
    margin-top: 0 !important;

    padding-top: 0 !important;

    transform: translateY(0) !important;

    border-top: 0 !important;

    background: rgba(10, 10, 12, 0.99) !important;

    z-index: 2147483002 !important;
  }

  /* Le premier lien commence immédiatement dans le panneau. */
  .store-nav.show > a:first-child {
    margin-top: 0 !important;
  }
}

/* Fallback iOS PWA via navigator.standalone */
@media (orientation: portrait) and (max-width: 1080px) {

  html.ios-pwa-strict .store-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html.ios-pwa-strict .store-header::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    top: auto !important;

    width: 100% !important;
    height: 2px !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(138, 43, 226, 0.18) 8%,
        rgba(138, 43, 226, 0.72) 28%,
        rgba(199, 125, 255, 1) 50%,
        rgba(138, 43, 226, 0.72) 72%,
        rgba(138, 43, 226, 0.18) 92%,
        transparent 100%
      ) !important;

    box-shadow:
      0 2px 5px rgba(138, 43, 226, 0.58),
      0 4px 9px rgba(138, 43, 226, 0.22) !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    pointer-events: none !important;
    z-index: 2147483004 !important;
  }

  html.ios-pwa-strict .store-nav,
  html.ios-pwa-strict .store-nav.show {
    position: fixed !important;

    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
        - 1px
      ) !important;

    left: 0 !important;
    right: 0 !important;

    margin: 0 !important;
    margin-top: 0 !important;

    padding-top: 0 !important;

    transform: translateY(0) !important;

    border-top: 0 !important;

    background: rgba(10, 10, 12, 0.99) !important;

    z-index: 2147483002 !important;
  }

  html.ios-pwa-strict .store-nav.show > a:first-child {
    margin-top: 0 !important;
  }
}


/* ==========================================================
   PWA iPhone PORTRAIT — MENU VRAIMENT COLLÉ SOUS LE HEADER
   ----------------------------------------------------------
   Supprime l'espace visuel résiduel provenant du padding
   du panneau et du premier lien.
========================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  .store-nav,
  .store-nav.show {
    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
        - 1px
      ) !important;

    margin: 0 !important;

    /* Aucun espace interne au-dessus de la liste */
    padding: 0 0 10px 0 !important;

    border-top: 0 !important;
    transform: none !important;
  }

  /* Le premier item commence immédiatement sous la ligne néon */
  .store-nav.show > a:first-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }

  /* Aucun pseudo-élément ou séparation ne crée de vide */
  .store-nav::before,
  .store-nav.show::before {
    content: none !important;
    display: none !important;
  }
}

/* Fallback iOS PWA via navigator.standalone */
@media (orientation: portrait) and (max-width: 1080px) {

  html.ios-pwa-strict .store-nav,
  html.ios-pwa-strict .store-nav.show {
    top:
      calc(
        var(--pg-ios-safe-top)
        + var(--pg-store-header-h)
        - 1px
      ) !important;

    margin: 0 !important;
    padding: 0 0 10px 0 !important;

    border-top: 0 !important;
    transform: none !important;
  }

  html.ios-pwa-strict .store-nav.show > a:first-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }

  html.ios-pwa-strict .store-nav::before,
  html.ios-pwa-strict .store-nav.show::before {
    content: none !important;
    display: none !important;
  }
}


/* ==========================================================
   PWA iPhone PORTRAIT — MENU ANCRÉ DIRECTEMENT AU HEADER
   ----------------------------------------------------------
   Le menu est un enfant du header : on l'ancre donc à
   top:100% du header au lieu d'utiliser un calcul viewport.
   Cela supprime définitivement le trou lié aux safe areas,
   transforms et arrondis WebKit.
========================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  .store-header {
    position: fixed !important;
    overflow: visible !important;

    /* Évite qu'un transform crée un référentiel inattendu
       pour le menu sur WebKit/iOS. */
    transform: none !important;
    -webkit-transform: none !important;
  }

  .store-nav,
  .store-nav.show {
    position: absolute !important;

    /* Exactement au bord inférieur du header */
    top: 100% !important;
    bottom: auto !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    margin: 0 !important;
    padding-top: 0 !important;

    transform: none !important;
    -webkit-transform: none !important;

    border-top: 0 !important;

    background: rgba(10, 10, 12, 0.99) !important;

    z-index: 2147483002 !important;
  }

  .store-nav.show {
    padding: 0 0 10px 0 !important;
  }

  .store-nav.show > a:first-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}

/* Fallback iOS PWA via navigator.standalone */
@media (orientation: portrait) and (max-width: 1080px) {

  html.ios-pwa-strict .store-header {
    position: fixed !important;
    overflow: visible !important;

    transform: none !important;
    -webkit-transform: none !important;
  }

  html.ios-pwa-strict .store-nav,
  html.ios-pwa-strict .store-nav.show {
    position: absolute !important;

    top: 100% !important;
    bottom: auto !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    margin: 0 !important;
    padding-top: 0 !important;

    transform: none !important;
    -webkit-transform: none !important;

    border-top: 0 !important;

    background: rgba(10, 10, 12, 0.99) !important;

    z-index: 2147483002 !important;
  }

  html.ios-pwa-strict .store-nav.show {
    padding: 0 0 10px 0 !important;
  }

  html.ios-pwa-strict .store-nav.show > a:first-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}


/* ==========================================================
   PWA iPhone PORTRAIT — MENU POSÉ SUR LA LIGNE NÉON
   ----------------------------------------------------------
   La ligne néon mesure 2px.
   Le menu ouvert remonte exactement de 2px afin que son bord
   supérieur se place SUR la ligne, sans espace intermédiaire.
========================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  .store-header {
    position: fixed !important;
    overflow: visible !important;
  }

  /* La ligne reste visuellement au-dessus du panneau. */
  .store-header::after {
    z-index: 2147483004 !important;
  }

  .store-nav,
  .store-nav.show {
    position: absolute !important;

    /* Chevauche exactement la ligne néon de 2px */
    top: calc(100% - 2px) !important;
    bottom: auto !important;

    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    margin: 0 !important;
    padding-top: 0 !important;

    transform: none !important;
    -webkit-transform: none !important;

    border-top: 0 !important;

    background: rgba(10, 10, 12, 0.99) !important;

    z-index: 2147483002 !important;
  }

  .store-nav.show {
    padding: 0 0 10px 0 !important;
  }

  .store-nav.show > a:first-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}

/* Fallback iOS PWA via navigator.standalone */
@media (orientation: portrait) and (max-width: 1080px) {

  html.ios-pwa-strict .store-header {
    position: fixed !important;
    overflow: visible !important;
  }

  html.ios-pwa-strict .store-header::after {
    z-index: 2147483004 !important;
  }

  html.ios-pwa-strict .store-nav,
  html.ios-pwa-strict .store-nav.show {
    position: absolute !important;

    top: calc(100% - 2px) !important;
    bottom: auto !important;

    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    margin: 0 !important;
    padding-top: 0 !important;

    transform: none !important;
    -webkit-transform: none !important;

    border-top: 0 !important;

    background: rgba(10, 10, 12, 0.99) !important;

    z-index: 2147483002 !important;
  }

  html.ios-pwa-strict .store-nav.show {
    padding: 0 0 10px 0 !important;
  }

  html.ios-pwa-strict .store-nav.show > a:first-child {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
}


/* ==========================================================
   PWA iPhone — MASQUER LA LIGNE NÉON QUAND LE MENU EST OUVERT
========================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  /* Menu fermé : ligne néon visible */
  .store-header:not(:has(.store-nav.show))::after {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Menu ouvert : ligne néon totalement masquée */
  .store-header:has(.store-nav.show)::after {
    opacity: 0 !important;
    visibility: hidden !important;

    background: transparent !important;
    box-shadow: none !important;

    transition: none !important;
  }
}

/* Fallback iOS PWA via navigator.standalone */
@media (orientation: portrait) and (max-width: 1080px) {

  html.ios-pwa-strict
  .store-header:not(:has(.store-nav.show))::after {
    opacity: 1 !important;
    visibility: visible !important;
  }

  html.ios-pwa-strict
  .store-header:has(.store-nav.show)::after {
    opacity: 0 !important;
    visibility: hidden !important;

    background: transparent !important;
    box-shadow: none !important;

    transition: none !important;
  }
}


/* ==========================================================
   HEADER — ICÔNE STORE + LANGUE SANS ENCADREMENT
========================================================== */

/* Icône Store : aucun cercle, aucune pastille */
.store-icon {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Conserver uniquement l'effet lumineux de l'icône elle-même */
.store-icon:hover,
.store-icon.active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Sélecteur de langue : suppression de la capsule */
.lang-menu-toggle {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* État ouvert / hover sans contour autour du bouton */
.lang-menu-toggle:hover,
.lang-dropdown.open .lang-menu-toggle {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* On garde les drapeaux eux-mêmes intacts */
.lang-menu-toggle .flag {
  border-radius: 2px !important;
}


/* ==========================================================
   HEADER — ICÔNE STORE BLANCHE + TYPO IDENTIQUE AU SITE PRINCIPAL
========================================================== */

/* L'icône Store reste blanche dans tous les états */
.store-icon,
.store-icon:hover,
.store-icon:focus,
.store-icon:focus-visible,
.store-icon:active,
.store-icon.active,
.store-icon:visited {
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.store-icon svg,
.store-icon:hover svg,
.store-icon:focus svg,
.store-icon:active svg,
.store-icon.active svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* "Pascal Gracia" : même typographie que .logo-text du site principal */
.store-header .artist-name {
  color: var(--neon) !important;
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-shadow: 0 0 10px var(--neon) !important;
}

/* Même taille que le site principal sur mobile / PWA */
@media (max-width: 768px) {
  .store-header .artist-name {
    font-size: 1.1rem !important;
  }
}

/* Même logique de taille que le site principal entre 769 et 1100px */
@media (min-width: 769px) and (max-width: 1100px) {
  .store-header .artist-name {
    font-size: clamp(1rem, 1.6vw, 1.35rem) !important;
  }
}

/* Desktop : taille principale du site */
@media (min-width: 1101px) {
  .store-header .artist-name {
    font-size: 1.8rem !important;
  }
}


/* =====================================================================
   STORE — HARMONISATION VISUELLE AVEC LA PAGE PRINCIPALE
   ---------------------------------------------------------------------
   Même vocabulaire graphique :
   - fond noir / gris très sombre
   - violet #8a2be2
   - Orbitron / Audiowide
   - header #111 + halo néon
   - titres blancs avec glow violet/cyan
   - boutons néon arrondis
   - sections et cartes dans le même univers que la page principale
===================================================================== */

:root {
  --bg: #1a1a1a;
  --bg-hover: #222;
  --header-bg: #111;
  --neon: #8a2be2;
  --neon-light: #8e2de2;
  --accent: #6a0dad;
  --text: #fff;
  --text-muted: #ccc;
  --muted: #ccc;
  --transition: 0.3s;
  --font-primary: 'Orbitron', 'Audiowide', sans-serif;
}

/* =========================
   GLOBAL
========================= */

html,
body {
  background: #000;
}

body {
  color: var(--text);
  font-family: var(--font-primary);
  text-align: center;
  line-height: 1.6;
  transition:
    background-color 0.6s ease,
    box-shadow 0.6s ease;
}

a {
  color: inherit;
  text-decoration: none;
  transition:
    color var(--transition),
    text-shadow var(--transition);
}

/* Les anciennes bulles d'ambiance ne dominent plus le style général */
.ambient {
  opacity: 0.08;
}

/* =========================
   HEADER — MÊME STYLE
========================= */

.store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  min-height: 84px;
  padding: 12px 30px;

  background: var(--header-bg);
  border-bottom: 0;

  box-shadow: 0 0 15px var(--neon);

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition: all var(--transition);
}

.header-left {
  flex-shrink: 0;
  min-width: fit-content;
}

.artist-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.artist-icon {
  width: 60px;
  height: 60px;

  border-radius: 50%;
  object-fit: cover;

  border: 2px solid var(--neon);
  box-shadow: 0 0 10px var(--neon);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.artist-link:hover .artist-icon {
  transform: scale(1.1);
  box-shadow: 0 0 20px #fff;
}

/* Exactement le langage visuel de .logo-text du site principal */
.store-header .artist-name {
  color: var(--neon) !important;
  font-family: var(--font-primary) !important;
  font-size: 1.8rem;
  font-weight: 400 !important;
  line-height: 1.2;
  margin: 0 !important;
  white-space: nowrap !important;
  text-shadow: 0 0 10px var(--neon) !important;
}

/* Navigation */
.store-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  width: 100%;
  gap: 0;

  transition: var(--transition);
}

.store-nav a {
  position: relative;

  margin: 0 15px;
  padding: 0;

  color: var(--text);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0;

  transition: var(--transition);
}

.store-nav a::after {
  content: none;
}

.store-nav a:hover,
.store-nav a.active {
  color: var(--neon);
  text-shadow: 0 0 10px var(--neon);
}

/* Bloc droit */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Store : blanc, sans cercle */
.store-icon,
.store-icon:hover,
.store-icon:focus,
.store-icon:focus-visible,
.store-icon:active,
.store-icon.active,
.store-icon:visited {
  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  transform: none;
}

.store-icon svg,
.store-icon:hover svg,
.store-icon:focus svg,
.store-icon:active svg,
.store-icon.active svg {
  width: 21px;
  height: 21px;
  stroke: #fff !important;
  color: #fff !important;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.35));
}

/* Langue : sans capsule / sans cercle */
.lang-menu-toggle,
.lang-menu-toggle:hover,
.lang-dropdown.open .lang-menu-toggle {
  min-width: 58px;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #fff;
  transform: none !important;
}

.lang-menu-list {
  border: 1px solid rgba(138, 43, 226, 0.55);
  background: #111;
  box-shadow:
    0 12px 30px rgba(0,0,0,.55),
    0 0 22px rgba(138,43,226,.3);
}

/* Desktop : navigation centrée comme sur le site principal */
@media (min-width: 769px) {
  .store-header {
    position: fixed;
    padding: 12px 30px;
  }

  .header-left,
  .header-right {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
  }

  .store-nav {
    position: absolute;
    left: 50vw;
    top: 50%;
    transform: translate(-50%, -50%);

    width: min(720px, calc(100vw - 430px));
    max-width: calc(100vw - 430px);

    gap: 6px 24px;
    padding: 0;
    margin: 0;

    background: transparent;
    opacity: 1;
    max-height: none;
    overflow: visible;
    z-index: 2;
  }

  .store-nav a {
    margin: 0;
    padding: 2px 0;
    white-space: nowrap;
    font-size: clamp(.75rem, .9vw, 1rem);
    line-height: 1.15;
  }

  .menu-toggle {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .store-nav {
    width: min(460px, calc(100vw - 360px));
    max-width: calc(100vw - 360px);
    gap: 5px 16px;
  }

  .store-nav a {
    font-size: clamp(.68rem, 1vw, .84rem);
  }

  .store-header .artist-name {
    font-size: clamp(1rem, 1.6vw, 1.35rem);
  }

  .artist-icon {
    width: clamp(42px, 5vw, 52px);
    height: clamp(42px, 5vw, 52px);
  }
}

/* =========================
   MOBILE — MÊME ARCHITECTURE
========================= */

@media (max-width: 768px) {
  .store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 70px;
    min-height: 70px;
    padding: 10px 15px;
  }

  .header-left {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }

  .artist-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
  }

  .store-header .artist-name {
    max-width: 42vw;
    font-size: 1.1rem !important;
    margin-left: 8px !important;

    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .menu-toggle {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 28px;
    height: 22px;

    padding: 0;
    border: 0;
    background: none;

    flex-shrink: 0;
  }

  .menu-toggle span {
    height: 3px;
    width: 100%;

    background: var(--neon);
    border-radius: 2px;

    transition: .3s;
  }

  /* Hors PWA : comportement identique à la page principale */
  .store-nav {
    position: fixed;
    top: 70px;
    left: 0;

    width: 100%;
    max-width: none;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 15px 0;
    margin: 0;

    background: var(--header-bg);

    max-height: 0;
    opacity: 0;
    overflow: hidden;

    transform: none;

    transition:
      max-height .3s ease,
      opacity .3s ease;
  }

  .store-nav.show {
    max-height: 400px;
    opacity: 1;
  }

  .store-nav a {
    width: 100%;
    margin: 0;
    padding: 12px 0;

    font-size: 1.1rem;
    text-align: center;
  }
}

/* =========================
   MAIN / SECTIONS
========================= */

main {
  padding-top: 84px;
}

/* Fond central identique au langage graphique récent de la page principale */
.store-hero,
.products-section,
.donation-section,
.contact-strip {
  position: relative;
  isolation: isolate;

  background:
    linear-gradient(
      180deg,
      #05050b 0%,
      #080812 18%,
      #0d0a1a 38%,
      #100b22 55%,
      #0b0b18 76%,
      #05050b 100%
    );
}

.store-hero::before,
.products-section::before,
.donation-section::before,
.contact-strip::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 50% 0%, rgba(138,43,226,.18), transparent 34%),
    radial-gradient(circle at 18% 42%, rgba(0,255,255,.08), transparent 34%),
    radial-gradient(circle at 82% 64%, rgba(255,0,255,.08), transparent 38%),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(138,43,226,.08) 18%,
      rgba(0,255,255,.045) 50%,
      rgba(138,43,226,.08) 82%,
      transparent 100%
    );

  opacity: .85;
}

/* Contenu au-dessus des fonds */
.store-hero > *,
.products-section > *,
.donation-section > *,
.contact-strip > * {
  position: relative;
  z-index: 2;
}

/* Suppression de l'ancien grand cercle du hero */
.store-hero::before {
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Fine séparation comme sur les sections principales */
.products-section,
.donation-section,
.contact-strip {
  border-top: 1px solid rgba(138,43,226,.16);
}

/* Titres dans le même style que la page principale */
.store-hero h1,
.section-heading h2,
.donation-card h2,
.contact-strip h2 {
  color: #fff;

  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;

  text-shadow:
    0 0 6px rgba(255,255,255,.85),
    0 0 16px rgba(138,43,226,.68),
    0 0 28px rgba(0,255,255,.24);
}

.store-hero h1 {
  margin: 12px 0 15px;
  font-size: 2rem;
  letter-spacing: 0;
  text-transform: none;
}

.section-heading h2,
.donation-card h2,
.contact-strip h2 {
  font-size: 1.6rem;
}

/* Textes : même lisibilité que la page principale */
.hero-copy,
.section-heading p,
.donation-copy p,
.contact-strip p {
  max-width: 900px;

  color: rgba(255,255,255,.86);

  font-family: var(--font-primary);
  font-size: .95rem;
  line-height: 1.6;
}

/* Accents cyan/violet */
.eyebrow,
.section-kicker,
.product-category {
  color: var(--neon);
  text-shadow: 0 0 10px var(--neon);
}

/* =========================
   BOUTONS — STYLE NÉON PRINCIPAL
========================= */

.hero-cta,
.product-buy-link,
.contact-button,
.pp-E5W7GUNPUM34J {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;

  min-height: 46px;
  padding: .85rem 1.4rem;

  border-radius: 999px;

  background: rgba(10,10,18,.85);
  border: 1px solid rgba(180,80,255,.9);

  color: #fff !important;

  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;

  box-shadow:
    0 0 8px rgba(180,80,255,.9),
    0 0 18px rgba(180,80,255,.65),
    inset 0 0 10px rgba(180,80,255,.25);

  text-shadow:
    0 0 5px rgba(255,255,255,.95),
    0 0 12px rgba(180,80,255,.9);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.hero-cta:hover,
.product-buy-link:hover,
.contact-button:hover,
.pp-E5W7GUNPUM34J:hover {
  color: #fff !important;

  transform: translateY(-2px) scale(1.03);

  background: rgba(30,5,45,.95);
  border-color: #ff4dff;

  box-shadow:
    0 0 12px rgba(255,77,255,1),
    0 0 28px rgba(180,80,255,.95),
    0 0 48px rgba(120,0,255,.65),
    inset 0 0 14px rgba(255,77,255,.35);

  text-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 18px rgba(255,77,255,1);
}

/* =========================
   CARTES PRODUITS
========================= */

.product-card,
.donation-card {
  border: 1px solid rgba(0,255,255,.65);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(8,8,20,.96),
      rgba(30,10,55,.88)
    );

  box-shadow:
    0 0 8px rgba(0,255,255,.35),
    0 0 18px rgba(138,43,226,.32),
    inset 0 0 18px rgba(255,255,255,.025);
}

.product-card:hover {
  transform: translateY(-3px) scale(1.015);

  border-color: #fff;

  box-shadow:
    0 0 12px rgba(255,255,255,.65),
    0 0 26px rgba(0,255,255,.6),
    0 0 44px rgba(138,43,226,.55),
    inset 0 0 22px rgba(255,255,255,.08);
}

.product-info h3 {
  color: #fff;
  text-shadow:
    0 0 5px rgba(255,255,255,.85),
    0 0 12px rgba(138,43,226,.65);
}

.product-info p,
.product-artist {
  color: rgba(255,255,255,.86);
}

/* Statut plus sobre mais cohérent */
.status-pill {
  border-color: rgba(138,43,226,.55);
  background: rgba(10,10,18,.72);
  color: #fff;
  box-shadow:
    0 0 8px rgba(138,43,226,.35),
    inset 0 0 8px rgba(138,43,226,.12);
}

/* =========================
   CONTACT
========================= */

.contact-strip {
  border-radius: 0;
  border-left: 0;
  border-right: 0;

  box-shadow: none;
}

/* =========================
   FOOTER — MÊME STYLE VISUEL
========================= */

.store-footer {
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.96),
      rgba(22,8,42,.96),
      rgba(0,0,0,.96)
    );

  color: #fff;

  border-top: 1px solid rgba(0,255,255,.35);

  box-shadow:
    0 -10px 30px rgba(0,0,0,.72),
    0 0 24px rgba(138,43,226,.34),
    inset 0 1px 0 rgba(255,255,255,.08);

  text-shadow:
    0 0 4px #8a2be2,
    0 0 8px #8a2be2;

  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.store-footer a {
  color: #fff;
  font-weight: bold;
}

.store-footer a:hover {
  color: #fff;
  text-shadow: 0 0 10px var(--neon);
  text-decoration: underline;
}

/* =========================
   TAILLES RESPONSIVES TITRES
========================= */

@media (max-width: 1024px) {
  .store-hero h1 {
    font-size: 1.8rem;
  }

  .section-heading h2,
  .donation-card h2,
  .contact-strip h2 {
    font-size: 1.4rem;
  }

  .hero-copy,
  .section-heading p,
  .donation-copy p,
  .contact-strip p {
    font-size: .9rem;
  }
}

@media (max-width: 768px) {
  main {
    padding-top: 70px;
  }

  .store-hero h1 {
    font-size: 1.5rem;
  }

  .section-heading h2,
  .donation-card h2,
  .contact-strip h2 {
    font-size: 1.2rem;
  }

  .hero-copy,
  .section-heading p,
  .donation-copy p,
  .contact-strip p {
    font-size: .85rem;
  }
}

@media (max-width: 480px) {
  .store-hero h1 {
    font-size: 1.3rem;
  }

  .section-heading h2,
  .donation-card h2,
  .contact-strip h2 {
    font-size: 1rem;
  }

  .hero-copy,
  .section-heading p,
  .donation-copy p,
  .contact-strip p {
    font-size: .8rem;
  }
}

/* =====================================================================
   PWA iPHONE — PRÉSERVER LES CORRECTIONS SPÉCIFIQUES
===================================================================== */

@media all and (display-mode: standalone)
       and (orientation: portrait)
       and (max-width: 1080px) {

  .store-header {
    position: fixed !important;

    top: var(--pg-ios-safe-top) !important;
    left: 0 !important;
    right: 0 !important;

    height: var(--pg-store-header-h) !important;
    min-height: var(--pg-store-header-h) !important;
    max-height: var(--pg-store-header-h) !important;

    padding: 10px 15px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    background: #111 !important;

    box-shadow: none !important;
    border-bottom: 0 !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    transform: none !important;
    -webkit-transform: none !important;

    overflow: visible !important;
  }

  /* Ligne néon dégradée quand le menu est fermé */
  .store-header::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    top: auto !important;

    width: 100% !important;
    height: 2px !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(138,43,226,.18) 8%,
        rgba(138,43,226,.72) 28%,
        rgba(199,125,255,1) 50%,
        rgba(138,43,226,.72) 72%,
        rgba(138,43,226,.18) 92%,
        transparent 100%
      ) !important;

    box-shadow:
      0 2px 5px rgba(138,43,226,.58),
      0 4px 9px rgba(138,43,226,.22) !important;

    pointer-events: none !important;
    z-index: 2147483004 !important;
  }

  /* Menu ouvert : panneau posé sur la ligne */
  .store-nav,
  .store-nav.show {
    position: absolute !important;

    top: calc(100% - 2px) !important;
    bottom: auto !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 0 10px 0 !important;

    flex-direction: column !important;
    align-items: center !important;

    background: #111 !important;

    transform: none !important;
    -webkit-transform: none !important;

    border-top: 0 !important;
  }

  .store-nav a {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 !important;

    color: #fff !important;
    font-size: 1.1rem !important;
    text-align: center !important;
  }

  .store-nav a:hover,
  .store-nav a.active {
    color: var(--neon) !important;
    text-shadow: 0 0 10px var(--neon) !important;
  }

  /* Menu ouvert : la ligne néon disparaît */
  .store-header:has(.store-nav.show)::after {
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Store blanc / sans cercle */
  .store-icon,
  .store-icon:hover,
  .store-icon:active,
  .store-icon.active {
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .store-icon svg {
    stroke: #fff !important;
  }

  /* Langue sans cercle */
  .lang-menu-toggle,
  .lang-menu-toggle:hover,
  .lang-dropdown.open .lang-menu-toggle {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Nom identique au site principal */
  .store-header .artist-name {
    color: var(--neon) !important;
    font-family: var(--font-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    text-shadow: 0 0 10px var(--neon) !important;
  }

  /* Conserve le footer compact précédemment demandé */
  :root {
    --store-footer-h: 34px !important;
  }

  .store-footer {
    min-height:
      calc(var(--store-footer-h) + var(--store-safe-bottom)) !important;
    height:
      calc(var(--store-footer-h) + var(--store-safe-bottom)) !important;

    padding:
      2px
      max(8px, env(safe-area-inset-right, 0px))
      calc(var(--store-safe-bottom) + 2px)
      max(8px, env(safe-area-inset-left, 0px)) !important;

    font-size: clamp(8px, 2vw, 10.5px) !important;
    line-height: 1 !important;
  }
}

/* Même fallback pour iOS standalone détecté par JS */
@media (orientation: portrait) and (max-width: 1080px) {
  html.ios-pwa-strict .store-header {
    background: #111 !important;
    box-shadow: none !important;
  }

  html.ios-pwa-strict .store-nav,
  html.ios-pwa-strict .store-nav.show {
    position: absolute !important;
    top: calc(100% - 2px) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 0 10px 0 !important;

    background: #111 !important;

    transform: none !important;
    -webkit-transform: none !important;
  }

  html.ios-pwa-strict .store-header:has(.store-nav.show)::after {
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.ios-pwa-strict .store-icon,
  html.ios-pwa-strict .store-icon:hover,
  html.ios-pwa-strict .store-icon.active {
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.ios-pwa-strict .lang-menu-toggle,
  html.ios-pwa-strict .lang-menu-toggle:hover,
  html.ios-pwa-strict .lang-dropdown.open .lang-menu-toggle {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}


/* ==========================================================
   PAYPAL — BOUTON "FAIRE UN DON" STYLE JAUNE OFFICIEL
========================================================== */

.pp-E5W7GUNPUM34J,
.pp-E5W7GUNPUM34J:link,
.pp-E5W7GUNPUM34J:visited {
  background: #ffc439 !important;
  color: #111820 !important;

  border: 0 !important;
  border-radius: 999px !important;

  box-shadow: none !important;
  text-shadow: none !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;

  min-height: 46px !important;
  padding: 12px 24px !important;

  transition:
    background-color .2s ease,
    transform .2s ease !important;
}

.pp-E5W7GUNPUM34J:hover,
.pp-E5W7GUNPUM34J:focus,
.pp-E5W7GUNPUM34J:focus-visible {
  background: #f2ba36 !important;
  color: #111820 !important;

  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;

  transform: translateY(-1px) !important;
}

.pp-E5W7GUNPUM34J:active {
  background: #e9b42f !important;
  color: #111820 !important;

  transform: translateY(0) !important;
}


/* ==========================================================
   LANGUES — CORRECTION CLICK-THROUGH iOS / PWA
   ----------------------------------------------------------
   Le menu de langue doit rester au-dessus de toute la
   navigation afin qu'un tap FR/EN ne puisse jamais atteindre
   un lien du menu principal placé dessous.
========================================================== */

.store-header .lang-dropdown {
  position: relative !important;
  z-index: 2147483645 !important;
  isolation: isolate !important;
}

.store-header .lang-menu-toggle {
  position: relative !important;
  z-index: 2147483646 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.store-header .lang-menu-list {
  z-index: 2147483647 !important;
  pointer-events: none !important;
  touch-action: manipulation !important;
}

.store-header .lang-dropdown.open .lang-menu-list {
  pointer-events: auto !important;
}

.store-header .lang-option {
  position: relative !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* En PWA portrait, le sélecteur de langue reste au-dessus
   du panneau hamburger même lorsque celui-ci possède un
   z-index très élevé. */
@media all and (display-mode: standalone) and (max-width: 1080px) {
  .store-header .header-right,
  .store-header .lang-dropdown,
  .store-header .lang-menu-list {
    z-index: 2147483647 !important;
  }
}

@media (max-width: 1080px) {
  html.ios-pwa-strict .store-header .header-right,
  html.ios-pwa-strict .store-header .lang-dropdown,
  html.ios-pwa-strict .store-header .lang-menu-list {
    z-index: 2147483647 !important;
  }
}


/* =====================================================================
   STORE PWA iPHONE — PAYSAGE FINAL
   Structure stricte :
   [ Pascal Gracia ] [ navigation horizontale ] [ Store + langue ]

   La classe .store-pwa-landscape est posée par JS avec innerWidth/innerHeight
   afin d'éviter les incohérences des media queries iOS/PWA.
===================================================================== */

html.store-pwa-landscape .store-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;

  display: grid !important;
  grid-template-columns:
    max-content
    minmax(0, 1fr)
    max-content !important;
  grid-template-rows: 70px !important;

  align-items: center !important;

  column-gap: clamp(8px, 1.4vw, 16px) !important;

  padding:
    0
    max(12px, env(safe-area-inset-right, 0px))
    0
    max(12px, env(safe-area-inset-left, 0px)) !important;

  background: #111 !important;

  overflow: visible !important;

  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
}

/* -----------------------------
   GAUCHE : Pascal Gracia
----------------------------- */
html.store-pwa-landscape .store-header > .header-left {
  grid-column: 1 !important;
  grid-row: 1 !important;

  position: static !important;

  display: flex !important;
  align-items: center !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-self: start !important;

  transform: none !important;
  -webkit-transform: none !important;

  z-index: 3 !important;
}

html.store-pwa-landscape .store-header .artist-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;

  gap: 7px !important;

  width: auto !important;
  min-width: 0 !important;
}

html.store-pwa-landscape .store-header .artist-icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
}

html.store-pwa-landscape .store-header .artist-name {
  display: block !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;

  font-size: clamp(.78rem, 1.35vw, 1rem) !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;

  flex: 0 0 auto !important;
}

/* -----------------------------
   CENTRE : navigation
----------------------------- */
html.store-pwa-landscape .store-header > nav.store-nav,
html.store-pwa-landscape .store-header > nav.store-nav.show,
html.store-pwa-landscape .store-header > nav.store-nav.active {
  grid-column: 2 !important;
  grid-row: 1 !important;

  position: static !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: clamp(5px, 1.0vw, 13px) !important;

  background: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  overflow: visible !important;

  transform: none !important;
  -webkit-transform: none !important;

  z-index: 2 !important;
}

html.store-pwa-landscape .store-header > nav.store-nav > a {
  position: static !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 2px 0 !important;

  font-size: clamp(.54rem, .92vw, .70rem) !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  text-align: center !important;

  transform: none !important;
  -webkit-transform: none !important;
}

/* -----------------------------
   DROITE : Store + langue
----------------------------- */
html.store-pwa-landscape .store-header > .header-right {
  grid-column: 3 !important;
  grid-row: 1 !important;

  position: static !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: flex-end !important;

  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 5px !important;

  justify-self: end !important;

  transform: none !important;
  -webkit-transform: none !important;

  z-index: 3 !important;
}

html.store-pwa-landscape .store-header .store-icon {
  width: 32px !important;
  height: 32px !important;

  flex: 0 0 32px !important;
}

html.store-pwa-landscape .store-header .store-icon svg {
  width: 20px !important;
  height: 20px !important;
}

html.store-pwa-landscape .store-header .lang-dropdown {
  position: relative !important;
  flex: 0 0 auto !important;
}

html.store-pwa-landscape .store-header .lang-menu-toggle {
  min-width: auto !important;

  padding: 4px 2px !important;

  font-size: .62rem !important;

  gap: 3px !important;
}

html.store-pwa-landscape .store-header .flag {
  width: 18px !important;
  height: 12px !important;
}

/* Aucun hamburger en paysage */
html.store-pwa-landscape .store-header .menu-toggle,
html.store-pwa-landscape .store-header button.menu-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: 0 0 0 !important;
}

/* Le contenu reste sous le header */
html.store-pwa-landscape body > main {
  padding-top: 70px !important;
}


/* =====================================================================
   EDGE iOS — PAYSAGE
   Utilise exactement la même disposition horizontale que la PWA :
   [ Pascal Gracia ] [ navigation ] [ Store + langue ]
===================================================================== */

html.edge-ios-browser.store-pwa-landscape .store-header {
  display: grid !important;
  grid-template-columns:
    max-content
    minmax(0, 1fr)
    max-content !important;
  grid-template-rows: 70px !important;

  align-items: center !important;

  width: 100% !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;

  overflow: visible !important;
}

html.edge-ios-browser.store-pwa-landscape
.store-header > .header-left {
  grid-column: 1 !important;
  grid-row: 1 !important;

  position: static !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
  -webkit-transform: none !important;
}

html.edge-ios-browser.store-pwa-landscape
.store-header > nav.store-nav,
html.edge-ios-browser.store-pwa-landscape
.store-header > nav.store-nav.show,
html.edge-ios-browser.store-pwa-landscape
.store-header > nav.store-nav.active {
  grid-column: 2 !important;
  grid-row: 1 !important;

  position: static !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: clamp(5px, 1vw, 13px) !important;

  background: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  overflow: visible !important;

  transform: none !important;
  -webkit-transform: none !important;
}

html.edge-ios-browser.store-pwa-landscape
.store-header > nav.store-nav > a {
  display: inline-flex !important;
  flex: 0 0 auto !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 2px 0 !important;

  font-size: clamp(.54rem, .92vw, .70rem) !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  text-align: center !important;
}

html.edge-ios-browser.store-pwa-landscape
.store-header > .header-right {
  grid-column: 3 !important;
  grid-row: 1 !important;

  position: static !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: flex-end !important;

  width: auto !important;
  min-width: max-content !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 5px !important;

  transform: none !important;
  -webkit-transform: none !important;
}

/* Pas de hamburger sur Edge iOS en paysage */
html.edge-ios-browser.store-pwa-landscape
.store-header .menu-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ==========================================================
   CURSEUR PERSONNALISÉ — SORTIE DE FENÊTRE / NAVIGATION
========================================================== */
@media (hover: hover) and (pointer: fine) {
  body.store-transition-active #cursor,
  .store-page-transition.show ~ #cursor {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}
\n\n

/* =====================================================================
   HEADER STORE — PAYSAGE ALIGNÉ SUR LE SITE PRINCIPAL
   ---------------------------------------------------------------------
   Reprend les mêmes dimensions et paliers que style.css du site :
   - >= 1101 px : icône 60 px, nom 1.8rem, header 84 px
   - 769–1100 px : icône clamp(42px, 5vw, 52px), nom et menu adaptatifs
   - <= 900 px : navigation encore plus compacte, comme sur le site principal
   Tous les éléments sont centrés verticalement sur le même axe.
===================================================================== */
@media (orientation: landscape) and (min-width: 769px) {
  html {
    --pg-store-landscape-header-h: 84px;
  }

  html body .store-header,
  html.store-pwa-landscape body .store-header,
  html.edge-ios-browser.store-pwa-landscape body .store-header,
  html.ipad-landscape body .store-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    height: var(--pg-store-landscape-header-h) !important;
    min-height: var(--pg-store-landscape-header-h) !important;
    max-height: var(--pg-store-landscape-header-h) !important;

    padding: 12px 30px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  html body .store-header > .header-left,
  html.store-pwa-landscape body .store-header > .header-left,
  html.edge-ios-browser.store-pwa-landscape body .store-header > .header-left,
  html.ipad-landscape body .store-header > .header-left {
    position: relative !important;
    z-index: 4 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body .store-header .artist-link,
  html.store-pwa-landscape body .store-header .artist-link,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-link,
  html.ipad-landscape body .store-header .artist-link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    height: 100% !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .store-header .artist-icon,
  html.store-pwa-landscape body .store-header .artist-icon,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-icon,
  html.ipad-landscape body .store-header .artist-icon {
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px !important;
    margin: 0 !important;
  }

  html body .store-header .artist-name,
  html.store-pwa-landscape body .store-header .artist-name,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-name,
  html.ipad-landscape body .store-header .artist-name {
    display: inline-flex !important;
    align-items: center !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 1.8rem !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .store-header > nav.store-nav,
  html body .store-header > nav.store-nav.show,
  html body .store-header > nav.store-nav.active,
  html.store-pwa-landscape body .store-header > nav.store-nav,
  html.store-pwa-landscape body .store-header > nav.store-nav.show,
  html.store-pwa-landscape body .store-header > nav.store-nav.active,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav.show,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav.active,
  html.ipad-landscape body .store-header > nav.store-nav,
  html.ipad-landscape body .store-header > nav.store-nav.show,
  html.ipad-landscape body .store-header > nav.store-nav.active {
    position: absolute !important;
    left: 50vw !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;

    width: min(720px, calc(100vw - 430px)) !important;
    max-width: calc(100vw - 430px) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    gap: 6px 24px !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 2 !important;
  }

  html body .store-header > nav.store-nav > a,
  html.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.ipad-landscape body .store-header > nav.store-nav > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 2px 0 !important;

    font-size: clamp(0.75rem, 0.9vw, 1rem) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;

    white-space: nowrap !important;
    text-align: center !important;
  }

  html body .store-header > .header-right,
  html.store-pwa-landscape body .store-header > .header-right,
  html.edge-ios-browser.store-pwa-landscape body .store-header > .header-right,
  html.ipad-landscape body .store-header > .header-right {
    position: relative !important;
    z-index: 4 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    height: 100% !important;

    gap: 10px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  html body .store-header .store-icon,
  html.store-pwa-landscape body .store-header .store-icon,
  html.edge-ios-browser.store-pwa-landscape body .store-header .store-icon,
  html.ipad-landscape body .store-header .store-icon,
  html body .store-header .lang-dropdown,
  html.store-pwa-landscape body .store-header .lang-dropdown,
  html.edge-ios-browser.store-pwa-landscape body .store-header .lang-dropdown,
  html.ipad-landscape body .store-header .lang-dropdown,
  html body .store-header .lang-menu-toggle,
  html.store-pwa-landscape body .store-header .lang-menu-toggle,
  html.edge-ios-browser.store-pwa-landscape body .store-header .lang-menu-toggle,
  html.ipad-landscape body .store-header .lang-menu-toggle {
    align-self: center !important;
  }

  html body .store-header .store-icon,
  html.store-pwa-landscape body .store-header .store-icon,
  html.edge-ios-browser.store-pwa-landscape body .store-header .store-icon,
  html.ipad-landscape body .store-header .store-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .store-header .lang-dropdown,
  html.store-pwa-landscape body .store-header .lang-dropdown,
  html.edge-ios-browser.store-pwa-landscape body .store-header .lang-dropdown,
  html.ipad-landscape body .store-header .lang-dropdown {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  html body .store-header .lang-menu-toggle,
  html.store-pwa-landscape body .store-header .lang-menu-toggle,
  html.edge-ios-browser.store-pwa-landscape body .store-header .lang-menu-toggle,
  html.ipad-landscape body .store-header .lang-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 78px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
  }

  html body .store-header .menu-toggle,
  html.store-pwa-landscape body .store-header .menu-toggle,
  html.edge-ios-browser.store-pwa-landscape body .store-header .menu-toggle,
  html.ipad-landscape body .store-header .menu-toggle {
    display: none !important;
  }

  html.store-pwa-landscape body > main,
  html.edge-ios-browser.store-pwa-landscape body > main,
  html.ipad-landscape body > main {
    padding-top: var(--pg-store-landscape-header-h) !important;
  }
}

@media (orientation: landscape) and (min-width: 769px) and (max-width: 1100px) {
  html {
    --pg-store-landscape-header-h: calc(clamp(42px, 5vw, 52px) + 24px);
  }

  html body .store-header .artist-icon,
  html.store-pwa-landscape body .store-header .artist-icon,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-icon,
  html.ipad-landscape body .store-header .artist-icon {
    width: clamp(42px, 5vw, 52px) !important;
    height: clamp(42px, 5vw, 52px) !important;
    flex-basis: clamp(42px, 5vw, 52px) !important;
  }

  html body .store-header .artist-name,
  html.store-pwa-landscape body .store-header .artist-name,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-name,
  html.ipad-landscape body .store-header .artist-name {
    font-size: clamp(1rem, 1.6vw, 1.35rem) !important;
  }

  html body .store-header > nav.store-nav,
  html.store-pwa-landscape body .store-header > nav.store-nav,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav,
  html.ipad-landscape body .store-header > nav.store-nav {
    width: min(460px, calc(100vw - 360px)) !important;
    max-width: calc(100vw - 360px) !important;
    gap: 5px 16px !important;
  }

  html body .store-header > nav.store-nav > a,
  html.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.ipad-landscape body .store-header > nav.store-nav > a {
    font-size: clamp(0.68rem, 1vw, 0.84rem) !important;
  }
}

@media (orientation: landscape) and (min-width: 769px) and (max-width: 900px) {
  html body .store-header > nav.store-nav,
  html.store-pwa-landscape body .store-header > nav.store-nav,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav,
  html.ipad-landscape body .store-header > nav.store-nav {
    width: min(300px, calc(100vw - 300px)) !important;
    max-width: calc(100vw - 300px) !important;
    gap: 3px 12px !important;
  }

  html body .store-header > nav.store-nav > a,
  html.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.ipad-landscape body .store-header > nav.store-nav > a {
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
  }

  html body .store-header .lang-menu-toggle,
  html.store-pwa-landscape body .store-header .lang-menu-toggle,
  html.edge-ios-browser.store-pwa-landscape body .store-header .lang-menu-toggle,
  html.ipad-landscape body .store-header .lang-menu-toggle {
    min-width: 62px !important;
    padding: 6px 7px !important;
    font-size: 0.68rem !important;
  }
}

/* === FINAL FIX 2026-10-03: LANDSCAPE SAFE AREA + NO NAV UNDERLINE === */
/* Le site principal n'affiche aucune barre sous les liens du header. */
.store-nav a::after,
.store-nav a:hover::after,
.store-nav a.active::after,
.store-nav a:focus::after,
.store-nav a:focus-visible::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Paysage tablette / iPad : même header que le site principal,
   mais positionné strictement APRÈS la safe area iOS. */
@media (orientation: landscape) and (min-width: 769px) {
  html {
    --pg-store-landscape-safe-top: env(safe-area-inset-top, 0px);
  }

  html body .store-header,
  html.store-pwa-landscape body .store-header,
  html.edge-ios-browser.store-pwa-landscape body .store-header,
  html.ios-pwa body .store-header,
  html.ios-pwa-strict body .store-header,
  html.ipad-landscape body .store-header {
    top: var(--pg-store-landscape-safe-top) !important;
    align-items: center !important;
  }

  html body .store-header > .header-left,
  html.store-pwa-landscape body .store-header > .header-left,
  html.edge-ios-browser.store-pwa-landscape body .store-header > .header-left,
  html.ios-pwa body .store-header > .header-left,
  html.ios-pwa-strict body .store-header > .header-left,
  html.ipad-landscape body .store-header > .header-left,
  html body .store-header > .header-right,
  html.store-pwa-landscape body .store-header > .header-right,
  html.edge-ios-browser.store-pwa-landscape body .store-header > .header-right,
  html.ios-pwa body .store-header > .header-right,
  html.ios-pwa-strict body .store-header > .header-right,
  html.ipad-landscape body .store-header > .header-right {
    align-items: center !important;
    align-self: stretch !important;
  }

  html body .store-header .artist-link,
  html.store-pwa-landscape body .store-header .artist-link,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-link,
  html.ios-pwa body .store-header .artist-link,
  html.ios-pwa-strict body .store-header .artist-link,
  html.ipad-landscape body .store-header .artist-link,
  html body .store-header .store-icon,
  html.store-pwa-landscape body .store-header .store-icon,
  html.edge-ios-browser.store-pwa-landscape body .store-header .store-icon,
  html.ios-pwa body .store-header .store-icon,
  html.ios-pwa-strict body .store-header .store-icon,
  html.ipad-landscape body .store-header .store-icon,
  html body .store-header .lang-dropdown,
  html.store-pwa-landscape body .store-header .lang-dropdown,
  html.edge-ios-browser.store-pwa-landscape body .store-header .lang-dropdown,
  html.ios-pwa body .store-header .lang-dropdown,
  html.ios-pwa-strict body .store-header .lang-dropdown,
  html.ipad-landscape body .store-header .lang-dropdown,
  html body .store-header .lang-menu-toggle,
  html.store-pwa-landscape body .store-header .lang-menu-toggle,
  html.edge-ios-browser.store-pwa-landscape body .store-header .lang-menu-toggle,
  html.ios-pwa body .store-header .lang-menu-toggle,
  html.ios-pwa-strict body .store-header .lang-menu-toggle,
  html.ipad-landscape body .store-header .lang-menu-toggle {
    align-items: center !important;
    align-self: center !important;
  }

  html body .store-header > nav.store-nav,
  html body .store-header > nav.store-nav.show,
  html body .store-header > nav.store-nav.active,
  html.store-pwa-landscape body .store-header > nav.store-nav,
  html.store-pwa-landscape body .store-header > nav.store-nav.show,
  html.store-pwa-landscape body .store-header > nav.store-nav.active,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav.show,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav.active,
  html.ios-pwa body .store-header > nav.store-nav,
  html.ios-pwa-strict body .store-header > nav.store-nav,
  html.ipad-landscape body .store-header > nav.store-nav {
    top: 50% !important;
    align-items: center !important;
    align-content: center !important;
  }

  html.store-pwa-landscape body > main,
  html.edge-ios-browser.store-pwa-landscape body > main,
  html.ios-pwa body > main,
  html.ios-pwa-strict body > main,
  html.ipad-landscape body > main {
    padding-top: calc(
      var(--pg-store-landscape-safe-top)
      + var(--pg-store-landscape-header-h)
    ) !important;
  }

  html.store-pwa-landscape body .store-hero,
  html.edge-ios-browser.store-pwa-landscape body .store-hero,
  html.ios-pwa body .store-hero,
  html.ios-pwa-strict body .store-hero,
  html.ipad-landscape body .store-hero {
    min-height: calc(
      100dvh
      - var(--pg-store-landscape-safe-top)
      - var(--pg-store-landscape-header-h)
      - var(--store-footer-h, 0px)
      - var(--store-safe-bottom, 0px)
    ) !important;
  }
}

/* === FINAL FIX: SUPPRESSION TOTALE DE LA BARRE NEON SOUS LE HEADER === */
.store-header::after,
.store-header:not(:has(.store-nav.show))::after,
.store-header:has(.store-nav.show)::after,
html.ios-pwa-strict .store-header::after,
html.ios-pwa-strict .store-header:not(:has(.store-nav.show))::after,
html.ios-pwa-strict .store-header:has(.store-nav.show)::after,
html.edge-ios-browser .store-header::after,
html.store-pwa-landscape .store-header::after,
html.ipad-landscape .store-header::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* =====================================================================
   FINAL FIX 2026-10-03 — SMARTPHONE PORTRAIT : HAUT DU HEADER NET
   ---------------------------------------------------------------------
   Corrige uniquement le flou/lissage du bord supérieur du header.
   IMPORTANT : aucune valeur de safe area, aucun top, aucune hauteur,
   aucun padding de safe area n'est modifié ici.
===================================================================== */
@media (orientation: portrait) and (max-width: 768px) {
  .store-header,
  html.ios-pwa .store-header,
  html.ios-pwa-strict .store-header,
  html.pwa-standalone .store-header {
    /* Fond réellement opaque : aucun contenu ne peut transparaître. */
    background: #111 !important;
    background-image: none !important;
    background-color: #111 !important;

    /* Supprime tout traitement WebKit susceptible de lisser le bord haut. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;

    /* Évite la création d'une couche GPU floutée sur iOS. */
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;

    isolation: isolate !important;
  }

  /* Pendant la transition d'entrée, le header reste parfaitement net. */
  body.store-transition-active .store-header,
  html.ios-pwa body.store-transition-active .store-header,
  html.ios-pwa-strict body.store-transition-active .store-header,
  html.pwa-standalone body.store-transition-active .store-header {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    opacity: 1 !important;
  }

  /* Bande interne de 3 px : masque le lissage du premier pixel WebKit.
     Elle reste strictement À L'INTÉRIEUR du header et ne touche pas
     à la safe zone située au-dessus. */
  .store-header::before,
  html.ios-pwa .store-header::before,
  html.ios-pwa-strict .store-header::before,
  html.pwa-standalone .store-header::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 3px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #111 !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
}

/* =====================================================================
   FINAL MASTER FIX 2026-10-03 — HEADER STORE EN PAYSAGE
   ---------------------------------------------------------------------
   Objectifs :
   - aucune phase intermédiaire avec les liens empilés ;
   - navigation TOUJOURS sur une seule ligne en paysage ;
   - aucun trait / soulignement / bord néon sous la navigation ;
   - conservation des safe areas et du comportement portrait existant.
===================================================================== */

@media (orientation: landscape) {

  /* ---------------------------------------------------------------
     HEADER : trois zones stables
     [ Pascal Gracia ] [ navigation ] [ Store + langue ]
  --------------------------------------------------------------- */
  html body .store-header,
  html.store-pwa-landscape body .store-header,
  html.edge-ios-browser body .store-header,
  html.edge-ios-browser.store-pwa-landscape body .store-header,
  html.ios-pwa body .store-header,
  html.ios-pwa-strict body .store-header,
  html.ipad-landscape body .store-header {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    grid-template-rows: 1fr !important;

    align-items: center !important;
    justify-items: stretch !important;

    column-gap: clamp(4px, 1.1vw, 16px) !important;

    /* Supprime toute ligne franche sous le header. */
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;

    /* Ne touche volontairement ni à top, ni aux safe areas,
       ni aux hauteurs/paddings déjà définis plus haut. */
  }

  /* ---------------------------------------------------------------
     GAUCHE
  --------------------------------------------------------------- */
  html body .store-header > .header-left,
  html.store-pwa-landscape body .store-header > .header-left,
  html.edge-ios-browser body .store-header > .header-left,
  html.edge-ios-browser.store-pwa-landscape body .store-header > .header-left,
  html.ios-pwa body .store-header > .header-left,
  html.ios-pwa-strict body .store-header > .header-left,
  html.ipad-landscape body .store-header > .header-left {
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    -webkit-transform: none !important;

    z-index: 4 !important;
  }

  html body .store-header .artist-link,
  html.store-pwa-landscape body .store-header .artist-link,
  html.edge-ios-browser body .store-header .artist-link,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-link,
  html.ios-pwa body .store-header .artist-link,
  html.ios-pwa-strict body .store-header .artist-link,
  html.ipad-landscape body .store-header .artist-link {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  html body .store-header .artist-name,
  html.store-pwa-landscape body .store-header .artist-name,
  html.edge-ios-browser body .store-header .artist-name,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-name,
  html.ios-pwa body .store-header .artist-name,
  html.ios-pwa-strict body .store-header .artist-name,
  html.ipad-landscape body .store-header .artist-name {
    display: inline-block !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* ---------------------------------------------------------------
     CENTRE : NAVIGATION
     Le point important est flex-wrap: nowrap sur TOUT le paysage.
  --------------------------------------------------------------- */
  html body .store-header > nav.store-nav,
  html body .store-header > nav.store-nav.show,
  html body .store-header > nav.store-nav.active,

  html.store-pwa-landscape body .store-header > nav.store-nav,
  html.store-pwa-landscape body .store-header > nav.store-nav.show,
  html.store-pwa-landscape body .store-header > nav.store-nav.active,

  html.edge-ios-browser body .store-header > nav.store-nav,
  html.edge-ios-browser body .store-header > nav.store-nav.show,
  html.edge-ios-browser body .store-header > nav.store-nav.active,

  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav.show,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav.active,

  html.ios-pwa body .store-header > nav.store-nav,
  html.ios-pwa body .store-header > nav.store-nav.show,
  html.ios-pwa body .store-header > nav.store-nav.active,

  html.ios-pwa-strict body .store-header > nav.store-nav,
  html.ios-pwa-strict body .store-header > nav.store-nav.show,
  html.ios-pwa-strict body .store-header > nav.store-nav.active,

  html.ipad-landscape body .store-header > nav.store-nav,
  html.ipad-landscape body .store-header > nav.store-nav.show,
  html.ipad-landscape body .store-header > nav.store-nav.active {
    grid-column: 2 !important;
    grid-row: 1 !important;

    position: static !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    align-content: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: clamp(4px, 1vw, 18px) !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    overflow: visible !important;

    transform: none !important;
    -webkit-transform: none !important;

    transition: none !important;

    z-index: 2 !important;
  }

  html body .store-header > nav.store-nav > a,
  html.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.edge-ios-browser body .store-header > nav.store-nav > a,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.ios-pwa body .store-header > nav.store-nav > a,
  html.ios-pwa-strict body .store-header > nav.store-nav > a,
  html.ipad-landscape body .store-header > nav.store-nav > a {
    position: relative !important;

    display: inline-flex !important;
    flex: 0 0 auto !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 2px 0 !important;

    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;

    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* Aucun pseudo-élément ne peut recréer une ligne sous les liens. */
  html body .store-header > nav.store-nav::before,
  html body .store-header > nav.store-nav::after,
  html body .store-header > nav.store-nav > a::before,
  html body .store-header > nav.store-nav > a::after,

  html.store-pwa-landscape body .store-header > nav.store-nav::before,
  html.store-pwa-landscape body .store-header > nav.store-nav::after,
  html.store-pwa-landscape body .store-header > nav.store-nav > a::before,
  html.store-pwa-landscape body .store-header > nav.store-nav > a::after,

  html.edge-ios-browser body .store-header > nav.store-nav::before,
  html.edge-ios-browser body .store-header > nav.store-nav::after,
  html.edge-ios-browser body .store-header > nav.store-nav > a::before,
  html.edge-ios-browser body .store-header > nav.store-nav > a::after,

  html.ios-pwa body .store-header > nav.store-nav::before,
  html.ios-pwa body .store-header > nav.store-nav::after,
  html.ios-pwa body .store-header > nav.store-nav > a::before,
  html.ios-pwa body .store-header > nav.store-nav > a::after,

  html.ios-pwa-strict body .store-header > nav.store-nav::before,
  html.ios-pwa-strict body .store-header > nav.store-nav::after,
  html.ios-pwa-strict body .store-header > nav.store-nav > a::before,
  html.ios-pwa-strict body .store-header > nav.store-nav > a::after,

  html.ipad-landscape body .store-header > nav.store-nav::before,
  html.ipad-landscape body .store-header > nav.store-nav::after,
  html.ipad-landscape body .store-header > nav.store-nav > a::before,
  html.ipad-landscape body .store-header > nav.store-nav > a::after {
    content: none !important;
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* ---------------------------------------------------------------
     DROITE
  --------------------------------------------------------------- */
  html body .store-header > .header-right,
  html.store-pwa-landscape body .store-header > .header-right,
  html.edge-ios-browser body .store-header > .header-right,
  html.edge-ios-browser.store-pwa-landscape body .store-header > .header-right,
  html.ios-pwa body .store-header > .header-right,
  html.ios-pwa-strict body .store-header > .header-right,
  html.ipad-landscape body .store-header > .header-right {
    grid-column: 3 !important;
    grid-row: 1 !important;

    position: static !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: clamp(3px, .7vw, 10px) !important;

    transform: none !important;
    -webkit-transform: none !important;

    z-index: 4 !important;
  }

  /* Aucun hamburger en paysage : la navigation reste visible. */
  html body .store-header .menu-toggle,
  html.store-pwa-landscape body .store-header .menu-toggle,
  html.edge-ios-browser body .store-header .menu-toggle,
  html.edge-ios-browser.store-pwa-landscape body .store-header .menu-toggle,
  html.ios-pwa body .store-header .menu-toggle,
  html.ios-pwa-strict body .store-header .menu-toggle,
  html.ipad-landscape body .store-header .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 0 !important;
  }

  /* Le header lui-même ne doit jamais dessiner de fine ligne. */
  html body .store-header::after,
  html.store-pwa-landscape body .store-header::after,
  html.edge-ios-browser body .store-header::after,
  html.edge-ios-browser.store-pwa-landscape body .store-header::after,
  html.ios-pwa body .store-header::after,
  html.ios-pwa-strict body .store-header::after,
  html.ipad-landscape body .store-header::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    width: 0 !important;
    height: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}


/* ---------------------------------------------------------------------
   PAYSAGE COMPACT — téléphones / fenêtres étroites (<= 768 px)
   Même structure, mais dimensions resserrées pour que tout tienne.
------------------------------------------------------------------------ */
@media (orientation: landscape) and (max-width: 768px) {

  html body .store-header,
  html.store-pwa-landscape body .store-header,
  html.edge-ios-browser body .store-header,
  html.ios-pwa body .store-header,
  html.ios-pwa-strict body .store-header,
  html.ipad-landscape body .store-header {
    column-gap: clamp(3px, .7vw, 7px) !important;
  }

  html body .store-header .artist-link,
  html.store-pwa-landscape body .store-header .artist-link,
  html.edge-ios-browser body .store-header .artist-link,
  html.ios-pwa body .store-header .artist-link,
  html.ios-pwa-strict body .store-header .artist-link,
  html.ipad-landscape body .store-header .artist-link {
    gap: 5px !important;
  }

  html body .store-header .artist-icon,
  html.store-pwa-landscape body .store-header .artist-icon,
  html.edge-ios-browser body .store-header .artist-icon,
  html.ios-pwa body .store-header .artist-icon,
  html.ios-pwa-strict body .store-header .artist-icon,
  html.ipad-landscape body .store-header .artist-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  html body .store-header .artist-name,
  html.store-pwa-landscape body .store-header .artist-name,
  html.edge-ios-browser body .store-header .artist-name,
  html.ios-pwa body .store-header .artist-name,
  html.ios-pwa-strict body .store-header .artist-name,
  html.ipad-landscape body .store-header .artist-name {
    display: inline-block !important;
    max-width: none !important;

    font-size: clamp(.64rem, 1.5vw, .78rem) !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .store-header > nav.store-nav,
  html.store-pwa-landscape body .store-header > nav.store-nav,
  html.edge-ios-browser body .store-header > nav.store-nav,
  html.ios-pwa body .store-header > nav.store-nav,
  html.ios-pwa-strict body .store-header > nav.store-nav,
  html.ipad-landscape body .store-header > nav.store-nav {
    gap: clamp(2px, .65vw, 5px) !important;
  }

  html body .store-header > nav.store-nav > a,
  html.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.edge-ios-browser body .store-header > nav.store-nav > a,
  html.ios-pwa body .store-header > nav.store-nav > a,
  html.ios-pwa-strict body .store-header > nav.store-nav > a,
  html.ipad-landscape body .store-header > nav.store-nav > a {
    font-size: clamp(.50rem, 1.15vw, .62rem) !important;
    letter-spacing: -0.01em !important;
  }

  html body .store-header > .header-right,
  html.store-pwa-landscape body .store-header > .header-right,
  html.edge-ios-browser body .store-header > .header-right,
  html.ios-pwa body .store-header > .header-right,
  html.ios-pwa-strict body .store-header > .header-right,
  html.ipad-landscape body .store-header > .header-right {
    gap: 2px !important;
  }

  html body .store-header .store-icon,
  html.store-pwa-landscape body .store-header .store-icon,
  html.edge-ios-browser body .store-header .store-icon,
  html.ios-pwa body .store-header .store-icon,
  html.ios-pwa-strict body .store-header .store-icon,
  html.ipad-landscape body .store-header .store-icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }

  html body .store-header .store-icon svg,
  html.store-pwa-landscape body .store-header .store-icon svg,
  html.edge-ios-browser body .store-header .store-icon svg,
  html.ios-pwa body .store-header .store-icon svg,
  html.ios-pwa-strict body .store-header .store-icon svg,
  html.ipad-landscape body .store-header .store-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  html body .store-header .lang-menu-toggle,
  html.store-pwa-landscape body .store-header .lang-menu-toggle,
  html.edge-ios-browser body .store-header .lang-menu-toggle,
  html.ios-pwa body .store-header .lang-menu-toggle,
  html.ios-pwa-strict body .store-header .lang-menu-toggle,
  html.ipad-landscape body .store-header .lang-menu-toggle {
    min-width: 44px !important;
    height: 28px !important;

    padding: 2px 1px !important;
    gap: 2px !important;

    font-size: .52rem !important;
  }

  html body .store-header .flag,
  html.store-pwa-landscape body .store-header .flag,
  html.edge-ios-browser body .store-header .flag,
  html.ios-pwa body .store-header .flag,
  html.ios-pwa-strict body .store-header .flag,
  html.ipad-landscape body .store-header .flag {
    width: 16px !important;
    height: 11px !important;
  }
}


/* ---------------------------------------------------------------------
   PAYSAGE INTERMÉDIAIRE — 769 à 1100 px
   Réduction progressive, jamais d'empilement.
------------------------------------------------------------------------ */
@media (orientation: landscape)
       and (min-width: 769px)
       and (max-width: 1100px) {

  html body .store-header > nav.store-nav,
  html.store-pwa-landscape body .store-header > nav.store-nav,
  html.edge-ios-browser body .store-header > nav.store-nav,
  html.ios-pwa body .store-header > nav.store-nav,
  html.ios-pwa-strict body .store-header > nav.store-nav,
  html.ipad-landscape body .store-header > nav.store-nav {
    gap: clamp(4px, .85vw, 12px) !important;
  }

  html body .store-header > nav.store-nav > a,
  html.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.edge-ios-browser body .store-header > nav.store-nav > a,
  html.ios-pwa body .store-header > nav.store-nav > a,
  html.ios-pwa-strict body .store-header > nav.store-nav > a,
  html.ipad-landscape body .store-header > nav.store-nav > a {
    font-size: clamp(.60rem, .82vw, .78rem) !important;
  }
}

/* =====================================================================
   FINAL FIX 2026-10-03 — BASCULE DIRECTE VERS HAMBURGER
   ---------------------------------------------------------------------
   Supprime définitivement le palier intermédiaire :
   - > 1080 px : navigation horizontale, une seule ligne ;
   - <= 1080 px : hamburger directement.
   Aucun changement de safe area.
===================================================================== */


/* ---------------------------------------------------------------------
   AU-DESSUS DE 1080 px : MENU HORIZONTAL STRICTEMENT SUR UNE LIGNE
------------------------------------------------------------------------ */
@media (min-width: 1081px) {

  .store-header > nav.store-nav,
  .store-header > nav.store-nav.show,
  .store-header > nav.store-nav.active {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    align-content: center !important;
    justify-content: center !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    max-height: none !important;
    overflow: visible !important;
  }

  .store-header > nav.store-nav > a {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  .store-header .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* ---------------------------------------------------------------------
   JUSQU'À 1080 px : HAMBURGER DIRECTEMENT
   Cette règle est volontairement placée EN TOUT DERNIER dans le fichier
   afin d'annuler les anciens correctifs paysage 769–1080 px.
------------------------------------------------------------------------ */
@media (max-width: 1080px) {

  /* Header : gauche + bloc droit uniquement.
     On ne modifie ni top, ni safe-area-inset-* existants. */
  html body .store-header,
  html.store-pwa-landscape body .store-header,
  html.edge-ios-browser body .store-header,
  html.edge-ios-browser.store-pwa-landscape body .store-header,
  html.ios-pwa body .store-header,
  html.ios-pwa-strict body .store-header,
  html.ipad-landscape body .store-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: space-between !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;

    gap: 8px !important;
  }

  html body .store-header > .header-left,
  html.store-pwa-landscape body .store-header > .header-left,
  html.edge-ios-browser body .store-header > .header-left,
  html.edge-ios-browser.store-pwa-landscape body .store-header > .header-left,
  html.ios-pwa body .store-header > .header-left,
  html.ios-pwa-strict body .store-header > .header-left,
  html.ipad-landscape body .store-header > .header-left {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 4 !important;
  }

  html body .store-header .artist-link,
  html.store-pwa-landscape body .store-header .artist-link,
  html.edge-ios-browser body .store-header .artist-link,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-link,
  html.ios-pwa body .store-header .artist-link,
  html.ios-pwa-strict body .store-header .artist-link,
  html.ipad-landscape body .store-header .artist-link {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body .store-header .artist-name,
  html.store-pwa-landscape body .store-header .artist-name,
  html.edge-ios-browser body .store-header .artist-name,
  html.edge-ios-browser.store-pwa-landscape body .store-header .artist-name,
  html.ios-pwa body .store-header .artist-name,
  html.ios-pwa-strict body .store-header .artist-name,
  html.ipad-landscape body .store-header .artist-name {
    min-width: 0 !important;
    max-width: 38vw !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body .store-header > .header-right,
  html.store-pwa-landscape body .store-header > .header-right,
  html.edge-ios-browser body .store-header > .header-right,
  html.edge-ios-browser.store-pwa-landscape body .store-header > .header-right,
  html.ios-pwa body .store-header > .header-right,
  html.ios-pwa-strict body .store-header > .header-right,
  html.ipad-landscape body .store-header > .header-right {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-end !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 6px !important;

    z-index: 4 !important;
  }

  /* Le hamburger est visible dès 1080 px.
     Il n'existe donc plus de plage où les liens peuvent s'empiler. */
  html body .store-header .menu-toggle,
  html.store-pwa-landscape body .store-header .menu-toggle,
  html.edge-ios-browser body .store-header .menu-toggle,
  html.edge-ios-browser.store-pwa-landscape body .store-header .menu-toggle,
  html.ios-pwa body .store-header .menu-toggle,
  html.ios-pwa-strict body .store-header .menu-toggle,
  html.ipad-landscape body .store-header .menu-toggle {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;

    flex: 0 0 28px !important;

    width: 28px !important;
    height: 22px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Navigation fermée : aucune présence dans le header. */
  html body .store-header > nav.store-nav,
  html.store-pwa-landscape body .store-header > nav.store-nav,
  html.edge-ios-browser body .store-header > nav.store-nav,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav,
  html.ios-pwa body .store-header > nav.store-nav,
  html.ios-pwa-strict body .store-header > nav.store-nav,
  html.ipad-landscape body .store-header > nav.store-nav {
    position: absolute !important;

    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #111 !important;
    background-image: none !important;

    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    overflow: hidden !important;

    transform: none !important;
    -webkit-transform: none !important;

    transition:
      max-height .3s ease,
      opacity .3s ease !important;

    z-index: 2147483002 !important;
  }

  /* Navigation ouverte par le hamburger. */
  html body .store-header > nav.store-nav.show,
  html body .store-header > nav.store-nav.active,
  html.store-pwa-landscape body .store-header > nav.store-nav.show,
  html.store-pwa-landscape body .store-header > nav.store-nav.active,
  html.edge-ios-browser body .store-header > nav.store-nav.show,
  html.edge-ios-browser body .store-header > nav.store-nav.active,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav.show,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav.active,
  html.ios-pwa body .store-header > nav.store-nav.show,
  html.ios-pwa body .store-header > nav.store-nav.active,
  html.ios-pwa-strict body .store-header > nav.store-nav.show,
  html.ios-pwa-strict body .store-header > nav.store-nav.active,
  html.ipad-landscape body .store-header > nav.store-nav.show,
  html.ipad-landscape body .store-header > nav.store-nav.active {
    max-height: 420px !important;

    padding: 8px 0 10px !important;

    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    overflow: hidden !important;
  }

  html body .store-header > nav.store-nav > a,
  html.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.edge-ios-browser body .store-header > nav.store-nav > a,
  html.edge-ios-browser.store-pwa-landscape body .store-header > nav.store-nav > a,
  html.ios-pwa body .store-header > nav.store-nav > a,
  html.ios-pwa-strict body .store-header > nav.store-nav > a,
  html.ipad-landscape body .store-header > nav.store-nav > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 10px 16px !important;

    font-size: 1rem !important;
    line-height: 1.15 !important;

    white-space: nowrap !important;
    text-align: center !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* Conserve la suppression des fines lignes. */
  html body .store-header > nav.store-nav::before,
  html body .store-header > nav.store-nav::after,
  html body .store-header > nav.store-nav > a::before,
  html body .store-header > nav.store-nav > a::after,
  html.store-pwa-landscape body .store-header > nav.store-nav::before,
  html.store-pwa-landscape body .store-header > nav.store-nav::after,
  html.store-pwa-landscape body .store-header > nav.store-nav > a::before,
  html.store-pwa-landscape body .store-header > nav.store-nav > a::after,
  html.edge-ios-browser body .store-header > nav.store-nav::before,
  html.edge-ios-browser body .store-header > nav.store-nav::after,
  html.edge-ios-browser body .store-header > nav.store-nav > a::before,
  html.edge-ios-browser body .store-header > nav.store-nav > a::after,
  html.ios-pwa body .store-header > nav.store-nav::before,
  html.ios-pwa body .store-header > nav.store-nav::after,
  html.ios-pwa body .store-header > nav.store-nav > a::before,
  html.ios-pwa body .store-header > nav.store-nav > a::after,
  html.ios-pwa-strict body .store-header > nav.store-nav::before,
  html.ios-pwa-strict body .store-header > nav.store-nav::after,
  html.ios-pwa-strict body .store-header > nav.store-nav > a::before,
  html.ios-pwa-strict body .store-header > nav.store-nav > a::after,
  html.ipad-landscape body .store-header > nav.store-nav::before,
  html.ipad-landscape body .store-header > nav.store-nav::after,
  html.ipad-landscape body .store-header > nav.store-nav > a::before,
  html.ipad-landscape body .store-header > nav.store-nav > a::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* =====================================================================
   FINAL FIX 2026-10-03 — FOOTER STABLE + LIGNE NEON HEADER PERMANENTE
   ---------------------------------------------------------------------
   - le footer conserve la même hauteur en paysage, avant/après hamburger ;
   - la ligne néon continue sous le header reste toujours visible ;
   - aucun soulignement n'est réintroduit sous les éléments du menu ;
   - aucune modification de la safe area haute.
===================================================================== */


/* ---------------------------------------------------------------------
   1. FOOTER : HAUTEUR CONSTANTE EN PAYSAGE
------------------------------------------------------------------------ */
@media (orientation: landscape) {

  :root,
  html,
  html.store-pwa-landscape,
  html.edge-ios-browser,
  html.ios-pwa,
  html.ios-pwa-strict,
  html.ipad-landscape {
    --store-footer-h: 72px !important;
  }

  html body .store-footer,
  html.store-pwa-landscape body .store-footer,
  html.edge-ios-browser body .store-footer,
  html.edge-ios-browser.store-pwa-landscape body .store-footer,
  html.ios-pwa body .store-footer,
  html.ios-pwa-strict body .store-footer,
  html.ipad-landscape body .store-footer {
    height:
      calc(
        var(--store-footer-h)
        + var(--store-safe-bottom, 0px)
      ) !important;

    min-height:
      calc(
        var(--store-footer-h)
        + var(--store-safe-bottom, 0px)
      ) !important;

    max-height:
      calc(
        var(--store-footer-h)
        + var(--store-safe-bottom, 0px)
      ) !important;

    padding-top: 0 !important;
    padding-bottom: var(--store-safe-bottom, 0px) !important;

    align-items: center !important;

    /* Empêche une réduction liée au changement de breakpoint. */
    flex-shrink: 0 !important;
  }

  /* Les zones scrollables continuent de s'arrêter au-dessus
     du footer avec exactement la même réserve. */
  html.edge-ios-browser body > main,
  html.store-pwa-landscape body > main,
  html.ios-pwa body > main,
  html.ios-pwa-strict body > main,
  html.ipad-landscape body > main {
    bottom:
      calc(
        var(--store-footer-h)
        + var(--store-safe-bottom, 0px)
      ) !important;
  }
}


/* ---------------------------------------------------------------------
   2. LIGNE NEON CONTINUE SOUS LE HEADER
   Elle appartient au header entier, jamais aux liens du menu.
------------------------------------------------------------------------ */
@media (orientation: landscape) {

  html body .store-header,
  html.store-pwa-landscape body .store-header,
  html.edge-ios-browser body .store-header,
  html.edge-ios-browser.store-pwa-landscape body .store-header,
  html.ios-pwa body .store-header,
  html.ios-pwa-strict body .store-header,
  html.ipad-landscape body .store-header {
    overflow: visible !important;
  }

  html body .store-header::after,
  html body .store-header:has(.store-nav.show)::after,
  html body .store-header:has(.store-nav.active)::after,

  html.store-pwa-landscape body .store-header::after,
  html.store-pwa-landscape body .store-header:has(.store-nav.show)::after,
  html.store-pwa-landscape body .store-header:has(.store-nav.active)::after,

  html.edge-ios-browser body .store-header::after,
  html.edge-ios-browser body .store-header:has(.store-nav.show)::after,
  html.edge-ios-browser body .store-header:has(.store-nav.active)::after,

  html.edge-ios-browser.store-pwa-landscape body .store-header::after,
  html.edge-ios-browser.store-pwa-landscape body .store-header:has(.store-nav.show)::after,
  html.edge-ios-browser.store-pwa-landscape body .store-header:has(.store-nav.active)::after,

  html.ios-pwa body .store-header::after,
  html.ios-pwa body .store-header:has(.store-nav.show)::after,
  html.ios-pwa body .store-header:has(.store-nav.active)::after,

  html.ios-pwa-strict body .store-header::after,
  html.ios-pwa-strict body .store-header:has(.store-nav.show)::after,
  html.ios-pwa-strict body .store-header:has(.store-nav.active)::after,

  html.ipad-landscape body .store-header::after,
  html.ipad-landscape body .store-header:has(.store-nav.show)::after,
  html.ipad-landscape body .store-header:has(.store-nav.active)::after {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: -1px !important;

    width: 100% !important;
    height: 1px !important;

    margin: 0 !important;
    padding: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(138, 43, 226, .28) 8%,
        rgba(138, 43, 226, .82) 30%,
        rgba(190, 105, 255, 1) 50%,
        rgba(138, 43, 226, .82) 70%,
        rgba(138, 43, 226, .28) 92%,
        transparent 100%
      ) !important;

    border: 0 !important;

    box-shadow:
      0 1px 4px rgba(138, 43, 226, .72),
      0 2px 8px rgba(138, 43, 226, .26) !important;

    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    pointer-events: none !important;
    z-index: 2147483004 !important;
  }

  /* Sécurité : les liens du menu restent sans ligne individuelle. */
  html body .store-header > nav.store-nav > a::before,
  html body .store-header > nav.store-nav > a::after,
  html.store-pwa-landscape body .store-header > nav.store-nav > a::before,
  html.store-pwa-landscape body .store-header > nav.store-nav > a::after,
  html.edge-ios-browser body .store-header > nav.store-nav > a::before,
  html.edge-ios-browser body .store-header > nav.store-nav > a::after,
  html.ios-pwa body .store-header > nav.store-nav > a::before,
  html.ios-pwa body .store-header > nav.store-nav > a::after,
  html.ios-pwa-strict body .store-header > nav.store-nav > a::before,
  html.ios-pwa-strict body .store-header > nav.store-nav > a::after,
  html.ipad-landscape body .store-header > nav.store-nav > a::before,
  html.ipad-landscape body .store-header > nav.store-nav > a::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* =====================================================================
   FINAL FIX 2026-10-03 — FOOTER INVARIABLE + LIGNE HEADER TOUS BREAKPOINTS
   ---------------------------------------------------------------------
   Ce bloc n'utilise volontairement PAS orientation: landscape.
   Ainsi, une réduction horizontale de la fenêtre ne peut plus :
   - faire passer le footer de 72px à une version compacte ;
   - supprimer la ligne néon sous le header lors du passage hamburger.
===================================================================== */


/* ---------------------------------------------------------------------
   FOOTER : 72px CONSTANTS QUELLE QUE SOIT LA LARGEUR
------------------------------------------------------------------------ */
:root,
html,
html.store-pwa-landscape,
html.edge-ios-browser,
html.edge-ios-browser.store-pwa-landscape,
html.ios-pwa,
html.ios-pwa-strict,
html.pwa-standalone,
html.ipad-landscape {
  --store-footer-h: 72px !important;
}

html body .store-footer,
html.store-pwa-landscape body .store-footer,
html.edge-ios-browser body .store-footer,
html.edge-ios-browser.store-pwa-landscape body .store-footer,
html.ios-pwa body .store-footer,
html.ios-pwa-strict body .store-footer,
html.pwa-standalone body .store-footer,
html.ipad-landscape body .store-footer {
  height:
    calc(
      72px
      + var(--store-safe-bottom, 0px)
    ) !important;

  min-height:
    calc(
      72px
      + var(--store-safe-bottom, 0px)
    ) !important;

  max-height:
    calc(
      72px
      + var(--store-safe-bottom, 0px)
    ) !important;

  padding-top: 0 !important;

  padding-bottom:
    var(--store-safe-bottom, 0px) !important;

  align-items: center !important;
  flex-shrink: 0 !important;

  box-sizing: border-box !important;
}

/* Réserve toujours la même hauteur sous le contenu. */
html body {
  padding-bottom:
    calc(
      72px
      + var(--store-safe-bottom, 0px)
      + 18px
    ) !important;
}

/* Pour les modes où <main> est le conteneur scrollable fixe,
   le bord inférieur reste lui aussi constant. */
html.edge-ios-browser body > main,
html.store-pwa-landscape body > main,
html.ios-pwa body > main,
html.ios-pwa-strict body > main,
html.pwa-standalone body > main,
html.ipad-landscape body > main {
  bottom:
    calc(
      72px
      + var(--store-safe-bottom, 0px)
    ) !important;
}


/* ---------------------------------------------------------------------
   LIGNE NEON : TOUJOURS SOUS LE HEADER
   Elle reste visible en desktop, hamburger, PWA et après changement
   d'orientation CSS. Elle n'appartient PAS aux liens du menu.
------------------------------------------------------------------------ */
html body .store-header,
html.store-pwa-landscape body .store-header,
html.edge-ios-browser body .store-header,
html.edge-ios-browser.store-pwa-landscape body .store-header,
html.ios-pwa body .store-header,
html.ios-pwa-strict body .store-header,
html.pwa-standalone body .store-header,
html.ipad-landscape body .store-header {
  overflow: visible !important;
  border-bottom: 0 !important;
}

html body .store-header::after,
html body .store-header:not(:has(.store-nav.show))::after,
html body .store-header:has(.store-nav.show)::after,
html body .store-header:has(.store-nav.active)::after,

html.store-pwa-landscape body .store-header::after,
html.store-pwa-landscape body .store-header:not(:has(.store-nav.show))::after,
html.store-pwa-landscape body .store-header:has(.store-nav.show)::after,
html.store-pwa-landscape body .store-header:has(.store-nav.active)::after,

html.edge-ios-browser body .store-header::after,
html.edge-ios-browser body .store-header:not(:has(.store-nav.show))::after,
html.edge-ios-browser body .store-header:has(.store-nav.show)::after,
html.edge-ios-browser body .store-header:has(.store-nav.active)::after,

html.edge-ios-browser.store-pwa-landscape body .store-header::after,
html.edge-ios-browser.store-pwa-landscape body .store-header:not(:has(.store-nav.show))::after,
html.edge-ios-browser.store-pwa-landscape body .store-header:has(.store-nav.show)::after,
html.edge-ios-browser.store-pwa-landscape body .store-header:has(.store-nav.active)::after,

html.ios-pwa body .store-header::after,
html.ios-pwa body .store-header:not(:has(.store-nav.show))::after,
html.ios-pwa body .store-header:has(.store-nav.show)::after,
html.ios-pwa body .store-header:has(.store-nav.active)::after,

html.ios-pwa-strict body .store-header::after,
html.ios-pwa-strict body .store-header:not(:has(.store-nav.show))::after,
html.ios-pwa-strict body .store-header:has(.store-nav.show)::after,
html.ios-pwa-strict body .store-header:has(.store-nav.active)::after,

html.pwa-standalone body .store-header::after,
html.pwa-standalone body .store-header:not(:has(.store-nav.show))::after,
html.pwa-standalone body .store-header:has(.store-nav.show)::after,
html.pwa-standalone body .store-header:has(.store-nav.active)::after,

html.ipad-landscape body .store-header::after,
html.ipad-landscape body .store-header:not(:has(.store-nav.show))::after,
html.ipad-landscape body .store-header:has(.store-nav.show)::after,
html.ipad-landscape body .store-header:has(.store-nav.active)::after {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: -1px !important;

  width: 100% !important;
  height: 2px !important;

  margin: 0 !important;
  padding: 0 !important;

  visibility: visible !important;
  opacity: 1 !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(138, 43, 226, .20) 7%,
      rgba(138, 43, 226, .78) 27%,
      rgba(199, 125, 255, 1) 50%,
      rgba(138, 43, 226, .78) 73%,
      rgba(138, 43, 226, .20) 93%,
      transparent 100%
    ) !important;

  border: 0 !important;

  box-shadow:
    0 1px 4px rgba(138, 43, 226, .82),
    0 3px 8px rgba(138, 43, 226, .30) !important;

  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  pointer-events: none !important;

  /* Au-dessus du panneau hamburger : la ligne reste visible
     même lorsque le menu est ouvert. */
  z-index: 2147483646 !important;
}


/* ---------------------------------------------------------------------
   SÉCURITÉ : AUCUNE LIGNE SOUS LES LIENS INDIVIDUELS
------------------------------------------------------------------------ */
.store-header > nav.store-nav > a::before,
.store-header > nav.store-nav > a::after,
.store-header > nav.store-nav > a:hover::before,
.store-header > nav.store-nav > a:hover::after,
.store-header > nav.store-nav > a.active::before,
.store-header > nav.store-nav > a.active::after,
.store-header > nav.store-nav > a:focus::before,
.store-header > nav.store-nav > a:focus::after,
.store-header > nav.store-nav > a:focus-visible::before,
.store-header > nav.store-nav > a:focus-visible::after {
  content: none !important;
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  visibility: hidden !important;
  opacity: 0 !important;
}

/* =====================================================================
   FINAL FIX 2026-10-03 — LIGNE FOOTER IDENTIQUE AU SITE PRINCIPAL
   ---------------------------------------------------------------------
   Reprend exactement la bordure supérieure cyan du footer principal :
   border-top: 1px solid rgba(0, 255, 255, 0.35)
===================================================================== */

html body .store-footer,
html.store-pwa-landscape body .store-footer,
html.edge-ios-browser body .store-footer,
html.edge-ios-browser.store-pwa-landscape body .store-footer,
html.ios-pwa body .store-footer,
html.ios-pwa-strict body .store-footer,
html.pwa-standalone body .store-footer,
html.ipad-landscape body .store-footer {
  border-top: 1px solid rgba(0, 255, 255, 0.35) !important;
}

/* =====================================================================
   FINAL FIX 2026-10-03 — TEXTE FOOTER BAS SUR SMARTPHONE
   ---------------------------------------------------------------------
   Garde le footer à 72px et place uniquement son contenu plus bas,
   juste au-dessus de la safe area, comme sur le site principal.
===================================================================== */

@media (max-width: 768px) {

  html body .store-footer,
  html.store-pwa-landscape body .store-footer,
  html.edge-ios-browser body .store-footer,
  html.edge-ios-browser.store-pwa-landscape body .store-footer,
  html.ios-pwa body .store-footer,
  html.ios-pwa-strict body .store-footer,
  html.pwa-standalone body .store-footer,
  html.ipad-landscape body .store-footer {
    /* Hauteur globale inchangée */
    height:
      calc(
        72px
        + var(--store-safe-bottom, 0px)
      ) !important;

    min-height:
      calc(
        72px
        + var(--store-safe-bottom, 0px)
      ) !important;

    max-height:
      calc(
        72px
        + var(--store-safe-bottom, 0px)
      ) !important;

    /* Texte placé dans la partie basse du footer */
    align-items: flex-end !important;

    padding-top: 0 !important;
    padding-right:
      max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom:
      calc(
        var(--store-safe-bottom, 0px)
        + 8px
      ) !important;
    padding-left:
      max(8px, env(safe-area-inset-left, 0px)) !important;

    box-sizing: border-box !important;
  }

  html body .store-footer .footer-left,
  html body .store-footer .footer-right,
  html.store-pwa-landscape body .store-footer .footer-left,
  html.store-pwa-landscape body .store-footer .footer-right,
  html.edge-ios-browser body .store-footer .footer-left,
  html.edge-ios-browser body .store-footer .footer-right,
  html.ios-pwa body .store-footer .footer-left,
  html.ios-pwa body .store-footer .footer-right,
  html.ios-pwa-strict body .store-footer .footer-left,
  html.ios-pwa-strict body .store-footer .footer-right,
  html.pwa-standalone body .store-footer .footer-left,
  html.pwa-standalone body .store-footer .footer-right,
  html.ipad-landscape body .store-footer .footer-left,
  html.ipad-landscape body .store-footer .footer-right {
    align-self: flex-end !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    line-height: 1.15 !important;
  }
}

/* =====================================================================
   FINAL FIX 2026-10-03 — FOOTER CENTRÉ VERTICALEMENT ET RESPONSIVE
   ---------------------------------------------------------------------
   - hauteur du footer conservée à 72px ;
   - texte centré verticalement ;
   - taille des textes adaptative selon la largeur ;
   - copyright à gauche / contact à droite ;
   - une seule ligne, y compris sur smartphone ;
   - safe area inférieure conservée.
===================================================================== */


/* ---------------------------------------------------------------------
   COMPORTEMENT GLOBAL
------------------------------------------------------------------------ */
html body .store-footer,
html.store-pwa-landscape body .store-footer,
html.edge-ios-browser body .store-footer,
html.edge-ios-browser.store-pwa-landscape body .store-footer,
html.ios-pwa body .store-footer,
html.ios-pwa-strict body .store-footer,
html.pwa-standalone body .store-footer,
html.ipad-landscape body .store-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  align-items: center !important;
  justify-content: space-between !important;

  height:
    calc(
      72px
      + var(--store-safe-bottom, 0px)
    ) !important;

  min-height:
    calc(
      72px
      + var(--store-safe-bottom, 0px)
    ) !important;

  max-height:
    calc(
      72px
      + var(--store-safe-bottom, 0px)
    ) !important;

  padding-top: 0 !important;
  padding-right:
    max(18px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom:
    var(--store-safe-bottom, 0px) !important;
  padding-left:
    max(18px, env(safe-area-inset-left, 0px)) !important;

  box-sizing: border-box !important;

  gap: clamp(8px, 1.2vw, 18px) !important;

  font-size: clamp(11px, 0.9vw, 16px) !important;
  line-height: 1.15 !important;
}


/* ---------------------------------------------------------------------
   BLOCS TEXTE
------------------------------------------------------------------------ */
html body .store-footer .footer-left,
html body .store-footer .footer-right,
html.store-pwa-landscape body .store-footer .footer-left,
html.store-pwa-landscape body .store-footer .footer-right,
html.edge-ios-browser body .store-footer .footer-left,
html.edge-ios-browser body .store-footer .footer-right,
html.ios-pwa body .store-footer .footer-left,
html.ios-pwa body .store-footer .footer-right,
html.ios-pwa-strict body .store-footer .footer-left,
html.ios-pwa-strict body .store-footer .footer-right,
html.pwa-standalone body .store-footer .footer-left,
html.pwa-standalone body .store-footer .footer-right,
html.ipad-landscape body .store-footer .footer-left,
html.ipad-landscape body .store-footer .footer-right {
  display: flex !important;
  align-items: center !important;

  align-self: center !important;

  width: auto !important;
  min-width: 0 !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;

  line-height: 1.15 !important;
}

.store-footer .footer-left {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.store-footer .footer-right {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  text-align: right !important;
}


/* ---------------------------------------------------------------------
   TABLETTE / FENÊTRE INTERMÉDIAIRE
------------------------------------------------------------------------ */
@media (max-width: 1080px) {

  html body .store-footer,
  html.store-pwa-landscape body .store-footer,
  html.edge-ios-browser body .store-footer,
  html.edge-ios-browser.store-pwa-landscape body .store-footer,
  html.ios-pwa body .store-footer,
  html.ios-pwa-strict body .store-footer,
  html.pwa-standalone body .store-footer,
  html.ipad-landscape body .store-footer {
    padding-right:
      max(14px, env(safe-area-inset-right, 0px)) !important;
    padding-left:
      max(14px, env(safe-area-inset-left, 0px)) !important;

    gap: clamp(6px, 1vw, 12px) !important;

    font-size: clamp(9.5px, 1.15vw, 13px) !important;
  }
}


/* ---------------------------------------------------------------------
   SMARTPHONE
   Même principe que le footer principal :
   texte plus petit à mesure que la fenêtre se rétrécit.
------------------------------------------------------------------------ */
@media (max-width: 768px) {

  html body .store-footer,
  html.store-pwa-landscape body .store-footer,
  html.edge-ios-browser body .store-footer,
  html.edge-ios-browser.store-pwa-landscape body .store-footer,
  html.ios-pwa body .store-footer,
  html.ios-pwa-strict body .store-footer,
  html.pwa-standalone body .store-footer,
  html.ipad-landscape body .store-footer {
    align-items: center !important;

    padding-top: 0 !important;
    padding-right:
      max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom:
      var(--store-safe-bottom, 0px) !important;
    padding-left:
      max(8px, env(safe-area-inset-left, 0px)) !important;

    gap: 6px !important;

    font-size: min(2.25vw, 10.5px) !important;
    line-height: 1.15 !important;
  }

  .store-footer .footer-left {
    font-size: min(2.18vw, 10.5px) !important;
    letter-spacing: -0.045em !important;
  }

  .store-footer .footer-right {
    font-size: min(2.05vw, 10px) !important;
    letter-spacing: -0.05em !important;
  }

  .store-footer a {
    white-space: nowrap !important;
  }
}


/* ---------------------------------------------------------------------
   TRÈS PETITS SMARTPHONES
------------------------------------------------------------------------ */
@media (max-width: 380px) {

  html body .store-footer,
  html.store-pwa-landscape body .store-footer,
  html.edge-ios-browser body .store-footer,
  html.ios-pwa body .store-footer,
  html.ios-pwa-strict body .store-footer,
  html.pwa-standalone body .store-footer {
    gap: 4px !important;

    padding-left:
      max(6px, env(safe-area-inset-left, 0px)) !important;
    padding-right:
      max(6px, env(safe-area-inset-right, 0px)) !important;
  }

  .store-footer .footer-left {
    font-size: min(2.05vw, 8.4px) !important;
    letter-spacing: -0.075em !important;
  }

  .store-footer .footer-right {
    font-size: min(1.95vw, 8px) !important;
    letter-spacing: -0.075em !important;
  }
}

/* =====================================================================
   FINAL FIX 2026-10-03 — HAUTEUR FOOTER MOBILE IDENTIQUE SITE PRINCIPAL
   ---------------------------------------------------------------------
   Reprend les valeurs finales du footer du site principal :
   - min-height: 52px
   - height: auto
   - padding vertical: 6px
   - safe area inférieure conservée
   - texte toujours centré verticalement
===================================================================== */

@media (max-width: 768px) {

  html body .store-footer,
  html.store-pwa-landscape body .store-footer,
  html.edge-ios-browser body .store-footer,
  html.edge-ios-browser.store-pwa-landscape body .store-footer,
  html.ios-pwa body .store-footer,
  html.ios-pwa-strict body .store-footer,
  html.pwa-standalone body .store-footer,
  html.ipad-landscape body .store-footer {

    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;

    padding:
      6px
      max(8px, env(safe-area-inset-right, 0px))
      calc(var(--store-safe-bottom, 0px) + 6px)
      max(8px, env(safe-area-inset-left, 0px)) !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 6px !important;

    box-sizing: border-box !important;

    font-size: min(2.25vw, 10.5px) !important;
    line-height: 1.15 !important;
  }

  html body .store-footer .footer-left,
  html body .store-footer .footer-right,
  html.store-pwa-landscape body .store-footer .footer-left,
  html.store-pwa-landscape body .store-footer .footer-right,
  html.edge-ios-browser body .store-footer .footer-left,
  html.edge-ios-browser body .store-footer .footer-right,
  html.ios-pwa body .store-footer .footer-left,
  html.ios-pwa body .store-footer .footer-right,
  html.ios-pwa-strict body .store-footer .footer-left,
  html.ios-pwa-strict body .store-footer .footer-right,
  html.pwa-standalone body .store-footer .footer-left,
  html.pwa-standalone body .store-footer .footer-right,
  html.ipad-landscape body .store-footer .footer-left,
  html.ipad-landscape body .store-footer .footer-right {

    display: flex !important;
    align-items: center !important;
    align-self: center !important;

    margin: 0 !important;

    line-height: 1.15 !important;
  }

  /* Même réserve basse que sur le site principal. */
  html body {
    padding-bottom:
      calc(
        62px
        + var(--store-safe-bottom, 0px)
      ) !important;
  }

  /* Si <main> est utilisé comme zone scrollable fixe,
     il s'arrête au-dessus du footer compact. */
  html.edge-ios-browser body > main,
  html.store-pwa-landscape body > main,
  html.ios-pwa body > main,
  html.ios-pwa-strict body > main,
  html.pwa-standalone body > main,
  html.ipad-landscape body > main {
    bottom:
      calc(
        52px
        + var(--store-safe-bottom, 0px)
      ) !important;
  }
}


/* Très petits smartphones : même compression horizontale
   que le footer du site principal, sans réduire davantage sa hauteur. */
@media (max-width: 380px) {

  html body .store-footer,
  html.store-pwa-landscape body .store-footer,
  html.edge-ios-browser body .store-footer,
  html.ios-pwa body .store-footer,
  html.ios-pwa-strict body .store-footer,
  html.pwa-standalone body .store-footer {

    gap: 4px !important;

    padding-left:
      max(6px, env(safe-area-inset-left, 0px)) !important;

    padding-right:
      max(6px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* =====================================================================
   FINAL FIX 2026-10-03 — LIGNE CYAN COLLÉE AU BORD DU FOOTER
   ---------------------------------------------------------------------
   La ligne n'est plus une bordure susceptible d'être affectée par
   le box-model : elle est placée exactement à top:0 du footer.
===================================================================== */

html body .store-footer,
html.store-pwa-landscape body .store-footer,
html.edge-ios-browser body .store-footer,
html.edge-ios-browser.store-pwa-landscape body .store-footer,
html.ios-pwa body .store-footer,
html.ios-pwa-strict body .store-footer,
html.pwa-standalone body .store-footer,
html.ipad-landscape body .store-footer {
  position: fixed !important;

  /* Évite toute double ligne ou décalage de bordure. */
  border-top: 0 !important;

  /* Nécessaire pour positionner précisément la ligne. */
  overflow: hidden !important;
}


/* Ligne cyan exactement sur le bord supérieur du footer */
html body .store-footer::before,
html.store-pwa-landscape body .store-footer::before,
html.edge-ios-browser body .store-footer::before,
html.edge-ios-browser.store-pwa-landscape body .store-footer::before,
html.ios-pwa body .store-footer::before,
html.ios-pwa-strict body .store-footer::before,
html.pwa-standalone body .store-footer::before,
html.ipad-landscape body .store-footer::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;

  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;

  width: 100% !important;
  height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: rgba(0, 255, 255, 0.35) !important;
  background-image: none !important;

  border: 0 !important;
  outline: 0 !important;

  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;

  z-index: 10 !important;
}

/* =====================================================================
   FINAL FIX 2026-10-03 — SUPPRESSION DÉFINITIVE ESPACE NOIR FOOTER
   ---------------------------------------------------------------------
   Supprime les ombres externes, le blur et le layer GPU qui pouvaient
   créer une bande sombre au-dessus de la ligne cyan sur smartphone.
   La ligne cyan reste exactement au bord supérieur réel du footer.
===================================================================== */

html body .store-footer,
html.store-pwa-landscape body .store-footer,
html.edge-ios-browser body .store-footer,
html.edge-ios-browser.store-pwa-landscape body .store-footer,
html.ios-pwa body .store-footer,
html.ios-pwa-strict body .store-footer,
html.pwa-standalone body .store-footer,
html.ipad-landscape body .store-footer {
  /* Aucun halo extérieur au-dessus du footer */
  box-shadow: none !important;

  /* Évite le flou qui peut créer une bande sombre autour du bord */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Évite les coutures de sous-pixel WebKit */
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;

  /* Le fond commence exactement au bord supérieur */
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, .96),
      rgba(22, 8, 42, .96),
      rgba(0, 0, 0, .96)
    ) !important;

  background-origin: border-box !important;
  background-clip: border-box !important;

  border-top: 0 !important;
  outline: 0 !important;

  margin-top: 0 !important;

  overflow: hidden !important;
}


/* Ligne cyan exactement sur le premier pixel du footer */
html body .store-footer::before,
html.store-pwa-landscape body .store-footer::before,
html.edge-ios-browser body .store-footer::before,
html.edge-ios-browser.store-pwa-landscape body .store-footer::before,
html.ios-pwa body .store-footer::before,
html.ios-pwa-strict body .store-footer::before,
html.pwa-standalone body .store-footer::before,
html.ipad-landscape body .store-footer::before {
  content: "" !important;
  display: block !important;

  position: absolute !important;
  inset: 0 0 auto 0 !important;

  width: 100% !important;
  height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: rgba(0, 255, 255, 0.35) !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
  -webkit-transform: none !important;

  pointer-events: none !important;
  z-index: 2147483647 !important;
}

/* =====================================================================
   FINAL FIX 2026-10-03 — ZONE CENTRALE COLLÉE AU FOOTER
   ---------------------------------------------------------------------
   Corrige la vraie source possible de la bande noire :
   - suppression de la marge basse de la dernière section ;
   - main descend jusqu'au bas du viewport ;
   - le footer recouvre le bas du main ;
   - la réserve pour le contenu est faite À L'INTÉRIEUR du main,
     donc aucune bande vide ne peut apparaître entre main et footer.
===================================================================== */

@media (max-width: 768px) {

  :root {
    /* Hauteur réellement occupée par le footer mobile.
       52px minimum, avec adaptation à la safe area iOS. */
    --store-mobile-footer-overlay-h:
      max(
        52px,
        calc(
          24px
          + var(--store-safe-bottom, 0px)
        )
      );
  }

  /* ----------------------------------------------------------
     DERNIÈRE SECTION DU MAIN
     Elle était encore à margin-bottom:110px.
  ---------------------------------------------------------- */
  html body main .contact-strip,
  html.store-pwa-landscape body main .contact-strip,
  html.edge-ios-browser body main .contact-strip,
  html.edge-ios-browser.store-pwa-landscape body main .contact-strip,
  html.ios-pwa body main .contact-strip,
  html.ios-pwa-strict body main .contact-strip,
  html.pwa-standalone body main .contact-strip,
  html.ipad-landscape body main .contact-strip {
    margin-bottom: 0 !important;
  }

  /* Pas de marge basse parasite sur le conteneur principal. */
  html body main,
  html.store-pwa-landscape body main,
  html.edge-ios-browser body main,
  html.edge-ios-browser.store-pwa-landscape body main,
  html.ios-pwa body main,
  html.ios-pwa-strict body main,
  html.pwa-standalone body main,
  html.ipad-landscape body main {
    margin-bottom: 0 !important;
  }

  /* ----------------------------------------------------------
     MODES OÙ MAIN EST FIXE / SCROLLABLE
     Le main descend maintenant jusqu'au bas de l'écran.
     Le footer, plus haut dans le z-index, vient se poser dessus.
  ---------------------------------------------------------- */
  html.edge-ios-browser body > main,
  html.store-pwa-landscape body > main,
  html.ios-pwa body > main,
  html.ios-pwa-strict body > main,
  html.pwa-standalone body > main,
  html.ipad-landscape body > main {
    bottom: 0 !important;

    /* Réserve interne pour que le dernier contenu ne passe
       jamais derrière le footer. */
    padding-bottom:
      var(--store-mobile-footer-overlay-h) !important;

    box-sizing: border-box !important;
  }

  /* ----------------------------------------------------------
     MODE MOBILE NORMAL
     Même logique : la réserve du footer ne doit pas créer
     une zone noire distincte sous le main.
  ---------------------------------------------------------- */
  html body {
    padding-bottom:
      var(--store-mobile-footer-overlay-h) !important;
  }

  /* Le footer reste au-dessus du main. */
  html body .store-footer,
  html.store-pwa-landscape body .store-footer,
  html.edge-ios-browser body .store-footer,
  html.edge-ios-browser.store-pwa-landscape body .store-footer,
  html.ios-pwa body .store-footer,
  html.ios-pwa-strict body .store-footer,
  html.pwa-standalone body .store-footer,
  html.ipad-landscape body .store-footer {
    z-index: 2147483000 !important;
  }
}

/* =====================================================================
   FINAL FIX 2026-10-03 — CENTRAGE VERTICAL RÉEL DU TEXTE FOOTER MOBILE
   ---------------------------------------------------------------------
   La safe area inférieure reste réservée au footer, mais ne décale plus
   visuellement le texte vers le haut.
===================================================================== */

@media (max-width: 768px) {

  html body .store-footer,
  html.store-pwa-landscape body .store-footer,
  html.edge-ios-browser body .store-footer,
  html.edge-ios-browser.store-pwa-landscape body .store-footer,
  html.ios-pwa body .store-footer,
  html.ios-pwa-strict body .store-footer,
  html.pwa-standalone body .store-footer,
  html.ipad-landscape body .store-footer {
    display: flex !important;
    align-items: center !important;

    /* Padding vertical symétrique pour un vrai centrage Flex.
       La safe area reste incluse dans la hauteur du footer. */
    padding-top: 6px !important;
    padding-bottom: 6px !important;

    box-sizing: border-box !important;
  }

  html body .store-footer .footer-left,
  html body .store-footer .footer-right,
  html.store-pwa-landscape body .store-footer .footer-left,
  html.store-pwa-landscape body .store-footer .footer-right,
  html.edge-ios-browser body .store-footer .footer-left,
  html.edge-ios-browser body .store-footer .footer-right,
  html.edge-ios-browser.store-pwa-landscape body .store-footer .footer-left,
  html.edge-ios-browser.store-pwa-landscape body .store-footer .footer-right,
  html.ios-pwa body .store-footer .footer-left,
  html.ios-pwa body .store-footer .footer-right,
  html.ios-pwa-strict body .store-footer .footer-left,
  html.ios-pwa-strict body .store-footer .footer-right,
  html.pwa-standalone body .store-footer .footer-left,
  html.pwa-standalone body .store-footer .footer-right,
  html.ipad-landscape body .store-footer .footer-left,
  html.ipad-landscape body .store-footer .footer-right {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    transform: none !important;
    -webkit-transform: none !important;
  }
}


/* Native browser layout replaces the old Edge internal viewport layout. */
html:root:root:root.pg-native-browser-scroll {
  --store-safe-bottom: var(--pg-stable-safe-bottom, 0px) !important;
}
html:root:root:root.pg-native-browser-scroll body {
  padding-bottom: 0 !important;
}
html:root:root:root.pg-native-browser-scroll body > main {
  padding-bottom: calc(96px + var(--pg-stable-safe-bottom, 0px)) !important;
}
html:root:root:root.pg-native-browser-scroll body > main > .store-hero {
  min-height: calc(100svh - var(--pg-browser-header-h, 90px)) !important;
}
html:root:root:root.pg-native-browser-scroll .store-header,
html:root:root:root.pg-native-browser-scroll .store-footer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the central layout independent of browser toolbar animation. */
html:root:root:root.pg-native-browser-scroll,
html:root:root:root.pg-native-browser-scroll body {
  min-height: var(--pg-stable-viewport-height, 100svh) !important;
  scroll-behavior: auto !important;
}
html:root:root:root.pg-native-browser-scroll body > main {
  scroll-behavior: auto !important;
}
html:root:root:root.pg-native-browser-scroll body > main > .store-hero {
  min-height: calc(var(--pg-stable-viewport-height, 100svh) - var(--pg-browser-header-h, 90px)) !important;
}