/* MOUF — page d'accueil */
/* =========================================================
   HÉROS
   ========================================================= */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero-inner {
  position: relative;
  max-width: 1774px;
  margin: 0 auto;
  height: calc(433 * var(--u));
}
.hero-fabric {
  position: absolute;
  left: 0;
  top: calc(173 * var(--u));
  width: calc(292 * var(--u));
  z-index: 1;
  pointer-events: none;
}
.hero-comp {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  z-index: 2;
}
.hero-comp-m { display: none; }
.hero-text {
  position: relative;
  z-index: 3;
  padding: calc(47 * var(--u)) 0 0 calc(125 * var(--u));
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(91 * var(--u));
  line-height: calc(80 * var(--u));
  letter-spacing: -0.012em;
  color: var(--brown);
  white-space: nowrap;
}
.hero-title .line { display: block; }
.hero-title .mouf-title {
  width: calc(50 * var(--u));
  height: calc(37 * var(--u));
  margin-left: calc(16 * var(--u));
  color: var(--orange);
  vertical-align: -0.02em;
}
.btn-hero {
  margin: calc(18 * var(--u)) 0 0 calc(133 * var(--u));
  height: calc(55 * var(--u));
  padding: 0 calc(28 * var(--u)) 0 calc(30 * var(--u));
  font-size: max(13px, calc(20 * var(--u)));
  gap: calc(22 * var(--u));
}
.btn-hero .mouf, .btn-hero .btn-head { width: calc(40 * var(--u)); height: calc(29 * var(--u)); }

/* =========================================================
   FAVORIS
   ========================================================= */
.favorites { background: var(--cream); }
.favorites-inner {
  max-width: 1774px;
  margin: 0 auto;
  padding: calc(14 * var(--u)) calc(71 * var(--u)) calc(8 * var(--u));
}
.fav-title { font-size: max(18px, calc(33 * var(--u))); line-height: 1.1; }
.fav-title .mouf { width: calc(30 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(14 * var(--u)); min-width: 18px; min-height: 13px; }
.home-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(19 * var(--u));
  margin-top: calc(10 * var(--u));
}
.hproduct {
  background: var(--card-bg);
  border-radius: calc(18 * var(--u));
  box-shadow: 0 0 0 1px #efe4d8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.hproduct:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #efe4d8, 0 14px 30px -18px rgba(48,27,15,.35); }
.hproduct-media { position: relative; display: block; background: var(--card-img); aspect-ratio: 382 / 167; overflow: hidden; }
.hproduct-media img { width: 100%; height: 100%; object-fit: cover; }
.hproduct-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hproduct:hover .hproduct-media img { transform: scale(1.03); }
.tag {
  position: absolute;
  left: calc(13 * var(--u));
  top: calc(10 * var(--u));
  background: #fad39b;
  color: #d15214;
  font-size: max(8px, calc(11 * var(--u)));
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: calc(5 * var(--u)) calc(11 * var(--u));
  border-radius: 999px;
  line-height: 1.2;
}
.hproduct-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(62 * var(--u));
  min-height: 44px;
  padding: 0 calc(16 * var(--u));
  gap: 8px;
}
.hproduct-name { font-family: var(--font-body); font-size: max(12px, calc(17 * var(--u))); font-weight: 500; line-height: 1.15; }
.hproduct-price { font-size: max(12px, calc(17 * var(--u))); font-weight: 600; color: var(--price); margin-top: calc(5 * var(--u)); line-height: 1.15; }
.hproduct .pcard-cart {
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  min-width: 28px; min-height: 28px;
  border-radius: 50%;
  border: 1px solid #e9dccf;
  background: #fbf4ec;
  color: var(--brown);
  display: flex; align-items: center; justify-content: center;
  font-size: max(14px, calc(19 * var(--u)));
  flex: none;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.hproduct .pcard-cart:hover, .hproduct .pcard-cart.is-added { background: var(--orange-btn); border-color: var(--orange-btn); color: #fff; }
.hproduct .pcard-cart.is-added { transform: scale(1.12); }

/* =========================================================
   BANDEAU DÉFILANT
   ========================================================= */
.marquee {
  background: var(--orange);
  color: #faf1e6;
  --ring: var(--orange);
  height: calc(57 * var(--u));
  min-height: 34px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee-group { display: flex; align-items: center; flex: none; }
.marquee-group span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: max(9px, calc(15 * var(--u)));
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: calc(72 * var(--u));
  padding-right: calc(60 * var(--u));
}
.marquee-group .mouf { width: calc(34 * var(--u)); height: calc(25 * var(--u)); min-width: 18px; min-height: 13px; margin-right: calc(48 * var(--u)); }
.marquee-group span:first-child { padding-left: calc(72 * var(--u)); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* =========================================================
   À CHACUN SON PETIT MONDE
   ========================================================= */
.worlds { background: var(--cream-light); }
.worlds-inner {
  max-width: 1774px;
  margin: 0 auto;
  padding: calc(22 * var(--u)) calc(95 * var(--u)) calc(22 * var(--u));
}
.sec-title.big { font-size: max(30px, calc(69 * var(--u))); line-height: 1.04; }
.sec-title.big .mouf { width: calc(48 * var(--u)); height: calc(35 * var(--u)); margin-left: calc(16 * var(--u)); min-width: 22px; min-height: 16px; }
.worlds-title .l1 { margin-right: 0.24em; }

.cat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--u));
  margin-top: calc(20 * var(--u));
}
.cat-card {
  position: relative;
  border-radius: calc(28 * var(--u));
  overflow: hidden;
  aspect-ratio: 782 / 325;
  background: #faf0e4;
}
.cat-card img { width: 100%; height: 100%; object-fit: cover; }
.cat-content {
  position: absolute;
  left: calc(42 * var(--u));
  top: calc(72 * var(--u));
}
.cat-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: max(20px, calc(44 * var(--u)));
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--brown);
}
.btn-sm {
  margin-top: calc(21 * var(--u));
  height: calc(40 * var(--u));
  min-height: 26px;
  padding: 0 calc(22 * var(--u)) 0 calc(24 * var(--u));
  font-size: max(11px, calc(18 * var(--u)));
  gap: calc(18 * var(--u));
}
.btn-sm .mouf { width: calc(28 * var(--u)); height: calc(21 * var(--u)); min-width: 16px; min-height: 12px; }

