/* Les styles existants de la boutique restent inchangés. */
.banniere-echoppe {
  height: clamp(170px, 25vw, 280px);
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--ligne, rgba(217, 180, 90, .22));
  border-radius: 14px;
  background: var(--carte, #111c3c);
}
.banniere-echoppe img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
@media (max-width: 560px) {
  .banniere-echoppe { height: auto; aspect-ratio: 1672 / 940; margin-bottom: 20px; }
}
.hero.hero--echoppe { min-height: 460px; overflow: hidden; }
.hero--echoppe > .banniere-echoppe {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.hero--echoppe > .banniere-echoppe img { object-position: center 30%; }
.hero--echoppe > .banniere-echoppe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080c1ae8 0%, #080c1ab0 34%, #080c1a38 66%, transparent 100%);
}
.hero--echoppe .hero-txt { max-width: 590px; }
.hero--echoppe .hero-perso { visibility: hidden; }
@media (max-width: 900px) {
  .hero.hero--echoppe { min-height: 410px; }
  .hero--echoppe > .banniere-echoppe img { object-position: 65% 30%; }
  .hero--echoppe .hero-txt { max-width: 510px; }
}
@media (max-width: 560px) {
  .hero.hero--echoppe { min-height: 430px; align-items: flex-end; }
  .hero--echoppe > .banniere-echoppe::after {
    background: linear-gradient(180deg, #080c1a08, #080c1a33 20%, #080c1ad9 60%, #080c1af5);
  }
  .hero--echoppe .hero-inner { padding: 150px 24px 26px; }
}

/* Le décor continue derrière les offres et disparaît sans bord visible. */
.app.app--echoppe-fondu {
  isolation: isolate;
}
.app--echoppe-fondu > .topbg { display: none; }
.app--echoppe-fondu .hero-txt {
  position: relative;
  isolation: isolate;
}
.app--echoppe-fondu .hero-txt::before {
  content: '';
  position: absolute;
  inset: -20px -24px;
  z-index: -1;
  border: 1px solid rgba(217, 180, 90, .48);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(46, 33, 21, .97), rgba(25, 20, 17, .96));
  box-shadow: 0 10px 30px #0005, inset 0 1px 0 #f4d88814;
  pointer-events: none;
}
.app--echoppe-fondu .promo {
  background: linear-gradient(135deg, rgba(62, 45, 24, .97), rgba(33, 26, 19, .96));
}
.app--echoppe-fondu > .banniere-echoppe--fondu {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 0;
  height: clamp(740px, 62vw, 1060px);
  margin: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  pointer-events: none;
  background: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 32%, #000c 48%, #0006 68%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 0%, #000 32%, #000c 48%, #0006 68%, transparent 98%);
}
.banniere-echoppe--fondu img { object-position: center top; }
.banniere-echoppe--fondu::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #191610c9, #19161085 36%, #19161012 67%, #19161026),
    linear-gradient(180deg, #19161012, transparent 25%, #19161070 70%, #191610);
}
@media (max-width: 900px) {
  .banniere-echoppe--fondu img { object-position: 62% top; }
}
@media (max-width: 560px) {
  .app--echoppe-fondu .hero-txt::before { inset: -16px -12px; }
  .app--echoppe-fondu > .banniere-echoppe--fondu { top: 110px; height: 760px; }
  .banniere-echoppe--fondu img { object-position: 65% top; }
  .banniere-echoppe--fondu::after {
    background: linear-gradient(180deg, #1916108c, #191610a8 15%, #191610ba 40%, #191610ed 80%, #191610);
  }
}