/**
 * Maison Drapée — /services/ storytelling redesign.
 *
 * Pattern (atelier.net inspired):
 * - Each .mdr-scene is a 100vh container
 * - Inner .mdr-scene__content / __split is sticky-pinned to the
 *   centre of the viewport while the user scrolls within the scene
 * - On scene entry, [data-mdr-reveal] elements fade + slide in via
 *   the .is-revealed class added by services-story.js
 * - Counters animate from 0 to data-mdr-target on entry
 *
 * No framework, ~7 KB CSS gzipped.
 */

:root {
  --mdr-cream: #faf6ec;
  --mdr-ink: #14110d;
  --mdr-terracotta: #c0775a;
  --mdr-sable: #e6dfca;
  --mdr-mute: #5a5754;
}

/* Reset wrapping styles from parent theme that fight full-bleed scenes */
.mdr-services-story,
.mdr-services-story * {
  box-sizing: border-box;
}

.mdr-services-story {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--mdr-ink);
  background: var(--mdr-cream);
  /* Defeat any width constraint applied by Blocksy single-page layout */
  max-width: none !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ============================================================ *
 *  Scene base
 * ============================================================ */

.mdr-scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.mdr-scene__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.mdr-scene__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Ken Burns: very slow zoom + drift, gives the still photo a
     cinematic feel during the dwell on each scene. */
  transform: scale(1.05);
  animation: mdr-kenburns 18s ease-out infinite alternate;
  will-change: transform;
}

@keyframes mdr-kenburns {
  0%   { transform: scale(1.05) translate3d(-1%, -1%, 0); }
  100% { transform: scale(1.18) translate3d(2%, 1.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .mdr-scene__bg img {
    animation: none;
    transform: none;
  }
}

.mdr-scene__bg::after {
  /* Default overlay — scenes that aren't explicitly dark just get a
     soft bottom vignette so a CTA in the lower third stays readable. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 13, 0.0) 30%, rgba(20, 17, 13, 0.55) 100%);
}

/* Strong global overlay on full-bleed dark scenes — guarantees AA
   contrast for cream text over any underlying image (Desert /
   Peonies / Camden, etc). Applies to intro, gratuit, manifesto,
   contact, cta-tel and any future scene flagged with the modifier. */
.mdr-scene--dark .mdr-scene__bg::after {
  background:
    linear-gradient(180deg,
      rgba(20, 17, 13, 0.55) 0%,
      rgba(20, 17, 13, 0.65) 50%,
      rgba(20, 17, 13, 0.78) 100%);
}

/* Legacy modifier kept for backward compat */
.mdr-scene__bg--dark::after {
  background: linear-gradient(180deg, rgba(20, 17, 13, 0.4) 0%, rgba(20, 17, 13, 0.75) 100%);
}

.mdr-scene__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 8vh 6vw;
  color: var(--mdr-cream);
}

.mdr-scene__content--centered {
  text-align: center;
  margin: 0 auto;
}

/* Split layout (image + text) for half the scenes ---------------- */

.mdr-scene__split {
  position: relative;
  z-index: 2;
  display: grid;
  /* `minmax(0, 1fr)` instead of `1fr` so a wide indivisible child
     (e.g. the [md_form] texture carousel, ~3200 px natural width)
     can't blow the cell past 1fr. Without this, CSS Grid honours
     the content's intrinsic min-content width and the column
     stretches to thousands of px on prod. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 80px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8vh 6vw;
  width: 100%;
}

.mdr-scene__split--reverse {
  direction: rtl;
}

.mdr-scene__split--reverse > * {
  direction: ltr;
}

@media (max-width: 900px) {
  .mdr-scene__split {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 6vh 5vw;
  }
}

.mdr-scene__split-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--mdr-sable);
  /* Slight inset shadow for editorial framing */
  box-shadow: 0 24px 60px rgba(20, 17, 13, 0.18);
}

.mdr-scene__split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mdr-scene-conseil .mdr-scene__split-image img,
.mdr-scene-echantillons .mdr-scene__split-image img,
.mdr-scene-devis .mdr-scene__split-image img,
.mdr-scene-livraison .mdr-scene__split-image img,
.mdr-scene-pose .mdr-scene__split-image img {
  transform: scale(1.06);
}

.mdr-scene.is-revealed .mdr-scene__split-image img {
  transform: scale(1);
}

/* ============================================================ *
 *  Typography
 * ============================================================ */

.mdr-scene__eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mdr-terracotta);
  margin-bottom: 24px;
  position: relative;
  padding-left: 56px;
}

.mdr-scene__eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 44px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

.mdr-scene__eyebrow--light {
  color: rgba(250, 246, 236, 0.8);
}

.mdr-step__num {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  color: var(--mdr-ink);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.mdr-step__num--light {
  color: rgba(250, 246, 236, 0.8);
}

.mdr-scene__title,
.mdr-scene__title-md,
.mdr-scene__title-final {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  color: var(--mdr-ink);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.mdr-scene__title {
  font-size: clamp(44px, 7.5vw, 96px);
  hyphens: none;
  -webkit-hyphens: none;
  word-break: keep-all;
  overflow-wrap: normal;
}

.mdr-scene__title-md {
  font-size: clamp(34px, 4.6vw, 56px);
  hyphens: none;
  -webkit-hyphens: none;
  word-break: keep-all;
  overflow-wrap: normal;
}

.mdr-scene__title-final {
  font-size: clamp(56px, 9vw, 120px);
  /* Long French words like "commence" must never break across lines
     at large display sizes — hyphenation off, keep-all stops glyph
     splitting if the cascade has hyphens enabled higher up. */
  hyphens: none;
  -webkit-hyphens: none;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Italic emphasis runs inside titles must stay on one line */
.mdr-scene__title em,
.mdr-scene__title-md em,
.mdr-scene__title-final em {
  white-space: nowrap;
}

.mdr-scene__title em,
.mdr-scene__title-md em,
.mdr-scene__title-final em {
  font-style: italic;
  color: var(--mdr-terracotta);
}

.mdr-scene__title--light {
  color: var(--mdr-cream);
}

.mdr-scene__title--light em {
  color: var(--mdr-cream);
  border-bottom: 2px solid var(--mdr-terracotta);
  padding-bottom: 0.08em;
}

.mdr-scene__lead {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: rgba(20, 17, 13, 0.78);
  max-width: 56ch;
  margin: 0 0 32px;
}

.mdr-scene__lead--light {
  color: rgba(250, 246, 236, 0.92);
  margin-left: auto;
  margin-right: auto;
}

.mdr-scene__body {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(20, 17, 13, 0.78);
  max-width: 50ch;
  margin: 0 0 28px;
}

.mdr-scene__split-text {
  position: relative;
  /* Same reason as the parent grid's minmax(0, 1fr): the form panel
     inside this cell can have intrinsic min-content > 1fr, which
     would force the grid track to stretch. min-width: 0 lets the
     flex/grid algorithm shrink this cell to its allocated width. */
  min-width: 0;
}

.mdr-scene-surmesure .mdr-scene__body,
.mdr-scene-production .mdr-scene__body {
  color: rgba(250, 246, 236, 0.9);
}

.mdr-scene__scroll-hint {
  display: inline-block;
  margin-top: 48px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(250, 246, 236, 0.7);
  animation: mdr-bounce 2.4s ease-in-out infinite;
}

@keyframes mdr-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ============================================================ *
 *  CTA buttons
 * ============================================================ */

.mdr-scene__cta {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition:
    background 250ms ease,
    transform 250ms ease,
    box-shadow 250ms ease;
  border: 1px solid var(--mdr-ink);
  cursor: pointer;
}

.mdr-scene__cta:hover {
  background: var(--mdr-terracotta);
  border-color: var(--mdr-terracotta);
  transform: translateX(6px);
  box-shadow: 0 12px 32px rgba(192, 119, 90, 0.32);
}

.mdr-scene__cta--light {
  background: var(--mdr-cream);
  color: var(--mdr-ink);
  border-color: var(--mdr-cream);
}

.mdr-scene__cta--light:hover {
  background: var(--mdr-terracotta);
  color: var(--mdr-cream);
  border-color: var(--mdr-terracotta);
}

.mdr-scene__cta--primary {
  font-size: 13px;
  padding: 20px 40px;
}

.mdr-scene__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: 32px;
}

@media (min-width: 720px) {
  .mdr-scene__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ============================================================ *
 *  Stats / counters
 * ============================================================ */

.mdr-stat-row {
  display: flex;
  gap: 48px;
  margin: 0 0 32px;
  flex-wrap: wrap;
}

.mdr-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mdr-stat__prefix {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mdr-mute);
  margin-bottom: 2px;
}

.mdr-stat__value {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--mdr-terracotta);
  font-variant-numeric: tabular-nums;
}

.mdr-stat__unit {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--mdr-ink);
  letter-spacing: 0.04em;
  margin-left: 4px;
  display: inline-block;
}

