/* ==========================================================================
   Schema anime : ligne de production verriere
   ========================================================================== */

.diagram-wrap{
  position:relative;
  width:100%;
  height:100%;
}
.diagram{
  width:100%;
  height:auto;
  max-height:100%;
  display:block;
}

/* ---- typographie interne au schema ---- */
.diagram text{ font-family:'Inter','Segoe UI',sans-serif; }
.diagram .lbl{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:19px; font-weight:700; fill:#ffffff; letter-spacing:-.01em;
}
.diagram .lbl-sub{ font-size:15px; font-weight:500; fill:#93a8c8; }
.diagram .lbl-tag{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:14px; font-weight:600; fill:#8fb4e8; letter-spacing:.06em;
}
.diagram .lbl-hot{ font-size:15px; font-weight:600; fill:#ffbb3d; }
.diagram .leader{ stroke:#41598a; stroke-width:1.4; }
.diagram .konatic .lbl{ fill:#a9c6f5; }

/* ---- mise en avant etape par etape ---- */
.diagram .stage{ transition:opacity .45s ease, filter .45s ease; }
.diagram-wrap[data-active="0"] .stage{ opacity:1; }
.diagram-wrap:not([data-active="0"]) .stage{ opacity:.14; }
.diagram-wrap[data-active="1"] .stage[data-step~="1"],
.diagram-wrap[data-active="2"] .stage[data-step~="2"],
.diagram-wrap[data-active="3"] .stage[data-step~="3"],
.diagram-wrap[data-active="4"] .stage[data-step~="4"],
.diagram-wrap[data-active="5"] .stage[data-step~="5"],
.diagram-wrap[data-active="6"] .stage[data-step~="6"],
.diagram-wrap[data-active="7"] .stage[data-step~="7"],
.diagram-wrap[data-active="8"] .stage{ opacity:1; }

/* contexte : les etapes deja vues restent legerement lisibles */
.diagram-wrap[data-active="2"] .stage[data-step~="1"],
.diagram-wrap[data-active="3"] .stage[data-step~="2"],
.diagram-wrap[data-active="4"] .stage[data-step~="3"],
.diagram-wrap[data-active="5"] .stage[data-step~="4"],
.diagram-wrap[data-active="6"] .stage[data-step~="5"],
.diagram-wrap[data-active="7"] .stage[data-step~="5"]{ opacity:.42; }

/* le panneau des 3 points de controle */
.diagram .control-panel{ opacity:0; transition:opacity .5s ease; }
.diagram-wrap[data-active="8"] .control-panel{ opacity:1; }

/* ---- animations d'ambiance ---- */
@keyframes flow      { to   { stroke-dashoffset:-88; } }
@keyframes glowPulse { 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
@keyframes spin      { to   { transform:rotate(360deg); } }
@keyframes plunge    { 0%,100%{ transform:translateY(0) } 45%{ transform:translateY(15px) } }
@keyframes snipL     { 0%,70%,100%{ transform:translateX(0) } 82%{ transform:translateX(15px) } }
@keyframes snipR     { 0%,70%,100%{ transform:translateX(0) } 82%{ transform:translateX(-15px) } }
@keyframes gobFall   { 0%   { transform:translateY(0)   scaleY(1)    ; opacity:0 }
                       12%  { opacity:1 }
                       100% { transform:translateY(96px) scaleY(1.22); opacity:1 } }
@keyframes beltRun   { from { transform:translateX(0) } to { transform:translateX(166px) } }
@keyframes dashRun   { to   { stroke-dashoffset:-200 } }

.diagram .flow{ stroke-dasharray:20 26; animation:flow 1.6s linear infinite; }
.diagram .pulse{ animation:glowPulse 2.6s ease-in-out infinite; }
.diagram .spin{ transform-box:fill-box; transform-origin:center; animation:spin 3.4s linear infinite; }
.diagram .plunge{ transform-box:fill-box; transform-origin:center; animation:plunge 2.2s ease-in-out infinite; }
.diagram .snip-l{ transform-box:fill-box; transform-origin:center; animation:snipL 2.2s ease-in-out infinite; }
.diagram .snip-r{ transform-box:fill-box; transform-origin:center; animation:snipR 2.2s ease-in-out infinite; }
.diagram .gob-fall{ transform-box:fill-box; transform-origin:center; animation:gobFall 2.2s ease-in infinite; }
.diagram .belt-run{ animation:beltRun 3.2s linear infinite; }
.diagram .invert-arc{ stroke-dasharray:10 8; animation:dashRun 3s linear infinite; }

@media (prefers-reduced-motion: reduce){
  .diagram .flow, .diagram .pulse, .diagram .spin, .diagram .plunge,
  .diagram .snip-l, .diagram .snip-r, .diagram .gob-fall,
  .diagram .belt-run, .diagram .invert-arc{ animation:none; }
}

/* ---- carte de legende (overlay HTML, zone libre haut-droite) ---- */
.dg-caption{
  position:absolute;
  left:48.5%; top:5%; width:48%;
  padding:22px 24px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(3px);
}
.dg-caption .step-no{
  font-family:'Space Grotesk',sans-serif; font-size:.4em; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#5b90e8; margin-bottom:.55em;
}
.dg-caption h3{ font-size:.72em; margin:0 0 .4em; color:#fff; }
.dg-caption p{ font-size:.46em; line-height:1.55; color:#b6c7e4; margin:0; }
.dg-caption p + p{ margin-top:.55em; }
.dg-caption .tagline{ color:#8fb4e8; font-weight:600; }
.dg-panel{ display:none; }
.dg-panel.is-on{ display:block; animation:capIn .4s cubic-bezier(.22,.8,.3,1); }
@keyframes capIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* pilotes de fragments (invisibles) */
.dg-steps{ display:none; }