/* Pages */

.section-head__main { display: grid; gap: 1.25rem; justify-items: start; }

/* ---------------------------------------------------------------- Accueil */

.intro__grid { display: grid; gap: 2.5rem; position: relative; }
.intro__title { max-width: 17ch; }
.intro__body { display: grid; gap: 1.25rem; max-width: 36rem; }
.intro__body .lead { color: var(--text); }
.intro__leaves { display: flex; align-items: flex-end; gap: 0.25rem; margin-bottom: 0.5rem; }
.intro__leaves .leaf { width: 3.2rem; height: auto; aspect-ratio: 100 / 150; }
.intro__leaves .leaf:nth-child(1) { transform: scaleX(-1) rotate(6deg); }
.intro__leaves .leaf:nth-child(2) { width: 4.6rem; }
.intro__leaves .leaf:nth-child(3) { width: 2.2rem; transform: rotate(24deg); }
@media (max-width: 899px) { .craft__visual .leaves { display: none; } }
@media (min-width: 900px) {
  .intro__grid { grid-template-columns: 1.3fr 1fr; align-items: end; column-gap: var(--gutter); }
}

/* Deux expertises : deux blocs d'univers côte à côte */
.expertises { display: grid; }
.expertise {
  position: relative;
  display: grid;
  gap: 2rem;
  align-content: start;
  justify-items: center;
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
  text-align: center;
  color: var(--text);
  background: var(--bg);
}
.expertise__media { width: min(100%, 24rem); }
.expertise__media .media__frame { aspect-ratio: 4 / 5; }
.expertise__num { font: 400 clamp(3rem, 2rem + 3vw, 5rem) / 1 var(--font-display); color: var(--u-accent); }
.expertise__title { display: grid; gap: 0.4rem; justify-items: center; text-align: center; }
.expertise__title .label { justify-content: center; color: var(--text); }
.expertise__text { max-width: 26ch; font: 400 var(--fs-h3) / 1.25 var(--font-display); text-align: center; color: var(--heading); }
.expertise .chips { justify-content: center; max-width: 30rem; }
@media (min-width: 1200px) {
  .expertise { container-type: inline-size; }
  .expertise .chips { flex-wrap: nowrap; max-width: none; gap: 0.35em; font-size: clamp(0.75rem, 2.3cqi, var(--fs-small)); }
  .expertise .chips li { padding: 0.4em 0.8em; font-size: inherit; white-space: nowrap; }
}
.expertise .chips li { color: var(--text); border-color: var(--line); }
@media (min-width: 900px) {
  .expertises { grid-template-columns: 1fr 1fr; }
}

/* Spa, hôtels et resorts : la part haut de gamme mise en avant sur l'accueil */
.spa-home__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.spa-home__body { display: grid; gap: 1.6rem; justify-items: start; }
.spa-home__body .lead { max-width: 38ch; color: var(--text-soft); }
.spa-home__range { display: grid; width: 100%; }
.spa-home__range li { display: grid; gap: 0.25rem; padding: 1rem 0; border-top: 1.5px solid var(--line); }
.spa-home__range li:last-child { border-bottom: 1.5px solid var(--line); }
.spa-home__range h3 { font: 400 1.4rem / 1.2 var(--font-display); color: var(--u-text); }
.spa-home__range p { color: var(--text-soft); }
.spa-home__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 0.5rem; }
.spa-home__main { width: min(100%, 32rem); justify-self: center; }
.spa-home__main .media__frame { aspect-ratio: 4 / 5; }
.spa-home__row { display: grid; gap: var(--gap); margin-top: clamp(3rem, 6vw, 5rem); }
.spa-home__wide .media__frame { aspect-ratio: 16 / 9; }
.spa-home__side .media__frame { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .spa-home__grid { grid-template-columns: 1.05fr 1fr; }
  .spa-home__row { grid-template-columns: 1.55fr 1fr; align-items: end; }
}

