Initial commit

assets/css/styles.css

@@ -0,0 +1,264 @@
+:root {
+    --color-primary: #2563eb;
+    --color-secondary: #0f172a;
+    --color-accent: #3b82f6;
+}
+
+* {
+    font-family: 'Inter', sans-serif;
+}
+
+.gradient-bg {
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
+}
+
+.card-hover {
+    transition: all 0.3s ease;
+}
+
+.card-hover:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.smooth-scroll {
+    scroll-behavior: smooth;
+}
+
+.btn-primary {
+    background-color: var(--color-primary);
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+    background-color: var(--color-accent);
+    transform: scale(1.05);
+}
+
+.nav-link {
+    position: relative;
+    transition: color 0.3s ease;
+}
+
+.nav-link::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background-color: var(--color-primary);
+    transition: width 0.3s ease;
+}
+
+.nav-link:hover::after {
+    width: 100%;
+}
+
+.section-title {
+    position: relative;
+    display: inline-block;
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 4px;
+    background-color: var(--color-primary);
+    border-radius: 2px;
+}
+
+/* Animations et reveals */
+@media (prefers-reduced-motion: reduce) {
+
+    .card-hover,
+    .btn-primary,
+    .animate-fade-in,
+    .reveal {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+
+.reveal {
+    opacity: 0;
+    transform: translateY(12px);
+    transition: opacity 0.6s ease, transform 0.6s ease;
+    will-change: opacity, transform;
+}
+
+.animate-fade-in {
+    opacity: 1 !important;
+    transform: translateY(0) !important;
+}
+
+/* Header scrolled state */
+.header-scrolled {
+    background-color: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+    backdrop-filter: blur(6px);
+}
+
+/* Service icon micro-interaction */
+.service-icon {
+    transition: transform 0.35s ease;
+    display: inline-block;
+}
+
+.card-hover:hover .service-icon {
+    transform: translateY(-6px) rotate(-6deg) scale(1.05);
+}
+
+/* Buttons */
+.btn-primary {
+    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
+}
+
+.btn-primary:focus {
+    outline: 3px solid rgba(37, 99, 235, 0.12);
+    outline-offset: 2px;
+}
+
+/* Ensure avatars have a minimum height to avoid layout shift */
+#team-container .aspect-square {
+    min-height: 260px;
+}
+
+/* Background gradient + subtle noise */
+body {
+    background-image: radial-gradient(circle at 10% 10%, rgba(59, 130, 246, 0.06), transparent 10%),
+        radial-gradient(circle at 90% 90%, rgba(99, 102, 241, 0.04), transparent 12%),
+        linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
+    background-attachment: fixed;
+}
+
+/* Animated floating blobs */
+.bg-blob {
+    position: absolute;
+    filter: blur(40px);
+    opacity: 0.18;
+    transform-origin: center;
+}
+
+.blob-1 {
+    width: 420px;
+    height: 420px;
+    left: -80px;
+    top: -60px;
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(59, 130, 246, 0.6));
+    animation: floatY 8s ease-in-out infinite;
+}
+
+.blob-2 {
+    width: 300px;
+    height: 300px;
+    right: -60px;
+    bottom: -80px;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(99, 102, 241, 0.6));
+    animation: floatX 9s ease-in-out infinite;
+}
+
+@keyframes floatY {
+    0% {
+        transform: translateY(0)
+    }
+
+    50% {
+        transform: translateY(18px)
+    }
+
+    100% {
+        transform: translateY(0)
+    }
+}
+
+@keyframes floatX {
+    0% {
+        transform: translateX(0)
+    }
+
+    50% {
+        transform: translateX(-18px)
+    }
+
+    100% {
+        transform: translateX(0)
+    }
+}
+
+/* Hero illustration container */
+.hero-illustration {
+    position: relative;
+    width: 100%;
+    height: 420px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hero-illustration svg {
+    width: 100%;
+    height: 100%;
+    max-width: 560px;
+}
+
+/* Testimonials */
+.testimonials {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9));
+    padding: 4rem 0;
+    border-radius: 12px;
+}
+
+.testimonial-slide {
+    display: none;
+}
+
+.testimonial-slide.active {
+    display: block;
+}
+
+.testimonials .controls {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1rem
+}
+
+.testimonials .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.12);
+}
+
+.testimonials .dot.active {
+    background: var(--color-primary);
+    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14);
+}
+
+/* CTA micro-animation */
+.cta-anim {
+    transition: transform 0.35s cubic-bezier(.2, .9, .2, 1), box-shadow 0.35s;
+}
+
+.cta-anim:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.14);
+}
+
+/* Background blobs and hero micro styles */
+.bg-blob {
+    will-change: transform, opacity;
+}
+
+/* Hero responsive */
+@media (max-width: 768px) {
+    .hero-illustration {
+        height: 320px;
+    }
+}

