<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);
}
/* --- FIX SÉCURITÉ DOUBLONS TABS SUR IOS (CONFLUENCE MOBILE) --- */
.tabs-accordion,
.aui-nav-mobile,
.tabs-accordion-wrapper,
.navitabs-mobile,
.aui-nav-mobile-stage,
div[class*="nav-mobile"] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
}
/* --- CONFIGURATION SUR ÉCRANS DESKTOP / TABLETTES --- */
@media screen and (min-width: 769px) {
.aui-tabs.vertical-tabs {
display: flex !important;
gap: 25px !important;
padding: 20px !important;
align-items: flex-start !important;
border: none !important;
}
.aui-tabs.vertical-tabs > .tabs-menu {
display: flex !important;
flex-direction: column !important;
flex: 0 0 350px !important;
width: 350px !important;
min-width: 350px !important;
background: #FFFFFF !important;
border-radius: 24px !important;
padding: 24px 12px !important;
box-shadow: var(--card-shadow) !important;
border: none !important;
background-image: none !important;
}
.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;
}
}
/* --- ADAPTATION SÉCURISÉE POUR ÉCRANS MOBILES (IOS / ANDROID) --- */
@media screen and (max-width: 768px) {
.aui-tabs.vertical-tabs {
display: block !important; /* Empilement propre sur smartphone */
}
/* On garde TES cartes verticales d'origine, même sur mobile */
.aui-tabs.vertical-tabs > .tabs-menu {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-width: 100% !important;
background: #FFFFFF !important;
border-radius: 24px !important;
padding: 24px 12px !important;
box-shadow: var(--card-shadow) !important;
border: none !important;
margin-bottom: 25px !important;
}
.aui-tabs.vertical-tabs > .tabs-pane {
width: 100% !important;
background: #FFFFFF !important;
border-radius: 24px !important;
padding: 24px !important;
box-shadow: var(--card-shadow) !important;
margin-bottom: 20px !important;
}
}
/* --- LE TITRE DU MENU DES CATÉGORIES --- */
.aui-tabs.vertical-tabs > .tabs-menu::before {
content: "Catégories (5)";
display: block !important;
position: static !important;
font-weight: 800 !important;
font-size: 1.25rem !important;
color: var(--primary-blue) !important;
margin-bottom: 34px !important;
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;
padding: 0 !important;
}
.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;
}
/* --- L'ÉTAT ACTIF (BLEU) --- */
.aui-tabs.vertical-tabs > .tabs-menu .menu-item.active-tab a {
background: var(--primary-blue) !important;
color: #FFFFFF !important;
box-shadow: var(--active-shadow) !important;
}
/* --- TITRES DE CATÉGORIES (H3) --- */
.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;
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 !important;
font-size: 14px !important;
position: relative !important;
border-top: 1px solid var(--border-color) !important;
}
/* --- NETTOYAGE ET RESTRUCTURATION ICÔNES CONFLUENCE --- */
.tabs-pane > p,
.tabs-pane > br,
.md-faq > p,
.md-faq > br {
display: none !important;
}
i {
margin-right: 10px;
width: 20px;
text-align: center;
color : var(--primary-blue) !important;
}
.parent-container {
font-size: 0;
}
.parent-container > * {
font-size: 1rem;
display: inline-block;
}
/* ==========================================================================
🔍 SÉCURITÉ INJECTION DE TEXTE CSS (POUR CONTOURNER LE BLOCAGE IOS)
========================================================================== */
.domi2-texte::before { content: "Les terminaux de paiement fonctionnent uniquement avec un contrat acquéreur Monext."; }
.dashboard-texte::before { content: "espace client"; }
.dashboardLien-texte::before { content: "espace client"; color: var(--primary-blue); text-decoration: underline; }
.telecollecte2-texte::before { white-space: pre-wrap !important; content: "Si votre télécollecte est effectuée avant 23h30 un jour ouvré en France, le paiement est crédité le lendemain. Au-delà de 23h30, le versement est reporté au surlendemain.\A\AExemples :\A• 5 janvier à 22h → paiement le 6 janvier\A• 5 janvier à 23h45 → paiement le 7 janvier"; }
.contactU-texte::before { content: "notre équipe est là pour vous accompagner. Il vous suffit de nous contacter via ce lien."; color: var(--primary-blue); }
.contactUDeb-texte::before { content: "Notre équipe est là pour vous accompagner, cliquez simplement ici pour nous contacter."; }
.justeMail-texte::before { content: "en cliquant simplement ici."; color: var(--primary-blue); text-decoration: underline; }
.contactTel-texte::before { content: "Notre équipe est à votre disposition pour vous accompagner au 09 69 32 66 25 (service disponible du lundi au samedi, de 7h30 à 20h, appel non surtaxé)."; }
.liensDash-texte::before { white-space: pre-wrap !important; content: "Voici le lien de l'espace client de production (admin.payline.com)\AVoici le lien de l'espace client d'homologation (homologation-admin.payline.com)"; }
.liensCommande-texte::before { white-space: pre-wrap !important; content: "Vous pouvez effectuer votre commande en quelques clics directement depuis votre Espace Client.\AIl vous suffit de vous rendre dans la rubrique Paiement en personne, puis sélectionner l’onglet Terminaux. Vous y trouverez l'option Commander un terminal pour finaliser votre commande."; }
.liensSuiviCommande-texte::before { white-space: pre-wrap !important; content: "Une fois votre commande validée, vous pouvez suivre son acheminement en toute simplicité depuis votre Espace Client.\AIl vous suffit de vous rendre dans la rubrique Paiement en personne, puis de cliquer sur l’onglet Commandes. Vous y trouverez le statut de votre commande."; }
.liensSuiviSAV-texte::before { white-space: pre-wrap !important; content: "Une fois votre demande de remplacement validée, vous pouvez suivre son acheminement en toute simplicité depuis votre Espace Client.\AIl vous suffit de vous rendre dans la rubrique Paiement en personne, puis sélectionner l’onglet SAV. Vous y trouverez le statut de votre commande."; }
.kyc-texte::before { white-space: pre-wrap !important; content: "nous vous invitons à nous contacter afin que nous puissions mettre à jour votre dossier.\AVeuillez préparer les documents suivants :\A • Extrait du KBIS à jour,\A • Un relevé d’identité bancaire du compte de versement,\ACela permet de traiter votre demande rapidement et en toute sécurité."; }
/* ==========================================================================
🛠️ LOGIQUE CHIRURGICALE D'AFFICHAGE DES ONGLETS (MOBILE & DESKTOP)
========================================================================== */
/* Masque par défaut tous les blocs de droite */
.aui-tabs.vertical-tabs > .tabs-pane {
display: none !important;
}
/* Affiche uniquement le bloc de droite correspondant à l'onglet actif */
.aui-tabs.vertical-tabs > .tabs-menu .menu-item:nth-child(1).active-tab ~ .tabs-pane:nth-of-type(1) { display: block !important; }
.aui-tabs.vertical-tabs > .tabs-menu .menu-item:nth-child(2).active-tab ~ .tabs-pane:nth-of-type(2) { display: block !important; }
.aui-tabs.vertical-tabs > .tabs-menu .menu-item:nth-child(3).active-tab ~ .tabs-pane:nth-of-type(3) { display: block !important; }
.aui-tabs.vertical-tabs > .tabs-menu .menu-item:nth-child(4).active-tab ~ .tabs-pane:nth-of-type(4) { display: block !important; }
.aui-tabs.vertical-tabs > .tabs-menu .menu-item:nth-child(5).active-tab ~ .tabs-pane:nth-of-type(5) { display: block !important; }
/* 📱 SÉCURITÉ ANTI-DOUBLONS DUBLIN-TABS SUR IPHONE */
/* Si Confluence tente de recréer un conteneur entier ou un sous-menu mobile, on l'efface */
.tabs-container:nth-of-type(n+2),
.aui-tabs.vertical-tabs:nth-of-type(n+2),
.aui-tabs.vertical-tabs > .tabs-menu ~ .tabs-menu,
.aui-tabs.vertical-tabs > .tabs-menu:nth-of-type(n+2) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
}
</style> |