.mdr-stat__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdr-mute);
  margin-top: 2px;
}

/* ============================================================ *
 *  Lists
 * ============================================================ */

.mdr-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  font-size: 14px;
  color: var(--mdr-mute);
}

.mdr-list li {
  padding-left: 0;
}

.mdr-list li::before { content: none; }

@media (max-width: 600px) {
  .mdr-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ============================================================ *
 *  Backgrounds per scene tone
 * ============================================================ */

.mdr-scene-intro {
  background: var(--mdr-ink);
  color: var(--mdr-cream);
}
.mdr-scene-intro .mdr-scene__title {
  color: var(--mdr-cream);
}
.mdr-scene-intro .mdr-scene__title em {
  color: var(--mdr-terracotta);
  font-style: italic;
}
.mdr-scene-intro .mdr-scene__lead {
  color: rgba(250, 246, 236, 0.9);
}

.mdr-scene-conseil { background: var(--mdr-cream); }
.mdr-scene-echantillons { background: #ffffff; }

.mdr-scene-surmesure {
  background: var(--mdr-ink);
  color: var(--mdr-cream);
}

.mdr-scene-devis { background: var(--mdr-cream); }

.mdr-scene-production {
  background: var(--mdr-ink);
  color: var(--mdr-cream);
}

.mdr-scene-livraison { background: #ffffff; }
.mdr-scene-pose { background: var(--mdr-cream); }

.mdr-scene-cta {
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  text-align: center;
}
.mdr-scene-cta .mdr-scene__title-final {
  color: var(--mdr-cream);
}
.mdr-scene-cta .mdr-scene__title-final em {
  color: var(--mdr-terracotta);
}
.mdr-scene-cta .mdr-scene__lead {
  color: rgba(250, 246, 236, 0.85);
  margin-left: auto;
  margin-right: auto;
}
.mdr-scene-cta .mdr-scene__eyebrow {
  color: rgba(250, 246, 236, 0.8);
}

/* Conseil-story scenes -------------------------------------------- */

.mdr-scene-aquoi    { background: var(--mdr-cream); }
.mdr-scene-comment  { background: #ffffff; }
.mdr-scene-pourqui  { background: var(--mdr-cream); }
.mdr-scene-reserver { background: var(--mdr-cream); }
.mdr-scene-faq      { background: #ffffff; }

.mdr-scene-gratuit {
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  text-align: center;
}
.mdr-scene-gratuit .mdr-scene__title { color: var(--mdr-cream); }
.mdr-scene-gratuit .mdr-scene__title em { color: var(--mdr-terracotta); }
.mdr-scene-gratuit .mdr-scene__body {
  color: rgba(250, 246, 236, 0.9);
  margin-left: auto;
  margin-right: auto;
}
.mdr-scene-gratuit .mdr-scene__eyebrow {
  color: rgba(250, 246, 236, 0.8);
}

.mdr-scene-contact {
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  text-align: center;
}
.mdr-scene-contact .mdr-scene__title { color: var(--mdr-cream); }
.mdr-scene-contact .mdr-scene__title em { color: var(--mdr-terracotta); }
.mdr-scene-contact .mdr-scene__eyebrow { color: rgba(250, 246, 236, 0.8); }

/* Contact-story scenes ------------------------------------------- */

.mdr-scene-canaux     { background: var(--mdr-cream); }
.mdr-scene-besoins    { background: #ffffff; }
.mdr-scene-delais     { background: var(--mdr-cream); }
.mdr-scene-formulaire { background: var(--mdr-cream); }

.mdr-scene-coordonnees {
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  text-align: center;
}
.mdr-scene-coordonnees .mdr-scene__title { color: var(--mdr-cream); }
.mdr-scene-coordonnees .mdr-scene__title em { color: var(--mdr-terracotta); }
.mdr-scene-coordonnees .mdr-scene__body {
  color: rgba(250, 246, 236, 0.92);
  margin-left: auto;
  margin-right: auto;
}
.mdr-scene-coordonnees .mdr-scene__eyebrow { color: rgba(250, 246, 236, 0.8); }

.mdr-scene-cta-tel {
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  text-align: center;
}
.mdr-scene-cta-tel .mdr-scene__title { color: var(--mdr-cream); }
.mdr-scene-cta-tel .mdr-scene__title em { color: var(--mdr-terracotta); }
.mdr-scene-cta-tel .mdr-scene__body {
  color: rgba(250, 246, 236, 0.92);
  margin-left: auto;
  margin-right: auto;
}
.mdr-scene-cta-tel .mdr-scene__eyebrow { color: rgba(250, 246, 236, 0.8); }

/* ============================================================ *
 *  Contact-story specific components
 * ============================================================ */

/* Channel grid — 2x2 layout for the 4 contact channels */
.mdr-channel-grid {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  list-style: none;
  padding: 0;
}

/* 3-column variant — used on /mes-favoris/ devis section where the
   3 channels (téléphone / email / visio) sit side by side. */
.mdr-channel-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 720px) {
  .mdr-channel-grid,
  .mdr-channel-grid--3 { grid-template-columns: 1fr; gap: 14px; }
}

.mdr-channel {
  position: relative;
  padding: 22px 22px 20px;
  background: #ffffff;
  border: 1px solid rgba(20, 17, 13, 0.14);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.mdr-channel:hover {
  border-color: var(--mdr-terracotta);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 17, 13, 0.08);
}

.mdr-channel__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--mdr-terracotta);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.mdr-channel strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--mdr-ink);
  line-height: 1.25;
}

.mdr-channel a:not(.mdr-channel__sub) {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--mdr-terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 119, 90, 0.4);
  align-self: start;
  padding-bottom: 1px;
  transition: border-color 180ms ease;
}

.mdr-channel a:hover { border-color: var(--mdr-terracotta); }

.mdr-channel__sub {
  font-size: 14px !important;
  margin-top: 6px;
  border-bottom-style: dashed !important;
}

.mdr-channel span {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(20, 17, 13, 0.74);
}

/* SLA list — channel + bold value + thin note */
.mdr-sla-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(20, 17, 13, 0.12);
}

.mdr-sla-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(20, 17, 13, 0.12);
}

.mdr-sla__channel {
  grid-column: 1;
  grid-row: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--mdr-ink);
}

.mdr-sla__value {
  grid-column: 2;
  grid-row: 1;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--mdr-terracotta);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mdr-sla__note {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(20, 17, 13, 0.62);
}

/* Phone CTA variant — terracotta filled, used as primary on dark
   final scenes */
.mdr-scene__cta--phone {
  background: var(--mdr-terracotta) !important;
  color: var(--mdr-cream) !important;
  border: 1px solid var(--mdr-terracotta) !important;
}

.mdr-scene__cta--phone:hover {
  background: #a85f44 !important;
  border-color: #a85f44 !important;
  color: var(--mdr-cream) !important;
}

/* Shipping list — refined replacement for the emoji-flag bullet
   list used on the /services/ Livraison scene. Editorial grid:
   country code chip + country name + delivery window. */
.mdr-shipping-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(20, 17, 13, 0.12);
}

.mdr-shipping-list li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  column-gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20, 17, 13, 0.12);
  transition: background 180ms ease;
}

.mdr-shipping-list li:hover {
  background: rgba(230, 223, 202, 0.32);
}

.mdr-shipping__flag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mdr-terracotta);
  text-align: center;
  padding: 5px 0;
  border: 1px solid rgba(192, 119, 90, 0.4);
  border-radius: 3px;
  background: rgba(250, 246, 236, 0.6);
}

.mdr-shipping__country {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--mdr-ink);
  letter-spacing: 0.005em;
}

.mdr-shipping__days {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(20, 17, 13, 0.72);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ============================================================ *
 *  Papier-peint-story specific
 * ============================================================ */

.mdr-scene-galerie  { background: var(--mdr-cream); }
.mdr-scene-options  { background: #ffffff; }
.mdr-scene-process  { background: var(--mdr-cream); }
.mdr-scene-form     { background: #ffffff; }

.mdr-scene-vision {
  text-align: center;
}
.mdr-scene-vision .mdr-scene__title { color: var(--mdr-cream); }
.mdr-scene-vision .mdr-scene__title em { color: var(--mdr-terracotta); }
.mdr-scene-vision .mdr-scene__body {
  color: rgba(250, 246, 236, 0.92);
  margin-left: auto;
  margin-right: auto;
}
.mdr-scene-vision .mdr-scene__eyebrow { color: rgba(250, 246, 236, 0.8); }

/* The galerie scene needs a wider, non-split container so the 4-column
   thumbnail grid breathes. This wrap mirrors the .mdr-scene__split
   constraints (max-width, padding) without forcing the 1+1 columns. */
.mdr-scene__centered-wrap {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8vh 6vw;
  width: 100%;
}

.mdr-scene__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.mdr-scene__head .mdr-scene__eyebrow {
  padding-left: 0;
  margin-bottom: 18px;
}

.mdr-scene__head .mdr-scene__eyebrow::before {
  display: none;
}

.mdr-scene__head .mdr-scene__body {
  margin-left: auto;
  margin-right: auto;
}

/* Gallery grid — 4 columns on desktop, masonry-ish via CSS columns
   would re-order the items; we use a simple grid 4×3 with consistent
   aspect ratio so the visual rhythm stays stable. */
.mdr-gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1024px) {
  .mdr-gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .mdr-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.mdr-gallery-grid li {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mdr-sable);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(20, 17, 13, 0.08);
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.mdr-gallery-grid li:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(20, 17, 13, 0.16);
}

.mdr-gallery-grid li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mdr-gallery-grid li:hover img {
  transform: scale(1.06);
}

.mdr-gallery-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .mdr-gallery-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mdr-gallery-grid--3 { grid-template-columns: 1fr; }
}

/* Stat row, 4 columns variant — used by mosaique-story */
.mdr-stat-row--4cols {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 32px auto 0;
  max-width: 900px;
}

@media (max-width: 900px) {
  .mdr-stat-row--4cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 480px) {
  .mdr-stat-row--4cols {
    grid-template-columns: 1fr;
  }
}

/* Mosaique stats scene (dark, centered) — invert stat colors */
.mdr-scene-stats {
  text-align: center;
}
.mdr-scene-stats .mdr-scene__title { color: var(--mdr-cream); }
.mdr-scene-stats .mdr-scene__title em { color: var(--mdr-terracotta); }
.mdr-scene-stats .mdr-scene__eyebrow { color: rgba(250, 246, 236, 0.8); }
.mdr-scene-stats .mdr-stat-row--4cols .mdr-stat {
  align-items: center;
  text-align: center;
}
.mdr-scene-stats .mdr-stat__value { color: var(--mdr-cream); }
.mdr-scene-stats .mdr-stat__unit  { color: var(--mdr-cream); }
.mdr-scene-stats .mdr-stat__label { color: rgba(250, 246, 236, 0.7); }

/* Espaces (mosaique scene 1) — light cream */
.mdr-scene-espaces { background: var(--mdr-cream); }

.mdr-gallery-grid li span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 14px 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--mdr-cream);
  letter-spacing: 0.01em;
  background: linear-gradient(180deg,
    rgba(20, 17, 13, 0) 0%,
    rgba(20, 17, 13, 0.55) 60%,
    rgba(20, 17, 13, 0.78) 100%);
  pointer-events: none;
}

/* ============================================================ *
 *  Booking widget — used in the Conseil "Réserver" scene.
 *  Pure CSS + a tiny vanilla JS. The selected day/time is
 *  injected into the WPForms textarea by services-story.js, so
 *  no WPForms config change is needed.
 * ============================================================ */

.mdr-booking {
  margin: 28px 0 18px;
  padding: 22px 22px 16px;
  background: rgba(230, 223, 202, 0.45);
  border: 1px solid rgba(192, 119, 90, 0.28);
  border-radius: 6px;
}

.mdr-booking__step + .mdr-booking__step {
  margin-top: 18px;
}

.mdr-booking__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mdr-terracotta);
  margin-bottom: 12px;
}

.mdr-booking__days {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 720px) {
  .mdr-booking__days { grid-template-columns: repeat(3, 1fr); }
}

.mdr-booking__days button {
  cursor: pointer;
  padding: 10px 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  background: #ffffff;
  color: var(--mdr-ink);
  border: 1px solid rgba(20, 17, 13, 0.16);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.mdr-booking__days button .mdr-booking__day-name {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 17, 13, 0.55);
}

.mdr-booking__days button .mdr-booking__day-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
  color: var(--mdr-ink);
  line-height: 1;
}

.mdr-booking__days button .mdr-booking__day-month {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(20, 17, 13, 0.55);
}

.mdr-booking__days button:hover {
  border-color: var(--mdr-terracotta);
}

.mdr-booking__days button.is-selected {
  background: var(--mdr-terracotta);
  border-color: var(--mdr-terracotta);
}

.mdr-booking__days button.is-selected .mdr-booking__day-name,
.mdr-booking__days button.is-selected .mdr-booking__day-num,
.mdr-booking__days button.is-selected .mdr-booking__day-month {
  color: var(--mdr-cream);
}

.mdr-booking__hours {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 720px) {
  .mdr-booking__hours { grid-template-columns: repeat(3, 1fr); }
}

.mdr-booking__hours button {
  cursor: pointer;
  padding: 10px 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: #ffffff;
  color: var(--mdr-ink);
  border: 1px solid rgba(20, 17, 13, 0.16);
  border-radius: 4px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.mdr-booking__hours button:hover {
  border-color: var(--mdr-terracotta);
}

.mdr-booking__hours button.is-selected {
  background: var(--mdr-terracotta);
  color: var(--mdr-cream);
  border-color: var(--mdr-terracotta);
}

.mdr-booking__summary {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
}

.mdr-booking__summary-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 246, 236, 0.7);
}

.mdr-booking__summary strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: var(--mdr-cream);
  letter-spacing: 0.005em;
}

.mdr-booking__reset {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(250, 246, 236, 0.45);
  color: var(--mdr-cream);
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.mdr-booking__reset:hover {
  border-color: var(--mdr-cream);
  background: rgba(250, 246, 236, 0.1);
}

.mdr-booking__hint {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 17, 13, 0.12);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(20, 17, 13, 0.62);
  font-style: italic;
}

/* ============================================================ *
 *  Reveal animations (controlled by services-story.js)
 * ============================================================ */

[data-mdr-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-mdr-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger inside a scene: each [data-mdr-reveal] gets +120ms via
   nth-child trick, so the title appears slightly before the body. */
.mdr-scene [data-mdr-reveal]:nth-child(1) { transition-delay: 0ms; }
.mdr-scene [data-mdr-reveal]:nth-child(2) { transition-delay: 120ms; }
.mdr-scene [data-mdr-reveal]:nth-child(3) { transition-delay: 240ms; }
.mdr-scene [data-mdr-reveal]:nth-child(4) { transition-delay: 360ms; }
.mdr-scene [data-mdr-reveal]:nth-child(5) { transition-delay: 480ms; }
.mdr-scene [data-mdr-reveal]:nth-child(6) { transition-delay: 600ms; }

/* Same for split-text children */
.mdr-scene__split-text [data-mdr-reveal]:nth-child(1) { transition-delay: 0ms; }
.mdr-scene__split-text [data-mdr-reveal]:nth-child(2) { transition-delay: 80ms; }
.mdr-scene__split-text [data-mdr-reveal]:nth-child(3) { transition-delay: 160ms; }
.mdr-scene__split-text [data-mdr-reveal]:nth-child(4) { transition-delay: 240ms; }
.mdr-scene__split-text [data-mdr-reveal]:nth-child(5) { transition-delay: 320ms; }
.mdr-scene__split-text [data-mdr-reveal]:nth-child(6) { transition-delay: 400ms; }
.mdr-scene__split-text [data-mdr-reveal]:nth-child(7) { transition-delay: 480ms; }

/* ============================================================ *
 *  Progress navigation — fixed dots on the right side
 * ============================================================ */

.mdr-progress {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  /* Hidden on mobile — too small a viewport for dots */
  display: none;
}

@media (min-width: 1100px) {
  .mdr-progress {
    display: block;
  }
}

.mdr-progress__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mdr-progress__list a {
  display: block;
  position: relative;
  width: 22px;
  height: 22px;
  text-decoration: none;
  outline: none;
}

.mdr-progress__list a span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(20, 17, 13, 0.32);
  margin: 7px;
  transition:
    background 250ms ease,
    transform 250ms ease,
    box-shadow 250ms ease;
}

.mdr-progress__list a:hover span,
.mdr-progress__list a:focus-visible span {
  background: var(--mdr-terracotta);
  transform: scale(1.4);
}

.mdr-progress__list a.is-active span {
  background: var(--mdr-terracotta);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(192, 119, 90, 0.18);
}