/* Made by Oui Madame : mosaïque de formes */
.mosaic { display: grid; gap: clamp(2rem, 4vw, 3.5rem) var(--gap); }
.mosaic__item .media__frame { border-radius: var(--radius); }
.mosaic__item--1 .media__frame, .mosaic__item--5 .media__frame { border-radius: var(--arch); aspect-ratio: 4 / 5; }
.mosaic__item--2 .media__frame, .mosaic__item--6 .media__frame { aspect-ratio: 1; }
.mosaic__item--3 .media__frame, .mosaic__item--7 .media__frame { aspect-ratio: 3 / 2; }
.mosaic__item--4 .media__frame { aspect-ratio: 3 / 2; }
@media (max-width: 899px) {
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mosaic__item--1, .mosaic__item--3, .mosaic__item--4, .mosaic__item--7 { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .mosaic__item--1 { grid-column: 1 / span 4; }
  .mosaic__item--2 { grid-column: 5 / span 3; margin-top: clamp(6rem, 12vw, 11rem); }
  .mosaic__item--3 { grid-column: 8 / span 5; margin-top: clamp(2rem, 4vw, 4rem); }
  .mosaic__item--4 { grid-column: 2 / span 5; }
  .mosaic__item--5 { grid-column: 8 / span 4; margin-top: clamp(-10rem, -10vw, -5rem); }
  .mosaic__item--6 { grid-column: 1 / span 3; margin-top: clamp(-4rem, -4vw, -2rem); }
  .mosaic__item--7 { grid-column: 4 / span 5; }
}

/* Savoir-faire */
.craft__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; position: relative; }
.craft__visual { position: relative; }
.craft__media { width: min(100%, 30rem); }
.craft__media .media__frame { aspect-ratio: 4 / 5; }
.craft__visual .leaves { right: 0; bottom: 10%; width: 8rem; height: 14rem; }
.craft__body { display: grid; gap: 1.75rem; justify-items: start; }
.craft__body .lead { max-width: 34ch; }
@media (min-width: 900px) {
  .craft__grid { grid-template-columns: 1fr 1fr; }
}

.pledges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin-top: clamp(4rem, 8vw, 6.5rem);
}
.pledge { display: grid; gap: 0.75rem; align-content: start; padding: 1.75rem 1.5rem; border-radius: var(--radius); background: var(--c-ivory); }
.pledge__num { font: 400 2.25rem / 1 var(--font-display); color: var(--c-copper-deep); }
.pledge__title { font: 700 0.78rem / 1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-brown); }
.pledge p { color: var(--c-soft); }

/* L'atelier : bleu-gris du fauteuil */
.atelier__head { display: grid; gap: 2rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.atelier__head .lead { max-width: 38ch; }
.atelier__wide .media__frame { aspect-ratio: 21 / 9; border-radius: var(--radius); }
.atelier__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--gap); }
.atelier__row .media__frame { aspect-ratio: 4 / 5; border-radius: var(--arch); }
.atelier__row .media__caption { justify-content: center; }
.atelier__row .media__meta { color: var(--c-night); font-size: 0.72rem; }
@media (min-width: 900px) {
  .atelier__head { grid-template-columns: 1fr 1fr; align-items: end; column-gap: var(--gutter); }
}
@media (max-width: 699px) {
  .atelier__wide .media__frame { aspect-ratio: 4 / 3; }
  .atelier__row { gap: 0.6rem; }
}

/* Particuliers et professionnels */
.pro__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.pro__body { display: grid; gap: 1.75rem; justify-items: start; }
.pro__body .lead { max-width: 36ch; }
.pro__media { width: min(100%, 30rem); justify-self: center; }
.pro__media .media__frame { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .pro__grid { grid-template-columns: 1.1fr 1fr; }
}

/* ------------------------------------------------------------- Menuiserie */

