/* Extracted from inline <style> in ./haute-disponibilite.html */

.ha-diagram{position:relative;width:100%;max-width:960px;margin:0 auto;font-family:'Inter',system-ui,sans-serif;overflow-x:auto;display:flex;flex-direction:column;align-items:center}
          .ha-canvas{position:relative;width:960px;height:340px;background:#111D35;border-radius:16px;border:1px solid rgba(229,120,11,0.15);overflow:hidden;flex-shrink:0}
          .ha-grid-bg{position:absolute;inset:0;width:100%;height:100%;opacity:0.025}
          .ha-svg-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
          .ha-box{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;transition:opacity 0.7s ease,transform 0.5s ease}
          .ha-box-label{font-size:8px;font-weight:600;text-align:center;line-height:1.2;transition:color 0.5s;white-space:nowrap}
          .ha-box-sub{font-size:6.5px;color:#95A5A6;opacity:0.6;text-align:center}
          .ha-node-icon{display:flex;align-items:center;justify-content:center;width:36px;height:28px;border-radius:6px;border:1px solid;transition:all 0.5s}
          .ha-node-icon i{font-size:13px}
          .ha-status-dot{width:5px;height:5px;border-radius:50%;margin-top:-1px;transition:background 0.5s}
          .ha-zone{position:absolute;border-radius:12px;background:rgba(255,255,255,0.008);transition:border-color 0.6s,box-shadow 0.6s}
          .ha-zone.ha-zone-glow{box-shadow:0 0 20px rgba(229,120,11,0.08),inset 0 0 20px rgba(229,120,11,0.03)}
          .ha-zone-hdr{display:flex;align-items:center;gap:6px;padding:7px 12px}
          .ha-zone-flag{font-size:13px}
          .ha-zone-name{font-size:10px;font-weight:700;color:#e5780b;letter-spacing:1px;font-family:'Inter',system-ui,sans-serif}
          .ha-zone-host{font-size:7px;color:#95A5A6}
          .ha-dc-row{position:absolute;display:flex;align-items:center;gap:5px}
          .ha-dc-badge{font-size:7px;font-weight:600;padding:2px 7px;border-radius:4px;transition:all 0.5s}
          .ha-heart{transition:all 0.5s}
          .ha-shield{position:absolute;background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.2);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px}
          .ha-shield i{font-size:16px;color:#8B5CF6}
          .ha-geodns{position:absolute;background:rgba(229,120,11,0.06);border:1px solid rgba(229,120,11,0.25);border-radius:10px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;animation:ha-pulse-glow 2.5s ease-in-out infinite}
          .ha-cluster-label{position:absolute;font-size:7px;font-weight:600;color:#8B5CF6;letter-spacing:0.8px;opacity:0.7;white-space:nowrap}
          .ha-drbd{position:absolute;display:flex;align-items:center;justify-content:center;gap:6px;font-size:7px;font-weight:600;color:#8B5CF6;letter-spacing:0.5px;transition:opacity 0.5s}
          .ha-drbd-line{flex:1;height:1px;border-top:1.5px dashed rgba(139,92,246,0.35);transition:border-color 0.5s}
          .ha-drbd.ha-drbd-active .ha-drbd-line{border-color:rgba(139,92,246,0.7)}
          .ha-vip{position:absolute;font-size:7px;font-weight:700;color:#10B981;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.25);border-radius:4px;padding:2px 6px;transition:top 0.8s ease,opacity 0.5s;white-space:nowrap}
          .ha-vip i{font-size:8px;margin-right:2px}
          .ha-monitoring{position:absolute;bottom:0;left:0;right:0;height:28px;background:rgba(16,185,129,0.04);border-top:1px solid rgba(16,185,129,0.1);display:flex;align-items:center;justify-content:center;gap:12px;font-size:7px;color:#64748B;letter-spacing:0.3px}
          .ha-monitoring-dot{width:5px;height:5px;border-radius:50%;background:#10B981;animation:ha-mon-pulse 2s ease-in-out infinite}
          .ha-monitoring span{opacity:0.7}
          .ha-sla{position:absolute;top:10px;right:14px;display:flex;align-items:center;gap:4px;font-size:8px;font-weight:700;color:#10B981;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2);border-radius:20px;padding:3px 10px}
          .ha-sla i{font-size:9px}
          .ha-legend{position:absolute;left:12px;bottom:34px;display:flex;flex-direction:column;gap:3px;font-size:6.5px;opacity:0.5}
          .ha-legend-item{display:flex;align-items:center;gap:3px}
          .ha-legend-line{width:12px;height:2px;border-radius:1px}
          .ha-steps{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:20px;width:100%;max-width:960px}
          .ha-step{display:flex;align-items:center;gap:10px;transition:all 0.5s}
          .ha-step.active{transform:translateX(6px)}
          .ha-step-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;transition:all 0.5s;flex-shrink:0}
          .ha-step-text{font-size:12px;font-family:'Inter',system-ui,sans-serif}
          .ha-controls{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap;justify-content:center}
          .ha-btn{background:rgba(229,120,11,0.1);border:1px solid rgba(229,120,11,0.3);border-radius:8px;padding:7px 18px;color:#e5780b;cursor:pointer;font-size:11px;font-family:monospace}
          .ha-btn:hover{background:rgba(229,120,11,0.2)}
          .ha-btn-step{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:6px;padding:5px 12px;color:#E2E8F0;cursor:pointer;font-size:10px;font-family:monospace}
          .ha-btn-step.active{background:rgba(229,120,11,0.15);border-color:rgba(229,120,11,0.3)}
          .ha-arrow-line{transition:all 0.8s ease}
          .ha-fullfo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:800;color:#FF6B6B;letter-spacing:2px;opacity:0;transition:opacity 0.6s;text-shadow:0 0 20px rgba(255,107,107,0.5);pointer-events:none}
          @keyframes ha-heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
          @keyframes ha-pulse-glow{0%,100%{box-shadow:0 0 8px rgba(229,120,11,0.15)}50%{box-shadow:0 0 24px rgba(229,120,11,0.4)}}
          @keyframes ha-fail-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
          @keyframes ha-mon-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}

.ha-tl-step { opacity:0.2; transform:translateY(16px) scale(0.95); transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.34,1.56,.64,1); }
          .ha-tl-step.active { opacity:1; transform:translateY(0) scale(1); }
          .ha-tl-icon { transition: box-shadow 0.5s ease, border-color 0.5s ease; }
          .ha-tl-step.active .ha-tl-icon { border-color:#e5780b !important; box-shadow:0 0 0 5px rgba(229,120,11,0.1); }
          .ha-tl-number { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:#e5780b; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:15; opacity:0; transform:scale(0); transition:opacity 0.3s, transform 0.4s cubic-bezier(.34,1.56,.64,1); }
          .ha-tl-step.active .ha-tl-number { opacity:1; transform:scale(1); }
          .ha-tl-chevron { color:#e5780b; opacity:0; transition:opacity 0.4s; }
          .ha-tl-chevron.show { opacity:0.4; }