/* ============================================================
   DILLAN — LP Viager Classique
   Page-specific components, layered on top of lp.css
   ============================================================ */

/* ─── WIDER CANVAS — tighter page gutters, more usable width ───
   Page-scoped overrides: other LPs keep the 1100px / 64px setup. */
:root{
  --container-max:1440px;
  --px-desktop:40px;
  --px-tablet:28px;
  --px-mobile:18px;
  --container-faq:1000px;
}

/* ─── HERO — text left / form card right ─────────────────── */

.hero-vc{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-8);align-items:start}
@media (max-width:1024px){.hero-vc{grid-template-columns:1fr;gap:var(--space-6)}}

.hero-kicker{font-size:var(--fs-body);font-weight:var(--fw-strong);color:var(--color-orange);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3)}

.hero-vc .hero-text{display:flex;flex-direction:column}
.hero-vc h1{font-size:var(--fs-h1);line-height:var(--lh-heading);color:var(--color-navy);margin-bottom:var(--space-5)}
.hero-vc .hero-body{font-size:var(--fs-body-lg);color:var(--color-text);line-height:var(--lh-body);margin-bottom:var(--space-6)}

/* Vertical benefit list (hero left column) */
.benefits-list{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6)}
.benefits-list li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--fs-body-lg);font-weight:var(--fw-strong);color:var(--color-navy);line-height:1.4}
.benefits-list .benefit-check{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--color-success);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;margin-top:1px}

/* Hero photo — sits under the benefit list on wide screens */
.hero-vc .hero-photo{width:100%;height:auto;border-radius:var(--radius-lg);display:block}
@media (max-width:1024px){.hero-vc .hero-photo{display:none}}

/* ─── HERO MINI-FORM CARD ────────────────────────────────── */

.minform-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden;position:sticky;top:96px}
@media (max-width:1024px){.minform-card{position:static}}

.minform-head{background:var(--color-navy);padding:var(--space-5) var(--space-6)}
.minform-head h2{font-size:var(--fs-h3);color:var(--color-surface);line-height:1.25}
.minform-head p{font-size:16px;color:rgba(255,255,255,.8);margin-top:var(--space-2)}

.minform-body{padding:var(--space-6)}
@media (max-width:768px){.minform-body{padding:var(--space-5) var(--space-4)}.minform-head{padding:var(--space-5) var(--space-4)}}

/* Compact overrides for the in-hero form */
.minform-body .form-group{margin-bottom:var(--space-5)}
.minform-body .form-label{font-size:var(--fs-body)}
.minform-body .radio-group{flex-direction:row;flex-wrap:wrap;gap:var(--space-3)}
.minform-body .radio-group .radio-option{flex:1 1 0;min-width:120px}

/* Step progress */
.minform-steps{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-5)}
.minform-steps span{flex:1;height:4px;border-radius:2px;background:var(--color-divider)}
.minform-steps span.is-active{background:var(--color-orange)}
.minform-step-label{font-size:var(--fs-caption);font-weight:var(--fw-strong);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2)}

.minform-back{background:none;border:none;padding:0;margin-top:var(--space-4);font-family:inherit;font-size:16px;color:var(--color-navy);text-decoration:underline;cursor:pointer}
.minform-back:hover{color:var(--color-orange)}

#minform-step-2{display:none}
.minform-card.is-step2 #minform-step-1{display:none}
.minform-card.is-step2 #minform-step-2{display:block}

/* ─── POURQUOI DILLAN — 3 pillars ────────────────────────── */

.section-why{background:var(--color-surface);border-block:1px solid var(--color-divider);padding-block:var(--space-8)}
.why-lede{max-width:var(--container-text);margin-inline:auto;text-align:center;font-size:var(--fs-body-lg);color:var(--color-text);line-height:var(--lh-body);margin-bottom:var(--space-7)}

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

.pillar-card{background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);text-align:center;align-items:center}
.pillar-icon{width:56px;height:56px;border-radius:50%;background:rgba(226,133,0,.12);color:var(--color-orange);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2)}
.pillar-card strong{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-heading);color:var(--color-navy)}
.pillar-card p{font-size:var(--fs-body);color:var(--color-text-muted);line-height:var(--lh-body)}

/* ─── QUELLE SOLUTION — 4 need→answer rows ───────────────── */

.section-solutions{padding-block:var(--space-8)}
.solutions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
@media (max-width:768px){.solutions-grid{grid-template-columns:1fr}}

.solution-card{background:var(--color-surface);border:1px solid var(--color-divider);border-left:4px solid var(--color-orange);border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.solution-need{font-size:var(--fs-body);color:var(--color-text-muted);font-weight:var(--fw-strong)}
.solution-answer{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-heading);color:var(--color-navy);line-height:1.25}
.solution-note{font-size:16px;color:var(--color-text-muted);line-height:var(--lh-body)}

/* ─── COMMENT ÇA FONCTIONNE — 5 steps ────────────────────── */

.hiw-grid--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1024px){.hiw-grid--5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hiw-grid--5{grid-template-columns:1fr}}

/* ─── RÉASSURANCE — 3 trust items ────────────────────────── */

.trust-grid{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){.trust-grid{grid-template-columns:1fr}}

.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3)}
.trust-icon{width:48px;height:48px;color:var(--color-navy);display:flex;align-items:center;justify-content:center}
.trust-item strong{font-size:var(--fs-h4);font-weight:var(--fw-heading);color:var(--color-navy)}
.trust-item p{font-size:16px;color:var(--color-text-muted);line-height:var(--lh-body)}


/* ─── STICKY CTA BAR — all viewports ─────────────────────────
   Appears once the hero form card scrolls out of view. JS only
   toggles .is-visible; CSS owns positioning and layout. */

.sticky-mobile-cta{
  display:block;position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--color-surface);border-top:1px solid var(--color-divider);
  box-shadow:0 -4px 20px rgba(0,53,95,.14);
  padding:var(--space-3) 0;
  transform:translateY(110%);opacity:0;visibility:hidden;
  transition:transform var(--duration-reveal) var(--ease-ui),opacity var(--duration-reveal) var(--ease-ui),visibility var(--duration-reveal);
}
.sticky-mobile-cta.is-visible{transform:translateY(0);opacity:1;visibility:visible}

.sticky-cta-inner{
  max-width:var(--container-max);margin-inline:auto;padding-inline:var(--px-desktop);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
}
.sticky-cta-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.sticky-cta-text strong{font-family:var(--font-heading);font-size:var(--fs-h4);font-weight:var(--fw-heading);color:var(--color-navy);line-height:1.25}
.sticky-cta-text span{font-size:var(--fs-caption);color:var(--color-text-muted)}
.sticky-mobile-cta .btn-primary{flex:0 0 auto}

@media (max-width:1024px){
  .sticky-cta-inner{padding-inline:var(--px-tablet)}
}

/* Mobile: drop the copy, button goes full width */
@media (max-width:768px){
  .sticky-mobile-cta{padding:var(--space-3) 0}
  .sticky-cta-inner{padding-inline:var(--px-mobile)}
  .sticky-cta-text{display:none}
  .sticky-mobile-cta .btn-primary{flex:1 1 auto;width:100%}
}

/* Reserve room so the bar never hides the footer's legal line */
body:has(.sticky-mobile-cta.is-visible){padding-bottom:96px}
@media (max-width:768px){
  body{padding-bottom:0}
  body:has(.sticky-mobile-cta.is-visible){padding-bottom:88px}
}