rebours/main.js

/**
 * REBOUR — Main Script
 */

document.addEventListener('DOMContentLoaded', () => {

    // ---- CUSTOM CURSOR ----
    const cursorDot = document.querySelector('.cursor-dot');
    const cursorOutline = document.querySelector('.cursor-outline');

    window.addEventListener('mousemove', (e) => {
        cursorDot.style.left = `${e.clientX}px`;
        cursorDot.style.top = `${e.clientY}px`;
        cursorOutline.animate(
            { left: `${e.clientX}px`, top: `${e.clientY}px` },
            { duration: 100, fill: 'forwards' }
        );
    });

    const interactives = document.querySelectorAll('a, button, input, .product-card, summary, .panel-close');
    interactives.forEach(el => {
        el.addEventListener('mouseenter', () => {
            cursorOutline.style.width = '38px';
            cursorOutline.style.height = '38px';
            cursorDot.style.transform = 'translate(-50%, -50%) scale(0)';
        });
        el.addEventListener('mouseleave', () => {
            cursorOutline.style.width = '26px';
            cursorOutline.style.height = '26px';
            cursorDot.style.transform = 'translate(-50%, -50%) scale(1)';
        });
    });

    // ---- INTERACTIVE GRID ----
    const gridContainer = document.getElementById('interactive-grid');
    const CELL = 60;
    const COLORS = [
        'rgba(160,160,155,0.3)',
        'rgba(140,140,135,0.22)',
        'rgba(120,120,115,0.18)',
    ];

    function buildGrid() {
        if (!gridContainer) return;
        gridContainer.innerHTML = '';
        const cols = Math.ceil(window.innerWidth / CELL);
        const rows = Math.ceil(window.innerHeight / CELL);
        gridContainer.style.display = 'grid';
        gridContainer.style.gridTemplateColumns = `repeat(${cols}, ${CELL}px)`;
        gridContainer.style.gridTemplateRows = `repeat(${rows}, ${CELL}px)`;

        for (let i = 0; i < cols * rows; i++) {
            const cell = document.createElement('div');
            cell.className = 'grid-cell';
            cell.addEventListener('mouseenter', () => {
                cell.style.transition = 'none';
                cell.style.backgroundColor = COLORS[Math.floor(Math.random() * COLORS.length)];
            });
            cell.addEventListener('mouseleave', () => {
                cell.style.transition = 'background-color 1.4s ease-out';
                cell.style.backgroundColor = 'transparent';
            });
            gridContainer.appendChild(cell);
        }
    }

    buildGrid();
    let rt;
    window.addEventListener('resize', () => { clearTimeout(rt); rt = setTimeout(buildGrid, 150); });

    // ---- PRODUCT PANEL ----
    const panel = document.getElementById('product-panel');
    const panelClose = document.getElementById('panel-close');
    const cards = document.querySelectorAll('.product-card');

    // Champs du panel
    const fields = {
        img:    document.getElementById('panel-img'),
        index:  document.getElementById('panel-index'),
        name:   document.getElementById('panel-name'),
        type:   document.getElementById('panel-type'),
        mat:    document.getElementById('panel-mat'),
        year:   document.getElementById('panel-year'),
        status: document.getElementById('panel-status'),
        desc:   document.getElementById('panel-desc'),
        specs:  document.getElementById('panel-specs'),
        notes:  document.getElementById('panel-notes'),
    };

    function openPanel(card) {
        fields.img.src      = card.dataset.img;
        fields.img.alt      = card.dataset.name;
        fields.index.textContent  = card.dataset.index;
        fields.name.textContent   = card.dataset.name;
        fields.type.textContent   = card.dataset.type;
        fields.mat.textContent    = card.dataset.mat;
        fields.year.textContent   = card.dataset.year;
        fields.status.textContent = card.dataset.status;
        fields.desc.textContent   = card.dataset.desc;
        fields.specs.textContent  = card.dataset.specs;
        fields.notes.textContent  = card.dataset.notes;

        // Ferme les accordéons
        panel.querySelectorAll('details').forEach(d => d.removeAttribute('open'));

        panel.classList.add('is-open');
        panel.setAttribute('aria-hidden', 'false');
        document.body.style.overflow = 'hidden';

        // Refresh cursor sur les nouveaux éléments
        panel.querySelectorAll('summary, .panel-close').forEach(el => {
            el.addEventListener('mouseenter', () => {
                cursorOutline.style.width = '38px';
                cursorOutline.style.height = '38px';
                cursorDot.style.transform = 'translate(-50%, -50%) scale(0)';
            });
            el.addEventListener('mouseleave', () => {
                cursorOutline.style.width = '26px';
                cursorOutline.style.height = '26px';
                cursorDot.style.transform = 'translate(-50%, -50%) scale(1)';
            });
        });
    }

    function closePanel() {
        panel.classList.remove('is-open');
        panel.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
    }

    cards.forEach(card => {
        card.addEventListener('click', () => openPanel(card));
    });

    panelClose.addEventListener('click', closePanel);

    // Echap pour fermer
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closePanel();
    });

});