const lines2 = [ { label: "✔️ Tarif horaire", price: "70 €", note: "Déjà inclus dans nos forfaits d’intervention" }, { label: "✔️ Frais de déplacement", price: "60 €", note: "Déjà inclus dans nos forfaits d’intervention" }, { label: "✔️ Tarifs nuit, week-end et jours fériés", price: "+100 %", note: "En soirée (18h – 22h)" } ]; const speed2 = 20; const target2 = document.getElementById("typing-list-2"); let i = 0, j = 0; let currentText = "", targetNote; function createTypingLine(line) { const li = document.createElement("li"); li.classList.add("typed-line"); const container = document.createElement("div"); container.classList.add("line-grid"); const left = document.createElement("span"); left.classList.add("label"); left.textContent = line.label; const spacer = document.createElement("span"); spacer.classList.add("spacer"); const right = document.createElement("span"); right.classList.add("price"); right.textContent = line.price; container.append(left, spacer, right); const note = document.createElement("div"); note.classList.add("note"); li.append(container, note); target2.appendChild(li); return { noteEl: note, noteText: line.note }; } function typeLines() { if (i < lines2.length) { if (j === 0) { const result = createTypingLine(lines2[i]); currentText = result.noteText; targetNote = result.noteEl; } if (j < currentText.length) { targetNote.textContent += currentText.charAt(j); j++; setTimeout(typeLines, speed2); } else { i++; j = 0; setTimeout(typeLines, 300); } } } typeLines(); .typewriter { font-family: 'Manrope', sans-serif; font-size: clamp(14px, 2vw, 17px); width: 100%; padding: 1em; text-align: left; } #typing-list-2 { list-style: none; padding: 0; margin: 0; } .typed-line { margin-bottom: 1em; white-space: normal; text-align: left; overflow-wrap: break-word; } .line-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5em; } .label { white-space: nowrap; font-size: 0.95em; } .spacer { border-bottom: 1px dashed #888; height: 1px; width: 100%; } .price { white-space: nowrap; min-width: 50px; text-align: right; font-size: 0.95em; } .note { margin-top: 0.2em; font-size: 0.95em; color: #333; } @media (max-width: 600px) { .typewriter { font-size: 13px; padding: 0.5em; } .typed-line { margin-bottom: 0.6em; } .line-grid { grid-template-columns: auto 1fr auto; gap: 0.3em; } .label { font-size: 0.85em; } .price { font-size: 0.85em; min-width: 40px; } .note { font-size: 0.75em; } }