/* Tooltip-like label that appears on hover */
.mdr-progress__list a::before {
  content: attr(aria-label);
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.mdr-progress__list a:hover::before,
.mdr-progress__list a:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* On dark scenes, invert the dot color for legibility */
.mdr-services-story.is-dark-scene .mdr-progress__list a span {
  background: rgba(250, 246, 236, 0.36);
}

.mdr-services-story.is-dark-scene .mdr-progress__list a.is-active span {
  background: var(--mdr-terracotta);
  box-shadow: 0 0 0 4px rgba(192, 119, 90, 0.24);
}

/* ============================================================ *
 *  Reduced motion
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  [data-mdr-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mdr-scene__split-image img,
  .mdr-scene__bg img {
    transform: none !important;
    transition: none !important;
  }
  .mdr-scene__scroll-hint {
    animation: none;
  }
}

/* ============================================================ *
 *  Conseil-story alias — re-uses the services-story rules.
 *  Anything that targets the container by class (.mdr-services-story)
 *  needs an extra selector for the conseil-story variant.
 * ============================================================ */

.mdr-conseil-story,
.mdr-conseil-story * {
  box-sizing: border-box;
}

.mdr-conseil-story {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--mdr-ink);
  background: var(--mdr-cream);
  max-width: none !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.mdr-conseil-story.is-dark-scene .mdr-progress__list a span {
  background: rgba(250, 246, 236, 0.36);
}

.mdr-conseil-story.is-dark-scene .mdr-progress__list a.is-active span {
  background: var(--mdr-terracotta);
  box-shadow: 0 0 0 4px rgba(192, 119, 90, 0.24);
}

/* ============================================================ *
 *  Conseil-story scene components
 * ============================================================ */

/* Bullet grid (2 columns, 3 rows on desktop) — used by "À quoi ça sert" */
.mdr-bullet-grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}

.mdr-bullet-grid li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: rgba(230, 223, 202, 0.62);
  border-left: 3px solid var(--mdr-terracotta);
  border-radius: 0 6px 6px 0;
}

.mdr-bullet-grid li strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--mdr-ink);
  line-height: 1.3;
}

.mdr-bullet-grid li span {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(20, 17, 13, 0.78);
}

@media (max-width: 720px) {
  .mdr-bullet-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Step list — 4 numbered steps stacked vertically */
.mdr-step-list {
  list-style: none;
  counter-reset: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mdr-step-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
}

.mdr-step-list li > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
}

.mdr-step-list li strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--mdr-ink);
  line-height: 1.3;
}

.mdr-step-list li span {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(20, 17, 13, 0.78);
}

.mdr-step-list .mdr-step__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 38px;
  font-style: italic;
  font-weight: 400;
  color: var(--mdr-terracotta);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Centered variant — used inside dark full-bleed scenes
   (echantillons SCENE 4 process). Caps width so the list
   reads cleanly on wide displays. */
.mdr-step-list--centered {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* On dark scenes, invert the text color */
.mdr-scene--dark .mdr-step-list li strong {
  color: var(--mdr-cream);
}
.mdr-scene--dark .mdr-step-list li span {
  color: rgba(250, 246, 236, 0.78);
}

/* Persona list — 5 short cards */
.mdr-persona-list {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mdr-persona {
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid rgba(20, 17, 13, 0.16);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.mdr-persona:hover {
  border-color: var(--mdr-terracotta);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 17, 13, 0.06);
}

.mdr-persona strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--mdr-ink);
  line-height: 1.3;
}

.mdr-persona span {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(20, 17, 13, 0.74);
}

/* FAQ — native details/summary, styled */
.mdr-faq {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(20, 17, 13, 0.1);
}

.mdr-faq details {
  border-bottom: 1px solid rgba(20, 17, 13, 0.1);
  padding: 0;
}

.mdr-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 32px 16px 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--mdr-ink);
  line-height: 1.4;
  position: relative;
  transition: color 200ms ease;
}

.mdr-faq summary::-webkit-details-marker { display: none; }

.mdr-faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--mdr-terracotta);
  transition: transform 200ms ease;
}

.mdr-faq details[open] summary { color: var(--mdr-terracotta); }
.mdr-faq details[open] summary::after { content: '−'; }

.mdr-faq summary:hover { color: var(--mdr-terracotta); }

.mdr-faq details p {
  margin: 0 0 18px;
  padding-right: 32px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(20, 17, 13, 0.78);
}

.mdr-faq details p a {
  color: var(--mdr-terracotta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Form host — neutralise heavy WPForms default styling so the
   booking form sits inside the scene's editorial typography. */
.mdr-form-host {
  margin: 28px 0 0;
}

.mdr-form-host .wpforms-container,
.mdr-form-host .wpforms-form {
  max-width: 100%;
  margin: 0 !important;
}

.mdr-form-host .wpforms-field-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mdr-ink) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mdr-form-host input[type="text"],
.mdr-form-host input[type="email"],
.mdr-form-host input[type="tel"],
.mdr-form-host input[type="date"],
.mdr-form-host textarea,
.mdr-form-host select {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  border: 1px solid rgba(20, 17, 13, 0.18) !important;
  border-radius: 4px !important;
  background: rgba(250, 246, 236, 0.7) !important;
  transition: border-color 180ms ease, background 180ms ease;
}

.mdr-form-host input:focus,
.mdr-form-host textarea:focus,
.mdr-form-host select:focus {
  outline: none !important;
  border-color: var(--mdr-terracotta) !important;
  background: #ffffff !important;
}

.mdr-form-host button[type="submit"],
.mdr-form-host .wpforms-submit {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  background: var(--mdr-ink) !important;
  color: var(--mdr-cream) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  cursor: pointer;
  transition: background 180ms ease;
}

.mdr-form-host button[type="submit"]:hover,
.mdr-form-host .wpforms-submit:hover {
  background: var(--mdr-terracotta) !important;
}

/* WPForms checkbox / GDPR consent field — the wpforms default
   markup uses <fieldset><legend> + <ul><li><input><label> which,
   without styling, renders as: big browser-default legend, an
   indented bullet list, the checkbox stuck to the very left edge,
   and the helper text on a new line in browser default font. The
   rules below give the consent block the same editorial weight as
   the rest of the form (Inter labels, terracotta-on-focus inputs,
   small italic helper text). */
.mdr-form-host .wpforms-field-checkbox {
  margin: 6px 0;
}

.mdr-form-host .wpforms-field-checkbox fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mdr-form-host .wpforms-field-checkbox legend.wpforms-field-label {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.5 !important;
  color: var(--mdr-ink) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  text-transform: none !important;
}

.mdr-form-host .wpforms-required-label {
  color: var(--mdr-terracotta);
  font-weight: 500;
  margin-left: 2px;
}

.mdr-form-host .wpforms-field-checkbox ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mdr-form-host .wpforms-field-checkbox li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.mdr-form-host .wpforms-field-checkbox li::before {
  display: none !important; /* defeat the default li bullet */
}

.mdr-form-host .wpforms-field-checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--mdr-terracotta);
}

.mdr-form-host .wpforms-field-label-inline {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: rgba(20, 17, 13, 0.78) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5;
}

.mdr-form-host .wpforms-field-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-style: italic;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: rgba(20, 17, 13, 0.62) !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.mdr-form-host .wpforms-field-description a {
  color: var(--mdr-terracotta) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Generic wpforms field tightening — the same editorial label
   typography for non-checkbox fields. Targets fields the form 506
   uses (text, email, tel, textarea). */
.mdr-form-host .wpforms-field-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--mdr-ink) !important;
  margin-bottom: 6px !important;
  display: block;
}

.mdr-form-host .wpforms-field-sublabel {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: rgba(20, 17, 13, 0.55) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ----- mo_form / md_form override: render INLINE, not as a slide-out
   side-panel. The original shortcode produces a fixed-position drawer
   triggered by a vertical button on the right edge — that pattern
   doesn't work inside an editorial scene (the drawer feels detached,
   the user can't tell it's the page's primary form, and on some
   stacking contexts it gets clipped). We unwind every panel rule
   inside .mdr-form-host so the form lays out naturally in the scene. */
.mdr-form-host {
  /* Prevent the form's intrinsic min-content (driven by the texture
     carousel's 23 cards) from blowing past the column width. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.mdr-form-host .form-sidebar {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: static;
}

.mdr-form-host .side-panel {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  z-index: auto !important;
}

.mdr-form-host .panel-header {
  padding: 0 0 18px 0 !important;
  border-bottom: none !important;
  text-align: left !important;
}

.mdr-form-host .panel-header h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--mdr-ink) !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

.mdr-form-host .panel-header p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: rgba(20, 17, 13, 0.74) !important;
  margin: 0 !important;
}

.mdr-form-host .panel-body {
  padding: 0 !important;
}

/* Hide the side-panel chrome we don't need in the inline layout */
.mdr-form-host .panel-close,
.mdr-form-host .panel-toggle,
.mdr-form-host #panelToggle,
.mdr-form-host #moPanelToggle,
.mdr-form-host #moPanelClose,
.mdr-form-host #mainPanelClose {
  display: none !important;
}

