:root {
  --douce-coral: #E97B52;
  --douce-coral-dark: #C9603F;
  --douce-cocoa: #2C2420;
  --douce-muted: #6E625C;
  --douce-ivory: #FFFCF9;
  --douce-peach: #FFF1E8;
  --douce-sand: #F4ECE5;
  --douce-sage: #74806B;
}
.douce-section { padding-block: clamp(3rem, 7vw, 6rem); }
.douce-section--compact { padding-block: 1.5rem; }
.douce-section--peach { background: var(--douce-peach); }
.douce-section--sand { background: var(--douce-sand); }
.douce-hero { min-height: min(72vh, 720px); display: grid; align-content: center; }
.douce-hero--small { min-height: 440px; }
.douce-eyebrow { color: var(--douce-coral-dark); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.douce-lead { color: var(--douce-muted); font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 720px; }
.douce-grid { display: grid; gap: 1.5rem; }
.douce-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.douce-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.douce-card { border: 1px solid rgba(44,36,32,.10); border-radius: 12px; background: #fff; padding: clamp(1.35rem, 3vw, 2rem); color: var(--douce-cocoa); }
.douce-card--link { display: block; color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.douce-card--link:hover { transform: translateY(-3px); border-color: var(--douce-coral); }
.douce-card a, .douce-product-card a { color: var(--douce-coral-dark); font-weight: 700; }
.douce-card blockquote, blockquote.douce-card { margin: 0; }
.douce-card cite { display: block; margin-top: 1rem; color: var(--douce-muted); font-style: normal; font-weight: 700; }
.douce-step { color: var(--douce-coral); font-size: 2rem; font-family: Georgia, serif; }
.douce-reassurance strong, .douce-reassurance span { display: block; }
.douce-reassurance span { color: var(--douce-muted); font-size: .9rem; margin-top: .3rem; }
.douce-diagnostic { display: grid; gap: 1rem; }
.douce-placeholder { border-left: 4px solid var(--douce-coral); padding: 1rem 1.25rem; background: #fff8f4; }
@media (max-width: 900px) {
  .douce-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .douce-grid--3 { grid-template-columns: 1fr; }
  .douce-hero { min-height: auto; }
}
@media (max-width: 560px) {
  .douce-grid--4 { grid-template-columns: 1fr; }
  .douce-section { padding-block: 3rem; }
}