.wide-card {
  position: relative;
  margin-top: calc(25 * var(--u));
  border-radius: calc(28 * var(--u));
  overflow: hidden;
  background: #f9eadb;
  aspect-ratio: 1585 / 400;
}
.wide-media { position: absolute; left: 0; top: 0; bottom: 0; width: 58.05%; }
.wide-media img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.wide-content {
  position: absolute;
  left: 58.2%;
  top: calc(17 * var(--u));
  right: calc(20 * var(--u));
}
.wide-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: max(20px, calc(49 * var(--u)));
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--brown);
}
.wide-title .mouf { color: var(--orange); width: calc(36 * var(--u)); height: calc(26 * var(--u)); margin-left: calc(14 * var(--u)); min-width: 18px; min-height: 13px; }
.wide-text {
  margin-top: calc(20 * var(--u));
  font-size: max(11px, calc(19 * var(--u)));
  line-height: 1.32;
  color: var(--brown);
}
.features {
  display: grid;
  grid-template-columns: repeat(3, calc(195 * var(--u)));
  margin-top: calc(22 * var(--u));
}
.features li { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.feat-ic { width: calc(42 * var(--u)); height: calc(42 * var(--u)); min-width: 20px; min-height: 20px; fill: none; stroke: var(--orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat-desktop { font-size: max(10px, calc(17 * var(--u))); line-height: 1.3; font-weight: 500; }
.feat-desktop b { font-weight: 700; }
.feat-mobile { display: none; }
.btn-md {
  margin-top: calc(30 * var(--u));
  height: calc(43 * var(--u));
  min-height: 26px;
  padding: 0 calc(22 * var(--u)) 0 calc(24 * var(--u));
  font-size: max(11px, calc(18 * var(--u)));
  gap: calc(18 * var(--u));
}
.btn-md .mouf { width: calc(30 * var(--u)); height: calc(22 * var(--u)); min-width: 16px; min-height: 12px; }

/* =========================================================
   LA VIE AVEC EUX
   ========================================================= */
.life { background: var(--cream); }
.life-inner {
  max-width: 1774px;
  margin: 0 auto;
  padding: calc(20 * var(--u)) calc(63 * var(--u)) calc(17 * var(--u));
  text-align: center;
}
.life-title { font-size: max(30px, calc(75 * var(--u))); }
.life-sub { margin-top: calc(3 * var(--u)); font-size: max(12px, calc(20 * var(--u))); color: var(--brown); }
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(16 * var(--u));
  margin-top: calc(14 * var(--u));
}
.gallery img { width: 100%; aspect-ratio: 400 / 319; object-fit: cover; border-radius: calc(28 * var(--u)); }
.life-caption {
  margin-top: calc(16 * var(--u));
  font-size: max(12px, calc(20 * var(--u)));
  display: flex; align-items: center; justify-content: center;
  gap: 0.3em;
}
.life-caption a { color: var(--orange); font-weight: 500; }
.life-caption a:hover { text-decoration: underline; }
.life-caption .mouf { color: var(--orange); width: calc(30 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(6 * var(--u)); min-width: 16px; min-height: 12px; }


@media (max-width: 819px) {
  /* Héros */
  .hero-inner { height: auto; padding-top: calc(21 * var(--u)); }
  .hero-fabric, .hero-comp { display: none; }
  .hero-text { padding: 0 0 0 calc(130 * var(--u)); }
  .hero-title { font-size: calc(121 * var(--u)); line-height: calc(105 * var(--u)); letter-spacing: -0.012em; }
  .hero-title .mouf-title { width: calc(65 * var(--u)); height: calc(48 * var(--u)); margin-left: calc(18 * var(--u)); }
  .btn-hero {
    position: relative;
    left: calc(-130 * var(--u));
    width: calc(496 * var(--u));
    height: calc(78 * var(--u));
    margin: calc(22 * var(--u)) auto 0 calc(222 * var(--u));
    padding: 0;
    font-size: calc(27 * var(--u));
    gap: calc(24 * var(--u));
    box-sizing: border-box;
  }
  .btn-hero .mouf, .btn-hero .btn-head { width: calc(48 * var(--u)); height: calc(35 * var(--u)); }
  .hero-comp-m { display: block; width: 100%; margin-top: calc(17 * var(--u)); }

  /* Favoris */
  .favorites-inner { padding: calc(23 * var(--u)) 0 calc(31 * var(--u)); }
  .fav-title { font-size: calc(52 * var(--u)); padding-left: calc(40 * var(--u)); }
  .fav-title .mouf { width: calc(50 * var(--u)); height: calc(37 * var(--u)); margin-left: calc(20 * var(--u)); }
  .home-products {
    display: flex;
    gap: calc(16 * var(--u));
    margin-top: calc(14 * var(--u));
    padding: 0 calc(41 * var(--u));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc(41 * var(--u));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .home-products::-webkit-scrollbar { display: none; }
  .hproduct {
    flex: 0 0 calc((100% - 16 * var(--u)) / 2);
    scroll-snap-align: start;
    border-radius: calc(28 * var(--u));
  }
  .hproduct-media { aspect-ratio: 410 / 235; }
  .hproduct .pcard-cart { width: calc(70 * var(--u)); height: calc(70 * var(--u)); font-size: calc(32 * var(--u)); background: #fbf4ec; color: var(--brown); border-color: #e9dccf; }
  .hproduct .pcard-cart .ic-plus { display: none; }
  .hproduct .pcard-cart .ic-cart { display: block; }
  .tag { display: none; }
  .hproduct-info { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(25 * var(--u)); }
  .hproduct-name { font-size: calc(26 * var(--u)); }
  .hproduct-price { font-size: calc(26 * var(--u)); margin-top: calc(8 * var(--u)); }
  .hproduct .pcard-cart { width: calc(70 * var(--u)); height: calc(70 * var(--u)); font-size: calc(32 * var(--u)); }

  /* Bandeau */
  .marquee { height: calc(67 * var(--u)); min-height: 0; }
  .marquee-group span { font-size: calc(22 * var(--u)); letter-spacing: .22em; padding-left: calc(118 * var(--u)); padding-right: calc(96 * var(--u)); }
  .marquee-group .mouf { width: calc(44 * var(--u)); height: calc(32 * var(--u)); margin-right: 0; }

  /* Petit monde */
  .worlds-inner { padding: calc(22 * var(--u)) calc(55 * var(--u)) calc(30 * var(--u)); }
  .sec-title.big { font-size: calc(72 * var(--u)); line-height: calc(72 * var(--u)); }
  .sec-title.big .mouf { width: calc(44 * var(--u)); height: calc(32 * var(--u)); margin-left: calc(16 * var(--u)); }
  .worlds-title { display: block; }
  .worlds-title .l1 { display: block; }
  .worlds-title .l1 { margin-right: 0; }
  .worlds-title .l2 { display: inline; }
  .cat-cards { grid-template-columns: 1fr; gap: calc(30 * var(--u)); margin-top: calc(30 * var(--u)); }
  .cat-card { aspect-ratio: 830 / 315; border-radius: calc(36 * var(--u)); }
  .cat-card + .cat-card { aspect-ratio: 830 / 308; }
  .cat-content { left: calc(50 * var(--u)); top: calc(50 * var(--u)); }
  .cat-card + .cat-card .cat-content { top: calc(60 * var(--u)); }
  .cat-title { font-size: calc(50 * var(--u)); line-height: calc(50 * var(--u)); }
  .btn-sm { margin-top: calc(30 * var(--u)); height: calc(45 * var(--u)); padding: 0 calc(24 * var(--u)) 0 calc(26 * var(--u)); font-size: calc(22 * var(--u)); gap: calc(20 * var(--u)); }
  .btn-sm .mouf { width: calc(34 * var(--u)); height: calc(25 * var(--u)); }

  .wide-card { aspect-ratio: auto; margin-top: calc(27 * var(--u)); border-radius: calc(36 * var(--u)); background: #faeee4; }
  .wide-media { position: relative; width: 100%; aspect-ratio: 830 / 345; }
  .wide-media img { -webkit-mask-image: none; mask-image: none; }
  .wide-content { position: static; padding: calc(10 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)); }
  .wide-title { font-size: calc(58 * var(--u)); line-height: calc(60 * var(--u)); padding-left: calc(120 * var(--u)); }
  .wide-title .mouf { width: calc(42 * var(--u)); height: calc(31 * var(--u)); margin-left: calc(14 * var(--u)); }
  .wide-text { padding-left: calc(120 * var(--u)); margin-top: calc(24 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(30 * var(--u)); }
  .features { grid-template-columns: repeat(3, 1fr); margin-top: calc(16 * var(--u)); text-align: center; }
  .features li { align-items: center; gap: calc(8 * var(--u)); }
  .feat-ic { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
  .feat-desktop { display: none; }
  .feat-mobile { display: block; font-size: calc(20 * var(--u)); line-height: calc(24 * var(--u)); }
  .feat-mobile b { display: block; font-size: calc(22 * var(--u)); font-weight: 700; margin-bottom: calc(6 * var(--u)); }
  .btn-md { display: flex; width: calc(413 * var(--u)); height: calc(55 * var(--u)); margin: calc(16 * var(--u)) auto 0; padding: 0; font-size: calc(26 * var(--u)); gap: calc(22 * var(--u)); }
  .btn-md .mouf { width: calc(40 * var(--u)); height: calc(29 * var(--u)); }

  /* La vie avec eux */
  .life-inner { padding: calc(24 * var(--u)) calc(60 * var(--u)) calc(12 * var(--u)); }
  .life-sub { margin-top: calc(10 * var(--u)); font-size: calc(24 * var(--u)); }
  .gallery { grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)) calc(20 * var(--u)); margin-top: calc(12 * var(--u)); }
  .gallery img { aspect-ratio: 400 / 325; border-radius: calc(32 * var(--u)); }
  .life-caption { margin-top: calc(24 * var(--u)); font-size: calc(24 * var(--u)); }
  .life-caption .mouf { width: calc(36 * var(--u)); height: calc(26 * var(--u)); }

}