(function () {
    var L = window.RESSOURCES, id = new URLSearchParams(location.search).get('outil');
    var R = L.find(function (r) { return r.id === id; }) || L[0];
    var el = function (i) { return document.getElementById(i); };
    var demo = (window.URL_DEMOS && window.URL_DEMOS[R.id]) || R.demo;
    document.title = R.titre + ' · Syllabus';
    el('r-titre-k').textContent = R.titre;
    el('r-titre').textContent = R.accroche;
    el('r-probleme').textContent = R.probleme;
    el('r-pour').textContent = 'Pour : ' + R.pour;
    el('r-accroche-fin').textContent = 'Essayez ' + R.titre.toLowerCase() + ' en quelques clics.';
    el('r-demo').href = el('r-demo2').href = demo;
    var ul = el('r-points');
    R.points.forEach(function (pt) {
        var li = document.createElement('li'), h = document.createElement('h3'), t = document.createElement('p');
        h.style.cssText = 'margin:0;font-size:20px;font-weight:800;letter-spacing:-0.01em;color:#0b1220';
        t.style.cssText = 'margin:12px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#374151';
        h.textContent = pt[0]; t.textContent = pt[1]; li.appendChild(h); li.appendChild(t); ul.appendChild(li);
    });
    var ol = el('r-etapes');
    R.etapes.forEach(function (e, i) {
        var li = document.createElement('li'), n = document.createElement('span'), t = document.createElement('p');
        li.style.cssText = 'display:grid;grid-template-columns:48px 1fr;align-items:baseline;gap:16px';
        n.style.cssText = 'font-size:28px;font-weight:800;color:#1d5cf5;font-variant-numeric:tabular-nums';
        t.style.cssText = 'margin:0;font-size:20px;line-height:1.5;font-weight:600;color:#0b1220';
        n.textContent = String(i + 1).padStart(2, '0'); t.textContent = e;
        li.appendChild(n); li.appendChild(t); ol.appendChild(li);
    });
    var box = el('r-video'), base = window.URL_VIDEOS || 'videos', reduit = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var v = document.createElement('video');
    v.muted = true; v.loop = true; v.playsInline = true; v.autoplay = !reduit; v.preload = 'metadata';
    v.setAttribute('aria-label', 'Démonstration vidéo : ' + R.titre);
    v.style.cssText = 'display:block;width:100%;height:100%;object-fit:cover';
    v.src = base + '/' + R.id + '.mp4';
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.style.cssText = 'position:absolute;right:20px;bottom:20px;width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:#0b1220;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)';
    var maj = function () { btn.textContent = v.paused ? '▶' : '❚❚'; btn.setAttribute('aria-label', v.paused ? 'Lire la vidéo' : 'Mettre en pause'); };
    btn.addEventListener('click', function () { v.paused ? v.play() : v.pause(); });
    v.addEventListener('play', maj); v.addEventListener('pause', maj);
    v.addEventListener('error', function () {
        box.innerHTML = '';
        var d = document.createElement('div');
        d.style.cssText = 'height:100%;display:grid;place-items:center;text-align:center;padding:32px';
        d.innerHTML = '<div><p style="margin:0;font-size:18px;font-weight:700;color:#0b1220">Vidéo de démonstration</p><p style="margin:8px 0 0;font-size:14px;font-weight:600;color:#4b5563">Fichier attendu : <code>videos/' + R.id + '.mp4</code></p></div>';
        box.appendChild(d);
        el('r-video-legende').textContent = '';
    });
    box.appendChild(v); box.appendChild(btn); maj();
    el('r-video-legende').textContent = R.titre + ', en conditions réelles.';
    if (!reduit) { var pr = v.play(); if (pr && pr.catch) pr.catch(function () {}); }
})();