/* res.css — styles pages produit résidences + page Lyon 9 */

/* ── Breadcrumb ── */
.res-breadcrumb {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.res-breadcrumb a { color: var(--bronze); text-decoration: none; }
.res-breadcrumb a:hover { text-decoration: underline; }
.res-breadcrumb-sep { margin: 0 8px; color: var(--rule); }

/* ── Sticky bar ── */
.res-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--parchment);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  transition: transform .3s ease;
  pointer-events: none;
}
.res-sticky-bar.visible { transform: translateY(0); pointer-events: auto; }
.res-sticky-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}
.res-sticky-name {
  font-family: var(--serif-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.res-sticky-price {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--bronze);
  letter-spacing: .03em;
}

/* ── Hero section ── */
.res-hero { padding: 32px 0 0; }
.res-hero-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 960px) { .res-hero-grid { grid-template-columns: 1fr; } }

/* ── Gallery ── */
.res-gallery-main {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--parchment-2);
}
.res-gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.res-gallery-img.on { opacity: 1; }
.res-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.res-thumbs .thumb {
  width: 80px;
  height: 56px;
  border: 2px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: none;
  opacity: .55;
  transition: opacity .2s, border-color .2s;
  flex-shrink: 0;
}
.res-thumbs .thumb:hover { opacity: .8; }
.res-thumbs .thumb.on { border-color: var(--bronze); opacity: 1; }
.res-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Sidebar card (sticky) ── */
.res-sidebar-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 28px;
  background: var(--parchment);
  position: sticky;
  top: 72px;
}
.res-card-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 8px;
}
.res-card-name {
  font-family: var(--serif-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.15;
}
.res-card-quartier {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .05em;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.res-price-from {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.res-price-amount {
  font-family: var(--serif-display);
  font-size: 38px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1;
}
.res-price-unit {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-soft);
  margin-left: 4px;
}
.res-price-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: .03em;
  margin-top: 4px;
  margin-bottom: 24px;
}
.res-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--bronze);
  color: var(--parchment);
  border: 1px solid var(--bronze);
  border-radius: 3px;
  padding: 15px 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.res-cta-primary:hover { opacity: .85; }
.res-cta-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 12px 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.res-cta-secondary:hover { border-color: var(--bronze); }
.res-card-guarantees {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  line-height: 2;
  text-align: center;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

/* ── Product body grid ── */
.res-body { padding: 56px 0; }
.res-body-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) { .res-body-grid { grid-template-columns: 1fr; } }
.res-aside-sticky { position: sticky; top: 72px; }

/* ── Specs table ── */
.res-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 32px;
}
.res-specs-table tr { border-bottom: 1px solid var(--rule); }
.res-specs-table th {
  text-align: left;
  padding: 12px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  width: 38%;
  font-weight: 400;
  vertical-align: top;
}
.res-specs-table td {
  padding: 12px 0;
  font-family: var(--serif-body);
  font-size: 15px;
  color: var(--ink);
}

/* ── Highlights list ── */
.res-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.res-highlights li {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif-body);
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.res-highlights li::before {
  content: '✓';
  color: var(--bronze);
  font-family: var(--mono);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Transport ── */
.res-transport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 20px 0 36px;
}
.res-transport-item {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
}
.res-transport-mode {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 3px;
}
.res-transport-name {
  font-family: var(--serif-body);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.res-transport-time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
}

/* ── APL box ── */
.res-apl-box {
  background: color-mix(in oklab, var(--bronze) 7%, var(--parchment));
  border: 1px solid color-mix(in oklab, var(--bronze) 25%, transparent);
  border-radius: 4px;
  padding: 22px 26px;
  margin: 0 0 32px;
}
.res-apl-box h4 {
  font-family: var(--serif-display);
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 8px;
}
.res-apl-box p {
  font-family: var(--serif-body);
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  line-height: 1.65;
}

/* ── Aside mini card (repeated CTA in body) ── */
.res-aside-mini {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 22px;
  margin-bottom: 20px;
}
.res-aside-mini .res-price-amount { font-size: 28px; }
.res-aside-faq { margin-top: 20px; }
.res-faq-item { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.res-faq-item:last-child { border-bottom: none; }
.res-faq-q {
  font-family: var(--serif-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.res-faq-a {
  font-family: var(--serif-body);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ── Related residences ── */
.res-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
@media (max-width: 768px) { .res-related-grid { grid-template-columns: 1fr; } }
.res-related-card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.res-related-card:hover { border-color: var(--bronze); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.res-related-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.res-related-body { padding: 14px 16px; }
.res-related-name {
  font-family: var(--serif-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 3px;
}
.res-related-loc {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--bronze);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.res-related-price {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}

/* ── Section headers ── */
.res-section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 12px;
}
.res-h2 {
  font-family: var(--serif-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 20px;
}

/* ── Lyon 9 page ── */
.lyon9-hero { padding-top: 80px; padding-bottom: 56px; }
.lyon9-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 700px) { .lyon9-hero-stats { grid-template-columns: repeat(2, 1fr); } }
.lyon9-stat {
  text-align: center;
  padding: 22px 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.lyon9-stat .num {
  font-family: var(--serif-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--bronze);
  line-height: 1;
}
.lyon9-stat .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}
.lyon9-quartiers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 28px 0;
}
@media (max-width: 680px) { .lyon9-quartiers-grid { grid-template-columns: 1fr; } }
.lyon9-quartier-card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px 22px;
}
.lyon9-quartier-name {
  font-family: var(--serif-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.lyon9-quartier-desc {
  font-family: var(--serif-body);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.lyon9-res-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 32px;
}
@media (max-width: 680px) { .lyon9-res-grid { grid-template-columns: 1fr; } }
.lyon9-res-card {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.lyon9-res-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.lyon9-res-body { padding: 24px; }
.lyon9-res-name {
  font-family: var(--serif-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.lyon9-res-loc {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bronze);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.lyon9-res-tagline {
  font-family: var(--serif-body);
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  line-height: 1.6;
}
.lyon9-res-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.lyon9-res-spec { text-align: center; }
.lyon9-res-spec-val {
  font-family: var(--serif-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.lyon9-res-spec-key {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}

/* ── FAQ page ── */
.res-faq-list { margin: 24px 0 0; }
.res-faq-block {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}
.res-faq-block:first-child { border-top: 1px solid var(--rule); }
.res-faq-block h3 {
  font-family: var(--serif-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.res-faq-block p {
  font-family: var(--serif-body);
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.65;
}