/* Pages services éditoriales (MAM-494) — chargé uniquement par services/{sites-web,creation-graphique,
   marketing-digital,reseaux-sociaux,conseil}.html, après app.css. Uniquement des tokens du design system. */

/* Rythme vertical resserré : le ticket relevait des vides excessifs entre sections. */
.section{padding:var(--s-8) 0}
.sec-head{margin-bottom:var(--s-6)}

/* Prestations détaillées : cartes .lc du design system, avec livrables. */
.svc-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.svc-offer{padding:var(--s-5) var(--s-5) var(--s-6);display:flex;flex-direction:column}
.svc-offer .svc-ico{width:44px;height:44px;font-size:1.25rem;margin-bottom:var(--s-3)}
.svc-offer h3{margin:0 0 var(--s-2)}
.svc-offer>p{color:var(--muted);font-size:.93rem;line-height:1.6}
.svc-out{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line);display:grid;gap:.4rem;font-size:.86rem;color:var(--ink-2)}
.svc-out li{display:flex;gap:.55rem;align-items:baseline}
.svc-out li::before{content:"";flex-shrink:0;width:.45rem;height:.45rem;border-radius:50%;background:var(--lc);transform:translateY(-.08rem)}
.svc-note{margin-top:var(--s-5);font-size:.92rem;color:var(--muted)}
.svc-note a{color:var(--fire);font-weight:600;white-space:nowrap}

/* Méthode : numéros lisibles (contraste insuffisant relevé par le ticket) et livrable par étape. */
.svc-steps{gap:var(--s-6)}
.svc-steps .step::before{color:var(--fire)}
.step-t{font-family:var(--body);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:.35rem;position:relative}
.svc-steps .step p{font-size:.92rem;color:var(--muted)}
.svc-steps .step-out{margin-top:var(--s-3);font-size:.85rem;color:var(--ink-2);font-weight:600}
.step-out span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:.15rem}

/* Engagements */
.svc-why{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-6);margin-top:0}
.why-t{font-family:var(--body);font-weight:700;font-size:1.02rem;color:var(--ink);margin-bottom:.2rem}

/* Réalisations vérifiables */
.svc-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--s-5)}
.svc-case{padding:var(--s-5);display:flex;flex-direction:column}
.svc-case h3{margin:var(--s-2) 0}
.svc-case .lnk{margin-top:auto;padding-top:var(--s-4)}

/* Questions fréquentes : .faq et .qa du design system. */
.faq{margin-top:0}

/* Articles : bloc compact, pas une section pleine hauteur. */
.svc-reads-sec{padding-top:0}
.svc-reads{max-width:820px;margin:0 auto;padding:var(--s-5) var(--s-6);border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}
.svc-reads ul{margin-top:var(--s-3);display:grid;gap:.15rem}
.svc-reads a{display:flex;justify-content:space-between;gap:var(--s-4);padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;transition:color .2s}
.svc-reads li:last-child a{border-bottom:0}
.svc-reads a:hover,.svc-reads a:focus-visible{color:var(--fire)}

@media(max-width:1023px){
  .svc-offers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .section{padding:var(--s-7) 0}
  .svc-offers,.svc-why{grid-template-columns:1fr}
  .svc-reads{padding:var(--s-4) var(--s-5)}
}