/* Services and Diagnostic: compose the existing cards, icons and text roles.
   design-system.css remains last and owns surfaces, radii, controls and focus. */
.commercial-visual-page :is(#catalogue, #reprendre, #securiser, #evoluer, #maitriser, #perimetre-technique, #livrables, #deroulement, #apres-diagnostic) {
  scroll-margin-top: 110px;
}
.commercial-grid { display: grid; gap: var(--space-6); }
.commercial-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.commercial-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.commercial-card-heading { display: flex; align-items: center; gap: var(--space-5); }
.commercial-card-heading > div { min-width: 0; }
.commercial-card-heading .eyebrow { margin: 0 0 var(--space-2); }
.commercial-card-heading h3 { margin: 0; }
.commercial-service-card { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.commercial-situation { margin: 0; color: var(--muted); }
.commercial-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding: var(--space-5) 0;
  margin: auto 0 0;
  list-style: none;
  border-block: var(--border-width) solid var(--border-subtle);
}
.commercial-flow li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); min-width: 0; }
.commercial-flow .service-icon { color: var(--pink2); margin-bottom: var(--space-2); }
.commercial-flow span { color: var(--muted); font-size: var(--font-size-small); line-height: var(--line-height-heading); }
.commercial-flow li:not(:last-child)::after { content: "→"; position: absolute; top: 0; right: calc(var(--space-5) * -.7); color: var(--pink2); }
.commercial-result { display: flex; align-items: start; gap: var(--space-3); }
.commercial-result > .service-icon { color: var(--pink2); width: var(--font-size-card-title); height: var(--font-size-card-title); }
.commercial-result p { margin: 0; }
.commercial-result .service-small-label { margin-bottom: var(--space-2); }
.commercial-service-card details { margin: 0; padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-subtle); }
.commercial-service-card summary { cursor: pointer; min-height: var(--control-height-compact); padding-block: var(--space-2); color: var(--muted); }
.commercial-service-card details p { margin: var(--space-3) 0 0; }
.commercial-next-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.commercial-next-step p { max-width: 75ch; }
.commercial-next-step p:last-child { margin-bottom: 0; }
.diagnostic-situations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.diagnostic-situations li { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.diagnostic-situations .service-icon { color: var(--pink2); }
.diagnostic-context .diagnostic-overview { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border-subtle); }
.diagnostic-overview { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-6); align-items: center; }
.diagnostic-map { min-width: 0; margin: 0; }
.diagnostic-map-center { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-3); max-width: 24rem; margin: 0 auto var(--space-5); text-align: center; }
.diagnostic-map-center::after { content: ""; position: absolute; height: var(--space-5); width: var(--border-width); left: 50%; top: 100%; background: var(--border-strong); }
.diagnostic-map .service-icon { color: var(--pink2); }
.diagnostic-map-nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: 0; margin: 0; list-style: none; }
.diagnostic-map-nodes li { display: flex; align-items: start; gap: var(--space-3); min-width: 0; }
.diagnostic-map-nodes :is(h3, h4) { margin: 0 0 var(--space-2); }
.diagnostic-map-nodes p { margin: 0; color: var(--muted); font-size: var(--font-size-small); }
.diagnostic-map figcaption { color: var(--muted); font-size: var(--font-size-small); margin-top: var(--space-4); }
.diagnostic-deliverable { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.diagnostic-deliverable .commercial-card-heading { flex-direction: column; align-items: start; gap: var(--space-4); }
.diagnostic-deliverable .commercial-card-heading > div { min-height: 5rem; }
.diagnostic-document { flex-grow: 1; }
.diagnostic-document .service-small-label { margin: 0 0 var(--space-4); }
.diagnostic-document :is(ul, ol) { padding: 0; margin: 0; list-style: none; }
.diagnostic-document li { display: flex; align-items: center; gap: var(--space-3); min-height: 3.25rem; }
.diagnostic-document li + li { border-top: var(--border-width) solid var(--border-subtle); }
.diagnostic-document .service-icon { color: var(--pink2); width: var(--font-size-card-title); height: var(--font-size-card-title); }
.diagnostic-priorities li > span { color: var(--pink2); font-size: var(--font-size-card-title); font-family: var(--font-fluid-display); }
.diagnostic-action-path li { position: relative; }
.diagnostic-action-path li:not(:last-child)::after { content: "↓"; position: absolute; left: var(--space-1); bottom: -.65em; color: var(--pink2); background: var(--surface-inset); }
.diagnostic-deliverable > p { margin: 0; color: var(--muted); }
.diagnostic-deliverable .commercial-result { padding-top: var(--space-4); border-top: var(--border-width) solid var(--border-subtle); }
.diagnostic-conditions .service-icon { color: var(--pink2); }
.diagnostic-conditions article > p { margin: var(--space-4) 0 0; color: var(--muted); }
.commercial-note { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); border-top: var(--border-width) solid var(--border-subtle); padding-top: var(--space-5); margin-top: var(--space-6); }
.commercial-note p { margin: 0; color: var(--muted); }
.diagnostic-followup { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.diagnostic-followup > .service-icon { color: var(--pink2); }
.diagnostic-followup p + p { margin-top: var(--space-3); }
.commercial-limits { color: var(--muted); font-size: var(--font-size-small); }
@media (max-width: 1000px) {
  .diagnostic-overview { grid-template-columns: minmax(0, 1fr); }
  .diagnostic-map { width: 100%; }
  .commercial-grid--three { grid-template-columns: minmax(0, 1fr); }
  .diagnostic-deliverable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .diagnostic-deliverable .commercial-card-heading { grid-column: 1; flex-direction: row; align-items: center; }
  .diagnostic-deliverable .commercial-card-heading > div { min-height: 0; }
  .diagnostic-document { grid-column: 2; grid-row: 1 / 3; }
  .diagnostic-deliverable > p, .diagnostic-deliverable .commercial-result { grid-column: 1; }
}
@media (max-width: 760px) {
  .diagnostic-situations { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .commercial-grid--two { grid-template-columns: minmax(0, 1fr); }
  .commercial-next-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}
@media (max-width: 600px) {
  .commercial-card-heading { gap: var(--space-4); }
  .commercial-flow { gap: var(--space-3); }
  .commercial-flow li:not(:last-child)::after { right: calc(var(--space-3) * -.85); }
  .diagnostic-map-nodes { grid-template-columns: minmax(0, 1fr); }
  .diagnostic-deliverable { display: flex; align-items: stretch; }
  .diagnostic-deliverable .commercial-card-heading { flex-direction: row; align-items: center; }
}