Présentation - Navigation

1 / 1

<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Marketing et Intelligence Artificielle</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            overflow: hidden;
            display: flex;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .left-panel {
            flex: 0 0 55%;
            padding: 60px 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 10;
        }
        .right-panel {
            flex: 0 0 45%;
            background-color: #1e3a8a; /* Blue Professional */
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .accent-bar {
            width: 80px;
            height: 6px;
            background-color: #f97316; /* Touch of Orange */
            margin-bottom: 24px;
        }
        .title {
            font-size: 56px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1.1;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
        }
        .subtitle {
            font-size: 24px;
            font-weight: 400;
            color: #4b5563;
            margin-bottom: 40px;
        }
        .info-box {
            background-color: #f8fafc;
            border-left: 4px solid #3b82f6;
            padding: 20px;
            margin-top: auto;
        }
        .info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
            color: #374151;
            font-size: 18px;
        }
        .info-item:last-child {
            margin-bottom: 0;
        }
        .info-item i {
            color: #f97316;
            margin-right: 15px;
            margin-top: 4px;
            width: 20px;
            text-align: center;
        }
        .geometric-overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.1;
            background-image: radial-gradient(#ffffff 1px, transparent 1px);
            background-size: 20px 20px;
        }
        /* Custom decoration */
        .deco-circle {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.05);
            top: -50px;
            right: -50px;
        }
        .deco-square {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: rgba(249, 115, 22, 0.8);
            bottom: 50px;
            left: -75px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="slide-container">

<div class="left-panel">
<div class="text-sm font-bold tracking-widest text-blue-500 mb-4 uppercase">
<i class="fas fa-university mr-2"></i>ISCAE Mauritanie • Club Crea Mark
            </div>
<div class="accent-bar"></div>
<h1 class="title">
                Marketing et Intelligence Artificielle
            </h1>
<p class="subtitle">
                Transformations, Opportunités et Défis pour les futurs professionnels
            </p>
<div class="mt-8">
<div class="info-box shadow-sm">
<div class="info-item">
<i class="fas fa-users"></i>
<div>
<span class="font-bold block text-gray-800">Public Cible</span>
                            L1–L3 Marketing, Comptabilité, Banque & Assurance
                        </div>
</div>
<div class="info-item mt-4">
<i class="fas fa-clock"></i>
<div>
<span class="font-bold block text-gray-800">Format de la conférence</span>
                            2 heures • Session interactive & pratique
                        </div>
</div>
</div>
</div>
<div class="mt-auto pt-8 flex items-center text-gray-500 text-sm">
<img alt="Speaker" class="rounded-full mr-3" src="https://page.gensparksite.com/slides_images/993b841ec14678c7009b20c7b29fb430.svg"/>
<div>
<span class="block font-bold text-blue-900">Animé par Mohamed Mohamed Beirouk</span>
<span>Doctorant en intelligence artificielle</span>
</div>
</div>
</div>

<div class="right-panel">
<div class="geometric-overlay"></div>
<div class="deco-circle"></div>
<div class="deco-square"></div>

<canvas height="720" id="networkCanvas" width="576"></canvas>
<div class="absolute bottom-10 right-10 text-white text-right opacity-80">
<p class="text-6xl font-black opacity-20">AI</p>
<p class="text-2xl font-light tracking-wider">FUTURE READY</p>
</div>
</div>
</div>
<script>
        // Canvas Animation for AI Network
        const canvas = document.getElementById('networkCanvas');
        const ctx = canvas.getContext('2d');
        
        // Configuration
        const particleCount = 60;
        const connectionDistance = 120;
        const particles = [];

class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = (Math.random() - 0.5) * 0.5;
                this.vy = (Math.random() - 0.5) * 0.5;
                this.size = Math.random() * 2 + 1;
            }

update() {
                this.x += this.vx;
                this.y += this.vy;

if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
                if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
            }

draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
                ctx.fill();
            }
        }

function init() {
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
        }