/* Re-style the form labels and inputs to match the editorial tone */
.mdr-form-host .contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mdr-form-host .form-row-inline {
  display: flex;
  gap: 12px;
}

@media (max-width: 600px) {
  .mdr-form-host .form-row-inline { flex-direction: column; }
}

.mdr-form-host .form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mdr-form-host .form-group label,
.mdr-form-host .architect-question label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mdr-ink) !important;
  margin-bottom: 6px !important;
}

.mdr-form-host .form-group input[type="text"],
.mdr-form-host .form-group input[type="email"],
.mdr-form-host .form-group input[type="tel"],
.mdr-form-host .form-group input[type="number"],
.mdr-form-host .form-group input[type="date"],
.mdr-form-host .form-group select,
.mdr-form-host .form-group textarea {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(20, 17, 13, 0.18) !important;
  border-radius: 4px !important;
  background: rgba(250, 246, 236, 0.7) !important;
  transition: border-color 180ms ease, background 180ms ease;
}

.mdr-form-host .form-group input:focus,
.mdr-form-host .form-group select:focus,
.mdr-form-host .form-group textarea:focus {
  outline: none !important;
  border-color: var(--mdr-terracotta) !important;
  background: #ffffff !important;
}

.mdr-form-host .submit-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: var(--mdr-ink) !important;
  color: var(--mdr-cream) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  cursor: pointer;
  transition: background 180ms ease;
  margin-top: 8px;
  align-self: flex-start;
}

.mdr-form-host .submit-btn:hover {
  background: var(--mdr-terracotta) !important;
}

.mdr-form-host .checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(20, 17, 13, 0.78);
}

.mdr-form-host .checkbox-group input[type="checkbox"] {
  margin-top: 3px;
}

.mdr-form-host .architect-question {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 4px;
}

.mdr-form-host .radio-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

/* Texture carousel — keep it usable but trim the inline-CSS bloat */
.mdr-form-host .md-texture-carousel-wrapper {
  position: relative;
  margin: 6px 0 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Convert the texture carousel from a horizontal scroll into a
   responsive grid. 23 textures × ~140 px scroll-snap was unwieldy
   on desktop (cards far on the right needed 4 clicks to reach) and
   broken inside the editorial column where width fluctuates.
   Auto-fill grid lets all 23 textures live together, with a max of
   5 cards per row on the form's typical width. */
.mdr-form-host .md-texture-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  padding: 4px 0 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* clamp the panel height so very tall grids don't push the
     submit button below the fold; users still scroll the page
     normally to reach the rest of the form */
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 17, 13, 0.32) transparent;
  border: 1px solid rgba(20, 17, 13, 0.1);
  border-radius: 4px;
  background: rgba(250, 246, 236, 0.4);
  padding: 8px;
}

.mdr-form-host .md-texture-carousel::-webkit-scrollbar { width: 6px; }
.mdr-form-host .md-texture-carousel::-webkit-scrollbar-thumb {
  background: rgba(20, 17, 13, 0.32);
  border-radius: 3px;
}

.mdr-form-host .md-texture-card {
  flex: initial;
  scroll-snap-align: none;
  border: 1px solid rgba(20, 17, 13, 0.14);
  border-radius: 3px;
  padding: 6px;
  cursor: pointer;
  text-align: center;
  background: #ffffff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mdr-form-host .md-texture-card:hover { border-color: var(--mdr-terracotta); }

.mdr-form-host .md-texture-card input[type="radio"] { display: none; }

.mdr-form-host .md-texture-card:has(input:checked) {
  border-color: var(--mdr-terracotta);
  background: rgba(192, 119, 90, 0.08);
}

.mdr-form-host .md-texture-card:hover {
  border-color: var(--mdr-terracotta);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(20, 17, 13, 0.06);
}

.mdr-form-host .md-texture-card img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.mdr-form-host .md-texture-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  margin: 5px 0 0;
  color: var(--mdr-ink);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.mdr-form-host .md-texture-card p {
  /* Description text was noisy in a small grid cell — hide on the
     dense layout, reveal on hover via title attribute if needed.
     The texture name + thumbnail is enough info at this density. */
  display: none;
}

/* Carousel arrow buttons no longer make sense in a grid — hide them. */
.mdr-form-host .md-carousel-btn {
  display: none !important;
}

/* File drop zone */
.mdr-form-host .md-upload {
  position: relative;
  border: 1px dashed rgba(20, 17, 13, 0.32);
  border-radius: 4px;
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: rgba(20, 17, 13, 0.62);
  background: rgba(250, 246, 236, 0.6);
}

.mdr-form-host .md-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.mdr-form-host .md-file-count {
  font-size: 12px;
  color: rgba(20, 17, 13, 0.55);
}

/* Video tutorial — its own short scene on /personnalisation-de-papier-peint/.
   Compact, centred, max 480 px wide so it reads as a "watch this first"
   moment between the process steps and the actual form. Dropping the
   previous in-split-image attempt: that pushed the form into a tighter
   column on some viewports and the figure was hard to size predictably
   alongside a still image. A dedicated scene is simpler. */
.mdr-video-tutorial {
  margin: 0 auto;
  padding: 0;
  max-width: 480px;
}

.mdr-video-tutorial--centered {
  margin: 0 auto;
}

.mdr-video-tutorial__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--mdr-ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(20, 17, 13, 0.16);
}

.mdr-video-tutorial__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.mdr-scene-tutorial {
  background: var(--mdr-cream);
}

/* Narrow centred-wrap variant for the tutorial scene */
.mdr-scene__centered-wrap--narrow {
  max-width: 720px;
}

/* Ceramique-story scenes ----------------------------------------- */

.mdr-scene-impact     { background: var(--mdr-cream); }
.mdr-scene-technique  { background: #ffffff; }
.mdr-scene-compositions { background: var(--mdr-cream); }

.mdr-scene-tendances {
  text-align: center;
}
.mdr-scene-tendances .mdr-scene__title { color: var(--mdr-cream); }
.mdr-scene-tendances .mdr-scene__title em { color: var(--mdr-terracotta); }
.mdr-scene-tendances .mdr-scene__eyebrow { color: rgba(250, 246, 236, 0.8); }

/* Trend list — 4 signature names + short notes, on the dark scene */
.mdr-trend-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid rgba(250, 246, 236, 0.2);
  text-align: left;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .mdr-trend-list { grid-template-columns: 1fr; }
}

.mdr-trend-list li {
  padding: 18px 22px;
  border-right: 1px solid rgba(250, 246, 236, 0.2);
  border-bottom: 1px solid rgba(250, 246, 236, 0.2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mdr-trend-list li:nth-child(2n) {
  border-right: none;
}

@media (max-width: 600px) {
  .mdr-trend-list li {
    border-right: none;
  }
}

.mdr-trend__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--mdr-cream);
}

.mdr-trend__note {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(250, 246, 236, 0.72);
}

/* ------ Form polish: editorial spacing + clearer hierarchy ------ */
.mdr-form-host {
  /* Tighter line-rhythm and a subtle top divider so the form reads
     as its own block under the scene title. */
  border-top: 1px solid rgba(20, 17, 13, 0.1);
  padding-top: 20px;
}

.mdr-form-host .form-group + .form-group,
.mdr-form-host .form-row-inline + .form-group,
.mdr-form-host .form-group + .form-row-inline {
  margin-top: 4px;
}

.mdr-form-host .panel-header h3,
.mdr-form-host .panel-header > h3 {
  /* The "Demandez votre papier peint personnalisé" title duplicates
     the scene's own h2 — visually hide it without removing it from
     the DOM (kept for screen readers and to preserve the original
     shortcode markup). */
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.mdr-form-host .panel-header > p {
  /* Move the SLA line ('Livraison sous 5 à 7 jours…') into a small
     muted helper above the form rather than a stand-alone heading. */
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: rgba(20, 17, 13, 0.62) !important;
  font-style: italic;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

/* Channel list — used on /espace-pro/ Form scene above the WPForms
   embed. Keeps the 3 contact channels visually distinct from the
   long form below. */
.mdr-channel-list {
  list-style: none;
  margin: 22px 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(20, 17, 13, 0.1);
  padding-top: 18px;
}

.mdr-channel-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.mdr-channel-list li strong {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mdr-mute);
}

.mdr-channel-list li a {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--mdr-terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 119, 90, 0.4);
  padding-bottom: 1px;
}

