Historique de la page

<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>

<details class="md-item">
    <summary class="md-question">Où commander un nouveau terminal ?</summary>
    <div class="md-answer">

<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>