/* ==========================================================
   MAISON JADEM — ACCUEIL / SECTIONS
   ========================================================== */


/* ==========================================================
   SIGNATURE
   ========================================================== */

.signature{
  padding:80px 0 90px;
}

.signature-inner{
  text-align:center;
}

.signature blockquote{
  max-width:1000px;
  margin:25px auto 0;

  font-family:var(--font-display);
  font-size:clamp(54px,7vw,98px);
  line-height:1.03;
}

.signature strong{
  display:block;
  margin-top:18px;

  font-weight:400;
  color:var(--color-champagne);
}


/* ==========================================================
   COLLECTION
   ========================================================== */

.collection{
  padding:130px 0 150px;
  background:#fff;
}

.product-feature{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:80px;
  align-items:end;
}

.product-image{
  min-height:680px;
  overflow:hidden;
  background:var(--color-travertine);
}

.product-image img{
  width:100%;
  height:100%;
  min-height:680px;
  object-fit:cover;
}

.product-copy{
  padding-bottom:30px;
}

.product-copy h3{
  margin:10px 0 18px;
  font-size:68px;
  line-height:1;
}

.product-copy p{
  max-width:430px;

  font-size:13px;
  line-height:1.9;
  color:var(--muted);
}

.product-copy strong{
  display:block;
  margin:24px 0;

  font-family:var(--font-display);
  font-size:30px;
  font-weight:400;
  color:var(--color-champagne);
}

.collection .product-feature + .product-feature{
  margin-top:130px;
  padding-top:130px;

  border-top:1px solid var(--line);
}


/* Variante inversée */
.product-feature-reverse{
  grid-template-columns:minmax(280px,.55fr) minmax(0,1.45fr);
}

.product-feature-reverse .product-image{
  grid-column:2;
  grid-row:1;
}

.product-feature-reverse .product-copy{
  grid-column:1;
  grid-row:1;
}


/* ==========================================================
   PERSONNALISATION
   ========================================================== */

.personalisation{
  padding:150px 0;
  background:var(--color-travertine);
}

.personalisation-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:90px;
  align-items:center;
}

.personalisation-image{
  min-height:680px;
  overflow:hidden;
}

.personalisation-image img{
  width:100%;
  height:100%;
  min-height:680px;
  object-fit:cover;
}

.personalisation-copy p{
  max-width:520px;
  margin:28px 0 34px;

  font-size:14px;
  line-height:2;
  color:var(--muted);
}


/* ==========================================================
   NOTRE HISTOIRE
   ========================================================== */

.story{
  padding:160px 0;
}

.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
}

.story-copy{
  padding-top:45px;
}

.story-copy p{
  margin-bottom:24px;

  font-size:14px;
  line-height:2.05;
  color:var(--muted);
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media(max-width:1000px){

  .signature{
    padding:70px 0;
  }

  .collection{
    padding:100px 0;
  }

  .product-feature,
  .product-feature-reverse{
    grid-template-columns:1fr;
    gap:40px;
  }

  .product-feature-reverse .product-image,
  .product-feature-reverse .product-copy{
    grid-column:auto;
    grid-row:auto;
  }

  .product-image,
  .product-image img{
    min-height:520px;
  }

  .product-copy h3{
    font-size:54px;
  }

  .personalisation{
    padding:100px 0;
  }

  .personalisation-grid{
    grid-template-columns:1fr;
    gap:50px;
  }

  .personalisation-image,
  .personalisation-image img{
    min-height:520px;
  }

  .story{
    padding:100px 0;
  }

  .story-grid{
    grid-template-columns:1fr;
    gap:45px;
  }

  .story-copy{
    padding-top:0;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:650px){

  .signature{
    padding:55px 0;
  }

  .signature blockquote{
    font-size:clamp(42px,12vw,62px);
  }

  .collection{
    padding:75px 0;
  }

  .product-image,
  .product-image img{
    min-height:420px;
  }

  .product-copy h3{
    font-size:46px;
  }

  .personalisation{
    padding:75px 0;
  }

  .personalisation-image,
  .personalisation-image img{
    min-height:420px;
  }

  .story{
    padding:75px 0;
  }
}