/* ============================================================
   DILLAN — LP Rente vs Non Rente · page-specific components
   Layered on top of lp.css + lp-viager.css
   ============================================================ */

/* Screen-reader-only utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ─── HEADER — bigger phone CTA ──────────────────────────── */
.header-tel-btn{font-size:20px;font-weight:var(--fw-strong);padding:var(--space-3) var(--space-6)}
.header-tel-btn svg{width:20px;height:20px}
@media (max-width:768px){.header-tel-btn{font-size:16px;padding:var(--space-3) var(--space-4)}}

.hero-kicker{font-family:var(--font-heading);font-size:var(--fs-h1);font-weight:var(--fw-heading);color:var(--color-navy);text-transform:none;letter-spacing:-.01em;line-height:1.1;margin-bottom:var(--space-5)}
.hero-kicker::after{content:"";display:block;width:72px;height:4px;background:var(--color-orange);border-radius:2px;margin-top:var(--space-4)}
@media (max-width:768px){.hero-kicker{font-size:var(--fs-h2)}}

/* ─── HERO — dual value prop, redesigned ─────────────────── */

.hero-duo{position:relative;display:flex;flex-direction:column;gap:0;margin-bottom:var(--space-5);padding-left:var(--space-5);border-left:4px solid var(--color-orange)}
.hero-duo .duo-line{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-heading);color:var(--color-navy);line-height:1.25}
.hero-duo .duo-line em{font-style:normal;color:var(--color-orange)}
.hero-duo .duo-ou{display:flex;align-items:center;gap:var(--space-3);margin-block:var(--space-3);font-size:var(--fs-caption);font-weight:var(--fw-strong);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.14em}
.hero-duo .duo-ou::after{content:"";flex:0 0 64px;height:1px;background:var(--color-divider)}
@media (max-width:768px){
  .hero-duo{padding-left:var(--space-4)}
  .hero-duo .duo-line{font-size:var(--fs-h4)}
}

/* Inline hero checks (horizontal row) */
.hero-checks{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-6)}
.hero-checks li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-body);font-weight:var(--fw-strong);color:var(--color-navy)}
.hero-checks .benefit-check{width:22px;height:22px;font-size:13px}

/* ─── COMPARISON TABLE ───────────────────────────────────── */

.section-compare{background:var(--color-surface);border-block:1px solid var(--color-divider);padding-block:var(--space-8)}

.compare-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg)}
.compare-table th,.compare-table td{padding:var(--space-4) var(--space-5);text-align:left;font-size:var(--fs-body);line-height:var(--lh-body);border-bottom:1px solid var(--color-divider)}
.compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:none}
.compare-table thead th{background:var(--color-navy);color:var(--color-surface);font-family:var(--font-heading);font-size:var(--fs-h4);font-weight:var(--fw-heading);padding-block:var(--space-5)}
.compare-table thead th:first-child{background:var(--color-navy)}
.compare-table tbody th{font-weight:var(--fw-strong);color:var(--color-text-muted);width:18%;background:var(--color-surface)}
.compare-table tbody td{color:var(--color-navy);width:41%}
.compare-table tbody td strong{color:var(--color-orange)}
.compare-table .cell-muted{color:var(--color-text-muted)}

/* Stacked cards on mobile */
@media (max-width:768px){
  .compare-table,.compare-table thead,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;width:100%}
  .compare-table thead{display:none}
  .compare-table tbody tr{border-bottom:1px solid var(--color-divider)}
  .compare-table tbody th{padding-bottom:0;background:var(--color-bg)}
  .compare-table tbody td{border-bottom:none;padding-top:var(--space-2)}
  .compare-table tbody td::before{content:attr(data-col);display:block;font-size:var(--fs-caption);font-weight:var(--fw-strong);color:var(--color-orange);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
}

/* ─── POURQUOI DILLAN — two solution cards ───────────────── */

.duo-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
@media (max-width:768px){.duo-cards{grid-template-columns:1fr}}

.duo-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.duo-card--accent{border-top:4px solid var(--color-orange)}
.duo-card--navy{border-top:4px solid var(--color-navy)}
.duo-card h3{font-size:var(--fs-h3);color:var(--color-navy);line-height:1.25}
.duo-card ul{display:flex;flex-direction:column;gap:var(--space-3)}
.duo-card li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--fs-body);color:var(--color-text);line-height:1.45}
.duo-card .benefit-check{flex:0 0 auto;width:24px;height:24px;font-size:14px;margin-top:0}

/* ─── PREUVES SOCIALES — key figures row ─────────────────── */

.keyfigs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-7);padding-top:var(--space-7);border-top:1px solid var(--color-divider)}
@media (max-width:768px){.keyfigs{grid-template-columns:1fr}}
.keyfig{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2)}
.keyfig strong{font-family:var(--font-heading);font-size:var(--fs-h2);font-weight:var(--fw-heading);color:var(--color-orange);line-height:1.1}
.keyfig p{font-size:var(--fs-body);color:var(--color-text-muted);line-height:var(--lh-body)}