/* Hallmark · macrostructure: Long Document — chronologie · genre: editorial
 * LE MOULE des pages produit (« un système, trois températures ») :
 * toute la STRUCTURE vit ici, scopée .page-produit ; chaque page ne charge
 * en plus que sa feuille de température qui pose --temp / --temp-lit /
 * --temp-hair / --temp-soft (Rest = braise, Stay = aube, Suite = bronze).
 * Se charge APRÈS css/landing-cine.css. Préfixe `html .page-produit` sur les
 * overrides : Vite peut inverser l'ordre des feuilles (piège connu). */

/* La température : tout ce qui était bronze sur les pages sœurs prend --temp. */
html .page-produit ::selection { background: var(--temp-soft-strong, rgba(194, 163, 107, 0.32)); }
html .page-produit .hero-kicker { color: var(--temp-lit); }
html .page-produit .hero-kicker::before { background: var(--temp); }
html .page-produit .sec-kicker { color: var(--temp-lit); }
html .page-produit .sec-kicker::before { background: var(--temp); }
html .page-produit .benefit-card:hover::before { color: var(--temp-lit); }
html .page-produit .btn-primary { color: var(--temp-lit); border-color: var(--temp-hair); }
html .page-produit .btn-primary:hover { border-color: var(--temp-lit); background: var(--temp-soft); }
html .page-produit .footer-links a:hover { color: var(--temp-lit); }

/* landing-cine.css n'a pas de :focus-visible (vitrine.css oui) — on le pose ici. */
html .page-produit a:focus-visible,
html .page-produit button:focus-visible {
  outline: 2px solid var(--temp-lit); outline-offset: 3px; border-radius: 2px;
}

/* ── Héro : ctas en ligne, lien tarifs discret ── */
.page-produit .rp-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 40px; }

.page-produit .rp-quiet {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2); padding-bottom: 4px; border-bottom: 1px solid var(--hair);
  transition: color 0.3s, border-color 0.3s;
}
.page-produit .rp-quiet:hover { color: var(--temp-lit); border-color: var(--temp-hair); }

/* ── La chronologie : rangées éditoriales dont le numéro est une HEURE ──
   Même ADN que les rangées numérotées de la vitrine (zéro carte-pastille),
   mais le compteur devient l'horloge de la maison. */
.page-produit .rp-service { padding: clamp(50px, 7vw, 100px) 24px; position: relative; z-index: 1; }
.page-produit .rp-service-inner { max-width: 1100px; margin: 0 auto; }

.page-produit .rp-h2 {
  font-family: Fraunces, Georgia, serif; font-optical-sizing: auto;
  font-size: clamp(28px, 3.6vw, 46px); font-weight: 350; letter-spacing: -0.02em;
  color: var(--ink); margin: 12px 0 clamp(28px, 4vw, 52px); max-width: 720px;
}
.page-produit .rp-line { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }

.page-produit .rp-moment {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 34px;
  padding: clamp(28px, 3.4vw, 40px) 0; border-bottom: 1px solid var(--hair);
}

.page-produit .rp-time {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: 0.18em; color: var(--temp-lit);
  padding-top: 7px; display: flex; align-items: baseline; gap: 12px;
}
.page-produit .rp-time::after { content: ''; flex: 1; height: 1px; background: var(--temp-hair); opacity: 0.5; transform: translateY(-4px); }

.page-produit .rp-moment h3 {
  font-family: Fraunces, Georgia, serif; font-optical-sizing: auto;
  font-size: clamp(19px, 2vw, 23px); font-weight: 420; letter-spacing: 0.005em;
  color: var(--ink); margin-bottom: 10px;
}
.page-produit .rp-moment p { color: var(--ink-2); font-size: 15px; line-height: 1.8; max-width: 640px; }

/* Les modules concernés : même index souligné que les puces du hero palace. */
.page-produit .rp-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; padding: 0; }

.page-produit .rp-tags li {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); padding-bottom: 6px; border-bottom: 1px solid var(--temp-hair);
}

/* ── Pont vers la gamme : bande calme sous double filet ── */
.page-produit .rp-bridge { padding: clamp(56px, 8vw, 104px) 24px; position: relative; z-index: 1; }

.page-produit .rp-bridge-inner {
  max-width: 1100px; margin: 0 auto;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: clamp(40px, 5vw, 60px) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 28px 48px;
}

.page-produit .rp-bridge h2 {
  font-family: Fraunces, Georgia, serif; font-optical-sizing: auto;
  font-size: clamp(24px, 3vw, 38px); font-weight: 350; letter-spacing: -0.015em;
  color: var(--ink); margin: 10px 0 14px;
}
.page-produit .rp-bridge p { color: var(--ink-2); font-size: 15.5px; line-height: 1.8; max-width: 560px; }

.page-produit .rp-link {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--temp-lit); padding-bottom: 5px; border-bottom: 1px solid var(--temp-hair);
  transition: gap 0.3s var(--ease), border-color 0.3s;
}
.page-produit .rp-link:hover { gap: 16px; border-color: var(--temp-lit); }

/* ── Mobile ── */
@media (max-width: 768px) {
  .page-produit .rp-moment { grid-template-columns: 1fr; }
  .page-produit .rp-time { padding-top: 0; }
  .page-produit .rp-service { padding: 48px 18px; }
  .page-produit .rp-bridge { padding: 48px 18px; }
  .page-produit .rp-bridge-inner { grid-template-columns: 1fr; }
  .page-produit .rp-ctas { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-produit .rp-link, .page-produit .rp-quiet { transition: none; }
}