/* Hallmark · theme: système Kyneria · température: BRONZE (Suite)
 * Le bronze EST la couleur du système : la Suite se distingue par sa
 * structure — le diptyque (les deux métiers côte à côte, chacun dans sa
 * température, une porte au milieu). La structure commune vit dans
 * css/produit.css ; ici : bronze + les styles du diptyque. */
.page-suite {
  --temp: #C2A36B;
  --temp-lit: #C2A36B; /* le bronze passe l'AA directement sur la nuit (≈7.9:1) */
  --temp-hair: rgba(194, 163, 107, 0.55);
  --temp-soft: rgba(194, 163, 107, 0.10);
  --temp-soft-strong: rgba(194, 163, 107, 0.32);

  /* Les températures des deux moitiés du diptyque. */
  --braise-lit: #D0703F; --braise-hair: rgba(176, 83, 47, 0.55);
  --aube-lit: #E0A98F; --aube-hair: rgba(192, 142, 124, 0.55);
}

/* ── Le diptyque : un métier de chaque côté, une porte au milieu ── */
.page-suite .sd-section { padding: clamp(50px, 7vw, 100px) 24px; position: relative; z-index: 1; }
.page-suite .sd-inner { max-width: 1100px; margin: 0 auto; }

.page-suite .sd-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border-block: 1px solid var(--hair);
  margin-top: clamp(28px, 4vw, 52px);
}
.page-suite .sd-half { padding: clamp(34px, 4.5vw, 56px) clamp(24px, 4vw, 56px); }
.page-suite .sd-half + .sd-half { border-inline-start: 1px solid var(--hair); }

.page-suite .sd-label {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.28em;
  text-transform: uppercase; margin-bottom: 18px;
}
.page-suite .sd-label::before { content: ''; width: 34px; height: 1px; opacity: 0.7; }
.page-suite .sd-half--rest .sd-label { color: var(--braise-lit); }
.page-suite .sd-half--rest .sd-label::before { background: var(--braise-lit); }
.page-suite .sd-half--stay .sd-label { color: var(--aube-lit); }
.page-suite .sd-half--stay .sd-label::before { background: var(--aube-lit); }

.page-suite .sd-half h3 {
  font-family: Fraunces, Georgia, serif; font-optical-sizing: auto;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 380; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 12px;
}
.page-suite .sd-half p { color: var(--ink-2); font-size: 15px; line-height: 1.8; max-width: 46ch; }

.page-suite .sd-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding-bottom: 5px; transition: gap 0.3s var(--ease);
}
.page-suite .sd-cta:hover { gap: 16px; }
.page-suite .sd-half--rest .sd-cta { color: var(--braise-lit); border-bottom: 1px solid var(--braise-hair); }
.page-suite .sd-half--stay .sd-cta { color: var(--aube-lit); border-bottom: 1px solid var(--aube-hair); }

@media (max-width: 768px) {
  .page-suite .sd-section { padding: 48px 18px; }
  .page-suite .sd-grid { grid-template-columns: 1fr; }
  .page-suite .sd-half { padding: 30px 0; }
  .page-suite .sd-half + .sd-half { border-inline-start: 0; border-top: 1px solid var(--hair); }
}

@media (prefers-reduced-motion: reduce) {
  .page-suite .sd-cta { transition: none; }
}