/* ============================================================
   Démos animées — bâties sur les captures réelles de l'application
   (générées par gen_demos.py — modifier le script, pas ce fichier)
   ============================================================ */

/* ---------- Composants communs ---------- */
.demo { --cursor: 20px; }
.demo-body { position: relative; }
.demo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  overflow: hidden;
  background: #eef1f0;
  contain: layout paint;
}
.demo-layer { position: absolute; inset: 0; }
.demo-layer picture { display: block; width: 100%; height: 100%; }
.demo-layer img,
.demo-layer picture img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
  background: transparent;
}
.demo-layer.is-top { bottom: auto; height: auto; }
.demo-layer.is-top picture, .demo-layer.is-top img { height: auto; object-fit: fill; }
.demo-zoom {
  position: absolute;
  inset: 0;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  will-change: transform;
}
.demo-cursor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cursor);
  height: calc(var(--cursor) * 1.2);
  z-index: 12;
  pointer-events: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.demo-cursor svg { display: block; width: 100%; height: 100%; }
.demo-cursor::before {
  content: "";
  position: absolute;
  left: calc(var(--cursor) * 0.1 - 11px);
  top: calc(var(--cursor) * 0.1 - 11px);
  width: 22px;
  height: 22px;
  border: 2px solid var(--gold-bright);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.3);
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
.demo-anim, .demo-anim::before, .demo-anim::after { animation-iteration-count: infinite; }

/* Pause au survol (et quand la démo est hors écran — classe posée par main.js) */
.demo:hover *, .demo:hover *::before, .demo:hover *::after,
.demo.is-off *, .demo.is-off *::before, .demo.is-off *::after { animation-play-state: paused; }

.demo figcaption .pause-hint { color: var(--steel-line); }
@media (hover: none) { .demo figcaption .pause-hint { display: none; } }


/* ---------- Héros : carrousel des six modules ---------- */
.hc-stage { --ar: 2 / 1; }
.shot-bar .hc-titles { position: relative; flex: 1; min-width: 0; margin-left: 8px; font-size: 0.66rem; height: 1.5em; }
.shot-bar .hc-titles em {
  position: absolute; inset: 0; margin-left: 0; line-height: 1.5em; font-size: inherit;
  opacity: 0;
  animation: hcTab 33s infinite;
  animation-delay: calc(var(--i) * 5.5s);
}
.shot-bar .hc-titles em.is-first { opacity: 1; animation-name: hcTab0; }
.hc-tabs {
  display: flex;
  height: 36px;
  background: var(--ink);
  border-bottom: 1px solid var(--steel-line);
}
.hc-tab {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  white-space: nowrap;
  overflow: hidden;
  animation: hcTabColor 33s infinite;
  animation-delay: calc(var(--i) * 5.5s);
}
.hc-tab .s { display: none; }
.hc-tab::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  opacity: 0;
  animation: hcTab 33s infinite;
  animation-delay: calc(var(--i) * 5.5s);
}
.hc-tab.is-first { color: var(--paper); animation-name: hcTabColor0; }
.hc-tab.is-first::after { opacity: 1; animation-name: hcTab0; }
.hc-slide {
  opacity: 0;
  animation: hcShow 33s infinite;
  animation-delay: calc(var(--i) * 5.5s);
  will-change: opacity;
}
.hc-slide img {
  object-position: var(--from, 50% 0%);
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  animation: hcPan 33s infinite;
  animation-delay: calc(var(--i) * 5.5s);
  will-change: transform;
}
.hc-slide.is-first { opacity: 1; animation-name: hcShow0; }
.hc-cursor { animation-name: hcCursor; animation-duration: 33s; }
.hc-cursor::before { animation-name: hcClick; animation-duration: 33s; }
@media (max-width: 640px) {
  .hc-tab .l { display: none; }
  .hc-tab .s { display: inline; }
  .hc-tabs { height: 30px; }
  .hc-tab { font-size: 0.56rem; letter-spacing: 0.05em; }
}

@keyframes hcShow {
  0.000% { opacity: 0; }
  2.424% { opacity: 1; }
  19.091% { opacity: 1; }
  21.515% { opacity: 0; }
  100.000% { opacity: 0; }
}
@keyframes hcShow0 {
  0.000% { opacity: 1; }
  19.091% { opacity: 1; }
  19.121% { opacity: 0; }
  100.000% { opacity: 0; }
}
@keyframes hcTab {
  0.000% { opacity: 0; }
  1.515% { opacity: 1; }
  16.667% { opacity: 1; }
  18.182% { opacity: 0; }
  100.000% { opacity: 0; }
}
@keyframes hcTab0 {
  0.000% { opacity: 1; }
  16.667% { opacity: 1; }
  18.182% { opacity: 0; }
  100.000% { opacity: 0; }
}
@keyframes hcTabColor {
  0.000% { color: var(--paper-faint); }
  1.515% { color: var(--paper); }
  16.667% { color: var(--paper); }
  18.182% { color: var(--paper-faint); }
  100.000% { color: var(--paper-faint); }
}
@keyframes hcTabColor0 {
  0.000% { color: var(--paper); }
  16.667% { color: var(--paper); }
  18.182% { color: var(--paper-faint); }
  100.000% { color: var(--paper-faint); }
}
@keyframes hcPan {
  0.000% { object-position: var(--from, 50% 0%); transform: scale(1); animation-timing-function: ease-in-out; }
  19.091% { object-position: var(--to, 50% 100%); transform: scale(var(--z, 1)); }
  100.000% { object-position: var(--to, 50% 100%); transform: scale(var(--z, 1)); }
}
@keyframes hcCursor {
  0.000% { left: 8.33%; top: 18px; }
  1.515% { left: 8.33%; top: 18px; }
  4.242% { left: 32.50%; top: calc(36px + 0.680 * (100% - 36px)); }
  7.576% { left: 32.50%; top: calc(36px + 0.680 * (100% - 36px)); }
  10.606% { left: 86.00%; top: calc(36px + 0.620 * (100% - 36px)); }
  13.030% { left: 86.00%; top: calc(36px + 0.620 * (100% - 36px)); }
  14.848% { left: 25.00%; top: 18px; }
  16.664% { left: 25.00%; top: 18px; }
  16.667% { left: 25.00%; top: 18px; }
  18.182% { left: 25.00%; top: 18px; }
  20.909% { left: 55.00%; top: calc(36px + 0.750 * (100% - 36px)); }
  24.242% { left: 55.00%; top: calc(36px + 0.750 * (100% - 36px)); }
  27.273% { left: 93.00%; top: calc(36px + 0.580 * (100% - 36px)); }
  29.697% { left: 93.00%; top: calc(36px + 0.580 * (100% - 36px)); }
  31.515% { left: 41.67%; top: 18px; }
  33.330% { left: 41.67%; top: 18px; }
  33.333% { left: 41.67%; top: 18px; }
  34.848% { left: 41.67%; top: 18px; }
  37.576% { left: 15.00%; top: calc(36px + 0.240 * (100% - 36px)); }
  40.909% { left: 15.00%; top: calc(36px + 0.240 * (100% - 36px)); }
  43.939% { left: 40.00%; top: calc(36px + 0.680 * (100% - 36px)); }
  46.364% { left: 40.00%; top: calc(36px + 0.680 * (100% - 36px)); }
  48.182% { left: 58.33%; top: 18px; }
  49.997% { left: 58.33%; top: 18px; }
  50.000% { left: 58.33%; top: 18px; }
  51.515% { left: 58.33%; top: 18px; }
  54.242% { left: 7.00%; top: calc(36px + 0.240 * (100% - 36px)); }
  57.576% { left: 7.00%; top: calc(36px + 0.240 * (100% - 36px)); }
  60.606% { left: 80.00%; top: calc(36px + 0.500 * (100% - 36px)); }
  63.030% { left: 80.00%; top: calc(36px + 0.500 * (100% - 36px)); }
  64.848% { left: 75.00%; top: 18px; }
  66.664% { left: 75.00%; top: 18px; }
  66.667% { left: 75.00%; top: 18px; }
  68.182% { left: 75.00%; top: 18px; }
  70.909% { left: 35.00%; top: calc(36px + 0.600 * (100% - 36px)); }
  74.242% { left: 35.00%; top: calc(36px + 0.600 * (100% - 36px)); }
  77.273% { left: 85.00%; top: calc(36px + 0.350 * (100% - 36px)); }
  79.697% { left: 85.00%; top: calc(36px + 0.350 * (100% - 36px)); }
  81.515% { left: 91.67%; top: 18px; }
  83.330% { left: 91.67%; top: 18px; }
  83.333% { left: 91.67%; top: 18px; }
  84.848% { left: 91.67%; top: 18px; }
  87.576% { left: 56.00%; top: calc(36px + 0.160 * (100% - 36px)); }
  90.909% { left: 56.00%; top: calc(36px + 0.160 * (100% - 36px)); }
  93.939% { left: 38.00%; top: calc(36px + 0.500 * (100% - 36px)); }
  96.364% { left: 38.00%; top: calc(36px + 0.500 * (100% - 36px)); }
  98.182% { left: 8.33%; top: 18px; }
  99.997% { left: 8.33%; top: 18px; }
}
@keyframes hcClick {
  0.000% { opacity: 0; transform: scale(0.3); }
  15.727% { opacity: 0; transform: scale(0.3); }
  15.758% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  17.030% { opacity: 0; transform: scale(1.7); }
  32.394% { opacity: 0; transform: scale(0.3); }
  32.424% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  33.697% { opacity: 0; transform: scale(1.7); }
  49.061% { opacity: 0; transform: scale(0.3); }
  49.091% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  50.364% { opacity: 0; transform: scale(1.7); }
  65.727% { opacity: 0; transform: scale(0.3); }
  65.758% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  67.030% { opacity: 0; transform: scale(1.7); }
  82.394% { opacity: 0; transform: scale(0.3); }
  82.424% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  83.697% { opacity: 0; transform: scale(1.7); }
  99.061% { opacity: 0; transform: scale(0.3); }
  99.091% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  100.000% { opacity: 0; transform: scale(0.3); }
  100.364% { opacity: 0; transform: scale(1.7); }
}

