<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-mobile {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.md-faq-mobile .only-ios {
display: block !important;
}
.md-faq-mobile .hide-ios {
display: none !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>
|