/* Sols en résine monochrome */
[data-page="monochrome"] .h2,
[data-page="monochrome"] .cta-final__title { font-weight: 600; }
[data-page="monochrome"] .h2 { font-size: clamp(34px, 3.7vw, 52px); }
[data-page="monochrome"] .section-head .h2 { max-width: 640px; }

/* --------------------------------------------------------------------------
   Hero clair : titre en trois temps + grand visuel
   -------------------------------------------------------------------------- */
.mono-hero { padding-top: 48px; padding-bottom: 0; }
.mono-hero .breadcrumb { margin-bottom: clamp(48px, 6.1vw, 88px); }
.mono-hero .breadcrumb [aria-current="page"] { font-weight: 600; }
.mono-hero__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 40px 64px;
  align-items: end;
}
.mono-hero__title {
  font-size: clamp(54px, 7.5vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.mono-hero__aside { padding-bottom: 12px; }
.mono-hero__aside .lead { font-size: 17px; }
.mono-hero__media { --ratio: 1280 / 620; margin-top: clamp(48px, 6.1vw, 88px); }
.mono-hero__media .badge { left: auto; right: 16px; }
@media (max-width: 900px) {
  .mono-hero__text { grid-template-columns: 1fr; }
  .mono-hero__media { --ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .mono-hero .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Présentation
   -------------------------------------------------------------------------- */
.mono-intro {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 640px);
  justify-content: space-between;
  gap: 64px clamp(48px, 8.3vw, 120px);
  align-items: start;
}
.mono-words li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}
.mono-words__word {
  font-family: var(--font-heading);
  font-size: clamp(44px, 4.45vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--fg);
  transition: letter-spacing 0.8s var(--ease-out), color 0.4s;
}
.mono-words .text-sm { font-size: 15px; }
@media (hover: hover) {
  .mono-words li:hover .mono-words__word { letter-spacing: -0.02em; color: var(--accent); }
}
.mono-intro__text { padding-top: 28px; }
.mono-intro__body { font-size: 17px; }
.mono-intro__body p + p { margin-top: 1.4em; }
.mono-notice { align-items: flex-start; padding: 16px 20px; color: var(--noir); font-size: 14px; }
.mono-notice .icon { margin-top: 3px; }
@media (max-width: 900px) {
  .mono-intro { grid-template-columns: 1fr; }
  .mono-intro__text { padding-top: 0; order: -1; }
}

/* --------------------------------------------------------------------------
   Palette indicative
   -------------------------------------------------------------------------- */
.mono-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.mono-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: clamp(300px, 32vw, 460px);
  padding: 28px;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--noir);
  isolation: isolate;
}
.mono-swatch::after {
  /* Reflet qui balaie l’échantillon au survol */
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: linear-gradient(115deg, rgb(255 255 255 / 0) 40%, rgb(255 255 255 / 0.22) 50%, rgb(255 255 255 / 0) 60%);
  transform: translateX(-100%);
  transition: transform 1.2s var(--ease-out);
  pointer-events: none;
}
.mono-swatch--light { background: #cfcdc7; }
.mono-swatch--mid { background: #8f908e; }
.mono-swatch--dark { background: #36373a; color: var(--white); }
.mono-swatch--other { border: 1.5px solid var(--mineral); color: var(--noir); }
.mono-swatch--other::after { display: none; }
.mono-swatch--other > .icon { width: 20px; height: 20px; color: var(--gold-ink); transition: transform 0.6s var(--ease-out); }
.mono-swatch__num { font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.mono-swatch > div { display: flex; flex-direction: column; gap: 8px; transition: transform 0.7s var(--ease-out); }
.mono-swatch__name {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.mono-swatch p { font-size: 14px; line-height: 1.5; }
.mono-swatch--other p { color: var(--text-on-light-muted); }
@media (hover: hover) {
  .mono-swatch:hover::after { transform: translateX(100%); }
  .mono-swatch:hover > div { transform: translateY(-6px); }
  .mono-swatch--other:hover > .icon { transform: rotate(90deg); }
}
@media (max-width: 1080px) {
  .mono-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .mono-swatches { grid-template-columns: 1fr; }
  .mono-swatch { min-height: 220px; }
}
.mono-mention {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 64px;
  font-size: 14px;
  color: var(--muted);
}
.mono-mention .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   Usages & contextes
   -------------------------------------------------------------------------- */
.mono-usages__head { margin-bottom: 64px; }
.mono-reasons { --grid-gap: 40px; }
.mono-reasons li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 28px;
  border-top: 1.5px solid var(--line);
}
.mono-reasons li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.5px;
  height: 1.5px;
  background: var(--noir);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) 0.2s;
}
.js .mono-reasons li:not(.is-revealed)::before { transform: scaleX(0); }
.mono-reasons__num { font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); }
.mono-reasons__title {
  font-family: var(--font-heading);
  font-size: clamp(19px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.mono-reasons .text-sm { font-size: 15px; }

.mono-contexts {
  display: grid;
  grid-template-columns: minmax(0, 720fr) minmax(0, 536fr);
  gap: 24px;
  align-items: start;
  margin-top: clamp(80px, 8.9vw, 128px);
}
.mono-context { gap: 24px; }
.mono-context__legend { display: flex; flex-direction: column; gap: 10px; }
.mono-context__cat { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.mono-context__title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.mono-context .text-sm { font-size: 15px; }
@media (max-width: 720px) {
  .mono-contexts { grid-template-columns: 1fr; gap: 48px; }
  .mono-context .media { --ratio: 4 / 3 !important; }
}

/* --------------------------------------------------------------------------
   Finitions : échantillons schématiques
   -------------------------------------------------------------------------- */
.mono-finishes {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 48px clamp(48px, 6.7vw, 96px);
  align-items: start;
}
.mono-finishes .text { max-width: 40ch; }
.mono-italic { font-size: 13px; font-style: italic; color: var(--muted); }
.mono-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mono-level { display: flex; flex-direction: column; gap: 20px; }
.mono-level__sample {
  position: relative;
  display: block;
  aspect-ratio: 246 / 320;
  overflow: hidden;
  border-radius: var(--radius);
}
.mono-level__sample--mat { background: #8f908e; }
.mono-level__sample--satin { background: linear-gradient(164deg, #8a8b89 8%, #a3a4a1 50%, #878886 92%); }
.mono-level__sample--gloss { background: linear-gradient(156deg, #7e7f7d 11%, #7e7f7d 40.7%, #d6d7d3 48.5%, #86878a 56.2%, #7e7f7d 100%); }
.mono-level__sample::after {
  /* Passage de lumière : intensité selon le niveau de brillance */
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(120deg, rgb(255 255 255 / 0) 42%, rgb(255 255 255 / var(--sheen, 0)) 50%, rgb(255 255 255 / 0) 58%);
  transform: translateX(-100%);
  transition: transform 1.4s var(--ease-out);
}
.mono-level__sample--satin { --sheen: 0.18; }
.mono-level__sample--gloss { --sheen: 0.6; }
.mono-level__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mono-level__title { font-family: var(--font-heading); font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -0.015em; }
.mono-level__index { font-size: 16px; font-weight: 600; color: var(--accent); }
.mono-level .text-sm { font-size: 15px; }
@media (hover: hover) {
  .mono-level:hover .mono-level__sample::after { transform: translateX(100%); }
}
@media (max-width: 1080px) {
  .mono-finishes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mono-levels { grid-template-columns: 1fr; }
  .mono-level__sample { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   Entretien
   -------------------------------------------------------------------------- */
.mono-care {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.mono-care__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 40px 0;
}
.mono-care__col:first-child { padding-left: 0; }
.mono-care__col:last-child { padding-right: 0; }
.mono-care__col + .mono-care__col { border-left: 1px solid var(--line); }
.mono-care__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.mono-care__title .icon { width: 20px; height: 20px; color: var(--gold); }
.mono-dashes { display: flex; flex-direction: column; gap: 14px; }
.mono-dashes li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.mono-dashes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: var(--gold);
}
@media (max-width: 900px) {
  .mono-care { grid-template-columns: 1fr; }
  .mono-care__col { padding: 32px 0; }
  .mono-care__col + .mono-care__col { border-left: 0; border-top: 1px solid var(--line); }
}