{"id":12,"date":"2026-02-16T12:17:12","date_gmt":"2026-02-16T11:17:12","guid":{"rendered":"https:\/\/swipe4life.com\/?page_id=12"},"modified":"2026-02-16T17:51:13","modified_gmt":"2026-02-16T16:51:13","slug":"demo-montage-semantique","status":"publish","type":"page","link":"https:\/\/swipe4life.com\/en\/demo-montage-semantique\/","title":{"rendered":""},"content":{"rendered":"<style>\n  \/* ====== SWIPE4LIFE DEMO \u2013 FULLY SCOPED ====== *\/\n  .s4l-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 16px;background:\n    radial-gradient(70% 60% at 50% 40%, rgba(255,255,255,.07), rgba(0,0,0,.0) 55%),\n    radial-gradient(80% 70% at 50% 70%, rgba(246,224,140,.09), rgba(0,0,0,0) 60%),\n    linear-gradient(180deg, #050608 0%, #0b0d12 55%, #07080b 100%);\n  }\n  .s4l-card{\n    width:min(560px, 94vw);\n    color:rgba(255,255,255,.92);\n    background:rgba(20,22,28,.72);\n    border:1px solid rgba(255,255,255,.10);\n    border-radius:22px;\n    box-shadow: 0 18px 55px rgba(0,0,0,.55);\n    backdrop-filter: blur(10px);\n    padding:26px 22px 20px;\n  }\n  .s4l-title{\n    font-family: ui-serif, Georgia, serif;\n    font-size: 34px;\n    line-height:1.08;\n    margin: 2px 0 14px;\n    text-align:center;\n    letter-spacing:.2px;\n  }\n  .s4l-sub{opacity:.78;font-size:14px;margin:0 0 14px;text-align:center}\n  .s4l-row{margin:12px 0}\n  .s4l-label{font-size:13px;opacity:.82;margin:0 0 6px}\n  .s4l-input, .s4l-select{\n    width:100%;\n    background:rgba(0,0,0,.35);\n    border:1px solid rgba(255,255,255,.14);\n    color:rgba(255,255,255,.92);\n    border-radius:12px;\n    padding:12px 12px;\n    font-size:16px;\n    outline:none;\n  }\n  .s4l-input::placeholder{color:rgba(255,255,255,.45)}\n  .s4l-input:focus, .s4l-select:focus{border-color: rgba(246,224,140,.55); box-shadow:0 0 0 3px rgba(246,224,140,.12)}\n  .s4l-check{display:flex;gap:10px;align-items:flex-start;margin:10px 0 2px;opacity:.9}\n  .s4l-check input{margin-top:3px}\n  .s4l-hr{height:1px;background:rgba(255,255,255,.10);border:0;margin:14px 0}\n  .s4l-actions{display:flex;gap:10px;margin-top:14px}\n  .s4l-btn{\n    flex:1;\n    border:1px solid rgba(246,224,140,.35);\n    background: linear-gradient(180deg, rgba(246,224,140,.22), rgba(158,123,46,.18));\n    color:rgba(255,255,255,.92);\n    padding:14px 14px;\n    border-radius:14px;\n    cursor:pointer;\n    font-size:17px;\n    font-family: ui-serif, Georgia, serif;\n  }\n  .s4l-btn:hover{filter:brightness(1.06)}\n  .s4l-btn:active{transform:translateY(1px)}\n  .s4l-btn.secondary{\n    background:rgba(255,255,255,.06);\n    border:1px solid rgba(255,255,255,.14);\n    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;\n  }\n  .s4l-note{font-size:12px;opacity:.75;margin-top:8px;text-align:center}\n  .s4l-err{display:none;margin:10px 0 0;color:#ffd9d9;background:rgba(255,0,0,.12);border:1px solid rgba(255,0,0,.25);padding:10px;border-radius:12px;font-size:13px}\n  .s4l-step{display:none}\n  .s4l-step.active{display:block}\n\n  \/* ====== Intervenants list (visible progression) ====== *\/\n  .s4l-addline{display:flex;gap:10px;align-items:center}\n  .s4l-addline .s4l-input{flex:1}\n  .s4l-mini{\n    white-space:nowrap;\n    padding:12px 12px;\n    border-radius:12px;\n    border:1px solid rgba(255,255,255,.16);\n    background:rgba(255,255,255,.06);\n    color:rgba(255,255,255,.92);\n    cursor:pointer;\n    font-size:14px;\n  }\n  .s4l-mini:hover{filter:brightness(1.06)}\n\n  .s4l-list{margin:12px 0 0;display:flex;flex-direction:column;gap:10px}\n  .s4l-item{\n    border:1px solid rgba(255,255,255,.12);\n    background:rgba(0,0,0,.25);\n    border-radius:14px;\n    padding:12px;\n  }\n  .s4l-itemTop{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}\n  .s4l-itemName{font-weight:700}\n  .s4l-itemMeta{opacity:.75;font-size:12px;margin-top:2px}\n  .s4l-del{\n    border:1px solid rgba(255,255,255,.14);\n    background:rgba(255,255,255,.06);\n    color:rgba(255,255,255,.9);\n    border-radius:12px;\n    padding:8px 10px;\n    cursor:pointer;\n    font-size:12px;\n  }\n  .s4l-grid{display:grid;grid-template-columns: 1fr 1fr; gap:10px; margin-top:10px}\n  .s4l-progress{height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:10px}\n  .s4l-bar{height:100%;width:0%;background:linear-gradient(90deg, rgba(246,224,140,.55), rgba(158,123,46,.55))}\n  .s4l-count{opacity:.78;font-size:12px;margin-top:8px}\n  @media (max-width:520px){\n    .s4l-title{font-size:28px}\n    .s4l-grid{grid-template-columns:1fr}\n  }\n<\/style>\n\n<div class=\"s4l-wrap\" id=\"s4lDemo\">\n  <div class=\"s4l-card\">\n\n    <!-- STEP 1 -->\n    <div class=\"s4l-step active\" data-step=\"1\">\n      <div class=\"s4l-title\">Que souhaitez-vous rechercher ?<\/div>\n      <div class=\"s4l-sub\">Exprimez votre demande en langage naturel<\/div>\n\n      <div class=\"s4l-row\">\n        <div class=\"s4l-label\">Sujet \/ Question<\/div>\n        <input class=\"s4l-input\" id=\"s4lTopic\" placeholder=\"Ex : \u00c9ducation des enfants, Chalom Bayit, histoire d\u2019Isra\u00ebl...\" \/>\n      <\/div>\n\n      <div class=\"s4l-row\">\n        <div class=\"s4l-label\">O\u00f9 souhaitez-vous effectuer la recherche ?<\/div>\n        <label class=\"s4l-check\">\n          <input type=\"checkbox\" id=\"s4lInternet\" checked \/>\n          <span>Internet (global)<\/span>\n        <\/label>\n        <div style=\"margin-top:10px\">\n          <input class=\"s4l-input\" id=\"s4lSources\" placeholder=\"Ex : YouTube, INA, cha\u00eene TV, site web, archives...\" \/>\n        <\/div>\n      <\/div>\n\n      <div class=\"s4l-actions\">\n        <button class=\"s4l-btn\" id=\"s4lNext1\" type=\"button\">Continuer<\/button>\n      <\/div>\n\n      <div class=\"s4l-err\" id=\"s4lErr1\"><\/div>\n      <div class=\"s4l-note\">D\u00e9mo \u2014 aucune recherche r\u00e9elle n\u2019est lanc\u00e9e.<\/div>\n    <\/div>\n\n    <!-- STEP 2 -->\n    <div class=\"s4l-step\" data-step=\"2\">\n      <div class=\"s4l-title\">Qui est susceptible d\u2019avoir abord\u00e9 ce sujet ?<\/div>\n      <div class=\"s4l-sub\">Saisissez jusqu\u2019\u00e0 5 intervenants (enseignants, reporters, \u00e9missions\u2026)<\/div>\n\n      <div class=\"s4l-row\">\n        <div class=\"s4l-label\">Nom de l\u2019intervenant \/ \u00e9mission \/ reportage<\/div>\n        <div class=\"s4l-addline\">\n          <input class=\"s4l-input\" id=\"s4lPersonName\" placeholder=\"Ex : Rav X, Professeur Y, Journal Z, \u00c9mission W...\" \/>\n          <button class=\"s4l-mini\" id=\"s4lAddPerson\" type=\"button\">Ajouter<\/button>\n        <\/div>\n        <div class=\"s4l-count\" id=\"s4lCount\">0 \/ 5 ajout\u00e9s<\/div>\n      <\/div>\n\n      <div class=\"s4l-list\" id=\"s4lList\"><\/div>\n\n      <hr class=\"s4l-hr\" \/>\n\n      <div class=\"s4l-row\">\n        <div class=\"s4l-label\">Dur\u00e9e souhait\u00e9e du r\u00e9sultat final<\/div>\n        <select class=\"s4l-select\" id=\"s4lDuration\">\n          <option value=\"\">\u2014 Choisir \u2014<\/option>\n          <option value=\"2\">2 minutes<\/option>\n          <option value=\"5\">5 minutes<\/option>\n          <option value=\"10\">10 minutes<\/option>\n          <option value=\"15\">15 minutes<\/option>\n          <option value=\"30\">30 minutes<\/option>\n          <option value=\"custom\">Autre (je pr\u00e9ciserai plus tard)<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"s4l-actions\">\n        <button class=\"s4l-btn secondary\" id=\"s4lBack2\" type=\"button\">Retour<\/button>\n        <button class=\"s4l-btn\" id=\"s4lNext2\" type=\"button\">Continuer<\/button>\n      <\/div>\n\n      <div class=\"s4l-err\" id=\"s4lErr2\"><\/div>\n      <div class=\"s4l-note\">Les intervenants restent visibles avec leur progression.<\/div>\n    <\/div>\n\n    <!-- STEP 3 -->\n    <div class=\"s4l-step\" data-step=\"3\">\n      <div class=\"s4l-title\">Langue &#038; formats<\/div>\n      <div class=\"s4l-sub\">Choisissez la langue et le type de livraison<\/div>\n\n      <div class=\"s4l-grid\">\n        <div class=\"s4l-row\" style=\"margin:0\">\n          <div class=\"s4l-label\">Langue<\/div>\n          <select class=\"s4l-select\" id=\"s4lLang\">\n            <option value=\"fr\">Fran\u00e7ais<\/option>\n            <option value=\"en\">English<\/option>\n            <option value=\"he\">\u05e2\u05d1\u05e8\u05d9\u05ea<\/option>\n          <\/select>\n        <\/div>\n        <div class=\"s4l-row\" style=\"margin:0\">\n          <div class=\"s4l-label\">Format principal<\/div>\n          <select class=\"s4l-select\" id=\"s4lFormat\">\n            <option value=\"video\">\ud83c\udfa5 Montage vid\u00e9o sous-titr\u00e9<\/option>\n            <option value=\"audio\">\ud83d\udd0a Version audio<\/option>\n            <option value=\"text\">\ud83d\udcdd Transcription<\/option>\n          <\/select>\n        <\/div>\n      <\/div>\n\n      <div class=\"s4l-row\">\n        <div class=\"s4l-label\">Mode de r\u00e9ception<\/div>\n        <select class=\"s4l-select\" id=\"s4lDelivery\">\n          <option value=\"link\">Lien s\u00e9curis\u00e9<\/option>\n          <option value=\"whatsapp\">WhatsApp<\/option>\n          <option value=\"email\">E-mail<\/option>\n          <option value=\"app\">Dans l\u2019app<\/option>\n        <\/select>\n      <\/div>\n\n      <div class=\"s4l-actions\">\n        <button class=\"s4l-btn secondary\" id=\"s4lBack3\" type=\"button\">Retour<\/button>\n        <button class=\"s4l-btn\" id=\"s4lFinish\" type=\"button\">Recevoir le r\u00e9sultat<\/button>\n      <\/div>\n\n      <div class=\"s4l-err\" id=\"s4lErr3\"><\/div>\n      <div class=\"s4l-note\">D\u00e9mo \u2014 cette action affichera un r\u00e9capitulatif.<\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(() => {\n  const root = document.getElementById(\"s4lDemo\");\n  if (!root) return;\n\n  const steps = [...root.querySelectorAll(\".s4l-step\")];\n\n  const showStep = (n) => {\n    steps.forEach(s => s.classList.toggle(\"active\", s.getAttribute(\"data-step\") === String(n)));\n    \/\/ remonte l\u00e9g\u00e8rement en haut du bloc\n    root.scrollIntoView({behavior:\"smooth\", block:\"start\"});\n  };\n\n  \/\/ Step 1\n  const topic = root.querySelector(\"#s4lTopic\");\n  const internet = root.querySelector(\"#s4lInternet\");\n  const sources = root.querySelector(\"#s4lSources\");\n  const err1 = root.querySelector(\"#s4lErr1\");\n  root.querySelector(\"#s4lNext1\").addEventListener(\"click\", () => {\n    err1.style.display = \"none\";\n    const t = (topic.value || \"\").trim();\n    if (!t) {\n      err1.textContent = \"Veuillez saisir un sujet (m\u00eame 2 ou 3 mots).\";\n      err1.style.display = \"block\";\n      topic.focus();\n      return;\n    }\n    \/\/ ok\n    showStep(2);\n  });\n\n  \/\/ Step 2 \u2013 Intervenants (jusqu\u2019\u00e0 5)\n  const nameInput = root.querySelector(\"#s4lPersonName\");\n  const addBtn = root.querySelector(\"#s4lAddPerson\");\n  const list = root.querySelector(\"#s4lList\");\n  const count = root.querySelector(\"#s4lCount\");\n  const duration = root.querySelector(\"#s4lDuration\");\n  const err2 = root.querySelector(\"#s4lErr2\");\n\n  let people = []; \/\/ {name, source, role, progress}\n\n  const render = () => {\n    list.innerHTML = \"\";\n    count.textContent = `${people.length} \/ 5 ajout\u00e9s`;\n\n    people.forEach((p, idx) => {\n      const item = document.createElement(\"div\");\n      item.className = \"s4l-item\";\n\n      item.innerHTML = `\n        <div class=\"s4l-itemTop\">\n          <div>\n            <div class=\"s4l-itemName\">${escapeHtml(p.name)}<\/div>\n            <div class=\"s4l-itemMeta\">${escapeHtml(p.role || \"Intervenant \/ \u00e9mission \/ reportage\")} \u2014 ${escapeHtml(p.source || \"Source \u00e0 pr\u00e9ciser\")}<\/div>\n          <\/div>\n          <button class=\"s4l-del\" type=\"button\">Supprimer<\/button>\n        <\/div>\n\n        <div class=\"s4l-grid\">\n          <div>\n            <div class=\"s4l-label\" style=\"margin:10px 0 6px\">Type<\/div>\n            <select class=\"s4l-select\" data-field=\"role\">\n              <option value=\"\">Intervenant \/ \u00e9mission \/ reportage<\/option>\n              <option value=\"Enseignant \/ Conf\u00e9rencier\">Enseignant \/ Conf\u00e9rencier<\/option>\n              <option value=\"Rav \/ Rabbi\">Rav \/ Rabbi<\/option>\n              <option value=\"Journaliste \/ Reporter\">Journaliste \/ Reporter<\/option>\n              <option value=\"Cha\u00eene \/ \u00c9mission\">Cha\u00eene \/ \u00c9mission<\/option>\n              <option value=\"Autre\">Autre<\/option>\n            <\/select>\n          <\/div>\n\n          <div>\n            <div class=\"s4l-label\" style=\"margin:10px 0 6px\">Source (obligatoire)<\/div>\n            <input class=\"s4l-input\" data-field=\"source\" placeholder=\"Ex : YouTube, i24NEWS, Arte, Radio X, Site Y...\" \/>\n          <\/div>\n        <\/div>\n\n        <div class=\"s4l-label\" style=\"margin:10px 0 6px\">Progression (pour cette source)<\/div>\n        <select class=\"s4l-select\" data-field=\"progress\">\n          <option value=\"Id\u00e9e\">Id\u00e9e \/ piste<\/option>\n          <option value=\"Recherche\">Recherche<\/option>\n          <option value=\"S\u00e9lection\">S\u00e9lection<\/option>\n          <option value=\"Montage\">Montage<\/option>\n          <option value=\"Final\">Final<\/option>\n        <\/select>\n\n        <div class=\"s4l-progress\"><div class=\"s4l-bar\"><\/div><\/div>\n      `;\n\n      \/\/ delete\n      item.querySelector(\".s4l-del\").addEventListener(\"click\", () => {\n        people.splice(idx, 1);\n        render();\n      });\n\n      \/\/ bind fields\n      const roleSel = item.querySelector('[data-field=\"role\"]');\n      const srcIn = item.querySelector('[data-field=\"source\"]');\n      const progSel = item.querySelector('[data-field=\"progress\"]');\n      const bar = item.querySelector(\".s4l-bar\");\n\n      roleSel.value = p.role || \"\";\n      srcIn.value = p.source || \"\";\n      progSel.value = p.progress || \"Id\u00e9e\";\n\n      const setBar = (v) => {\n        const map = { \"Id\u00e9e\":20, \"Recherche\":40, \"S\u00e9lection\":60, \"Montage\":80, \"Final\":100 };\n        bar.style.width = (map[v] || 20) + \"%\";\n      };\n      setBar(progSel.value);\n\n      roleSel.addEventListener(\"change\", () => { p.role = roleSel.value; });\n      srcIn.addEventListener(\"input\", () => { p.source = srcIn.value; item.querySelector(\".s4l-itemMeta\").textContent = `${p.role || \"Intervenant \/ \u00e9mission \/ reportage\"} \u2014 ${p.source || \"Source \u00e0 pr\u00e9ciser\"}`; });\n      progSel.addEventListener(\"change\", () => { p.progress = progSel.value; setBar(p.progress); });\n\n      list.appendChild(item);\n    });\n\n    \/\/ d\u00e9sactive l\u2019ajout si 5\n    addBtn.disabled = people.length >= 5;\n    addBtn.style.opacity = addBtn.disabled ? .5 : 1;\n    addBtn.style.cursor = addBtn.disabled ? \"not-allowed\" : \"pointer\";\n  };\n\n  const addPerson = () => {\n    err2.style.display = \"none\";\n    const n = (nameInput.value || \"\").trim();\n    if (!n) {\n      err2.textContent = \"Veuillez saisir au moins un nom (intervenant \/ \u00e9mission \/ reportage), puis cliquez sur Ajouter.\";\n      err2.style.display = \"block\";\n      nameInput.focus();\n      return;\n    }\n    if (people.length >= 5) return;\n\n    people.push({ name:n, source:\"\", role:\"\", progress:\"Id\u00e9e\" });\n    nameInput.value = \"\";\n    render();\n  };\n\n  addBtn.addEventListener(\"click\", addPerson);\n  nameInput.addEventListener(\"keydown\", (e) => {\n    if (e.key === \"Enter\") { e.preventDefault(); addPerson(); }\n  });\n\n  root.querySelector(\"#s4lBack2\").addEventListener(\"click\", () => showStep(1));\n\n  root.querySelector(\"#s4lNext2\").addEventListener(\"click\", () => {\n    err2.style.display = \"none\";\n\n    if (people.length === 0) {\n      err2.textContent = \"Ajoutez au moins 1 intervenant \/ \u00e9mission \/ reportage (jusqu\u2019\u00e0 5).\";\n      err2.style.display = \"block\";\n      nameInput.focus();\n      return;\n    }\n\n    \/\/ source obligatoire pour chacun\n    const missing = people.find(p => !(p.source || \"\").trim());\n    if (missing) {\n      err2.textContent = \"Pour chaque intervenant, la Source est obligatoire (YouTube, cha\u00eene TV, radio, site web\u2026).\";\n      err2.style.display = \"block\";\n      return;\n    }\n\n    if (!duration.value) {\n      err2.textContent = \"Veuillez choisir la dur\u00e9e souhait\u00e9e du r\u00e9sultat final.\";\n      err2.style.display = \"block\";\n      duration.focus();\n      return;\n    }\n\n    showStep(3);\n  });\n\n  \/\/ Step 3\n  const err3 = root.querySelector(\"#s4lErr3\");\n  root.querySelector(\"#s4lBack3\").addEventListener(\"click\", () => showStep(2));\n\n  root.querySelector(\"#s4lFinish\").addEventListener(\"click\", () => {\n    err3.style.display = \"none\";\n\n    const recap = {\n      sujet: (topic.value || \"\").trim(),\n      internet: !!internet.checked,\n      sources: (sources.value || \"\").trim(),\n      intervenants: people,\n      duree: duration.value,\n      langue: root.querySelector(\"#s4lLang\").value,\n      format: root.querySelector(\"#s4lFormat\").value,\n      livraison: root.querySelector(\"#s4lDelivery\").value\n    };\n\n    \/\/ D\u00e9mo : on affiche un r\u00e9capitulatif simple\n    alert(\"R\u00e9capitulatif (d\u00e9mo) :\\n\\n\" + JSON.stringify(recap, null, 2));\n  });\n\n  function escapeHtml(str){\n    return String(str).replace(\/[&<>\"']\/g, s => ({\n      \"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#039;\"\n    })[s]);\n  }\n\n  \/\/ init\n  render();\n})();\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Que souhaitez-vous rechercher ? Exprimez votre demande en langage naturel Sujet \/ Question O\u00f9 souhaitez-vous effectuer la recherche ? Internet (global) Continuer D\u00e9mo \u2014 aucune recherche r\u00e9elle n\u2019est lanc\u00e9e. Qui est susceptible d\u2019avoir abord\u00e9 ce sujet ? Saisissez jusqu\u2019\u00e0 5 intervenants (enseignants, reporters, \u00e9missions\u2026) Nom de l\u2019intervenant \/ \u00e9mission \/ reportage Ajouter 0 \/ 5&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/swipe4life.com\/en\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swipe4life.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swipe4life.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swipe4life.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/swipe4life.com\/en\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":7,"href":"https:\/\/swipe4life.com\/en\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/swipe4life.com\/en\/wp-json\/wp\/v2\/pages\/12\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/swipe4life.com\/en\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}