/* ---------- Module 01 : base de données ---------- */
.demo-bd .demo-stage { --ar: 1568 / 753; }
.demo-bd .demo-zoom { --ox: 70%; --oy: 40%; animation: bdZoom 14s ease-in-out infinite; }
.demo-bd .demo-cursor { animation-name: bdCursor; animation-duration: 14s; --cursor: 18px; }
.bd-band {
  position: absolute;
  left: 13.1%;
  right: 1.6%;
  height: 5.44%;
  top: 24.3%;
  background: rgba(200, 151, 63, 0.16);
  box-shadow: inset 3px 0 0 var(--gold);
  opacity: 0;
  animation: bdBand 14s infinite;
}

@keyframes bdZoom {
  0.000% { transform: scale(1); }
  50.000% { transform: scale(1.10); }
  100.000% { transform: scale(1); }
}
@keyframes bdCursor {
  0.000% { left: 55.00%; top: 20.00%; }
  7.143% { left: 38.30%; top: 27.10%; }
  11.429% { left: 38.30%; top: 27.10%; }
  15.714% { left: 40.00%; top: 32.54%; }
  20.000% { left: 37.00%; top: 37.98%; }
  24.286% { left: 42.00%; top: 43.42%; }
  28.571% { left: 39.00%; top: 48.86%; }
  32.857% { left: 41.00%; top: 54.30%; }
  37.143% { left: 38.00%; top: 59.74%; }
  46.429% { left: 38.00%; top: 59.74%; }
  53.571% { left: 88.10%; top: 13.70%; }
  64.286% { left: 88.10%; top: 13.70%; }
  71.429% { left: 50.20%; top: 13.70%; }
  82.143% { left: 50.20%; top: 13.70%; }
  89.286% { left: 55.00%; top: 20.00%; }
  100.000% { left: 55.00%; top: 20.00%; }
}
@keyframes bdBand {
  0.000% { opacity: 0; top: 24.3%; }
  7.071% { opacity: 0; top: 24.3%; }
  7.143% { opacity: 1; top: 24.3%; }
  15.643% { opacity: 1; top: 24.30%; }
  15.714% { opacity: 1; top: 29.74%; }
  19.929% { opacity: 1; top: 29.74%; }
  20.000% { opacity: 1; top: 35.18%; }
  24.214% { opacity: 1; top: 35.18%; }
  24.286% { opacity: 1; top: 40.62%; }
  28.500% { opacity: 1; top: 40.62%; }
  28.571% { opacity: 1; top: 46.06%; }
  32.786% { opacity: 1; top: 46.06%; }
  32.857% { opacity: 1; top: 51.50%; }
  37.071% { opacity: 1; top: 51.50%; }
  37.143% { opacity: 1; top: 56.94%; }
  46.429% { opacity: 1; top: 56.94%; }
  49.286% { opacity: 0; top: 56.94%; }
  100.000% { opacity: 0; top: 24.3%; }
}

