/* Mobile : hero lisible, contenu sous l’image et FAQ en une seule colonne */
.product-media,
.product-media img {
  background: #fff;
}

@media (max-width: 940px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 660px) {
  .hero {
    padding: 38px 0 50px;
    background: var(--cream);
  }
  .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero-intro"
      "hero-visual"
      "hero-support";
    gap: 0;
  }
  .hero-copy {
    display: contents;
  }
  .hero-intro {
    position: relative;
    z-index: 2;
    grid-area: hero-intro;
    width: 100%;
    min-height: 0;
  }
  .hero-intro .eyebrow {
    max-width: 200px;
    margin-bottom: 10px;
    font-size: .57rem;
    letter-spacing: .06em;
    line-height: 1.35;
  }
  .hero-intro .eyebrow::before {
    width: 18px;
  }
  .hero-intro h1 {
    max-width: 350px;
    font-size: clamp(2.65rem, 12.6vw, 3.65rem);
    line-height: .98;
    letter-spacing: -.065em;
  }
  .hero-visual {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    grid-area: hero-visual;
    width: min(100%, 350px);
    height: 350px;
    min-height: 350px;
    margin: 24px auto 0;
  }
  .hero-visual::before {
    top: 8px;
    right: -18px;
    width: 122%;
    height: 240px;
    border: 1px solid #eee9e1;
    background: #fff;
    opacity: 1;
    transform: none;
  }
  .hero-visual::after {
    display: none;
  }
  .hero-olivara {
    display: none;
  }
  .hero-card {
    top: 26px;
    right: 0;
    bottom: auto;
    width: 100%;
    padding: 6px;
    border: 1px solid #eee9e1;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 12px 25px rgba(16,40,59,.12);
  }
  .hero-card img {
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 13px;
    background: #fff;
    object-fit: contain;
  }
  .hero-sticker {
    top: 0;
    right: -9px;
    left: auto;
    bottom: auto;
    width: 68px;
    height: 68px;
    font-size: .46rem;
    transform: rotate(7deg);
  }
  .hero-sticker strong {
    font-size: .9rem;
  }
  .hero-support {
    position: relative;
    z-index: 2;
    grid-area: hero-support;
    width: 100%;
    margin-top: 16px;
    padding-top: 10px;
  }
  .hero-support .lead {
    max-width: none;
    margin-top: 0;
    font-size: .98rem;
    line-height: 1.65;
  }
  .hero .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
    margin-top: 20px;
  }
  .hero .hero-actions .btn {
    width: 100%;
    min-height: 53px;
  }
  .hero .micro-trust {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 20px;
    padding-top: 4px;
    font-size: .82rem;
  }
  .faq-grid {
    gap: 30px;
  }
}