assets/js/app.js

@@ -0,0 +1,442 @@
+// Application JavaScript pour MRM & Co
+// Génération dynamique des sections depuis config.js
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Initialisation
+    initializeColors();
+    renderServices();
+    renderTeam();
+    updateContactInfo();
+    setCurrentYear();
+    initializeMobileMenu();
+    initializeContactForm();
+    initializeSmoothScroll();
+    initializeHeaderScroll();
+    initializeHeroParallax();
+    initializeTestimonials();
+});
+
+/**
+ * Applique les couleurs personnalisées depuis la configuration
+ */
+function initializeColors() {
+    if (typeof config !== 'undefined' && config.colors) {
+        document.documentElement.style.setProperty('--color-primary', config.colors.primary);
+        document.documentElement.style.setProperty('--color-secondary', config.colors.secondary);
+        document.documentElement.style.setProperty('--color-accent', config.colors.accent);
+    }
+}
+
+/**
+ * Génère dynamiquement la section Services
+ */
+function renderServices() {
+    const servicesContainer = document.getElementById('services-container');
+
+    if (!servicesContainer || typeof config === 'undefined' || !config.services) {
+        console.error('Configuration des services non trouvée');
+        return;
+    }
+
+    servicesContainer.innerHTML = config.services.map((service, idx) => {
+        var iconId = 'icon-' + (service.icon || 'web');
+        return `
+        <div class="card-hover bg-white p-8 rounded-xl shadow-lg reveal" style="transition-delay:${idx * 60}ms">
+            <div class="mb-4 text-4xl text-indigo-600">
+                <svg class="service-icon w-12 h-12 text-primary" aria-hidden="true"><use href="#${iconId}"></use></svg>
+            </div>
+            <h3 class="text-xl font-bold text-gray-900 mb-3">${service.title}</h3>
+            <p class="text-gray-600 leading-relaxed">${service.description}</p>
+        </div>
+    `;
+    }).join('');
+}
+
+/**
+ * Génère dynamiquement la section Équipe
+ */
+function renderTeam() {
+    const teamContainer = document.getElementById('team-container');
+
+    if (!teamContainer || typeof config === 'undefined' || !config.team) {
+        console.error('Configuration de l\'équipe non trouvée');
+        return;
+    }
+
+    teamContainer.innerHTML = config.team.map(function (member, idx) {
+        // fallback avatar via ui-avatars (utilisé si l'image externe échoue)
+        var primaryColor = (config.colors && config.colors.primary) ? config.colors.primary.replace('#', '') : '2563eb';
+        var avatarFallback = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(member.name) + '&background=ffffff&color=' + primaryColor + '&size=512';
+
+        return `
+        <div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden">
+            <div class="aspect-square overflow-hidden bg-gray-100">
+                <img src="${member.image}" 
+                     alt="${member.name}" 
+                     loading="lazy"
+                     data-fallback="${avatarFallback}"
+                     class="w-full h-full object-cover transition-transform duration-300 hover:scale-110">
+            </div>
+            <div class="p-6">
+                <h3 class="text-xl font-bold text-gray-900 mb-1">${member.name}</h3>
+                <p class="text-sm font-semibold mb-3" style="color: var(--color-primary)">${member.role}</p>
+                <p class="text-gray-600 leading-relaxed mb-4">${member.description}</p>
+                <div class="flex space-x-3">
+                    <a href="${member.linkedin}" 
+                       class="text-gray-400 hover:text-blue-600 transition text-xl"
+                       aria-label="LinkedIn de ${member.name}">
+                        🔗
+                    </a>
+                </div>
+            </div>
+        </div>
+    `;
+    }).map((html, i) => html.replace('card-hover', 'card-hover reveal')).join('');
+
+    // Attacher les handlers d'erreur d'image après insertion pour éviter les attributs inline
+    attachImageFallbacks();
+}
+
+function attachImageFallbacks() {
+    document.querySelectorAll('#team-container img[data-fallback]').forEach(function (img) {
+        if (img.__fallbackAttached) return;
+        img.addEventListener('error', function () {
+            var fb = img.getAttribute('data-fallback');
+            if (fb) img.src = fb;
+        });
+        img.__fallbackAttached = true;
+    });
+}
+
+/**
+ * Met à jour les informations de contact depuis la configuration
+ */
+function updateContactInfo() {
+    if (typeof config === 'undefined' || !config.company) {
+        return;
+    }
+
+    // Mise à jour du hero
+    const heroDesc = document.getElementById('hero-description');
+    if (heroDesc && config.company.description) {
+        heroDesc.textContent = config.company.description;
+    }
+
+    // Mise à jour des coordonnées
+    const emailEl = document.getElementById('contact-email');
+    if (emailEl && config.company.email) {
+        emailEl.textContent = config.company.email;
+    }
+
+    const addressEl = document.getElementById('contact-address');
+    if (addressEl && config.company.address) {
+        addressEl.textContent = config.company.address;
+    }
+
+    // Mise à jour du footer
+    const footerDesc = document.getElementById('footer-description');
+    if (footerDesc && config.company.tagline) {
+        footerDesc.textContent = config.company.tagline;
+    }
+}
+
+/**
+ * Initialise le menu mobile responsive
+ */
+function initializeMobileMenu() {
+    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+    const mobileMenu = document.getElementById('mobile-menu');
+
+    if (mobileMenuBtn && mobileMenu) {
+        mobileMenuBtn.addEventListener('click', function () {
+            mobileMenu.classList.toggle('hidden');
+        });
+
+        // Fermer le menu lors du clic sur un lien
+        const mobileLinks = mobileMenu.querySelectorAll('a');
+        mobileLinks.forEach(link => {
+            link.addEventListener('click', function () {
+                mobileMenu.classList.add('hidden');
+            });
+        });
+    }
+}
+
+/**
+ * Gestion du formulaire de contact
+ */
+function initializeContactForm() {
+    const contactForm = document.getElementById('contact-form');
+
+    if (contactForm) {
+        contactForm.addEventListener('submit', function (e) {
+            e.preventDefault();
+
+            // Récupération des données du formulaire
+            const formData = {
+                name: document.getElementById('name').value,
+                email: document.getElementById('email').value,
+                message: document.getElementById('message').value
+            };
+
+            // Simulation d'envoi (à remplacer par un vrai backend)
+            console.log('Formulaire soumis:', formData);
+
+            // Message de confirmation
+            alert('Merci pour votre message ! Nous vous répondrons dans les plus brefs délais.');
+
+            // Réinitialisation du formulaire
+            contactForm.reset();
+        });
+    }
+}
+
+/**
+ * Scroll fluide pour les ancres de navigation
+ */
+function initializeSmoothScroll() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+
+            if (targetId === '#') return;
+
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                const headerOffset = 80; // Hauteur du header fixe
+                const elementPosition = targetElement.getBoundingClientRect().top;
+                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+
+                window.scrollTo({
+                    top: offsetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+}
+
+/**
+ * Animation au scroll pour les éléments
+ */
+function initializeScrollAnimations() {
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fade-in');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, {
+        threshold: 0.12
+    });
+
+    // Observer tous les éléments avec la classe reveal
+    document.querySelectorAll('.reveal').forEach(el => {
+        observer.observe(el);
+    });
+}
+
+// Initialiser les animations au scroll après le chargement
+window.addEventListener('load', initializeScrollAnimations);
+
+/**
+ * Insère l'année courante dans le footer
+ */
+function setCurrentYear() {
+    var el = document.getElementById('current-year');
+    if (el) {
+        el.textContent = new Date().getFullYear();
+    }
+}
+
+/**
+ * Change l'apparence du header quand on scroll
+ */
+function initializeHeaderScroll() {
+    var header = document.querySelector('header');
+    if (!header) return;
+
+    function onScroll() {
+        if (window.scrollY > 18) header.classList.add('header-scrolled');
+        else header.classList.remove('header-scrolled');
+    }
+
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+}
+
+/**
+ * Micro-parallax for hero illustration
+ */
+function initializeHeroParallax() {
+    var hero = document.getElementById('hero-illustration');
+    if (!hero) return;
+
+    hero.addEventListener('mousemove', function (e) {
+        var rect = hero.getBoundingClientRect();
+        var x = (e.clientX - rect.left) / rect.width - 0.5; // -0.5..0.5
+        var y = (e.clientY - rect.top) / rect.height - 0.5;
+        var blobs = hero.querySelectorAll('.bg-blob');
+        blobs.forEach(function (b, i) {
+            var depth = (i === 0) ? 18 : -12;
+            b.style.transform = 'translate(' + (-x * depth) + 'px,' + (-y * depth) + 'px)';
+        });
+    });
+
+    // reset on leave
+    hero.addEventListener('mouseleave', function () {
+        var blobs = hero.querySelectorAll('.bg-blob');
+        blobs.forEach(function (b) { b.style.transform = ''; });
+    });
+}
+
+/**
+ * Testimonials slider simple
+ */
+function initializeTestimonials() {
+    var slides = Array.from(document.querySelectorAll('#testimonial-slides .testimonial-slide'));
+    if (!slides.length) return;
+    var dotsContainer = document.getElementById('testimonial-dots');
+    var current = 0;
+    var autoplay = true;
+    var timer = null;
+
+    function goTo(idx) {
+        slides.forEach((s, i) => s.classList.toggle('active', i === idx));
+        Array.from(dotsContainer.children).forEach((d, i) => d.classList.toggle('active', i === idx));
+        current = idx;
+    }
+
+    function next() { goTo((current + 1) % slides.length); }
+    function prev() { goTo((current - 1 + slides.length) % slides.length); }
+
+    // dots
+    slides.forEach((s, i) => {
+        var dot = document.createElement('div');
+        dot.className = 'dot' + (i === 0 ? ' active' : '');
+        dot.addEventListener('click', function () { goTo(i); resetTimer(); });
+        dotsContainer.appendChild(dot);
+    });
+
+    document.getElementById('next-testimonial').addEventListener('click', function () { next(); resetTimer(); });
+    document.getElementById('prev-testimonial').addEventListener('click', function () { prev(); resetTimer(); });
+
+    function startTimer() { if (timer) clearInterval(timer); timer = setInterval(next, 5000); }
+    function resetTimer() { if (autoplay) startTimer(); }
+
+    // pause on hover
+    var container = document.querySelector('.testimonials');
+    container.addEventListener('mouseenter', function () { autoplay = false; if (timer) clearInterval(timer); });
+    container.addEventListener('mouseleave', function () { autoplay = true; startTimer(); });
+
+    // start
+    goTo(0);
+    startTimer();
+}
+
+/**
+ * Initialisation du canvas d'arrière-plan interactif
+ */
+function initializeBackgroundCanvas() {
+    if (typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    var canvas = document.getElementById('bg-canvas');
+    if (!canvas) return;
+    var ctx = canvas.getContext('2d');
+    var DPR = window.devicePixelRatio || 1;
+    var width, height;
+    var mouse = { x: -9999, y: -9999 };
+
+    function resize() {
+        width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+        height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        canvas.width = Math.floor(width * DPR);
+        canvas.height = Math.floor(height * DPR);
+        canvas.style.width = width + 'px';
+        canvas.style.height = height + 'px';
+        ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
+    }
+
+    window.addEventListener('resize', resize);
+    resize();
+
+    canvas.addEventListener('mousemove', function (e) {
+        mouse.x = e.clientX;
+        mouse.y = e.clientY;
+    });
+    canvas.addEventListener('mouseleave', function () { mouse.x = -9999; mouse.y = -9999; });
+
+    // particles/blobs
+    var blobs = [];
+    var count = Math.max(6, Math.min(28, Math.floor((width * height) / 200000)));
+    for (var i = 0; i < count; i++) {
+        blobs.push({
+            x: Math.random() * width,
+            y: Math.random() * height,
+            r: 80 + Math.random() * 260,
+            vx: (Math.random() - 0.5) * 0.2,
+            vy: (Math.random() - 0.5) * 0.2,
+            hue: 210 + Math.random() * 60
+        });
+    }
+
+    function drawBlob(b) {
+        var grd = ctx.createRadialGradient(b.x, b.y, b.r * 0.15, b.x, b.y, b.r);
+        var h = b.hue;
+        grd.addColorStop(0, 'hsla(' + h + ',90%,70%,0.20)');
+        grd.addColorStop(0.4, 'hsla(' + (h + 30) + ',80%,60%,0.12)');
+        grd.addColorStop(1, 'hsla(' + (h + 60) + ',70%,50%,0.02)');
+        ctx.fillStyle = grd;
+        ctx.beginPath();
+        ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
+        ctx.fill();
+    }
+
+    function step() {
+        ctx.clearRect(0, 0, width, height);
+        // subtle background overlay
+        ctx.globalCompositeOperation = 'source-over';
+        for (var i = 0; i < blobs.length; i++) {
+            var b = blobs[i];
+            // move
+            b.x += b.vx;
+            b.y += b.vy;
+            // slight attraction to mouse
+            if (mouse.x > -9998) {
+                var dx = mouse.x - b.x;
+                var dy = mouse.y - b.y;
+                var dist = Math.sqrt(dx * dx + dy * dy) + 1;
+                var force = Math.min(80 / dist, 0.9);
+                b.vx += dx * 0.0008 * force;
+                b.vy += dy * 0.0008 * force;
+            }
+            // slow down velocity
+            b.vx *= 0.995;
+            b.vy *= 0.995;
+            // wrap
+            if (b.x < -b.r) b.x = width + b.r;
+            if (b.x > width + b.r) b.x = -b.r;
+            if (b.y < -b.r) b.y = height + b.r;
+            if (b.y > height + b.r) b.y = -b.r;
+
+            drawBlob(b);
+        }
+
+        // small radial highlight near mouse for interactivity
+        if (mouse.x > -9998) {
+            var radial = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 180);
+            radial.addColorStop(0, 'rgba(255,255,255,0.06)');
+            radial.addColorStop(1, 'rgba(255,255,255,0)');
+            ctx.fillStyle = radial;
+            ctx.fillRect(mouse.x - 180, mouse.y - 180, 360, 360);
+        }
+
+        requestAnimationFrame(step);
+    }
+
+    step();
+}
+
+// lancer le background après DOM ready
+window.addEventListener('load', function () { initializeBackgroundCanvas(); });

