/* ==========================================================================
   KILDE — fiches matière
   Complément à kilde.css et univers.css. Une matière = une page courte :
   ce qu'elle est, comment elle se fait, ce qu'elle donne à sentir.
   ========================================================================== */

/* ---------- Hero de matière : la matière occupe tout ---------- */

.m-hero {
  position: relative;
  min-height: 82svh;
  display: flex; align-items: flex-end;
  color: var(--creme);
  background: var(--nuit-2);
  overflow: clip;
}
.m-hero-media { position: absolute; inset: -6% 0; }
.m-hero-media img,
.m-hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--cadre, center);
  will-change: transform;
}
.m-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(26, 42, 34, .90) 0%, rgba(26, 42, 34, .42) 34%, rgba(26, 42, 34, .10) 62%, rgba(26, 42, 34, .18) 100%),
    linear-gradient(to bottom, rgba(26, 42, 34, .72) 0%, rgba(26, 42, 34, .34) 16%, transparent 30%);
}
.m-hero-inner {
  position: relative; z-index: 2;
  width: min(1380px, 100%); margin-inline: auto;
  padding: 11rem var(--gutter) clamp(3.5rem, 9vh, 6rem);
}
.m-chiffre {
  display: block;
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1;
  color: rgba(245, 240, 232, .5);
  margin-bottom: .8rem;
}
.m-hero h1 { max-width: 14ch; margin: 0 0 1.4rem; text-wrap: balance; }
.m-hero .lead { max-width: 44ch; color: rgba(245, 240, 232, .88); }
/* Bouton de pause quand la matière est filmée (fiche crème) */
.m-hero .media-pause { left: var(--gutter); bottom: 2rem; }

/* ---------- Ce que c'est ---------- */

.m-definition { background: var(--creme); }
.m-definition .cadre {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
}
.m-definition .m-exergue {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.45;
  letter-spacing: -.008em; max-width: 22ch;
}
.m-definition p + p { margin-top: 1.3rem; }
.m-definition .m-corps p { color: var(--encre-2); max-width: 48ch; }
.m-definition .m-corps strong { color: var(--encre); font-weight: 500; }

/* ---------- Comment elle se fait ---------- */

.m-fabrique { background: var(--creme-2); }
.m-etapes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 4rem);
}
.m-etape { border-top: 1px solid rgba(74, 112, 96, .28); padding-top: 1.3rem; }
.m-etape .m-num {
  font-family: var(--f-serif-it); font-style: italic; font-weight: 400;
  font-size: .92rem; color: var(--framboise-t);
}
.m-etape h3 {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem); margin: .45rem 0 .6rem;
}
.m-etape p { color: var(--encre-2); font-size: .96rem; max-width: 34ch; }

/* ---------- Ce qu'on en ressent : les notes sensorielles ---------- */

.m-sens { background: var(--nuit); color: var(--creme); }
.m-sens .section-tete .note { color: rgba(245, 240, 232, .6); }
.m-notes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2.5rem, 7vw, 7rem);
  border-top: 1px solid rgba(245, 240, 232, .16);
}
.m-note {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1.5rem;
  align-items: baseline;
  padding: 1.5rem .2rem;
  border-bottom: 1px solid rgba(245, 240, 232, .16);
}
.m-note dt {
  font-family: var(--f-sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--framboise);
}
.m-note dd { margin: 0; color: rgba(245, 240, 232, .84); font-size: .98rem; }

/* ---------- Où la travailler ---------- */

.m-atelier { background: var(--creme); }
.m-atelier .cadre {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.m-atelier-photo {
  padding: .65rem; border-radius: var(--r-l);
  background: rgba(74, 112, 96, .1);
  border: 1px solid rgba(74, 112, 96, .16);
}
.m-atelier-photo .cadre-photo {
  border-radius: calc(var(--r-l) - .65rem); overflow: clip; aspect-ratio: 4 / 3;
}
.m-atelier-photo .cadre-photo img { border-radius: inherit; }
.m-atelier-photo img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.m-atelier p { max-width: 46ch; color: var(--encre-2); margin-bottom: 1.2rem; }
.m-atelier .btn { margin-top: .8rem; }

/* ---------- Les autres matières ---------- */

.m-autres { background: var(--creme-2); }
.m-grille {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .9rem;
}
.m-vignette {
  position: relative; display: block;
  aspect-ratio: 3 / 4; overflow: clip;
  border-radius: var(--r-m);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
  will-change: transform;
}
.m-vignette:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.m-vignette img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease);
}
.m-vignette:hover img { transform: scale(1.11); }
.m-vignette::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to top, rgba(26, 42, 34, .82) 0%, rgba(26, 42, 34, .18) 52%, rgba(26, 42, 34, .08) 100%);
}
.m-vignette span {
  position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: .95rem;
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(.95rem, 1.3vw, 1.15rem); line-height: 1.2;
  color: var(--creme);
}
.m-vignette em {
  display: block; font-family: var(--f-sans); font-style: normal;
  font-size: .55rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(245, 240, 232, .6);
  margin-bottom: .3rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .m-definition .cadre { grid-template-columns: 1fr; }
  .m-etapes { grid-template-columns: 1fr; gap: 1.8rem; }
  .m-atelier .cadre { grid-template-columns: 1fr; }
  .m-atelier-photo { max-width: 30rem; }
  .m-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .m-hero-inner { padding-top: 8.5rem; }
  .m-hero-media::after {
    background:
      linear-gradient(to top, rgba(26, 42, 34, .92) 0%, rgba(26, 42, 34, .58) 38%, rgba(26, 42, 34, .40) 66%, rgba(26, 42, 34, .58) 100%);
  }
  .m-notes { grid-template-columns: 1fr; }
  .m-note { grid-template-columns: 5.5rem 1fr; gap: 1rem; }
  .m-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}