/* ============================================================================
   HD Ingé Conseil — page Monique : scène de construction animée
   Reprise à l'identique de la maquette Monique.dc.html (classes cs-*),
   recolorée avec les tokens de site.css. Les seuls styles inline tolérés
   dans la page sont les `animation-delay` des briques SVG.
   ========================================================================= */

.cs-ground { stroke: var(--border); stroke-width: 2; stroke-linecap: round; }
.cs-steel-thick { stroke: var(--brand-slate); stroke-width: 5; stroke-linecap: round; }
.cs-steel-thin { stroke: var(--brand-slate); stroke-width: 2; }
.cs-hook { fill: var(--brand-slate); }

.cs-crane {
  transform-origin: 356px 192px;
  animation: csSway 6s ease-in-out infinite alternate;
}
@keyframes csSway {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.4deg); }
}

.cs-brick {
  fill: var(--surface-2);
  stroke: var(--brand-slate);
  stroke-width: 1.25;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: csBrick 4.8s ease-in-out infinite;
}
@keyframes csBrick {
  0% { opacity: 0; transform: translateY(8px) scale(.85); }
  10% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; transform: translateY(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateY(-5px) scale(.9); }
}

.cs-trouser { stroke: var(--brand-slate); stroke-width: 5; stroke-linecap: round; }
.cs-vest { fill: var(--surface-2); stroke: var(--brand-slate); stroke-width: 1.5; }
.cs-vest-stroke { stroke: var(--brand-slate); stroke-width: 3; stroke-linecap: round; fill: none; }
.cs-skin { fill: #d8b28c; }
.cs-helmet-a, .cs-helmet-brim-a { fill: var(--accent-fill); }
.cs-helmet-b, .cs-helmet-brim-b { fill: var(--brand-blue); }
line.cs-helmet-brim-a, line.cs-helmet-brim-b { stroke-width: 2.4; }
.cs-brick-held, .cs-hammer-head { fill: var(--surface-2); stroke: var(--brand-slate); stroke-width: 1; }
.cs-hammer-handle { fill: var(--brand-slate); }

.cs-worker-bob { animation: csBob 2.6s ease-in-out infinite; }
@keyframes csBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.cs-arm-a {
  transform-origin: 8px -40px;
  animation: csLift 2.1s ease-in-out infinite alternate;
}
@keyframes csLift {
  from { transform: rotate(-8deg); }
  to { transform: rotate(-42deg); }
}

.cs-arm-b {
  transform-origin: 8px -40px;
  animation: csHammer .9s ease-in-out infinite alternate;
}
@keyframes csHammer {
  from { transform: rotate(-28deg); }
  to { transform: rotate(22deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-brick { opacity: 1 !important; transform: none !important; }
}