.mdr-channel-list li a:hover { border-color: var(--mdr-terracotta); }

.mdr-channel-list li span {
  grid-column: 2;
  font-size: 12.5px;
  color: rgba(20, 17, 13, 0.62);
}

/* Pro form (custom shortcode [pro_form] on /espace-pro/) — picks
   up most styling from the existing .mdr-form-host scope. We just
   need a few specific fixes for the multi-select univers, the
   hint text and the success/error message. */
.mdr-form-host .mdr-pro-form select[multiple] {
  height: auto !important;
  min-height: 140px;
  padding: 8px 10px !important;
  font-size: 14px !important;
}

.mdr-form-host .mdr-pro-form select[multiple] option {
  padding: 4px 6px;
  font-size: 13.5px;
}

.mdr-form-host .mdr-pro-form__hint,
.mdr-form-host .mdr-pro-form small {
  display: block;
  font-size: 11.5px;
  font-style: italic;
  color: rgba(20, 17, 13, 0.55);
  margin-top: 4px;
  letter-spacing: 0.005em;
}

.mdr-form-host .md-form-message {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
}

.mdr-form-host .md-form-message.is-success {
  background: rgba(192, 119, 90, 0.12);
  border-left: 3px solid var(--mdr-terracotta);
  color: var(--mdr-ink);
}

.mdr-form-host .md-form-message.is-error {
  background: rgba(180, 60, 60, 0.08);
  border-left: 3px solid #b43c3c;
  color: #7a2222;
}

.mdr-form-host .submit-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.mdr-form-host .submit-btn .spinner {
  display: none;
}

.mdr-form-host .submit-btn:disabled .spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: middle;
  animation: mdr-spin 720ms linear infinite;
}

@keyframes mdr-spin {
  to { transform: rotate(360deg); }
}

/* FAQ centred variant — used inside dark full-bleed scenes (FAQ
   scene 4 sur-mesure). The standard mdr-faq aligns left-edge; on
   dark centred content we cap width and center the block. */
.mdr-faq--centered {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border-top: 1px solid rgba(250, 246, 236, 0.18);
}

.mdr-faq--centered details {
  border-bottom-color: rgba(250, 246, 236, 0.18);
}

.mdr-faq--centered summary {
  color: var(--mdr-cream);
}

.mdr-faq--centered summary::after {
  color: var(--mdr-terracotta);
}

.mdr-faq--centered details[open] summary,
.mdr-faq--centered summary:hover {
  color: var(--mdr-terracotta);
}

.mdr-faq--centered details p {
  color: rgba(250, 246, 236, 0.82);
}

.mdr-faq--centered details p a {
  color: var(--mdr-terracotta);
}

/* ============================================================ *
 *  Blog archive — asymmetric editorial grid
 * ============================================================ */

.mdr-blog-archive {
  background: var(--mdr-cream);
}

.mdr-scene-articles {
  background: var(--mdr-cream);
}

.mdr-blog-grid {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 1024px) {
  .mdr-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .mdr-blog-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* The first card spans 2 cols × 2 rows on desktop — feature treatment */
.mdr-blog-grid__item--feature {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

@media (max-width: 1024px) {
  .mdr-blog-grid__item--feature {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.mdr-blog-grid li {
  margin: 0;
  padding: 0;
}
.mdr-blog-grid li::before { display: none; }

.mdr-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(20, 17, 13, 0.06);
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.mdr-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(20, 17, 13, 0.12);
}

.mdr-blog-card__cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mdr-sable);
}

.mdr-blog-grid__item--feature .mdr-blog-card__cover {
  aspect-ratio: 16 / 11;
}

.mdr-blog-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mdr-blog-card:hover .mdr-blog-card__cover img {
  transform: scale(1.05);
}

.mdr-blog-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mdr-blog-grid__item--feature .mdr-blog-card__body {
  padding: 28px 32px 30px;
}

.mdr-blog-card__cat {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mdr-terracotta);
}

.mdr-blog-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  color: var(--mdr-ink);
  margin: 4px 0 6px;
  letter-spacing: -0.005em;
}

.mdr-blog-grid__item--feature .mdr-blog-card__title {
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
}

.mdr-blog-card__excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(20, 17, 13, 0.72);
  margin: 0;
  flex: 1;
}

.mdr-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(20, 17, 13, 0.55);
  margin-top: 6px;
}

.mdr-blog-card__cta {
  display: inline-block;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mdr-terracotta);
  border-bottom: 1px solid rgba(192, 119, 90, 0.4);
  padding-bottom: 1px;
  align-self: flex-start;
  transition: border-color 200ms ease;
}

.mdr-blog-card:hover .mdr-blog-card__cta {
  border-color: var(--mdr-terracotta);
}

.mdr-blog-empty {
  text-align: center;
  font-size: 16px;
  color: rgba(20, 17, 13, 0.55);
  padding: 60px 20px;
}

/* ============================================================ *
 *  Single article — editorial body
 * ============================================================ */

.mdr-article {
  background: var(--mdr-cream);
}

.mdr-article__hero {
  /* Slightly reduced height so the body scene starts sooner */
  min-height: 80vh;
}

.mdr-article__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(250, 246, 236, 0.78);
  margin-top: 18px;
}

.mdr-article-body {
  background: var(--mdr-cream);
  padding: 10vh 5vw;
}

.mdr-article-body__inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.78;
  color: var(--mdr-ink);
}

.mdr-article-body__inner > p:first-of-type::first-letter {
  /* Editorial drop cap on the first paragraph */
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 76px;
  line-height: 0.85;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--mdr-terracotta);
}

.mdr-article-body__inner > p {
  margin: 0 0 22px;
  color: rgba(20, 17, 13, 0.85);
}

.mdr-article-body__inner > h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1.2;
  color: var(--mdr-ink);
  margin: 56px 0 18px;
  letter-spacing: -0.005em;
  position: relative;
  padding-top: 12px;
}

.mdr-article-body__inner > h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 1px;
  background: var(--mdr-terracotta);
}

.mdr-article-body__inner > h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  color: var(--mdr-ink);
  margin: 36px 0 14px;
}

.mdr-article-body__inner > h2 em,
.mdr-article-body__inner > h3 em {
  font-style: italic;
  color: var(--mdr-terracotta);
}

.mdr-article-body__inner > ul,
.mdr-article-body__inner > ol {
  margin: 0 0 22px;
  padding-left: 24px;
}

.mdr-article-body__inner > ul li,
.mdr-article-body__inner > ol li {
  margin-bottom: 8px;
  line-height: 1.7;
  color: rgba(20, 17, 13, 0.85);
}

.mdr-article-body__inner > blockquote {
  margin: 32px 0;
  padding: 8px 0 8px 26px;
  border-left: 3px solid var(--mdr-terracotta);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--mdr-ink);
}

.mdr-article-body__inner > figure,
.mdr-article-body__inner > p > img,
.mdr-article-body__inner > img {
  margin: 32px 0;
  width: 100%;
  border-radius: 4px;
}

.mdr-article-body__inner > figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.mdr-article-body__inner > figure figcaption {
  font-size: 13px;
  font-style: italic;
  color: rgba(20, 17, 13, 0.62);
  margin-top: 8px;
  text-align: center;
}

.mdr-article-body__inner > a {
  color: var(--mdr-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.mdr-article-body__inner > strong,
.mdr-article-body__inner p strong,
.mdr-article-body__inner li strong {
  font-weight: 600;
  color: var(--mdr-ink);
}

.mdr-article-body__inner table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  font-size: 14px;
}

.mdr-article-body__inner th,
.mdr-article-body__inner td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(20, 17, 13, 0.1);
  text-align: left;
}

.mdr-article-body__inner th {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--mdr-mute);
  border-bottom: 2px solid var(--mdr-terracotta);
}

.mdr-article-body__footer {
  max-width: 720px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 17, 13, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(20, 17, 13, 0.62);
}

.mdr-article-tags__label {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.mdr-article-tags a {
  color: var(--mdr-terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 119, 90, 0.3);
}

.mdr-article-back {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mdr-terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 119, 90, 0.4);
  padding-bottom: 1px;
}

/* ============================================================ *
 *  Related posts list (single article footer scene)
 * ============================================================ */

.mdr-scene-related {
  background: #ffffff;
}

.mdr-related-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 720px) {
  .mdr-related-list { grid-template-columns: 1fr; }
}

.mdr-related-list li {
  margin: 0;
  padding: 0;
}
.mdr-related-list li::before { display: none; }

.mdr-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--mdr-cream);
  border: 1px solid rgba(20, 17, 13, 0.08);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.mdr-related-card:hover {
  border-color: var(--mdr-terracotta);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 17, 13, 0.08);
}

