Historique de la page

<div class="faq-portal-container">
    <aside class="faq-sidebar-menu">
        <h2 class="faq-menu-title">Catégories (5)</h2>
        <ul class="faq-nav-list" id="faq-menu">
            <li class="active" onclick="showPane('pane1')">Mon terminal</li>
            <li onclick="showPane('pane2')">Mon espace client</li>
            <li onclick="showPane('pane3')">Ma télécollecte</li>
            <li onclick="showPane('pane4')">Mon contrat acquéreur</li>
            <li onclick="showPane('pane5')">Déclarer un incident</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>
        </main>
</div>

<style>
/* Structure Flexbox sécurisée */
.faq-portal-container { display: flex; gap: 20px; }
.faq-sidebar-menu { width: 350px; background: #fff; padding: 20px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.faq-nav-list { list-style: none; padding: 0; }
.faq-nav-list li { padding: 15px; cursor: pointer; border-radius: 10px; margin-bottom: 5px; }
.faq-nav-list li.active { background: #3474FF; color: #fff; }
.faq-pane { display: none; flex: 1; background: #fff; padding: 30px; border-radius: 20px; }
.faq-pane.active { display: block; }

/* Mobile : on empile tout */
@media (max-width: 768px) {
    .faq-portal-container { display: block; }
    .faq-sidebar-menu { width: 100%; margin-bottom: 20px; }
    .faq-pane { display: block !important; margin-bottom: 20px; }
}
</style>

<script>
function showPane(id) {
    // Masque tout
    document.querySelectorAll('.faq-pane').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.faq-nav-list li').forEach(l => l.classList.remove('active'));
    // Affiche le bon
    document.getElementById(id).classList.add('active');
    event.currentTarget.classList.add('active');
}
</script>