/* hydross — spécifique. Tronc commun : assets/guide.css */
:root{--h1:56px}
/* FOND À FOURNIR : capture vue de dessus de la plateforme d'Hydross */
#bg{background-image:none;background-color:#0a1418}

[data-step="1"] #L1,[data-step="2"] #L2,[data-step="3"] #L3,
[data-step="4"] #L4,[data-step="5"] #L5,[data-step="6"] #L6{opacity:1}
.mob{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.05)}}

/* 1 · le pull */
.pullpath{fill:none;stroke:#8CF07E;stroke-width:3.5;stroke-dasharray:10 9}
[data-step="1"] .pullpath{animation:dash 1.1s linear infinite}

/* 2 · Tombe aquatique */
.tomb circle{fill:rgba(127,178,240,.16);stroke:#7FB2F0;stroke-width:3;stroke-dasharray:7 9}
[data-step="2"] .tomb circle{animation:dash 3s linear infinite, pulse 1.5s ease-in-out infinite}

/* 3 · la transition */
.line{fill:none;stroke:#E8443C;stroke-width:3.5;stroke-dasharray:12 8}
[data-step="3"] .line{animation:dash 1.4s linear infinite}
.drag{fill:none;stroke:#E8443C;stroke-width:3.5;stroke-dasharray:10 9}
[data-step="3"] .drag{animation:dash 1s linear infinite}

/* 4 · les rejetons */
.add circle{fill:rgba(242,193,78,.24);stroke:#F2C14E;stroke-width:2.5}
[data-step="4"] .add circle{animation:pulse 1.3s ease-in-out infinite;animation-delay:var(--d,0s)}

/* 5 · Vase abominable */
.sludge circle{fill:rgba(140,240,126,.2);stroke:#8CF07E;stroke-width:3}
[data-step="5"] .sludge circle{animation:pulse 1.4s ease-in-out infinite}

/* 6 · le rythme */
.cyc{fill:none;stroke:rgba(237,232,218,.55);stroke-width:3;stroke-dasharray:9 9}
[data-step="6"] .cyc{animation:dash 1.4s linear infinite}