.mdr-related-card__cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mdr-sable);
}

.mdr-related-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mdr-related-card__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mdr-related-card__cat {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mdr-terracotta);
}

.mdr-related-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--mdr-ink);
  margin: 0;
}

.mdr-related-card__meta {
  font-size: 11.5px;
  color: rgba(20, 17, 13, 0.55);
  margin-top: 4px;
}

/* ============================================================ *
 *  Category archive (taxonomy-product_cat.php) layout
 * ============================================================ */

.mdr-cat-archive {
  background: var(--mdr-cream);
}

.mdr-cat-archive__hero {
  /* Slightly less tall so the catalog body shows above the fold */
  min-height: 60vh;
}

.mdr-cat-archive__body {
  background: #ffffff;
  padding: 6vh 5vw 8vh;
}

.mdr-cat-archive__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .mdr-cat-archive__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ----- Sidebar ---------------------------------------------- */

.mdr-cat-sidebar {
  position: sticky;
  top: 110px;
  align-self: start;
}

@media (max-width: 900px) {
  .mdr-cat-sidebar {
    position: static;
  }
}

.mdr-cat-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(20, 17, 13, 0.12);
}

.mdr-cat-sidebar__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mdr-terracotta);
}

.mdr-cat-sidebar__reset {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(20, 17, 13, 0.62);
  text-decoration: none;
  transition: color 180ms ease;
}

.mdr-cat-sidebar__reset:hover {
  color: var(--mdr-terracotta);
}

.mdr-cat-sidebar__group {
  border-bottom: 1px solid rgba(20, 17, 13, 0.08);
  padding: 10px 0;
}

.mdr-cat-sidebar__group summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 24px 6px 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--mdr-ink);
  position: relative;
  user-select: none;
}

.mdr-cat-sidebar__group summary::-webkit-details-marker { display: none; }

.mdr-cat-sidebar__group summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: var(--mdr-terracotta);
  transition: transform 200ms ease;
}

.mdr-cat-sidebar__group[open] summary::after {
  content: '−';
}

.mdr-cat-sidebar__list {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 17, 13, 0.32) transparent;
}

.mdr-cat-sidebar__list::-webkit-scrollbar {
  width: 4px;
}
.mdr-cat-sidebar__list::-webkit-scrollbar-thumb {
  background: rgba(20, 17, 13, 0.32);
  border-radius: 2px;
}

.mdr-cat-sidebar__list li {
  margin: 0;
  padding: 0;
}
.mdr-cat-sidebar__list li::before { display: none; }

.mdr-cat-facet {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  text-decoration: none;
  color: var(--mdr-ink);
  border-radius: 3px;
  transition: background 160ms ease, color 160ms ease;
}

.mdr-cat-facet:hover {
  background: rgba(192, 119, 90, 0.06);
  color: var(--mdr-terracotta);
}

.mdr-cat-facet.is-checked {
  color: var(--mdr-terracotta);
  font-weight: 500;
}

.mdr-cat-facet__check {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(20, 17, 13, 0.32);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--mdr-terracotta);
  background: #ffffff;
  flex-shrink: 0;
}

.mdr-cat-facet.is-checked .mdr-cat-facet__check {
  border-color: var(--mdr-terracotta);
  background: rgba(192, 119, 90, 0.08);
}

.mdr-cat-facet__name {
  line-height: 1.4;
}

.mdr-cat-facet__count {
  font-size: 11px;
  color: rgba(20, 17, 13, 0.45);
  font-variant-numeric: tabular-nums;
}

.mdr-cat-facet.is-checked .mdr-cat-facet__count {
  color: rgba(192, 119, 90, 0.7);
}

.mdr-cat-sidebar__empty {
  font-size: 13px;
  color: rgba(20, 17, 13, 0.55);
  font-style: italic;
}

/* ----- Grid ------------------------------------------------- */

.mdr-cat-grid {
  min-width: 0;
}

.mdr-cat-grid__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(20, 17, 13, 0.1);
}

.mdr-cat-grid__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 500;
  color: var(--mdr-ink);
  margin: 0;
  letter-spacing: -0.005em;
}

.mdr-cat-grid__sort .woocommerce-ordering {
  margin: 0;
}

.mdr-cat-grid__sort select {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  padding: 8px 12px;
  border: 1px solid rgba(20, 17, 13, 0.2);
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
}

/* Style the WC product loop within our grid context */
.mdr-cat-grid ul.products,
.mdr-cat-grid .products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 1100px) {
  .mdr-cat-grid ul.products,
  .mdr-cat-grid .products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .mdr-cat-grid ul.products,
  .mdr-cat-grid .products {
    grid-template-columns: 1fr !important;
  }
}

.mdr-cat-grid ul.products li.product,
.mdr-cat-grid .products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none;
}
.mdr-cat-grid ul.products li.product::before,
.mdr-cat-grid .products li.product::before {
  display: none !important;
}

.mdr-cat-grid ul.products li.product img,
.mdr-cat-grid .products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mdr-cat-grid ul.products li.product:hover img,
.mdr-cat-grid .products li.product:hover img {
  transform: scale(1.04);
}

/* Image wrapper position: relative so we can layer the cart shortcut */
.mdr-cat-grid ul.products li.product > a:first-of-type,
.mdr-cat-grid .products li.product > a:first-of-type {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--mdr-sable);
}

/* The WC "Ajouter au panier" button is normally below the title.
   We pull it ON TOP of the image, hidden by default, fading in
   on hover. Keeps the card compact, surfaces the action quickly. */
.mdr-cat-grid ul.products li.product .add_to_cart_button,
.mdr-cat-grid ul.products li.product .product_type_simple,
.mdr-cat-grid ul.products li.product .product_type_variable,
.mdr-cat-grid ul.products li.product .product_type_external,
.mdr-cat-grid ul.products li.product .added_to_cart,
.mdr-cat-grid .products li.product .add_to_cart_button,
.mdr-cat-grid .products li.product .product_type_simple,
.mdr-cat-grid .products li.product .product_type_variable {
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) translateY(8px) !important;
  z-index: 5 !important;
  margin: 0 !important;
  opacity: 0 !important;
  transition: opacity 240ms ease, transform 240ms ease, background 200ms ease, color 200ms ease !important;
  background: rgba(20, 17, 13, 0.92) !important;
  color: var(--mdr-cream) !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 10px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

.mdr-cat-grid ul.products li.product:hover .add_to_cart_button,
.mdr-cat-grid ul.products li.product:hover .product_type_simple,
.mdr-cat-grid ul.products li.product:hover .product_type_variable,
.mdr-cat-grid ul.products li.product:hover .product_type_external,
.mdr-cat-grid ul.products li.product:hover .added_to_cart,
.mdr-cat-grid .products li.product:hover .add_to_cart_button,
.mdr-cat-grid .products li.product:hover .product_type_simple,
.mdr-cat-grid .products li.product:hover .product_type_variable {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.mdr-cat-grid ul.products li.product .add_to_cart_button:hover,
.mdr-cat-grid .products li.product .add_to_cart_button:hover {
  background: var(--mdr-terracotta) !important;
  color: var(--mdr-cream) !important;
}

/* Price unit suffix added by the woocommerce_get_price_html filter */
.mdr-cat-grid ul.products li.product .price .mdr-price-unit,
.mdr-cat-grid .products li.product .price .mdr-price-unit,
.mdr-price-unit {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(20, 17, 13, 0.55);
  margin-left: 2px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* On a single product page the suffix uses the same component */
.product .price .mdr-price-unit {
  font-size: 14px;
  color: rgba(20, 17, 13, 0.6);
  margin-left: 4px;
}

.mdr-cat-grid ul.products li.product .woocommerce-loop-product__title,
.mdr-cat-grid .products li.product .woocommerce-loop-product__title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--mdr-ink) !important;
  margin: 14px 0 6px !important;
  letter-spacing: 0;
  text-align: center;          /* user direction: centrer le titre */
  padding: 0 8px;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centre prices below the centered title */
.mdr-cat-grid ul.products li.product .price,
.mdr-cat-grid .products li.product .price {
  text-align: center;
  display: block;
  margin: 0 auto;
}

.mdr-cat-grid ul.products li.product .price,
.mdr-cat-grid .products li.product .price {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--mdr-terracotta);
  font-weight: 500;
}

.mdr-cat-grid ul.products li.product .button,
.mdr-cat-grid .products li.product .button {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--mdr-ink) !important;
  border: 1px solid rgba(20, 17, 13, 0.3) !important;
  border-radius: 3px !important;
  padding: 10px 14px !important;
  margin-top: 12px !important;
  transition: background 200ms ease, color 200ms ease;
}

