<div class="faq-portal-container">
    <aside class="faq-sidebar-menu">
        <h2 class="faq-menu-title">Catégories (3)</h2>
        <ul class="faq-nav-list" id="faq-menu">
            <li><a href="#pane1" class="faq-link" onclick="showPane(event, 'pane1')">Mon terminal</a></li>
            <li><a href="#pane2" class="faq-link" onclick="showPane(event, 'pane2')">Mon espace client</a></li>
            <li><a href="#pane3" class="faq-link" onclick="showPane(event, 'pane3')">Ma télécollecte</a></li>
        </ul>
    </aside>

    <main class="faq-content-panes">
        <section id="pane1" class="faq-pane active">
            <h3 class="md-sub-title">Mon terminal</h3>
            <div class="md-faq"><div class="md-item"><div class="md-question">Comment commander un terminal ?</div><div class="md-answer"><span class="liensCommande-texte"></span></div></div></div>
        </section>
        <section id="pane2" class="faq-pane">
            <h3 class="md-sub-title">Mon espace client</h3>
            <div class="md-faq"><div class="md-item"><div class="md-question">Où trouver mes identifiants ?</div><div class="md-answer"><span class="dashboardLien-texte"></span></div></div></div>
        </section>
        <section id="pane3" class="faq-pane">
            <h3 class="md-sub-title">Ma télécollecte</h3>
            <div class="md-faq"><div class="md-item"><div class="md-question">Délai de paiement ?</div><div class="md-answer"><span class="telecollecte2-texte"></span></div></div></div>
        </section>
    </main>
</div>

<style>
.faq-link { 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
    color: #000; 
    border-radius: 10px;
    cursor: pointer;
    min-height: 44px; /* Taille recommandée par Apple pour les zones tactiles */
    -webkit-tap-highlight-color: transparent;
    transition: background 0.3s ease;
}
.faq-link.active { background: #3474FF !important; color: #fff !important; }

/* Correction pour mobile : quand on clique, on veut voir la section */
@media (max-width: 768px) {
    .faq-pane { scroll-margin-top: 20px; } /* Ajoute un espace en haut lors du scroll */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // On écoute les clics sur tout le conteneur du menu
    const menuContainer = document.getElementById('faq-menu');
    
    if (menuContainer) {
        menuContainer.addEventListener('click', function(e) {
            // On cherche si l'élément cliqué est un lien .faq-link
            const clickedLink = e.target.closest('.faq-link');
            
            if (clickedLink) {
                e.preventDefault();
                
                // 1. Nettoyage de TOUS les liens
                document.querySelectorAll('.faq-link').forEach(l => {
                    l.classList.remove('active');
                    l.style.removeProperty('background-color');
                    l.style.removeProperty('color');
                });
                
                // 2. Activation du lien cliqué
                clickedLink.classList.add('active');
                clickedLink.style.setProperty('background-color', '#3474FF', 'important');
                clickedLink.style.setProperty('color', '#FFFFFF', 'important');
                
                // 3. Gestion des panneaux
                const targetId = clickedLink.getAttribute('href').substring(1);
                document.querySelectorAll('.faq-pane').forEach(p => p.classList.remove('active'));
                
                const targetPane = document.getElementById(targetId);
                if (targetPane) {
                    targetPane.classList.add('active');
                    // Scroll fluide vers la section
                    targetPane.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }
        });
    }
});
</script>