.idea__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.idea__body { display: grid; gap: 2rem; justify-items: start; }
.idea__list { display: grid; gap: 0.6rem; width: 100%; max-width: 30rem; }
.idea__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  font: 400 clamp(1.25rem, 1rem + 0.8vw, 1.7rem) / 1.2 var(--font-display);
  color: var(--c-ink);
  background: var(--c-ivory);
}
.idea__list li span { font: 700 0.7rem / 1 var(--font-sans); letter-spacing: 0.14em; color: var(--c-water-deep); }
.idea__answer { max-width: 34ch; }
.idea__media { width: min(100%, 28rem); justify-self: center; }
.idea__media .media__frame { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .idea__grid { grid-template-columns: 1.1fr 1fr; }
}

.pieces .marquee__track { align-items: stretch; gap: 1rem; padding-right: 1rem; }
.pieces .marquee__item { display: flex; opacity: 1; }
.piece {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  width: clamp(14rem, 22vw, 17rem);
  padding: 1.75rem 1.5rem 2rem;
  border-radius: var(--radius);
  background: var(--c-ivory);
}
.piece h3 { margin-top: 0.75rem; font: 400 clamp(1.4rem, 1.1rem + 0.7vw, 1.75rem) / 1.1 var(--font-display); color: var(--heading); }
.piece p { font-size: 0.95rem; color: var(--text-soft); }
.furniture-icon { width: 3.5rem; height: 3.5rem; fill: none; stroke: var(--c-copper-deep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }


/* -------------------------------------------------------------------- Spa */

.accroche__grid { display: grid; gap: 2.5rem; }
.accroche__text { max-width: 22ch; font: 400 var(--fs-h2) / 1.08 var(--font-display); color: var(--heading); }
.accroche__body { display: grid; gap: 1.25rem; align-content: end; max-width: 34rem; }
@media (min-width: 900px) {
  .accroche__grid { grid-template-columns: 1.3fr 1fr; column-gap: var(--gutter); }
}

.audiences__grid { display: grid; gap: clamp(3rem, 6vw, 4rem) var(--gap); }
.audience { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.audience__media { width: 100%; margin-bottom: 0.75rem; }
.audience__media .media__frame { aspect-ratio: 4 / 5; }
.audience .lead { max-width: 30ch; }
@media (min-width: 800px) {
  .audiences__grid { grid-template-columns: 1fr 1fr; }
  .audience:nth-child(2) { margin-top: clamp(5rem, 10vw, 9rem); }
}

.range__grid { display: grid; gap: clamp(3rem, 5vw, 2.5rem) var(--gap); }
.range__item { display: grid; gap: 1rem; align-content: start; }
.range__item .media__frame { aspect-ratio: 4 / 5; }
.range__item .h3 { margin-top: 0.5rem; }
.range__item ul { display: grid; gap: 0.5rem; margin-top: 0.25rem; }
.range__item li { position: relative; padding-left: 1.4rem; color: var(--text-soft); }
.range__item li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--u); }
@media (min-width: 900px) {
  .range__grid { grid-template-columns: repeat(3, 1fr); }
  .range__item:nth-child(2) { margin-top: clamp(3rem, 6vw, 5rem); }
}

.bespoke__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.bespoke__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.5rem; margin-top: 2rem; }
.bespoke__list li { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.1rem; border-radius: 999px; background: var(--c-ivory); font-weight: 500; color: var(--c-ink); }
.bespoke__list li span { font: 400 1.1rem / 1 var(--font-display); color: var(--u-text); flex: none; }
.essences { display: grid; gap: 1.5rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--arch); background: var(--c-ivory); text-align: center; justify-items: center; }
.essences .media { width: min(100%, 22rem); }
.essences .media__frame { aspect-ratio: 1; border-radius: 50%; }
.essences .chips { justify-content: center; }
.essences p { max-width: 30ch; color: var(--c-soft); }
@media (min-width: 900px) {
  .bespoke__grid { grid-template-columns: 1.2fr 1fr; }
  .essences { padding-top: clamp(3rem, 5vw, 4.5rem); }
}