.mdr-cat-grid ul.products li.product .button:hover,
.mdr-cat-grid .products li.product .button:hover {
  background: var(--mdr-ink) !important;
  color: var(--mdr-cream) !important;
}

/* Pagination */
.mdr-cat-grid .woocommerce-pagination,
.mdr-cat-grid nav.woocommerce-pagination {
  margin-top: 48px;
  text-align: center;
}

.mdr-cat-grid .page-numbers {
  display: inline-flex !important;
  list-style: none;
  gap: 8px;
  padding: 0;
}

.mdr-cat-grid .page-numbers li::before { display: none; }

.mdr-cat-grid .page-numbers a,
.mdr-cat-grid .page-numbers .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--mdr-ink);
  border: 1px solid rgba(20, 17, 13, 0.2);
  border-radius: 3px;
  background: #ffffff;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.mdr-cat-grid .page-numbers .current,
.mdr-cat-grid .page-numbers a:hover {
  background: var(--mdr-ink);
  color: var(--mdr-cream);
  border-color: var(--mdr-ink);
}

/* No products notice */
.mdr-cat-grid .woocommerce-no-products-found,
.mdr-cat-grid .woocommerce-info {
  padding: 40px 24px !important;
  background: rgba(192, 119, 90, 0.06) !important;
  border-left: 3px solid var(--mdr-terracotta) !important;
  font-size: 14.5px;
  color: var(--mdr-ink);
}

/* WC result count — small caption above the grid */
.mdr-cat-grid .woocommerce-result-count {
  display: none;
}

/* ============================================================ *
 *  Wishlist page extras — howto steps + gallery link variant
 * ============================================================ */

.mdr-scene-howto { background: var(--mdr-cream); }
.mdr-scene-inspirations { background: #ffffff; }
.mdr-scene-wishlist { background: var(--mdr-cream); padding-top: 4vh; }

.mdr-howto-steps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .mdr-howto-steps { grid-template-columns: 1fr; gap: 24px; }
}

.mdr-howto-step {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mdr-howto-step::before { display: none; }

.mdr-howto-step__cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(20, 17, 13, 0.1);
}

.mdr-howto-step__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mdr-howto-step:hover .mdr-howto-step__cover img {
  transform: scale(1.04);
}

.mdr-howto-step__num {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 32px;
  font-weight: 500;
  color: var(--mdr-cream);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(20, 17, 13, 0.5);
}

.mdr-howto-step__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

.mdr-howto-step__body strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--mdr-ink);
  line-height: 1.3;
}

.mdr-howto-step__body span {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(20, 17, 13, 0.74);
}

/* Gallery-link variant — for wishlist inspirations grid */
.mdr-gallery-grid li > a.mdr-gallery-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.mdr-gallery-grid li > a.mdr-gallery-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mdr-gallery-grid li > a.mdr-gallery-link:hover img {
  transform: scale(1.06);
}

.mdr-gallery-grid li > a.mdr-gallery-link span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 14px 12px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--mdr-cream);
  letter-spacing: 0.01em;
  background: linear-gradient(180deg,
    rgba(20, 17, 13, 0) 0%,
    rgba(20, 17, 13, 0.55) 60%,
    rgba(20, 17, 13, 0.78) 100%);
  pointer-events: none;
}

/* ============================================================ *
 *  Mobile responsive overrides — make every story scene safe
 *  on a 375 px viewport without horizontal scroll
 * ============================================================ */

@media (max-width: 720px) {
  /* Tighten scene padding on mobile */
  .mdr-scene__split,
  .mdr-scene__centered-wrap {
    padding: 6vh 5vw;
  }

  .mdr-scene__content {
    padding: 6vh 5vw;
  }

  .mdr-scene__title {
    font-size: clamp(36px, 9vw, 60px);
  }

  .mdr-scene__title-md {
    font-size: clamp(28px, 7vw, 40px);
  }

  .mdr-scene__title-final {
    font-size: clamp(48px, 12vw, 80px);
  }

  /* Article body — match the scene padding pattern on mobile so
     the editorial wrap doesn't leave 5 vw on each side AND its
     own padding (would double-pad). */
  .mdr-article-body {
    padding: 6vh 5vw;
  }

  .mdr-article-body__inner {
    font-size: 16px;
    line-height: 1.7;
  }

  .mdr-article-body__inner > p:first-of-type::first-letter {
    font-size: 56px;
    padding: 4px 8px 0 0;
  }

  .mdr-article-body__inner > h2 {
    font-size: clamp(22px, 6vw, 28px);
    margin: 40px 0 14px;
  }

  .mdr-article-body__inner > blockquote {
    font-size: 18px;
    padding-left: 18px;
    margin: 24px 0;
  }

  /* Article hero meta line wraps cleanly */
  .mdr-article__meta {
    font-size: 11.5px;
    gap: 6px;
  }

  /* Form-host on mobile — reduce inline padding so inputs aren't
     cramped on the right */
  .mdr-scene__split-text {
    padding: 0;
  }

  /* Texture grid: 3 columns instead of 4 to keep cards readable */
  .mdr-form-host .md-texture-carousel {
    grid-template-columns: repeat(3, 1fr);
    max-height: 280px;
  }

  /* Channel grid + bullet grid + persona — single column */
  .mdr-channel-grid,
  .mdr-channel-list li {
    grid-template-columns: 1fr;
  }
  .mdr-channel-list li strong {
    margin-bottom: 4px;
  }

  /* Step list — keep numbered column but tighter */
  .mdr-step-list li {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
  .mdr-step-list .mdr-step__num {
    font-size: 28px;
  }

  /* Trend list — single column */
  .mdr-trend-list {
    grid-template-columns: 1fr;
  }
  .mdr-trend-list li {
    border-right: none;
    padding: 14px 0;
  }

  /* Booking widget — denser day grid */
  .mdr-booking__days,
  .mdr-booking__hours {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Shipping list — maintain readability */
  .mdr-shipping-list li {
    grid-template-columns: 36px 1fr auto;
    column-gap: 12px;
    padding: 10px 0;
  }

  /* SLA list — wraps cleanly */
  .mdr-sla-list li {
    grid-template-columns: 1fr auto;
    padding: 12px 0;
  }

  /* Contact list dark scene */
  .mdr-contact-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Stats row 4-col → stack 2x2 on mobile */
  .mdr-stat-row--4cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Booking summary wraps */
  .mdr-booking__summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .mdr-booking__reset {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .mdr-stat-row--4cols {
    grid-template-columns: 1fr;
  }
  .mdr-form-host .md-texture-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Even tighter article body */
  .mdr-article-body__inner > p:first-of-type::first-letter {
    font-size: 44px;
  }
}

/* Prevent any embedded image/iframe inside an article body from
   pushing the page horizontally on small screens */
.mdr-article-body__inner img,
.mdr-article-body__inner iframe,
.mdr-article-body__inner video {
  max-width: 100%;
  height: auto;
}

/* Ensure the WPForms / md_form chrome never overflows */
.mdr-form-host *,
.mdr-form-host *::before,
.mdr-form-host *::after {
  box-sizing: border-box;
  max-width: 100%;
}

/* Contact list (final scene) */
.mdr-contact-list {
  list-style: none;
  margin: 32px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
  text-align: left;
}

.mdr-contact-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid rgba(250, 246, 236, 0.18);
}

.mdr-contact-list li strong {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 246, 236, 0.6);
}

.mdr-contact-list li a {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--mdr-cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 246, 236, 0.3);
  padding-bottom: 2px;
  align-self: start;
  transition: color 180ms ease, border-color 180ms ease;
}

.mdr-contact-list li a:hover {
  color: var(--mdr-terracotta);
  border-color: var(--mdr-terracotta);
}

.mdr-contact-list li span {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(250, 246, 236, 0.62);
  margin-top: 4px;
}

@media (max-width: 720px) {
  .mdr-contact-list { grid-template-columns: 1fr; gap: 0; }
}

/* Body variant — smaller, used for the "trente minutes sans interruption" */
.mdr-scene__body--small {
  margin-top: 18px !important;
  font-size: 15px !important;
  opacity: 0.78;
  font-style: italic;
}

/* Ghost CTA — used inside the dark final contact scene */
.mdr-scene__cta--ghost {
  background: transparent !important;
  color: var(--mdr-cream) !important;
  border: 1px solid rgba(250, 246, 236, 0.5) !important;
  margin-top: 12px;
}

.mdr-scene__cta--ghost:hover {
  background: var(--mdr-cream) !important;
  color: var(--mdr-ink) !important;
  border-color: var(--mdr-cream) !important;
}