/* ============================================================
   PFM Lyon — pages de service (textes SEO 2026-09)
   lavage-mortuaire-musulman, transport-funeraire, rapatriement-international
   Pas de frame Figma : composées à partir des composants existants.
   Chargée APRÈS page-notre-devoir.css (hero de page, .btn--h44,
   .btn--outline-ink, .section-head--on-dark, .contact-final).
   ============================================================ */

/* ================= Rythme vertical ================= */
main > .svc-split,
main > .svc-steps,
main > .svc-panel,
main > .svc-prose { margin-top: 104px; }
main > .svc-split--first { margin-top: 96px; }

/* ================= Hero ================= */
.svc-hero .page-hero__veil { background: var(--g-svc-hero-veil); }
.svc-hero .hero__content { max-width: 880px; }
.svc-hero .hero__desc { max-width: 820px; }

/* ================= Texte + image ================= */
/* Le cadre or décalé (::before) ne doit jamais créer de défilement horizontal */
.svc-split { overflow-x: clip; }
.svc-split__inner {
  display: flex;
  align-items: center;
  gap: 76px;
}
.svc-split--reverse .svc-split__inner { flex-direction: row-reverse; }
.svc-split__content {
  flex: 1 1 600px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.svc-split__media {
  position: relative;
  flex: 0 1 488px;
  isolation: isolate;
}
.svc-split__media img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--r-card-lg);
}
/* Cadre or décalé, même esprit que les médias de l'accueil */
.svc-split__media::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  z-index: -1;
  border: 1px solid var(--c-primary-50);
  border-radius: var(--r-card-lg);
}
.svc-split--reverse .svc-split__media::before { inset: 24px 24px -24px -24px; }
.svc-split__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
.svc-split .check-list { margin-top: 4px; }

/* ================= Étapes (bande crème + 3 cartes) ================= */
.svc-steps {
  background: var(--c-cream);
  padding-block: 88px;
}
.svc-steps__head { max-width: 895px; margin-inline: auto; }
.svc-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.svc-steps__card {
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-btn);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.svc-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--c-accent-2);
  color: var(--c-white);
  font: var(--t-h6);
}
.svc-steps__card h3 { font: var(--t-h5); color: var(--c-title); }
.svc-steps__card p { font: var(--t-body); color: var(--c-body); }
.svc-steps__note {
  max-width: 895px;
  margin: 40px auto 0;
  text-align: center;
  font: var(--t-body);
  color: var(--c-body);
}

/* ================= Panneau bordeaux (prix / délais) ================= */
.svc-panel__card {
  position: relative;
  overflow: hidden;
  background: var(--c-brand);
  border-radius: var(--r-card-lg);
  padding: 64px;
}
.svc-panel__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 56px;
}
.svc-panel__row .section-head { flex: 1 1 auto; }
.svc-panel__actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ================= Texte centré ================= */
.svc-prose__head { max-width: 895px; margin-inline: auto; }

/* ================= Responsive ================= */
@media (max-width: 1240px) {
  .svc-split__inner { gap: 48px; }
  .svc-panel__card { padding: 48px; }
}

@media (max-width: 1024px) {
  main > .svc-split,
  main > .svc-steps,
  main > .svc-panel,
  main > .svc-prose,
  main > .svc-split--first { margin-top: 80px; }

  .svc-split__inner,
  .svc-split--reverse .svc-split__inner { flex-direction: column; align-items: stretch; }
  /* En colonne, la flex-basis deviendrait une hauteur figée */
  .svc-split__content,
  .svc-split__media { flex: none; }
  .svc-split__media { max-width: 640px; margin-right: 24px; }
  .svc-split--reverse .svc-split__media { margin-right: 0; margin-left: 24px; }
  .svc-split__media img { height: 360px; }

  .svc-steps__grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }

  .svc-panel__row { flex-direction: column; align-items: flex-start; gap: 32px; }
  .svc-panel__actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 820px) {
  .svc-steps { padding-block: 64px; }
  .svc-panel__card { padding: 32px 24px; }
}

@media (max-width: 600px) {
  main > .svc-split,
  main > .svc-steps,
  main > .svc-panel,
  main > .svc-prose,
  main > .svc-split--first { margin-top: 56px; }
  .svc-steps { padding-block: 56px; }
  .svc-split__media img { height: 260px; }
  .svc-split__media::before { display: none; }
  .svc-split__media,
  .svc-split--reverse .svc-split__media { margin: 0; }
  .svc-steps__card { padding: 24px 20px; }
}

@media (max-width: 480px) {
  .svc-split__actions,
  .svc-panel__actions { flex-direction: column; align-items: stretch; }
  .svc-split__actions .btn,
  .svc-panel__actions .btn { justify-content: center; }
}