/* Layout for the simplified content. Existing styles.css and design-system.css
   retain control of typography, colours, surfaces, buttons and hero visuals. */
.commercial-section > h2 { margin-top: 0; }
.commercial-section > p { max-width: 75ch; }
.commercial-section { scroll-margin-top: 110px; }
.commercial-list { max-width: 75ch; padding-left: var(--space-5); }
.commercial-list li { margin-bottom: var(--space-4); }
.commercial-section details { margin-top: var(--space-5); }
.commercial-section summary { cursor: pointer; padding-block: var(--space-3); }
.commercial-page .contact-grid a { overflow-wrap: anywhere; }
.site-footer-v2 .footer-main { grid-template-columns: minmax(0,1fr) minmax(220px,1fr); }


.commercial-page #catalogue > section + section { margin-top: var(--content-section-gap); }

@media (max-width: 760px) { .site-footer-v2 .footer-main { grid-template-columns: 1fr; } }
/* Keep each short situation beside its existing icon on small screens. */
@media (max-width: 520px) {
 .home-page #services .pillars article,
 .about-page #approche .pillars article {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  padding-block: var(--space-4);
 }
}

/* Reading aids: existing SVG icons, shared inset labels, common spacing only. */
.home-page #services .pillars .home-result {
 grid-column: 1 / -1;
 display: flex;
 align-items: center;
 gap: var(--space-3);
 margin: 0;
 padding-top: var(--space-3);
 border-top: var(--border-width) solid var(--border-subtle);
}
.home-result svg, .home-deliverables svg {
 width: var(--font-size-card-title);
 height: var(--font-size-card-title);
 flex-shrink: 0;
 color: var(--pink2);
}
.home-deliverables {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-3);
 list-style: none;
 padding: 0;
 margin: var(--space-4) 0;
}
.home-page #services .pillars article { grid-template-rows: minmax(0, 1fr) auto; }

/* Technical overview uses the existing cards, icon badges and certification grid. */
.expertise-card { display: flex; flex-direction: column; gap: var(--space-4); }
.expertise-card-heading { display: flex; align-items: center; gap: var(--space-4); }
.expertise-card h3 { margin: 0; }
.expertise-card ul { margin: 0; padding-left: var(--space-5); }
.expertise-card li + li { margin-top: var(--space-3); }
.expertise-card-links { margin-top: auto; }
.about-page :is(#parcours, #activite, #pourquoi, #approche, #domaines, #certifications) { scroll-margin-top: 110px; }
.about-hero { grid-template-columns: minmax(0, 1fr) minmax(180px, 320px); }
.about-portrait { margin: 0; justify-self: center; width: 100%; max-width: 320px; height: auto; }
.about-portrait .consultant-portrait { width: 100%; height: auto; aspect-ratio: 8 / 7; }
.about-portrait .consultant-avatar {
 position: absolute; top: 0; left: 0; bottom: auto;
 width: 100%; max-width: 100%; height: auto; transform: none;
}
.about-portrait figcaption { text-align: center; margin-top: var(--space-3); }
.about-story h2 { margin-top: 0; }
.about-story article > p:last-child { margin-bottom: 0; }
.about-journey-card { display: flex; flex-direction: column; gap: var(--space-4); }
.about-journey-card h3, .about-journey-card p { margin: 0; }
@media (max-width: 760px) {
 .about-hero { grid-template-columns: minmax(0, 1fr); }
 .about-portrait { max-width: 220px; }
}