<div class="only-ios">
<p>Ceci est votre interface optimisée pour iPhone.</p>
</div>
<div class="hide-ios">
<p>Ceci est votre page normale avec les macros Confluence.</p>
</div>
<style>
/* 1. Par défaut, on affiche tout */
.only-ios { display: none !important; }
.hide-ios { display: block !important; }
/* 2. Si l'écran est petit (iOS/iPhone) */
@media screen and (max-width: 767px) {
/* On inverse l'affichage */
.only-ios { display: block !important; }
.hide-ios { display: none !important; }
}
</style> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<div class="md-faq">
<h3 class="md-sub-title"><i class="fa-solid fa-cart-shopping"></i> Commande du terminal de paiement</h3>
<details class="md-item">
<summary class="md-question">
Où commander un nouveau terminal de paiement ?
</summary>
<div class="md-answer">
<div class="liensCommande-texte"></div>
</div>
</details>
<details class="md-item">
<summary class="md-question">
Comment suivre ma commande de terminal de paiement ?
</summary>
<div class="md-answer">
{excerpt-include:Page_Composants_FAQ|noredirect=true|name=lien-monext}
</div>
</details>
<details class="md-item">
<summary class="md-question">
Quelle est la différence entre le mode centralisé et le mode autonome ?
</summary>
<div class="md-answer">
<ul>
<li><div><strong>Le Terminal Centralisé : Pour plus de confort et de visibilité.</strong></div>
C’est l'option "clé en main". Tout est piloté à distance : vos mises à jour sont automatiques et vos transactions sont visibles en temps réel sur votre <span class="dashboardLien-texte"></span>. Son grand atout ? Une sécurité maximale. Même en cas d'imprévu avec le terminal, vos données de vente sont sauvegardées sur nos serveurs. Vous encaissez l'esprit tranquille, sans aucune interruption de service.</li>
<li><div><strong>Le Terminal Autonome : Pour plus d'indépendance.</strong></div>
C’est une solution directe et robuste. Le terminal gère tout localement : les transactions, les réglages et les mises à jour se font directement sur l’appareil. En fin de journée, il transmet vos encaissements à votre banque de manière indépendante. C’est le choix idéal pour ceux qui préfèrent une gestion simplifiée et intégrée directement à leur matériel.</li>
</ul>
</div>
</details>
<details class="md-item">
<summary class="md-question">
Tous les terminaux de paiement de Monext peuvent‑ils fonctionner en mode centralisé ou en mode autonome ?
</summary>
<div class="md-answer">
Oui, tous les terminaux de paiement Monext peuvent fonctionner en mode centralisé ou en mode autonome selon vos besoins.
</div>
</details>
<details class="md-item">
<summary class="md-question">
Puis-je utiliser mon contrat bancaire sur plusieurs terminaux ?
</summary>
<div class="md-answer">
Oui, votre contrat bancaire peut être utilisé sur plusieurs terminaux de paiement.
</div>
</details>
<h3 class="md-sub-title"><i class="fas fa-power-off"></i> Installation du terminal de paiement</h3>
<details class="md-item">
<summary class="md-question">
Où trouver le guide d'utilisation du terminal de paiement ?
</summary>
<div class="md-answer">
Les guides d'utilisation des différents terminaux de paiement <a href="https://docs.monext.fr/spaces/DT/pages/1290879400/Guide+d+utilisation"> sont disponibles en cliquant ici.</a>
</div>
</details>
<details class="md-item">
<summary class="md-question">
Comment obtenir de l'assistance à l'installation du terminal de paiement ?
</summary>
<div class="md-answer">
<div class="contactTel-texte">.</div>
</div>
</details>
<h3 class="md-sub-title"><i class="fas fa-scroll"></i> Accessoires et consommables</h3>
<details class="md-item">
<summary class="md-question">
Mon terminal est-il livré avec une carte de domiciliation bancaire ?
</summary>
<div class="md-answer">
<div>Nous avons conçu nos envois pour que vous puissiez commencer à encaisser le plus rapidement possible ! Tout dépend du modèle choisi :</div>
<ul>
<li>Pour<strong> un terminal de paiement autonome</strong>, vous n’avez aucune démarche supplémentaire à effectuer : votre carte de domiciliation est <strong>directement incluse dans votre colis.</strong> Elle accompagne votre terminal dès son envoi pour vous permettre une mise en service immédiate et sans attente. Vous recevez ainsi une solution complète, prête à l'emploi.</li>
<li>Pour <strong> un terminal de paiement centralisé</strong>, C'est encore plus simple : ce modèle ne nécessite <strong>aucune carte physique</strong>. La configuration se fait automatiquement à distance via nos serveurs, ce qui vous permet de gagner du temps lors de l'installation.</li>
</ul>
</div>
</details>
<details class="md-item">
<summary class="md-question">
Comment commander des bobines de papier thermiques pour mon terminal de paiement ?
</summary>
<div class="md-answer">
<div>Monext ne vend pas de bobines de papier thermiques. Toutefois, voici les caractéristiques du terminal de paiement VERIFONE VP100 (VICTA Portable) :</div>
<ul>
<li>Largeur de la bobine : 57 mm</li>
<li>Diamètre de la bobine : 30 mm</li>
</ul>
<div>Ils sont disponibles chez les fournisseurs habituels.</div>
</div>
</details>
<details class="md-item">
<summary class="md-question">
Comment commander un accessoire pour mon terminal de paiement ?
</summary>
<div class="md-answer">
<div>Les terminaux de paiement sont fournis avec une alimentation électrique, un pin pour la trappe SIM, une batterie et une bobine de papier thermique (si nécessaire).</div>
<div>Pour tout autre accessoire, nous vous invitons à consulter vos fournisseurs habituels.</div>
</div>
</details>
</div> |
<style>
/* --- VARIABLES --- */
:root {
--primary-blue: #3474FF;
--text-main: #3474FF;
--text-muted: #141414;
--border-color: #E9EFFF;
--card-shadow: 0 10px 30px rgba(0,0,0,0.05);
--active-shadow: 0 4px 12px rgba(52, 116, 255, 0.3);
--lien-commande: "Commandez votre terminal sur le portail Monext OnLine en cliquant ici.";
}
/* On injecte le contenu de la variable dans la div concernée */
.liensCommande-texte::after {
content: var(--lien-commande);
display: block;
}
/* --- STRUCTURE GLOBALE --- */
.aui-tabs.vertical-tabs {
display: flex !important;
gap: 25px !important;
padding: 20px !important;
align-items: flex-start !important;
border: none !important;
}
/* --- LE CONTENEUR PRINCIPAL --- */
.aui-tabs.vertical-tabs > .tabs-menu {
display: flex !important;
flex-direction: column !important; /* Force l'empilement vertical */
flex: 0 0 350px !important;
width: 550px !important;
background: #FFFFFF !important;
border-radius: 32px !important;
padding: 24px !important; /* Padding uniforme tout autour */
box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
border: none !important;
background-image: none !important;
}
/* --- LE TITRE (CORRECTIF FINAL) --- */
.aui-tabs.vertical-tabs > .tabs-menu::before {
content: "Catégories (5)";
display: block !important; /* Redevient un bloc normal */
position: static !important; /* Ne flotte plus au-dessus */
/* Style */
font-weight: 800 !important;
font-size: 1.25rem !important;
color: var(--primary-blue)!important;
margin-bottom: 34px !important; /* Crée l'espace nécessaire AVEC le menu */
padding-left: 10px !important;
white-space: nowrap !important;
}
/* --- LES ÉLÉMENTS DU MENU --- */
.aui-tabs.vertical-tabs > .tabs-menu .menu-item {
margin-bottom: 8px !important;
list-style: none !important;
width: 100% !important;
}
.aui-tabs.vertical-tabs > .tabs-menu .menu-item a {
display: flex !important;
align-items: center !important;
padding: 16px 20px !important;
border-radius: 18px !important;
color: black!important;
font-weight: 500 !important;
text-decoration: none !important;
transition: background 0.2s ease !important;
}
/* --- L'ÉTAT ACTIF (BLEU) --- */
.aui-tabs.vertical-tabs > .tabs-menu .menu-item.active-tab a {
background: #4453FF !important;
color: #FFFFFF !important;
box-shadow: 0 10px 20px rgba(68, 83, 255, 0.2) !important;
}
/* --- COLONNE GAUCHE (MENU) --- */
.aui-tabs.vertical-tabs > .tabs-menu {
flex: 0 0 350px !important;
width: 350px !important;
min-width: 350px !important; /* Verrouille la taille pour éviter le rétrécissement */
background: #FFFFFF !important;
border-radius: 24px !important;
padding: 24px 12px !important;
box-shadow: var(--card-shadow) !important;
border: none !important;
}
.aui-tabs.vertical-tabs > .tabs-menu .menu-item {
margin-bottom: 8px !important;
list-style: none !important;
padding: 0 !important; /* Aligne parfaitement les icônes dossiers à gauche */
}
.aui-tabs.vertical-tabs > .tabs-menu .menu-item a {
display: flex !important;
align-items: center !important;
padding: 14px 16px !important;
border-radius: 12px !important;
color: black!important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.aui-tabs.vertical-tabs > .tabs-menu .menu-item.active-tab a {
background: var(--primary-blue) !important;
color: #FFFF!important;
box-shadow: var(--active-shadow) !important;
}
/* --- COLONNE DROITE (CONTENU) --- */
.aui-tabs.vertical-tabs > .tabs-pane {
flex: 1 !important;
background: #FFFFFF !important;
border-radius: 24px !important;
padding: 30px !important;
box-shadow: var(--card-shadow) !important;
}
/* --- TITRES DE CATÉGORIES (H3) ULTRA-COMPACTS --- */
.md-sub-title {
display: block !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--primary-blue)!important;
text-transform: uppercase !important;
margin: 0 !important; /* Supprime l'espace avant et après */
padding: 15px 0 5px 0 !important;
border-bottom: 1px solid var(--border-color) !important;
}
/* --- QUESTIONS (ACCORDÉONS) --- */
.md-faq {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.md-item {
margin-top: 0 !important;
border: 1px solid var(--border-color) !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.md-question {
padding: 16px 20px !important;
font-weight: 500 !important;
color: var(--text-muted) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
cursor: pointer !important;
}
/* Flèche de droite */
.md-question::after {
content: "\2304" !important;
font-size: 20px !important;
color: var(--primary-blue)!important;
transition: transform 0.3s ease !important;
}
.md-item[open] .md-question::after {
transform: rotate(180deg) !important;
}
/* --- RÉPONSES ET FEEDBACK --- */
.md-answer {
padding: 15px 20px 15px 20px !important; /* Espace bas pour le feedback */
font-size: 14px !important;
position: relative !important;
border-top: 1px solid var(--border-color) !important;
}
/* --- NETTOYAGE CONFLUENCE --- */
.tabs-pane > p, .tabs-pane > br, .md-faq > p, .md-faq > br {
display: none !important;
}
i {
margin-right: 10px;
width: 20px; /* Aligne verticalement toutes les icônes */
text-align: center;
color : var(--primary-blue) !important;
}
.parent-container { /* Remplacez par la classe de votre bloc blanc */
font-size: 0;
}
.parent-container > * {
font-size: 1rem; /* Remet la taille du texte normale pour le contenu */
display: inline-block;
}
</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>