/* Grammaire commune aux scènes : axes bleus, mesures violettes, ancrages citron.
   Par défaut, toute la composition est finale. JS ne masque jamais les contenus. */
.construction-scene {
  --scene-blue: #007bff;
  --scene-violet: #8a2be2;
  --scene-lime: #d8f36a;
  --scene-night: #0b0f19;
  --scene-paper: #f5f4ee;
  --scene-guide: 0;
  --scene-dash: 0;
}
.scene-guides { pointer-events: none; fill: none; }
.scene-guides path { stroke: var(--scene-blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.scene-guides .scene-measure { stroke: var(--scene-violet); }
.scene-guides rect { fill: var(--scene-lime); stroke: var(--scene-blue); stroke-width: 1; }
.scene-bridge {
  position: relative;
  z-index: 6;
  height: clamp(180px, 24vh, 260px);
  pointer-events: none;
  background: linear-gradient(var(--scene-night), #263344 30%, #c7ced0 75%, var(--scene-paper));
}
.scene-bridge .scene-guides { position: absolute; left: 0; width: 100%; overflow: visible; opacity: 0; }
.scene-bridge path { stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: var(--scene-dash); }
.expertise-build { position: relative; isolation: isolate; overflow: clip; --intro-x: 0px; --intro-y: 0px; --intro-turn: 0deg; }
.expertise-build::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--scene-guide);
  background-image: linear-gradient(#007bff22 1px, transparent 1px), linear-gradient(90deg, #007bff22 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(black, transparent 95%);
}
.expertise-build > .scene-guides { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--scene-guide); }
.expertise-build > .scene-guides path { stroke-dasharray: 1; stroke-dashoffset: var(--scene-dash); }
.expertise-build :is(.section-intro, .service-list) { position: relative; z-index: 1; }
.expertise-build h2 { position: relative; transform-origin: left center; transform: translate(var(--intro-x), var(--intro-y)) rotate(var(--intro-turn)); }
.expertise-build h2::after { content: ""; position: absolute; inset: -12px; border: 1px solid var(--scene-violet); opacity: var(--scene-guide); pointer-events: none; }
.expertise-build .intro-columns > p { transform: translateY(var(--intro-y)); }
.expertise-build .section-rule { transform-origin: left; transform: scaleX(var(--intro-rule, 1)); }
.expertise-build .service-list { border-top: 0; }
.expertise-build .service { position: relative; border-bottom: 0; --row-line: 1; --row-x: 0px; --row-number-x: 0px; --row-y: 0px; --row-scale: 1; --row-guide: 0; --row-color: var(--line); }
.expertise-build .service::before,
.expertise-build .service-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--row-color, var(--line));
  transform-origin: left;
  transform: scaleX(var(--row-line, 1));
  pointer-events: none;
}
.expertise-build .service::before { top: 0; }
.expertise-build .service-list::after { bottom: 0; transform: scaleX(var(--list-rule, 1)); }
.expertise-build .service summary { position: relative; }
.expertise-build .service summary::after {
  content: "";
  position: absolute;
  inset: 6px -8px;
  border: 1px dashed var(--scene-violet);
  opacity: var(--row-guide);
  pointer-events: none;
}
.expertise-build .service-number { transform: translateX(var(--row-number-x)) scale(var(--row-scale)); transform-origin: left center; }
.expertise-build .service summary h3 { transform: translateX(var(--row-x)); }
.expertise-build .service-tag { transform: translateY(var(--row-y)); }
.expertise-build .service-body { animation: none; transform: translateY(var(--row-y)); }
.expertise-build .service-chips { transform: translateX(calc(var(--row-x) * .25)); }
@media (max-width: 620px) {
  .scene-bridge { height: 140px; }
  .scene-bridge path { stroke-width: 2; }
  .expertise-build h2::after { inset: -6px; }
  .expertise-build .service summary::after { inset-inline: -4px; }
}
/* Pause, clavier et préférences : retour immédiat aux lignes et positions finales. */
:is(.motion-paused .expertise-build, .expertise-build:focus-within) :is(h2, .intro-columns > p, .service-number, .service summary h3, .service-tag, .service-body, .service-chips) { transform: none; }
:is(.motion-paused .expertise-build, .expertise-build:focus-within) .section-rule,
:is(.motion-paused .expertise-build, .expertise-build:focus-within) .service::before,
:is(.motion-paused .expertise-build, .expertise-build:focus-within) .service-list::after { transform: scaleX(1); background: var(--line); }
.motion-paused .scene-guides,
.motion-paused .expertise-build::before,
.motion-paused .expertise-build h2::after,
.motion-paused .expertise-build summary::after,
.expertise-build:focus-within .scene-guides,
.expertise-build:focus-within h2::after,
.expertise-build:focus-within summary::after,
.expertise-build:focus-within::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .scene-guides, .expertise-build::before, .expertise-build h2::after, .expertise-build summary::after { display: none; }
  .expertise-build :is(h2, .intro-columns > p, .service-number, .service summary h3, .service-tag, .service-body, .service-chips) { transform: none; }
  .expertise-build .section-rule, .expertise-build .service::before, .expertise-build .service-list::after { transform: scaleX(1); background: var(--line); }
}