.included__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.included__item { display: grid; gap: 0.75rem; align-content: start; padding: 1.75rem 1.5rem; border-radius: var(--radius); background: var(--c-ivory); color: var(--c-ink); }
.included__item h3 { font: 400 1.35rem / 1.2 var(--font-display); color: var(--c-brown); }

.proof { padding-bottom: 0; }
.proof .media__frame { aspect-ratio: 21 / 9; border-radius: var(--radius); }
@media (max-width: 699px) { .proof .media__frame { aspect-ratio: 4 / 3; } }

.hospitality__grid { display: grid; gap: 3rem var(--gutter); }
.hospitality__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.75rem var(--gap); }
.hospitality__list li { display: grid; gap: 0.4rem; padding-top: 1.1rem; border-top: 1.5px solid var(--line); }
.hospitality__list h3 { font: 700 0.76rem / 1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--u-accent); }
.hospitality__list p { color: var(--text-soft); }
@media (min-width: 1000px) {
  .hospitality__grid { grid-template-columns: 1fr 1.6fr; }
}

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: clamp(3.5rem, 7vw, 5rem); }
.figure { display: grid; gap: 0.75rem; align-content: start; padding: 1.75rem 1.5rem 2rem; border-radius: var(--radius); text-align: center; color: var(--c-ink); background: var(--c-ivory); }
.figure strong { font: 400 clamp(2.5rem, 1.5rem + 2.5vw, 3.75rem) / 1 var(--font-display); color: var(--u-text); }
.figure span { font-size: 0.95rem; color: var(--c-soft); }
.hospitality__quote { max-width: 30ch; margin: clamp(3.5rem, 7vw, 5rem) auto 0; text-align: center; font: 400 var(--fs-h3) / 1.3 var(--font-display); color: var(--heading); }
.hospitality__refs { display: grid; gap: 1.5rem; margin-top: clamp(3.5rem, 7vw, 5rem); }
.hospitality__refs .clients__item { color: var(--c-night); background: rgb(248 247 242 / 0.55); }

.why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.why__item { display: grid; gap: 0.75rem; align-content: start; padding: 1.75rem 1.5rem 2rem; border-radius: var(--radius); background: var(--c-ivory); color: var(--c-ink); }
.why__item h3 { font: 400 1.45rem / 1.15 var(--font-display); color: var(--c-brown); }
.why__item p { color: var(--c-soft); }

/* ---------------------------------------------------------------- Contact */

.contact__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.contact__intro { display: grid; gap: 1.5rem; align-content: start; justify-items: start; }
.contact__intro .lead { max-width: 30ch; color: var(--c-soft); }
.contact__intro .h1 em { color: var(--c-orange); }
.coords { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.25rem var(--gap); width: 100%; margin-top: 1rem; padding-top: 1.75rem; border-top: 1.5px solid var(--line); }
.coords dt { margin-bottom: 0.3rem; }
.coords a { border-bottom: 1.5px solid var(--line); }
.coords a:hover { border-color: var(--c-brown); }
.contact__visual { position: relative; width: min(100%, 22rem); margin-top: 1rem; }
.contact__visual .media__frame { aspect-ratio: 4 / 5; }
.contact__form { padding: clamp(2rem, 5vw, 3.5rem); border-radius: 2rem; background: var(--c-ivory); }
@media (min-width: 1000px) {
  .contact__grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .contact__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}
@media (max-width: 999px) {
  .contact__visual { display: none; }
}

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 599px) {
  .intro__leaves .leaf { width: 2rem; }
  .intro__leaves .leaf:nth-child(2) { width: 2.8rem; }
  .intro__leaves .leaf:nth-child(3) { width: 1.4rem; }

  .expertise__media { width: min(72%, 24rem); }

  .mosaic__item--3 { grid-column: auto; }
  .mosaic__item--2 .media__frame, .mosaic__item--3 .media__frame, .mosaic__item--6 .media__frame { aspect-ratio: 4 / 5; }

  .pledges { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .pledge { padding: 1.25rem 1rem; }
  .pledge__title { letter-spacing: 0.08em; }
}