Composant Mega Menu - Neumorphic Vibrant E-commerce
Un méga composant de menu complexe et réactif conçu avec un style de commerce électronique neumorphe et dynamique. Comprend plusieurs colonnes, des exemples d’images et des listes de catégories, avec une prise en charge complète du mode sombre.
HTML Code
<nav class="relative bg-gradient-to-br from-purple-100 to-indigo-200 text-purple-900 shadow-xl dark:from-gray-800 dark:to-gray-900 dark:text-gray-100 lg:px-8 px-4 py-3 font-sans">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold tracking-tight text-purple-800 dark:text-purple-300">VibrantShop</a>
<!-- Desktop/Tablet Menu - Hidden on Mobile -->
<div class="hidden lg:flex items-center space-x-6">
<a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Home</a>
<div class="group relative">
<button class="flex items-center px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700 focus:outline-none">
Categories
<svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="absolute left-1/2 -translate-x-1/2 mt-5 w-screen max-w-5xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top z-50 rounded-3xl p-6 shadow-neumorphic-xl bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900 border border-purple-200 dark:border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Column 1 -->
<div>
<p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Apparel</p>
<ul class="space-y-2">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Men's Clothing</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Women's Clothing</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Kids & Baby</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Shoes & Footwear</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Accessories</a></li>
</ul>
</div>
<!-- Column 2 -->
<div>
<p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Electronics</p>
<ul class="space-y-2">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Smartphones</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Laptops & PCs</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Cameras & Drones</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Audio & Headphones</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Wearable Tech</a></li>
</ul>
</div>
<!-- Column 3 -->
<div>
<p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Home & Living</p>
<ul class="space-y-2">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Kitchen Appliances</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Furniture</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Decor & Art</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Bedding & Bath</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 transition-colors duration-200 py-1">Smart Home Devices</a></li>
</ul>
</div>
<!-- Column 4 Images/Promo -->
<div>
<p class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-3">Featured Deals</p>
<div class="space-y-4">
<a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md hover:shadow-neumorphic-lg transition-shadow duration-300 bg-purple-100 dark:bg-gray-700">
<img src="https://picsum.photos/id/1015/300/180" alt="Summer Collection" class="w-full h-auto object-cover">
<div class="p-3">
<p class="font-medium text-purple-800 dark:text-gray-100">Summer Vibes Sale</p>
<p class="text-sm text-purple-600 dark:text-gray-300">Up to 40% off selected items!</p>
</div>
</a>
<a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md hover:shadow-neumorphic-lg transition-shadow duration-300 bg-purple-100 dark:bg-gray-700">
<img src="https://picsum.photos/id/20/300/180" alt="New Arrivals" class="w-full h-auto object-cover">
<div class="p-3">
<p class="font-medium text-purple-800 dark:text-gray-100">New Tech Arrivals</p>
<p class="text-sm text-purple-600 dark:text-gray-300">Explore the latest gadgets!</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Deals</a>
<a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">About Us</a>
<a href="#" class="block px-4 py-2 font-medium transition-all duration-300 rounded-xl hover:text-purple-600 hover:shadow-inner-neumorphic-sm hover:bg-purple-50 dark:hover:text-purple-200 dark:hover:bg-gray-700">Contact</a>
</div>
<!-- User Actions & Cart for Desktop/Tablet -->
<div class="hidden lg:flex items-center space-x-4">
<button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.769.707 1.769H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path></svg>
</button>
<button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<img class="w-6 h-6 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
</button>
<!-- Dark Mode Toggle -->
<button id="theme-toggle" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<svg class="w-6 h-6 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-7.775l.707-.707M6.707 17.293l-.707.707M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
<svg class="w-6 h-6 dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
</button>
</div>
<!-- Mobile Menu Button - Hidden on Desktop/Tablet -->
<div class="lg:hidden flex items-center space-x-4">
<button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.769.707 1.769H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path></svg>
</button>
<button id="mobile-menu-button" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
<!-- Mobile Menu Content (Hidden by default) -->
<div id="mobile-menu" class="lg:hidden hidden fixed inset-0 bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-gray-800 dark:to-gray-900 z-50 overflow-y-auto transform transition-transform duration-300 ease-in-out -translate-x-full">
<div class="flex justify-between items-center px-4 py-3 border-b border-purple-200 dark:border-gray-700 sticky top-0 bg-inherit">
<h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300">Menu</h2>
<button id="close-mobile-menu" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<div class="p-6 space-y-6">
<a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Home</a>
<div class="rounded-xl shadow-neumorphic-sm bg-purple-50 dark:bg-gray-700 p-4">
<input type="checkbox" id="category-toggle-mobile" class="peer hidden" />
<label for="category-toggle-mobile" class="flex justify-between items-center text-lg font-medium text-purple-800 dark:text-gray-100 cursor-pointer py-2">
Categories
<svg class="w-5 h-5 transition-transform duration-300 peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</label>
<div class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out peer-checked:max-h-screen">
<div class="pt-4 space-y-4">
<div>
<p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Apparel</p>
<ul class="space-y-1 text-sm pl-4">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Men's Clothing</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Women's Clothing</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Kids & Baby</a></li>
</ul>
</div>
<div>
<p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Electronics</p>
<ul class="space-y-1 text-sm pl-4">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Smartphones</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Laptops & PCs</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Cameras & Drones</a></li>
</ul>
</div>
<div>
<p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Home & Living</p>
<ul class="space-y-1 text-sm pl-4">
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Kitchen Appliances</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Furniture</a></li>
<li><a href="#" class="block text-purple-800 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-100 py-1">Decor & Art</a></li>
</ul>
</div>
<div class="mt-4">
<p class="font-semibold text-purple-700 dark:text-purple-300 mb-2">Featured Deals</p>
<a href="#" class="block rounded-xl overflow-hidden shadow-neumorphic-md bg-purple-100 dark:bg-gray-800">
<img src="https://picsum.photos/id/1015/300/180" alt="Summer Collection" class="w-full h-auto object-cover">
<div class="p-3">
<p class="font-medium text-purple-800 dark:text-gray-100">Summer Vibes Sale</p>
<p class="text-sm text-purple-600 dark:text-gray-300">Up to 40% off!</p>
</div>
</a>
</div>
</div>
</div>
</div>
<a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Deals</a>
<a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">About Us</a>
<a href="#" class="block px-4 py-3 text-lg font-medium text-purple-800 dark:text-gray-100 rounded-xl shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm bg-purple-50 dark:bg-gray-700 transition-all duration-200">Contact</a>
<!-- Mobile specific user actions -->
<div class="pt-4 border-t border-purple-200 dark:border-gray-700 mt-6 flex justify-around">
<button class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<img class="w-6 h-6 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
</button>
<!-- Dark Mode Toggle for Mobile -->
<button id="theme-toggle-mobile" class="p-3 rounded-full shadow-neumorphic-sm hover:shadow-neumorphic-md active:shadow-inner-neumorphic-sm transition-all duration-200 bg-purple-200/50 dark:bg-gray-700 dark:text-gray-200 text-purple-800">
<svg class="w-6 h-6 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-7.775l.707-.707M6.707 17.293l-.707.707M18 12a6 6 0 11-12 0 6 6 0 0112 0z"></path></svg>
<svg class="w-6 h-6 dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
</button>
</div>
</div>
</div>
</nav>
<!-- Custom Styles for Neumorphic Shadows (add to your CSS or use a style tag for demonstration) -->
<style>
/* Base Neumorphic Shadow */
.shadow-neumorphic-sm {
box-shadow: 4px 4px 8px rgba(162, 126, 250, 0.4), -4px -4px 8px rgba(255, 255, 255, 0.7);
}
.dark .shadow-neumorphic-sm {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6), -4px -4px 8px rgba(100, 100, 100, 0.3);
}
.shadow-neumorphic-md {
box-shadow: 8px 8px 16px rgba(162, 126, 250, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.7);
}
.dark .shadow-neumorphic-md {
box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.6), -8px -8px 16px rgba(100, 100, 100, 0.3);
}
.shadow-neumorphic-lg {
box-shadow: 12px 12px 24px rgba(162, 126, 250, 0.4), -12px -12px 24px rgba(255, 255, 255, 0.7);
}
.dark .shadow-neumorphic-lg {
box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.6), -12px -12px 24px rgba(100, 100, 100, 0.3);
}
.shadow-neumorphic-xl {
box-shadow: 20px 20px 40px rgba(162, 126, 250, 0.4), -20px -20px 40px rgba(255, 255, 255, 0.7);
}
.dark .shadow-neumorphic-xl {
box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.6), -20px -20px 40px rgba(100, 100, 100, 0.3);
}
/* Inner Neumorphic Shadow */
.shadow-inner-neumorphic-sm {
box-shadow: inset 2px 2px 5px rgba(162, 126, 250, 0.5), inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}
.dark .shadow-inner-neumorphic-sm {
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(100, 100, 100, 0.3);
}
/* For the mobile menu to work without JS, we'd traditionally use JS.
However, for a pure HTML/CSS demo of toggleable content,
a hidden checkbox and label + peer selector could be used for the outer menu.
For a true off-canvas menu, this implies JS. We'll simulate with an always-present 'fixed' element.
The provided solution uses 'hidden' on mobile-menu and relies on external JS
(common for such complex interactions) for a realistic simulation.
For a pure CSS *toggle*, a checkbox with label is used inside the mobile categories.
*/
</style>
<script>
// Dark mode toggle functionality
const setupDarkModeToggle = (toggleId) => {
const themeToggle = document.getElementById(toggleId);
if (themeToggle) {
// Check local storage for theme preference or default to system preference
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
themeToggle.addEventListener('click', () => {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
} else {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
}
});
}
};
setupDarkModeToggle('theme-toggle'); // Desktop toggle
setupDarkModeToggle('theme-toggle-mobile'); // Mobile toggle
// Mobile menu toggle functionality
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const closeMobileMenuButton = document.getElementById('close-mobile-menu');
if (mobileMenuButton && mobileMenu && closeMobileMenuButton) {
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
setTimeout(() => {
mobileMenu.classList.remove('-translate-x-full');
mobileMenu.classList.add('translate-x-0');
}, 10);
});
closeMobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.remove('translate-x-0');
mobileMenu.classList.add('-translate-x-full');
setTimeout(() => {
mobileMenu.classList.add('hidden');
}, 300); // Match transition duration
});
// Close menu if clicked outside (optional, more complex)
// document.addEventListener('click', (event) => {
// if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target) && mobileMenu.classList.contains('translate-x-0')) {
// mobileMenu.classList.remove('translate-x-0');
// mobileMenu.classList.add('-translate-x-full');
// setTimeout(() => { mobileMenu.classList.add('hidden'); }, 300);
// }
// });
}
</script>Composants associés
Composant Mega Menu
Un composant de méga menu réactif conçu en mettant l’accent sur les micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Mega Menu
Un méga menu réactif complexe, inspiré de la 3D, pour un tableau de bord. Il utilise un schéma de couleurs triadique, prend en charge le mode sombre et comporte plusieurs sections interactives pour la visualisation des données et les panneaux de contrôle.
Skeuomorphisme Médias sociaux Mega Menu
Méga composant de menu avec conception Skeuomorphism, schéma de couleurs triadique et complexité simple à des fins de médias sociaux. Réactif avec prise en charge du thème sombre.