/* Page "Gestion locative" — utilise les variables globales de variables.css
   (polices et couleurs déjà chargées par base.html.twig, rien à réimporter ici) */

/* Hero */
.hero{
  max-width:760px;
  margin:64px auto 8px;
  text-align:center;
  padding:0 24px;
}
.eyebrow{
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--letter-wide);
  color:var(--c-brand);
  text-transform:uppercase;
  margin-bottom:14px;
}
h1.page-title{
  font-family:var(--font-display);
  font-weight:var(--fw-semibold);
  font-size:44px;
  color:var(--c-text);
  margin-bottom:18px;
}
.hero p{
  font-size:var(--fs-md);
  color:var(--c-text-secondary);
  line-height:var(--lh-relaxed);
}

/* Section wrapper */
.section{
  max-width:1040px;
  margin:0 auto;
  padding:56px 24px;
}
.section-title{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:var(--fw-semibold);
  text-align:center;
  margin-bottom:8px;
  color:var(--c-text);
}
.section-sub{
  text-align:center;
  color:var(--c-text-secondary);
  font-size:var(--fs-md);
  max-width:560px;
  margin:0 auto 40px;
}

/* Editorial service list */
.service-list{
  border-top:1px solid var(--c-border);
}
.service-row{
  display:flex;
  gap:40px;
  padding:36px 0;
  border-bottom:1px solid var(--c-border);
  align-items:flex-start;
}
.service-row .num{
  font-family:var(--font-display);
  font-size:44px;
  font-weight:var(--fw-semibold);
  color:var(--c-brand);
  width:64px;
  flex-shrink:0;
  line-height:1;
}
.service-row .content{flex:1;}
.service-row h3{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:var(--fw-semibold);
  color:var(--c-text);
  margin-bottom:8px;
}
.service-row p{
  font-size:var(--fs-md);
  line-height:var(--lh-relaxed);
  color:var(--c-text-secondary);
  max-width:560px;
}

/* Timeline */
.timeline{
  display:flex;
  position:relative;
  margin-top:8px;
  gap:32px;
}
.timeline::before{
  content:'';
  position:absolute;
  top:6px;
  left:0;
  right:0;
  height:1px;
  background:var(--c-border);
}
.timeline .step{
  flex:1;
  min-width:160px;
  padding-top:34px;
  position:relative;
}
.timeline .step::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:13px;
  height:13px;
  border-radius:var(--r-full);
  background:var(--c-brand);
}
.timeline .step-label{
  font-size:var(--fs-xs);
  letter-spacing:var(--letter-wide);
  color:var(--c-brand);
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  margin-bottom:10px;
}
.timeline h4{
  font-family:var(--font-display);
  font-size:17px;
  margin-bottom:8px;
  color:var(--c-text);
}
.timeline p{
  font-size:var(--fs-sm);
  color:var(--c-text-secondary);
  line-height:var(--lh-normal);
}

/* CTA card */
.cta-card{
  max-width:640px;
  margin:16px auto 0;
  background:var(--c-card-bg);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  padding:48px 56px;
  text-align:center;
}
.cta-card h3{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:var(--fw-semibold);
  margin-bottom:10px;
  color:var(--c-text);
}
.cta-card p{
  color:var(--c-text-secondary);
  font-size:var(--fs-md);
  margin-bottom:28px;
}
.cta-card hr{
  border:none;
  border-top:1px solid var(--c-border);
  margin:24px 0;
}
.cta-links{
  font-size:var(--fs-sm);
  color:var(--c-text-secondary);
}

@media (max-width:800px){
  h1.page-title{font-size:32px;}
  .cta-card{padding:36px 24px;}
  .service-row{gap:20px;}
  .service-row .num{font-size:32px; width:44px;}
  .timeline{flex-direction:column; gap:28px;}
  .timeline::before{display:none;}
  .timeline .step{padding-top:0; padding-left:24px;}
  .timeline .step::before{top:6px; left:0;}
}