<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>MUDETI - Mutuelle de Développement de Tiobli</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
<style>
:root {
--mudeti-blue: #003087; /* bleu principal logo */
--mudeti-green: #00a651; /* vert MUDeTI */
--mudeti-orange: #f58220; /* orange CTA */
--mudeti-dark: #001f5b; /* bleu très foncé footer */
--bg-light: #f8fafc; /* fond principal clair mais pas blanc pur */
--bg-section: #f1f5f9; /* fond sections alternées */
}
body { background-color: var(--bg-light); }
.text-mudeti-blue { color: var(--mudeti-blue); }
.bg-mudeti-blue { background-color: var(--mudeti-blue); }
.border-mudeti-blue { border-color: var(--mudeti-blue); }
.hover\:text-mudeti-orange:hover { color: var(--mudeti-orange); }
.hover\:bg-mudeti-orange:hover { background-color: var(--mudeti-orange); }
.hero-bg {
background: linear-gradient(to bottom right, rgba(0, 48, 135, 0.92), rgba(0, 166, 81, 0.75)),
url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2073&q=80') center/cover no-repeat;
/* Alternative village : https://images.unsplash.com/photo-1593113598332-cd288d649433?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80 (groupe communauté) */
}
.section-bg-alternate {
background-color: var(--bg-section);
}
</style>
</head>
<body class="font-sans text-gray-900 antialiased">
<!-- NAVIGATION -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<div class="flex items-center gap-3">
<img
src="https://files.catbox.moe/0k3x4j.png"
alt="MUDETI Logo"
class="h-14 w-auto"
/>
<div class="hidden sm:block">
<span class="text-2xl font-bold text-mudeti-blue">MUDETI</span>
<p class="text-sm text-gray-600 -mt-1">Mutuelle de Développement de Tiobli</p>
</div>
</div>
<div class="hidden md:flex items-center gap-8 text-base font-medium">
<a href="#accueil" class="hover:text-mudeti-orange transition">Accueil</a>
<a href="#qui-sommes-nous" class="hover:text-mudeti-orange transition">Qui sommes-nous</a>
<a href="#services" class="hover:text-mudeti-orange transition">Services</a>
<a href="#adherer" class="hover:text-mudeti-orange transition">Adhérer</a>
<a href="#contact" class="hover:text-mudeti-orange transition">Contact</a>
</div>
<a href="#adherer"
class="bg-mudeti-orange text-white px-6 py-3 rounded-full font-semibold hover:bg-orange-600 transition shadow-md">
Devenir membre
</a>
</div>
</div>
</nav>
<!-- HERO - fond plus sombre + meilleure image -->
<header id="accueil" class="hero-bg h-[85vh] min-h-[600px] flex items-center text-white relative">
<div class="absolute inset-0 bg-black/20"></div> <!-- couche supplémentaire pour contraste -->
<div class="relative max-w-5xl mx-auto px-6 text-center z-10">
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-6 drop-shadow-2xl">
MUDETI<br/>
<span class="text-mudeti-orange">Solidarité – Santé – Développement</span>
</h1>
<p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto drop-shadow-lg">
La mutuelle des fils et filles de Tiobli pour protéger nos familles et construire l’avenir de notre village.
</p>
<a href="#adherer"
class="inline-block bg-white text-mudeti-blue px-10 py-5 rounded-full text-xl font-bold hover:bg-gray-100 transition transform hover:scale-105 shadow-xl">
Rejoignez la famille MUDETI →
</a>
</div>
</header>
<!-- QUI SOMMES-NOUS - fond alterné -->
<section id="qui-sommes-nous" class="py-20 section-bg-alternate">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-4xl md:text-5xl font-bold text-mudeti-blue text-center mb-12">
Qui sommes-nous ?
</h2>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="space-y-6 text-lg leading-relaxed bg-white p-8 rounded-2xl shadow-lg">
<p>
La <strong class="text-mudeti-green">MUDETI</strong> est née de la volonté des ressortissants de Tiobli de s’unir pour faire face ensemble aux aléas de la vie.
</p>
<p>
Santé, obsèques, éducation des enfants, projets communautaires… nous agissons dans la solidarité et la transparence.
</p>
<p class="font-semibold text-xl text-mudeti-orange">
« Un pour tous, tous pour Tiobli »
</p>
</div>
<div class="bg-white p-8 rounded-2xl shadow-xl border-t-4 border-mudeti-green">
<ul class="space-y-5 text-lg">
<li class="flex items-start gap-4"><i class="fa-solid fa-check text-mudeti-green text-xl mt-1"></i> Plus de 10 ans au service de la communauté</li>
<li class="flex items-start gap-4"><i class="fa-solid fa-check text-mudeti-green text-xl mt-1"></i> Soutien financier en cas de maladie ou de deuil</li>
<li class="flex items-start gap-4"><i class="fa-solid fa-check text-mudeti-green text-xl mt-1"></i> Réalisation de forages, écoles, appui aux femmes et jeunes</li>
<li class="flex items-start gap-4"><i class="fa-solid fa-check text-mudeti-green text-xl mt-1"></i> Ouverte à tous les fils et filles de Tiobli</li>
</ul>
</div>
</div>
</div>
</section>
<!-- SERVICES - fond bleu avec meilleur contraste -->
<section id="services" class="py-20 bg-mudeti-blue text-white">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-4xl md:text-5xl font-bold text-center mb-16 drop-shadow-md">Nos principaux services</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white/15 backdrop-blur-md p-8 rounded-2xl border border-white/30 hover:border-mudeti-orange transition shadow-lg">
<div class="text-6xl mb-6 drop-shadow">🩺</div>
<h3 class="text-2xl font-bold mb-4">Mutuelle santé</h3>
<p class="text-gray-100 leading-relaxed">Prise en charge des consultations, médicaments, hospitalisations et examens.</p>
</div>
<div class="bg-white/15 backdrop-blur-md p-8 rounded-2xl border border-white/30 hover:border-mudeti-orange transition shadow-lg">
<div class="text-6xl mb-6 drop-shadow">🪦</div>
<h3 class="text-2xl font-bold mb-4">Aide obsèques</h3>
<p class="text-gray-100 leading-relaxed">Accompagnement financier et organisationnel lors des cérémonies funéraires.</p>
</div>
<div class="bg-white/15 backdrop-blur-md p-8 rounded-2xl border border-white/30 hover:border-mudeti-orange transition shadow-lg">
<div class="text-6xl mb-6 drop-shadow">🏗️</div>
<h3 class="text-2xl font-bold mb-4">Projets communautaires</h3>
<p class="text-gray-100 leading-relaxed">Forages, réhabilitation d’écoles, appui à l’entrepreneuriat local.</p>
</div>
</div>
</div>
</section>
<!-- ADHÉRER CTA - gradient plus visible -->
<section id="adherer" class="py-20 bg-gradient-to-r from-mudeti-blue to-mudeti-green text-white text-center">
<div class="max-w-4xl mx-auto px-6">
<h2 class="text-4xl md:text-5xl font-bold mb-8 drop-shadow-lg">Devenez membre MUDETI aujourd’hui</h2>
<p class="text-xl md:text-2xl mb-10 drop-shadow">Votre cotisation protège votre famille et participe au développement de Tiobli.</p>
<a href="#contact"
class="inline-block bg-mudeti-orange text-white px-12 py-6 rounded-full text-2xl font-bold hover:bg-orange-600 transform hover:scale-105 transition shadow-2xl">
Je souhaite adhérer →
</a>
</div>
</section>
<!-- CONTACT - fond clair avec contraste -->
<section id="contact" class="py-20 section-bg-alternate">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-4xl font-bold text-mudeti-blue text-center mb-12">Contactez-nous</h2>
<div class="grid md:grid-cols-2 gap-12">
<form class="space-y-6 bg-white p-8 rounded-2xl shadow-lg">
<input type="text" placeholder="Nom complet" class="w-full px-6 py-4 rounded-xl border border-gray-300 focus:border-mudeti-blue focus:ring-2 focus:ring-mudeti-blue/30 outline-none"/>
<input type="tel" placeholder="Téléphone / WhatsApp" class="w-full px-6 py-4 rounded-xl border border-gray-300 focus:border-mudeti-blue focus:ring-2 focus:ring-mudeti-blue/30 outline-none"/>
<textarea placeholder="Votre message..." rows="5" class="w-full px-6 py-4 rounded-xl border border-gray-300 focus:border-mudeti-blue focus:ring-2 focus:ring-mudeti-blue/30 outline-none"></textarea>
<button type="submit" class="w-full bg-mudeti-blue text-white py-4 rounded-xl font-bold text-lg hover:bg-mudeti-dark transition">
Envoyer mon message
</button>
</form>
<div class="space-y-10 text-lg bg-white p-8 rounded-2xl shadow-lg">
<div class="flex items-center gap-5">
<i class="fa-brands fa-whatsapp text-4xl text-mudeti-green"></i>
<div>
<p class="font-semibold">WhatsApp / Téléphone</p>
<p>+225 XX XX XX XX</p>
</div>
</div>
<div class="flex items-center gap-5">
<i class="fa-solid fa-envelope text-4xl text-mudeti-orange"></i>
<div>
<p class="font-semibold">Email</p>
<p>mudeti.tiobli@gmail.com</p>
</div>
</div>
<div class="flex items-center gap-5">
<i class="fa-brands fa-facebook text-4xl text-mudeti-blue"></i>
<div>
<p class="font-semibold">Page Facebook</p>
<a href="https://www.facebook.com/MUDETI/" target="_blank" class="text-mudeti-blue hover:underline">facebook.com/MUDETI</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-var(--mudeti-dark) text-white py-12 text-center">
<div class="max-w-6xl mx-auto px-6">
<img src="https://files.catbox.moe/0k3x4j.png" alt="Logo MUDETI" class="h-20 mx-auto mb-6 opacity-90"/>
<p class="text-lg mb-2">Mutuelle de Développement de Tiobli – MUDETI</p>
<p class="text-sm opacity-80">© 2026 – Tous droits réservés • Fils et filles de Tiobli, unis pour un avenir meilleur</p>
</div>
</footer>
</body>
</html>