assets/js/config.js

@@ -0,0 +1,62 @@
+// Configuration du site MRM & Co
+const config = {
+    // Couleurs principales du site
+    colors: {
+        primary: '#2563eb',    // Bleu moderne
+        secondary: '#0f172a',  // Bleu foncé
+        accent: '#3b82f6'      // Bleu clair
+    },
+
+    // Informations de l'entreprise
+    company: {
+        name: 'MRM & Co',
+        tagline: 'Votre partenaire technologique de confiance',
+        description: 'Solutions informatiques innovantes pour propulser votre entreprise vers le futur',
+        email: 'contact@mrm.fr',
+        address: 'Nîmes, France'
+    },
+
+    // Services proposés
+    services: [
+        {
+            title: 'Développement web',
+            description: 'Création de sites web modernes, performants et responsives, optimisés pour la conversion et la performance.',
+            icon: 'web'
+        },
+        {
+            title: 'Développement logiciel',
+            description: 'Conception et réalisation de logiciels sur-mesure (desktop, backend, APIs) adaptés à vos processus métier.',
+            icon: 'software'
+        },
+        {
+            title: 'Développement mobile',
+            description: 'Applications mobiles natives et cross-platform performantes, avec expérience utilisateur soignée.',
+            icon: 'mobile'
+        }
+    ],
+
+    // Membres de l'équipe
+    team: [
+        {
+            name: 'Maxence MINARRO',
+            role: 'CEO (Directeur Général) & Co-fondateur',
+            description: '',
+            image: 'assets/avatars/maxence-minarro.jpeg',
+            linkedin: '#'
+        },
+        {
+            name: 'Titouan ROGER',
+            role: 'CTO (Directeur Technique) & Co-fondateur',
+            description: 'Développeur FullStack passionné par les nouvelles technologies et l\'innovation.',
+            image: 'assets/avatars/titouan-roger.jpeg',
+            linkedin: 'https://www.linkedin.com/in/titouan-roger/'
+        },
+        {
+            name: 'Florian MOUTOUVIRIN',
+            role: 'CMO (Directeur Marketing) & Co-fondateur',
+            description: '',
+            image: 'assets/avatars/florian-moutouvirin.jpeg',
+            linkedin: 'https://www.linkedin.com/in/florian-moutouvirin/'
+        }
+    ]
+};

