/* =============================================================================
   pages/service.css · Pages commerciales dédiées aux leviers Mellion.
   ========================================================================== */

.service-intro,
.service-process,
.service-scope,
.service-faq,
.service-related {
  padding: var(--section-y) 0;
}

.service-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(36px, 7vw, 110px);
}

.service-intro h2,
.service-process h2,
.service-scope h2,
.service-faq h2,
.service-related h2 {
  font-size: var(--fs-h2);
}

.service-intro__copy,
.service-section-lead {
  max-width: 64ch;
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.76;
}

.service-intro__copy p + p { margin-top: 18px; }

.service-outcomes { margin-top: clamp(44px, 6vw, 72px); }
.service-outcomes h3 { font-size: var(--fs-h3); }
.service-outcomes p { color: var(--ink-muted); line-height: 1.65; }

.service-process__heading,
.service-faq__heading,
.service-related__heading {
  max-width: 66ch;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.service-process__heading p,
.service-faq__heading p,
.service-related__heading p {
  margin-top: 20px;
}

.service-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.service-steps > li {
  padding: clamp(28px, 4vw, 44px);
  border-right: 1px solid var(--line);
}

.service-steps > li:last-child { border-right: 0; }

.service-steps span {
  display: block;
  margin-bottom: 28px;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
}

.service-steps h3 { font-size: 1.35rem; }

.service-steps p {
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: 1.65;
}

.service-scope__grid {
  margin-top: clamp(38px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.service-scope__grid article {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(8, 18, 38, 0.56);
}

.service-scope__grid h3 { font-size: var(--fs-h3); }
.service-scope__grid ul { margin-top: 24px; }

.service-case { margin-top: clamp(44px, 6vw, 78px); }

.service-faq__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.service-faq details {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 18, 38, 0.48);
}

.service-faq summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 620;
  line-height: 1.45;
}

.service-faq details p {
  margin-top: 18px;
  color: var(--ink-muted);
  line-height: 1.7;
}

/* Trois ou quatre destinations selon la page : la grille s'ajuste seule
   plutôt que de laisser une carte orpheline sur une seconde ligne. */
.service-related__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 18px;
}

.service-related__links a {
  min-height: 150px;
  padding: 28px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(8, 18, 38, 0.42);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.service-related__links a:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
}

.service-related__links span {
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.service-related__links strong { font-size: 1.15rem; line-height: 1.4; }

@media (max-width: 900px) {
  .service-intro__grid { grid-template-columns: 1fr; }
  .service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-steps > li:nth-child(2) { border-right: 0; }
  .service-steps > li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .service-related__links { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .service-steps,
  .service-scope__grid,
  .service-faq__list { grid-template-columns: 1fr; }
  .service-steps > li { border-right: 0; border-bottom: 1px solid var(--line); }
  .service-steps > li:last-child { border-bottom: 0; }
}