Historique de la page

<div class="device-container">
    <div id="devicedisplay-ios1" class="device-contentversion">
    <p>Version : Android  <p>Affichage type 1 (iOS)<ou Desktop</p>
    </div>

    <div id="device-android" class="device-content">
        <p>Affichage type 2 (Android)</p>
    </div>
    <div id="device-desktopdisplay-2" class="device-contentversion">
    <p>Version    <p>Affichage type 3 (Desktop)<: iOS</p>
    </div>
</div>
<style>
/* Par défaut, on masquecache tout */
.device-contentversion { display: none !important; }

/* 1. RÈGLEAffichage DESKTOPpour (LargeurAndroid > 1024px) */
@media screen and (min-width: 1025px) {
    #device-desktop { display: block !important; }
}

/* 2. RÈGLE ANDROID (Tablettes/Mobiles classiques 768px - 1024px) */et Desktop (Largeurs standards) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #device#display-android1 { display: block !important; }
}

/* 32. Affichage RÈGLEspécifique pour iOS (iPhone - max 767px) */
/* On cible spécifiquementles lespetits appareilsécrans Appletactiles avectypiques le "max-width"de l'iPhone */
@media screen and (max-width: 767px) {
    #device#display-ios2 { display: block !important; }
}
</style>

<input type="radio" name="tabs" id="tab1" checked class="tab-input">
<input type="radio" name="tabs" id="tab2" class="tab-input">
<input type="radio" name="tabs" id="tab3" class="tab-input">

<div class="faq-portal-container">
    <aside class="faq-sidebar-menu">
        <label for="tab1" class="faq-link">Mon terminal</label>
        <label for="tab2" class="faq-link">Mon espace client</label>
        <label for="tab3" class="faq-link">Ma télécollecte</label>
    </aside>

    <main class="faq-content-panes">
        <section id="content1" class="faq-pane">Contenu Terminal</section>
        <section id="content2" class="faq-pane">Contenu Client</section>
        <section id="content3" class="faq-pane">Contenu Télécollecte</section>
    </main>
</div>

<style>
/* On cache les boutons radio */
.tab-input { display: none; }

/* Par défaut, on cache les panneaux */
.faq-pane { display: none; }

/* LA MAGIE : Quand on clique sur le label, le radio devient "checked" et on affiche le contenu */
#tab1:checked ~ .faq-portal-container #content1,
#tab2:checked ~ .faq-portal-container #content2,
#tab3:checked ~ .faq-portal-container #content3 {
    display: block !important;
}

/* Style de sélection des labels */
#tab1:checked ~ .faq-portal-container label[for="tab1"],
#tab2:checked ~ .faq-portal-container label[for="tab2"],
#tab3:checked ~ .faq-portal-container label[for="tab3"] {
    background: #3474FF !important;
    color: #fff !important;
}

/* ... Ajoute ici ton CSS existant pour .faq-link et .faq-portal-container ... */
</style>