/* Service composition uses the shared surfaces, typography and controls. */
.service-detail-page :is(#votre-situation, #livrables, #deroulement, #exemple-concret) {
  scroll-margin-top: 110px;
}
.service-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.service-page-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-compact);
  color: var(--muted);
  font-size: var(--font-size-small);
  text-underline-offset: .3em;
}
.service-page-nav a:hover { color: var(--pink2); }
.service-section-heading { max-width: 850px; margin-bottom: var(--space-6); }
.service-detail-page h2 {
  margin: 0;
  font-size: var(--font-size-section-title);
  line-height: var(--line-height-display);
  text-wrap: balance;
}
.service-section-heading > p:not(.eyebrow) {
  margin: var(--space-4) 0 0;
  color: var(--muted);
}
.service-detail-page h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-card-title);
  line-height: var(--line-height-heading);
}
.service-signals {
  display: grid;
  grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
  gap: 48px;
  align-items: start;
}
.service-signal-list { margin: 0; padding: 0; list-style: none; }
.service-signal-list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.service-signal-list li:first-child { padding-top: 0; }
.service-signal-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.service-signal-list p { margin: 0; font-size: var(--font-size-lead); }
.service-signal-number {
  padding-top: .2rem;
  color: var(--pink2);
  font-size: var(--font-size-caption);
  letter-spacing: .1em;
}
.service-detail-page .service-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}
.service-overview-copy > p:last-child {
  margin: var(--space-5) 0 0;
  color: var(--muted);
  max-width: 52ch;
}
.service-icon { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.service-diagram {
  margin: 0;
  min-width: 0;
  padding: var(--space-5);
  background: radial-gradient(ellipse at 50% 35%, rgba(155, 92, 255, .15), transparent 72%);
}
.service-diagram-label {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: var(--font-size-small);
  text-align: center;
}
.service-diagram-nodes { margin: 0; padding: 0; list-style: none; }
.service-diagram-node { position: relative; min-width: 0; }
.service-diagram-node strong, .service-diagram-center strong { display: block; line-height: var(--line-height-heading); }
.service-diagram-node span, .service-diagram-center span {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}
.service-diagram .service-icon { color: var(--pink2); }
.service-diagram figcaption {
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--font-size-small);
  text-align: center;
}
/* Connected nodes: Microsoft 365 tools and network zones. */
.service-diagram-center { position: relative; max-width: 320px; margin: 0 auto 40px; text-align: center; }
.service-diagram-center .service-icon { margin-bottom: var(--space-2); }
.service-diagram-center::after {
  content: "";
  position: absolute;
  height: 21px;
  width: var(--border-width);
  bottom: -21px;
  left: 50%;
  background: var(--border-strong);
}
.service-diagram--hub .service-diagram-nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  position: relative;
}
.service-diagram--hub .service-diagram-nodes::before {
  content: "";
  position: absolute;
  top: -20px;
  height: var(--border-width);
  left: calc((100% - 24px) / 6);
  right: calc((100% - 24px) / 6);
  background: var(--border-strong);
}
.service-diagram--hub .service-diagram-node { text-align: center; }
.service-diagram--hub .service-diagram-node::before {
  content: "";
  position: absolute;
  width: var(--border-width);
  height: 20px;
  top: -20px;
  left: 50%;
  background: var(--border-strong);
}
.service-diagram--hub .service-icon { margin-bottom: var(--space-3); }
/* Horizontal flow becomes a vertical path on narrow screens. */
.service-diagram--flow .service-diagram-nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.service-diagram--flow .service-diagram-node { text-align: center; }
.service-diagram--flow .service-icon { margin-bottom: var(--space-4); }
.service-diagram--flow .service-diagram-node:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -21px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pink2);
}
/* Layered protection and an ordered action plan. */
:is(.service-diagram--layers, .service-diagram--priorities) .service-diagram-nodes {
  display: grid;
  gap: var(--space-3);
}
:is(.service-diagram--layers, .service-diagram--priorities) .service-diagram-node {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}
.service-diagram--layers .service-diagram-node:nth-child(2) { margin-inline: var(--space-3); }
.service-diagram--layers .service-diagram-node:nth-child(3) { margin-inline: var(--space-5); }
.service-diagram--priorities .service-diagram-nodes { counter-reset: priority; }
.service-diagram--priorities .service-diagram-node { counter-increment: priority; }
.service-diagram--priorities .service-diagram-node::before {
  content: "0" counter(priority);
  color: var(--pink2);
  font-size: var(--font-size-card-title);
  font-family: var(--font-fluid-display);
  font-weight: var(--font-weight-display);
}
.service-diagram--priorities .service-icon { display: none; }
/* Pair every technical action with its practical benefit. */
.service-scope-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--border-subtle);
}
.service-scope-row:last-child { padding-bottom: 0; }
.service-scope-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--pink2);
}
.service-scope-detail p, .service-scope-benefit p { margin: 0; color: var(--muted); }
.service-scope-detail p { max-width: 60ch; }
.service-scope-benefit { padding-left: var(--space-5); border-left: var(--border-width) solid var(--border-subtle); }
.service-small-label {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--pink2);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-strong);
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Numbered steps use the shared inset recipe inside their section panel. */
.service-step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-step-list li { position: relative; min-width: 0; }
.service-step-number {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-5);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--pink2);
  font-size: var(--font-size-card-title);
}
.service-step-list p { margin: 0; color: var(--muted); }
.service-case .service-section-heading { max-width: 950px; }
.service-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.service-case-grid p { margin: 0; color: var(--muted); }
.service-case-outcome p { color: var(--text); }
.service-takeaway { margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: var(--border-width) solid var(--border-subtle); color: var(--muted); font-size: var(--font-size-small); }
.service-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.service-related-grid a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); text-decoration: none; }
.service-related-grid h3 { margin: 0; }
.service-related-grid p { grid-column: 1; margin: 0; color: var(--muted); }
.service-related-grid a > span { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--pink2); }
@media (max-width: 1000px) {
  .service-detail-page .service-overview { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .service-overview-copy > p:last-child { max-width: 70ch; }
  .service-diagram { width: 100%; max-width: 660px; justify-self: center; }
  .service-signals { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-5); }
}
@media (max-width: 680px) {
  .service-page-nav { gap: var(--space-2) var(--space-5); }
  .service-signals { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .service-diagram { padding: var(--space-5) 0 0; }
  .service-diagram--hub .service-diagram-nodes { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-left: var(--space-5); }
  .service-diagram--hub .service-diagram-node { display: flex; gap: var(--space-4); align-items: center; text-align: left; }
  .service-diagram--hub .service-icon { margin: 0; }
  .service-diagram-center { margin-bottom: var(--space-5); }
  .service-diagram-center::after { display: none; }
  .service-diagram--hub .service-diagram-nodes::before { top: 0; bottom: 35px; left: 0; right: auto; width: var(--border-width); height: auto; }
  .service-diagram--hub .service-diagram-node::before { left: -24px; top: 50%; width: 24px; height: var(--border-width); }
  .service-diagram--flow .service-diagram-nodes { grid-template-columns: minmax(0, 1fr); }
  .service-diagram--flow .service-diagram-node { display: flex; gap: var(--space-4); align-items: center; text-align: left; }
  .service-diagram--flow .service-icon { margin: 0; }
  .service-diagram--flow .service-diagram-node:not(:last-child)::after { content: "↓"; top: auto; right: 50%; bottom: -23px; transform: translateX(50%); }
  .service-scope-row { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding-block: var(--space-5); }
  .service-scope-icon { width: 2rem; }
  .service-scope-benefit { grid-column: 2; padding-left: 0; border-left: 0; }
  .service-scope-benefit .service-small-label { margin-bottom: var(--space-2); }
  .service-step-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .service-step-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-5); }
  .service-step-number { margin: 0; }
  .service-case-grid, .service-related-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}