/* ---------- Module 02 : take-off 2D ---------- */
.demo-takeoff .demo-stage { --ar: 1550 / 632; }
.demo-takeoff .demo-zoom { --ox: 48%; --oy: 64%; animation: toZoom 16s ease-in-out infinite; }
.demo-takeoff .demo-cursor { animation-name: toCursor; animation-duration: 16s; --cursor: 16px; }
.demo-takeoff .demo-cursor::before { animation-name: toClick; animation-duration: 16s; }
.to-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.to-trace polyline {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1341 1341;
  stroke-dashoffset: 1341;
  animation: toTrace 16s infinite;
}
.to-trace circle { fill: var(--gold-bright); stroke: #fff; stroke-width: 2; opacity: 0; }
.to-trace .v1 { animation: toV1 16s infinite; }
.to-trace .v2 { animation: toV2 16s infinite; }
.to-trace .v3 { animation: toV3 16s infinite; }
.to-trace .v4 { animation: toV4 16s infinite; }

@keyframes toZoom {
  0.000% { transform: scale(1); }
  6.250% { transform: scale(1); }
  31.250% { transform: scale(1.45); }
  77.500% { transform: scale(1.45); }
  88.750% { transform: scale(1); }
  100.000% { transform: scale(1); }
}
@keyframes toCursor {
  0.000% { left: 12.30%; top: 8.40%; }
  3.750% { left: 12.30%; top: 8.40%; }
  7.500% { left: 12.30%; top: 8.40%; }
  11.250% { left: 34.00%; top: 30.00%; }
  27.500% { left: 30.45%; top: 45.90%; }
  31.250% { left: 30.45%; top: 45.90%; animation-timing-function: linear; }
  48.812% { left: 65.16%; top: 45.90%; animation-timing-function: linear; }
  57.438% { left: 65.16%; top: 87.80%; animation-timing-function: linear; }
  75.000% { left: 30.45%; top: 87.80%; }
  77.500% { left: 30.45%; top: 87.80%; }
  86.250% { left: 95.50%; top: 56.50%; }
  93.750% { left: 95.50%; top: 56.50%; }
  100.000% { left: 12.30%; top: 8.40%; }
}
@keyframes toClick {
  0.000% { opacity: 0; transform: scale(0.3); }
  5.562% { opacity: 0; transform: scale(0.3); }
  5.625% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  8.250% { opacity: 0; transform: scale(1.7); }
  31.188% { opacity: 0; transform: scale(0.3); }
  31.250% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  33.875% { opacity: 0; transform: scale(1.7); }
  48.750% { opacity: 0; transform: scale(0.3); }
  48.812% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  51.438% { opacity: 0; transform: scale(1.7); }
  57.375% { opacity: 0; transform: scale(0.3); }
  57.438% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  60.062% { opacity: 0; transform: scale(1.7); }
  74.938% { opacity: 0; transform: scale(0.3); }
  75.000% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  76.500% { opacity: 0; transform: scale(0.3); }
  76.562% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  77.625% { opacity: 0; transform: scale(1.7); }
  79.188% { opacity: 0; transform: scale(1.7); }
  100.000% { opacity: 0; transform: scale(0.3); }
}
@keyframes toTrace {
  0.000% { stroke-dashoffset: 1341; opacity: 1; }
  31.250% { stroke-dashoffset: 1341; opacity: 1; animation-timing-function: linear; }
  75.000% { stroke-dashoffset: 0; opacity: 1; }
  85.000% { stroke-dashoffset: 0; opacity: 1; }
  88.750% { stroke-dashoffset: 0; opacity: 0; }
  99.938% { stroke-dashoffset: 0; opacity: 0; }
  100.000% { stroke-dashoffset: 1341; opacity: 0; }
}
@keyframes toV1 {
  0.000% { opacity: 0; }
  31.188% { opacity: 0; }
  31.250% { opacity: 1; }
  85.000% { opacity: 1; }
  88.750% { opacity: 0; }
  100.000% { opacity: 0; }
}
@keyframes toV2 {
  0.000% { opacity: 0; }
  48.750% { opacity: 0; }
  48.812% { opacity: 1; }
  85.000% { opacity: 1; }
  88.750% { opacity: 0; }
  100.000% { opacity: 0; }
}
@keyframes toV3 {
  0.000% { opacity: 0; }
  57.375% { opacity: 0; }
  57.438% { opacity: 1; }
  85.000% { opacity: 1; }
  88.750% { opacity: 0; }
  100.000% { opacity: 0; }
}
@keyframes toV4 {
  0.000% { opacity: 0; }
  74.938% { opacity: 0; }
  75.000% { opacity: 1; }
  85.000% { opacity: 1; }
  88.750% { opacity: 0; }
  100.000% { opacity: 0; }
}

/* ---------- Module 03 : appels d'offres ---------- */
.demo-ao .demo-stage { --ar: 1510 / 812; background: #f3f2ee; }
.demo-ao .ao-side { position: absolute; left: 0; top: 0; bottom: 0; width: 10.3%; background: #f7f2ec; border-right: 1px solid #e6e1d8; }
.demo-ao .ao-detail { opacity: 0; animation: aoDetail 14s ease-in-out infinite; }
.demo-ao .demo-cursor { animation-name: aoCursor; animation-duration: 14s; }
.demo-ao .demo-cursor::before { animation-name: aoClick; animation-duration: 14s; }

@keyframes aoDetail {
  0.000% { opacity: 0; transform: translateY(14px); }
  32.143% { opacity: 0; transform: translateY(14px); }
  35.714% { opacity: 1; transform: translateY(0); }
  90.000% { opacity: 1; transform: translateY(0); }
  93.571% { opacity: 0; transform: translateY(0); }
  100.000% { opacity: 0; transform: translateY(14px); }
}
@keyframes aoCursor {
  0.000% { left: 60.00%; top: 72.00%; }
  8.571% { left: 60.00%; top: 72.00%; }
  23.571% { left: 25.80%; top: 34.80%; }
  30.000% { left: 25.80%; top: 34.80%; }
  37.143% { left: 25.80%; top: 34.80%; }
  48.571% { left: 16.40%; top: 23.40%; }
  54.286% { left: 16.40%; top: 23.40%; }
  62.857% { left: 14.10%; top: 29.60%; }
  67.143% { left: 14.10%; top: 29.60%; }
  75.714% { left: 43.50%; top: 42.40%; }
  82.857% { left: 43.50%; top: 42.40%; }
  90.000% { left: 60.00%; top: 72.00%; }
  100.000% { left: 60.00%; top: 72.00%; }
}
@keyframes aoClick {
  0.000% { opacity: 0; transform: scale(0.3); }
  29.929% { opacity: 0; transform: scale(0.3); }
  30.000% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  33.000% { opacity: 0; transform: scale(1.7); }
  100.000% { opacity: 0; transform: scale(0.3); }
}

/* ---------- Module 04 : rapports ---------- */
.demo-rapports .demo-stage { --ar: 1316 / 907; }
.demo-rapports .demo-zoom { --ox: 60%; --oy: 47%; animation: rpZoom 15s ease-in-out infinite; }
.demo-rapports .demo-cursor { animation-name: rpCursor; animation-duration: 15s; --cursor: 18px; }
.demo-rapports .demo-cursor::before { animation-name: rpClick; animation-duration: 15s; }
.rp-cover { position: absolute; left: 0; right: 0; top: 28.4%; bottom: 0; background: linear-gradient(#efebe2, #e9e7db); animation: rpCover 15s infinite; }

@keyframes rpZoom {
  0.000% { transform: scale(1); }
  33.333% { transform: scale(1); }
  60.000% { transform: scale(1.25); }
  80.000% { transform: scale(1.25); }
  93.333% { transform: scale(1); }
  100.000% { transform: scale(1); }
}
@keyframes rpCover {
  0.000% { opacity: 1; }
  24.000% { opacity: 1; }
  28.000% { opacity: 0; }
  95.333% { opacity: 0; }
  98.000% { opacity: 1; }
  100.000% { opacity: 1; }
}
@keyframes rpCursor {
  0.000% { left: 28.00%; top: 7.50%; }
  5.333% { left: 28.00%; top: 7.50%; }
  10.667% { left: 10.30%; top: 7.50%; }
  14.667% { left: 10.30%; top: 7.50%; }
  20.000% { left: 6.70%; top: 22.50%; }
  28.000% { left: 6.70%; top: 22.50%; }
  36.667% { left: 60.00%; top: 40.00%; }
  53.333% { left: 88.50%; top: 45.20%; }
  73.333% { left: 88.50%; top: 45.20%; }
  83.333% { left: 16.70%; top: 22.50%; }
  94.667% { left: 16.70%; top: 22.50%; }
  100.000% { left: 28.00%; top: 7.50%; }
}
@keyframes rpClick {
  0.000% { opacity: 0; transform: scale(0.3); }
  22.600% { opacity: 0; transform: scale(0.3); }
  22.667% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  25.467% { opacity: 0; transform: scale(1.7); }
  100.000% { opacity: 0; transform: scale(0.3); }
}

/* ---------- Module 05 : BIM / IFC ---------- */
.demo-bim .demo-stage { --ar: 1357 / 896; }
.bim-frame { position: absolute; left: 1.94%; top: 15.1%; width: 69.34%; height: 81.96%; opacity: 0; will-change: opacity; }
.bim-frame picture, .bim-frame img { display: block; width: 100%; height: 100%; object-fit: fill; }
.demo-bim .bim-map { opacity: 0; animation: bimMap 16s infinite; }
.demo-bim .demo-cursor { animation-name: bimCursor; animation-duration: 16s; }
.demo-bim .demo-cursor::before { animation-name: bimClick; animation-duration: 16s; }

.bim-frame.f1 { animation: bimF1 16s infinite; }
@keyframes bimF1 {
  0.000% { opacity: 0; }
  1.562% { opacity: 0; }
  3.125% { opacity: 1; }
  42.188% { opacity: 1; }
  43.750% { opacity: 0; }
  100.000% { opacity: 0; }
}
.bim-frame.f2 { animation: bimF2 16s infinite; }
@keyframes bimF2 {
  0.000% { opacity: 0; }
  4.688% { opacity: 0; }
  6.250% { opacity: 1; }
  39.062% { opacity: 1; }
  40.625% { opacity: 0; }
  100.000% { opacity: 0; }
}
.bim-frame.f3 { animation: bimF3 16s infinite; }
@keyframes bimF3 {
  0.000% { opacity: 0; }
  7.812% { opacity: 0; }
  9.375% { opacity: 1; }
  35.938% { opacity: 1; }
  37.500% { opacity: 0; }
  100.000% { opacity: 0; }
}
.bim-frame.f4 { animation: bimF4 16s infinite; }
@keyframes bimF4 {
  0.000% { opacity: 0; }
  10.938% { opacity: 0; }
  12.500% { opacity: 1; }
  32.812% { opacity: 1; }
  34.375% { opacity: 0; }
  100.000% { opacity: 0; }
}
.bim-frame.f5 { animation: bimF5 16s infinite; }
@keyframes bimF5 {
  0.000% { opacity: 0; }
  14.062% { opacity: 0; }
  15.625% { opacity: 1; }
  29.688% { opacity: 1; }
  31.250% { opacity: 0; }
  100.000% { opacity: 0; }
}
.bim-frame.f6 { animation: bimF6 16s infinite; }
@keyframes bimF6 {
  0.000% { opacity: 0; }
  17.188% { opacity: 0; }
  18.750% { opacity: 1; }
  26.562% { opacity: 1; }
  28.125% { opacity: 0; }
  100.000% { opacity: 0; }
}
.bim-frame.f7 { animation: bimF7 16s infinite; }
@keyframes bimF7 {
  0.000% { opacity: 0; }
  20.312% { opacity: 0; }
  21.875% { opacity: 1; }
  23.438% { opacity: 1; }
  25.000% { opacity: 0; }
  100.000% { opacity: 0; }
}
@keyframes bimMap {
  0.000% { opacity: 0; }
  51.250% { opacity: 0; }
  54.375% { opacity: 1; }
  92.500% { opacity: 1; }
  95.625% { opacity: 0; }
  100.000% { opacity: 0; }
}
@keyframes bimCursor {
  0.000% { left: 30.00%; top: 55.00%; animation-timing-function: linear; }
  21.875% { left: 50.00%; top: 55.00%; animation-timing-function: linear; }
  43.750% { left: 30.00%; top: 55.00%; }
  48.125% { left: 87.40%; top: 11.40%; }
  52.500% { left: 87.40%; top: 11.40%; }
  60.000% { left: 70.50%; top: 25.60%; }
  63.750% { left: 70.50%; top: 25.60%; }
  72.500% { left: 86.80%; top: 63.70%; }
  77.500% { left: 86.80%; top: 63.70%; }
  85.000% { left: 79.10%; top: 11.40%; }
  95.000% { left: 79.10%; top: 11.40%; }
  100.000% { left: 30.00%; top: 55.00%; }
}
@keyframes bimClick {
  0.000% { opacity: 0; transform: scale(0.3); }
  1.188% { opacity: 0; transform: scale(0.3); }
  1.250% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  3.875% { opacity: 0; transform: scale(1.7); }
  49.312% { opacity: 0; transform: scale(0.3); }
  49.375% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  52.000% { opacity: 0; transform: scale(1.7); }
  89.938% { opacity: 0; transform: scale(0.3); }
  90.000% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  92.625% { opacity: 0; transform: scale(1.7); }
  100.000% { opacity: 0; transform: scale(0.3); }
}

/* ---------- Module 06 : WBS ---------- */
.demo-wbs .demo-stage { --ar: 1232 / 954; }
.demo-wbs .demo-zoom { --ox: 50%; --oy: 30%; animation: wbsZoom 12s ease-in-out infinite; }
.demo-wbs .demo-cursor { animation-name: wbsCursor; animation-duration: 12s; --cursor: 18px; }

@keyframes wbsZoom {
  0.000% { transform: scale(1); }
  50.000% { transform: scale(1.06); }
  100.000% { transform: scale(1); }
}
@keyframes wbsCursor {
  0.000% { left: 50.00%; top: 75.00%; }
  12.500% { left: 56.80%; top: 14.50%; }
  25.000% { left: 56.80%; top: 14.50%; }
  37.500% { left: 38.60%; top: 46.20%; }
  45.833% { left: 38.60%; top: 46.20%; }
  54.167% { left: 29.60%; top: 50.80%; }
  62.500% { left: 29.60%; top: 50.80%; }
  75.000% { left: 80.50%; top: 14.50%; }
  87.500% { left: 80.50%; top: 14.50%; }
  100.000% { left: 50.00%; top: 75.00%; }
}

.demo-wbs-est .demo-stage { --ar: 1550 / 753; }
.demo-wbs-est .est-grouped { opacity: 0; animation: estGrouped 14s infinite; }
.demo-wbs-est .demo-cursor { animation-name: estCursor; animation-duration: 14s; }
.demo-wbs-est .demo-cursor::before { animation-name: estClick; animation-duration: 14s; }

@keyframes estGrouped {
  0.000% { opacity: 0; }
  29.286% { opacity: 0; }
  32.857% { opacity: 1; }
  96.429% { opacity: 1; }
  100.000% { opacity: 0; }
}
@keyframes estCursor {
  0.000% { left: 50.00%; top: 60.00%; }
  10.714% { left: 50.00%; top: 60.00%; }
  22.857% { left: 27.10%; top: 19.40%; }
  32.857% { left: 27.10%; top: 19.40%; }
  46.429% { left: 9.70%; top: 39.60%; }
  52.143% { left: 9.70%; top: 39.60%; }
  59.286% { left: 12.90%; top: 44.50%; }
  64.286% { left: 12.90%; top: 44.50%; }
  73.571% { left: 85.20%; top: 67.10%; }
  82.143% { left: 85.20%; top: 67.10%; }
  90.000% { left: 10.60%; top: 19.40%; }
  97.143% { left: 10.60%; top: 19.40%; }
  100.000% { left: 50.00%; top: 60.00%; }
}
@keyframes estClick {
  0.000% { opacity: 0; transform: scale(0.3); }
  26.357% { opacity: 0; transform: scale(0.3); }
  26.429% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  29.429% { opacity: 0; transform: scale(1.7); }
  93.500% { opacity: 0; transform: scale(0.3); }
  93.571% { opacity: 0.95; transform: scale(0.3); animation-timing-function: ease-out; }
  96.571% { opacity: 0; transform: scale(1.7); }
  100.000% { opacity: 0; transform: scale(0.3); }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::before, .demo *::after { animation: none !important; }
  .demo-cursor, .bd-band, .to-trace, .rp-cover { display: none !important; }
  .hc-slide, .hc-tab::after, .shot-bar .hc-titles em { opacity: 0; }
  .hc-slide.is-first, .hc-tab.is-first::after, .shot-bar .hc-titles em.is-first { opacity: 1; }
  .hc-slide img { object-position: 50% 0; transform: none; }
  .demo-ao .ao-detail, .demo-wbs-est .est-grouped { opacity: 1; transform: none; }
  .bim-frame { opacity: 0; }
  .demo-bim .bim-map { opacity: 0; }
}