/* Service 4 : systèmes intelligents. Interfaces illustratives. */

@keyframes bar-rise { from { transform: scaleY(0.14); } to { transform: scaleY(var(--h)); } }
@keyframes draw { from { stroke-dashoffset: 330; } to { stroke-dashoffset: 0; } }
@keyframes ring-fill { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 34; } }

/* ---------- sys2 : tableau de bord ---------- */

.sys2 { background: linear-gradient(170deg, #0f1722, #090c12); }

.sys2__head { position: absolute; left: 18px; right: 18px; top: 56px; display: flex; gap: 8px; }
.sys2__head span { height: 8px; flex: 1; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.sys2__head span:first-child { flex: 0 0 38%; background: rgba(255, 255, 255, 0.36); }

.sys2__ring { position: absolute; right: 18px; top: 84px; width: 84px; height: 84px; transform: rotate(-90deg); }
.sys2__ring circle { fill: none; stroke-width: 8; }
.sys2__ring .trk { stroke: rgba(255, 255, 255, 0.1); }
.sys2__ring .val { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 188; animation: ring-fill 4.4s ease-in-out infinite alternate; }

.sys2__bars { position: absolute; left: 18px; top: 92px; width: 118px; height: 78px; display: flex; align-items: flex-end; gap: 5px; }
.sys2__bars i { flex: 1; height: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #5ec8ff, #2f6bff); transform-origin: bottom; animation: bar-rise 2.2s var(--ease-io) calc(var(--n) * 0.12s) infinite alternate; }
.sys2__bars i:nth-child(3n) { background: linear-gradient(180deg, #ffd08a, #f5a524); }

.sys2__line { position: absolute; left: 18px; right: 18px; bottom: 28px; width: calc(100% - 36px); height: 96px; overflow: visible; }
.sys2__line .ln { fill: none; stroke: #5ec8ff; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 330; animation: draw 3.6s ease-in-out infinite alternate; }
.sys2__line .area { fill: rgba(94, 200, 255, 0.14); }

/* ---------- sys3 : assistant ---------- */

@keyframes msg-me { 0%, 3% { opacity: 0; transform: translateY(10px); } 9%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes msg-dots { 0%, 15% { opacity: 0; } 20%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes msg-ai { 0%, 36% { opacity: 0; transform: translateY(10px); } 44%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes dot-bounce { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } }

.sys3 { background: linear-gradient(170deg, #17120e, #0a0908); }

.sys3__msg { position: absolute; max-width: 190px; padding: 12px 14px; border-radius: 16px; font-size: 13px; font-weight: 600; line-height: 1.35; opacity: 0; }

.sys3__msg--me { right: 16px; top: 74px; border-bottom-right-radius: 4px; color: #111; background: var(--accent); animation: msg-me 9s ease-in-out infinite; }

.sys3__msg--dots { left: 16px; top: 150px; display: flex; gap: 5px; border-bottom-left-radius: 4px; background: #232018; animation: msg-dots 9s ease-in-out infinite; }
.sys3__msg--dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: dot-bounce 0.9s ease-in-out infinite; }
.sys3__msg--dots i:nth-child(2) { animation-delay: 0.15s; }
.sys3__msg--dots i:nth-child(3) { animation-delay: 0.3s; }

.sys3__msg--ai { left: 16px; top: 150px; width: 200px; display: grid; gap: 7px; border-bottom-left-radius: 4px; background: #232018; animation: msg-ai 9s ease-in-out infinite; }
.sys3__msg--ai span { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.5); }
.sys3__msg--ai .l2 { width: 82%; background: rgba(255, 255, 255, 0.34); }
.sys3__msg--ai .l3 { width: 56%; background: rgba(255, 255, 255, 0.2); }
.sys3__msg--ai em { justify-self: start; margin-top: 4px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #111; background: #7bf0a8; }

/* ---------- sys4 : automatisation en trois temps ---------- */

@keyframes step-on {
  0%, 8% { opacity: 0.35; transform: translateX(0); }
  18%, 38% { opacity: 1; transform: translateX(8px); }
  50%, 100% { opacity: 0.35; transform: translateX(0); }
}
@keyframes step-dot { 0%, 8% { background: #26272c; color: #fff; } 18%, 38% { background: var(--accent); color: #111; } 50%, 100% { background: #26272c; color: #fff; } }

.sys4 { background: radial-gradient(100% 70% at 0% 100%, #231a0d, #0b0b0d 70%); }

.sys4 ol { position: absolute; left: 30px; right: 20px; top: 86px; margin: 0; padding: 0; list-style: none; display: grid; gap: 42px; }
.sys4 ol::before { content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px; width: 2px; background: rgba(255, 255, 255, 0.16); }

.sys4 li { position: relative; display: flex; align-items: center; gap: 16px; animation: step-on 6s ease-in-out calc(var(--n) * 2s) infinite; }
.sys4 li b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 14px; font-weight: 800; box-shadow: 0 0 0 4px #0b0b0d; animation: step-dot 6s ease-in-out calc(var(--n) * 2s) infinite; }
.sys4 li span { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }