/* Respiration éditoriale : une trajectoire unique relie les trois étapes. */
.approach-build { padding-top: 70px; padding-bottom: 100px; }
.approach-build .section-label { color: #665478; }
.approach-build .approach-layout { grid-template-columns: .9fr 1.1fr; gap: clamp(45px, 8vw, 130px); }
.approach-build .approach-heading h2 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(38px, 4.1vw, 60px); line-height: 1.12; }
.approach-build .approach-heading h2 em { font-family: Arial, sans-serif; }
.approach-build .approach-heading p { font-size: 15px; line-height: 1.9; }
.approach-build .signature { font-size: 44px; margin-top: 25px; color: #62536c; }
.approach-build .steps { position: relative; }
.approach-build .steps .scene-guides { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.approach-build .steps .scene-guides path { stroke: #8a2be2; stroke-dasharray: 1; stroke-dashoffset: var(--scene-dash); }
.approach-build .steps li { position: relative; gap: 25px; padding-block: 32px; border-bottom: 0; --step-x: 0px; --step-rule: 1; }
.approach-build .steps li:first-of-type { padding-top: 0; }
.approach-build .steps li::after { content: ""; position: absolute; bottom: 0; left: 61px; right: 0; height: 1px; background: #c9c8be; transform-origin: left; transform: scaleX(var(--step-rule)); }
.approach-build .step-number { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; margin-top: 0; background: #f5f4ee; color: #775393; border: 1px solid #c5b8d0; border-radius: 50%; }
.approach-build .steps li > div { transform: translateX(var(--step-x)); }
.approach-build .steps h3 { font-size: 22px; line-height: 1.3; }
.approach-build .steps p { font-size: 14px; }
.approach-build .toolbox { margin-top: 70px; padding-top: 35px; }
.approach-build .toolbox li { background: #eceee7; border-color: #d6d7ce; padding: 10px 13px; }
@media (max-width: 800px) {
  .approach-build .approach-layout { gap: 38px; }
  .approach-build .steps h3 { font-size: 19px; }
  .approach-build .steps p { font-size: 13px; }
}
@media (max-width: 620px) {
  .approach-build { padding-block: 40px 75px; }
  .approach-build .approach-layout { grid-template-columns: 1fr; gap: 50px; }
  .approach-build .approach-heading h2 { font-size: 40px; }
  .approach-build .approach-heading p { font-size: 14px; }
  .approach-build .steps li { gap: 18px; }
  .approach-build .steps li::after { left: 54px; }
  .approach-build .toolbox { margin-top: 45px; }
  .approach-build .signature { font-size: 38px; }
}
:is(.motion-paused .approach-build, .approach-build:focus-within) .steps li > div { transform: none; }
:is(.motion-paused .approach-build, .approach-build:focus-within) .steps li::after { transform: scaleX(1); }
.motion-paused .approach-build .steps .scene-guides { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .approach-build .steps li > div { transform: none; }
  .approach-build .steps li::after { transform: scaleX(1); }
  .approach-build .steps .scene-guides { display: none; }
}