index.html

@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MRM & Co - Solutions Informatiques Innovantes</title>
+    <meta name="description"
+        content="MRM & Co, votre partenaire technologique pour la transformation digitale et les solutions informatiques innovantes.">
+
+    <!-- Tailwind CSS via CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+        rel="stylesheet">
+    <!-- Configuration et styles externes -->
+    <link rel="stylesheet" href="assets/css/styles.css">
+    <script src="assets/js/config.js"></script>
+
+    <!-- SVG sprite icons (inline for performance) -->
+    <svg aria-hidden="true" style="display:none">
+        <symbol id="icon-web" viewBox="0 0 24 24">
+            <path fill="currentColor"
+                d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 2v2h3a6 6 0 00-3-2zM6 8h3V6a6 6 0 00-3 2zm0 8a6 6 0 003 2v-2H6zm9 0v2a6 6 0 003-2h-3zM9 9h6v6H9V9z">
+            </path>
+        </symbol>
+        <symbol id="icon-software" viewBox="0 0 24 24">
+            <path fill="currentColor"
+                d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7H3zm7 6H8v-2h2v2zm6 0h-2v-2h2v2zM8 11H6V9h2v2zm10 0h-2V9h2v2z">
+            </path>
+        </symbol>
+        <symbol id="icon-mobile" viewBox="0 0 24 24">
+            <path fill="currentColor"
+                d="M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm5 18a1 1 0 100-2 1 1 0 000 2z">
+            </path>
+        </symbol>
+        <symbol id="icon-linkedin" viewBox="0 0 24 24">
+            <path fill="currentColor"
+                d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8.5h4V24h-4V8.5zM8.5 8.5h3.84v2.06h.05c.53-1 1.82-2.06 3.75-2.06 4.01 0 4.75 2.64 4.75 6.07V24h-4V15.5c0-2.02-.04-4.62-2.81-4.62-2.81 0-3.24 2.2-3.24 4.48V24h-4V8.5z">
+            </path>
+        </symbol>
+    </svg>
+</head>
+
+<body class="smooth-scroll bg-gray-50">
+
+    <!-- Interactive background canvas (behind content) -->
+    <canvas id="bg-canvas" aria-hidden="true" style="position:fixed;inset:0;z-index:-1;pointer-events:none;"></canvas>
+
+    <!-- Header / Navigation -->
+    <header class="fixed w-full top-0 z-50 bg-white shadow-md">
+        <nav class="container mx-auto px-6 py-4">
+            <div class="flex items-center justify-between">
+                <!-- Logo -->
+                <div class="flex items-center">
+                    <a href="#" class="text-2xl font-bold" style="color: var(--color-primary)">
+                        <span class="gradient-bg bg-clip-text text-transparent">MRM & Co</span>
+                    </a>
+                </div>
+
+                <!-- Navigation Desktop -->
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#accueil" class="nav-link text-gray-700 hover:text-gray-900 font-medium">Accueil</a>
+                    <a href="#services" class="nav-link text-gray-700 hover:text-gray-900 font-medium">Services</a>
+                    <a href="#testimonials"
+                        class="nav-link text-gray-700 hover:text-gray-900 font-medium">Témoignages</a>
+                    <a href="#equipe" class="nav-link text-gray-700 hover:text-gray-900 font-medium">Équipe</a>
+                    <a href="#contact" class="nav-link text-gray-700 hover:text-gray-900 font-medium">Contact</a>
+                    <a href="#contact" class="btn-primary text-white px-6 py-2 rounded-lg font-medium">
+                        Devis gratuit
+                    </a>
+                </div>
+
+                <!-- Menu Mobile Toggle -->
+                <button id="mobile-menu-btn" class="md:hidden text-gray-700">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M4 6h16M4 12h16M4 18h16"></path>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Menu Mobile -->
+            <div id="mobile-menu" class="hidden md:hidden pt-4 pb-2">
+                <a href="#accueil" class="block py-2 text-gray-700 hover:text-gray-900">Accueil</a>
+                <a href="#services" class="block py-2 text-gray-700 hover:text-gray-900">Services</a>
+                <a href="#testimonials" class="block py-2 text-gray-700 hover:text-gray-900">Témoignages</a>
+                <a href="#equipe" class="block py-2 text-gray-700 hover:text-gray-900">Équipe</a>
+                <a href="#contact" class="block py-2 text-gray-700 hover:text-gray-900">Contact</a>
+            </div>
+        </nav>
+    </header>
+
+    <!-- Hero Section -->
+    <section id="accueil" class="pt-24 pb-16 md:pt-32 md:pb-24">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row items-center">
+                <!-- Contenu Hero -->
+                <div class="md:w-1/2 mb-8 md:mb-0">
+                    <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
+                        Transformez votre <span class="gradient-bg bg-clip-text text-transparent">vision digitale</span>
+                        en réalité
+                    </h1>
+                    <p class="text-lg md:text-xl text-gray-600 mb-8 leading-relaxed" id="hero-description">
+                        Solutions informatiques innovantes pour propulser votre entreprise vers le futur
+                    </p>
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        <a href="#contact"
+                            class="btn-primary text-white px-8 py-4 rounded-lg font-semibold text-center shadow-lg">
+                            Démarrer un projet
+                        </a>
+                        <a href="#services"
+                            class="bg-white text-gray-800 px-8 py-4 rounded-lg font-semibold text-center border-2 border-gray-200 hover:border-gray-300 transition">
+                            Découvrir nos services
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Image Hero / Illustration -->
+                <div class="md:w-1/2 md:pl-12">
+                    <div class="relative hero-illustration" id="hero-illustration">
+                        <div class="bg-blob blob-1 rounded-full"></div>
+                        <div class="bg-blob blob-2 rounded-full"></div>
+
+                        <!-- Simple abstract SVG illustration -->
+                        <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+                            <defs>
+                                <linearGradient id="g1" x1="0" x2="1">
+                                    <stop offset="0%" stop-color="#60a5fa" stop-opacity="1" />
+                                    <stop offset="100%" stop-color="#7c3aed" stop-opacity="1" />
+                                </linearGradient>
+                            </defs>
+                            <g transform="translate(100,30)">
+                                <rect x="0" y="40" width="560" height="360" rx="28" fill="url(#g1)" opacity="0.14">
+                                </rect>
+                                <g transform="translate(40,20)">
+                                    <circle cx="220" cy="160" r="90" fill="#fff" opacity="0.85"></circle>
+                                    <rect x="60" y="90" width="340" height="200" rx="18" fill="#fff" opacity="0.18">
+                                    </rect>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Services Section -->
+    <section id="services" class="py-16 md:py-24 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="section-title text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                    Nos Services
+                </h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto mt-8">
+                    Des solutions complètes et sur-mesure pour répondre à tous vos besoins informatiques
+                </p>
+            </div>
+
+            <!-- Services générés dynamiquement -->
+            <div id="services-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Les services seront injectés ici par JavaScript -->
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonials -->
+    <section id="testimonials" class="py-16 md:py-24">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-8">
+                <h2 class="section-title text-3xl md:text-4xl font-bold text-gray-900 mb-4">Témoignages</h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto mt-2">Ce que disent nos clients</p>
+            </div>
+
+            <div class="testimonials max-w-4xl mx-auto p-8 rounded-2xl shadow-lg bg-white">
+                <div id="testimonial-slides">
+                    <div class="testimonial-slide active">
+                        <blockquote class="text-gray-700 text-lg">“MRM & Co nous a aidés à moderniser notre plateforme —
+                            résultats visibles dès le premier mois.”</blockquote>
+                        <p class="mt-4 font-semibold">— Client A, CTO</p>
+                    </div>
+                    <div class="testimonial-slide">
+                        <blockquote class="text-gray-700 text-lg">“Une équipe réactive et très professionnelle,
+                            recommandée pour toute transformation digitale.”</blockquote>
+                        <p class="mt-4 font-semibold">— Client B, CEO</p>
+                    </div>
+                    <div class="testimonial-slide">
+                        <blockquote class="text-gray-700 text-lg">“Livraison dans les délais et performances au
+                            rendez-vous — excellentes pratiques de dev.”</blockquote>
+                        <p class="mt-4 font-semibold">— Client C, Product Lead</p>
+                    </div>
+                </div>
+
+                <div class="controls mt-6">
+                    <button id="prev-testimonial" class="px-4 py-2 rounded-lg border">◀</button>
+                    <div id="testimonial-dots" class="flex items-center gap-3 px-4"></div>
+                    <button id="next-testimonial" class="px-4 py-2 rounded-lg border">▶</button>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Équipe Section -->
+    <section id="equipe" class="py-16 md:py-24 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="section-title text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                    Notre Équipe
+                </h2>
+                <p class="text-lg text-gray-600 max-w-2xl mx-auto mt-8">
+                    Des experts passionnés dédiés à votre succès
+                </p>
+            </div>
+
+            <!-- Équipe générée dynamiquement -->
+            <div id="team-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                <!-- Les membres de l'équipe seront injectés ici par JavaScript -->
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="py-16 md:py-24 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto">
+                <div class="text-center mb-12">
+                    <h2 class="section-title text-3xl md:text-4xl font-bold text-gray-900 mb-4">
+                        Contactez-nous
+                    </h2>
+                    <p class="text-lg text-gray-600 mt-8">
+                        Parlons de votre projet et de vos ambitions digitales
+                    </p>
+                </div>
+
+                <div class="grid md:grid-cols-2 gap-8">
+                    <!-- Formulaire -->
+                    <div class="bg-gray-50 p-8 rounded-xl">
+                        <form id="contact-form" class="space-y-6">
+                            <div>
+                                <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">Nom
+                                    complet</label>
+                                <input type="text" id="name" name="name" required
+                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
+                            </div>
+
+                            <div>
+                                <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Email</label>
+                                <input type="email" id="email" name="email" required
+                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
+                            </div>
+
+                            <div>
+                                <label for="phone"
+                                    class="block text-sm font-semibold text-gray-700 mb-2">Téléphone</label>
+                                <input type="tel" id="phone" name="phone"
+                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
+                            </div>
+                            <div>
+                                <label for="message"
+                                    class="block text-sm font-semibold text-gray-700 mb-2">Message</label>
+                                <textarea id="message" name="message" rows="4" required
+                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"></textarea>
+                            </div>
+
+                            <button type="submit"
+                                class="w-full btn-primary text-white px-6 py-4 rounded-lg font-semibold shadow-lg">
+                                Envoyer le message
+                            </button>
+                        </form>
+                    </div>
+
+                    <!-- Informations -->
+                    <div class="space-y-6">
+                        <div class="bg-gray-50 p-6 rounded-xl">
+                            <div class="flex items-start">
+                                <div class="text-3xl mr-4">📧</div>
+                                <div>
+                                    <h3 class="font-semibold text-gray-900 mb-1">Email</h3>
+                                    <p class="text-gray-600" id="contact-email">contact@mrmco.fr</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="bg-gray-50 p-6 rounded-xl">
+                            <div class="flex items-start">
+                                <div class="text-3xl mr-4">📍</div>
+                                <div>
+                                    <h3 class="font-semibold text-gray-900 mb-1">Adresse</h3>
+                                    <p class="text-gray-600" id="contact-address">Paris, France</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+                <!-- À propos -->
+                <div class="md:col-span-2">
+                    <h3 class="text-2xl font-bold mb-4 gradient-bg bg-clip-text text-transparent">MRM & Co</h3>
+                    <p class="text-gray-400 mb-4" id="footer-description">
+                        Votre partenaire technologique de confiance pour la transformation digitale et l'innovation.
+                    </p>
+                </div>
+
+                <!-- Liens rapides -->
+                <div>
+                    <h4 class="font-semibold mb-4">Liens Rapides</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#accueil" class="text-gray-400 hover:text-white transition">Accueil</a></li>
+                        <li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li>
+                        <li><a href="#testimonials" class="text-gray-400 hover:text-white transition">Témoignages</a>
+                        </li>
+                        <li><a href="#equipe" class="text-gray-400 hover:text-white transition">Équipe</a></li>
+                        <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
+                    </ul>
+                </div>
+
+                <!-- Réseaux sociaux -->
+                <div>
+                    <h4 class="font-semibold mb-4">Suivez-nous</h4>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition text-2xl">🔗</a>
+                        <a href="#" class="text-gray-400 hover:text-white transition text-2xl">🐦</a>
+                        <a href="#" class="text-gray-400 hover:text-white transition text-2xl">📘</a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
+                <p>&copy; <span id="current-year"></span> MRM & Co. Tous droits réservés.</p>
+            </div>
+        </div>
+    </footer>
+
+    <!-- JavaScript principal -->
+    <script src="assets/js/app.js"></script>
+</body>
+
+</html>