document.addEventListener('DOMContentLoaded', function () {
    var section = document.querySelector('.membres-section');
    if (!section) return;

    // Build the popover element once and append to body
    var popover = document.createElement('div');
    popover.id  = 'membre-popover';
    popover.innerHTML =
        '<div class="membre-popover-inner">' +
            '<img class="membre-popover-pic" src="" alt="">' +
            '<div class="membre-popover-info">' +
                '<p class="membre-popover-name"></p>' +
                '<p class="membre-popover-status"></p>' +
                '<p class="membre-popover-domaines"></p>' +
                '<p class="membre-popover-autres"></p>' +
            '</div>' +
        '</div>';
    document.body.appendChild(popover);

    var pic    = popover.querySelector('.membre-popover-pic');
    var elName = popover.querySelector('.membre-popover-name');
    var elStat = popover.querySelector('.membre-popover-status');
    var elDom  = popover.querySelector('.membre-popover-domaines');
    var elAut  = popover.querySelector('.membre-popover-autres');

    var visible    = false;
    var currentRow = null;

    // ── Show/hide via event delegation on the section ────────
    section.addEventListener('mouseover', function (e) {
        var row = e.target.closest('tbody tr');
        if (!row || row === currentRow) return;
        currentRow = row;

        var avatar = row.dataset.avatar || '';
        if (avatar) {
            pic.src = avatar;
            pic.style.display = '';
        } else {
            pic.src = '';
            pic.style.display = 'none';
        }

        elName.textContent = row.dataset.name   || '';
        elStat.textContent = row.dataset.status || '';

        var domVal = row.dataset.domaines || '';
        elDom.textContent    = domVal;
        elDom.style.display  = domVal ? '' : 'none';

        var autVal = row.dataset.autresDomaines || '';
        elAut.innerHTML     = autVal.replace(/\n/g, '<br>');
        elAut.style.display = autVal ? '' : 'none';

        popover.classList.add('is-visible');
        visible = true;
    });

    section.addEventListener('mouseout', function (e) {
        var row = e.target.closest('tbody tr');
        if (!row) return;
        // only hide when leaving the row entirely (not moving to a child)
        if (e.relatedTarget && row.contains(e.relatedTarget)) return;
        currentRow = null;
        popover.classList.remove('is-visible');
        visible = false;
    });

    // ── Follow the cursor ─────────────────────────────────────
    document.addEventListener('mousemove', function (e) {
        if (!visible) return;
        var x  = e.clientX + 18;
        var y  = e.clientY + 18;
        var pw = popover.offsetWidth;
        var ph = popover.offsetHeight;
        if (x + pw > window.innerWidth)  x = e.clientX - pw - 8;
        if (y + ph > window.innerHeight) y = e.clientY - ph - 8;
        popover.style.left = x + 'px';
        popover.style.top  = y + 'px';
    });
});