function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw connections
            ctx.lineWidth = 0.5;
            for (let i = 0; i < particles.length; i++) {
                for (let j = i + 1; j < particles.length; j++) {
                    const dx = particles[i].x - particles[j].x;
                    const dy = particles[i].y - particles[j].y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < connectionDistance) {
                        ctx.beginPath();
                        ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance / connectionDistance})`;
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(particles[j].x, particles[j].y);
                        ctx.stroke();
                    }
                }
            }

// Update and draw particles
            particles.forEach(particle => {
                particle.update();
                particle.draw();
            });

// Draw central node representing "Marketing Core"
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, 8, 0, Math.PI * 2);
            ctx.fillStyle = '#f97316'; // Orange center
            ctx.fill();
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, Math.PI * 2);
            ctx.strokeStyle = 'rgba(249, 115, 22, 0.2)';
            ctx.stroke();

requestAnimationFrame(animate);
        }

init();
        animate();
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Agenda de la Conférence</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        /* Header Section */
        .header {
            padding: 50px 60px 20px 60px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            z-index: 10;
        }
        .section-tag {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #f97316;
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .section-tag::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background-color: #f97316;
            margin-right: 10px;
        }
        .main-title {
            font-size: 48px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1.1;
        }
        .total-time-badge {
            background-color: #eff6ff;
            color: #1e3a8a;
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 700;
            display: flex;
            align-items: center;
            border: 1px solid #bfdbfe;
        }

/* Timeline Area */
        .timeline-area {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 60px;
            position: relative;
        }
        
        /* The connecting line */
        .timeline-connector {
            position: absolute;
            top: 45%; /* Aligned with icon center */
            left: 140px;
            right: 140px;
            height: 4px;
            background-color: #e2e8f0;
            z-index: 1;
        }
        .timeline-connector-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%; /* Represents full progress since it's an agenda */
            background: linear-gradient(90deg, #3b82f6 0%, #2563eb 50%, #f97316 100%);
            opacity: 0.3;
        }

/* Timeline Items */
        .timeline-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            width: 100%;
            z-index: 5;
        }
        
        .timeline-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            transition: transform 0.3s ease;
        }
        .timeline-item:hover {
            transform: translateY(-5px);
        }

/* Step Number / Icon Container */
        .icon-container {
            width: 90px;
            height: 90px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 25px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border: 4px solid #fff;
            position: relative;
            z-index: 10;
        }
        
        /* Different colored borders for variety */
        .item-1 .icon-container { border-color: #93c5fd; }
        .item-2 .icon-container { border-color: #60a5fa; }
        .item-3 .icon-container { border-color: #3b82f6; }
        .item-4 .icon-container { border-color: #f97316; }

.icon-container i {
            font-size: 32px;
        }
        .item-1 i { color: #1e40af; }
        .item-2 i { color: #2563eb; }
        .item-3 i { color: #3b82f6; }
        .item-4 i { color: #ea580c; }

/* Step Badge */
        .step-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 30px;
            height: 30px;
            background-color: #1e3a8a;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            border: 2px solid white;
        }

/* Content Box */
        .content-box {
            background-color: #fff;
            padding: 20px;
            border-radius: 12px;
            width: 100%;
            border: 1px solid #f1f5f9;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            height: 180px; /* Fixed height for alignment */
            display: flex;
            flex-direction: column;
        }

.time-pill {
            display: inline-block;
            background-color: #f3f4f6;
            color: #64748b;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 12px;
            align-self: center;
        }
        .item-title {
            font-size: 20px;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 10px;
            line-height: 1.2;
        }
        .item-desc {
            font-size: 14px;
            color: #6b7280;
            line-height: 1.5;
        }

/* Background decorations */
        .bg-blob {
            position: absolute;
            width: 500px;
            height: 500px;
            background-color: #f0f9ff;
            border-radius: 50%;
            top: -200px;
            right: -100px;
            z-index: 0;
            opacity: 0.6;
        }
        .bg-blob-2 {
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: #fff7ed;
            border-radius: 50%;
            bottom: -150px;
            left: -100px;
            z-index: 0;
            opacity: 0.6;
        }
        
        .arrow-next {
            position: absolute;
            right: -20px;
            top: 50%;
            transform: translateY(-50%);
            color: #cbd5e1;
            font-size: 24px;
        }

</style>
</head>
<body>
<div class="slide-container">

<div class="bg-blob"></div>
<div class="bg-blob-2"></div>

<div class="header">
<div>
<div class="section-tag">STRUCTURE DE LA SÉANCE</div>
<h1 class="main-title">Agenda de la conférence</h1>
</div>
<div class="total-time-badge shadow-sm">
<i class="far fa-clock mr-2 text-orange-500"></i>
                Durée totale : 2h00
            </div>
</div>

<div class="timeline-area">

<div class="timeline-connector">
<div class="timeline-connector-fill"></div>
</div>
<div class="timeline-grid">

<div class="timeline-item item-1">
<div class="icon-container">
<div class="step-badge">1</div>
<i class="fas fa-microchip"></i>
</div>
<div class="content-box">
<span class="time-pill">30 min</span>
<h3 class="item-title">Fondamentaux de l'IA</h3>
<p class="item-desc">Comprendre l'IA, son histoire, ses types (faible/forte) et les technologies clés comme le Machine Learning.</p>
</div>
</div>

<div class="timeline-item item-2">
<div class="icon-container">
<div class="step-badge">2</div>
<i class="fas fa-bullseye"></i>

</div>
<div class="content-box">
<span class="time-pill">40 min</span>
<h3 class="item-title">IA & Marketing</h3>
<p class="item-desc">Segmentation, ciblage prédictif, automatisation, chatbots et création de contenu personnalisée.</p>
</div>
</div>

<div class="timeline-item item-3">
<div class="icon-container">
<div class="step-badge">3</div>
<i class="fas fa-chart-line"></i>
</div>
<div class="content-box">
<span class="time-pill">30 min</span>
<h3 class="item-title">Finance & Banque</h3>
<p class="item-desc">Automatisation comptable, détection de fraude, audit intelligent et scoring de crédit.</p>
</div>
</div>

<div class="timeline-item item-4">
<div class="icon-container">
<div class="step-badge">4</div>
<i class="fas fa-rocket"></i>
</div>
<div class="content-box" style="border-bottom: 4px solid #f97316;">
<span class="time-pill text-orange-600 bg-orange-50">20 min</span>
<h3 class="item-title text-blue-900">Futur & Pratique</h3>
<p class="item-desc">Atelier interactif, défis éthiques, avenir du travail en Mauritanie et conclusion.</p>
</div>
</div>
</div>
</div>

<div class="w-full bg-blue-900 h-2 absolute bottom-0"></div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Objectifs Pédagogiques</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: 'Roboto', sans-serif;
        background-color: #f3f4f6;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .slide-container {
        width: 1280px;
        height: 720px;
        background-color: #ffffff;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    /* Header */
    .header {
        padding: 50px 60px 20px 60px;
        position: relative;
        z-index: 10;
    }
    .section-tag {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #f97316;
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
    }
    .section-tag::before {
        content: '';
        display: block;
        width: 30px;
        height: 2px;
        background-color: #f97316;
        margin-right: 10px;
    }
    .main-title {
        font-size: 42px;
        font-weight: 900;
        color: #1e3a8a;
        line-height: 1.1;
        margin-bottom: 10px;
    }
    .subtitle {
        font-size: 18px;
        color: #64748b;
        max-width: 800px;
    }

/* Content Area */
    .content-area {
        flex: 1;
        padding: 20px 60px 60px 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        position: relative;
        z-index: 5;
    }

.objective-card {
        flex: 1;
        height: 420px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid #f1f5f9;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 30px;
        position: relative;
        transition: all 0.3s ease;
        overflow: hidden;
    }

.objective-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background-color: #e2e8f0;
        transition: background-color 0.3s ease;
    }

/* Hover effects */
    .objective-card:hover { transform: translateY(-5px); }

.card-1:hover::before { background-color: #3b82f6; }
    .card-2:hover::before { background-color: #f97316; }
    .card-3:hover::before { background-color: #10b981; }

.icon-wrapper {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        font-size: 40px;
        background-color: #f8fafc;
        transition: all 0.3s ease;
    }

/* Specific card styles */
    .card-1 .icon-wrapper { color: #3b82f6; background-color: #eff6ff; }
    .card-2 .icon-wrapper { color: #f97316; background-color: #fff7ed; }
    .card-3 .icon-wrapper { color: #10b981; background-color: #ecfdf5; }

.card-title {
        font-size: 22px;
        font-weight: 700;
        color: #1e3a8a;
        margin-bottom: 15px;
    }
    
    .card-desc {
        font-size: 16px;
        color: #64748b;
        line-height: 1.6;
    }

/* Decorative Numbers */
    .number-bg {
        position: absolute;
        bottom: -25px;
        right: -10px;
        font-size: 140px;
        font-weight: 900;
        color: #f1f5f9;
        z-index: 0;
        opacity: 0.6;
        line-height: 1;
        pointer-events: none;
        font-family: 'Roboto', sans-serif;
    }

/* Background decoration */
    .bg-shape {
        position: absolute;
        top: 0;
        right: 0;
        width: 35%;
        height: 100%;
        background-color: #f8fafc;
        z-index: 0;
        clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    }
    
    /* Footer bar */
    .footer-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background-color: #1e3a8a;
    }
</style>
</head>
<body>
<div class="slide-container">
<div class="bg-shape"></div>
<div class="header">
<div class="section-tag">POURQUOI CETTE CONFÉRENCE ?</div>
<h1 class="main-title">Objectifs Pédagogiques</h1>
<p class="subtitle">À la fin de cette session, vous disposerez des clés pour appréhender l'IA dans votre futur métier.</p>
</div>
<div class="content-area">

<div class="objective-card card-1">
<div class="number-bg">01</div>
<div class="icon-wrapper">
<i class="fas fa-brain"></i>
</div>
<div style="position: relative; z-index: 10;">
<h3 class="card-title">Comprendre les bases</h3>
<p class="card-desc">Démystifier l'Intelligence Artificielle et comprendre ses concepts fondamentaux sans jargon technique ni compétence en programmation.</p>
</div>
</div>

<div class="objective-card card-2">
<div class="number-bg">02</div>
<div class="icon-wrapper">
<i class="fas fa-briefcase"></i>
</div>
<div style="position: relative; z-index: 10;">
<h3 class="card-title">Identifier les cas d'usage</h3>
<p class="card-desc">Découvrir comment l'IA s'applique concrètement en Marketing, Comptabilité, Banque et Assurance à travers des exemples réels.</p>
</div>
</div>

<div class="objective-card card-3">
<div class="number-bg">03</div>
<div class="icon-wrapper">
<i class="fas fa-chart-pie"></i>
</div>
<div style="position: relative; z-index: 10;">
<h3 class="card-title">Évaluer l'impact et le ROI</h3>
<p class="card-desc">Développer un esprit critique pour analyser les bénéfices, les risques éthiques et le retour sur investissement des solutions IA.</p>
</div>
</div>
</div>
<div class="footer-bar"></div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Qu'est-ce que l'IA ?</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        /* Header */
        .header {
            padding: 40px 60px 20px 60px;
            position: relative;
            z-index: 10;
        }
        .section-tag {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #f97316;
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .section-tag::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background-color: #f97316;
            margin-right: 10px;
        }
        .main-title {
            font-size: 42px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1.1;
        }

/* Content Area */
        .content-area {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

/* Central Hub (Brain) */
        .hub-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 220px;
            height: 220px;
            background-color: #eff6ff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2;
            box-shadow: 0 0 0 15px rgba(239, 246, 255, 0.5), 0 0 0 30px rgba(239, 246, 255, 0.25);
            border: 2px solid #3b82f6;
        }
        
        .brain-circle {
            width: 160px;
            height: 160px;
            background-color: #1e3a8a;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 80px;
            box-shadow: 0 10px 25px rgba(30, 58, 138, 0.4);
            position: relative;
            z-index: 2;
        }

/* Connecting Lines (SVG) */
        .connections {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

/* Node Cards */
        .node-card {
            position: absolute;
            width: 340px;
            background-color: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border-left: 5px solid #3b82f6;
            z-index: 15;
            transition: transform 0.3s ease;
        }
        
        .node-card:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

/* Positioning Nodes */
        .node-top {
            top: 5%;
            left: 50%;
            transform: translateX(-50%);
            border-left-color: #f97316; /* Orange accent */
        }
        
        .node-bottom-left {
            bottom: 10%;
            left: 10%;
            border-left-color: #3b82f6;
        }

.node-bottom-right {
            bottom: 10%;
            right: 10%;
            border-left-color: #10b981; /* Green accent for tools/tech */
        }

.node-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 15px;
        }

.node-top .node-icon { background-color: #fff7ed; color: #f97316; }
        .node-bottom-left .node-icon { background-color: #eff6ff; color: #3b82f6; }
        .node-bottom-right .node-icon { background-color: #ecfdf5; color: #10b981; }

.node-title {
            font-size: 20px;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 8px;
        }

.node-text {
            font-size: 16px;
            color: #64748b;
            line-height: 1.5;
        }

/* Background Deco */
        .bg-grid {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
            background-size: 30px 30px;
            opacity: 0.3;
            z-index: 0;
        }
        
        /* Floating labels around brain */
        .float-label {
            position: absolute;
            background: #1e3a8a;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            z-index: 4;
        }
        .label-1 { top: -20px; left: 50%; transform: translateX(-50%); }
        
        .pulse-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 2px solid #3b82f6;
            opacity: 0;
            width: 100%;
            height: 100%;
        }
        
    </style>
</head>
<body>
<div class="slide-container">
<div class="bg-grid"></div>
<div class="header">
<div class="section-tag">PARTIE 1 : FONDAMENTAUX</div>
<h1 class="main-title">Qu'est-ce que l'Intelligence Artificielle ?</h1>
<p class="text-gray-500 text-xl mt-2">Une définition simple pour comprendre le concept</p>
</div>
<div class="content-area">

<svg class="connections">

<path d="M640 360 L640 200" fill="none" stroke="#cbd5e1" stroke-dasharray="8 4" stroke-width="3"></path>

<path d="M640 360 L350 500" fill="none" stroke="#cbd5e1" stroke-dasharray="8 4" stroke-width="3"></path>

<path d="M640 360 L930 500" fill="none" stroke="#cbd5e1" stroke-dasharray="8 4" stroke-width="3"></path>

<circle cx="640" cy="200" fill="#f97316" r="6"></circle>
<circle cx="350" cy="500" fill="#3b82f6" r="6"></circle>
<circle cx="930" cy="500" fill="#10b981" r="6"></circle>
</svg>

<div class="hub-container">
<div class="brain-circle">
<i class="fas fa-brain"></i>
</div>
<div class="float-label label-1">IA</div>
</div>

<div class="node-card node-top" style="top: 130px;">
<div class="flex items-start">
<div class="node-icon mr-4">
<i class="fas fa-user-astronaut"></i>
</div>
<div>
<h3 class="node-title">Imitation Humaine</h3>
<p class="node-text">Systèmes capables d'exécuter des tâches nécessitant normalement l'<strong>intelligence humaine</strong> (compréhension, perception, raisonnement).</p>
</div>
</div>
</div>

<div class="node-card node-bottom-left" style="bottom: 120px; left: 120px;">
<div class="flex items-start">
<div class="node-icon mr-4">
<i class="fas fa-chart-line"></i>
</div>
<div>
<h3 class="node-title">Apprentissage</h3>
<p class="node-text">Ne se contente pas d'exécuter : elle <strong>apprend</strong> à partir des données pour s'améliorer continuellement sans être explicitement reprogrammée.</p>
</div>
</div>
</div>

<div class="node-card node-bottom-right" style="bottom: 120px; right: 120px;">
<div class="flex items-start">
<div class="node-icon mr-4">
<i class="fas fa-cubes"></i>
</div>
<div>
<h3 class="node-title">Boîte à Outils</h3>
<p class="node-text">Un ensemble de technologies mathématiques et informatiques : <strong>modèles, règles statistiques et algorithmes</strong>.</p>
</div>
</div>
</div>
</div>

<div class="absolute bottom-0 left-0 w-full h-2 bg-blue-900"></div>
<div class="absolute bottom-4 right-8 text-gray-400 text-sm">5</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Histoire et évolution de l'IA</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Header */
        .header {
            padding: 40px 60px 10px 60px;
            position: relative;
            z-index: 10;
        }
        .section-tag {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #f97316;
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .section-tag::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background-color: #f97316;
            margin-right: 10px;
        }
        .main-title {
            font-size: 42px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1.1;
        }
        .subtitle {
            font-size: 18px;
            color: #64748b;
            margin-top: 8px;
        }

/* Timeline Container */
        .timeline-area {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 40px;
            margin-top: 20px;
        }

/* The horizontal line */
        .timeline-line {
            position: absolute;
            top: 50%;
            left: 60px;
            right: 60px;
            height: 4px;
            background-color: #e2e8f0;
            z-index: 1;
            border-radius: 2px;
        }

.timeline-progress {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%; /* Full history */
            background: linear-gradient(90deg, #1e3a8a 0%, #3b82f6 50%, #f97316 100%);
            border-radius: 2px;
            opacity: 0.8;
        }

/* Timeline Items */
        .timeline-item {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px; /* Width of content area for each point */
        }

/* Positioning the items along the line */
        .item-1 { left: 5%; }
        .item-2 { left: 23%; }
        .item-3 { left: 41%; }
        .item-4 { left: 59%; }
        .item-5 { left: 77%; }

/* The Dot on the line */
        .timeline-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: white;
            border: 4px solid #1e3a8a;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }

.item-1 .timeline-dot { border-color: #1e3a8a; } /* Dark Blue */
        .item-2 .timeline-dot { border-color: #2563eb; } /* Blue */
        .item-3 .timeline-dot { border-color: #60a5fa; } /* Light Blue (Winter) */
        .item-4 .timeline-dot { border-color: #f97316; } /* Orange Start */
        .item-5 .timeline-dot { border-color: #ea580c; background-color: #ea580c; box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.3); } /* Intense Orange */

/* Content Cards */
        .timeline-content {
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            width: 100%;
            text-align: left;
            position: absolute;
            border-left: 4px solid #ccc;
            transition: transform 0.3s ease;
        }
        
        .timeline-content:hover {
            transform: scale(1.05);
            z-index: 20;
        }

/* Alternating positions */
        .content-top {
            bottom: 40px; /* Above the line */
            border-left-color: #1e3a8a;
        }
        .content-bottom {
            top: 40px; /* Below the line */
            border-left-color: #f97316;
        }

.item-3 .content-top { border-left-color: #94a3b8; } /* Winter Grey/Blue */
        
        /* Connecting vertical lines */
        .timeline-connector {
            position: absolute;
            left: 50%;
            width: 2px;
            background-color: #cbd5e1;
            height: 40px;
            transform: translateX(-50%);
        }
        .connector-top { bottom: 0; }
        .connector-bottom { top: 0; }

/* Typography inside cards */
        .year-label {
            display: inline-block;
            font-weight: 900;
            font-size: 24px;
            color: #cbd5e1;
            margin-bottom: 5px;
            font-family: 'Roboto', sans-serif;
        }
        .card-title {
            font-weight: 700;
            font-size: 16px;
            color: #1e3a8a;
            line-height: 1.2;
            margin-bottom: 5px;
        }
        .card-desc {
            font-size: 13px;
            color: #64748b;
            line-height: 1.4;
        }
        
        /* Icons */
        .year-icon {
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 20px;
            opacity: 0.2;
        }

/* Background Deco */
        .bg-wave {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 150px;
            background-color: #f8fafc;
            clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
            z-index: 0;
        }
        
        .grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.15;
            z-index: 0;
        }

</style>
</head>
<body>
<div class="slide-container">

<div class="grid-overlay"></div>
<div class="bg-wave"></div>

<div class="header">
<div class="section-tag">PARTIE 1 : FONDAMENTAUX</div>
<h1 class="main-title">Histoire et évolution de l'IA</h1>
<p class="subtitle">D'un concept théorique à une révolution industrielle</p>
</div>

<div class="timeline-area">
<div class="timeline-line">
<div class="timeline-progress"></div>
</div>

<div class="timeline-item item-1">
<div class="timeline-connector connector-top"></div>
<div class="timeline-dot"></div>
<div class="timeline-content content-top">
<i class="fas fa-question year-icon"></i>
<span class="year-label text-blue-900">1950</span>
<h3 class="card-title">Fondations Théoriques</h3>
<p class="card-desc"><strong>Alan Turing</strong> pose la question "Les machines peuvent-elles penser ?" et propose le Test de Turing.</p>
</div>
</div>

<div class="timeline-item item-2">
<div class="timeline-connector connector-bottom"></div>
<div class="timeline-dot"></div>
<div class="timeline-content content-bottom">
<i class="fas fa-baby year-icon"></i>
<span class="year-label text-blue-700">1956</span>
<h3 class="card-title">Naissance Officielle</h3>
<p class="card-desc">Conférence de <strong>Dartmouth</strong>. Le terme "Intelligence Artificielle" est inventé par John McCarthy.</p>
</div>
</div>

<div class="timeline-item item-3">
<div class="timeline-connector connector-top"></div>
<div class="timeline-dot"></div>
<div class="timeline-content content-top" style="border-left-color: #94a3b8;">
<i class="fas fa-snowflake year-icon text-blue-300"></i>
<span class="year-label text-gray-400">1980s</span>
<h3 class="card-title text-gray-600">Hivers de l'IA</h3>
<p class="card-desc">Attentes déçues, limitations techniques et coupures de financement. Période de stagnation.</p>
</div>
</div>

<div class="timeline-item item-4">
<div class="timeline-connector connector-bottom"></div>
<div class="timeline-dot"></div>
<div class="timeline-content content-bottom">
<i class="fas fa-network-wired year-icon text-orange-400"></i>
<span class="year-label text-orange-500">2012</span>
<h3 class="card-title">Renaissance (Deep Learning)</h3>
<p class="card-desc">Explosion du Big Data et puissance de calcul (GPU). Avancées majeures en reconnaissance d'images.</p>
</div>
</div>

<div class="timeline-item item-5">
<div class="timeline-connector connector-top"></div>
<div class="timeline-dot"></div>
<div class="timeline-content content-top" style="border-left-color: #f97316;">
<i class="fas fa-robot year-icon text-orange-600"></i>
<span class="year-label text-orange-600">2023+</span>
<h3 class="card-title">Ère Générative</h3>
<p class="card-desc">Démocratisation massive avec <strong>ChatGPT</strong>. L'IA crée du contenu (texte, images) et transforme les métiers.</p>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">6</div>
<div class="absolute bottom-0 left-0 w-full h-2 bg-gradient-to-r from-blue-900 via-blue-600 to-orange-500"></div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Types d'IA : IA faible vs IA forte</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Header */
        .header {
            padding: 40px 60px 20px 60px;
            z-index: 10;
            background-color: #fff;
        }
        .section-tag {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #f97316;
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .section-tag::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background-color: #f97316;
            margin-right: 10px;
        }
        .main-title {
            font-size: 42px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1.1;
        }

/* Main Content Split */
        .split-container {
            flex: 1;
            display: flex;
            position: relative;
        }

/* Column Styles */
        .col {
            flex: 1;
            padding: 40px 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

.col-left {
            background-color: #eff6ff; /* Light Blue */
            color: #1e3a8a;
        }
        .col-right {
            background-color: #f8fafc; /* Light Gray */
            color: #475569;
        }

/* Column Header */
        .col-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .col-title {
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 5px;
            text-transform: uppercase;
        }
        .col-subtitle {
            font-size: 16px;
            font-weight: 500;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

/* Icon Circle */
        .icon-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            margin-bottom: 30px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            background-color: white;
        }
        .col-left .icon-circle { color: #3b82f6; border: 4px solid #bfdbfe; }
        .col-right .icon-circle { color: #64748b; border: 4px solid #e2e8f0; }

/* Feature List */
        .feature-list {
            width: 100%;
            max-width: 400px;
        }
        .feature-item {
            display: flex;
            align-items: start;
            margin-bottom: 20px;
            font-size: 18px;
        }
        .feature-icon {
            margin-right: 15px;
            margin-top: 4px;
        }
        
        /* Examples Box */
        .examples-box {
            margin-top: auto;
            background-color: rgba(255, 255, 255, 0.6);
            padding: 20px;
            border-radius: 12px;
            width: 100%;
            max-width: 450px;
            border: 1px solid rgba(0,0,0,0.05);
        }
        .examples-title {
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 10px;
            opacity: 0.7;
        }
        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tag {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        .col-left .tag { background-color: #dbeafe; color: #1e40af; }
        .col-right .tag { background-color: #e2e8f0; color: #475569; }

/* Separator */
        .separator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .vs-badge {
            width: 60px;
            height: 60px;
            background-color: #f97316;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 20px;
            border: 4px solid white;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .separator-line {
            width: 2px;
            height: 500px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }

/* Status Badge */
        .status-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 6px 16px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 14px;
            text-transform: uppercase;
        }
        .status-active {
            background-color: #dcfce7;
            color: #15803d;
            border: 1px solid #86efac;
        }
        .status-inactive {
            background-color: #f1f5f9;
            color: #64748b;
            border: 1px solid #cbd5e1;
        }

/* slide text fit */
        .col-title { font-size: 30px; }
        .col-subtitle { font-size: 14px; }
        .feature-item p { font-size: 15px; }
        .examples-title { font-size: 14px; }
        .tag { font-size: 12px; padding: 4px 10px; }
</style>
</head>
<body>
<div class="slide-container">

<div class="header">
<div class="section-tag">PARTIE 1 : FONDAMENTAUX</div>
<h1 class="main-title">Types d'IA : La réalité vs Le mythe</h1>
</div>

<div class="split-container">

<div class="separator">
<div class="separator-line"></div>
<div class="vs-badge">VS</div>
</div>

<div class="col col-left">
<div class="status-badge status-active">
<i class="fas fa-check-circle mr-2"></i>Réalité Actuelle (100%)
                </div>
<div class="col-header">
<h2 class="col-title">IA FAIBLE</h2>
<p class="col-subtitle">(Narrow AI / ANI)</p>
</div>
<div class="icon-circle">
<i class="fas fa-tools"></i>
</div>
<div class="feature-list">
<div class="feature-item">
<i class="fas fa-bullseye feature-icon text-blue-500"></i>
<p><strong>Spécialisée :</strong> Excelle dans une seule tâche précise.</p>
</div>
<div class="feature-item">
<i class="fas fa-robot feature-icon text-blue-500"></i>
<p><strong>Simulation :</strong> Imite l'intelligence sans conscience.</p>
</div>
<div class="feature-item">
<i class="fas fa-database feature-icon text-blue-500"></i>
<p><strong>Dépendante :</strong> Nécessite des données d'entraînement spécifiques.</p>
</div>
</div>
<div class="examples-box">
<p class="examples-title"><i class="fas fa-lightbulb mr-2"></i>Exemples concrets</p>
<div class="tag-container">
<span class="tag">Chatbots</span>
<span class="tag">Recommandations Netflix</span>
<span class="tag">Siri / Alexa</span>
<span class="tag">Détection fraude</span>
<span class="tag">Conduite autonome</span>
</div>
</div>
</div>

<div class="col col-right">
<div class="status-badge status-inactive">
<i class="fas fa-ban mr-2"></i>N'existe pas encore
                </div>
<div class="col-header">
<h2 class="col-title">IA FORTE</h2>
<p class="col-subtitle">(General AI / AGI)</p>
</div>
<div class="icon-circle">
<i class="fas fa-brain"></i>
</div>
<div class="feature-list">
<div class="feature-item">
<i class="fas fa-infinity feature-icon text-gray-500"></i>
<p><strong>Générale :</strong> Capable d'apprendre n'importe quelle tâche intellectuelle.</p>
</div>
<div class="feature-item">
<i class="fas fa-fingerprint feature-icon text-gray-500"></i>
<p><strong>Conscience :</strong> Éprouve des sentiments et une conscience de soi.</p>
</div>
<div class="feature-item">
<i class="fas fa-random feature-icon text-gray-500"></i>
<p><strong>Autonome :</strong> Fixe ses propres objectifs sans intervention humaine.</p>
</div>
</div>
<div class="examples-box">
<p class="examples-title"><i class="fas fa-film mr-2"></i>Fiction & Théorie</p>
<div class="tag-container">
<span class="tag">C-3PO (Star Wars)</span>
<span class="tag">Jarvis (Iron Man)</span>
<span class="tag">L'homme bicentenaire</span>
<span class="tag">Cerveau Humain</span>
</div>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">7</div>
<div class="absolute bottom-0 left-0 w-full h-2 bg-gradient-to-r from-blue-900 to-gray-400"></div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Technologies Clés de l'IA</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Header */
        .header {
            padding: 40px 60px 20px 60px;
            position: relative;
            z-index: 10;
        }
        .section-tag {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #f97316;
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .section-tag::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background-color: #f97316;
            margin-right: 10px;
        }
        .main-title {
            font-size: 42px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1.1;
        }

/* Main Content */
        .content-area {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 60px 60px 60px;
            position: relative;
        }

/* Tech Cards */
        .tech-card {
            flex: 1;
            background-color: white;
            border-radius: 16px;
            padding: 30px;
            height: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
            border: 1px solid #e2e8f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            z-index: 5;
        }

.tech-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
        }

/* Top Border Accents */
        .card-ml { border-top: 8px solid #3b82f6; }
        .card-dl { border-top: 8px solid #1e3a8a; }
        .card-genai { border-top: 8px solid #f97316; }

/* Icon Wrapper */
        .icon-wrapper {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 25px;
            font-size: 36px;
        }

.card-ml .icon-wrapper { background-color: #eff6ff; color: #3b82f6; }
        .card-dl .icon-wrapper { background-color: #e0e7ff; color: #1e3a8a; }
        .card-genai .icon-wrapper { background-color: #fff7ed; color: #f97316; }

/* Typography */
        .card-title {
            font-size: 24px;
            font-weight: 800;
            color: #1f2937;
            margin-bottom: 15px;
            line-height: 1.2;
        }
        
        .card-desc {
            font-size: 16px;
            color: #64748b;
            line-height: 1.6;
            margin-bottom: 20px;
        }

/* Key Feature Tag */
        .feature-tag {
            margin-top: auto;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .card-ml .feature-tag { background-color: #eff6ff; color: #3b82f6; }
        .card-dl .feature-tag { background-color: #e0e7ff; color: #1e3a8a; }
        .card-genai .feature-tag { background-color: #fff7ed; color: #c2410c; }

/* Arrows between cards */
        .arrow-container {
            width: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #cbd5e1;
            font-size: 32px;
            z-index: 1;
        }

/* Background Elements */
        .bg-circle {
            position: absolute;
            border-radius: 50%;
            z-index: 0;
        }
        .circle-1 {
            width: 400px;
            height: 400px;
            background-color: #f0f9ff;
            top: -100px;
            right: -100px;
            opacity: 0.6;
        }
        .circle-2 {
            width: 300px;
            height: 300px;
            background-color: #fff7ed;
            bottom: -50px;
            left: -50px;
            opacity: 0.6;
        }

/* Nested visual indicator */
        .nested-indicator {
            font-size: 12px;
            color: #94a3b8;
            margin-top: 10px;
            display: flex;
            align-items: center;
        }

</style>
</head>
<body>
<div class="slide-container">

<div class="bg-circle circle-1"></div>
<div class="bg-circle circle-2"></div>

<div class="header">
<div class="section-tag">PARTIE 1 : FONDAMENTAUX</div>
<h1 class="main-title">Les 3 Piliers Technologiques</h1>
<p class="text-gray-500 text-lg mt-2">De l'analyse de données à la création de contenu</p>
</div>

<div class="content-area">

<div class="tech-card card-ml">
<div class="icon-wrapper">
<i class="fas fa-cogs"></i>
</div>
<h3 class="card-title">Machine Learning<br/><span class="text-lg font-medium text-gray-500">(Apprentissage Auto)</span></h3>
<p class="card-desc">
                    La machine apprend des règles à partir de données historiques sans être explicitement programmée pour chaque situation.
                </p>
<div class="feature-tag">
<i class="fas fa-database mr-2"></i>Données structurées
                </div>
<div class="nested-indicator">
<span>Base de l'IA moderne</span>
</div>
</div>

<div class="arrow-container">
<i class="fas fa-chevron-right"></i>
</div>

<div class="tech-card card-dl">
<div class="icon-wrapper">
<i class="fas fa-network-wired"></i>
</div>
<h3 class="card-title">Deep Learning<br/><span class="text-lg font-medium text-gray-500">(Réseaux de Neurones)</span></h3>
<p class="card-desc">
                    Couches de neurones artificiels imitant le cerveau humain pour reconnaître des motifs complexes (images, sons).
                </p>
<div class="feature-tag">
<i class="fas fa-layer-group mr-2"></i>Patterns Complexes
                </div>
<div class="nested-indicator">
<i class="fas fa-level-up-alt mr-1"></i> Sous-ensemble du ML
                </div>
</div>

<div class="arrow-container">
<i class="fas fa-chevron-right"></i>
</div>

<div class="tech-card card-genai">
<div class="icon-wrapper">
<i class="fas fa-wand-magic-sparkles"></i>
</div>
<h3 class="card-title">NLP & GenAI<br/><span class="text-lg font-medium text-gray-500">(IA Générative)</span></h3>
<p class="card-desc">
                    Compréhension du langage naturel et capacité à <strong>générer</strong> du nouveau contenu (texte, images, code) de façon autonome.
                </p>
<div class="feature-tag">
<i class="fas fa-robot mr-2"></i>Créativité
                </div>
<div class="nested-indicator">
<i class="fas fa-level-up-alt mr-1"></i> Basé sur le Deep Learning
                </div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">8</div>
<div class="absolute bottom-0 left-0 w-full h-2 bg-gradient-to-r from-blue-400 to-orange-400" style="background: #e2e8f0;"> 
<div style="width: 33%; height: 100%; background-color: #3b82f6; float: left;"></div>
<div style="width: 33%; height: 100%; background-color: #1e3a8a; float: left;"></div>
<div style="width: 34%; height: 100%; background-color: #f97316; float: left;"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>L'IA dans notre quotidien</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: 'Roboto', sans-serif;
        background-color: #f3f4f6;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .slide-container {
        width: 1280px;
        height: 720px;
        background-color: #ffffff;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

/* Header */
    .header {
        padding: 40px 60px 10px 60px;
        position: relative;
        z-index: 10;
    }
    .section-tag {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #f97316;
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
    }
    .section-tag::before {
        content: '';
        display: block;
        width: 30px;
        height: 2px;
        background-color: #f97316;
        margin-right: 10px;
    }
    .main-title {
        font-size: 42px;
        font-weight: 900;
        color: #1e3a8a;
        line-height: 1.1;
    }
    .subtitle {
        font-size: 18px;
        color: #64748b;
        margin-top: 8px;
    }

/* Content Area - Grid */
    .content-area {
        flex: 1;
        padding: 30px 60px 50px 60px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 25px;
        z-index: 5;
    }

/* Cards */
    .info-card {
        background-color: #fff;
        border-radius: 12px;
        padding: 25px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        border: 1px solid #e2e8f0;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
        overflow: hidden;
    }

.info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        border-color: #cbd5e1;
    }

/* Top accent bar for cards */
    .info-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: transparent;
        transition: background-color 0.3s;
    }
    
    .card-blue:hover::before { background-color: #3b82f6; }
    .card-orange:hover::before { background-color: #f97316; }
    .card-dark:hover::before { background-color: #1e3a8a; }

/* Icons */
    .icon-box {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 15px;
        transition: all 0.3s ease;
    }

.icon-blue { background-color: #eff6ff; color: #3b82f6; }
    .icon-orange { background-color: #fff7ed; color: #f97316; }
    .icon-dark { background-color: #e0e7ff; color: #1e3a8a; }
    .icon-green { background-color: #ecfdf5; color: #10b981; }
    .icon-purple { background-color: #f3e8ff; color: #a855f7; }
    .icon-red { background-color: #fef2f2; color: #ef4444; }

.card-title {
        font-size: 20px;
        font-weight: 700;
        color: #1e3a8a;
        margin-bottom: 8px;
    }

.card-text {
        font-size: 15px;
        color: #64748b;
        line-height: 1.5;
    }

/* Background Pattern */
    .bg-pattern {
        position: absolute;
        top: 0;
        right: 0;
        width: 40%;
        height: 100%;
        background-color: #f8fafc;
        clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
        z-index: 0;
    }

/* Number badge */
    .number-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 40px;
        font-weight: 900;
        color: #f1f5f9;
        line-height: 1;
        z-index: 0;
    }

</style>
</head>
<body>
<div class="slide-container">

<div class="bg-pattern"></div>

<div class="header">
<div class="section-tag">PARTIE 1 : FONDAMENTAUX</div>
<h1 class="main-title">L'IA dans notre quotidien</h1>
<p class="subtitle">Des technologies souvent invisibles mais omniprésentes</p>
</div>

<div class="content-area">

<div class="info-card card-red">
<div class="number-badge">01</div>
<div class="icon-box icon-red" style="z-index: 1;">
<i class="fas fa-play"></i>
</div>
<div style="z-index: 1;">
<h3 class="card-title">Recommandations</h3>
<p class="card-text">
<strong>Netflix & YouTube</strong> analysent votre historique pour prédire et suggérer le contenu qui vous gardera captif.
                </p>
</div>
</div>

<div class="info-card card-blue">
<div class="number-badge">02</div>
<div class="icon-box icon-blue" style="z-index: 1;">
<i class="fas fa-location-arrow"></i>
</div>
<div style="z-index: 1;">
<h3 class="card-title">Navigation GPS</h3>
<p class="card-text">
<strong>Waze & Maps</strong> calculent en temps réel le trajet optimal en prédisant l'évolution du trafic routier.
                </p>
</div>
</div>

<div class="info-card card-dark">
<div class="number-badge">03</div>
<div class="icon-box icon-dark" style="z-index: 1;">
<i class="fas fa-language"></i>
</div>
<div style="z-index: 1;">
<h3 class="card-title">Traduction</h3>
<p class="card-text">
<strong>Google Translate</strong> utilise des réseaux de neurones pour traduire instantanément du texte ou de la voix.
                </p>
</div>
</div>

<div class="info-card card-orange">
<div class="number-badge">04</div>
<div class="icon-box icon-orange" style="z-index: 1;">
<i class="fas fa-shield-alt"></i>
</div>
<div style="z-index: 1;">
<h3 class="card-title">Filtrage Spam</h3>
<p class="card-text">
                    Votre <strong>boîte mail</strong> (Gmail, Outlook) détecte et isole automatiquement 99% des messages malveillants.
                </p>
</div>
</div>

<div class="info-card card-green">
<div class="number-badge">05</div>
<div class="icon-box icon-green" style="z-index: 1;">
<i class="fas fa-mobile-alt"></i>
</div>
<div style="z-index: 1;">
<h3 class="card-title">Face ID</h3>
<p class="card-text">
                    La reconnaissance faciale 3D déverrouille votre téléphone en analysant la géométrie unique de votre visage.
                </p>
</div>
</div>

<div class="info-card card-purple">
<div class="number-badge">06</div>
<div class="icon-box icon-purple" style="z-index: 1;">
<i class="fas fa-microphone"></i>
</div>
<div style="z-index: 1;">
<h3 class="card-title">Assistants Vocaux</h3>
<p class="card-text">
<strong>Siri & Alexa</strong> utilisent le NLP (traitement du langage) pour comprendre vos questions et y répondre.
                </p>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">9</div>
<div class="absolute bottom-0 left-0 w-full h-2 bg-blue-900"></div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Transition : L'IA arrive dans le monde professionnel</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #1e3a8a; /* Deep Blue Background */
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            color: white;
        }

/* SVG Background Pattern */
        .bg-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.3;
        }

/* Content Wrapper */
        .content-wrapper {
            z-index: 10;
            text-align: center;
            max-width: 900px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

/* Transition Icon */
        .transition-icon-container {
            position: relative;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.icon-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: #60a5fa; /* Light Blue */
            border: 2px solid rgba(255, 255, 255, 0.2);
            position: relative;
            z-index: 2;
        }
        
        .icon-arrow {
            font-size: 30px;
            color: #f97316; /* Orange */
            margin: 0 30px;
        }

/* Typography */
        .main-title {
            font-size: 48px;
            font-weight: 900;
            margin-bottom: 15px;
            line-height: 1.2;
        }

.subtitle {
            font-size: 24px;
            font-weight: 300;
            color: #cbd5e1;
            margin-bottom: 50px;
        }

/* Logic Flow Box */
        .logic-flow {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.05);
            padding: 20px 50px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 50px;
        }

.logic-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .logic-label {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 8px;
            color: #93c5fd;
            font-weight: 700;
        }
        .logic-icon {
            font-size: 28px;
            color: white;
        }

.logic-arrow {
            margin: 0 40px;
            color: #64748b;
            font-size: 20px;
        }

/* Impact Area */
        .impact-area {
            display: flex;
            gap: 20px;
            margin-bottom: 50px;
        }
        .impact-tag {
            padding: 8px 20px;
            background-color: rgba(59, 130, 246, 0.2);
            border: 1px solid rgba(59, 130, 246, 0.4);
            border-radius: 8px;
            font-weight: 500;
            color: #bfdbfe;
            display: flex;
            align-items: center;
        }

/* Key Insight Box */
        .insight-box {
            background-color: #fff7ed;
            color: #9a3412; /* Dark orange text */
            padding: 20px 40px;
            border-radius: 12px;
            border-left: 8px solid #f97316;
            display: flex;
            align-items: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
        
        .insight-icon {
            font-size: 24px;
            margin-right: 20px;
            color: #f97316;
        }
        
        .insight-text {
            font-size: 20px;
            font-weight: 700;
        }

</style>
</head>
<body>
<div class="slide-container">

<svg class="bg-grid" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern height="40" id="grid" patternunits="userSpaceOnUse" width="40">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"></path>
</pattern>
</defs>
<rect fill="url(#grid)" height="100%" width="100%"></rect>
</svg>

<div class="content-wrapper">

<div class="transition-icon-container">
<div class="icon-circle">
<i class="fas fa-user"></i>
</div>
<div class="icon-arrow">
<i class="fas fa-arrow-right"></i>
</div>
<div class="icon-circle" style="background-color: rgba(249, 115, 22, 0.2); color: #f97316; border-color: rgba(249, 115, 22, 0.4);">
<i class="fas fa-briefcase"></i>
</div>
</div>

<h1 class="main-title">De la vie personnelle<br/>au monde professionnel</h1>
<p class="subtitle">Même logique, impact démultiplié</p>

<div class="logic-flow">
<div class="logic-item">
<i class="fas fa-database logic-icon"></i>
<span class="logic-label">Données</span>
</div>
<div class="logic-arrow"><i class="fas fa-long-arrow-alt-right"></i></div>
<div class="logic-item">
<i class="fas fa-cogs logic-icon"></i>
<span class="logic-label">Modèles</span>
</div>
<div class="logic-arrow"><i class="fas fa-long-arrow-alt-right"></i></div>
<div class="logic-item">
<i class="fas fa-chart-line logic-icon"></i>
<span class="logic-label">Décisions</span>
</div>
</div>

<div class="impact-area">
<div class="impact-tag"><i class="fas fa-bullhorn mr-2"></i>Marketing</div>
<div class="impact-tag"><i class="fas fa-file-invoice-dollar mr-2"></i>Comptabilité</div>
<div class="impact-tag"><i class="fas fa-university mr-2"></i>Finance</div>
</div>

<div class="insight-box">
<div class="insight-icon">
<i class="fas fa-key"></i>
</div>
<div class="insight-text">
                    Compétence clé : savoir poser les bonnes questions à l'IA
                </div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-blue-300 text-sm">10</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Révolution du Marketing</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Header */
        .header {
            padding: 40px 60px 20px 60px;
            z-index: 10;
        }
        .section-tag {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #f97316;
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .section-tag::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background-color: #f97316;
            margin-right: 10px;
        }
        .main-title {
            font-size: 42px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1.1;
        }

/* Split Content */
        .split-wrapper {
            flex: 1;
            display: flex;
            position: relative;
            padding: 20px 60px 40px 60px;
            gap: 40px;
        }

/* Panels */
        .panel {
            flex: 1;
            border-radius: 20px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            transition: all 0.3s ease;
        }

/* Left Panel - Old Way */
        .panel-left {
            background-color: #f1f5f9;
            border: 2px solid #e2e8f0;
            color: #64748b;
        }
        
        /* Right Panel - New Way */
        .panel-right {
            background-color: #eff6ff;
            border: 2px solid #3b82f6;
            color: #1e3a8a;
            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15);
        }

/* Panel Header */
        .panel-header {
            text-align: center;
            margin-bottom: 30px;
            width: 100%;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding-bottom: 20px;
        }
        
        .panel-title {
            font-size: 28px;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        
        .panel-subtitle {
            font-size: 16px;
            font-weight: 500;
            opacity: 0.7;
        }

/* Icon Circle */
        .icon-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            margin-bottom: 25px;
        }
        
        .panel-left .icon-circle {
            background-color: #e2e8f0;
            color: #94a3b8;
        }
        
        .panel-right .icon-circle {
            background-color: #3b82f6;
            color: white;
            box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
        }

/* List Items */
        .feature-list {
            width: 100%;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 12px;
            background-color: rgba(255,255,255,0.5);
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
        }
        
        .panel-right .feature-item {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

.feature-icon {
            margin-right: 15px;
            width: 24px;
            text-align: center;
        }

/* Transformation Arrow */
        .transform-arrow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            width: 60px;
            height: 60px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #f97316;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            border: 4px solid #f97316;
        }

/* Bottom Gains Bar */
        .gains-bar {
            margin: 0 60px 30px 60px;
            background-color: #1e3a8a;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: white;
        }
        
        .gain-item {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: 700;
        }
        
        .gain-icon {
            color: #f97316;
            margin-right: 12px;
            font-size: 24px;
        }
        
        .gain-label {
            display: flex;
            flex-direction: column;
        }
        
        .gain-sub {
            font-size: 12px;
            color: #93c5fd;
            font-weight: 400;
            text-transform: uppercase;
        }

</style>
</head>
<body>
<div class="slide-container">

<div class="header">
<div class="section-tag">PARTIE 2 : IA ET MARKETING</div>
<h1 class="main-title">Révolution du Marketing à l'ère de l'IA</h1>
</div>

<div class="split-wrapper">

<div class="transform-arrow">
<i class="fas fa-arrow-right"></i>
</div>

<div class="panel panel-left">
<div class="panel-header">
<h2 class="panel-title">AVANT L'IA</h2>
<p class="panel-subtitle">Marketing Traditionnel</p>
</div>
<div class="icon-circle">
<i class="fas fa-bullhorn"></i>
</div>
<div class="feature-list">
<div class="feature-item">
<i class="fas fa-users feature-icon"></i>
<p>Marketing de masse (One-size-fits-all)</p>
</div>
<div class="feature-item">
<i class="fas fa-calendar-alt feature-icon"></i>
<p>Campagnes statiques & planifiées</p>
</div>
<div class="feature-item">
<i class="fas fa-calculator feature-icon"></i>
<p>Analyse manuelle (a posteriori)</p>
</div>
<div class="feature-item">
<i class="fas fa-eye-slash feature-icon"></i>
<p>Ciblage approximatif</p>
</div>
</div>
</div>

<div class="panel panel-right">
<div class="panel-header">
<h2 class="panel-title">AVEC L'IA</h2>
<p class="panel-subtitle">Marketing Augmenté</p>
</div>
<div class="icon-circle">
<i class="fas fa-brain"></i>
</div>
<div class="feature-list">
<div class="feature-item">
<i class="fas fa-fingerprint feature-icon text-blue-500"></i>
<p><strong>Hyper-personnalisation</strong> à grande échelle</p>
</div>
<div class="feature-item">
<i class="fas fa-sync-alt feature-icon text-blue-500"></i>
<p>Optimisation & Tests en <strong>temps réel</strong></p>
</div>
<div class="feature-item">
<i class="fas fa-chart-line feature-icon text-blue-500"></i>
<p><strong>Apprentissage continu</strong> (Machine Learning)</p>
</div>
<div class="feature-item">
<i class="fas fa-bullseye feature-icon text-blue-500"></i>
<p>Ciblage prédictif précis</p>
</div>
</div>
</div>
</div>

<div class="gains-bar">
<div class="gain-item">
<i class="fas fa-crosshairs gain-icon"></i>
<div class="gain-label">
<span class="gain-sub">Gain Clé 1</span>
<span>Pertinence Accrue</span>
</div>
</div>
<div class="gain-item">
<i class="fas fa-bolt gain-icon"></i>
<div class="gain-label">
<span class="gain-sub">Gain Clé 2</span>
<span>Vitesse d'Exécution</span>
</div>
</div>
<div class="gain-item">
<i class="fas fa-chart-pie gain-icon"></i>
<div class="gain-label">
<span class="gain-sub">Gain Clé 3</span>
<span>ROI Maximisé</span>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">11</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Personnalisation et Segmentation Client</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Flow Content */
        .flow-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 60px 40px 60px;
            position: relative;
        }

.process-wrapper {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            width: 100%;
            position: relative;
            margin-bottom: 50px;
        }

/* Connecting Line Background */
        .connecting-line {
            position: absolute;
            top: 50px; /* Half of circle height */
            left: 100px;
            right: 100px;
            height: 4px;
            background-color: #e2e8f0;
            z-index: 0;
        }

/* Step Item */
        .step-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 200px;
            position: relative;
            z-index: 1;
            margin: 0 10px;
        }

/* Circle Icon */
        .step-circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: white;
            border: 4px solid;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            margin-bottom: 20px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

.step-item:hover .step-circle {
            transform: translateY(-5px);
        }

.step-1 .step-circle { border-color: #93c5fd; color: #3b82f6; } /* Light Blue */
        .step-2 .step-circle { border-color: #60a5fa; color: #2563eb; } /* Blue */
        .step-3 .step-circle { border-color: #3b82f6; color: #1d4ed8; } /* Darker Blue */
        .step-4 .step-circle { border-color: #2563eb; color: #1e40af; } /* Deep Blue */
        .step-5 .step-circle { border-color: #f97316; color: #c2410c; background-color: #fff7ed; } /* Orange */

/* Number Badge */
        .step-number {
            position: absolute;
            top: 0;
            right: 40px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #1e3a8a;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
            border: 2px solid white;
        }
        .step-5 .step-number { background-color: #ea580c; }

/* Text Content */
        .step-content {
            text-align: center;
            background-color: white;
            padding: 15px;
            border-radius: 10px;
            width: 100%;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            border: 1px solid #f1f5f9;
        }

.step-title {
            font-size: 16px;
            font-weight: 700;
            color: #1e3a8a;
            margin-bottom: 5px;
            text-transform: uppercase;
        }

.step-desc {
            font-size: 14px;
            color: #64748b;
            line-height: 1.4;
        }

/* Arrow Indicators */
        .arrow-indicator {
            position: absolute;
            top: 42px;
            font-size: 20px;
            color: #cbd5e1;
            z-index: 2;
        }

/* Examples Box */
        .examples-container {
            background-color: #eff6ff;
            border-radius: 12px;
            padding: 20px 40px;
            display: flex;
            align-items: center;
            width: 90%;
            border-left: 6px solid #3b82f6;
        }

.examples-header {
            font-size: 18px;
            font-weight: 800;
            color: #1e3a8a;
            margin-right: 40px;
            white-space: nowrap;
            display: flex;
            align-items: center;
        }
        
        .tags-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

.example-tag {
            background-color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 15px;
            font-weight: 500;
            color: #475569;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
        }

.example-tag i {
            margin-right: 8px;
            color: #f97316;
        }

</style>
</head>
<body>
<div class="slide-container">

<div class="header">
<div class="section-tag">PARTIE 2 : IA ET MARKETING</div>
<h1 class="main-title">Personnalisation et Segmentation Client</h1>
<p class="text-gray-500 text-lg mt-2">Le processus de transformation de la donnée brute en action ciblée</p>
</div>

<div class="flow-container">
<div class="process-wrapper">

<div class="connecting-line"></div>

<div class="arrow-indicator" style="left: 21%;"> <i class="fas fa-chevron-right"></i> </div>
<div class="arrow-indicator" style="left: 41%;"> <i class="fas fa-chevron-right"></i> </div>
<div class="arrow-indicator" style="left: 60%;"> <i class="fas fa-chevron-right"></i> </div>
<div class="arrow-indicator" style="left: 80%;"> <i class="fas fa-chevron-right"></i> </div>

<div class="step-item step-1">
<div class="step-circle">
<i class="fas fa-database"></i>
<div class="step-number">1</div>
</div>
<div class="step-content">
<h3 class="step-title">Collecte de<br/>Données</h3>
<p class="step-desc">Site web, CRM, App mobile, IoT</p>
</div>
</div>

<div class="step-item step-2">
<div class="step-circle">
<i class="fas fa-microscope"></i>
<div class="step-number">2</div>
</div>
<div class="step-content">
<h3 class="step-title">Analyse<br/>Comportementale</h3>
<p class="step-desc">Détection de patterns et habitudes</p>
</div>
</div>

<div class="step-item step-3">
<div class="step-circle">
<i class="fas fa-project-diagram"></i>
<div class="step-number">3</div>
</div>
<div class="step-content">
<h3 class="step-title">Clustering<br/>Intelligent</h3>
<p class="step-desc">Regroupement automatique (ML)</p>
</div>
</div>

<div class="step-item step-4">
<div class="step-circle">
<i class="fas fa-users-cog"></i>
<div class="step-number">4</div>
</div>
<div class="step-content">
<h3 class="step-title">Segments<br/>Dynamiques</h3>
<p class="step-desc">Mise à jour en temps réel</p>
</div>
</div>

<div class="step-item step-5">
<div class="step-circle">
<i class="fas fa-rocket"></i>
<div class="step-number">5</div>
</div>
<div class="step-content">
<h3 class="step-title">Activation<br/>Omnicanale</h3>
<p class="step-desc">Email, Ads, Push, Site web</p>
</div>
</div>
</div>

<div class="examples-container">
<div class="examples-header">
<i class="fas fa-lightbulb text-yellow-500 mr-3 text-2xl"></i>
                    EXEMPLES
                </div>
<div class="tags-wrapper">
<div class="example-tag">
<i class="fas fa-crown"></i> Valeur Client (LTV)
                    </div>
<div class="example-tag">
<i class="fas fa-shopping-cart"></i> Propension d'achat
                    </div>
<div class="example-tag">
<i class="fas fa-door-open"></i> Risque de Churn (Départ)
                    </div>
<div class="example-tag">
<i class="fas fa-percent"></i> Sensibilité au Prix
                    </div>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">12</div>
<div class="absolute bottom-0 left-0 w-full h-2">
<div style="width: 33%; height: 100%; background-color: #1e3a8a; float: left;"></div>
<div style="width: 33%; height: 100%; background-color: #3b82f6; float: left;"></div>
<div style="width: 34%; height: 100%; background-color: #f97316; float: left;"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Ciblage Publicitaire Intelligent</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Header */
        .header {
            padding: 30px 60px 10px 60px;
            z-index: 10;
            flex-shrink: 0;
        }
        .section-tag {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #f97316;
            font-weight: 700;
            margin-bottom: 5px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .section-tag::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background-color: #f97316;
            margin-right: 10px;
        }
        .main-title {
            font-size: 38px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1.1;
        }

/* Main Content Layout */
        .content-wrapper {
            display: flex;
            flex: 1;
            padding: 20px 60px 40px 60px;
            gap: 50px;
            overflow: hidden;
        }

/* Timeline Section */
        .timeline-container {
            flex: 2;
            position: relative;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

/* Vertical Line */
        .timeline-line {
            position: absolute;
            left: 44px; /* Align with icon center (24px padding + 20px half icon) */
            top: 25px;
            bottom: 40px;
            width: 3px;
            background-color: #e2e8f0;
            z-index: 0;
        }

/* Timeline Item */
        .timeline-item {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
            margin-bottom: 15px;
            background-color: white;
            border-radius: 12px;
            padding: 10px 15px 10px 0;
            transition: transform 0.2s ease;
        }
        
        .timeline-item:last-child {
            margin-bottom: 0;
        }

.timeline-item:hover {
            transform: translateX(10px);
        }

/* Icon Badge */
        .item-badge {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: white;
            margin-right: 25px;
            border: 4px solid white;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            flex-shrink: 0;
        }

.badge-1 { background-color: #93c5fd; }
        .badge-2 { background-color: #60a5fa; }
        .badge-3 { background-color: #3b82f6; }
        .badge-4 { background-color: #2563eb; }
        .badge-5 { background-color: #1d4ed8; }

/* Text Content */
        .item-content {
            background-color: #f8fafc;
            padding: 12px 20px;
            border-radius: 8px;
            border-left: 4px solid transparent;
            width: 100%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

.item-content h3 {
            font-size: 18px;
            font-weight: 700;
            color: #1e3a8a;
            margin: 0 0 4px 0;
        }

.item-content p {
            font-size: 14px;
            color: #64748b;
            margin: 0;
            line-height: 1.4;
        }

.timeline-item:hover .item-content {
            background-color: #eff6ff;
            border-left-color: #3b82f6;
        }

/* Stats Section */
        .stats-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 30px;
        }

.stat-card {
            background-color: white;
            border-radius: 16px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            position: relative;
            overflow: hidden;
        }

.stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
        }

.card-warning::before { background-color: #f97316; }
        .card-success::before { background-color: #10b981; }

.stat-value {
            font-size: 48px;
            font-weight: 900;
            margin-bottom: 5px;
            display: block;
        }

.text-orange { color: #ea580c; }
        .text-green { color: #059669; }

.stat-label {
            font-size: 18px;
            font-weight: 500;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .stat-icon {
            font-size: 24px;
            margin-bottom: 10px;
            display: inline-block;
            padding: 10px;
            border-radius: 50%;
        }

.icon-bg-orange { background-color: #fff7ed; color: #f97316; }
        .icon-bg-green { background-color: #ecfdf5; color: #10b981; }

/* Process Arrow decoration */
        .process-arrow {
            position: absolute;
            right: -25px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: #cbd5e1;
            z-index: 2;
        }
        
        .illustration-bg {
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 300px;
            height: 300px;
            background-color: #eff6ff;
            border-radius: 50%;
            z-index: 0;
            opacity: 0.5;
        }

</style>
</head>
<body>
<div class="slide-container">

<div class="header">
<div class="section-tag">PARTIE 2 : IA ET MARKETING</div>
<h1 class="main-title">Ciblage Publicitaire Intelligent</h1>
</div>

<div class="content-wrapper">

<div class="timeline-container">
<div class="timeline-line"></div>

<div class="timeline-item">
<div class="item-badge badge-1">
<i class="fas fa-user-friends"></i>
</div>
<div class="item-content">
<h3>1. Lookalike Modeling</h3>
<p>Identification de "jumeaux statistiques" basés sur vos meilleurs clients actuels.</p>
</div>
</div>

<div class="timeline-item">
<div class="item-badge badge-2">
<i class="fas fa-magnet"></i>
</div>
<div class="item-content">
<h3>2. Uplift Modeling</h3>
<p>Cibler uniquement les clients incrémentaux (ceux qui n'auraient pas acheté sans pub).</p>
</div>
</div>

<div class="timeline-item">
<div class="item-badge badge-3">
<i class="fas fa-chart-line"></i>
</div>
<div class="item-content">
<h3>3. Audiences Prédictives</h3>
<p>Scoring de probabilité de conversion pour prioriser les budgets.</p>
</div>
</div>

<div class="timeline-item">
<div class="item-badge badge-4">
<i class="fas fa-gavel"></i>
</div>
<div class="item-content">
<h3>4. Real-Time Bidding (RTB)</h3>
<p>Optimisation des enchères publicitaires en millisecondes par l'IA.</p>
</div>
</div>

<div class="timeline-item">
<div class="item-badge badge-5">
<i class="fas fa-sync-alt"></i>
</div>
<div class="item-content">
<h3>5. Mesure & Apprentissage</h3>
<p>Boucle de rétroaction continue pour affiner les modèles.</p>
</div>
</div>
</div>

<div class="stats-container">
<div class="illustration-bg"></div>
<div class="stat-card card-warning" style="z-index: 2;">
<div class="stat-icon icon-bg-orange">
<i class="fas fa-trash-alt"></i>
</div>
<span class="stat-value text-orange">-40%</span>
<span class="stat-label">de Gaspillage<br/><span style="font-size:14px; opacity:0.7;">(Budget publicitaire)</span></span>
</div>
<div class="stat-card card-success" style="z-index: 2;">
<div class="stat-icon icon-bg-green">
<i class="fas fa-rocket"></i>
</div>
<span class="stat-value text-green">+60%</span>
<span class="stat-label">de Conversions<br/><span style="font-size:14px; opacity:0.7;">(Ventes générées)</span></span>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">13</div>
<div class="absolute bottom-0 left-0 w-full h-2">
<div style="width: 33%; height: 100%; background-color: #1e3a8a; float: left;"></div>
<div style="width: 33%; height: 100%; background-color: #3b82f6; float: left;"></div>
<div style="width: 34%; height: 100%; background-color: #f97316; float: left;"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Chatbots et Service Client Automatisé</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: 'Roboto', sans-serif;
        background-color: #f3f4f6;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .slide-container {
        width: 1280px;
        height: 720px;
        background-color: #ffffff;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

/* Header */
    .header {
        padding: 40px 60px 20px 60px;
        z-index: 10;
    }
    .section-tag {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #f97316;
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        align-items: center;
    }
    .section-tag::before {
        content: '';
        display: block;
        width: 30px;
        height: 2px;
        background-color: #f97316;
        margin-right: 10px;
    }
    .main-title {
        font-size: 42px;
        font-weight: 900;
        color: #1e3a8a;
        line-height: 1.1;
    }

/* Content Layout */
    .content-wrapper {
        display: flex;
        flex: 1;
        padding: 20px 60px 50px 60px;
        gap: 60px;
        align-items: center;
    }

/* Left: Chat Interface */
    .chat-container {
        flex: 1;
        background-color: #f8fafc;
        border-radius: 24px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        height: 480px;
        max-width: 450px;
        overflow: hidden;
        position: relative;
    }

.chat-header {
        background-color: #1e3a8a;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        color: white;
    }

.bot-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #3b82f6;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        border: 2px solid white;
    }

.chat-body {
        flex: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        background-color: #fff;
    }

.message {
        max-width: 80%;
        padding: 12px 16px;
        border-radius: 18px;
        font-size: 14px;
        line-height: 1.4;
        position: relative;
        animation: fadeIn 0.5s ease forwards;
    }

@keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

.msg-bot {
        background-color: #eff6ff;
        color: #1e3a8a;
        align-self: flex-start;
        border-bottom-left-radius: 4px;
    }

.msg-user {
        background-color: #3b82f6;
        color: white;
        align-self: flex-end;
        border-bottom-right-radius: 4px;
    }

.msg-system {
        align-self: center;
        background-color: #f1f5f9;
        color: #64748b;
        font-size: 12px;
        padding: 6px 12px;
        border-radius: 12px;
        margin: 10px 0;
        font-weight: 500;
    }

.typing-indicator {
        display: flex;
        gap: 4px;
        padding: 12px 16px;
        background-color: #eff6ff;
        border-radius: 18px;
        border-bottom-left-radius: 4px;
        align-self: flex-start;
        width: fit-content;
    }
    .dot {
        width: 6px;
        height: 6px;
        background-color: #93c5fd;
        border-radius: 50%;
    }

/* Right: Features & Stats */
    .info-container {
        flex: 1.2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 480px;
    }

.features-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

.feature-item {
        display: flex;
        align-items: flex-start;
    }

.feature-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background-color: #fff7ed;
        color: #f97316;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-right: 20px;
        flex-shrink: 0;
    }

.feature-content h3 {
        font-size: 18px;
        font-weight: 700;
        color: #1e3a8a;
        margin: 0 0 5px 0;
    }

.feature-content p {
        font-size: 15px;
        color: #64748b;
        margin: 0;
    }

/* Stats Cards */
    .stats-row {
        display: flex;
        gap: 20px;
        margin-top: 20px;
    }

.stat-box {
        flex: 1;
        background-color: #1e3a8a;
        border-radius: 16px;
        padding: 20px;
        color: white;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
    }
    
    .stat-box.orange {
        background-color: #f97316;
    }

.stat-number {
        font-size: 42px;
        font-weight: 900;
        line-height: 1;
        margin-right: 15px;
    }
    
    .stat-desc {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        opacity: 0.9;
    }

.stat-bg-icon {
        position: absolute;
        right: -10px;
        bottom: -10px;
        font-size: 60px;
        opacity: 0.1;
    }

</style>
</head>
<body>
<div class="slide-container">

<div class="header">
<div class="section-tag">PARTIE 2 : IA ET MARKETING</div>
<h1 class="main-title">Chatbots et Service Client Automatisé</h1>
</div>

<div class="content-wrapper">

<div class="chat-container">
<div class="chat-header">
<div class="bot-avatar">
<i class="fas fa-robot text-white"></i>
</div>
<div>
<div class="font-bold">Assistant IA</div>
<div class="text-xs text-blue-200">En ligne • Réponse instantanée</div>
</div>
</div>
<div class="chat-body">
<div class="msg-bot">
                    Bonjour ! 👋 Je suis l'assistant virtuel de l'ISCAE. Comment puis-je vous aider aujourd'hui ?
                </div>
<div class="msg-user">
                    Je voudrais savoir quand sont les prochains examens de Marketing.
                </div>
<div class="msg-bot">
                    Les partiels de Marketing (L1-L3) sont prévus du <strong>15 au 20 Février</strong>.
                </div>
<div class="msg-user">
                    Merci ! Et pour les inscriptions ?
                </div>
<div class="msg-bot">
                    Je vous redirige vers le service scolarité pour une réponse précise.
                </div>
<div class="msg-system">
<i class="fas fa-share mr-1"></i> Transfert vers Agent Humain (Beirouk)
                </div>
<div class="msg-bot" style="background-color: #e0e7ff; color: #1e40af;">
<i class="fas fa-headset mr-2"></i>Bonjour, Beirouk à l'appareil. Je prends le relais !
                </div>
</div>
</div>

<div class="info-container">

<div class="features-list">
<div class="feature-item">
<div class="feature-icon-box">
<i class="fas fa-clock"></i>
</div>
<div class="feature-content">
<h3>Disponibilité 24/7 & Multilingue</h3>
<p>Réponses instantanées nuit et jour, en Français, Arabe, et Anglais sans délai d'attente.</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon-box">
<i class="fas fa-filter"></i>
</div>
<div class="feature-content">
<h3>Déviation Intelligente (Deflection)</h3>
<p>L'IA gère seule les questions récurrentes (FAQ), libérant du temps pour vos équipes.</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon-box">
<i class="fas fa-random"></i>
</div>
<div class="feature-content">
<h3>Transfert Fluide (Handover)</h3>
<p>Passage de relais transparent à un humain dès que la demande devient complexe ou sensible.</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon-box">
<i class="fas fa-brain"></i>
</div>
<div class="feature-content">
<h3>Apprentissage Continu</h3>
<p>L'IA analyse les conversations passées pour s'améliorer et affiner ses réponses.</p>
</div>
</div>
</div>

<div class="stats-row">
<div class="stat-box">
<i class="fas fa-check-circle stat-bg-icon"></i>
<div class="stat-number">80%</div>
<div class="stat-desc">des questions simples<br/>résolues automatiquement</div>
</div>
<div class="stat-box orange">
<i class="fas fa-stopwatch stat-bg-icon"></i>
<div class="stat-number">< 2s</div>
<div class="stat-desc">Temps de réponse<br/>moyen (vs 4h par email)</div>
</div>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">14</div>
<div class="absolute bottom-0 left-0 w-full h-2">
<div style="width: 33%; height: 100%; background-color: #1e3a8a; float: left;"></div>
<div style="width: 33%; height: 100%; background-color: #3b82f6; float: left;"></div>
<div style="width: 34%; height: 100%; background-color: #f97316; float: left;"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Analyse Prédictive des Comportements</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Header */
        .header {
            padding: 30px 60px 10px 60px;
            z-index: 10;
        }
        .section-tag {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #f97316;
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        .section-tag::before {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background-color: #f97316;
            margin-right: 10px;
        }
        .main-title {
            font-size: 40px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1.1;
        }

/* Content Wrapper */
        .content-wrapper {
            display: flex;
            flex: 1;
            padding: 20px 60px 40px 60px;
            gap: 50px;
        }

/* Left Column: Concepts */
        .concepts-column {
            flex: 0.4;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
        }

.concept-card {
            background-color: #f8fafc;
            border-radius: 12px;
            padding: 15px 20px;
            border-left: 5px solid transparent;
            transition: all 0.3s ease;
            display: flex;
            align-items: flex-start;
        }

.concept-card:hover {
            background-color: #eff6ff;
            transform: translateX(5px);
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        }

.concept-card.blue { border-left-color: #3b82f6; }
        .concept-card.orange { border-left-color: #f97316; }
        .concept-card.indigo { border-left-color: #4f46e5; }
        .concept-card.teal { border-left-color: #14b8a6; }

.concept-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 18px;
            flex-shrink: 0;
        }

.blue .concept-icon { background-color: #dbeafe; color: #2563eb; }
        .orange .concept-icon { background-color: #ffedd5; color: #ea580c; }
        .indigo .concept-icon { background-color: #e0e7ff; color: #4338ca; }
        .teal .concept-icon { background-color: #ccfbf1; color: #0f766e; }

.concept-text h3 {
            margin: 0 0 5px 0;
            color: #1e3a8a;
            font-size: 18px;
            font-weight: 700;
        }
        .concept-text p {
            margin: 0;
            color: #64748b;
            font-size: 14px;
            line-height: 1.3;
        }

/* Right Column: Chart & Stats */
        .visuals-column {
            flex: 0.6;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

/* Chart Container */
        .chart-container {
            background-color: white;
            border-radius: 16px;
            padding: 20px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
            flex: 2;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        
        .chart-title {
            font-size: 16px;
            font-weight: 700;
            color: #475569;
            margin-bottom: 15px;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

.chart-canvas-wrapper {
            flex: 1;
            position: relative;
            width: 100%;
            height: 100%;
        }

/* Stats Row */
        .stats-row {
            display: flex;
            gap: 20px;
            flex: 1;
        }

.stat-card {
            flex: 1;
            border-radius: 16px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        }

.stat-card.primary { background-color: #1e3a8a; }
        .stat-card.secondary { background-color: #f97316; }

.stat-info { z-index: 2; }
        .stat-value {
            font-size: 36px;
            font-weight: 900;
            display: block;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            font-weight: 500;
            opacity: 0.9;
            text-transform: uppercase;
        }
        
        .stat-icon-bg {
            position: absolute;
            right: -10px;
            bottom: -10px;
            font-size: 80px;
            opacity: 0.1;
            z-index: 1;
        }

</style>
</head>
<body>
<div class="slide-container">

<div class="header">
<div class="section-tag">PARTIE 2 : IA ET MARKETING</div>
<h1 class="main-title">Analyse prédictive des comportements</h1>
</div>

<div class="content-wrapper">

<div class="concepts-column">

<div class="concept-card blue">
<div class="concept-icon">
<i class="fas fa-bullseye"></i>
</div>
<div class="concept-text">
<h3>Propension à acheter</h3>
<p>Scoring de 0 à 100 calculé pour chaque client. Permet de concentrer les efforts sur les prospects "chauds".</p>
</div>
</div>

<div class="concept-card orange">
<div class="concept-icon">
<i class="fas fa-door-open"></i>
</div>
<div class="concept-text">
<h3>Prévision du Churn</h3>
<p>Détection des signaux faibles de départ (baisse d'activité, plaintes) pour retenir le client proactivement.</p>
</div>
</div>

<div class="concept-card indigo">
<div class="concept-icon">
<i class="fas fa-magic"></i>
</div>
<div class="concept-text">
<h3>Next Best Action</h3>
<p>Recommandation personnalisée automatique : le bon produit, au bon moment, sur le bon canal.</p>
</div>
</div>

<div class="concept-card teal">
<div class="concept-icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="concept-text">
<h3>Prévision de la demande</h3>
<p>Anticipation des volumes de ventes futurs pour optimiser les stocks et la logistique.</p>
</div>
</div>
</div>

<div class="visuals-column">

<div class="chart-container">
<h4 class="chart-title">Distribution des Scores de Propension (Exemple)</h4>
<div class="chart-canvas-wrapper">
<canvas id="predictionChart"></canvas>
</div>
</div>

<div class="stats-row">
<div class="stat-card primary">
<div class="stat-info">
<span class="stat-value">+35%</span>
<span class="stat-label">Taux de Conversion</span>
</div>
<i class="fas fa-check-circle stat-icon-bg"></i>
</div>
<div class="stat-card secondary">
<div class="stat-info">
<span class="stat-value">-50%</span>
<span class="stat-label">Taux de Churn</span>
</div>
<i class="fas fa-user-shield stat-icon-bg"></i>
</div>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">15</div>
<div class="absolute bottom-0 left-0 w-full h-2">
<div style="width: 33%; height: 100%; background-color: #1e3a8a; float: left;"></div>
<div style="width: 33%; height: 100%; background-color: #3b82f6; float: left;"></div>
<div style="width: 34%; height: 100%; background-color: #f97316; float: left;"></div>
</div>
</div>

<script>
        const ctx = document.getElementById('predictionChart').getContext('2d');
        
        // Gradient for the line
        const gradient = ctx.createLinearGradient(0, 0, 0, 300);
        gradient.addColorStop(0, 'rgba(59, 130, 246, 0.5)'); // Blue top
        gradient.addColorStop(1, 'rgba(59, 130, 246, 0.0)'); // Transparent bottom

// Gradient for High Potential zone
        const gradientHigh = ctx.createLinearGradient(0, 0, 0, 300);
        gradientHigh.addColorStop(0, 'rgba(249, 115, 22, 0.6)'); // Orange top
        gradientHigh.addColorStop(1, 'rgba(249, 115, 22, 0.1)');

new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'],
                datasets: [
                    {
                        label: 'Clients Standard',
                        data: [50, 80, 150, 200, 250, 220, 180, 100, 40, 10],
                        borderColor: '#3b82f6',
                        backgroundColor: gradient,
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 0
                    },
                    {
                        label: 'Haut Potentiel (Cible)',
                        data: [null, null, null, null, null, null, null, 100, 160, 120], // Overlay for visual effect
                        borderColor: '#f97316',
                        backgroundColor: gradientHigh,
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 4,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#f97316'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            boxWidth: 8,
                            font: { family: 'Roboto', size: 12 }
                        }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { borderDash: [5, 5], color: '#f1f5f9' },
                        ticks: { display: false } // Hide Y numbers for cleaner look
                    },
                    x: {
                        grid: { display: false },
                        ticks: { font: { size: 11 }, color: '#94a3b8' }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Content Marketing et IA</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Timeline Section */
        .timeline-container {
            flex: 2;
            position: relative;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Distribute items evenly */
        }

/* Vertical Line */
        .timeline-line {
            position: absolute;
            left: 44px; /* Align with icon center */
            top: 25px;
            bottom: 40px;
            width: 3px;
            background-color: #e2e8f0;
            z-index: 0;
        }

/* Timeline Item */
        .timeline-item {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1;
            background-color: white;
            border-radius: 12px;
            padding: 5px 15px 5px 0; /* Reduced padding for 5 items fit */
            transition: transform 0.2s ease;
        }
        
        .timeline-item:hover {
            transform: translateX(10px);
        }

/* Text Content */
        .item-content {
            background-color: #f8fafc;
            padding: 10px 20px;
            border-radius: 8px;
            border-left: 4px solid transparent;
            width: 100%;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

.item-content h3 {
            font-size: 17px;
            font-weight: 700;
            color: #1e3a8a;
            margin: 0 0 2px 0;
        }

.item-content p {
            font-size: 13px;
            color: #64748b;
            margin: 0;
            line-height: 1.3;
        }

.timeline-item:hover .item-content {
            background-color: #eff6ff;
            border-left-color: #3b82f6;
        }

/* Stats Section */
        .stats-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 25px;
        }

.stat-card {
            background-color: white;
            border-radius: 16px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            position: relative;
            overflow: hidden;
        }

.stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
        }

.card-blue::before { background-color: #3b82f6; }
        .card-orange::before { background-color: #f97316; }

.stat-value {
            font-size: 42px;
            font-weight: 900;
            margin-bottom: 5px;
            display: block;
        }

.text-blue { color: #2563eb; }
        .text-orange { color: #ea580c; }

.stat-label {
            font-size: 16px;
            font-weight: 500;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .stat-icon {
            font-size: 22px;
            margin-bottom: 8px;
            display: inline-block;
            padding: 10px;
            border-radius: 50%;
        }

.icon-bg-blue { background-color: #eff6ff; color: #2563eb; }
        .icon-bg-orange { background-color: #fff7ed; color: #f97316; }

.illustration-bg {
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 300px;
            height: 300px;
            background-color: #eff6ff;
            border-radius: 50%;
            z-index: 0;
            opacity: 0.5;
        }

</style>
</head>
<body>
<div class="slide-container">

<div class="header">
<div class="section-tag">PARTIE 2 : IA ET MARKETING</div>
<h1 class="main-title">Content Marketing et Génération de Contenu</h1>
</div>

<div class="content-wrapper">

<div class="timeline-container">
<div class="timeline-line"></div>

<div class="timeline-item">
<div class="item-badge badge-1">
<i class="fas fa-search-plus"></i>
</div>
<div class="item-content">
<h3>1. Briefs Automatisés</h3>
<p>Analyse des mots-clés, des tendances et de la concurrence pour identifier les sujets porteurs.</p>
</div>
</div>

<div class="timeline-item">
<div class="item-badge badge-2">
<i class="fas fa-magic"></i>
</div>
<div class="item-content">
<h3>2. Génération de Contenus</h3>
<p>Création assistée de textes, visuels et scripts vidéo via des outils d'IA générative.</p>
</div>
</div>

<div class="timeline-item">
<div class="item-badge badge-3">
<i class="fas fa-vials"></i>
</div>
<div class="item-content">
<h3>3. A/B Testing Créatif</h3>
<p>Test automatique de multiples variantes (titres, images) pour maximiser l'engagement.</p>
</div>
</div>

<div class="timeline-item">
<div class="item-badge badge-4">
<i class="fas fa-chart-line"></i>
</div>
<div class="item-content">
<h3>4. Optimisation Continue</h3>
<p>L'algorithme apprend des performances passées pour affiner les futures créations.</p>
</div>
</div>

<div class="timeline-item">
<div class="item-badge badge-5">
<i class="fas fa-shield-alt"></i>
</div>
<div class="item-content">
<h3>5. Gouvernance & Sécurité</h3>
<p>Contrôle du ton de la marque (Tone of Voice) et respect de la "Brand Safety".</p>
</div>
</div>
</div>

<div class="stats-container">
<div class="illustration-bg"></div>
<div class="stat-card card-blue" style="z-index: 2;">
<div class="stat-icon icon-bg-blue">
<i class="fas fa-tachometer-alt"></i>
</div>
<span class="stat-value text-blue">5x</span>
<span class="stat-label">Plus Rapide<br/><span style="font-size:13px; opacity:0.7;">(Vitesse de production)</span></span>
</div>
<div class="stat-card card-orange" style="z-index: 2;">
<div class="stat-icon icon-bg-orange">
<i class="fas fa-layer-group"></i>
</div>
<span class="stat-value text-orange">∞</span>
<span class="stat-label">Scalabilité<br/><span style="font-size:13px; opacity:0.7;">(Variantes personnalisées)</span></span>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">16</div>
<div class="absolute bottom-0 left-0 w-full h-2">
<div style="width: 33%; height: 100%; background-color: #1e3a8a; float: left;"></div>
<div style="width: 33%; height: 100%; background-color: #3b82f6; float: left;"></div>
<div style="width: 34%; height: 100%; background-color: #f97316; float: left;"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Social Media Marketing et IA</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Content Wrapper */
        .content-wrapper {
            display: flex;
            flex: 1;
            padding: 20px 60px 40px 60px;
            position: relative;
        }

/* Diagram Section */
        .diagram-container {
            flex: 2.2;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

/* Ecosystem Nodes */
        .central-hub {
            width: 180px;
            height: 180px;
            background-color: #1e3a8a;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            z-index: 10;
            box-shadow: 0 0 0 10px rgba(30, 58, 138, 0.1), 0 10px 25px rgba(0,0,0,0.2);
            text-align: center;
            padding: 20px;
            position: relative;
        }

.central-hub i {
            font-size: 40px;
            margin-bottom: 10px;
            color: #60a5fa;
        }

.central-hub h3 {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.2;
            margin: 0;
        }

/* Satellite Nodes */
        .satellite {
            position: absolute;
            width: 240px;
            background-color: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            border: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            z-index: 5;
            transition: transform 0.3s ease;
        }

.satellite:hover {
            transform: scale(1.05);
            border-color: #3b82f6;
            z-index: 20;
        }

.satellite-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            margin-right: 15px;
            flex-shrink: 0;
        }

.satellite-content h4 {
            margin: 0 0 4px 0;
            color: #1e3a8a;
            font-size: 15px;
            font-weight: 700;
        }

.satellite-content p {
            margin: 0;
            color: #64748b;
            font-size: 12px;
            line-height: 1.3;
        }

/* Positioning Satellites */
        /* Center is approx 50% 50% of container */
        .sat-1 { top: 5%; left: 50%; transform: translateX(-50%); } /* Top */
        .sat-2 { top: 30%; right: 0%; } /* Right Top */
        .sat-3 { bottom: 10%; right: 10%; } /* Right Bottom */
        .sat-4 { bottom: 10%; left: 10%; } /* Left Bottom */
        .sat-5 { top: 30%; left: 0%; } /* Left Top */

/* Specific Styles for Satellites */
        .sat-1 .satellite-icon { background-color: #eff6ff; color: #3b82f6; } /* Listening */
        .sat-2 .satellite-icon { background-color: #fff7ed; color: #f97316; } /* Trends */
        .sat-3 .satellite-icon { background-color: #f0fdf4; color: #10b981; } /* Engagement */
        .sat-4 .satellite-icon { background-color: #fdf2f8; color: #db2777; } /* Influencers */
        .sat-5 .satellite-icon { background-color: #fff1f2; color: #e11d48; } /* Scheduling */

/* Connecting Lines (SVG) */
        .connections {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }
        
        .connection-line {
            stroke: #cbd5e1;
            stroke-width: 2;
            stroke-dasharray: 6;
        }

/* Stats Section */
        .stats-column {
            flex: 0.8;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 30px;
            padding-left: 40px;
            border-left: 1px solid #f1f5f9;
        }

.stat-box {
            background: white;
            padding: 25px;
            border-radius: 16px;
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
            text-align: center;
            border-bottom: 4px solid transparent;
        }

.stat-box.engagement { border-bottom-color: #f97316; }
        .stat-box.time { border-bottom-color: #3b82f6; }

.stat-number {
            display: block;
            font-size: 42px;
            font-weight: 900;
            margin-bottom: 5px;
            line-height: 1;
        }
        
        .stat-label {
            color: #64748b;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
        }

.text-orange { color: #f97316; }
        .text-blue { color: #3b82f6; }

</style>
</head>
<body>
<div class="slide-container">

<div class="header">
<div class="section-tag">PARTIE 2 : IA ET MARKETING</div>
<h1 class="main-title">Social Media Marketing et IA</h1>
</div>

<div class="content-wrapper">

<div class="diagram-container">

<svg class="connections">

<line class="connection-line" x1="50%" x2="50%" y1="50%" y2="15%"></line>
<line class="connection-line" x1="50%" x2="85%" y1="50%" y2="38%"></line>
<line class="connection-line" x1="50%" x2="75%" y1="50%" y2="82%"></line>
<line class="connection-line" x1="50%" x2="25%" y1="50%" y2="82%"></line>
<line class="connection-line" x1="50%" x2="15%" y1="50%" y2="38%"></line>
</svg>

<div class="central-hub">
<i class="fas fa-brain"></i>
<h3>IA<br/>Marketing<br/>Social</h3>
</div>

<div class="satellite sat-1">
<div class="satellite-icon">
<i class="fas fa-headphones-alt"></i>
</div>
<div class="satellite-content">
<h4>Écoute Sociale</h4>
<p>Analyse de sentiment & feedback client en temps réel</p>
</div>
</div>
<div class="satellite sat-2">
<div class="satellite-icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="satellite-content">
<h4>Détection de Tendances</h4>
<p>Identification des sujets viraux avant qu'ils n'explosent</p>
</div>
</div>
<div class="satellite sat-3">
<div class="satellite-icon">
<i class="fas fa-comments"></i>
</div>
<div class="satellite-content">
<h4>Engagement Automatisé</h4>
<p>Réponses intelligentes aux commentaires standards</p>
</div>
</div>
<div class="satellite sat-4">
<div class="satellite-icon">
<i class="fas fa-star"></i>
</div>
<div class="satellite-content">
<h4>Influenceurs Pertinents</h4>
<p>Matching précis marque-créateur via data</p>
</div>
</div>
<div class="satellite sat-5">
<div class="satellite-icon">
<i class="fas fa-clock"></i>
</div>
<div class="satellite-content">
<h4>Planification Optimale</h4>
<p>Publication aux heures de pic d'audience prédits</p>
</div>
</div>
</div>

<div class="stats-column">
<div class="stat-box engagement">
<span class="stat-number text-orange">+85%</span>
<span class="stat-label">D'Engagement</span>
<p class="text-xs text-gray-400 mt-2">Grâce à la pertinence du contenu</p>
</div>
<div class="stat-box time">
<span class="stat-number text-blue">-60%</span>
<span class="stat-label">Temps de Gestion</span>
<p class="text-xs text-gray-400 mt-2">Automatisation des tâches manuelles</p>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">17</div>
<div class="absolute bottom-0 left-0 w-full h-2">
<div style="width: 33%; height: 100%; background-color: #1e3a8a; float: left;"></div>
<div style="width: 33%; height: 100%; background-color: #3b82f6; float: left;"></div>
<div style="width: 34%; height: 100%; background-color: #f97316; float: left;"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Email Marketing Optimisé par IA</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Content Wrapper */
        .content-wrapper {
            display: flex;
            flex: 1;
            padding: 20px 60px 40px 60px;
            gap: 40px;
            position: relative;
            align-items: center;
        }

/* Funnel Container */
        .funnel-container {
            flex: 1.5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 100%;
        }

/* Funnel Layers */
        .funnel-layer {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            margin-bottom: 15px;
            z-index: 2;
        }

.layer-shape {
            flex: 1;
            height: 90px;
            background-color: #eff6ff;
            clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }

/* Specific Widths for Funnel Shape simulation */
        .layer-1 .layer-shape { width: 100%; clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); background-color: #1e3a8a; }
        .layer-2 .layer-shape { width: 85%; margin: 0 auto; clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); background-color: #2563eb; }
        .layer-3 .layer-shape { width: 70%; margin: 0 auto; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background-color: #3b82f6; }
        .layer-4 .layer-shape { width: 55%; margin: 0 auto; clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%); background-color: #f97316; }

.layer-content {
            display: flex;
            align-items: center;
            width: 100%;
            padding: 0 40px;
            justify-content: space-between;
            color: white;
        }

.layer-title {
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
        }

.layer-title i {
            margin-right: 15px;
            font-size: 24px;
            opacity: 0.8;
        }

.layer-stat {
            font-size: 32px;
            font-weight: 900;
            background-color: rgba(255,255,255,0.2);
            padding: 5px 15px;
            border-radius: 8px;
        }

/* Right Column: AI Optimizations */
        .optimizations-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-left: 20px;
            border-left: 1px solid #e2e8f0;
        }

.opt-title {
            font-size: 18px;
            font-weight: 700;
            color: #475569;
            text-transform: uppercase;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }

.opt-card {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            border: 1px solid #f1f5f9;
            display: flex;
            align-items: flex-start;
            transition: all 0.3s ease;
        }

.opt-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
            border-color: #bfdbfe;
        }

.opt-icon {
            width: 45px;
            height: 45px;
            border-radius: 10px;
            background-color: #eff6ff;
            color: #2563eb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-right: 15px;
            flex-shrink: 0;
        }

.opt-text h4 {
            margin: 0 0 5px 0;
            color: #1e3a8a;
            font-size: 16px;
            font-weight: 700;
        }

.opt-text p {
            margin: 0;
            color: #64748b;
            font-size: 14px;
            line-height: 1.4;
        }

/* Connecting Lines */
        .connector {
            position: absolute;
            left: -20px;
            top: 50%;
            width: 20px;
            height: 2px;
            background-color: #cbd5e1;
            display: none; /* Hidden for now, maybe too cluttered */
        }

/* Decorative Background Elements */
        .bg-circle {
            position: absolute;
            border-radius: 50%;
            z-index: 0;
            opacity: 0.5;
        }
        .bg-c1 { top: 10%; right: 10%; width: 200px; height: 200px; background-color: #f0f9ff; }
        .bg-c2 { bottom: 10%; left: 10%; width: 150px; height: 150px; background-color: #fff7ed; }

</style>
</head>
<body>
<div class="slide-container">
<div class="bg-circle bg-c1"></div>
<div class="bg-circle bg-c2"></div>

<div class="header">
<div class="section-tag">PARTIE 2 : IA ET MARKETING</div>
<h1 class="main-title">Email Marketing optimisé par IA</h1>
</div>

<div class="content-wrapper">

<div class="funnel-container">

<div class="funnel-layer layer-1">
<div class="layer-shape">
<div class="layer-content">
<div class="layer-title"><i class="fas fa-paper-plane"></i> Délivrabilité</div>
<div class="layer-stat">99%</div>
</div>
</div>
</div>

<div class="funnel-layer layer-2">
<div class="layer-shape">
<div class="layer-content">
<div class="layer-title"><i class="fas fa-envelope-open-text"></i> Ouverture</div>
<div class="layer-stat">45%</div>
</div>
</div>
</div>

<div class="funnel-layer layer-3">
<div class="layer-shape">
<div class="layer-content">
<div class="layer-title"><i class="fas fa-mouse-pointer"></i> Clic</div>
<div class="layer-stat">18%</div>
</div>
</div>
</div>

<div class="funnel-layer layer-4">
<div class="layer-shape">
<div class="layer-content">
<div class="layer-title"><i class="fas fa-shopping-cart"></i> Conversion</div>
<div class="layer-stat">8%</div>
</div>
</div>
</div>
</div>

<div class="optimizations-container">
<div class="opt-title">Optimisations IA Clés</div>
<div class="opt-card">
<div class="opt-icon">
<i class="fas fa-clock"></i>
</div>
<div class="opt-text">
<h4>Timing d'Envoi Prédictif</h4>
<p>L'IA envoie l'email au moment exact où chaque destinataire est le plus susceptible de l'ouvrir.</p>
</div>
</div>
<div class="opt-card">
<div class="opt-icon">
<i class="fas fa-pen-fancy"></i>
</div>
<div class="opt-text">
<h4>Personnalisation Contenu & Objet</h4>
<p>Génération automatique d'objets accrocheurs et de blocs de produits adaptés aux goûts de chacun.</p>
</div>
</div>
<div class="opt-card">
<div class="opt-icon">
<i class="fas fa-users-cog"></i>
</div>
<div class="opt-text">
<h4>Segmentation Dynamique</h4>
<p>Mise à jour en temps réel des listes selon le comportement (ex: "dormants" réactivés).</p>
</div>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">18</div>
<div class="absolute bottom-0 left-0 w-full h-2">
<div style="width: 33%; height: 100%; background-color: #1e3a8a; float: left;"></div>
<div style="width: 33%; height: 100%; background-color: #3b82f6; float: left;"></div>
<div style="width: 34%; height: 100%; background-color: #f97316; float: left;"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>

.layer-title {
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
        }

.layer-title i {
            margin-right: 15px;
            font-size: 24px;
            opacity: 0.8;
        }

.layer-stat {
            font-size: 32px;
            font-weight: 900;
            background-color: rgba(255,255,255,0.2);
            padding: 5px 15px;
            border-radius: 8px;
        }

.opt-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
            border-color: #bfdbfe;
        }

.opt-text h4 {
            margin: 0 0 5px 0;
            color: #1e3a8a;
            font-size: 16px;
            font-weight: 700;
        }

.opt-text p {
            margin: 0;
            color: #64748b;
            font-size: 14px;
            line-height: 1.4;
        }

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Mesure de performance et ROI</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Content Wrapper */
        .content-wrapper {
            display: flex;
            flex: 1;
            padding: 20px 60px 50px 60px;
            gap: 30px;
            background-color: #f8fafc; /* Slight bg change for dashboard feel */
        }

/* Sidebar KPIs */
        .kpi-sidebar {
            flex: 0 0 280px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            justify-content: space-between;
        }

.kpi-card {
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            border-left: 5px solid transparent;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            transition: transform 0.2s;
        }

.kpi-card:hover {
            transform: translateX(5px);
        }

.kpi-card.blue { border-left-color: #3b82f6; }
        .kpi-card.orange { border-left-color: #f97316; }

.kpi-icon {
            font-size: 24px;
            margin-bottom: 10px;
            opacity: 0.8;
        }
        .blue .kpi-icon { color: #3b82f6; }
        .orange .kpi-icon { color: #f97316; }

.kpi-value {
            font-size: 36px;
            font-weight: 900;
            color: #1e3a8a;
            line-height: 1;
            margin-bottom: 5px;
        }

.kpi-label {
            font-size: 13px;
            color: #64748b;
            font-weight: 500;
            text-transform: uppercase;
        }

/* Main Dashboard Area */
        .dashboard-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

/* Chart Section */
        .chart-section {
            flex: 2;
            background-color: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            border: 1px solid #e2e8f0;
        }

.chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

.chart-title {
            font-size: 18px;
            font-weight: 700;
            color: #1e3a8a;
        }

.chart-legend {
            display: flex;
            gap: 15px;
            font-size: 12px;
            color: #64748b;
        }

.legend-item { display: flex; align-items: center; gap: 5px; }
        .dot { width: 10px; height: 10px; border-radius: 50%; }
        .dot-blue { background-color: #3b82f6; }
        .dot-gray { background-color: #cbd5e1; }

.chart-container {
            flex: 1;
            position: relative;
            width: 100%;
        }

/* Methods Grid (Bottom) */
        .methods-grid {
            flex: 1;
            display: flex;
            gap: 20px;
        }

.method-card {
            flex: 1;
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            border: 1px solid #e2e8f0;
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

.method-icon {
            width: 40px;
            height: 40px;
            background-color: #eff6ff;
            color: #3b82f6;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

.method-content h4 {
            margin: 0 0 5px 0;
            color: #1e3a8a;
            font-size: 15px;
            font-weight: 700;
        }

.method-content p {
            margin: 0;
            color: #64748b;
            font-size: 12px;
            line-height: 1.4;
        }

/* Footer */
        .footer-num {
            position: absolute;
            bottom: 20px;
            right: 40px;
            color: #94a3b8;
            font-size: 14px;
        }
        
        .footer-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 8px;
            display: flex;
        }
        .bar-segment { height: 100%; }

</style>
</head>
<body>
<div class="slide-container">

<div class="header" style="background-color: white;">
<div class="section-tag">PARTIE 2 : IA ET MARKETING</div>
<h1 class="main-title">Mesure de performance et ROI</h1>
</div>

<div class="content-wrapper">

<div class="kpi-sidebar">

<div class="kpi-card orange">
<i class="fas fa-chart-line kpi-icon"></i>
<span class="kpi-value">+120%</span>
<span class="kpi-label">ROI Moyen des Campagnes</span>
</div>

<div class="kpi-card blue">
<i class="fas fa-wallet kpi-icon"></i>
<span class="kpi-value">-45%</span>
<span class="kpi-label">Coût d'Acquisition (CAC)</span>
</div>

<div class="kpi-card blue">
<i class="fas fa-filter kpi-icon"></i>
<span class="kpi-value">x2.5</span>
<span class="kpi-label">Taux de Conversion</span>
</div>

<div class="kpi-card orange">
<i class="fas fa-coins kpi-icon"></i>
<span class="kpi-value">+18%</span>
<span class="kpi-label">Revenus Incrémentaux</span>
</div>
</div>

<div class="dashboard-main">

<div class="chart-section">
<div class="chart-header">
<h3 class="chart-title">Impact de l'IA sur la Performance Commerciale</h3>
<div class="chart-legend">
<div class="legend-item"><div class="dot dot-gray"></div><span>Approche Traditionnelle</span></div>
<div class="legend-item"><div class="dot dot-blue"></div><span>Optimisé par IA</span></div>
</div>
</div>
<div class="chart-container">
<canvas id="roiChart"></canvas>
</div>
</div>

<div class="methods-grid">

<div class="method-card">
<div class="method-icon"><i class="fas fa-sitemap"></i></div>
<div class="method-content">
<h4>Attribution Multi-touch</h4>
<p>Analyse de tous les points de contact pour valoriser le parcours client complet, pas juste le dernier clic.</p>
</div>
</div>

<div class="method-card">
<div class="method-icon"><i class="fas fa-crystal-ball"></i></div>
<div class="method-content">
<h4>LTV Prédictive</h4>
<p>Estimation de la valeur future d'un client (Lifetime Value) dès son acquisition pour ajuster les budgets.</p>
</div>
</div>

<div class="method-card">
<div class="method-icon"><i class="fas fa-vial"></i></div>
<div class="method-content">
<h4>Tests A/B Automatisés</h4>
<p>Expérimentation continue sur des milliers de variables pour isoler scientifiquement ce qui fonctionne.</p>
</div>
</div>
</div>
</div>
</div>

<div class="footer-num">20</div>
<div class="footer-bar">
<div class="bar-segment" style="width: 33%; background-color: #1e3a8a;"></div>
<div class="bar-segment" style="width: 33%; background-color: #3b82f6;"></div>
<div class="bar-segment" style="width: 34%; background-color: #f97316;"></div>
</div>
</div>

<script>
        const ctx = document.getElementById('roiChart').getContext('2d');
        
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Mois 1', 'Mois 2', 'Mois 3', 'Mois 4', 'Mois 5', 'Mois 6'],
                datasets: [
                    {
                        label: 'Optimisé par IA',
                        data: [100, 130, 180, 240, 310, 420],
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 3,
                        tension: 0.4,
                        fill: true,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#3b82f6',
                        pointRadius: 5
                    },
                    {
                        label: 'Approche Traditionnelle',
                        data: [100, 110, 115, 125, 130, 140],
                        borderColor: '#94a3b8',
                        borderWidth: 2,
                        borderDash: [5, 5],
                        tension: 0.4,
                        fill: false,
                        pointRadius: 0
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(30, 58, 138, 0.9)',
                        titleFont: { family: 'Roboto' },
                        bodyFont: { family: 'Roboto' }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        grid: { borderDash: [5, 5], color: '#f1f5f9' },
                        ticks: { font: { family: 'Roboto' } }
                    },
                    x: {
                        grid: { display: false },
                        ticks: { font: { family: 'Roboto' } }
                    }
                }
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Automatisation de la Comptabilité</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Split Content */
        .split-wrapper {
            flex: 1;
            display: flex;
            position: relative;
            padding: 20px 60px 40px 60px;
            gap: 40px;
        }

.feature-icon {
            margin-right: 15px;
            width: 24px;
            text-align: center;
        }

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Détection de Fraude avec l'IA</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Main Content Grid */
        .content-grid {
            display: flex;
            flex: 1;
            padding: 20px 60px 30px 60px;
            gap: 40px;
        }

/* Left Column: Process Flow */
        .process-column {
            flex: 0 0 350px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-right: 20px;
            border-right: 1px solid #f1f5f9;
        }

.step-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
            position: relative;
        }

.step-item:last-child { margin-bottom: 0; }

.step-line {
            position: absolute;
            left: 20px;
            top: 40px;
            bottom: -40px;
            width: 2px;
            background-color: #e2e8f0;
            z-index: 0;
        }
        .step-item:last-child .step-line { display: none; }

.step-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #eff6ff;
            color: #3b82f6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 15px;
            z-index: 2;
            border: 4px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

.step-content h4 {
            margin: 0 0 5px 0;
            color: #1e3a8a;
            font-size: 16px;
            font-weight: 700;
        }

.step-content p {
            margin: 0;
            color: #64748b;
            font-size: 13px;
            line-height: 1.4;
        }

/* Right Column: Dashboard Interface */
        .dashboard-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

/* Mockup Window */
        .dashboard-mockup {
            background-color: #f8fafc;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

.mockup-header {
            background-color: #fff;
            border-bottom: 1px solid #e2e8f0;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.mockup-title {
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            color: #475569;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        
        .live-dot {
            width: 8px;
            height: 8px;
            background-color: #ef4444;
            border-radius: 50%;
            margin-right: 8px;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
        }

.mockup-body {
            padding: 20px;
            display: flex;
            gap: 20px;
            flex: 1;
        }

/* Alert Card */
        .alert-detail {
            flex: 2;
            background-color: white;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            padding: 20px;
            border-left: 4px solid #ef4444;
        }

.alert-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            border-bottom: 1px solid #f1f5f9;
            padding-bottom: 10px;
        }

.txn-id {
            font-family: 'Fira Code', monospace;
            color: #64748b;
            font-size: 12px;
            background-color: #f1f5f9;
            padding: 2px 6px;
            border-radius: 4px;
        }

.risk-score-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

.score-donut {
            width: 80px;
            height: 80px;
            position: relative;
        }
        
        .score-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            font-weight: 900;
            color: #ef4444;
        }

.anomaly-list {
            margin-top: 15px;
        }
        
        .anomaly-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 13px;
            color: #475569;
            background-color: #fef2f2;
            padding: 8px;
            border-radius: 6px;
            border: 1px solid #fee2e2;
        }
        
        .anomaly-icon {
            color: #ef4444;
            margin-right: 10px;
        }

/* Recent Activity List */
        .recent-list {
            flex: 1.2;
            background-color: white;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

.list-header {
            padding: 10px 15px;
            background-color: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            font-size: 12px;
            font-weight: 700;
            color: #64748b;
        }

.list-row {
            padding: 10px 15px;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
        }
        
        .status-badge {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 700;
        }
        .status-safe { background-color: #ecfdf5; color: #10b981; }
        .status-warn { background-color: #fff7ed; color: #f97316; }
        .status-danger { background-color: #fef2f2; color: #ef4444; }

/* Bottom Stats Bar */
        .stats-bar {
            display: flex;
            gap: 20px;
            margin-top: auto;
            background-color: #1e3a8a;
            border-radius: 12px;
            padding: 15px 30px;
            color: white;
            align-items: center;
            justify-content: space-between;
        }

.stat-item {
            display: flex;
            align-items: center;
        }

.stat-val {
            font-size: 28px;
            font-weight: 900;
            margin-right: 10px;
            color: #f97316;
        }

.stat-desc {
            font-size: 13px;
            line-height: 1.2;
            color: #e2e8f0;
            max-width: 150px;
        }

.loop-arrow {
            position: absolute;
            right: -25px;
            top: 50%;
            font-size: 24px;
            color: #cbd5e1;
            transform: translateY(-50%);
        }

</style>
</head>
<body>
<div class="slide-container">

<div class="header">
<div class="section-tag">PARTIE 3 : IA EN COMPTABILITÉ ET FINANCE</div>
<h1 class="main-title">Détection de Fraude avec l'IA</h1>
</div>

<div class="content-grid">

<div class="process-column">
<div class="step-item">
<div class="step-line"></div>
<div class="step-icon"><i class="fas fa-search-dollar"></i></div>
<div class="step-content">
<h4>1. Monitoring 24/7</h4>
<p>Surveillance continue des transactions et comportements utilisateurs.</p>
</div>
</div>
<div class="step-item">
<div class="step-line"></div>
<div class="step-icon"><i class="fas fa-brain"></i></div>
<div class="step-content">
<h4>2. Analyse IA</h4>
<p>Détection de patterns complexes et anomalies invisibles à l'humain.</p>
</div>
</div>
<div class="step-item">
<div class="step-line"></div>
<div class="step-icon"><i class="fas fa-tachometer-alt"></i></div>
<div class="step-content">
<h4>3. Scoring Risque</h4>
<p>Attribution d'un score de 0 à 100 pour chaque action en temps réel.</p>
</div>
</div>
<div class="step-item">
<div class="step-line"></div>
<div class="step-icon"><i class="fas fa-shield-alt"></i></div>
<div class="step-content">
<h4>4. Alerte & Action</h4>
<p>Blocage immédiat ou demande de vérification supplémentaire.</p>
</div>
</div>

<div class="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-100 flex items-center text-sm text-blue-800">
<i class="fas fa-sync-alt mr-3 text-blue-500"></i>
<p><strong>Boucle d'apprentissage :</strong> Chaque confirmation de fraude rend l'IA plus intelligente.</p>
</div>
</div>

<div class="dashboard-column">
<div class="dashboard-mockup">
<div class="mockup-header">
<span class="mockup-title"><div class="live-dot"></div> SYSTÈME DE DÉTECTION - VUE ANALYSTE</span>
<i class="fas fa-cog text-gray-400"></i>
</div>
<div class="mockup-body">

<div class="alert-detail">
<div class="alert-header">
<span class="text-red-600 font-bold text-sm"><i class="fas fa-exclamation-triangle"></i> ALERTE CRITIQUE</span>
<span class="txn-id">TXN-9842-XJ</span>
</div>
<div class="risk-score-container">
<div class="score-donut">

<svg class="w-full h-full" viewbox="0 0 36 36">
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#e2e8f0" stroke-width="4"></path>
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#ef4444" stroke-dasharray="92, 100" stroke-width="4"></path>
</svg>
<div class="score-text">92</div>
</div>
<div>
<h3 class="font-bold text-gray-800 m-0">Risque Élevé</h3>
<p class="text-xs text-gray-500 m-0">Score de confiance : 98%</p>
</div>
</div>
<div class="anomaly-list">
<p class="text-xs font-bold text-gray-500 uppercase mb-2">Anomalies Détectées</p>
<div class="anomaly-item">
<i class="fas fa-map-marker-alt anomaly-icon"></i>
<p><strong>Géolocalisation :</strong> Connexion depuis Lagos, Nigeria (Inhabituel)</p>
</div>
<div class="anomaly-item">
<i class="fas fa-money-bill-wave anomaly-icon"></i>
<p><strong>Montant :</strong> 4,500€ (300% > moyenne)</p>
</div>
<div class="anomaly-item">
<i class="fas fa-mouse-pointer anomaly-icon"></i>
<p><strong>Comportement :</strong> Vitesse de frappe non reconnue</p>
</div>
</div>
<div class="mt-4 flex gap-2">
<button class="bg-red-600 text-white text-xs font-bold py-2 px-4 rounded hover:bg-red-700 w-full">BLOQUER</button>
<button class="bg-gray-200 text-gray-700 text-xs font-bold py-2 px-4 rounded hover:bg-gray-300 w-full">VÉRIFIER</button>
</div>
</div>

<div class="recent-list">
<div class="list-header">ACTIVITÉ RÉCENTE</div>
<div class="list-row">
<span class="text-gray-600 font-mono">TXN-9841</span>
<span class="status-badge status-safe">SÉCURISÉ</span>
</div>
<div class="list-row">
<span class="text-gray-600 font-mono">TXN-9840</span>
<span class="status-badge status-safe">SÉCURISÉ</span>
</div>
<div class="list-row bg-orange-50">
<span class="text-gray-800 font-bold font-mono">TXN-9839</span>
<span class="status-badge status-warn">SUSPECT</span>
</div>
<div class="list-row">
<span class="text-gray-600 font-mono">TXN-9838</span>
<span class="status-badge status-safe">SÉCURISÉ</span>
</div>
<div class="list-row">
<span class="text-gray-600 font-mono">TXN-9837</span>
<span class="status-badge status-safe">SÉCURISÉ</span>
</div>
</div>
</div>
</div>

<div class="stats-bar">
<div class="stat-item">
<span class="stat-val">95%</span>
<span class="stat-desc">Taux de détection<br/>de fraude</span>
</div>
<div class="h-8 w-px bg-blue-400 opacity-50"></div>
<div class="stat-item">
<span class="stat-val"><0.5%</span>
<span class="stat-desc">Faux Positifs<br/>(Blocages abusifs)</span>
</div>
<div class="h-8 w-px bg-blue-400 opacity-50"></div>
<div class="stat-item">
<span class="stat-val text-green-400">-80%</span>
<span class="stat-desc">Pertes financières<br/>liées à la fraude</span>
</div>
</div>
</div>
</div>

<div class="absolute bottom-4 right-8 text-gray-400 text-sm">22</div>
<div class="absolute bottom-0 left-0 w-full h-2">
<div style="width: 33%; height: 100%; background-color: #1e3a8a; float: left;"></div>
<div style="width: 33%; height: 100%; background-color: #3b82f6; float: left;"></div>
<div style="width: 34%; height: 100%; background-color: #f97316; float: left;"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Analyse Financière Prédictive</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

/* Content Wrapper */
        .content-wrapper {
            display: flex;
            flex: 1;
            padding: 20px 60px 40px 60px;
            gap: 50px;
        }

.concept-card:hover {
            background-color: #eff6ff;
            transform: translateX(5px);
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        }

/* Right Column: Chart & Stats */
        .visuals-column {
            flex: 0.6;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

.chart-canvas-wrapper {
            flex: 1;
            position: relative;
            width: 100%;
            height: 100%;
        }

/* Stats Row */
        .stats-row {
            display: flex;
            gap: 20px;
            flex: 1;
        }

.stat-card.primary { background-color: #1e3a8a; }
        .stat-card.secondary { background-color: #f97316; }

new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov', 'Déc'],
                datasets: [
                    {
                        label: 'Budget Initial',
                        data: [100, 105, 110, 115, 120, 125, 130, 135, 140, 145, 150, 155],
                        borderColor: '#94a3b8',
                        borderDash: [5, 5],
                        borderWidth: 2,
                        pointRadius: 0,
                        tension: 0,
                        fill: false
                    },
                    {
                        label: 'Réel (Historique)',
                        data: [102, 108, 106, 118, 124, 122, 135, 132, null, null, null, null],
                        borderColor: '#1e3a8a',
                        backgroundColor: 'transparent',
                        borderWidth: 3,
                        tension: 0.3,
                        pointRadius: 3,
                        pointBackgroundColor: '#1e3a8a'
                    },
                    {
                        label: 'Prévision IA (Ajustée)',
                        data: [null, null, null, null, null, null, null, 132, 138, 142, 152, 160],
                        borderColor: '#f97316',
                        backgroundColor: gradientIA,
                        borderWidth: 3,
                        tension: 0.3,
                        fill: true,
                        pointRadius: 4,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#f97316'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            usePointStyle: true,
                            boxWidth: 8,
                            padding: 20,
                            font: { family: 'Roboto', size: 12 }
                        }
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(30, 58, 138, 0.9)',
                        titleFont: { family: 'Roboto', size: 13 },
                        bodyFont: { family: 'Roboto', size: 12 },
                        cornerRadius: 8,
                        displayColors: true
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        grid: { borderDash: [5, 5], color: '#f1f5f9' },
                        ticks: { display: false } // Cleaner look
                    },
                    x: {
                        grid: { display: false },
                        ticks: { font: { size: 11 }, color: '#64748b' }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Audit Intelligent et Conformité</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }